@stfrigerio/sito-template 0.1.78 → 0.1.79

package/dist/components/organisms/charts/HabitTimeOfDayChart/HabitTimeOfDayChart.d.ts

@@ -3,7 +3,7 @@ export interface HabitEvent {
     loggedAt: string;
     habitKey: string;
 }
-export type HabitTimeOfDayView = 'heatmap' | 'totals';
+export type HabitTimeOfDayView = 'scatter' | 'totals';
 interface HabitTimeOfDayChartProps {
     events: HabitEvent[];
     width?: number;

package/dist/components/organisms/charts/HabitTimeOfDayChart/HabitTimeOfDayChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HabitTimeOfDayChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/charts/HabitTimeOfDayChart/HabitTimeOfDayChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAIhF,MAAM,WAAW,UAAU;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAErD,UAAU,wBAAwB;IAC9B,MAAM,EAAE,UAAU,EAAE,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAA;IACvC,WAAW,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAA;IACvC,WAAW,CAAC,EAAE,kBAAkB,CAAA;IAChC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;CAC1B;AAiDD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAmalE,CAAA"}
+{"version":3,"file":"HabitTimeOfDayChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/charts/HabitTimeOfDayChart/HabitTimeOfDayChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAIhF,MAAM,WAAW,UAAU;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAErD,UAAU,wBAAwB;IAC9B,MAAM,EAAE,UAAU,EAAE,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAA;IACvC,WAAW,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAA;IACvC,WAAW,CAAC,EAAE,kBAAkB,CAAA;IAChC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;CAC1B;AAkED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA0ZlE,CAAA"}

package/dist/index.esm.js

@@ -4306,7 +4306,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
                 }, children: [jsxs("div", { className: styles$8.tooltipHeader, children: [jsx("span", { className: styles$8.tooltipEmoji, children: customHabitEmojis[tooltipData.habit] || '📊' }), jsx("span", { className: styles$8.tooltipDot, style: { backgroundColor: getColor(tooltipData.habit) } }), jsx("span", { children: tooltipData.habit })] }), jsxs("div", { className: styles$8.tooltipInfo, children: [jsx("div", { className: styles$8.tooltipDate, children: formatTooltipDate(tooltipData.date, viewType) }), jsxs("div", { className: styles$8.tooltipValue, children: [jsx("strong", { children: Math.round(tooltipData.value * 10) / 10 }), jsx("span", { style: { fontSize: '12px', fontWeight: 'normal', opacity: 0.6 }, children: "units" })] })] })] }))] }));
 };
 
