@stfrigerio/sito-template 0.1.21 → 0.1.22

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

@@ -1 +1 @@
-{"version":3,"file":"SleepChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/charts/SleepChart/SleepChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAA;AAIzD,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;CAC3B;AAED,UAAU,eAAe;IACrB,SAAS,EAAE,SAAS,EAAE,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC;AAOD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoQhD,CAAA"}
+{"version":3,"file":"SleepChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/charts/SleepChart/SleepChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAA;AAIzD,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;CAC3B;AAED,UAAU,eAAe;IACrB,SAAS,EAAE,SAAS,EAAE,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC;AAOD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6UhD,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"SunburstChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/charts/SunburstChart/SunburstChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAI7D,MAAM,WAAW,cAAc;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAA;CAC9B;AAED,UAAU,kBAAkB;IACxB,IAAI,EAAE,cAAc,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACvB;AAgCD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkiBtD,CAAA"}
+{"version":3,"file":"SunburstChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/charts/SunburstChart/SunburstChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAI7D,MAAM,WAAW,cAAc;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAA;CAC9B;AAED,UAAU,kBAAkB;IACxB,IAAI,EAAE,cAAc,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACvB;AAgCD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4jBtD,CAAA"}

package/dist/index.esm.js

@@ -2473,9 +2473,9 @@ const parseTimeToDecimal = (time) => {
     const [hours, minutes] = time.split(':').map(Number);
     return hours + minutes / 60;
 };
-const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
+const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick }) => {
     const svgRef = useRef(null);
-    const margin = useMemo(() => ({ top: 20, right: 20, bottom: 40, left: 60 }), []);
+    const margin = useMemo(() => ({ top: 30, right: 30, bottom: 50, left: 80 }), []);
     const chartWidth = width - margin.left - margin.right;
     const chartHeight = height - margin.top - margin.bottom;
     useEffect(() => {
@@ -2489,17 +2489,18 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
         const tooltip = d3.select('body').append('div')
             .attr('class', 'sleep-chart-tooltip')
             .style('position', 'absolute')
-            .style('background', 'var(--bg-secondary)')
-            .style('color', 'var(--text-primary)')
-            .style('padding', '12px')
-            .style('border-radius', '8px')
-            .style('box-shadow', '0 4px 12px rgba(0,0,0,0.25)')
-            .style('border', '1px solid var(--border-primary)')
+            .style('background', 'linear-gradient(135deg, rgba(155, 89, 182, 0.95), rgba(52, 152, 219, 0.95))')
+            .style('color', '#ffffff')
+            .style('padding', '16px')
+            .style('border-radius', '12px')
+            .style('box-shadow', '0 8px 24px rgba(0,0,0,0.3)')
+            .style('border', '1px solid rgba(255,255,255,0.2)')
             .style('font-size', '14px')
             .style('pointer-events', 'none')
             .style('opacity', 0)
             .style('z-index', '1000')
-            .style('backdrop-filter', 'blur(8px)');
+            .style('backdrop-filter', 'blur(12px)')
+            .style('min-width', '180px');
         const xScale = d3.scaleLinear()
             .domain([18, 42])
             .range([0, chartWidth]);
@@ -2507,16 +2508,39 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
         const yScale = d3.scaleBand()
             .domain(yDomain)
             .range([0, chartHeight])
-            .paddingInner(0.1)
-            .paddingOuter(0.05);
+            .paddingInner(0.2)
+            .paddingOuter(0.1);
+        // Add vertical grid lines with midnight/noon highlights
         g.selectAll('.grid-line-x')
-            .data(d3.range(18, 43, 3))
+            .data(d3.range(18, 43, 1))
             .enter().append('line')
             .attr('class', styles$4.gridLine)
             .attr('x1', d => xScale(d))
             .attr('y1', 0)
             .attr('x2', d => xScale(d))
-            .attr('y2', chartHeight);
+            .attr('y2', chartHeight)
+            .style('stroke', d => {
+            const hour = d % 24;
+            if (hour === 0)
+                return 'var(--color-border)'; // Midnight
+            if (hour === 12)
+                return 'var(--color-border)'; // Noon
+            return 'var(--color-border)';
+        })
+            .style('stroke-opacity', d => {
+            const hour = d % 24;
+            if (hour === 0 || hour === 12)
+                return 0.3;
+            if (hour % 3 === 0)
+                return 0.15;
+            return 0.05;
+        })
+            .style('stroke-width', d => {
+            const hour = d % 24;
+            if (hour === 0 || hour === 12)
+                return 2;
+            return 1;
+        });
         sleepData.forEach((dayData) => {
             const yValue = yScale(dayData.date);
             if (yValue === undefined)
@@ -2554,37 +2578,60 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
             }
             // Draw the bar only if both values exist
             if (sleepHour !== null && wakeHour !== null) {
-                sleepGroup.append('rect')
+                const rect = sleepGroup.append('rect')
                     .attr('x', xScale(sleepHour))
                     .attr('y', yValue)
-                    .attr('width', Math.max(0, xScale(wakeHour) - xScale(sleepHour)))
+                    .attr('width', 0) // Start with 0 width for animation
                     .attr('height', barHeight)
-                    .attr('rx', 4)
+                    .attr('rx', barHeight / 2)
                     .attr('fill', 'url(#sleepGradient)')
-                    .attr('opacity', 0.8)
-                    .attr('stroke', 'none');
+                    .attr('opacity', 0) // Start invisible
+                    .attr('stroke', 'rgba(255,255,255,0.3)')
+                    .attr('stroke-width', 1)
+                    .style('filter', 'drop-shadow(0 2px 8px rgba(155, 89, 182, 0.3))');
+                // Animate the bar
+                rect.transition()
+                    .duration(800)
+                    .delay(Math.random() * 200) // Stagger the animations
+                    .ease(d3.easeCubicOut)
+                    .attr('width', Math.max(0, xScale(wakeHour) - xScale(sleepHour)))
+                    .attr('opacity', 0.85);
             }
             // Draw sleep dot if sleep time exists
             if (sleepHour !== null) {
-                sleepGroup.append('circle')
+                const sleepDot = sleepGroup.append('circle')
                     .attr('cx', xScale(sleepHour))
                     .attr('cy', yValue + barHeight / 2)
-                    .attr('r', 4)
+                    .attr('r', 0) // Start with 0 radius
                     .attr('fill', '#9B59B6')
-                    .attr('stroke', '#fff')
-                    .attr('stroke-width', 1)
-                    .style('filter', 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))');
+                    .attr('stroke', '#ffffff')
+                    .attr('stroke-width', 2)
+                    .style('filter', 'drop-shadow(0 3px 6px rgba(155, 89, 182, 0.4))')
+                    .style('transition', 'all 0.3s ease');
+                // Animate the dot
+                sleepDot.transition()
+                    .duration(400)
+                    .delay(300 + Math.random() * 100)
+                    .ease(d3.easeBackOut)
+                    .attr('r', 6);
             }
             // Draw wake dot if wake hour exists
             if (wakeHour !== null) {
-                sleepGroup.append('circle')
+                const wakeDot = sleepGroup.append('circle')
                     .attr('cx', xScale(wakeHour))
                     .attr('cy', yValue + barHeight / 2)
-                    .attr('r', 4)
+                    .attr('r', 0) // Start with 0 radius
                     .attr('fill', '#3498DB')
-                    .attr('stroke', '#fff')
-                    .attr('stroke-width', 1)
-                    .style('filter', 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))');
+                    .attr('stroke', '#ffffff')
+                    .attr('stroke-width', 2)
+                    .style('filter', 'drop-shadow(0 3px 6px rgba(52, 152, 219, 0.4))')
+                    .style('transition', 'all 0.3s ease');
+                // Animate the dot
+                wakeDot.transition()
+                    .duration(400)
+                    .delay(500 + Math.random() * 100)
+                    .ease(d3.easeBackOut)
+                    .attr('r', 6);
             }
             // Add hover interactions with tooltip
             sleepGroup
@@ -2594,7 +2641,12 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
                     .transition()
                     .duration(200)
                     .attr('opacity', 1)
-                    .style('filter', 'brightness(1.1)');
+                    .style('filter', 'drop-shadow(0 4px 12px rgba(155, 89, 182, 0.5)) brightness(1.1)');
+                // Scale up the dots
+                d3.select(this).selectAll('circle')
+                    .transition()
+                    .duration(200)
+                    .attr('r', 8);
                 // Show tooltip
                 const formatTime = (hour) => {
                     const h24 = hour % 24;
@@ -2603,18 +2655,18 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
                     const minutes = Math.round((hour % 1) * 60);
                     return `${h12}:${minutes.toString().padStart(2, '0')} ${ampm}`;
                 };
-                let tooltipContent = `<div><strong>${new Date(dayData.date).toLocaleDateString()}</strong></div>`;
+                let tooltipContent = `<div style="font-weight: bold; margin-bottom: 8px; font-size: 16px;">${new Date(dayData.date).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}</div>`;
                 if (sleepHour !== null && wakeHour !== null) {
                     const sleepDuration = wakeHour - sleepHour;
-                    tooltipContent += `<div>Sleep: ${formatTime(sleepHour)}</div>`;
-                    tooltipContent += `<div>Wake: ${formatTime(wakeHour)}</div>`;
-                    tooltipContent += `<div>Duration: ${Math.floor(sleepDuration)}h ${Math.round((sleepDuration % 1) * 60)}m</div>`;
+                    tooltipContent += `<div style="margin: 4px 0;">🌙 Sleep: ${formatTime(sleepHour)}</div>`;
+                    tooltipContent += `<div style="margin: 4px 0;">☀️ Wake: ${formatTime(wakeHour)}</div>`;
+                    tooltipContent += `<div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.2);">⏱️ Duration: ${Math.floor(sleepDuration)}h ${Math.round((sleepDuration % 1) * 60)}m</div>`;
                 }
                 else {
                     if (sleepHour !== null)
-                        tooltipContent += `<div>Sleep: ${formatTime(sleepHour)}</div>`;
+                        tooltipContent += `<div style="margin: 4px 0;">🌙 Sleep: ${formatTime(sleepHour)}</div>`;
                     if (wakeHour !== null)
-                        tooltipContent += `<div>Wake: ${formatTime(wakeHour)}</div>`;
+                        tooltipContent += `<div style="margin: 4px 0;">☀️ Wake: ${formatTime(wakeHour)}</div>`;
                 }
                 tooltip.html(tooltipContent)
                     .style('opacity', 1)
@@ -2626,8 +2678,13 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
                 d3.select(this).select('rect')
                     .transition()
                     .duration(200)
-                    .attr('opacity', 0.8)
-                    .style('filter', 'none');
+                    .attr('opacity', 0.85)
+                    .style('filter', 'drop-shadow(0 2px 8px rgba(155, 89, 182, 0.3))');
+                // Reset dots
+                d3.select(this).selectAll('circle')
+                    .transition()
+                    .duration(200)
+                    .attr('r', 6);
                 // Hide tooltip
                 tooltip.style('opacity', 0);
             })
