@stfrigerio/sito-template 0.1.19 → 0.1.21

package/dist/index.js

@@ -1957,6 +1957,23 @@ function Calendar({ events, onEventClick, onDateClick, viewMode = 'month', initi
         }
         return '#4A90E2'; // Default blue
     };
+    const getContrastColor = (bgColor) => {
+        // Convert hex to RGB
+        const hex = bgColor.replace('#', '');
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        // Calculate luminance
+        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+        // Return black or white based on luminance
+        return luminance > 0.5 ? '#000000' : '#FFFFFF';
+    };
+    const getEventTextColor = (event) => {
+        if (event.textColor)
+            return event.textColor;
+        const bgColor = getEventColor(event);
+        return getContrastColor(bgColor);
+    };
     const handleEventClick = (event) => {
         if (onEventClick) {
             onEventClick(event);
@@ -2003,6 +2020,7 @@ function Calendar({ events, onEventClick, onDateClick, viewMode = 'month', initi
                                         });
                                         return (jsxRuntime.jsxs("div", { className: styles$7.hourSlot, children: [jsxRuntime.jsx("div", { className: styles$7.hourLine }), hourEvents.map((event, eventIndex) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$7.dayEvent} ${event.status === 'completed' ? styles$7.completed : ''}`, style: {
                                                         backgroundColor: getEventColor(event),
+                                                        color: getEventTextColor(event),
                                                         opacity: event.status === 'completed' ? 0.7 : 1
                                                     }, onClick: (e) => {
                                                         e.stopPropagation();
@@ -2030,6 +2048,7 @@ function Calendar({ events, onEventClick, onDateClick, viewMode = 'month', initi
                             ease: "easeOut"
                         }, onClick: () => handleDateClick(day), children: [isWeekStart && (jsxRuntime.jsx("div", { className: styles$7.weekNumber, children: getWeekNumber(day) })), jsxRuntime.jsx("div", { className: styles$7.dayNumber, children: day.getDate() }), dayEvents.length > 0 && (jsxRuntime.jsxs("div", { className: styles$7.events, children: [dayEvents.slice(0, maxEventsPerDay).map((event, eventIndex) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$7.event} ${event.status === 'completed' ? styles$7.completed : ''}`, style: {
                                             backgroundColor: getEventColor(event),
+                                            color: getEventTextColor(event),
                                             opacity: event.status === 'completed' ? 0.7 : 1
                                         }, onClick: (e) => {
                                             e.stopPropagation();
@@ -2477,7 +2496,7 @@ const parseTimeToDecimal = (time) => {
 };
 const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
     const svgRef = React.useRef(null);
-    const margin = { top: 20, right: 20, bottom: 40, left: 60 };
+    const margin = React.useMemo(() => ({ top: 20, right: 20, bottom: 40, left: 60 }), []);
     const chartWidth = width - margin.left - margin.right;
     const chartHeight = height - margin.top - margin.bottom;
     React.useEffect(() => {
@@ -2487,6 +2506,21 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
         svg.selectAll('*').remove();
         const g = svg.append('g')
             .attr('transform', `translate(${margin.left},${margin.top})`);
+        // Create tooltip
+        const tooltip = d3__namespace.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('font-size', '14px')
+            .style('pointer-events', 'none')
+            .style('opacity', 0)
+            .style('z-index', '1000')
+            .style('backdrop-filter', 'blur(8px)');
         const xScale = d3__namespace.scaleLinear()
             .domain([18, 42])
             .range([0, chartWidth]);
@@ -2518,17 +2552,25 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
             let wakeHour = null;
             if (dayData.sleep_time) {
                 sleepHour = parseTimeToDecimal(dayData.sleep_time);
-                if (sleepHour < 18)
+                // Convert evening hours to 24+ scale (e.g., 22:00 stays 22, but early morning like 02:00 becomes 26)
+                if (sleepHour < 18) {
                     sleepHour += 24;
+                }
             }
             if (dayData.wake_hour) {
                 wakeHour = parseTimeToDecimal(dayData.wake_hour);
-                if (sleepHour !== null && wakeHour < sleepHour - 18) {
-                    wakeHour += 24;
+                // If we have sleep time, wake time should be after sleep time
+                if (sleepHour !== null) {
+                    // If wake hour is before sleep hour or very early, it's next day
+                    if (wakeHour < sleepHour || (sleepHour >= 18 && wakeHour < 18)) {
+                        wakeHour += 24;
+                    }
                 }
-                else if (sleepHour === null && wakeHour < 12) {
-                    // If no sleep time but wake is in morning, assume it's next day
-                    wakeHour += 24;
+                else {
+                    // No sleep time - if wake time is early morning, assume next day
+                    if (wakeHour < 12) {
+                        wakeHour += 24;
+                    }
                 }
             }
             // Draw the bar only if both values exist
@@ -2536,11 +2578,12 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
                 sleepGroup.append('rect')
                     .attr('x', xScale(sleepHour))
                     .attr('y', yValue)
-                    .attr('width', xScale(wakeHour) - xScale(sleepHour))
+                    .attr('width', Math.max(0, xScale(wakeHour) - xScale(sleepHour)))
                     .attr('height', barHeight)
                     .attr('rx', 4)
                     .attr('fill', 'url(#sleepGradient)')
-                    .attr('opacity', 0.8);
+                    .attr('opacity', 0.8)
+                    .attr('stroke', 'none');
             }
             // Draw sleep dot if sleep time exists
             if (sleepHour !== null) {
@@ -2548,7 +2591,10 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
                     .attr('cx', xScale(sleepHour))
                     .attr('cy', yValue + barHeight / 2)
                     .attr('r', 4)
-                    .attr('fill', '#9B59B6');
+                    .attr('fill', '#9B59B6')
+                    .attr('stroke', '#fff')
+                    .attr('stroke-width', 1)
+                    .style('filter', 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))');
             }
             // Draw wake dot if wake hour exists
             if (wakeHour !== null) {
@@ -2556,20 +2602,64 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
                     .attr('cx', xScale(wakeHour))
                     .attr('cy', yValue + barHeight / 2)
                     .attr('r', 4)
-                    .attr('fill', '#3498DB');
+                    .attr('fill', '#3498DB')
+                    .attr('stroke', '#fff')
+                    .attr('stroke-width', 1)
+                    .style('filter', 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))');
             }
-            sleepGroup.on('mouseenter', function () {
+            // Add hover interactions with tooltip
+            sleepGroup
+                .on('mouseenter', function (event) {
+                // Highlight the bar
                 d3__namespace.select(this).select('rect')
                     .transition()
                     .duration(200)
-                    .attr('opacity', 1);
-            }).on('mouseleave', function () {
+                    .attr('opacity', 1)
+                    .style('filter', 'brightness(1.1)');
+                // Show tooltip
+                const formatTime = (hour) => {
+                    const h24 = hour % 24;
+                    const h12 = h24 === 0 ? 12 : h24 > 12 ? h24 - 12 : h24;
+                    const ampm = h24 >= 12 ? 'PM' : 'AM';
+                    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>`;
+                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>`;
+                }
+                else {
+                    if (sleepHour !== null)
+                        tooltipContent += `<div>Sleep: ${formatTime(sleepHour)}</div>`;
+                    if (wakeHour !== null)
+                        tooltipContent += `<div>Wake: ${formatTime(wakeHour)}</div>`;
+                }
+                tooltip.html(tooltipContent)
+                    .style('opacity', 1)
+                    .style('left', (event.pageX + 10) + 'px')
+                    .style('top', (event.pageY - 10) + 'px');
+            })
+                .on('mouseleave', function () {
+                // Reset bar appearance
                 d3__namespace.select(this).select('rect')
                     .transition()
                     .duration(200)
-                    .attr('opacity', 0.8);
+                    .attr('opacity', 0.8)
+                    .style('filter', 'none');
+                // Hide tooltip
+                tooltip.style('opacity', 0);
+            })
+                .on('mousemove', function (event) {
+                // Update tooltip position
+                tooltip
+                    .style('left', (event.pageX + 10) + 'px')
+                    .style('top', (event.pageY - 10) + 'px');
             });
         });
+        // Create gradient definition
         const defs = svg.append('defs');
         const gradient = defs.append('linearGradient')
             .attr('id', 'sleepGradient')
@@ -2578,11 +2668,11 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
         gradient.append('stop')
             .attr('offset', '0%')
             .attr('stop-color', '#9B59B6')
-            .attr('stop-opacity', 0.8);
+            .attr('stop-opacity', 0.9);
         gradient.append('stop')
             .attr('offset', '100%')
             .attr('stop-color', '#3498DB')
-            .attr('stop-opacity', 0.8);
+            .attr('stop-opacity', 0.9);
         const xAxisTicks = d3__namespace.range(18, 43, 3).map(hour => ({
             value: hour,
             label: (hour % 24).toString().padStart(2, '0') + ':00'
@@ -2605,6 +2695,10 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
             const date = new Date(d);
             return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}`;
         }));
+        // Cleanup function
+        return () => {
+            tooltip.remove();
+        };
     }, [sleepData, chartWidth, chartHeight, margin, onDateClick]);
     return (jsxRuntime.jsxs("div", { className: styles$4.container, children: [jsxRuntime.jsxs("div", { className: styles$4.header, children: [jsxRuntime.jsx("h3", { className: styles$4.title, children: "Sleep Pattern" }), jsxRuntime.jsxs("div", { className: styles$4.legend, children: [jsxRuntime.jsxs("div", { className: styles$4.legendItem, children: [jsxRuntime.jsx("span", { className: styles$4.sleepDot }), jsxRuntime.jsx("span", { children: "Sleep Time" })] }), jsxRuntime.jsxs("div", { className: styles$4.legendItem, children: [jsxRuntime.jsx("span", { className: styles$4.wakeDot }), jsxRuntime.jsx("span", { children: "Wake Time" })] })] })] }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$4.chart })] }));
 };
@@ -2737,19 +2831,29 @@ const COLOR_PALETTE = [
 const getTextColor$1 = (backgroundColor) => {
     const color = d3__namespace.color(backgroundColor);
     if (!color)
-        return '#ffffff';
+        return 'var(--text-primary)';
     const rgb = color.rgb();
     // Calculate relative luminance using WCAG formula
-    const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
-    // Return white text for dark backgrounds, black for light backgrounds
+    // Normalize RGB values to 0-1 range for proper calculation
+    const r = rgb.r / 255;
+    const g = rgb.g / 255;
+    const b = rgb.b / 255;
+    // Apply gamma correction
+    const rLinear = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
+    const gLinear = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
+    const bLinear = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
+    // Calculate relative luminance
+    const luminance = 0.2126 * rLinear + 0.7152 * gLinear + 0.0722 * bLinear;
+    // Use a threshold of 0.5 for better contrast
     return luminance > 0.5 ? '#000000' : '#ffffff';
 };
 const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Chart', tagColors = {}, unit = 'items', centerLabel }) => {
     const svgRef = React.useRef(null);
     const colorMap = React.useRef(new Map()).current;
     const colorIndex = React.useRef(0);
+    const focusedNodeRef = React.useRef(null);
     const radius = Math.min(width, height) / 2;
-    const getColor = (name, depth) => {
+    const getColor = React.useCallback((name, depth) => {
         // First check if we have a tag color for this name
         if (tagColors[name]) {
             const color = d3__namespace.color(tagColors[name]);
@@ -2769,7 +2873,7 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             return color.darker(depth * 0.3).toString();
         }
         return baseColor;
-    };
+    }, [tagColors, colorMap]);
     React.useEffect(() => {
         if (!svgRef.current || !data)
             return;
@@ -2783,6 +2887,13 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
         const partition = d3__namespace.partition()
             .size([2 * Math.PI, radius * radius]);
         const nodes = partition(root).descendants();
+        nodes.forEach((d) => {
+            const node = d;
+            node.x0Original = d.x0;
+            node.x1Original = d.x1;
+            node.y0Original = d.y0;
+            node.y1Original = d.y1;
+        });
         const arc = d3__namespace.arc()
             .startAngle(d => d.x0)
             .endAngle(d => d.x1)
@@ -2793,7 +2904,139 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             .attr('class', styles$2.tooltip)
             .style('opacity', 0)
             .style('position', 'absolute');
-        g.selectAll('path')
+        // Function to reset to original view
+        const resetView = () => {
+            focusedNodeRef.current = null;
+            const transition = d3__namespace.transition()
+                .duration(750)
+                .ease(d3__namespace.easeCubicInOut);
+            // First show all elements
+            paths.style('opacity', 1);
+            paths.transition(transition)
+                .attrTween('d', (d) => {
+                const node = d;
+                return (t) => {
+                    // Calculate interpolated positions
+                    const currX0 = d3__namespace.interpolate(node.x0, node.x0Original)(t);
+                    const currX1 = d3__namespace.interpolate(node.x1, node.x1Original)(t);
+                    const currY0 = d3__namespace.interpolate(node.y0, node.y0Original)(t);
+                    const currY1 = d3__namespace.interpolate(node.y1, node.y1Original)(t);
+                    // Update node positions continuously
+                    node.x0 = currX0;
+                    node.x1 = currX1;
+                    node.y0 = currY0;
+                    node.y1 = currY1;
+                    const interpolatedArc = d3__namespace.arc()
+                        .startAngle(() => currX0)
+                        .endAngle(() => currX1)
+                        .innerRadius(() => Math.sqrt(currY0))
+                        .outerRadius(() => Math.sqrt(currY1))
+                        .cornerRadius(3);
+                    return interpolatedArc(node) || '';
+                };
+            });
+            // Restore cursor style based on whether nodes have children
+            paths.style('cursor', d => (!d.children || d.children.length === 0) ? 'default' : 'pointer');
+            // Reset center button cursor
+            centerResetButton.style('cursor', 'default');
+            // Update labels
+            updateLabels(transition, nodes);
+        };
+        // Function to handle click and expand
+        const handleClick = (event, clickedNode) => {
+            event.stopPropagation();
+            // If already focused on a node, don't allow clicking on other segments
+            // Only allow reset through the center button
+            if (focusedNodeRef.current) {
+                return;
+            }
+            // Don't allow clicking on leaf nodes (nodes without children)
+            if (!clickedNode.children || clickedNode.children.length === 0) {
+                return;
+            }
+            focusedNodeRef.current = clickedNode;
+            const transition = d3__namespace.transition()
+                .duration(750)
+                .ease(d3__namespace.easeCubicInOut);
+            // Zoom to clicked node - scale to fill the entire circle
+            const clickedOriginal = clickedNode;
+            const xScale = d3__namespace.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
+            const yScale = d3__namespace.scaleLinear()
+                .domain([clickedOriginal.y0Original, clickedOriginal.y1Original])
+                .range([0, radius * radius]);
+            // First, immediately hide elements that shouldn't be visible
+            paths.style('opacity', (d) => isParentOf(clickedNode, d) ? 1 : 0);
+            paths.transition(transition)
+                .attrTween('d', (d) => {
+                const node = d;
+                // Only transform nodes that are descendants of the clicked node
+                if (!isParentOf(clickedNode, d)) {
+                    // Keep them hidden
+                    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
+                let newY0, newY1;
+                if (node === clickedNode) {
+                    // The clicked node itself should fill from center to edge
+                    newY0 = 0;
+                    newY1 = radius * radius;
+                }
+                else {
+                    // Child nodes should be scaled within the full radius
+                    newY0 = yScale(node.y0Original);
+                    newY1 = yScale(node.y1Original);
+                }
+                // Use current positions as start (they should be at original if not previously zoomed)
+                const startX0 = node.x0;
+                const startX1 = node.x1;
+                const startY0 = node.y0;
+                const startY1 = node.y1;
+                return (t) => {
+                    // Calculate interpolated positions
+                    const currX0 = d3__namespace.interpolate(startX0, newX0)(t);
+                    const currX1 = d3__namespace.interpolate(startX1, newX1)(t);
+                    const currY0 = d3__namespace.interpolate(startY0, newY0)(t);
+                    const currY1 = d3__namespace.interpolate(startY1, newY1)(t);
+                    // Update node positions continuously
+                    node.x0 = currX0;
+                    node.x1 = currX1;
+                    node.y0 = currY0;
+                    node.y1 = currY1;
+                    const interpolatedArc = d3__namespace.arc()
+                        .startAngle(() => currX0)
+                        .endAngle(() => currX1)
+                        .innerRadius(() => Math.sqrt(currY0))
+                        .outerRadius(() => Math.sqrt(currY1))
+                        .cornerRadius(3);
+                    return interpolatedArc(node) || '';
+                };
+            });
+            // Update labels for zoomed view
+            updateLabels(transition, nodes.filter(d => isParentOf(clickedNode, d)));
+            // Update cursor style to indicate segments are not clickable
+            paths.style('cursor', 'default');
+            // Update center button to be clickable
+            centerResetButton.style('cursor', 'pointer');
+        };
+        // Helper function to check if a node is parent of another
+        const isParentOf = (parent, descendant) => {
+            if (parent === descendant)
+                return true;
+            let current = descendant.parent;
+            while (current) {
+                if (current === parent)
+                    return true;
+                current = current.parent;
+            }
+            return false;
+        };
+        const paths = g.selectAll('path')
             .data(nodes.filter(d => d.depth > 0 && d.value && d.value > 0))
             .enter().append('path')
             .attr('d', arc)
@@ -2804,23 +3047,21 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             }
             return getColor(ancestor.data.name, d.depth);
         })
-            .attr('stroke', 'var(--bg-primary)')
-            .attr('stroke-width', 2)
-            .style('cursor', 'pointer')
-            .style('filter', 'drop-shadow(0 1px 3px rgba(0,0,0,0.12))')
+            .attr('stroke', () => {
+            // Get computed background color
+            const computedStyle = window.getComputedStyle(svgRef.current);
+            return computedStyle.getPropertyValue('--bg-primary') || '#ffffff';
+        })
+            .attr('stroke-width', 1)
+            .style('cursor', d => (!d.children || d.children.length === 0) ? 'default' : 'pointer')
+            .on('click', handleClick)
             .on('mouseover', function (event, d) {
-            const hoverArc = d3__namespace.arc()
-                .startAngle(d => d.x0)
-                .endAngle(d => d.x1)
-                .innerRadius(d => Math.sqrt(d.y0) - 2)
-                .outerRadius(d => Math.sqrt(d.y1) + 4)
-                .cornerRadius(3);
-            d3__namespace.select(this)
-                .transition()
-                .duration(150)
-                .attr('d', d => hoverArc(d))
-                .style('filter', 'drop-shadow(0 2px 8px rgba(0,0,0,0.2))')
-                .style('opacity', 0.9);
+            // Don't show hover effect if already focused
+            if (focusedNodeRef.current) {
+                return;
+            }
+            const hoveredElement = this;
+            // Show tooltip for all nodes
             tooltip.transition()
                 .duration(200)
                 .style('opacity', 1);
@@ -2833,43 +3074,193 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                 `)
                 .style('left', (event.pageX + 10) + 'px')
                 .style('top', (event.pageY - 28) + 'px');
+            // Apply blur to all other segments
+            paths.each(function () {
+                if (this !== hoveredElement) {
+                    d3__namespace.select(this)
+                        .transition()
+                        .duration(200)
+                        .style('opacity', 0.3)
+                        .style('filter', 'blur(1px)');
+                }
+                else {
+                    d3__namespace.select(this)
+                        .transition()
+                        .duration(200)
+                        .style('opacity', 1)
+                        .style('filter', 'none');
+                }
+            });
         })
-            .on('mouseout', function (event, d) {
-            d3__namespace.select(this)
-                .transition()
-                .duration(150)
-                .attr('d', d => arc(d))
-                .style('filter', 'drop-shadow(0 1px 3px rgba(0,0,0,0.12))')
-                .style('opacity', 1);
+            .on('mouseout', function () {
+            // Hide tooltip
             tooltip.transition()
                 .duration(500)
                 .style('opacity', 0);
+            // Reset all segments
+            paths
+                .transition()
+                .duration(200)
+                .style('opacity', 1)
+                .style('filter', 'none');
+        })
+            .on('mousemove', function (event) {
+            // Update tooltip position on mouse move
+            tooltip
+                .style('left', (event.pageX + 10) + 'px')
+                .style('top', (event.pageY - 28) + 'px');
         });
         const shouldDisplayLabel = (d) => {
             const angle = d.x1 - d.x0;
             return angle > 0.15 && d.depth <= 2;
         };
-        // Calculate average background color for center text contrast
-        const allSegments = nodes.filter(d => d.depth === 1);
-        const avgColor = allSegments.length > 0 ? d3__namespace.interpolateRgb.gamma(2.2)(...allSegments.map(d => getColor(d.data.name, 1)))(0.5) : '#ffffff';
-        const centerTextColor = getTextColor$1(avgColor);
+        // Function to update labels after transitions
+        const updateLabels = (transition, visibleNodes, _isReset) => {
+            // Remove old labels
+            g.selectAll('text.segment-label').remove();
+            g.selectAll('text.center-label').remove();
+            // Wait for transition to complete before adding new labels
+            transition.on('end', () => {
+                // Filter out the focused node itself when zoomed (it's shown in center)
+                const nodesToLabel = visibleNodes.filter(d => {
+                    if (focusedNodeRef.current && d === focusedNodeRef.current) {
+                        return false; // Don't show label for the zoomed parent node
+                    }
+                    return d.depth > 0 && d.value && d.value > 0 && shouldDisplayLabel(d);
+                });
+                g.selectAll('text.segment-label')
+                    .data(nodesToLabel)
+                    .enter().append('text')
+                    .attr('class', 'segment-label')
+                    .attr('transform', d => {
+                    const angle = (d.x0 + d.x1) / 2;
+                    const radiusVal = (Math.sqrt(d.y0) + Math.sqrt(d.y1)) / 2;
+                    const x = Math.cos(angle - Math.PI / 2) * radiusVal;
+                    const y = Math.sin(angle - Math.PI / 2) * radiusVal;
+                    return `translate(${x},${y})`;
+                })
+                    .attr('text-anchor', 'middle')
+                    .attr('alignment-baseline', 'middle')
+                    .attr('font-size', d => d.depth === 1 ? '13px' : '11px')
+                    .attr('fill', d => {
+                    let ancestor = d;
+                    while (ancestor.depth > 1 && ancestor.parent) {
+                        ancestor = ancestor.parent;
+                    }
+                    const segmentColor = getColor(ancestor.data.name, d.depth);
+                    return getTextColor$1(segmentColor);
+                })
+                    .attr('font-weight', '600')
+                    .style('pointer-events', 'none')
+                    .style('text-shadow', d => {
+                    let ancestor = d;
+                    while (ancestor.depth > 1 && ancestor.parent) {
+                        ancestor = ancestor.parent;
+                    }
+                    const segmentColor = getColor(ancestor.data.name, d.depth);
+                    const textColor = getTextColor$1(segmentColor);
+                    // Add subtle shadow for better readability
+                    const shadowColor = textColor === '#ffffff' ? 'rgba(0,0,0,0.3)' : 'rgba(255,255,255,0.3)';
+                    return `0 1px 1px ${shadowColor}`;
+                })
+                    .text(d => {
+                    const maxLength = d.depth === 1 ? 12 : 8;
+                    return d.data.name.substring(0, maxLength);
+                })
+                    .style('opacity', 0)
+                    .transition()
+                    .duration(200)
+                    .style('opacity', 1);
+                // Update center text
+                const currentNode = focusedNodeRef.current || root;
+                const computedStyle = window.getComputedStyle(svgRef.current);
+                const centerTextColor = computedStyle.getPropertyValue('--text-primary') ||
+                    (computedStyle.getPropertyValue('--bg-primary') === '#000000' ||
+                        computedStyle.getPropertyValue('color-scheme') === 'dark' ? '#ffffff' : '#000000');
+                g.append('text')
+                    .attr('class', 'center-label')
+                    .attr('text-anchor', 'middle')
+                    .attr('alignment-baseline', 'middle')
+                    .attr('font-size', '18px')
+                    .attr('font-weight', 'bold')
+                    .attr('fill', centerTextColor)
+                    .style('pointer-events', 'none')
+                    .text(currentNode === root ? (centerLabel || data.name || 'Total') : currentNode.data.name)
+                    .style('opacity', 0)
+                    .transition()
+                    .duration(200)
+                    .style('opacity', 1);
+                g.append('text')
+                    .attr('class', 'center-label')
+                    .attr('text-anchor', 'middle')
+                    .attr('alignment-baseline', 'middle')
+                    .attr('y', 20)
+                    .attr('font-size', '14px')
+                    .attr('font-weight', '500')
+                    .attr('fill', centerTextColor)
+                    .style('pointer-events', 'none')
+                    .text(`${(currentNode.value || 0).toLocaleString()} ${unit}`)
+                    .style('opacity', 0)
+                    .transition()
+                    .duration(200)
+                    .style('opacity', 1);
+            });
+        };
+        // Add invisible center reset button (circle in the middle)
+        const centerRadius = Math.sqrt(nodes[0].y0) || radius * 0.3;
+        const centerResetButton = g.append('circle')
+            .attr('class', 'center-reset-button')
+            .attr('r', centerRadius)
+            .attr('fill', 'transparent')
+            .style('cursor', 'default')
+            .on('click', () => {
+            if (focusedNodeRef.current) {
+                resetView();
+            }
+        })
+            .on('mouseover', function () {
+            if (focusedNodeRef.current) {
+                d3__namespace.select(this)
+                    .transition()
+                    .duration(150)
+                    .attr('fill', 'rgba(100, 100, 100, 0.1)')
+                    .attr('stroke', 'rgba(100, 100, 100, 0.3)')
+                    .attr('stroke-width', 2);
+            }
+        })
+            .on('mouseout', function () {
+            if (focusedNodeRef.current) {
+                d3__namespace.select(this)
+                    .transition()
+                    .duration(150)
+                    .attr('fill', 'transparent')
+                    .attr('stroke', 'none');
+            }
+        });
+        // Calculate center text color - get computed theme color
+        const computedStyle = window.getComputedStyle(svgRef.current);
+        const centerTextColor = computedStyle.getPropertyValue('--text-primary') ||
+            (computedStyle.getPropertyValue('--bg-primary') === '#000000' ||
+                computedStyle.getPropertyValue('color-scheme') === 'dark' ? '#ffffff' : '#000000');
         // Add center text
         g.append('text')
+            .attr('class', 'center-label')
             .attr('text-anchor', 'middle')
             .attr('alignment-baseline', 'middle')
             .attr('font-size', '18px')
             .attr('font-weight', 'bold')
             .attr('fill', centerTextColor)
-            .style('text-shadow', centerTextColor === '#ffffff' ? '0 1px 3px rgba(0,0,0,0.5)' : '0 1px 3px rgba(255,255,255,0.5)')
+            .style('pointer-events', 'none')
             .text(centerLabel || data.name || 'Total');
         g.append('text')
+            .attr('class', 'center-label')
             .attr('text-anchor', 'middle')
             .attr('alignment-baseline', 'middle')
             .attr('y', 20)
             .attr('font-size', '14px')
             .attr('font-weight', '500')
             .attr('fill', centerTextColor)
-            .style('text-shadow', centerTextColor === '#ffffff' ? '0 1px 2px rgba(0,0,0,0.4)' : '0 1px 2px rgba(255,255,255,0.4)')
+            .style('pointer-events', 'none')
             .text(`${(root.value || 0).toLocaleString()} ${unit}`);
         g.selectAll('text.segment-label')
             .data(nodes.filter(d => d.depth > 0 && d.value && d.value > 0 && shouldDisplayLabel(d)))
@@ -2877,9 +3268,9 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             .attr('class', 'segment-label')
             .attr('transform', d => {
             const angle = (d.x0 + d.x1) / 2;
-            const radius = (Math.sqrt(d.y0) + Math.sqrt(d.y1)) / 2;
-            const x = Math.cos(angle - Math.PI / 2) * radius;
-            const y = Math.sin(angle - Math.PI / 2) * radius;
+            const radiusVal = (Math.sqrt(d.y0) + Math.sqrt(d.y1)) / 2;
+            const x = Math.cos(angle - Math.PI / 2) * radiusVal;
+            const y = Math.sin(angle - Math.PI / 2) * radiusVal;
             return `translate(${x},${y})`;
         })
             .attr('text-anchor', 'middle')
@@ -2902,9 +3293,9 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             }
             const segmentColor = getColor(ancestor.data.name, d.depth);
             const textColor = getTextColor$1(segmentColor);
-            // Use contrasting shadow color
-            const shadowColor = textColor === '#ffffff' ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.5)';
-            return `0 1px 2px ${shadowColor}`;
+            // Add subtle shadow for better readability
+            const shadowColor = textColor === '#ffffff' ? 'rgba(0,0,0,0.3)' : 'rgba(255,255,255,0.3)';
+            return `0 1px 1px ${shadowColor}`;
         })
             .text(d => {
             const maxLength = d.depth === 1 ? 12 : 8;
@@ -2913,7 +3304,7 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
         return () => {
             tooltip.remove();
         };
-    }, [data, width, height, colorMap, radius]);
+    }, [data, width, height, colorMap, radius, tagColors, unit, centerLabel]);
     return (jsxRuntime.jsxs("div", { className: styles$2.container, children: [jsxRuntime.jsx("h3", { className: styles$2.title, children: title }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$2.chart })] }));
 };