-var styles$7 = {"container":"HabitTimeOfDayChart-module_container__DCW3B","controls":"HabitTimeOfDayChart-module_controls__2p7mW","viewToggle":"HabitTimeOfDayChart-module_viewToggle__SSfDu","viewButton":"HabitTimeOfDayChart-module_viewButton__DENLF","active":"HabitTimeOfDayChart-module_active__VRrF1","viewIcon":"HabitTimeOfDayChart-module_viewIcon__MXqrp","viewLabel":"HabitTimeOfDayChart-module_viewLabel__XNKhi","legend":"HabitTimeOfDayChart-module_legend__y4Apu","compactLegend":"HabitTimeOfDayChart-module_compactLegend__Gsodv","legendItem":"HabitTimeOfDayChart-module_legendItem__QEXr4","legendEmoji":"HabitTimeOfDayChart-module_legendEmoji__T7zLH","legendLabel":"HabitTimeOfDayChart-module_legendLabel__TUT29","inactive":"HabitTimeOfDayChart-module_inactive__xVIwD","legendColor":"HabitTimeOfDayChart-module_legendColor__SzkAm","chart":"HabitTimeOfDayChart-module_chart__7Plpd","cell":"HabitTimeOfDayChart-module_cell__CBx4Z","cellEmpty":"HabitTimeOfDayChart-module_cellEmpty__8svdi","bar":"HabitTimeOfDayChart-module_bar__F0Rwy","gridLine":"HabitTimeOfDayChart-module_gridLine__waZrZ","xAxis":"HabitTimeOfDayChart-module_xAxis__pQGbi","yAxis":"HabitTimeOfDayChart-module_yAxis__fblot","tooltip":"HabitTimeOfDayChart-module_tooltip__8EPnz","visible":"HabitTimeOfDayChart-module_visible__3yEYR","tooltipHeader":"HabitTimeOfDayChart-module_tooltipHeader__1ywo5","tooltipInfo":"HabitTimeOfDayChart-module_tooltipInfo__xizGe","tooltipValue":"HabitTimeOfDayChart-module_tooltipValue__DcYfO","tooltipUnits":"HabitTimeOfDayChart-module_tooltipUnits__Um-EN","tooltipBreakdown":"HabitTimeOfDayChart-module_tooltipBreakdown__AQ27l","tooltipBreakdownRow":"HabitTimeOfDayChart-module_tooltipBreakdownRow__jHc6D","tooltipDot":"HabitTimeOfDayChart-module_tooltipDot__Khfwh","tooltipCount":"HabitTimeOfDayChart-module_tooltipCount__BRgaU"};
+var styles$7 = {"container":"HabitTimeOfDayChart-module_container__DCW3B","controls":"HabitTimeOfDayChart-module_controls__2p7mW","viewToggle":"HabitTimeOfDayChart-module_viewToggle__SSfDu","viewButton":"HabitTimeOfDayChart-module_viewButton__DENLF","active":"HabitTimeOfDayChart-module_active__VRrF1","viewIcon":"HabitTimeOfDayChart-module_viewIcon__MXqrp","viewLabel":"HabitTimeOfDayChart-module_viewLabel__XNKhi","legend":"HabitTimeOfDayChart-module_legend__y4Apu","compactLegend":"HabitTimeOfDayChart-module_compactLegend__Gsodv","legendItem":"HabitTimeOfDayChart-module_legendItem__QEXr4","legendEmoji":"HabitTimeOfDayChart-module_legendEmoji__T7zLH","legendLabel":"HabitTimeOfDayChart-module_legendLabel__TUT29","inactive":"HabitTimeOfDayChart-module_inactive__xVIwD","legendColor":"HabitTimeOfDayChart-module_legendColor__SzkAm","chart":"HabitTimeOfDayChart-module_chart__7Plpd","dot":"HabitTimeOfDayChart-module_dot__rxGpu","bar":"HabitTimeOfDayChart-module_bar__F0Rwy","gridLine":"HabitTimeOfDayChart-module_gridLine__waZrZ","xAxis":"HabitTimeOfDayChart-module_xAxis__pQGbi","yAxis":"HabitTimeOfDayChart-module_yAxis__fblot","tooltip":"HabitTimeOfDayChart-module_tooltip__8EPnz","visible":"HabitTimeOfDayChart-module_visible__3yEYR","tooltipHeader":"HabitTimeOfDayChart-module_tooltipHeader__1ywo5","tooltipInfo":"HabitTimeOfDayChart-module_tooltipInfo__xizGe","tooltipValue":"HabitTimeOfDayChart-module_tooltipValue__DcYfO","tooltipUnits":"HabitTimeOfDayChart-module_tooltipUnits__Um-EN","tooltipBreakdown":"HabitTimeOfDayChart-module_tooltipBreakdown__AQ27l","tooltipBreakdownRow":"HabitTimeOfDayChart-module_tooltipBreakdownRow__jHc6D","tooltipDot":"HabitTimeOfDayChart-module_tooltipDot__Khfwh","tooltipCount":"HabitTimeOfDayChart-module_tooltipCount__BRgaU"};
 
 const DEFAULT_HABIT_COLORS = {
     Exercise: '#6BCB77',
@@ -4325,13 +4325,19 @@ const getDateKey = (d) => {
     return `${y}-${m}-${day}`;
 };
 const formatHour = (hour) => {
-    const h = hour % 24;
+    const h = ((hour % 24) + 24) % 24;
     if (h === 0)
         return '12a';
     if (h === 12)
         return '12p';
     return h < 12 ? `${h}a` : `${h - 12}p`;
 };
+const formatTime$1 = (hour, minute) => {
+    const h24 = ((hour % 24) + 24) % 24;
+    const h12 = h24 % 12 === 0 ? 12 : h24 % 12;
+    const ampm = h24 < 12 ? 'a' : 'p';
+    return `${h12}:${String(minute).padStart(2, '0')}${ampm}`;
+};
 const enumerateDates = (start, end) => {
     const dates = [];
     const [sy, sm, sd] = start.split('-').map(Number);
@@ -4344,7 +4350,7 @@ const enumerateDates = (start, end) => {
     }
     return dates;
 };
-const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, endDate, habitColors: customHabitColors = {}, habitEmojis: customHabitEmojis = {}, defaultView = 'heatmap', hideControls = false, compactLegend = false, }) => {
+const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, endDate, habitColors: customHabitColors = {}, habitEmojis: customHabitEmojis = {}, defaultView = 'scatter', hideControls = false, compactLegend = false, }) => {
     const svgRef = useRef(null);
     const [view, setView] = useState(defaultView);
     const [activeHabits, setActiveHabits] = useState([]);
@@ -4364,7 +4370,16 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
             const d = new Date(e.loggedAt);
             if (Number.isNaN(d.getTime()))
                 return null;
-            return { habitKey: e.habitKey, hour: d.getHours(), date: getDateKey(d) };
+            const hour = d.getHours();
+            const minute = d.getMinutes();
+            const second = d.getSeconds();
+            return {
+                habitKey: e.habitKey,
+                date: getDateKey(d),
+                hour,
+                minute,
+                hourFraction: hour + minute / 60 + second / 3600,
+            };
         })
             .filter((e) => e !== null);
     }, [events]);
