{"id":5058,"date":"2025-07-02T10:07:24","date_gmt":"2025-07-02T10:07:24","guid":{"rendered":"http:\/\/valostones.com\/?page_id=5058"},"modified":"2025-07-02T10:10:02","modified_gmt":"2025-07-02T10:10:02","slug":"gantt-valostones","status":"publish","type":"page","link":"http:\/\/valostones.com\/fr\/gantt-valostones\/","title":{"rendered":"Gantt-VALOstones"},"content":{"rendered":"
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n Project Gantt Chart<\/title>\r\n <style>\r\n \/* COMPLETE RESET AND ISOLATION FROM TEMPLATE STYLES *\/\r\n .gantt-chart-wrapper * {\r\n margin: 0px !important;\r\n padding: 20px !important;\r\n box-sizing: border-box !important;\r\n border: none !important;\r\n outline: none !important;\r\n background: none !important;\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;\r\n text-decoration: none !important;\r\n list-style: none !important;\r\n }\r\n\r\n .gantt-chart-wrapper {\r\n position: relative !important;\r\n width: 100vw !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n left: 0 !important;\r\n right: 0 !important;\r\n top: 0 !important;\r\n box-sizing: border-box !important;\r\n overflow-x: hidden !important;\r\n z-index: 1 !important;\r\n }\r\n\r\n \/* Force full width regardless of parent container *\/\r\n .gantt-chart-wrapper {\r\n margin-left: calc(-50vw + 50%) !important;\r\n margin-right: calc(-50vw + 50%) !important;\r\n max-width: 100vw !important;\r\n width: 100vw !important;\r\n }\r\n\r\n .gantt-chart-wrapper .gantt-container {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;\r\n background: linear-gradient(135deg, #f8fffe 0%, #f0f9f6 100%) !important;\r\n border-radius: 0 !important;\r\n padding: 0 !important;\r\n box-shadow: none !important;\r\n margin: 0 !important;\r\n width: 100% !important;\r\n overflow: hidden !important;\r\n position: relative !important;\r\n }\r\n\r\n .gantt-chart-wrapper .gantt-header {\r\n text-align: center !important;\r\n margin: 0 !important;\r\n padding: 20px 0 !important;\r\n background: transparent !important;\r\n }\r\n\r\n .gantt-chart-wrapper .gantt-title {\r\n color: #136f1d !important;\r\n font-size: 28px !important;\r\n font-weight: 700 !important;\r\n margin: 0 0 8px 0 !important;\r\n text-shadow: 0 2px 4px rgba(19, 111, 29, 0.1) !important;\r\n line-height: 1.2 !important;\r\n }\r\n\r\n .gantt-chart-wrapper .gantt-subtitle {\r\n color: #666 !important;\r\n font-size: 16px !important;\r\n font-weight: 400 !important;\r\n margin: 0 !important;\r\n line-height: 1.3 !important;\r\n }\r\n\r\n .gantt-chart-wrapper .timeline-container {\r\n display: flex !important;\r\n flex-direction: column !important;\r\n border-radius: 0 !important;\r\n background: white !important;\r\n box-shadow: none !important;\r\n width: 100% !important;\r\n overflow: hidden !important;\r\n margin: 0 !important;\r\n border: none !important;\r\n }\r\n\r\n \/* Header Section *\/\r\n .gantt-chart-wrapper .timeline-header {\r\n display: flex !important;\r\n background: linear-gradient(135deg, #136f1d 0%, #1a8f26 100%) !important;\r\n color: white !important;\r\n font-weight: 600 !important;\r\n font-size: 12px !important;\r\n position: sticky !important;\r\n top: 0 !important;\r\n z-index: 10 !important;\r\n box-shadow: 0 2px 8px rgba(19, 111, 29, 0.2) !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n .gantt-chart-wrapper .wp-label-header {\r\n width: 220px !important;\r\n min-width: 220px !important;\r\n padding: 12px 8px !important;\r\n background: #0f5c17 !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n font-weight: 700 !important;\r\n border-right: 3px solid #0f5c17 !important;\r\n color: white !important;\r\n margin: 0 !important;\r\n box-sizing: border-box !important;\r\n }\r\n\r\n .gantt-chart-wrapper .months-header {\r\n flex: 1 !important;\r\n display: flex !important;\r\n min-width: 0 !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n .gantt-chart-wrapper .year-group {\r\n flex: 1 !important;\r\n display: flex !important;\r\n flex-direction: column !important;\r\n border-right: 2px solid rgba(255, 255, 255, 0.3) !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n .gantt-chart-wrapper .year-group:last-child {\r\n border-right: none !important;\r\n }\r\n\r\n .gantt-chart-wrapper .year-label {\r\n background: #0f5c17 !important;\r\n padding: 8px !important;\r\n text-align: center !important;\r\n font-weight: 700 !important;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;\r\n color: white !important;\r\n margin: 0 !important;\r\n font-size: 12px !important;\r\n }\r\n\r\n .gantt-chart-wrapper .months-row {\r\n display: flex !important;\r\n flex: 1 !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n .gantt-chart-wrapper .month-cell {\r\n flex: 1 !important;\r\n padding: 8px 4px !important;\r\n text-align: center !important;\r\n border-right: 1px solid rgba(255, 255, 255, 0.1) !important;\r\n font-size: 11px !important;\r\n min-width: 0 !important;\r\n color: white !important;\r\n margin: 0 !important;\r\n background: transparent !important;\r\n }\r\n\r\n .gantt-chart-wrapper .month-cell:last-child {\r\n border-right: none !important;\r\n }\r\n\r\n \/* Body Section *\/\r\n .gantt-chart-wrapper .timeline-body {\r\n max-height: 600px !important;\r\n overflow-y: auto !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n background: white !important;\r\n }\r\n\r\n .gantt-chart-wrapper .timeline-row {\r\n display: flex !important;\r\n border-bottom: 1px solid #e8f5ea !important;\r\n transition: background-color 0.2s ease !important;\r\n min-height: 48px !important;\r\n align-items: center !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n background: white !important;\r\n }\r\n\r\n .gantt-chart-wrapper .timeline-row:hover {\r\n background: #f8fffe !important;\r\n }\r\n\r\n .gantt-chart-wrapper .wp-label {\r\n width: 220px !important;\r\n min-width: 220px !important;\r\n padding: 8px !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n font-size: 13px !important;\r\n font-weight: 500 !important;\r\n color: #2d3748 !important;\r\n border-right: 3px solid #e8f5ea !important;\r\n margin: 0 !important;\r\n box-sizing: border-box !important;\r\n background: white !important;\r\n }\r\n\r\n .gantt-chart-wrapper .wp-main {\r\n background: linear-gradient(135deg, #f0f9f6 0%, #e8f5ea 100%) !important;\r\n font-weight: 600 !important;\r\n color: #136f1d !important;\r\n border-left: 4px solid #136f1d !important;\r\n }\r\n\r\n .gantt-chart-wrapper .wp-sub {\r\n padding-left: 20px !important;\r\n color: #4a5568 !important;\r\n background: white !important;\r\n border-left: 2px solid #cbd5e0 !important;\r\n }\r\n\r\n .gantt-chart-wrapper .timeline-bars {\r\n flex: 1 !important;\r\n min-height: 48px !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n padding: 8px !important;\r\n position: relative !important;\r\n min-width: 0 !important;\r\n margin: 0 !important;\r\n background: white !important;\r\n }\r\n\r\n .gantt-chart-wrapper .gantt-bar {\r\n height: 20px !important;\r\n border-radius: 10px !important;\r\n margin: 4px 0 !important;\r\n position: absolute !important;\r\n transition: all 0.3s ease !important;\r\n cursor: pointer !important;\r\n box-shadow: 0 2px 8px rgba(19, 111, 29, 0.15) !important;\r\n top: 50% !important;\r\n transform: translateY(-50%) !important;\r\n border: 2px solid transparent !important;\r\n }\r\n\r\n .gantt-chart-wrapper .gantt-bar:hover {\r\n transform: translateY(-50%) scale(1.02) !important;\r\n box-shadow: 0 4px 16px rgba(19, 111, 29, 0.25) !important;\r\n }\r\n\r\n .gantt-chart-wrapper .bar-main {\r\n background: linear-gradient(135deg, #136f1d 0%, #1a8f26 100%) !important;\r\n border: 2px solid #0f5c17 !important;\r\n }\r\n\r\n .gantt-chart-wrapper .bar-sub {\r\n background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;\r\n border: 2px solid #15803d !important;\r\n }\r\n\r\n .gantt-chart-wrapper .bar-milestone {\r\n background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;\r\n border: 2px solid #d97706 !important;\r\n width: 16px !important;\r\n height: 16px !important;\r\n border-radius: 50% !important;\r\n transform: translateY(-50%) rotate(45deg) !important;\r\n }\r\n\r\n .gantt-chart-wrapper .bar-milestone:hover {\r\n transform: translateY(-50%) rotate(45deg) scale(1.1) !important;\r\n }\r\n\r\n .gantt-chart-wrapper .gantt-grid {\r\n position: absolute !important;\r\n top: 0 !important;\r\n left: 0 !important;\r\n right: 0 !important;\r\n bottom: 0 !important;\r\n display: flex !important;\r\n pointer-events: none !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n .gantt-chart-wrapper .grid-month {\r\n flex: 1 !important;\r\n border-right: 1px solid #f0f9f6 !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n background: transparent !important;\r\n }\r\n\r\n .gantt-chart-wrapper .grid-month:last-child {\r\n border-right: none !important;\r\n }\r\n\r\n .gantt-chart-wrapper .legend {\r\n display: flex !important;\r\n justify-content: center !important;\r\n gap: 24px !important;\r\n margin: 0 !important;\r\n padding: 16px 0 !important;\r\n flex-wrap: wrap !important;\r\n background: white !important;\r\n border-top: 1px solid #e8f5ea !important;\r\n }\r\n\r\n .gantt-chart-wrapper .legend-item {\r\n display: flex !important;\r\n align-items: center !important;\r\n gap: 8px !important;\r\n font-size: 14px !important;\r\n color: #4a5568 !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n background: transparent !important;\r\n }\r\n\r\n .gantt-chart-wrapper .legend-color {\r\n width: 20px !important;\r\n height: 12px !important;\r\n border-radius: 6px !important;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n .gantt-chart-wrapper .legend-main {\r\n background: linear-gradient(135deg, #136f1d 0%, #1a8f26 100%) !important;\r\n }\r\n\r\n .gantt-chart-wrapper .legend-sub {\r\n background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;\r\n }\r\n\r\n .gantt-chart-wrapper .legend-milestone {\r\n background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;\r\n border-radius: 50% !important;\r\n width: 12px !important;\r\n height: 12px !important;\r\n }\r\n\r\n .gantt-chart-wrapper .tooltip {\r\n position: absolute !important;\r\n background: #2d3748 !important;\r\n color: white !important;\r\n padding: 8px 12px !important;\r\n border-radius: 6px !important;\r\n font-size: 12px !important;\r\n pointer-events: none !important;\r\n z-index: 1000 !important;\r\n opacity: 0 !important;\r\n transition: opacity 0.2s ease !important;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;\r\n margin: 0 !important;\r\n line-height: 1.3 !important;\r\n }\r\n\r\n .gantt-chart-wrapper .tooltip.show {\r\n opacity: 1 !important;\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 768px) {\r\n .gantt-chart-wrapper .gantt-title {\r\n font-size: 24px !important;\r\n }\r\n \r\n .gantt-chart-wrapper .wp-label,\r\n .gantt-chart-wrapper .wp-label-header {\r\n width: 200px !important;\r\n min-width: 200px !important;\r\n font-size: 11px !important;\r\n padding: 8px 4px !important;\r\n }\r\n \r\n .gantt-chart-wrapper .month-cell {\r\n font-size: 9px !important;\r\n padding: 6px 2px !important;\r\n }\r\n \r\n .gantt-chart-wrapper .year-label {\r\n font-size: 11px !important;\r\n padding: 6px !important;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .gantt-chart-wrapper .wp-label,\r\n .gantt-chart-wrapper .wp-label-header {\r\n width: 150px !important;\r\n min-width: 150px !important;\r\n font-size: 10px !important;\r\n padding: 6px 2px !important;\r\n }\r\n \r\n .gantt-chart-wrapper .month-cell {\r\n font-size: 8px !important;\r\n padding: 4px 1px !important;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"gantt-chart-wrapper\">\r\n <div class=\"gantt-container\">\r\n <div class=\"gantt-header\">\r\n <h1 class=\"gantt-title\">Project Timeline<\/h1>\r\n \r\n <\/div>\r\n\r\n <div class=\"timeline-container\">\r\n <!-- Header Section -->\r\n <div class=\"timeline-header\">\r\n <div class=\"wp-label-header\">Work Package<\/div>\r\n <div class=\"months-header\">\r\n <div class=\"year-group\">\r\n <div class=\"year-label\">Year 1<\/div>\r\n <div class=\"months-row\">\r\n <div class=\"month-cell\">M1<\/div>\r\n <div class=\"month-cell\">M2<\/div>\r\n <div class=\"month-cell\">M3<\/div>\r\n <div class=\"month-cell\">M4<\/div>\r\n <div class=\"month-cell\">M5<\/div>\r\n <div class=\"month-cell\">M6<\/div>\r\n <div class=\"month-cell\">M7<\/div>\r\n <div class=\"month-cell\">M8<\/div>\r\n <div class=\"month-cell\">M9<\/div>\r\n <div class=\"month-cell\">M10<\/div>\r\n <div class=\"month-cell\">M11<\/div>\r\n <div class=\"month-cell\">M12<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"year-group\">\r\n <div class=\"year-label\">Year 2<\/div>\r\n <div class=\"months-row\">\r\n <div class=\"month-cell\">M13<\/div>\r\n <div class=\"month-cell\">M14<\/div>\r\n <div class=\"month-cell\">M15<\/div>\r\n <div class=\"month-cell\">M16<\/div>\r\n <div class=\"month-cell\">M17<\/div>\r\n <div class=\"month-cell\">M18<\/div>\r\n <div class=\"month-cell\">M19<\/div>\r\n <div class=\"month-cell\">M20<\/div>\r\n <div class=\"month-cell\">M21<\/div>\r\n <div class=\"month-cell\">M22<\/div>\r\n <div class=\"month-cell\">M23<\/div>\r\n <div class=\"month-cell\">M24<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"year-group\">\r\n <div class=\"year-label\">Year 3<\/div>\r\n <div class=\"months-row\">\r\n <div class=\"month-cell\">M25<\/div>\r\n <div class=\"month-cell\">M26<\/div>\r\n <div class=\"month-cell\">M27<\/div>\r\n <div class=\"month-cell\">M28<\/div>\r\n <div class=\"month-cell\">M29<\/div>\r\n <div class=\"month-cell\">M30<\/div>\r\n <div class=\"month-cell\">M31<\/div>\r\n <div class=\"month-cell\">M32<\/div>\r\n <div class=\"month-cell\">M33<\/div>\r\n <div class=\"month-cell\">M34<\/div>\r\n <div class=\"month-cell\">M35<\/div>\r\n <div class=\"month-cell\">M36<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Body Section -->\r\n <div class=\"timeline-body\" id=\"timelineBody\">\r\n <!-- Timeline rows will be generated by JavaScript -->\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"tooltip\" id=\"tooltip\"><\/div>\r\n <\/div>\r\n\r\n <script>\r\n const workPackages = [\r\n { id: 'WP0', name: 'Project management and communication', start: 1, end: 36, type: 'main' },\r\n { id: 'WP0.1', name: 'Technical and administrative assistance', start: 1, end: 1, type: 'milestone' },\r\n { id: 'WP0.2', name: 'Consortium progress meetings', start: 1, end: 1, type: 'milestone' },\r\n { id: 'WP0.3', name: 'Technical reports', milestones: [1, 6, 12], type: 'milestone' },\r\n { id: 'WP0.4', name: 'Ethics and IP management', start: 1, end: 36, type: 'sub' },\r\n \r\n { id: 'WP1', name: 'Collection and characterization of OS powder', start: 1, end: 6, type: 'main' },\r\n { id: 'WP1.1', name: 'Sample preparation', start: 1, end: 3, type: 'sub' },\r\n { id: 'WP1.2', name: 'Characterization of OS powder', start: 4, end: 6, type: 'sub' },\r\n \r\n { id: 'WP2', name: 'Conversion of OS into biopolymers', start: 7, end: 18, type: 'main' },\r\n { id: 'WP2.1', name: 'Extraction of biopolymers', start: 7, end: 12, type: 'sub' },\r\n { id: 'WP2.2', name: 'Characterization of extracted biopolymers', start: 7, end: 14, type: 'sub' },\r\n { id: 'WP2.3', name: 'Evaluation of techno-functionalities', start: 10, end: 18, type: 'sub' },\r\n { id: 'WP2.4', name: 'Preparation of water-soluble cellulose derivatives', start: 14, end: 18, type: 'sub' },\r\n { id: 'WP2.5', name: 'Evaluation of biological and pharmacological properties', start: 10, end: 18, type: 'sub' },\r\n \r\n { id: 'WP3', name: 'Extraction, purification and characterization of antioxidants', start: 4, end: 12, type: 'main' },\r\n { id: 'WP3.1', name: 'Development of extraction technologies', start: 3, end: 9, type: 'sub' },\r\n { id: 'WP3.2', name: 'Purification of antioxidants', start: 3, end: 9, type: 'sub' },\r\n { id: 'WP3.3', name: 'Evaluation of antioxidant activity', start: 6, end: 12, type: 'sub' },\r\n \r\n { id: 'WP4', name: 'Optimization and scaling up', start: 13, end: 24, type: 'main' },\r\n { id: 'WP4.1', name: 'Optimization of extraction process', start: 13, end: 16, type: 'sub' },\r\n { id: 'WP4.2', name: 'Scaling-up the optimized process', start: 17, end: 22, type: 'sub' },\r\n { id: 'WP4.3', name: 'Characterization of extracted molecules', start: 21, end: 24, type: 'sub' },\r\n \r\n { id: 'WP5', name: 'Development of active ingredients and materials', start: 13, end: 24, type: 'main' },\r\n { id: 'WP5.1', name: 'Development of nanofibers and nanocapsules', start: 13, end: 18, type: 'sub' },\r\n { id: 'WP5.2', name: 'Development of OS biopolymers-based films', start: 13, end: 24, type: 'sub' },\r\n { id: 'WP5.3', name: 'Preparation of emulsions and nano-emulsions', start: 13, end: 18, type: 'sub' },\r\n { id: 'WP5.4', name: 'Preparation of gels', start: 16, end: 21, type: 'sub' },\r\n { id: 'WP5.5', name: 'Development of levan-based hydrogels', start: 19, end: 24, type: 'sub' },\r\n { id: 'WP5.6', name: 'Development of wound healing hydrogel patch', start: 19, end: 24, type: 'sub' },\r\n \r\n { id: 'WP6', name: 'Application in food, cosmetics and pharmaceuticals', start: 19, end: 36, type: 'main' },\r\n { id: 'WP6.1', name: 'Application in food and packaging', start: 19, end: 36, type: 'sub' },\r\n { id: 'WP6.2', name: 'Application in cosmetics', start: 25, end: 30, type: 'sub' },\r\n { id: 'WP6.3', name: 'Application in wound healing', start: 28, end: 36, type: 'sub' },\r\n \r\n { id: 'WP7', name: 'Technology transfer and market development', start: 24, end: 36, type: 'main' },\r\n \r\n { id: 'WP8', name: 'Sustainability assessment', start: 13, end: 36, type: 'main' },\r\n { id: 'WP8.1', name: 'Environmental analysis', start: 13, end: 36, type: 'sub' },\r\n { id: 'WP8.2', name: 'Economic analysis', start: 13, end: 36, type: 'sub' },\r\n { id: 'WP8.3', name: 'Social analysis', start: 13, end: 36, type: 'sub' },\r\n \r\n { id: 'WP9', name: 'Dissemination and exploitation', start: 1, end: 36, type: 'main' },\r\n { id: 'WP9.1', name: 'International outreach', start: 1, end: 36, type: 'sub' },\r\n { id: 'WP9.2', name: 'Identification and management of results', start: 1, end: 36, type: 'sub' },\r\n { id: 'WP9.3', name: 'Communication and dissemination activities', start: 1, end: 36, type: 'sub' }\r\n ];\r\n\r\n function createGanttBar(start, end, type) {\r\n const bar = document.createElement('div');\r\n bar.className = `gantt-bar ${type === 'milestone' ? 'bar-milestone' : type === 'main' ? 'bar-main' : 'bar-sub'}`;\r\n \r\n \/\/ Calculate position and width as percentages\r\n const startPos = ((start - 1) \/ 36) * 100;\r\n const duration = end - start + 1;\r\n const width = (duration \/ 36) * 100;\r\n \r\n bar.style.left = `${startPos}%`;\r\n bar.style.width = `${width}%`;\r\n \r\n if (type === 'milestone') {\r\n bar.style.width = '16px';\r\n bar.style.left = `calc(${startPos}% + calc(${100\/36}% \/ 2) - 8px)`;\r\n }\r\n \r\n return bar;\r\n }\r\n\r\n function createTimelineRow(wp) {\r\n const row = document.createElement('div');\r\n row.className = 'timeline-row';\r\n \r\n \/\/ Create label\r\n const label = document.createElement('div');\r\n label.className = `wp-label ${wp.type === 'main' ? 'wp-main' : 'wp-sub'}`;\r\n label.textContent = `${wp.id} - ${wp.name}`;\r\n \r\n \/\/ Create timeline bars container\r\n const barsContainer = document.createElement('div');\r\n barsContainer.className = 'timeline-bars';\r\n \r\n \/\/ Add grid\r\n const grid = document.createElement('div');\r\n grid.className = 'gantt-grid';\r\n for (let i = 1; i <= 36; i++) {\r\n const gridMonth = document.createElement('div');\r\n gridMonth.className = 'grid-month';\r\n grid.appendChild(gridMonth);\r\n }\r\n barsContainer.appendChild(grid);\r\n \r\n \/\/ Handle milestones vs regular bars\r\n if (wp.milestones) {\r\n wp.milestones.forEach(month => {\r\n const bar = createGanttBar(month, month, 'milestone');\r\n bar.dataset.tooltip = `${wp.id}: ${wp.name} - Month ${month}`;\r\n barsContainer.appendChild(bar);\r\n });\r\n } else {\r\n const bar = createGanttBar(wp.start, wp.end, wp.type);\r\n bar.dataset.tooltip = `${wp.id}: ${wp.name} - M${wp.start}${wp.start !== wp.end ? ` to M${wp.end}` : ''}`;\r\n barsContainer.appendChild(bar);\r\n }\r\n \r\n row.appendChild(label);\r\n row.appendChild(barsContainer);\r\n \r\n return row;\r\n }\r\n\r\n function initializeGanttChart() {\r\n const timelineBody = document.getElementById('timelineBody');\r\n const tooltip = document.getElementById('tooltip');\r\n \r\n \/\/ Create all timeline rows\r\n workPackages.forEach(wp => {\r\n timelineBody.appendChild(createTimelineRow(wp));\r\n });\r\n \r\n \/\/ Add tooltip functionality\r\n document.addEventListener('mousemove', (e) => {\r\n const target = e.target.closest('.gantt-bar');\r\n if (target && target.dataset.tooltip) {\r\n tooltip.textContent = target.dataset.tooltip;\r\n tooltip.style.left = `${e.pageX + 10}px`;\r\n tooltip.style.top = `${e.pageY - 30}px`;\r\n tooltip.classList.add('show');\r\n } else {\r\n tooltip.classList.remove('show');\r\n }\r\n });\r\n }\r\n\r\n \/\/ Initialize the chart when the page loads\r\n document.addEventListener('DOMContentLoaded', initializeGanttChart);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Project Gantt Chart Project Timeline Work Package Year 1 M1 M2 M3 M4 M5 M6 M7 M8 M9 M10 M11 M12 Year 2 M13 M14 M15 M16 M17 M18 M19 …<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"http:\/\/valostones.com\/fr\/gantt-valostones\/\"> <span class=\"screen-reader-text\">Gantt-VALOstones<\/span> Lire la suite\u00a0\u00bb<\/a><\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_piecal_is_event":false,"_piecal_start_date":"","_piecal_end_date":"","_piecal_is_allday":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"class_list":["post-5058","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/pages\/5058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/comments?post=5058"}],"version-history":[{"count":162,"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/pages\/5058\/revisions"}],"predecessor-version":[{"id":5223,"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/pages\/5058\/revisions\/5223"}],"wp:attachment":[{"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/media?parent=5058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}