@stfrigerio/sito-template 0.1.81 → 0.1.83

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;AA8DD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA0ZlE,CAAA"}
+{"version":3,"file":"HabitTimeOfDayChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/charts/HabitTimeOfDayChart/HabitTimeOfDayChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAKhF,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;AAwED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAidlE,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"QuantifiableHabitsChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/charts/QuantifiableHabitsChart/QuantifiableHabitsChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAIhF,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAA;AAOnE,UAAU,SAAS;IACf,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;CACvC;AAUD,UAAU,4BAA4B;IAClC,IAAI,EAAE,SAAS,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,QAAQ,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;IAC9D,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,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;CAC1B;AAcD,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAqd1E,CAAA"}
+{"version":3,"file":"QuantifiableHabitsChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/charts/QuantifiableHabitsChart/QuantifiableHabitsChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAKhF,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAA;AAOnE,UAAU,SAAS;IACf,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;CACvC;AAUD,UAAU,4BAA4B;IAClC,IAAI,EAAE,SAAS,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,QAAQ,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;IAC9D,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,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;CAC1B;AAcD,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAqd1E,CAAA"}

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { motion, AnimatePresence, useDragControls, useMotionValue, useTransform, animate, LayoutGroup } from 'framer-motion';
 import React, { useRef, useEffect, useCallback, useState, useMemo, createContext, useContext, Fragment as Fragment$1, memo } from 'react';
 import { createPortal } from 'react-dom';
-import { X, Calendar as Calendar$1, ChevronDown, Search, Check, Edit, Folder, Users, Book, MessageSquare, UserPlus, Sun, Moon, Info, Github, SquareKanban, ChevronRight, Plus, Loader2, AlertTriangle, Play, Brain, FolderSearch, FilePlus, Pencil, FileText, Terminal, Trash2, GripVertical, Download, Menu, ChevronLeft, Maximize, Share2, Pause } from 'lucide-react';
+import { X, Calendar as Calendar$1, ChevronDown, Search, Check, Edit, Folder, Users, Book, MessageSquare, UserPlus, Sun, Moon, Info, Github, SquareKanban, ChevronRight, Plus, Loader2, AlertTriangle, Play, Brain, FolderSearch, FilePlus, Pencil, FileText, Terminal, Trash2, GripVertical, Download, Menu, Divide, Sigma, BarChart3, ScatterChart, ChevronLeft, Maximize, Share2, Pause } from 'lucide-react';
 import dayjs from 'dayjs';
 import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -4306,7 +4306,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
         quarterly: { icon: '📊', label: 'Quarterly' }
     };
     const shouldShowAggregationToggle = viewType !== 'daily';
