@stfrigerio/sito-template 0.1.44 → 0.1.49

package/dist/index.js

@@ -4307,40 +4307,20 @@ const BooleansHeatmap = ({ data, habitName, width = 800, height = 200, habitColo
 var styles$4 = {"container":"SunburstChart-module_container__w1ZYc","title":"SunburstChart-module_title__T6Ak7","chart":"SunburstChart-module_chart__BFM6E","tooltip":"SunburstChart-module_tooltip__TuTAN"};
 
 const COLOR_PALETTE = [
-    '#6366f1', '#8b5cf6', '#06b6d4', '#10b981',
-    '#f59e0b', '#ef4444', '#ec4899', '#84cc16',
-    '#f97316', '#3b82f6', '#14b8a6', '#f59e0b'
+    '#6366f1',
+    '#8b5cf6',
+    '#06b6d4',
+    '#10b981',
+    '#f59e0b',
+    '#ef4444',
+    '#ec4899',
+    '#84cc16',
+    '#f97316',
+    '#3b82f6',
+    '#14b8a6',
+    '#f59e0b',
 ];
-// Calculate text color based on background luminance for optimal contrast
-const getTextColor$1 = (backgroundColor) => {
-    const color = d3__namespace.color(backgroundColor);
-    if (!color)
-        return 'var(--text-primary)';
-    const rgb = color.rgb();
-    // Calculate relative luminance using WCAG formula
-    // 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';
-};
-// Helper to create an interpolated arc generator for transitions
-const createInterpolatedArc = (currX0, currX1, currY0, currY1, radius) => {
-    return d3__namespace.arc()
-        .startAngle(() => currX0)
-        .endAngle(() => currX1)
-        .innerRadius(() => Math.min(radius, Math.sqrt(Math.max(0, currY0))))
-        .outerRadius(() => Math.min(radius, Math.sqrt(Math.max(0, currY1))))
-        .cornerRadius(3);
-};
-const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Chart', tagColors = {}, unit = 'items', centerLabel }) => {
+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);
@@ -4352,7 +4332,9 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             const color = d3__namespace.color(tagColors[name]);
             if (color) {
                 // Darken for deeper levels
-                return depth > 1 ? color.darker((depth - 1) * 0.3).toString() : color.toString();
+                return depth > 1
+                    ? color.darker((depth - 1) * 0.3).toString()
+                    : color.toString();
             }
         }
         // Fallback to color palette
@@ -4372,15 +4354,13 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             return;
         const svg = d3__namespace.select(svgRef.current);
         svg.selectAll('*').remove();
-        const g = svg.append('g')
-            .attr('transform', `translate(${width / 2},${height / 2})`);
-        const root = d3__namespace.hierarchy(data)
-            .sum(d => d.size ?? 0)
+        const g = svg.append('g').attr('transform', `translate(${width / 2},${height / 2})`);
+        const root = d3__namespace
+            .hierarchy(data)
+            .sum((d) => d.size ?? 0)
             .sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
-        const partition = d3__namespace.partition()
-            .size([2 * Math.PI, radius * radius]);
+        const partition = d3__namespace.partition().size([2 * Math.PI, radius * radius]);
         const nodes = partition(root).descendants();
-        // Store original positions for reset
         nodes.forEach((d) => {
             const node = d;
             node.x0Original = d.x0;
@@ -4388,25 +4368,27 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             node.y0Original = d.y0;
             node.y1Original = d.y1;
         });
-        const arc = d3__namespace.arc()
-            .startAngle(d => d.x0)
-            .endAngle(d => d.x1)
-            .innerRadius(d => Math.sqrt(d.y0))
-            .outerRadius(d => Math.sqrt(d.y1))
+        const arc = d3__namespace
+            .arc()
+            .startAngle((d) => d.x0)
+            .endAngle((d) => d.x1)
+            .innerRadius((d) => Math.sqrt(d.y0))
+            .outerRadius((d) => Math.sqrt(d.y1))
             .cornerRadius(3);