@@ -4393,22 +4408,6 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
         const active = new Set(activeHabits);
         return parsed.filter(e => active.has(e.habitKey));
     }, [parsed, activeHabits]);
-    // Heatmap cell counts: key = `${date}|${hour}`, value = { total, byHabit }
-    const cellCounts = useMemo(() => {
-        const map = new Map();
-        filtered.forEach(e => {
-            const key = `${e.date}|${e.hour}`;
-            let cell = map.get(key);
-            if (!cell) {
-                cell = { total: 0, byHabit: new Map() };
-                map.set(key, cell);
-            }
-            cell.total += 1;
-            cell.byHabit.set(e.habitKey, (cell.byHabit.get(e.habitKey) || 0) + 1);
-        });
-        return map;
-    }, [filtered]);
-    // Hourly totals: array of { hour, total, byHabit }
     const hourlyTotals = useMemo(() => {
         const totals = Array.from({ length: 24 }, (_, hour) => ({
             hour,
@@ -4422,21 +4421,10 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
         });
         return totals;
     }, [filtered]);
-    const maxCellCount = useMemo(() => {
-        let max = 0;
-        cellCounts.forEach(v => {
-            if (v.total > max)
-                max = v.total;
-        });
-        return max;
-    }, [cellCounts]);
-    const maxHourTotal = useMemo(() => {
-        return hourlyTotals.reduce((m, b) => Math.max(m, b.total), 0);
-    }, [hourlyTotals]);
+    const maxHourTotal = useMemo(() => hourlyTotals.reduce((m, b) => Math.max(m, b.total), 0), [hourlyTotals]);
     const toggleHabit = (habit) => {
         setActiveHabits(prev => prev.includes(habit) ? prev.filter(h => h !== habit) : [...prev, habit]);
     };
-    // Render heatmap
     useEffect(() => {
         if (!svgRef.current)
             return;
@@ -4451,74 +4439,64 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
         const g = svg
             .append('g')
             .attr('transform', `translate(${margin.left},${margin.top})`);
-        if (view === 'heatmap') {
+        if (view === 'scatter') {
             if (dateRange.length === 0)
                 return;
-            const xScale = d3.scaleBand()
-                .domain(d3.range(24))
-                .range([0, chartWidth])
-                .padding(0.08);
+            const xScale = d3.scaleLinear()
+                .domain([0, 24])
+                .range([0, chartWidth]);
             const yScale = d3.scaleBand()
                 .domain(dateRange)
                 .range([0, chartHeight])
-                .padding(0.08);
-            const intensity = (count) => {
-                if (count === 0)
-                    return 0;
-                const denom = Math.max(1, maxCellCount);
-                return 0.2 + 0.8 * (count / denom);
-            };
-            const cells = [];
-            dateRange.forEach(date => {
-                for (let hour = 0; hour < 24; hour++) {
-                    const cell = cellCounts.get(`${date}|${hour}`);
-                    cells.push({
-                        date,
-                        hour,
-                        count: cell?.total ?? 0,
-                        byHabit: cell?.byHabit ?? new Map(),
-                    });
-                }
-            });
-            g.selectAll('rect.cell')
-                .data(cells)
+                .padding(0.1);
+            // Vertical grid lines per 3 hours
+            g.selectAll('line.xgrid')
+                .data([0, 3, 6, 9, 12, 15, 18, 21, 24])
                 .enter()
-                .append('rect')
-                .attr('class', d => (d.count === 0 ? styles$7.cellEmpty : styles$7.cell))
-                .attr('x', d => xScale(d.hour) ?? 0)
-                .attr('y', d => yScale(d.date) ?? 0)
-                .attr('width', xScale.bandwidth())
-                .attr('height', yScale.bandwidth())
-                .attr('rx', 2)
-                .attr('opacity', d => (d.count === 0 ? 1 : intensity(d.count)))
+                .append('line')
+                .attr('class', styles$7.gridLine)
+                .attr('x1', d => xScale(d))
+                .attr('x2', d => xScale(d))
+                .attr('y1', 0)
+                .attr('y2', chartHeight);
+            // Dots
+            const rowHeight = yScale.bandwidth();
+            const radius = Math.min(5, Math.max(2, rowHeight / 2));
+            g.selectAll('circle.dot')
+                .data(filtered)
+                .enter()
+                .append('circle')
+                .attr('class', styles$7.dot)
+                .attr('cx', d => xScale(d.hourFraction))
+                .attr('cy', d => (yScale(d.date) ?? 0) + rowHeight / 2)
+                .attr('r', radius)
+                .attr('fill', d => getColor(d.habitKey))
+                .attr('opacity', d => hoveredHabit && hoveredHabit !== d.habitKey ? 0.15 : 0.8)
+                .style('cursor', 'pointer')
                 .on('mouseenter', function (_event, d) {
-                if (d.count === 0)
-                    return;
                 const rect = svgRef.current?.getBoundingClientRect();
                 if (!rect)
                     return;
                 setTooltipData({
-                    x: (xScale(d.hour) ?? 0) + xScale.bandwidth() / 2 + margin.left + rect.left,
+                    x: xScale(d.hourFraction) + margin.left + rect.left,
                     y: (yScale(d.date) ?? 0) + margin.top + rect.top,
+                    habit: d.habitKey,
                     hour: d.hour,
+                    minute: d.minute,
                     date: d.date,
-                    count: d.count,
-                    breakdown: Array.from(d.byHabit.entries())
-                        .map(([habit, count]) => ({ habit, count }))
-                        .sort((a, b) => b.count - a.count),
+                    count: 1,
                 });
             })
                 .on('mouseleave', () => setTooltipData(null));
             // X axis (hours)
-            const hourTicks = [0, 3, 6, 9, 12, 15, 18, 21];
             const xAxis = d3.axisBottom(xScale)
-                .tickValues(hourTicks)
+                .tickValues([0, 3, 6, 9, 12, 15, 18, 21])
                 .tickFormat(d => formatHour(d));
             g.append('g')
                 .attr('class', styles$7.xAxis)
                 .attr('transform', `translate(0,${chartHeight})`)
                 .call(xAxis);
-            // Y axis (dates) — show only a few evenly spaced
+            // Y axis (dates) — evenly spaced
             const yTickCount = Math.min(8, dateRange.length);
             const yStep = Math.max(1, Math.floor(dateRange.length / yTickCount));
             const yTickValues = dateRange.filter((_, i) => i % yStep === 0);
@@ -4531,7 +4509,7 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
             g.append('g').attr('class', styles$7.yAxis).call(yAxis);
         }
         else {
-            // Totals view: bar chart of hour totals
+            // Totals view: stacked bar by hour
             const xScale = d3.scaleBand()
                 .domain(d3.range(24))
                 .range([0, chartWidth])
@@ -4540,7 +4518,6 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
                 .domain([0, Math.max(1, maxHourTotal)])
                 .nice()
                 .range([chartHeight, 0]);
-            // Grid lines
             g.selectAll('line.grid')
                 .data(yScale.ticks(5))
                 .enter()
@@ -4550,7 +4527,6 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
                 .attr('x2', chartWidth)
                 .attr('y1', d => yScale(d))
                 .attr('y2', d => yScale(d));
-            // Stacked bars by habit
             hourlyTotals.forEach(bucket => {
                 let cumulative = 0;
                 const entries = Array.from(bucket.byHabit.entries()).sort(([a], [b]) => a.localeCompare(b));
@@ -4567,7 +4543,6 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
                         .attr('opacity', hoveredHabit && hoveredHabit !== habit ? 0.3 : 1);
                     cumulative += count;
                 });
-                // Invisible hover target for the whole bar
                 if (bucket.total > 0) {
                     g.append('rect')
                         .attr('x', xScale(bucket.hour) ?? 0)
@@ -4593,7 +4568,6 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
                         .on('mouseleave', () => setTooltipData(null));
                 }
             });
-            // X axis
             const xAxis = d3.axisBottom(xScale)
                 .tickValues([0, 3, 6, 9, 12, 15, 18, 21])
                 .tickFormat(d => formatHour(d));
@@ -4605,10 +4579,9 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
         }
     }, [
         view,
-        cellCounts,
+        filtered,
         hourlyTotals,
         dateRange,
-        maxCellCount,
         maxHourTotal,
         chartWidth,
         chartHeight,
@@ -4619,7 +4592,7 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
         getColor,
     ]);
     const viewConfig = {
-        heatmap: { icon: '🗓️', label: 'Grid' },
+        scatter: { icon: '•••', label: 'Scatter' },
         totals: { icon: '📊', label: 'Totals' },
     };
     const formatTooltipDate = (date) => {
@@ -4630,7 +4603,9 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
             day: 'numeric',
         });
     };