@@ -2647,16 +2704,23 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
         gradient.append('stop')
             .attr('offset', '0%')
             .attr('stop-color', '#9B59B6')
-            .attr('stop-opacity', 0.9);
+            .attr('stop-opacity', 1);
+        gradient.append('stop')
+            .attr('offset', '50%')
+            .attr('stop-color', '#7B68A6')
+            .attr('stop-opacity', 1);
         gradient.append('stop')
             .attr('offset', '100%')
             .attr('stop-color', '#3498DB')
-            .attr('stop-opacity', 0.9);
+            .attr('stop-opacity', 1);
         const xAxisTicks = d3.range(18, 43, 3).map(hour => ({
             value: hour,
-            label: (hour % 24).toString().padStart(2, '0') + ':00'
+            label: hour === 24 ? '12 AM' : hour === 36 ? '12 PM' :
+                (hour % 24) === 0 ? '12 AM' :
+                    (hour % 24) < 12 ? `${hour % 24} AM` :
+                        (hour % 24) === 12 ? '12 PM' : `${(hour % 24) - 12} PM`
         }));
-        g.append('g')
+        const xAxis = g.append('g')
             .attr('class', styles$4.xAxis)
             .attr('transform', `translate(0,${chartHeight})`)
             .call(d3.axisBottom(xScale)
@@ -2664,7 +2728,14 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
             .tickFormat((d) => {
             const tick = xAxisTicks.find(t => t.value === d);
             return tick ? tick.label : '';
-        }));
+        })
+            .tickSizeOuter(0));
+        // Style axis ticks
+        xAxis.selectAll('text')
+            .style('font-weight', d => {
+            const hour = d % 24;
+            return hour === 0 || hour === 12 ? '600' : '400';
+        });
         const yAxisTicks = yDomain.filter((_, i) => i % Math.ceil(yDomain.length / 10) === 0);
         g.append('g')
             .attr('class', styles$4.yAxis)