-        const tooltip = d3__namespace.select('body').append('div')
+        const tooltip = d3__namespace
+            .select('body')
+            .append('div')
             .attr('class', styles$4.tooltip)
             .style('opacity', 0)
             .style('position', 'absolute');
         // Function to reset to original view
         const resetView = () => {
             focusedNodeRef.current = null;
-            const transition = d3__namespace.transition()
-                .duration(750)
-                .ease(d3__namespace.easeCubicInOut);
+            const transition = d3__namespace.transition().duration(750).ease(d3__namespace.easeCubicInOut);
             // First show all elements
             paths.style('opacity', 1);
-            paths.transition(transition)
+            paths
+                .transition(transition)
                 .attrTween('d', (d) => {
                 const node = d;
                 return (t) => {
@@ -4420,12 +4402,18 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                     node.x1 = currX1;
                     node.y0 = currY0;
                     node.y1 = currY1;
-                    const interpolatedArc = createInterpolatedArc(currX0, currX1, currY0, currY1, radius);
+                    const interpolatedArc = d3__namespace
+                        .arc()
+                        .startAngle(() => currX0)
+                        .endAngle(() => currX1)
+                        .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) || '';
                 };
             });
             // Restore cursor style based on whether nodes have children
-            paths.style('cursor', d => (!d.children || d.children.length === 0) ? 'default' : 'pointer');
+            paths.style('cursor', (d) => !d.children || d.children.length === 0 ? 'default' : 'pointer');
             // Reset center button cursor
             centerResetButton.style('cursor', 'default');
             // Update labels
@@ -4444,29 +4432,30 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                 return;
             }
             focusedNodeRef.current = clickedNode;
-            const transition = d3__namespace.transition()
-                .duration(750)
-                .ease(d3__namespace.easeCubicInOut);
+            const transition = d3__namespace.transition().duration(750).ease(d3__namespace.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__namespace.scaleLinear()
+            const xScale = d3__namespace
+                .scaleLinear()
                 .domain([clickedOriginal.x0Original, clickedOriginal.x1Original])
                 .range([0, 2 * Math.PI])
                 .clamp(true); // Ensure values stay within bounds
             // For the radial scale, always use the full radius available
             // Find the deepest descendant to ensure all children fit
-            const descendants = nodes.filter(d => isParentOf(clickedNode, d));
-            const maxChildRadius = Math.max(...descendants.map(d => d.y1Original));
+            const descendants = nodes.filter((d) => isParentOf(clickedNode, d));
+            const maxChildRadius = Math.max(...descendants.map((d) => d.y1Original));
             // Always scale to use the full radius, regardless of original size
-            const yScale = d3__namespace.scaleLinear()
+            const yScale = d3__namespace
+                .scaleLinear()
                 .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)
+            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
@@ -4476,14 +4465,15 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                 }
                 // Calculate new positions based on the original positions
                 // ALWAYS scale to fill the full circle, no minimum size preservation
-                const newX0 = xScale(node.x0Original);
+                let newX0 = xScale(node.x0Original);
                 let newX1 = xScale(node.x1Original);
                 // Ensure proper scaling even for very small segments
                 // The clicked node's extent should always map to full circle
                 if (newX1 <= newX0) {
                     // Force proper angular extent based on proportion
-                    const proportion = (node.x1Original - node.x0Original) / (clickedOriginal.x1Original - clickedOriginal.x0Original);
-                    newX1 = newX0 + (2 * Math.PI * proportion);
+                    const proportion = (node.x1Original - node.x0Original) /
+                        (clickedOriginal.x1Original - clickedOriginal.x0Original);
+                    newX1 = newX0 + 2 * Math.PI * proportion;
                 }
                 // For radial positions, scale appropriately
                 let newY0, newY1;
@@ -4492,7 +4482,7 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                     newY0 = 0;
                     // If it has children, leave room for them; otherwise fill to edge
                     if (node.children && node.children.length > 0) {
-                        const childrenY0 = Math.min(...node.children.map(c => c.y0Original));
+                        const childrenY0 = Math.min(...node.children.map((c) => c.y0Original));
                         newY1 = yScale(childrenY0) * 0.98; // Very slight gap for visual separation
                     }
                     else {
@@ -4521,12 +4511,18 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                     node.x1 = currX1;
                     node.y0 = currY0;
                     node.y1 = currY1;
-                    const interpolatedArc = createInterpolatedArc(currX0, currX1, currY0, currY1, radius);
+                    const interpolatedArc = d3__namespace
+                        .arc()
+                        .startAngle(() => currX0)
+                        .endAngle(() => currX1)
+                        .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) || '';
                 };
             });
             // Update labels for zoomed view
