'; mg.appendChild(cell); }); const textColor = '#aaaaaa'; const gridColor = 'rgba(0,0,0,0.05)'; const crosshairPlugin = { id: 'crosshair', afterDraw(chart) { if (chart._hoverX == null) return; const ctx = chart.ctx; const { left, right, top, bottom } = chart.chartArea; const x = chart._hoverX; if (x right) return; ctx.save(); ctx.strokeStyle = 'rgba(192,57,43,0.35)'; ctx.lineWidth = 1; ctx.setLineDash([4, 3]); ctx.beginPath(); ctx.moveTo(x, top); ctx.lineTo(x, bottom); ctx.stroke(); ctx.restore(); } }; Chart.register(crosshairPlugin); const tip = { backgroundColor: '#ffffff', borderColor: '#e8e8e8', borderWidth: 1, titleColor: '#777777', bodyColor: '#333333', titleFont: { family: 'Open Sans', size: 11, weight: '700' }, bodyFont: { family: 'Open Sans', size: 13 }, padding: 10, cornerRadius: 4, }; const chartDaylight = new Chart(document.getElementById('chartDaylight'), { type: 'line', data: { labels, datasets: [{ data: daylightData, borderColor: '#c0392b', backgroundColor: 'rgba(192,57,43,0.07)', fill: true, tension: 0.4, pointRadius: 0, pointHoverRadius: 5, pointHoverBackgroundColor: '#c0392b', pointHoverBorderColor: '#fff', pointHoverBorderWidth: 2, borderWidth: 2.5 }] }, options: { responsive: true, maintainAspectRatio: false, interaction: { mode: 'index', intersect: false }, plugins: { legend: { display: false }, tooltip: { ...tip, callbacks: { title: ctx => allDates[ctx[0].dataIndex].toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' }), label: ctx => 'Durée du jour : ' + fmtDur(ctx.raw) }} }, scales: { x: { ticks: { color: textColor, font: { family: 'Open Sans', size: 11 }, autoSkip: false, maxRotation: 0 }, grid: { color: gridColor }, border: { color: '#e8e8e8' } }, y: { ticks: { color: textColor, font: { family: 'Open Sans', size: 11 }, callback: v => fmtDur(v) }, grid: { color: gridColor }, min: 7, max: 17, border: { color: '#e8e8e8' } } }, onHover: (event, elements, chart) => { if (!elements.length) { chart._hoverX = null; chart.draw(); return; } const idx = elements[0].index; chart._hoverX = chart.getDatasetMeta(0).data[idx].x; chart.draw(); updateCards(allDates[idx], true); } } }); document.getElementById('chartDaylight').addEventListener('mouseleave', () => { chartDaylight._hoverX = null; chartDaylight.draw(); const p = document.getElementById('datePicker').value.split('-'); updateCards(new Date(+p[0], +p[1]-1, +p[2]), false); }); new Chart(document.getElementById('chartSunTimes'), { type: 'bar', data: { labels: months, datasets: [ { label: 'Lever', data: monthRise, backgroundColor: '#c0392b', borderRadius: 3 }, { label: 'Coucher', data: monthSet, backgroundColor: '#cccccc', borderRadius: 3 } ] }, options: { responsive: true, maintainAspectRatio: false, interaction: { mode: 'index', intersect: false }, plugins: { legend: { display: false }, tooltip: { ...tip, callbacks: { label: ctx => ctx.dataset.label + ' : ' + fmtHM(ctx.raw) } } }, scales: { x: { ticks: { color: textColor, font: { family: 'Open Sans', size: 11 } }, grid: { color: gridColor }, border: { color: '#e8e8e8' } }, y: { ticks: { color: textColor, font: { family: 'Open Sans', size: 11 }, callback: v => fmtHM(v) }, grid: { color: gridColor }, min: 4, max: 23, border: { color: '#e8e8e8' } } } } }); const todayStr = new Date().toISOString().split('T')[0]; document.getElementById('datePicker').value = todayStr; updateCards(new Date(), false); document.getElementById('datePicker').addEventListener('change', e => { const p = e.target.value.split('-'); updateCards(new Date(+p[0], +p[1]-1, +p[2]), false); });