| | <!DOCTYPE html> |
| | <html lang="fr"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>FDA Risk Analyzer - Outil d'Analyse des Risques Alimentaires</title> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <style> |
| | :root { |
| | --primary-color: #003366; |
| | --primary-light: #0055a4; |
| | --accent-color: #fdb81e; |
| | --danger-color: #d93025; |
| | --warning-color: #f59e0b; |
| | --success-color: #1e8e3e; |
| | --bg-color: #f8f9fa; |
| | --surface-color: #ffffff; |
| | --text-primary: #202124; |
| | --text-secondary: #5f6368; |
| | --border-color: #dee2e6; |
| | --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); |
| | --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); |
| | --border-radius: 8px; |
| | --transition: all 0.3s ease-in-out; |
| | } |
| | |
| | * { |
| | box-sizing: border-box; |
| | margin: 0; |
| | padding: 0; |
| | } |
| | |
| | body { |
| | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; |
| | background-color: var(--bg-color); |
| | color: var(--text-primary); |
| | line-height: 1.5; |
| | } |
| | |
| | .header { |
| | background: var(--surface-color); |
| | border-bottom: 1px solid var(--border-color); |
| | padding: 1rem 0; |
| | position: sticky; |
| | top: 0; |
| | z-index: 1000; |
| | box-shadow: var(--shadow-sm); |
| | } |
| | |
| | .header-content { |
| | max-width: 1600px; |
| | margin: 0 auto; |
| | padding: 0 2rem; |
| | display: flex; |
| | align-items: center; |
| | justify-content: space-between; |
| | } |
| | |
| | .logo { |
| | display: flex; |
| | align-items: center; |
| | gap: 0.75rem; |
| | color: var(--primary-color); |
| | font-weight: 600; |
| | font-size: 1.25rem; |
| | } |
| | |
| | .logo-icon { |
| | width: 32px; |
| | height: 32px; |
| | background-color: var(--primary-color); |
| | border-radius: 6px; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | color: white; |
| | font-size: 1rem; |
| | } |
| | |
| | .guide-btn { |
| | background-color: var(--primary-color); |
| | color: white; |
| | border: none; |
| | padding: 0.6rem 1.2rem; |
| | border-radius: var(--border-radius); |
| | cursor: pointer; |
| | font-size: 0.9rem; |
| | transition: var(--transition); |
| | display: flex; |
| | align-items: center; |
| | gap: 0.5rem; |
| | } |
| | |
| | .guide-btn:hover { |
| | background-color: var(--primary-light); |
| | } |
| | |
| | .container { |
| | max-width: 1600px; |
| | margin: 2rem auto; |
| | padding: 0 2rem; |
| | } |
| | |
| | .welcome-guide { |
| | background-color: #e7f3ff; |
| | border: 1px solid #a8c7fa; |
| | border-radius: var(--border-radius); |
| | padding: 1.5rem; |
| | margin-bottom: 2rem; |
| | position: relative; |
| | animation: fadeIn 0.5s; |
| | } |
| | |
| | .methodology-info { |
| | background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); |
| | border: 1px solid #0ea5e9; |
| | border-radius: var(--border-radius); |
| | margin-bottom: 2rem; |
| | overflow: hidden; |
| | box-shadow: var(--shadow-sm); |
| | } |
| | |
| | .methodology-header { |
| | background: var(--primary-color); |
| | color: white; |
| | padding: 1rem 1.5rem; |
| | cursor: pointer; |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
| | transition: var(--transition); |
| | } |
| | |
| | .methodology-header:hover { |
| | background-color: var(--primary-light); |
| | } |
| | |
| | .methodology-title { |
| | font-size: 1.1rem; |
| | font-weight: 600; |
| | margin: 0; |
| | display: flex; |
| | align-items: center; |
| | gap: 0.5rem; |
| | } |
| | |
| | .methodology-toggle { |
| | font-size: 1.2rem; |
| | transition: transform 0.3s ease; |
| | } |
| | |
| | .methodology-toggle.expanded { |
| | transform: rotate(180deg); |
| | } |
| | |
| | .methodology-content { |
| | max-height: 0; |
| | overflow: hidden; |
| | transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out; |
| | padding: 0 2rem; |
| | } |
| | |
| | .methodology-content.expanded { |
| | max-height: 3000px; |
| | padding: 2rem; |
| | } |
| | |
| | .methodology-inner { |
| | |
| | } |
| | |
| | .methodology-section { |
| | margin-bottom: 2rem; |
| | } |
| | |
| | .methodology-section:last-child { |
| | margin-bottom: 0; |
| | } |
| | |
| | .methodology-section h4 { |
| | color: var(--primary-color); |
| | font-size: 1.1rem; |
| | margin: 0 0 1rem 0; |
| | display: flex; |
| | align-items: center; |
| | gap: 0.5rem; |
| | } |
| | |
| | .methodology-section p { |
| | margin-bottom: 1rem; |
| | line-height: 1.6; |
| | } |
| | |
| | .methodology-section ul { |
| | padding-left: 1.5rem; |
| | margin-bottom: 1rem; |
| | } |
| | |
| | .methodology-section li { |
| | margin-bottom: 0.5rem; |
| | line-height: 1.5; |
| | } |
| | |
| | .highlight-box { |
| | background: rgba(251, 191, 36, 0.1); |
| | border-left: 4px solid #f59e0b; |
| | padding: 1rem; |
| | margin: 1rem 0; |
| | border-radius: 0 var(--border-radius) var(--border-radius) 0; |
| | } |
| | |
| | .reference-section { |
| | background: var(--bg-color); |
| | border-radius: var(--border-radius); |
| | padding: 1.5rem; |
| | margin-top: 1.5rem; |
| | } |
| | |
| | .reference-section h5 { |
| | color: var(--primary-color); |
| | margin: 0 0 1rem 0; |
| | font-size: 1rem; |
| | } |
| | |
| | .reference-list { |
| | list-style: none; |
| | padding: 0; |
| | margin: 0; |
| | } |
| | |
| | .reference-list li { |
| | margin-bottom: 0.75rem; |
| | padding-left: 1.5rem; |
| | position: relative; |
| | font-size: 0.9rem; |
| | } |
| | |
| | .reference-list li:before { |
| | content: "📄"; |
| | position: absolute; |
| | left: 0; |
| | } |
| | |
| | .reference-list a { |
| | color: var(--primary-light); |
| | text-decoration: none; |
| | } |
| | |
| | .reference-list a:hover { |
| | text-decoration: underline; |
| | } |
| | |
| | .haccp-integration { |
| | background: rgba(30, 142, 62, 0.1); |
| | border: 2px solid var(--success-color); |
| | border-radius: var(--border-radius); |
| | padding: 1.5rem; |
| | margin: 1.5rem 0; |
| | } |
| | |
| | .haccp-integration h5 { |
| | color: var(--success-color); |
| | margin: 0 0 1rem 0; |
| | display: flex; |
| | align-items: center; |
| | gap: 0.5rem; |
| | } |
| | |
| | .welcome-guide h3 { |
| | margin: 0 0 1rem 0; |
| | color: var(--primary-color); |
| | } |
| | |
| | .guide-steps { |
| | display: grid; |
| | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| | gap: 1.5rem; |
| | } |
| | |
| | .guide-step { |
| | font-size: 0.9rem; |
| | } |
| | |
| | .guide-step strong { |
| | color: var(--text-primary); |
| | } |
| | |
| | .close-guide { |
| | position: absolute; |
| | top: 0.5rem; |
| | right: 0.5rem; |
| | background: none; |
| | border: none; |
| | font-size: 1.5rem; |
| | cursor: pointer; |
| | color: var(--text-secondary); |
| | } |
| | |
| | .controls-panel { |
| | background: var(--surface-color); |
| | border-radius: var(--border-radius); |
| | padding: 1.5rem; |
| | margin-bottom: 2rem; |
| | box-shadow: var(--shadow-md); |
| | border: 1px solid var(--border-color); |
| | } |
| | |
| | .view-selector { |
| | display: flex; |
| | flex-wrap: wrap; |
| | gap: 0.5rem; |
| | border-bottom: 1px solid var(--border-color); |
| | padding-bottom: 1rem; |
| | margin-bottom: 1rem; |
| | } |
| | |
| | .view-btn { |
| | padding: 0.6rem 1.2rem; |
| | border: 1px solid transparent; |
| | background: none; |
| | color: var(--text-secondary); |
| | cursor: pointer; |
| | font-size: 0.95rem; |
| | font-weight: 500; |
| | border-bottom: 3px solid transparent; |
| | border-radius: 6px; |
| | transition: var(--transition); |
| | } |
| | |
| | .view-btn.active { |
| | color: var(--primary-light); |
| | background-color: #e7f3ff; |
| | border-color: var(--primary-light); |
| | } |
| | |
| | .view-btn:hover:not(.active) { |
| | background-color: #f0f7ff; |
| | } |
| | |
| | #main-view-controls { |
| | display: grid; |
| | grid-template-columns: 1fr auto; |
| | gap: 1rem; |
| | align-items: center; |
| | } |
| | |
| | #comparison-view-controls { |
| | display: grid; |
| | grid-template-columns: 1fr 1fr; |
| | gap: 1rem; |
| | align-items: center; |
| | } |
| | |
| | .search-container { |
| | position: relative; |
| | } |
| | |
| | .search-input { |
| | width: 100%; |
| | padding: 0.75rem 1rem 0.75rem 2.5rem; |
| | border: 1px solid var(--border-color); |
| | border-radius: var(--border-radius); |
| | font-size: 1rem; |
| | transition: var(--transition); |
| | } |
| | |
| | .search-input:focus { |
| | outline: none; |
| | border-color: var(--primary-light); |
| | box-shadow: 0 0 0 3px rgba(0, 85, 164, 0.1); |
| | } |
| | |
| | .search-icon { |
| | position: absolute; |
| | left: 0.75rem; |
| | top: 50%; |
| | transform: translateY(-50%); |
| | color: var(--text-secondary); |
| | } |
| | |
| | .filter-select { |
| | padding: 0.75rem; |
| | border: 1px solid var(--border-color); |
| | border-radius: var(--border-radius); |
| | background: var(--surface-color); |
| | color: var(--text-primary); |
| | font-size: 0.9rem; |
| | width: 100%; |
| | } |
| | |
| | .dashboard { |
| | display: grid; |
| | grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); |
| | gap: 1.5rem; |
| | margin-bottom: 2rem; |
| | } |
| | |
| | .metric-card { |
| | background: var(--surface-color); |
| | padding: 1.5rem; |
| | border-radius: var(--border-radius); |
| | box-shadow: var(--shadow-sm); |
| | border: 1px solid var(--border-color); |
| | text-align: center; |
| | } |
| | |
| | .metric-label { |
| | font-size: 0.85rem; |
| | color: var(--text-secondary); |
| | margin-bottom: 0.5rem; |
| | } |
| | |
| | .metric-value { |
| | font-size: 1.75rem; |
| | font-weight: 600; |
| | color: var(--text-primary); |
| | } |
| | |
| | .metric-card.high-risk { |
| | border-top: 4px solid var(--danger-color); |
| | } |
| | |
| | .metric-card.medium-risk { |
| | border-top: 4px solid var(--warning-color); |
| | } |
| | |
| | .metric-card.low-risk { |
| | border-top: 4px solid var(--success-color); |
| | } |
| | |
| | #detail-panel { |
| | max-height: 0; |
| | overflow: hidden; |
| | transition: max-height 0.5s ease-in-out, margin 0.5s ease-in-out; |
| | margin-bottom: 0; |
| | } |
| | |
| | #detail-panel.visible { |
| | max-height: 1000px; |
| | margin-bottom: 2rem; |
| | } |
| | |
| | .detail-card { |
| | background-color: var(--surface-color); |
| | border-radius: var(--border-radius); |
| | border: 1px solid var(--border-color); |
| | box-shadow: var(--shadow-md); |
| | padding: 1.5rem; |
| | } |
| | |
| | .detail-layout { |
| | display: grid; |
| | grid-template-columns: 1fr 1fr; |
| | gap: 2rem; |
| | align-items: start; |
| | } |
| | |
| | .chart-title { |
| | font-weight: 600; |
| | color: var(--text-primary); |
| | margin: 0 0 1rem 0; |
| | font-size: 1.1rem; |
| | word-break: break-word; |
| | } |
| | |
| | .chart-canvas-container { |
| | position: relative; |
| | height: 320px; |
| | } |
| | |
| | #comparison-chart-container { |
| | min-height: 600px; |
| | height: auto; |
| | } |
| | |
| | #takeaways-section h4 { |
| | margin: 0 0 1rem 0; |
| | color: var(--primary-color); |
| | } |
| | |
| | #takeaways-list { |
| | list-style: none; |
| | padding: 0; |
| | margin: 0; |
| | display: flex; |
| | flex-direction: column; |
| | gap: 0.75rem; |
| | } |
| | |
| | #takeaways-list li { |
| | display: flex; |
| | align-items: flex-start; |
| | gap: 0.75rem; |
| | font-size: 0.9rem; |
| | } |
| | |
| | #takeaways-list li .icon { |
| | color: var(--warning-color); |
| | font-weight: bold; |
| | margin-top: 2px; |
| | } |
| | |
| | .table-container { |
| | background: var(--surface-color); |
| | border-radius: var(--border-radius); |
| | box-shadow: var(--shadow-md); |
| | border: 1px solid var(--border-color); |
| | overflow: hidden; |
| | } |
| | |
| | .table-header { |
| | padding: 1rem 1.5rem; |
| | border-bottom: 1px solid var(--border-color); |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
| | } |
| | |
| | .table-title { |
| | font-weight: 600; |
| | margin: 0; |
| | } |
| | |
| | .results-count { |
| | color: var(--text-secondary); |
| | font-size: 0.9rem; |
| | } |
| | |
| | .table-wrapper { |
| | overflow-x: auto; |
| | } |
| | |
| | table { |
| | width: 100%; |
| | border-collapse: collapse; |
| | } |
| | |
| | th, td { |
| | padding: 1rem 1.5rem; |
| | text-align: left; |
| | border-bottom: 1px solid var(--border-color); |
| | white-space: nowrap; |
| | } |
| | |
| | tbody tr:last-child td { |
| | border-bottom: none; |
| | } |
| | |
| | th { |
| | background: var(--bg-color); |
| | font-weight: 600; |
| | color: var(--text-secondary); |
| | font-size: 0.85rem; |
| | text-transform: uppercase; |
| | } |
| | |
| | th.sortable { |
| | cursor: pointer; |
| | position: relative; |
| | } |
| | |
| | th.sortable:hover { |
| | color: var(--text-primary); |
| | } |
| | |
| | th.sortable::after { |
| | content: '↕'; |
| | position: absolute; |
| | right: 0.75rem; |
| | opacity: 0.3; |
| | } |
| | |
| | th.sort-asc::after { |
| | content: '↑'; |
| | opacity: 1; |
| | } |
| | |
| | th.sort-desc::after { |
| | content: '↓'; |
| | opacity: 1; |
| | } |
| | |
| | tbody tr.clickable { |
| | cursor: pointer; |
| | } |
| | |
| | tbody tr:hover { |
| | background-color: #e9ecef; |
| | } |
| | |
| | tbody tr.selected { |
| | background-color: #dbeafe !important; |
| | font-weight: 500; |
| | } |
| | |
| | .score-badge { |
| | display: inline-block; |
| | padding: 0.2rem 0.6rem; |
| | border-radius: 1rem; |
| | font-size: 0.8rem; |
| | font-weight: 700; |
| | } |
| | |
| | .score-high { |
| | background-color: #fdeded; |
| | color: #a50e0e; |
| | } |
| | |
| | .score-medium { |
| | background-color: #fff8e1; |
| | color: #6f4f12; |
| | } |
| | |
| | .score-low { |
| | background-color: #e6f4ea; |
| | color: #1b5e20; |
| | } |
| | |
| | #loading-overlay { |
| | position: fixed; |
| | top: 0; |
| | left: 0; |
| | width: 100%; |
| | height: 100%; |
| | background: rgba(255, 255, 255, 0.9); |
| | z-index: 3000; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | text-align: center; |
| | font-size: 1.2rem; |
| | color: var(--primary-color); |
| | transition: opacity 0.3s; |
| | } |
| | |
| | .spinner { |
| | width: 50px; |
| | height: 50px; |
| | border: 5px solid rgba(0, 51, 102, 0.2); |
| | border-top: 5px solid var(--primary-color); |
| | border-radius: 50%; |
| | animation: spin 1s linear infinite; |
| | margin: 0 auto 1rem; |
| | } |
| | |
| | @keyframes spin { |
| | 0% { transform: rotate(0deg); } |
| | 100% { transform: rotate(360deg); } |
| | } |
| | |
| | .modal { |
| | display: none; |
| | position: fixed; |
| | z-index: 2000; |
| | left: 0; |
| | top: 0; |
| | width: 100%; |
| | height: 100%; |
| | overflow: auto; |
| | background-color: rgba(0,0,0,0.5); |
| | backdrop-filter: blur(5px); |
| | } |
| | |
| | .modal-content { |
| | background-color: var(--surface-color); |
| | margin: 5% auto; |
| | padding: 2.5rem; |
| | border: 1px solid var(--border-color); |
| | width: 90%; |
| | max-width: 800px; |
| | border-radius: var(--border-radius); |
| | animation: fadeIn 0.3s; |
| | } |
| | |
| | .modal-header { |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
| | border-bottom: 1px solid var(--border-color); |
| | padding-bottom: 1rem; |
| | margin-bottom: 1.5rem; |
| | } |
| | |
| | .modal-title { |
| | font-size: 1.5rem; |
| | color: var(--primary-color); |
| | margin: 0; |
| | } |
| | |
| | .close-modal { |
| | font-size: 2rem; |
| | font-weight: bold; |
| | color: var(--text-secondary); |
| | cursor: pointer; |
| | } |
| | |
| | .close-modal:hover { |
| | color: var(--text-primary); |
| | } |
| | |
| | .criteria-grid { |
| | display: grid; |
| | grid-template-columns: 1fr 1fr; |
| | gap: 1rem; |
| | margin-top: 1rem; |
| | } |
| | |
| | .criteria-card { |
| | background: var(--bg-color); |
| | padding: 1rem; |
| | border-radius: var(--border-radius); |
| | } |
| | |
| | .criteria-title { |
| | font-weight: 600; |
| | display: block; |
| | margin-bottom: 0.25rem; |
| | } |
| | |
| | .criteria-desc { |
| | font-size: 0.9rem; |
| | color: var(--text-secondary); |
| | } |
| | |
| | .modal-footer { |
| | margin-top: 2rem; |
| | padding-top: 1rem; |
| | border-top: 1px solid var(--border-color); |
| | text-align: center; |
| | font-size: 0.9rem; |
| | } |
| | |
| | .modal-footer a { |
| | color: var(--primary-light); |
| | } |
| | |
| | @keyframes fadeIn { |
| | from { opacity: 0; transform: translateY(-20px); } |
| | to { opacity: 1; transform: translateY(0); } |
| | } |
| | |
| | @media (max-width: 1200px) { |
| | #main-view-controls, #comparison-view-controls { |
| | grid-template-columns: 1fr; |
| | } |
| | .detail-layout { |
| | grid-template-columns: 1fr; |
| | } |
| | } |
| | |
| | @media (max-width: 768px) { |
| | .header-content, .container { |
| | padding: 0 1rem; |
| | } |
| | .view-selector { |
| | flex-direction: column; |
| | } |
| | .dashboard { |
| | grid-template-columns: 1fr; |
| | } |
| | } |
| | |
| | .risk-indicator { |
| | display: inline-block; |
| | width: 12px; |
| | height: 12px; |
| | border-radius: 50%; |
| | margin-right: 8px; |
| | } |
| | |
| | .risk-high { |
| | background-color: var(--danger-color); |
| | } |
| | |
| | .risk-medium { |
| | background-color: var(--warning-color); |
| | } |
| | |
| | .risk-low { |
| | background-color: var(--success-color); |
| | } |
| | |
| | .footer { |
| | text-align: center; |
| | padding: 2rem; |
| | color: var(--text-secondary); |
| | font-size: 0.9rem; |
| | border-top: 1px solid var(--border-color); |
| | margin-top: 2rem; |
| | } |
| | |
| | .error-message { |
| | color: var(--danger-color); |
| | text-align: center; |
| | padding: 2rem; |
| | font-weight: 500; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div id="loading-overlay"> |
| | <div> |
| | <div class="spinner"></div> |
| | <h2>Chargement des données...</h2> |
| | <p>Veuillez patienter.</p> |
| | </div> |
| | </div> |
| | |
| | <header class="header"> |
| | <div class="header-content"> |
| | <div class="logo"> |
| | <div class="logo-icon">🛡️</div> |
| | <span>FDA Risk Analyzer</span> |
| | </div> |
| | <button class="guide-btn" id="guide-btn"> |
| | <i class="fas fa-book"></i> |
| | Guide d'Utilisation |
| | </button> |
| | </div> |
| | </header> |
| |
|
| | <div class="container"> |
| | <div class="welcome-guide" id="welcome-guide"> |
| | <button class="close-guide" id="close-guide">×</button> |
| | <h3>Guide Rapide de l'Outil</h3> |
| | <div class="guide-steps"> |
| | <div class="guide-step"> |
| | <strong>1. Choisissez une Vue</strong><br> |
| | Utilisez les boutons ci-dessous pour sélectionner votre niveau d'analyse. |
| | </div> |
| | <div class="guide-step"> |
| | <strong>2. Filtrez les Données</strong><br> |
| | Utilisez la recherche et les filtres pour affiner les résultats. |
| | </div> |
| | <div class="guide-step"> |
| | <strong>3. Analysez en Profondeur</strong><br> |
| | Cliquez sur les lignes du tableau ou utilisez la vue comparative. |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="methodology-info" id="methodology-info"> |
| | <div class="methodology-header" id="methodology-header"> |
| | <h3 class="methodology-title"> |
| | 🧬 Comprendre la Méthodologie FDA de Classement des Risques |
| | </h3> |
| | <span class="methodology-toggle" id="methodology-toggle">▼</span> |
| | </div> |
| | <div class="methodology-content" id="methodology-content"> |
| | <div class="methodology-inner"> |
| | <div class="methodology-section"> |
| | <h4>🎯 Qu'est-ce que le Modèle de Classement des Risques de la FDA ?</h4> |
| | <p> |
| | Le <strong>FDA Risk-Ranking Model</strong> est un outil scientifique développé par l'administration américaine (FDA) pour <strong>prioriser les efforts de surveillance</strong> et de contrôle dans l'industrie alimentaire. Il permet d'identifier quels couples produit/danger représentent les risques les plus élevés pour la santé publique. |
| | </p> |
| | <div class="highlight-box"> |
| | <strong>🔍 Objectif principal :</strong> Aider les autorités sanitaires et les professionnels de l'alimentaire à concentrer leurs ressources limitées sur les risques qui comptent vraiment. |
| | </div> |
| | </div> |
| |
|
| | <div class="methodology-section"> |
| | <h4>⚙️ Comment ça fonctionne : Les 7 Critères d'Évaluation</h4> |
| | <p>Chaque couple produit/pathogène est évalué selon 7 critères scientifiques, notés de 1 à 9 :</p> |
| | <ul> |
| | <li><strong>C1 - Gravité :</strong> Sévérité des effets sur la santé (mortalité, hospitalisation)</li> |
| | <li><strong>C2 - Exposition :</strong> Fréquence et quantité de consommation du produit</li> |
| | <li><strong>C3 - Dose-Réponse :</strong> Quantité minimale de pathogène nécessaire pour déclencher la maladie</li> |
| | <li><strong>C4 - Croissance :</strong> Capacité du pathogène à survivre/proliférer dans l'aliment</li> |
| | <li><strong>C5 - Traitement :</strong> Efficacité des procédés de décontamination</li> |
| | <li><strong>C6 - Contamination :</strong> Probabilité de contamination à la production</li> |
| | <li><strong>C7 - Consommation :</strong> Mode de préparation (cru, cuit, transformé)</li> |
| | </ul> |
| | <p>Le <strong>score final</strong> est calculé en multipliant ces 7 critères, créant un classement objectif des risques.</p> |
| | </div> |
| |
|
| | <div class="methodology-section"> |
| | <h4>📊 Pourquoi c'est révolutionnaire ?</h4> |
| | <p>Avant ce modèle, les décisions étaient souvent basées sur :</p> |
| | <ul> |
| | <li>❌ L'intuition ou l'expérience personnelle</li> |
| | <li>❌ Les crises médiatiques du moment</li> |
| | <li>❌ Des approches fragmentées par produit OU par pathogène</li> |
| | </ul> |
| | <p>Le modèle FDA apporte :</p> |
| | <ul> |
| | <li>✅ Une approche <strong>scientifique et quantitative</strong></li> |
| | <li>✅ Une vision <strong>globale</strong> produit × pathogène</li> |
| | <li>✅ Une <strong>transparence</strong> dans les décisions de priorisation</li> |
| | <li>✅ Une <strong>comparabilité</strong> entre différents risques</li> |
| | </ul> |
| | </div> |
| |
|
| | <div class="haccp-integration"> |
| | <h5>🛡️ Intégration avec votre Plan HACCP</h5> |
| | <p><strong>Ce modèle ne remplace pas HACCP, il le renforce !</strong></p> |
| | <ul> |
| | <li><strong>Analyse des Dangers :</strong> Utilisez les scores pour prioriser vos dangers significatifs (étape 1 HACCP)</li> |
| | <li><strong>Points Critiques :</strong> Concentrez vos CCP sur les couples à haut score</li> |
| | <li><strong>Surveillance :</strong> Adaptez la fréquence de monitoring selon les scores de risque</li> |
| | <li><strong>Validation :</strong> Justifiez scientifiquement vos choix de maîtrise</li> |
| | <li><strong>Audits :</strong> Orientez vos vérifications sur les zones à plus haut risque</li> |
| | </ul> |
| | </div> |
| |
|
| | <div class="methodology-section"> |
| | <h4>💼 Applications Pratiques en Industrie</h4> |
| | <ul> |
| | <li><strong>Responsables Qualité :</strong> Priorisation des plans de surveillance et contrôles</li> |
| | <li><strong>Acheteurs :</strong> Évaluation et sélection des fournisseurs selon les risques</li> |
| | <li><strong>R&D :</strong> Conception de produits avec maîtrise des risques intégrée</li> |
| | <li><strong>Direction :</strong> Allocation des budgets sécurité alimentaire basée sur les risques réels</li> |
| | <li><strong>Auditeurs :</strong> Focus des audits sur les couples produit/danger critiques</li> |
| | </ul> |
| | </div> |
| |
|
| | <div class="methodology-section"> |
| | <h4>🌍 Food Traceability List (FTL)</h4> |
| | <p> |
| | La <strong>Food Traceability List</strong> est une liste des aliments à plus haut risque, identifiés grâce à ce modèle. |
| | Ces produits sont soumis à des <strong>exigences de traçabilité renforcée</strong> aux États-Unis depuis janvier 2026. |
| | </p> |
| | <div class="highlight-box"> |
| | <strong>💡 Conseil :</strong> Même en Europe, surveiller ces produits FTL peut vous donner un avantage concurrentiel et anticiper les évolutions réglementaires. |
| | </div> |
| | </div> |
| |
|
| | <div class="reference-section"> |
| | <h5>📚 Sources et Références Officielles</h5> |
| | <ul class="reference-list"> |
| | <li> |
| | <a href="https://www.fda.gov/food/cfsan-constituent-updates/fda-releases-risk-ranking-model-food-tracing-final-rule" target="_blank"> |
| | FDA Risk-Ranking Model for Food Tracing Final Rule (2022) |
| | </a> |
| | </li> |
| | <li> |
| | <a href="https://hfpappexternal.fda.gov/scripts/FDARiskRankingModelforFoodTracingfinalrule/" target="_blank"> |
| | Outil Officiel FDA Risk-Ranking Model (Interface Interactive) |
| | </a> |
| | </li> |
| | <li> |
| | <a href="https://www.federalregister.gov/documents/2022/11/21/2022-24417/requirements-for-additional-traceability-records-for-certain-foods" target="_blank"> |
| | Federal Register - Règlement Traçabilité Alimentaire (21 CFR 204) |
| | </a> |
| | </li> |
| | <li> |
| | <a href="https://www.fda.gov/media/161908/download" target="_blank"> |
| | Document Technique FDA : "Risk-Ranking Model for Food Tracing" (PDF) |
| | </a> |
| | </li> |
| | <li> |
| | <strong>Publications Scientifiques :</strong> Journal of Food Protection, Risk Analysis, Food Control - rechercher "FDA risk-ranking model" |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="controls-panel"> |
| | <div class="view-selector"> |
| | <button class="view-btn active" id="btn-ftl">Vue FTL</button> |
| | <button class="view-btn" id="btn-all">Vue Globale</button> |
| | <button class="view-btn" id="btn-pairs">Analyse Détaillée</button> |
| | <button class="view-btn" id="btn-comparison">Analyse Comparative</button> |
| | </div> |
| | |
| | <div id="main-controls"> |
| | <div class="controls-grid"> |
| | <div class="search-container"> |
| | <span class="search-icon">🔍</span> |
| | <input type="search" class="search-input" id="searchInput" placeholder="Rechercher..."> |
| | </div> |
| | <div id="hazard-filter-container" style="display: none;"> |
| | <select class="filter-select" id="hazard-filter"> |
| | <option value="">Tous les Dangers</option> |
| | </select> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div id="comparison-controls" style="display: none;"> |
| | <div class="controls-grid" style="grid-template-columns: 1fr 1fr;"> |
| | <select class="filter-select" id="commodity-filter"></select> |
| | <select class="filter-select" id="comparison-hazard-filter"> |
| | <option value="All">Tous les Dangers</option> |
| | </select> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div id="main-view-content" class="active"> |
| | <div class="dashboard"> |
| | <div class="metric-card"> |
| | <div class="metric-label">Produits Affichés</div> |
| | <div class="metric-value" id="total-products">-</div> |
| | </div> |
| | <div class="metric-card high-risk"> |
| | <div class="metric-label">Haut Risque (≥400)</div> |
| | <div class="metric-value" id="high-risk-count">-</div> |
| | </div> |
| | <div class="metric-card"> |
| | <div class="metric-label">Catégories Uniques</div> |
| | <div class="metric-value" id="categories-count">-</div> |
| | </div> |
| | <div class="metric-card"> |
| | <div class="metric-label">Score Moyen</div> |
| | <div class="metric-value" id="avg-score">-</div> |
| | </div> |
| | </div> |
| | |
| | <div id="detail-panel"> |
| | <div class="detail-card"> |
| | <div class="detail-layout"> |
| | <div> |
| | <h3 class="chart-title" id="criteria-chart-title"></h3> |
| | <div class="chart-canvas-container"> |
| | <canvas id="criteriaChart"></canvas> |
| | </div> |
| | </div> |
| | <div id="takeaways-section"> |
| | <h4>Points de Vigilance & Actions</h4> |
| | <ul id="takeaways-list"></ul> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="table-container"> |
| | <div class="table-header"> |
| | <h3 class="table-title" id="table-title"></h3> |
| | <div class="results-count" id="results-count"></div> |
| | </div> |
| | <div class="table-wrapper"> |
| | <table id="dataTable"> |
| | <thead id="tableHead"></thead> |
| | <tbody id="tableBody"></tbody> |
| | </table> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div id="comparison-view-content" style="display:none;"> |
| | <div class="chart-container"> |
| | <h3 class="chart-title" id="stacked-chart-title">Analyse des Critères Pondérés</h3> |
| | <div class="chart-canvas-container" id="comparison-chart-container"> |
| | <canvas id="stackedBarChart"></canvas> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="footer"> |
| | <p>FDA Risk Analyzer - Outil d'Analyse des Risques Alimentaires basé sur le modèle de la FDA</p> |
| | <p>© 2023 Tous droits réservés</p> |
| | </div> |
| | |
| | <div id="guide-modal" class="modal"> |
| | <div class="modal-content"> |
| | <div class="modal-header"> |
| | <h2 class="modal-title">Guide d'Utilisation</h2> |
| | <span class="close-modal" id="close-guide-btn">×</span> |
| | </div> |
| | |
| | <h3>Comment utiliser cet outil</h3> |
| | <p>Cet outil vous aide à explorer le modèle de classement des risques de la FDA pour prioriser vos efforts en sécurité alimentaire.</p> |
| | |
| | <h4>Les Vues d'Analyse</h4> |
| | <ul> |
| | <li><strong>Vue FTL</strong> Se concentre sur les produits à plus haut risque de la Food Traceability List. Idéal pour les audits.</li> |
| | <li><strong>Vue Globale</strong> Affiche tous les produits de la base de données pour une vue d'ensemble.</li> |
| | <li><strong>Analyse Détaillée</strong> Montre les couples produit/danger. Cliquez sur une ligne pour une analyse approfondie (graphique radar et actions recommandées).</li> |
| | <li><strong>Analyse Comparative</strong> Permet de comparer visuellement les contributions des différents facteurs de risque pour un produit et ses dangers.</li> |
| | </ul> |
| | |
| | <h3>Les 7 Critères d'Évaluation de la FDA</h3> |
| | <div class="criteria-grid"> |
| | <div class="criteria-card"> |
| | <div class="criteria-title">C1: Gravité</div> |
| | <div class="criteria-desc">Gravité des effets sur la santé (mortalité, morbidité, hospitalisation).</div> |
| | </div> |
| | <div class="criteria-card"> |
| | <div class="criteria-title">C2: Exposition</div> |
| | <div class="criteria-desc">Probabilité d'exposition au danger (fréquence de consommation, quantité).</div> |
| | </div> |
| | <div class="criteria-card"> |
| | <div class="criteria-title">C3: Dose-Réponse</div> |
| | <div class="criteria-desc">Dose infectieuse minimale requise pour provoquer la maladie.</div> |
| | </div> |
| | <div class="criteria-card"> |
| | <div class="criteria-title">C4: Croissance</div> |
| | <div class="criteria-desc">Capacité du pathogène à croître/survivre dans l'aliment.</div> |
| | </div> |
| | <div class="criteria-card"> |
| | <div class="criteria-title">C5: Traitement</div> |
| | <div class="criteria-desc">Efficacité des traitements de décontamination appliqués.</div> |
| | </div> |
| | <div class="criteria-card"> |
| | <div class="criteria-title">C6: Contamination</div> |
| | <div class="criteria-desc">Probabilité de contamination à la production (sources, environnement).</div> |
| | </div> |
| | <div class="criteria-card"> |
| | <div class="criteria-title">C7: Consommation</div> |
| | <div class="criteria-desc">Mode de préparation/consommation (cru, cuit, transformé).</div> |
| | </div> |
| | </div> |
| | |
| | <div class="modal-footer"> |
| | Source officielle : |
| | <a href="https://hfpappexternal.fda.gov/scripts/FDARiskRankingModelforFoodTracingfinalrule/" target="_blank" rel="noopener noreferrer"> |
| | FDA Risk-Ranking Model |
| | </a>. |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| | <script> |
| | document.addEventListener('DOMContentLoaded', function() { |
| | |
| | const state = { |
| | currentDataset: 'ftl', |
| | searchTerm: '', |
| | hazardFilter: '', |
| | sortColumn: 'agg_score', |
| | sortDirection: 'desc', |
| | selectedCommodity: '', |
| | selectedHazard: 'All', |
| | charts: {} |
| | }; |
| | |
| | |
| | let fdaData = { |
| | aggregated_ftl: [], |
| | aggregated_all: [], |
| | pairs_all: [] |
| | }; |
| | |
| | const viewConfig = { |
| | 'ftl': { |
| | dataKey: 'aggregated_ftl', |
| | title: 'Vue FTL (Produits à Traçabilité Renforcée)', |
| | columns: [ |
| | { key: 'commodity', label: 'Produit', sortable: true }, |
| | { key: 'commodity_category', label: 'Catégorie', sortable: true }, |
| | { key: 'agg_score', label: 'Score', sortable: true, type: 'score' } |
| | ], |
| | scoreColumn: 'agg_score' |
| | }, |
| | 'all': { |
| | dataKey: 'aggregated_all', |
| | title: 'Vue Globale (Tous les Produits)', |
| | columns: [ |
| | { key: 'commodity', label: 'Produit', sortable: true }, |
| | { key: 'commodity_category', label: 'Catégorie', sortable: true }, |
| | { key: 'agg_score', label: 'Score', sortable: true, type: 'score' }, |
| | { key: 'ftl', label: 'FTL', sortable: true, type: 'boolean' } |
| | ], |
| | scoreColumn: 'agg_score' |
| | }, |
| | 'pairs': { |
| | dataKey: 'pairs_all', |
| | title: 'Analyse Détaillée (Produit x Danger)', |
| | columns: [ |
| | { key: 'commodity', label: 'Produit', sortable: true }, |
| | { key: 'hazardRef', label: 'Danger', sortable: true }, |
| | { key: 'risk_score', label: 'Score', sortable: true, type: 'score' } |
| | ], |
| | scoreColumn: 'risk_score' |
| | } |
| | }; |
| | |
| | const el = { |
| | loadingOverlay: document.getElementById('loading-overlay'), |
| | mainViewContent: document.getElementById('main-view-content'), |
| | comparisonViewContent: document.getElementById('comparison-view-content'), |
| | mainControls: document.getElementById('main-controls'), |
| | comparisonControls: document.getElementById('comparison-controls'), |
| | searchInput: document.getElementById('searchInput'), |
| | hazardFilter: document.getElementById('hazard-filter'), |
| | hazardFilterContainer: document.getElementById('hazard-filter-container'), |
| | commodityFilter: document.getElementById('commodity-filter'), |
| | comparisonHazardFilter: document.getElementById('comparison-hazard-filter'), |
| | buttons: { |
| | ftl: document.getElementById('btn-ftl'), |
| | all: document.getElementById('btn-all'), |
| | pairs: document.getElementById('btn-pairs'), |
| | comparison: document.getElementById('btn-comparison') |
| | }, |
| | metrics: { |
| | totalProducts: document.getElementById('total-products'), |
| | highRiskCount: document.getElementById('high-risk-count'), |
| | categoriesCount: document.getElementById('categories-count'), |
| | avgScore: document.getElementById('avg-score') |
| | }, |
| | detailPanel: document.getElementById('detail-panel'), |
| | criteriaChartTitle: document.getElementById('criteria-chart-title'), |
| | criteriaCanvas: document.getElementById('criteriaChart'), |
| | takeawaysSection: document.getElementById('takeaways-section'), |
| | takeawaysList: document.getElementById('takeaways-list'), |
| | tableTitle: document.getElementById('table-title'), |
| | tableHead: document.getElementById('tableHead'), |
| | tableBody: document.getElementById('tableBody'), |
| | resultsCount: document.getElementById('results-count'), |
| | stackedBarChartCanvas: document.getElementById('stackedBarChart'), |
| | stackedChartTitle: document.getElementById('stacked-chart-title'), |
| | welcomeGuide: document.getElementById('welcome-guide'), |
| | closeGuide: document.getElementById('close-guide'), |
| | guideModal: document.getElementById('guide-modal'), |
| | guideBtn: document.getElementById('guide-btn'), |
| | closeGuideBtn: document.getElementById('close-guide-btn') |
| | }; |
| | |
| | const formatCell = (value, type) => { |
| | if (value === undefined || value === null) return ''; |
| | const cleanValue = String(value); |
| | if (type === 'score') return `<span class="score-badge ${parseInt(cleanValue) >= 400 ? 'score-high' : parseInt(cleanValue) >= 200 ? 'score-medium' : 'score-low'}">${cleanValue}</span>`; |
| | if (type === 'boolean') return cleanValue === 'true' ? '<span style="color: var(--success-color); font-weight: 600;">✓</span>' : '<span style="color: var(--text-secondary);">-</span>'; |
| | return cleanValue; |
| | }; |
| | |
| | const filterAndSortData = () => { |
| | const config = viewConfig[state.currentDataset]; |
| | if (!config) return []; |
| | let data = [...fdaData[config.dataKey]]; |
| | |
| | if (state.searchTerm) { |
| | const search = state.searchTerm.toLowerCase(); |
| | data = data.filter(row => |
| | Object.values(row).some(v => |
| | String(v).toLowerCase().includes(search) |
| | ) |
| | ); |
| | } |
| | |
| | if (state.currentDataset === 'pairs' && state.hazardFilter) { |
| | data = data.filter(row => row.hazardRef === state.hazardFilter); |
| | } |
| | |
| | if (state.sortColumn) { |
| | const isNumeric = config.columns.find(c => c.key === state.sortColumn)?.type === 'score'; |
| | data.sort((a, b) => { |
| | const valA = a[state.sortColumn]; |
| | const valB = b[state.sortColumn]; |
| | |
| | if (isNumeric) { |
| | return state.sortDirection === 'asc' ? |
| | (valA || 0) - (valB || 0) : |
| | (valB || 0) - (valA || 0); |
| | } else { |
| | const strA = String(valA || '').toLowerCase(); |
| | const strB = String(valB || '').toLowerCase(); |
| | return state.sortDirection === 'asc' ? |
| | strA.localeCompare(strB) : |
| | strB.localeCompare(strA); |
| | } |
| | }); |
| | } |
| | |
| | return data; |
| | }; |
| | |
| | const render = () => { |
| | const isComparisonView = state.currentDataset === 'comparison'; |
| | el.mainViewContent.style.display = isComparisonView ? 'none' : 'block'; |
| | el.comparisonViewContent.style.display = isComparisonView ? 'block' : 'none'; |
| | el.mainControls.style.display = isComparisonView ? 'none' : 'block'; |
| | el.comparisonControls.style.display = isComparisonView ? 'block' : 'none'; |
| | |
| | Object.values(el.buttons).forEach(btn => btn.classList.remove('active')); |
| | el.buttons[state.currentDataset].classList.add('active'); |
| | |
| | if (isComparisonView) { |
| | renderComparisonView(); |
| | } else { |
| | renderMainView(); |
| | } |
| | }; |
| | |
| | const renderMainView = () => { |
| | const config = viewConfig[state.currentDataset]; |
| | const data = filterAndSortData(); |
| | |
| | el.tableTitle.textContent = config.title; |
| | el.resultsCount.textContent = `${data.length} résultat(s)`; |
| | |
| | |
| | el.tableHead.innerHTML = `<tr>${config.columns.map(c => |
| | `<th class="${c.sortable ? 'sortable' : ''}" data-column="${c.key}">${c.label}</th>` |
| | ).join('')}</tr>`; |
| | |
| | |
| | document.querySelectorAll('#tableHead th').forEach(th => { |
| | th.classList.remove('sort-asc', 'sort-desc'); |
| | if (th.dataset.column === state.sortColumn) { |
| | th.classList.add(`sort-${state.sortDirection}`); |
| | } |
| | }); |
| | |
| | |
| | el.tableBody.innerHTML = data.length === 0 ? |
| | `<tr><td colspan="${config.columns.length}" style="text-align:center;">🚫 Aucun résultat</td></tr>` : |
| | data.map((row, index) => |
| | `<tr class="${state.currentDataset === 'pairs' ? 'clickable' : ''}" data-index="${index}"> |
| | ${config.columns.map(col => |
| | `<td>${formatCell(row[col.key], col.type)}</td>` |
| | ).join('')} |
| | </tr>` |
| | ).join(''); |
| | |
| | updateDashboard(data); |
| | el.hazardFilterContainer.style.display = state.currentDataset === 'pairs' ? 'flex' : 'none'; |
| | |
| | if (state.currentDataset !== 'pairs') { |
| | el.detailPanel.classList.remove('visible'); |
| | } |
| | }; |
| | |
| | const renderComparisonView = () => { |
| | let data = fdaData.pairs_all.filter(p => p.commodity === state.selectedCommodity); |
| | if (state.selectedHazard !== 'All') { |
| | data = data.filter(p => p.hazardRef === state.selectedHazard); |
| | } |
| | |
| | el.stackedChartTitle.textContent = `Analyse des Critères Pondérés pour : ${state.selectedCommodity}`; |
| | |
| | if (state.charts.stackedBar) { |
| | state.charts.stackedBar.destroy(); |
| | } |
| | |
| | const criteria = ['C1w', 'C2w', 'C3w', 'C4w', 'C5w', 'C6w', 'C7w']; |
| | const labels = [ |
| | 'C1: Gravité', |
| | 'C2: Exposition', |
| | 'C3: Dose-Réponse', |
| | 'C4: Croissance', |
| | 'C5: Traitement', |
| | 'C6: Contamination', |
| | 'C7: Consommation' |
| | ]; |
| | const colors = [ |
| | '#C62828', '#AD1457', '#6A1B9A', |
| | '#4527A0', '#283593', '#1565C0', '#0277BD' |
| | ]; |
| | |
| | if (data.length === 0) { |
| | document.getElementById('comparison-chart-container').innerHTML = '<p style="text-align:center; padding:2rem;">Aucune donnée disponible pour cette sélection</p>'; |
| | return; |
| | } |
| | |
| | state.charts.stackedBar = new Chart(el.stackedBarChartCanvas, { |
| | type: 'bar', |
| | data: { |
| | labels: data.map(d => d.hazardRef), |
| | datasets: criteria.map((c, i) => ({ |
| | label: labels[i], |
| | data: data.map(d => d[c]), |
| | backgroundColor: colors[i] |
| | })) |
| | }, |
| | options: { |
| | indexAxis: 'y', |
| | responsive: true, |
| | maintainAspectRatio: false, |
| | scales: { |
| | x: { |
| | stacked: true, |
| | title: { |
| | display: true, |
| | text: 'Score Pondéré' |
| | } |
| | }, |
| | y: { |
| | stacked: true |
| | } |
| | }, |
| | plugins: { |
| | legend: { |
| | position: 'top' |
| | } |
| | } |
| | } |
| | }); |
| | }; |
| | |
| | const updateDashboard = (data) => { |
| | const scoreCol = viewConfig[state.currentDataset].scoreColumn; |
| | const scores = data.map(i => i[scoreCol]).filter(s => typeof s === 'number'); |
| | |
| | el.metrics.totalProducts.textContent = data.length; |
| | el.metrics.highRiskCount.textContent = scores.filter(s => s >= 400).length; |
| | el.metrics.categoriesCount.textContent = new Set(data.map(i => i.commodity_category).filter(Boolean)).size; |
| | el.metrics.avgScore.textContent = scores.length ? Math.round(scores.reduce((a, b) => a + b, 0) / scores.length) : 'N/A'; |
| | }; |
| | |
| | const showDetailPanel = (rowIndex) => { |
| | const data = filterAndSortData()[rowIndex]; |
| | if (!data || !('C1' in data)) return; |
| | |
| | el.detailPanel.classList.add('visible'); |
| | el.criteriaCanvas.style.display = 'block'; |
| | el.takeawaysSection.style.display = 'block'; |
| | el.criteriaChartTitle.textContent = `Analyse de "${data.commodity}"`; |
| | |
| | if (state.charts.criteria) { |
| | state.charts.criteria.destroy(); |
| | } |
| | |
| | |
| | const cleanedProduct = data.commodity.replace(/<[^>]+>/g, ''); |
| | const cleanedHazard = data.hazardRef.replace(/<[^>]+>/g, ''); |
| | el.criteriaChartTitle.textContent = `Analyse "${cleanedProduct}" × Danger "${cleanedHazard}"`; |
| | |
| | state.charts.criteria = new Chart(el.criteriaCanvas, { |
| | type: 'radar', |
| | data: { |
| | labels: [ |
| | 'C1-Gravité', |
| | 'C2-Exposition', |
| | 'C3-Dose-Réponse', |
| | 'C4-Croissance', |
| | 'C5-Traitement', |
| | 'C6-Contamination', |
| | 'C7-Consommation' |
| | ], |
| | datasets: [{ |
| | label: `${cleanedHazard}`, |
| | data: [data.C1, data.C2, data.C3, data.C4, data.C5, data.C6, data.C7], |
| | backgroundColor: 'rgba(0, 51, 102, 0.2)', |
| | borderColor: 'rgba(0, 51, 102, 1)', |
| | pointBackgroundColor: 'rgba(0, 51, 102, 1)' |
| | }] |
| | }, |
| | options: { |
| | responsive: true, |
| | maintainAspectRatio: false, |
| | scales: { |
| | r: { |
| | beginAtZero: true, |
| | max: 9, |
| | ticks: { |
| | stepSize: 3 |
| | } |
| | } |
| | }, |
| | plugins: { |
| | legend: { |
| | display: false |
| | } |
| | } |
| | } |
| | }); |
| | |
| | const takeaways = []; |
| | if (data.C1 > 6) takeaways.push("Le danger associé est <strong>sévère</strong>. La maîtrise du CCP est critique."); |
| | if (data.C2 > 6) takeaways.push("Le produit est <strong>largement consommé</strong>. L'impact d'un rappel serait majeur."); |
| | if (data.C4 > 6) takeaways.push("Le pathogène peut <strong>proliférer rapidement</strong>. <u>Action</u>: Valider la chaîne du froid et les barèmes de DLC/DDM."); |
| | if (data.C5 < 3) takeaways.push("Pas d'<strong>étape d'assainissement</strong> efficace. <u>Action</u>: Maîtrise des matières premières essentielle."); |
| | if (data.C6 > 6) takeaways.push("Risque de <strong>contamination à la source élevé</strong>. <u>Action</u>: Renforcer audits fournisseurs et contrôles à réception."); |
| | if (data.C7 > 6) takeaways.push("Souvent <strong>consommé cru</strong>. Contrôles microbiologiques du produit fini à considérer."); |
| | |
| | el.takeawaysList.innerHTML = takeaways.length ? |
| | takeaways.map(t => `<li><span class="icon">⚠️</span><span>${t}</span></li>`).join('') : |
| | "<li><span class='icon'>✓</span><span>Le risque est équilibré.</span></li>"; |
| | |
| | document.querySelectorAll('#tableBody tr').forEach(tr => tr.classList.remove('selected')); |
| | document.querySelector(`#tableBody tr[data-index="${rowIndex}"]`)?.classList.add('selected'); |
| | el.detailPanel.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
| | }; |
| | |
| | function populateFilters() { |
| | const mainHazards = [...new Set(fdaData.pairs_all.map(item => item.hazardRef))].filter(Boolean).sort(); |
| | el.hazardFilter.innerHTML = '<option value="">Tous les Dangers</option>' + |
| | mainHazards.map(h => `<option value="${h}">${h}</option>`).join(''); |
| | |
| | const commodities = [...new Set(fdaData.pairs_all.map(item => item.commodity))].sort(); |
| | el.commodityFilter.innerHTML = commodities.map(c => `<option value="${c}">${c}</option>`).join(''); |
| | |
| | if (commodities.length > 0) { |
| | state.selectedCommodity = commodities[0]; |
| | el.commodityFilter.value = state.selectedCommodity; |
| | populateComparisonHazardFilter(); |
| | } |
| | } |
| | |
| | function populateComparisonHazardFilter(){ |
| | const hazards = [...new Set( |
| | fdaData.pairs_all |
| | .filter(p => p.commodity === state.selectedCommodity) |
| | .map(p => p.hazardRef) |
| | )].sort(); |
| | |
| | el.comparisonHazardFilter.innerHTML = '<option value="All">Tous les Dangers</option>' + |
| | hazards.map(h => `<option value="${h}">${h}</option>`).join(''); |
| | } |
| | |
| | function setupEventListeners() { |
| | |
| | if (!el.searchInput || !el.hazardFilter) { |
| | console.error('Certains éléments DOM ne sont pas trouvés'); |
| | return; |
| | } |
| | |
| | |
| | console.log('Methodology elements check:'); |
| | console.log('Header:', el.methodologyHeader); |
| | console.log('Content:', el.methodologyContent); |
| | console.log('Toggle:', el.methodologyToggle); |
| | |
| | el.searchInput.addEventListener('input', () => { |
| | state.searchTerm = el.searchInput.value; |
| | render(); |
| | }); |
| | |
| | el.hazardFilter.addEventListener('change', () => { |
| | state.hazardFilter = el.hazardFilter.value; |
| | render(); |
| | }); |
| | |
| | el.tableHead.addEventListener('click', (e) => { |
| | const th = e.target.closest('th[data-column]'); |
| | if (th) { |
| | state.sortColumn = th.dataset.column; |
| | state.sortDirection = state.sortDirection === 'asc' ? 'desc' : 'asc'; |
| | render(); |
| | } |
| | }); |
| | |
| | el.tableBody.addEventListener('click', (e) => { |
| | if (state.currentDataset === 'pairs') { |
| | const row = e.target.closest('tr'); |
| | if (row) showDetailPanel(row.dataset.index); |
| | } |
| | }); |
| | |
| | Object.keys(el.buttons).forEach(key => { |
| | el.buttons[key].addEventListener('click', () => { |
| | state.currentDataset = key; |
| | if (key !== 'comparison') { |
| | state.sortColumn = viewConfig[key].scoreColumn; |
| | } |
| | Object.assign(state, { |
| | searchTerm: '', |
| | hazardFilter: '', |
| | sortDirection: 'desc' |
| | }); |
| | el.searchInput.value = ''; |
| | el.hazardFilter.value = ''; |
| | el.detailPanel.classList.remove('visible'); |
| | render(); |
| | }); |
| | }); |
| | |
| | el.commodityFilter.addEventListener('change', (e) => { |
| | state.selectedCommodity = e.target.value; |
| | state.selectedHazard = 'All'; |
| | el.comparisonHazardFilter.value = 'All'; |
| | populateComparisonHazardFilter(); |
| | renderComparisonView(); |
| | }); |
| | |
| | el.comparisonHazardFilter.addEventListener('change', (e) => { |
| | state.selectedHazard = e.target.value; |
| | renderComparisonView(); |
| | }); |
| | |
| | el.guideBtn.addEventListener('click', () => { |
| | el.guideModal.style.display = 'block'; |
| | }); |
| | |
| | el.closeGuideBtn.addEventListener('click', () => { |
| | el.guideModal.style.display = 'none'; |
| | }); |
| | |
| | window.addEventListener('click', (event) => { |
| | if (event.target == el.guideModal) { |
| | el.guideModal.style.display = 'none'; |
| | } |
| | }); |
| | |
| | if (localStorage.getItem('hideWelcomeGuide')) { |
| | el.welcomeGuide.style.display = 'none'; |
| | } |
| | |
| | if (el.closeGuide) { |
| | el.closeGuide.addEventListener('click', () => { |
| | el.welcomeGuide.style.display = 'none'; |
| | try { |
| | localStorage.setItem('hideWelcomeGuide', 'true'); |
| | } catch (e) {} |
| | }); |
| | } |
| | |
| | |
| | if (el.methodologyHeader && el.methodologyContent && el.methodologyToggle) { |
| | console.log('Setting up methodology toggle'); |
| | el.methodologyHeader.addEventListener('click', () => { |
| | console.log('Methodology header clicked'); |
| | const isExpanded = el.methodologyContent.classList.contains('expanded'); |
| | console.log('Is expanded:', isExpanded); |
| | |
| | if (isExpanded) { |
| | el.methodologyContent.classList.remove('expanded'); |
| | el.methodologyToggle.classList.remove('expanded'); |
| | console.log('Collapsed'); |
| | } else { |
| | el.methodologyContent.classList.add('expanded'); |
| | el.methodologyToggle.classList.add('expanded'); |
| | console.log('Expanded'); |
| | } |
| | }); |
| | } else { |
| | console.error('Methodology elements missing:', { |
| | header: !!el.methodologyHeader, |
| | content: !!el.methodologyContent, |
| | toggle: !!el.methodologyToggle |
| | }); |
| | |
| | |
| | setTimeout(() => { |
| | const header = document.getElementById('methodology-header'); |
| | const content = document.getElementById('methodology-content'); |
| | const toggle = document.getElementById('methodology-toggle'); |
| | |
| | if (header && content && toggle) { |
| | console.log('Retry: Setting up methodology toggle'); |
| | header.addEventListener('click', () => { |
| | console.log('Methodology header clicked (retry)'); |
| | const isExpanded = content.classList.contains('expanded'); |
| | |
| | if (isExpanded) { |
| | content.classList.remove('expanded'); |
| | toggle.classList.remove('expanded'); |
| | } else { |
| | content.classList.add('expanded'); |
| | toggle.classList.add('expanded'); |
| | } |
| | }); |
| | } else { |
| | console.error('Methodology elements still not found after retry'); |
| | } |
| | }, 100); |
| | } |
| | } |
| | |
| | |
| | async function loadAllData() { |
| | try { |
| | |
| | const [ftlResponse, allResponse, pairsResponse] = await Promise.all([ |
| | fetch('fda_aggregated_ftl_20250813_164803.json'), |
| | fetch('fda_aggregated_all_20250813_164803.json'), |
| | fetch('fda_pairs_all_20250813_164803.json') |
| | ]); |
| | |
| | if (!ftlResponse.ok || !allResponse.ok || !pairsResponse.ok) { |
| | throw new Error('Erreur lors du chargement des fichiers JSON'); |
| | } |
| | |
| | fdaData.aggregated_ftl = await ftlResponse.json(); |
| | fdaData.aggregated_all = await allResponse.json(); |
| | fdaData.pairs_all = await pairsResponse.json(); |
| | |
| | |
| | populateFilters(); |
| | render(); |
| | |
| | |
| | el.loadingOverlay.style.display = 'none'; |
| | } catch (error) { |
| | console.error('Erreur lors du chargement des données:', error); |
| | el.loadingOverlay.innerHTML = ` |
| | <div class="error-message"> |
| | <h2>Erreur de chargement</h2> |
| | <p>Impossible de charger les fichiers de données.</p> |
| | <p>Vérifiez que les fichiers suivants sont présents dans le répertoire：</p> |
| | <ul style="text-align: left; margin: 1rem auto; max-width: 400px;"> |
| | <li>fda_aggregated_ftl_20250813_164803.json</li> |
| | <li>fda_aggregated_all_20250813_164803.json</li> |
| | <li>fda_pairs_all_20250813_164803.json</li> |
| | </ul> |
| | <p>Message d'erreur : ${error.message}</p> |
| | </div> |
| | `; |
| | } |
| | } |
| | |
| | setupEventListeners(); |
| | loadAllData(); |
| | }); |
| | </script> |
| | </body> |
| | </html> |