-            updateLabels(transition, nodes.filter(d => isParentOf(clickedNode, d)));
+            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
@@ -4544,11 +4540,13 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             }
             return false;
         };
-        const paths = g.selectAll('path')
-            .data(nodes.filter(d => d.depth > 0 && d.value && d.value > 0))
-            .enter().append('path')
-            .attr('d', d => arc(d) || '')
-            .attr('fill', d => {
+        const paths = g
+            .selectAll('path')
+            .data(nodes.filter((d) => d.depth > 0 && d.value && d.value > 0))
+            .enter()
+            .append('path')
+            .attr('d', arc)
+            .attr('fill', (d) => {
             let ancestor = d;
             while (ancestor.depth > 1 && ancestor.parent) {
                 ancestor = ancestor.parent;
@@ -4561,27 +4559,26 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             return computedStyle.getPropertyValue('--color-border') || '#e2e8f0';
         })
             .attr('stroke-width', 2)
-            .style('cursor', d => (!d.children || d.children.length === 0) ? 'default' : 'pointer')
+            .style('cursor', (d) => !d.children || d.children.length === 0 ? 'default' : 'pointer')
             .on('click', handleClick)
             .on('mouseover', function (event, d) {
             // Don't show hover effect if already focused
             if (focusedNodeRef.current) {
                 return;
             }
-            const hoveredElement = event.currentTarget;
+            const hoveredElement = this;
             // Show tooltip for all nodes
-            tooltip.transition()
-                .duration(200)
-                .style('opacity', 1);
+            tooltip.transition().duration(200).style('opacity', 1);
             const value = d.value || 0;
             const percentage = ((value / (root.value || 1)) * 100).toFixed(1);
-            tooltip.html(`
+            tooltip
+                .html(`
                     <div><strong>${d.data.name}</strong></div>
                     <div>Value: ${value}</div>
                     <div>${percentage}% of total</div>
                 `)
-                .style('left', (event.pageX + 10) + 'px')
-                .style('top', (event.pageY - 28) + 'px');
+                .style('left', event.pageX + 10 + 'px')
+                .style('top', event.pageY - 28 + 'px');
             // Apply blur to all other segments
             paths.each(function () {
                 if (this !== hoveredElement) {
@@ -4602,21 +4599,15 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
         })
             .on('mouseout', function () {
             // Hide tooltip
-            tooltip.transition()
-                .duration(500)
-                .style('opacity', 0);
+            tooltip.transition().duration(500).style('opacity', 0);
             // Reset all segments
-            paths
-                .transition()
-                .duration(200)
-                .style('opacity', 1)
-                .style('filter', 'none');
+            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');
+                .style('left', event.pageX + 10 + 'px')
+                .style('top', event.pageY - 28 + 'px');
         });
         const shouldDisplayLabel = (d) => {
             const angle = d.x1 - d.x0;
@@ -4632,7 +4623,7 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             // 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 => {
+                const nodesToLabel = visibleNodes.filter((d) => {
                     if (focusedNodeRef.current && d === focusedNodeRef.current) {
                         return false; // Don't show label for the zoomed parent node
                     }
@@ -4640,9 +4631,10 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                 });
                 g.selectAll('text.segment-label')
                     .data(nodesToLabel)
-                    .enter().append('text')
+                    .enter()
+                    .append('text')
                     .attr('class', 'segment-label')
-                    .attr('transform', d => {
+                    .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;
@@ -4651,29 +4643,12 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                 })
                     .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')
+                    .attr('font-size', (d) => (d.depth === 1 ? '14px' : '12px'))
+                    .attr('fill', 'var(--color-text)')
+                    .attr('font-weight', '700')
                     .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 => {
+                    .style('text-shadow', 'none')
+                    .text((d) => {
                     const maxLength = d.depth === 1 ? 12 : 8;
                     return d.data.name.substring(0, maxLength);
                 })
@@ -4686,7 +4661,9 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                 const computedStyle = window.getComputedStyle(svgRef.current);
                 const centerTextColor = computedStyle.getPropertyValue('--text-primary') ||
                     (computedStyle.getPropertyValue('--bg-primary') === '#000000' ||
-                        computedStyle.getPropertyValue('color-scheme') === 'dark' ? '#ffffff' : '#000000');
+                        computedStyle.getPropertyValue('color-scheme') === 'dark'
+                        ? '#ffffff'
+                        : '#000000');
                 g.append('text')
                     .attr('class', 'center-label')
                     .attr('text-anchor', 'middle')
@@ -4695,7 +4672,9 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                     .attr('font-weight', 'bold')
                     .attr('fill', centerTextColor)
                     .style('pointer-events', 'none')
-                    .text(currentNode === root ? (centerLabel || data.name || 'Total') : currentNode.data.name)
+                    .text(currentNode === root
+                    ? centerLabel || data.name || 'Total'
+                    : currentNode.data.name)
                     .style('opacity', 0)
                     .transition()
                     .duration(200)
@@ -4718,7 +4697,8 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
         };
         // Add invisible center reset button (circle in the middle)
         const centerRadius = Math.sqrt(nodes[0].y0) || radius * 0.3;
-        const centerResetButton = g.append('circle')
+        const centerResetButton = g
+            .append('circle')
             .attr('class', 'center-reset-button')
             .attr('r', centerRadius)
             .attr('fill', 'transparent')
@@ -4751,7 +4731,9 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
         const computedStyle = window.getComputedStyle(svgRef.current);
         const centerTextColor = computedStyle.getPropertyValue('--text-primary') ||
             (computedStyle.getPropertyValue('--bg-primary') === '#000000' ||
-                computedStyle.getPropertyValue('color-scheme') === 'dark' ? '#ffffff' : '#000000');
+                computedStyle.getPropertyValue('color-scheme') === 'dark'
+                ? '#ffffff'
+                : '#000000');
         // Add center text
         g.append('text')
             .attr('class', 'center-label')
@@ -4773,10 +4755,11 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             .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)))
-            .enter().append('text')
+            .data(nodes.filter((d) => d.depth > 0 && d.value && d.value > 0 && shouldDisplayLabel(d)))
+            .enter()
+            .append('text')
             .attr('class', 'segment-label')
-            .attr('transform', d => {
+            .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;
@@ -4785,37 +4768,20 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
         })
             .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')
+            .attr('font-size', (d) => (d.depth === 1 ? '14px' : '12px'))
+            .attr('fill', 'var(--color-text)')
+            .attr('font-weight', '700')
             .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 => {
+            .style('text-shadow', 'none')
+            .text((d) => {
             const maxLength = d.depth === 1 ? 12 : 8;
             return d.data.name.substring(0, maxLength);
         });
         return () => {
             tooltip.remove();
         };
-    }, [data, width, height, colorMap, radius, tagColors, unit, centerLabel, getColor]);
-    return (jsxRuntime.jsxs("div", { className: styles$4.container, children: [jsxRuntime.jsx("h3", { className: styles$4.title, children: title }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$4.chart })] }));
+    }, [data, width, height, colorMap, radius, tagColors, unit, centerLabel]);
+    return (jsxRuntime.jsxs("div", { className: styles$4.container, children: [jsxRuntime.jsx("h3", { className: styles$4.title, children: title }), jsxRuntime.jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, className: styles$4.chart })] }));
 };
 
 var styles$3 = {"container":"PieChart-module_container__tXjbe","title":"PieChart-module_title__61o0R","chartContainer":"PieChart-module_chartContainer__uLmOz","chart":"PieChart-module_chart__3nqON","legend":"PieChart-module_legend__rAWgh","legendItem":"PieChart-module_legendItem__Nb031","legendColor":"PieChart-module_legendColor__fLuv9","legendLabel":"PieChart-module_legendLabel__xbjBr","legendValue":"PieChart-module_legendValue__h2WS2","tooltip":"PieChart-module_tooltip__140RU"};