@@ -2908,8 +2979,8 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                     const interpolatedArc = d3.arc()
                         .startAngle(() => currX0)
                         .endAngle(() => currX1)
-                        .innerRadius(() => Math.sqrt(currY0))
-                        .outerRadius(() => Math.sqrt(currY1))
+                        .innerRadius(() => Math.min(radius, Math.sqrt(Math.max(0, currY0))))
+                        .outerRadius(() => Math.min(radius, Math.sqrt(Math.max(0, currY1))))
                         .cornerRadius(3);
                     return interpolatedArc(node) || '';
                 };
@@ -2939,13 +3010,20 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                 .ease(d3.easeCubicInOut);
             // Zoom to clicked node - scale to fill the entire circle
             const clickedOriginal = clickedNode;
+            // Ensure we use the original x values for proper scaling
+            // The x-scale maps the clicked node's angular extent to the full circle
             const xScale = d3.scaleLinear()
                 .domain([clickedOriginal.x0Original, clickedOriginal.x1Original])
-                .range([0, 2 * Math.PI]);
-            // For the radial scale, we want to map the clicked node's radial range to the full circle
+                .range([0, 2 * Math.PI])
+                .clamp(true); // Ensure values stay within bounds
+            // For the radial scale, we want to keep the children visible
+            // Map from the clicked node's inner radius to the maximum child radius
+            const maxChildRadius = Math.max(clickedOriginal.y1Original, ...nodes.filter(d => isParentOf(clickedNode, d) && d !== clickedNode)
+                .map(d => d.y1Original));
             const yScale = d3.scaleLinear()