-    return (jsxs("div", { className: styles$8.container, children: [!hideControls && (jsxs("div", { className: styles$8.controls, children: [jsx("div", { className: styles$8.viewToggle, children: availableViewTypes.map(type => (jsxs("button", { className: `${styles$8.viewButton} ${viewType === type ? styles$8.active : ''}`, onClick: () => setViewType(type), title: viewTypeConfig[type].label, children: [jsx("span", { className: styles$8.viewIcon, children: viewTypeConfig[type].icon }), jsx("span", { className: styles$8.viewLabel, children: viewTypeConfig[type].label })] }, type))) }), shouldShowAggregationToggle && (jsxs("div", { className: styles$8.aggregationToggle, children: [jsxs("button", { className: `${styles$8.aggregationButton} ${aggregationMode === 'average' ? styles$8.active : ''}`, onClick: () => setAggregationMode('average'), title: "Show average values for each period", children: [jsx("span", { className: styles$8.aggregationIcon, children: "\uD83D\uDCCA" }), jsx("span", { className: styles$8.aggregationLabel, children: "Average" })] }), jsxs("button", { className: `${styles$8.aggregationButton} ${aggregationMode === 'sum' ? styles$8.active : ''}`, onClick: () => setAggregationMode('sum'), title: "Show total values for each period", children: [jsx("span", { className: styles$8.aggregationIcon, children: "\u2795" }), jsx("span", { className: styles$8.aggregationLabel, children: "Sum" })] })] }))] })), jsx("div", { className: `${styles$8.legend}${compactLegend ? ` ${styles$8.compactLegend}` : ''}`, children: habits.map(habit => (jsxs("button", { className: `${styles$8.legendItem} ${!activeHabits.includes(habit) ? styles$8.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsx("span", { className: styles$8.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsx("span", { className: styles$8.legendColor, style: { backgroundColor: getColor(habit) } }), jsx("span", { className: styles$8.legendLabel, children: habit })] }, habit))) }), jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", className: styles$8.chart }), tooltipData && (jsxs("div", { ref: tooltipRef, className: `${styles$8.tooltip} ${tooltipData ? styles$8.visible : ''}`, style: {
+    return (jsxs("div", { className: styles$8.container, children: [!hideControls && (jsxs("div", { className: styles$8.controls, children: [jsx("div", { className: styles$8.viewToggle, children: availableViewTypes.map(type => (jsxs("button", { className: `${styles$8.viewButton} ${viewType === type ? styles$8.active : ''}`, onClick: () => setViewType(type), title: viewTypeConfig[type].label, children: [jsx("span", { className: styles$8.viewIcon, children: viewTypeConfig[type].icon }), jsx("span", { className: styles$8.viewLabel, children: viewTypeConfig[type].label })] }, type))) }), shouldShowAggregationToggle && (jsxs("div", { className: styles$8.aggregationToggle, children: [jsxs("button", { className: `${styles$8.aggregationButton} ${aggregationMode === 'average' ? styles$8.active : ''}`, onClick: () => setAggregationMode('average'), title: "Show average values for each period", children: [jsx("span", { className: styles$8.aggregationIcon, children: jsx(Divide, { size: 16 }) }), jsx("span", { className: styles$8.aggregationLabel, children: "Average" })] }), jsxs("button", { className: `${styles$8.aggregationButton} ${aggregationMode === 'sum' ? styles$8.active : ''}`, onClick: () => setAggregationMode('sum'), title: "Show total values for each period", children: [jsx("span", { className: styles$8.aggregationIcon, children: jsx(Sigma, { size: 16 }) }), jsx("span", { className: styles$8.aggregationLabel, children: "Sum" })] })] }))] })), jsx("div", { className: `${styles$8.legend}${compactLegend ? ` ${styles$8.compactLegend}` : ''}`, children: habits.map(habit => (jsxs("button", { className: `${styles$8.legendItem} ${!activeHabits.includes(habit) ? styles$8.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsx("span", { className: styles$8.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsx("span", { className: styles$8.legendColor, style: { backgroundColor: getColor(habit) } }), jsx("span", { className: styles$8.legendLabel, children: habit })] }, habit))) }), jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", className: styles$8.chart }), tooltipData && (jsxs("div", { ref: tooltipRef, className: `${styles$8.tooltip} ${tooltipData ? styles$8.visible : ''}`, style: {
                     left: `${tooltipData.x}px`,
                     top: `${tooltipData.y - 80}px`
                 }, 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" })] })] })] }))] }));
@@ -4408,6 +4408,53 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
         const active = new Set(activeHabits);
         return parsed.filter(e => active.has(e.habitKey));
     }, [parsed, activeHabits]);
+    // Group events that land on the same minute (same habit) into a single
+    // cluster so overlapping dots become one sized/counted dot. Then, for any
+    // (date, minute) coord with multiple habits, fan them out horizontally so
+    // different-colored dots stop masking each other.
+    const clusters = useMemo(() => {
+        const byKey = new Map();
+        filtered.forEach(e => {
+            const bucketFraction = Math.round(e.hourFraction * 60) / 60;
+            const bucketMinute = Math.round(bucketFraction * 60) % 60;
+            const bucketHour = Math.floor(bucketFraction);
+            const key = `${e.date}|${e.habitKey}|${bucketFraction}`;
+            const existing = byKey.get(key);
+            if (existing) {
+                existing.count += 1;
+            }
+            else {
+                byKey.set(key, {
+                    habitKey: e.habitKey,
+                    date: e.date,
+                    hour: bucketHour,
+                    minute: bucketMinute,
+                    hourFraction: bucketFraction,
+                    count: 1,
+                    xOffsetPx: 0,
+                });
+            }
+        });
+        const coordGroups = new Map();
+        byKey.forEach(c => {
+            const coordKey = `${c.date}|${c.hourFraction}`;
+            const arr = coordGroups.get(coordKey);
+            if (arr)
+                arr.push(c);
+            else
+                coordGroups.set(coordKey, [c]);
+        });
+        const out = [];
+        const spacing = 10;
+        coordGroups.forEach(group => {
+            group.sort((a, b) => a.habitKey.localeCompare(b.habitKey));
+            const mid = (group.length - 1) / 2;
+            group.forEach((c, i) => {
+                out.push({ ...c, xOffsetPx: (i - mid) * spacing });
+            });
+        });
+        return out;
+    }, [filtered]);
     const hourlyTotals = useMemo(() => {
         const totals = Array.from({ length: 24 }, (_, hour) => ({
             hour,
@@ -4461,15 +4508,16 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
                 .attr('y2', chartHeight);
             // Dots
             const rowHeight = yScale.bandwidth();
-            const radius = Math.min(5, Math.max(2, rowHeight / 2));
+            const baseRadius = Math.min(5, Math.max(2, rowHeight / 2));
+            const maxRadius = baseRadius * 2.2;
             g.selectAll('circle.dot')
-                .data(filtered)
+                .data(clusters)
                 .enter()
                 .append('circle')
                 .attr('class', styles$7.dot)
-                .attr('cx', d => xScale(d.hourFraction))
+                .attr('cx', d => xScale(d.hourFraction) + d.xOffsetPx)
                 .attr('cy', d => (yScale(d.date) ?? 0) + rowHeight / 2)
-                .attr('r', radius)
+                .attr('r', d => Math.min(maxRadius, baseRadius * Math.sqrt(d.count)))
                 .attr('fill', d => getColor(d.habitKey))
                 .attr('opacity', d => hoveredHabit && hoveredHabit !== d.habitKey ? 0.15 : 0.8)
                 .style('cursor', 'pointer')
@@ -4478,13 +4526,13 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
                 if (!rect)
                     return;
                 setTooltipData({
-                    x: xScale(d.hourFraction) + margin.left + rect.left,
+                    x: xScale(d.hourFraction) + d.xOffsetPx + 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: 1,
+                    count: d.count,
                 });
             })
                 .on('mouseleave', () => setTooltipData(null));
@@ -4580,6 +4628,7 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
     }, [
         view,
         filtered,
+        clusters,
         hourlyTotals,
         dateRange,
         maxHourTotal,
@@ -4592,8 +4641,8 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
         getColor,
     ]);
     const viewConfig = {
-        scatter: { icon: '•••', label: 'Scatter' },
-        totals: { icon: '📊', label: 'Totals' },
+        scatter: { icon: jsx(ScatterChart, { size: 16 }), label: 'Scatter' },
+        totals: { icon: jsx(BarChart3, { size: 16 }), label: 'Totals' },
     };
     const formatTooltipDate = (date) => {
         const [y, m, d] = date.split('-').map(Number);
@@ -4603,9 +4652,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: ['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))) }))] })] })) }))] }));
+    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] })] }), jsxs("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)}`
+                                            : ''] }), tooltipData.count > 1 && (jsxs("div", { className: styles$7.tooltipValue, children: [jsx("strong", { children: tooltipData.count }), jsx("span", { className: styles$7.tooltipUnits, children: "events" })] }))] })] })) : (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"};