-    return (jsxs("div", { className: styles$7.container, children: [!hideControls && (jsx("div", { className: styles$7.controls, children: jsx("div", { className: styles$7.viewToggle, children: ['heatmap', 'totals'].map(type => (jsxs("button", { className: `${styles$7.viewButton} ${view === type ? styles$7.active : ''}`, onClick: () => setView(type), title: viewConfig[type].label, children: [jsx("span", { className: styles$7.viewIcon, children: viewConfig[type].icon }), jsx("span", { className: styles$7.viewLabel, children: viewConfig[type].label })] }, type))) }) })), habits.length > 0 && (jsx("div", { className: `${styles$7.legend}${compactLegend ? ` ${styles$7.compactLegend}` : ''}`, children: habits.map(habit => (jsxs("button", { className: `${styles$7.legendItem} ${!activeHabits.includes(habit) ? styles$7.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsx("span", { className: styles$7.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsx("span", { className: styles$7.legendColor, style: { backgroundColor: getColor(habit) } }), jsx("span", { className: styles$7.legendLabel, children: habit })] }, habit))) })), jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", className: styles$7.chart }), tooltipData && (jsxs("div", { className: `${styles$7.tooltip} ${styles$7.visible}`, style: { left: `${tooltipData.x}px`, top: `${tooltipData.y - 80}px` }, children: [jsx("div", { className: styles$7.tooltipHeader, children: jsxs("span", { children: [formatHour(tooltipData.hour), tooltipData.date ? ` · ${formatTooltipDate(tooltipData.date)}` : ''] }) }), jsxs("div", { className: styles$7.tooltipInfo, children: [jsxs("div", { className: styles$7.tooltipValue, children: [jsx("strong", { children: tooltipData.count }), jsxs("span", { className: styles$7.tooltipUnits, children: ["event", tooltipData.count === 1 ? '' : 's'] })] }), tooltipData.breakdown.length > 1 && (jsx("div", { className: styles$7.tooltipBreakdown, children: tooltipData.breakdown.map(({ habit, count }) => (jsxs("div", { className: styles$7.tooltipBreakdownRow, children: [jsx("span", { className: styles$7.tooltipDot, style: { backgroundColor: getColor(habit) } }), jsxs("span", { children: [customHabitEmojis[habit] || '', " ", habit] }), jsx("span", { className: styles$7.tooltipCount, children: count })] }, habit))) }))] })] }))] }));
+    return (jsxs("div", { className: styles$7.container, children: [!hideControls && (jsx("div", { className: styles$7.controls, children: jsx("div", { className: styles$7.viewToggle, children: ['scatter', 'totals'].map(type => (jsxs("button", { className: `${styles$7.viewButton} ${view === type ? styles$7.active : ''}`, onClick: () => setView(type), title: viewConfig[type].label, children: [jsx("span", { className: styles$7.viewIcon, children: viewConfig[type].icon }), jsx("span", { className: styles$7.viewLabel, children: viewConfig[type].label })] }, type))) }) })), habits.length > 0 && (jsx("div", { className: `${styles$7.legend}${compactLegend ? ` ${styles$7.compactLegend}` : ''}`, children: habits.map(habit => (jsxs("button", { className: `${styles$7.legendItem} ${!activeHabits.includes(habit) ? styles$7.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsx("span", { className: styles$7.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsx("span", { className: styles$7.legendColor, style: { backgroundColor: getColor(habit) } }), jsx("span", { className: styles$7.legendLabel, children: habit })] }, habit))) })), jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", className: styles$7.chart }), tooltipData && (jsx("div", { className: `${styles$7.tooltip} ${styles$7.visible}`, style: { left: `${tooltipData.x}px`, top: `${tooltipData.y - 70}px` }, children: tooltipData.habit ? (jsxs(Fragment, { children: [jsxs("div", { className: styles$7.tooltipHeader, children: [jsx("span", { className: styles$7.tooltipDot, style: { backgroundColor: getColor(tooltipData.habit) } }), jsxs("span", { children: [customHabitEmojis[tooltipData.habit] || '', " ", tooltipData.habit] })] }), jsx("div", { className: styles$7.tooltipInfo, children: jsxs("div", { className: styles$7.tooltipDate, children: [tooltipData.date ? formatTooltipDate(tooltipData.date) : '', tooltipData.minute !== undefined
+                                        ? ` · ${formatTime$1(tooltipData.hour, tooltipData.minute)}`
+                                        : ''] }) })] })) : (jsxs(Fragment, { children: [jsx("div", { className: styles$7.tooltipHeader, children: jsx("span", { children: formatHour(tooltipData.hour) }) }), jsxs("div", { className: styles$7.tooltipInfo, children: [jsxs("div", { className: styles$7.tooltipValue, children: [jsx("strong", { children: tooltipData.count }), jsxs("span", { className: styles$7.tooltipUnits, children: ["event", tooltipData.count === 1 ? '' : 's'] })] }), tooltipData.breakdown && tooltipData.breakdown.length > 1 && (jsx("div", { className: styles$7.tooltipBreakdown, children: tooltipData.breakdown.map(({ habit, count }) => (jsxs("div", { className: styles$7.tooltipBreakdownRow, children: [jsx("span", { className: styles$7.tooltipDot, style: { backgroundColor: getColor(habit) } }), jsxs("span", { children: [customHabitEmojis[habit] || '', " ", habit] }), jsx("span", { className: styles$7.tooltipCount, children: count })] }, habit))) }))] })] })) }))] }));
 };
 
 var styles$6 = {"container":"SleepChart-module_container__RjHVU","header":"SleepChart-module_header__bcoWe","title":"SleepChart-module_title__6-QII","legend":"SleepChart-module_legend__VsqQj","legendItem":"SleepChart-module_legendItem__2c1nd","sleepDot":"SleepChart-module_sleepDot__qCY6O","wakeDot":"SleepChart-module_wakeDot__-RcrT","chart":"SleepChart-module_chart__jC1nL","gridLine":"SleepChart-module_gridLine__hi715","sleepBar":"SleepChart-module_sleepBar__Hk76f","xAxis":"SleepChart-module_xAxis__xzXyM","yAxis":"SleepChart-module_yAxis__7N-LA","tooltip":"SleepChart-module_tooltip__jQBv1","visible":"SleepChart-module_visible__wy0ck","tooltipHeader":"SleepChart-module_tooltipHeader__5BdPL","tooltipEmoji":"SleepChart-module_tooltipEmoji__c5vtz","tooltipInfo":"SleepChart-module_tooltipInfo__9Yrno","tooltipRow":"SleepChart-module_tooltipRow__CuDaE","tooltipLabel":"SleepChart-module_tooltipLabel__7SNzQ","tooltipValue":"SleepChart-module_tooltipValue__FoAVy","tooltipDuration":"SleepChart-module_tooltipDuration__d2wBW"};