-                .domain([clickedOriginal.y0Original, clickedOriginal.y1Original])
-                .range([0, radius * radius]);
+                .domain([clickedOriginal.y0Original, maxChildRadius])
+                .range([0, radius * radius])
+                .clamp(true); // Ensure values stay within bounds
             // First, immediately hide elements that shouldn't be visible
             paths.style('opacity', (d) => isParentOf(clickedNode, d) ? 1 : 0);
             paths.transition(transition)
@@ -2957,17 +3035,31 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                     return () => '';
                 }
                 // Calculate new positions based on the original positions
-                const newX0 = xScale(node.x0Original);
-                const newX1 = xScale(node.x1Original);
-                // For radial positions, map them within the clicked node's range
+                // Ensure angular values wrap correctly and don't get stuck
+                let newX0 = xScale(node.x0Original);
+                let newX1 = xScale(node.x1Original);
+                // Handle edge case where the scaled values might be equal or inverted
+                if (Math.abs(newX1 - newX0) < 0.001) {
+                    // If the segment would be too small, give it a minimum size
+                    newX1 = newX0 + 0.001;
+                }
+                // Ensure the angles span correctly (handle wraparound)
+                if (newX1 < newX0) {
+                    newX1 = newX0 + (2 * Math.PI * (node.x1Original - node.x0Original) / (clickedOriginal.x1Original - clickedOriginal.x0Original));
+                }
+                // For radial positions, scale appropriately
                 let newY0, newY1;
                 if (node === clickedNode) {
-                    // The clicked node itself should fill from center to edge
+                    // The clicked node itself should fill from center to where its children start
                     newY0 = 0;
-                    newY1 = radius * radius;
+                    // Find the minimum y0 of its direct children to determine where to end
+                    const childrenY0 = node.children ?
+                        Math.min(...node.children.map(c => c.y0Original)) :
+                        clickedOriginal.y1Original;
+                    newY1 = yScale(childrenY0) * 0.95; // Slightly smaller to create visual separation
                 }
                 else {
-                    // Child nodes should be scaled within the full radius
+                    // Child nodes should be scaled within the remaining space
                     newY0 = yScale(node.y0Original);
                     newY1 = yScale(node.y1Original);
                 }
@@ -2990,8 +3082,8 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                     const interpolatedArc = d3.arc()
                         .startAngle(() => currX0)
                         .endAngle(() => currX1)
-                        .innerRadius(() => Math.sqrt(currY0))
-                        .outerRadius(() => Math.sqrt(currY1))
+                        .innerRadius(() => Math.min(radius, Math.sqrt(Math.max(0, currY0))))
+                        .outerRadius(() => Math.min(radius, Math.sqrt(Math.max(0, currY1))))
                         .cornerRadius(3);
                     return interpolatedArc(node) || '';
                 };
@@ -3027,11 +3119,11 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             return getColor(ancestor.data.name, d.depth);
         })
             .attr('stroke', () => {
-            // Get computed background color
+            // Get computed border color from theme
             const computedStyle = window.getComputedStyle(svgRef.current);
-            return computedStyle.getPropertyValue('--bg-primary') || '#ffffff';
+            return computedStyle.getPropertyValue('--color-border') || '#e2e8f0';
         })
-            .attr('stroke-width', 1)
+            .attr('stroke-width', 2)
             .style('cursor', d => (!d.children || d.children.length === 0) ? 'default' : 'pointer')
             .on('click', handleClick)
             .on('mouseover', function (event, d) {