@sybilion/uilib 1.0.20

package/dist/esm/components/ui/Chart/Chart.js

@@ -0,0 +1,23 @@
+import * as RechartsPrimitive from 'recharts';
+export { BaseChartWrapper } from './components/BaseChartWrapper.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import 'react';
+import './Chart.context.js';
+import './Chart.styl.js';
+import '../AnalysisLineIcon/AnalysisLineIcon.styl.js';
+import '@radix-ui/react-slot';
+import '../Badge/Badge.styl.js';
+import '../LabelWithId/LabelWithId.styl.js';
+import '@radix-ui/react-select';
+import 'lucide-react';
+import '../Select/Select.styl.js';
+import '../TextShimmer/TextShimmer.js';
+import '@phosphor-icons/react';
+import '../AnalysesSelector/AnalysesSelector.styl.js';
+import './components/CustomChartLegend/CustomChartLegend.styl.js';
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+const ChartLegend = RechartsPrimitive.Legend;
+
+export { ChartLegend, ChartTooltip };

package/dist/esm/components/ui/Chart/Chart.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".Chart_chartContainer__--q1l{aspect-ratio:16/9;display:flex;font-size:.75rem;justify-content:center;line-height:1rem;max-width:100%;touch-action:none;width:100%}.Chart_chartContainer__--q1l .recharts-cartesian-axis-tick text{fill:var(--muted-foreground)}.Chart_chartContainer__--q1l .recharts-cartesian-grid line[stroke=\"#ccc\"]{stroke:var(--border)}.dark .Chart_chartContainer__--q1l .recharts-cartesian-grid line[stroke=\"#ccc\"]{stroke:var(--sb-slate-900)}.Chart_chartContainer__--q1l .recharts-curve.recharts-tooltip-cursor,.Chart_chartContainer__--q1l .recharts-polar-grid [stroke=\"#ccc\"]{stroke:var(--border)}.Chart_chartContainer__--q1l .recharts-radial-bar-background-sector,.Chart_chartContainer__--q1l .recharts-rectangle.recharts-tooltip-cursor{fill:var(--muted)}.Chart_chartContainer__--q1l .recharts-reference-line [stroke=\"#ccc\"]{stroke:var(--border)}.Chart_chartContainer__--q1l .recharts-dot[stroke=\"#fff\"]{stroke:transparent}.Chart_chartContainer__--q1l .recharts-layer,.Chart_chartContainer__--q1l .recharts-sector{outline:none}.Chart_chartContainer__--q1l .recharts-sector[stroke=\"#fff\"]{stroke:transparent}.Chart_chartContainer__--q1l .recharts-surface{outline:none}.Chart_chartContainer__--q1l .recharts-wrapper{position:relative}.Chart_chartContainer__--q1l .recharts-surface{position:relative;z-index:1}.Chart_chartContainer__--q1l .recharts-tooltip-wrapper{position:relative;z-index:3!important}.Chart_chartContainer__--q1l .recharts-active-dot{z-index:3}.Chart_chartGrid__t52WF{stroke-width:.6}.Chart_tooltipContainer__6tc0q{align-items:start;display:grid;min-width:8rem;width:minmax(300px,100%);grid-gap:.375rem;background-color:var(--background);border:1px solid var(--border)/.5;border-radius:.5rem;box-shadow:0 10px 10px -5px rgba(0,0,0,.3),0 0 2px 0 rgba(0,0,0,.5);font-size:.75rem;gap:.375rem;line-height:1rem;opacity:0;padding:.375rem .625rem;transition:opacity .5s ease-out}.Chart_chartContainer__--q1l:hover .Chart_tooltipContainer__6tc0q{opacity:1;transition-duration:.5s}.Chart_tooltipItem__j8I9T{align-items:stretch;display:flex;flex-wrap:wrap;gap:.5rem;width:100%}.Chart_tooltipItem__j8I9T>svg{color:var(--muted-foreground);height:.625rem;width:.625rem}.Chart_tooltipIndicator__Z-JWp{background-color:var(--color-bg);border-color:var(--color-border);border-radius:2px;border-width:1px;flex-shrink:0}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dot__MWcmW{height:.625rem;width:.625rem}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-line__MO3ul{width:.25rem}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dashed__2LqIN{background-color:transparent;border-style:dashed;border-width:1.5px;width:0}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dashed__2LqIN.Chart_nested__7EWWk{margin-bottom:.125rem;margin-top:.125rem}.Chart_tooltipContent__M3R-W{display:flex;flex:1 1 0%;justify-content:space-between;line-height:1}.Chart_tooltipLabel__zMpjZ{display:grid;grid-gap:.375rem;gap:.375rem}.Chart_tooltipValue__vTQxU{color:var(--foreground);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;font-weight:500;margin-left:var(--p-3)}.Chart_legendContainer__u1J3U{align-items:center;display:flex;gap:1rem;justify-content:center}.Chart_legendItem__0CSyC{align-items:center;display:flex;gap:.375rem}.Chart_legendItem__0CSyC>svg{color:var(--muted-foreground);height:.75rem;width:.75rem}.Chart_legendIndicator__erzzP{border-radius:2px;flex-shrink:0;height:.5rem;width:.5rem}.chart-line-blinking path{animation:chart-line-blink 1s ease-in-out infinite;animation-direction:alternate}@keyframes Chart_chart-line-blink__4EI-g{0%{opacity:.5}to{opacity:1}}";
+var S = {"chartContainer":"Chart_chartContainer__--q1l","chartGrid":"Chart_chartGrid__t52WF","tooltipContainer":"Chart_tooltipContainer__6tc0q","tooltipItem":"Chart_tooltipItem__j8I9T","tooltipIndicator":"Chart_tooltipIndicator__Z-JWp","indicator-dot":"Chart_indicator-dot__MWcmW","indicator-line":"Chart_indicator-line__MO3ul","indicator-dashed":"Chart_indicator-dashed__2LqIN","nested":"Chart_nested__7EWWk","tooltipContent":"Chart_tooltipContent__M3R-W","tooltipLabel":"Chart_tooltipLabel__zMpjZ","tooltipValue":"Chart_tooltipValue__vTQxU","legendContainer":"Chart_legendContainer__u1J3U","legendItem":"Chart_legendItem__0CSyC","legendIndicator":"Chart_legendIndicator__erzzP","chart-line-blink":"Chart_chart-line-blink__4EI-g"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Chart/Chart.types.js

@@ -0,0 +1,3 @@
+const THEMES = { light: '', dark: '.dark' };
+
+export { THEMES };

package/dist/esm/components/ui/Chart/components/BaseChartWrapper.js

@@ -0,0 +1,473 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
+import { ChartTooltip } from '../Chart.js';
+import { QuantileBands } from './QuantileBands.js';
+import { getForecastColor, ChartLines } from '../../ChartAreaInteractive/ChartLines.js';
+import { Skeleton } from '../../Skeleton/Skeleton.js';
+import { chartRenderQueue } from '../../../../utils/chartRenderQueue.js';
+import { LineChart, ComposedChart } from 'recharts';
+import { formatDate } from '../tools/formatters.js';
+import S from './BaseChartWrapper.styl.js';
+import { ChartAxes } from './ChartAxes.js';
+import { ChartGrid } from './ChartGrid.js';
+import { LegendSvg } from './LegendSvg/LegendSvg.js';
+import { ChartContainer } from './ChartContainer.js';
+import { CustomChartLegend } from './CustomChartLegend/CustomChartLegend.js';
+import { ChartTooltipContent } from './ChartTooltipContent.js';
+
+/**
+ * Simple loading component without hooks for better performance
+ * Rendered when chart is waiting in render queue
+ */
+const BaseChartWrapperLoading = forwardRef(({ className, height, loadingMessage }, ref) => {
+    return (jsx("div", { ref: ref, className: cn(S.root, className), children: jsx("div", { className: S.chartLoadingContainer, style: height ? { height: `${height}px` } : undefined, children: loadingMessage || (jsx("div", { className: S.loadingOverlay, children: jsx(Skeleton, { style: { width: '100%', height: '100%' } }) })) }) }));
+});
+BaseChartWrapperLoading.displayName = 'BaseChartWrapperLoading';
+/**
+ * Chart content component with all hooks and logic
+ * Separated to maintain hook order consistency
+ */
+const BaseChartWrapperContent = forwardRef((props, ref) => {
+    const { chartConfig = {}, chartData, historicalLineColor, forecastData = [], loading, hasCombinedData, renderId, isDarkTheme, height, className, loadingComponentClassName, footerClassName, chartClassName, xAxisClassName, yAxisClassName, legendClassName, footerActions, quantileBands, quantileBandKey, xMin, xMax, yMin, yMax, autoScaleYAxis = true, formatNumber, formatDate: formatDateFn = formatDate, labelFormatter, onLegendClick, margin, chartType = 'composed', disableAnimation = false, showGrid = true, showAxes = true, showTooltip = true, showLegend = true, showChartAxesLegend = true, xAxisLabel, yAxisLabel, showActiveDots = true, overlayElements, hiddenSeries, excludeLegendIds, onAnalysisSelect, onFailedAnalysisClick, containerProps, error, loadingMessage, noDataMessage = 'No data available', onGridHeightChange, forecastLineStyle = 'dashed', disableHistoricalAnimation = false, onShowAll: _onShowAll, onShowOnly: _onShowOnly, maxVisibleItems, preventDeselection, legendVariant = 'default', legendWidth = 1000, legendMarginLeft = 0, } = props;
+    const activeDataRef = useRef(null);
+    /** Raw cursor position from Recharts (tooltip anchor). */
+    const rawTooltipCoordinateRef = useRef(null);
+    /** Last transform actually applied after viewport/boundary adjustment. */
+    const lastAppliedTooltipPositionRef = useRef(null);
+    const isTooltipActiveRef = useRef(false);
+    // const [activeDotsData, setActiveDotsData] = useState<ActiveDot[]>([]);
+    const [shouldAnimate, setShouldAnimate] = useState(false);
+    const rootRef = useRef(null);
+    // Merge forwarded ref with internal rootRef using callback ref
+    const setRefs = (node) => {
+        rootRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    };
+    // const prevGridHeightRef = useRef<number>(0);
+    const tooltipWrapperRef = useRef(null);
+    const TOOLTIP_EDGE_MARGIN = 8;
+    const applyTooltipPosition = (opts) => {
+        const wrapper = tooltipWrapperRef.current;
+        const root = rootRef.current;
+        const raw = rawTooltipCoordinateRef.current;
+        if (!wrapper || !raw)
+            return;
+        const setTransform = (el, x, y) => {
+            el.style.transform = `translate(${x}px, ${y}px)`;
+            lastAppliedTooltipPositionRef.current = { x, y };
+        };
+        setTransform(wrapper, raw.x, raw.y);
+        if (opts?.skipBoundaryAdjust || !root)
+            return;
+        const runAdjust = () => {
+            const w = tooltipWrapperRef.current;
+            const rEl = rootRef.current;
+            const rCoord = rawTooltipCoordinateRef.current;
+            if (!w || !rEl || !rCoord)
+                return;
+            const rootRect = rEl.getBoundingClientRect();
+            const rightBound = Math.min(rootRect.right, window.innerWidth);
+            let x = rCoord.x;
+            const y = rCoord.y;
+            w.style.transform = `translate(${x}px, ${y}px)`;
+            let tooltipRect = w.getBoundingClientRect();
+            if (tooltipRect.right > rightBound - TOOLTIP_EDGE_MARGIN) {
+                x -= tooltipRect.right - rightBound + TOOLTIP_EDGE_MARGIN;
+            }
+            const leftBound = Math.max(rootRect.left, 0);
+            w.style.transform = `translate(${x}px, ${y}px)`;
+            tooltipRect = w.getBoundingClientRect();
+            if (tooltipRect.left < leftBound + TOOLTIP_EDGE_MARGIN) {
+                x += leftBound + TOOLTIP_EDGE_MARGIN - tooltipRect.left;
+            }
+            setTransform(w, x, y);
+        };
+        requestAnimationFrame(() => {
+            requestAnimationFrame(runAdjust);
+        });
+    };
+    const applyTooltipPositionRef = useRef(applyTooltipPosition);
+    applyTooltipPositionRef.current = applyTooltipPosition;
+    // Effect to watch for tooltip wrapper and apply transforms/opacity
+    useEffect(() => {
+        const restorePosition = () => {
+            const pos = lastAppliedTooltipPositionRef.current ??
+                rawTooltipCoordinateRef.current;
+            if (tooltipWrapperRef.current && pos) {
+                const currentTransform = tooltipWrapperRef.current.style.transform;
+                const expectedTransform = `translate(${pos.x}px, ${pos.y}px)`;
+                // Always restore position if transform is missing, reset, or doesn't match expected position
+                // This prevents Recharts from resetting the tooltip position
+                if (!currentTransform ||
+                    currentTransform === 'none' ||
+                    currentTransform === 'translate(0px, 0px)' ||
+                    currentTransform !== expectedTransform) {
+                    tooltipWrapperRef.current.style.transform = expectedTransform;
+                }
+            }
+        };
+        const findAndSetupTooltipWrapper = () => {
+            const wrapper = rootRef.current?.querySelector('.recharts-tooltip-wrapper');
+            if (wrapper && wrapper !== tooltipWrapperRef.current) {
+                tooltipWrapperRef.current = wrapper;
+                // Add transition for smooth movement and opacity
+                wrapper.style.transition =
+                    'transform 0.2s ease-out, opacity 0.2s ease-out';
+                // Override Recharts' visibility: hidden with visibility: visible
+                // We'll control visibility through opacity instead
+                wrapper.style.visibility = 'visible';
+                // Set initial opacity based on active state
+                const isActive = activeDataRef.current?.active === true;
+                wrapper.style.opacity = isActive ? '1' : '0';
+                wrapper.style.pointerEvents = isActive ? 'auto' : 'none';
+                // Always restore position if we have a last position
+                restorePosition();
+                if (rawTooltipCoordinateRef.current) {
+                    applyTooltipPositionRef.current();
+                }
+            }
+            // Always ensure visibility is visible (Recharts sets it to hidden)
+            if (tooltipWrapperRef.current) {
+                tooltipWrapperRef.current.style.visibility = 'visible';
+                // Continuously restore position to prevent resets
+                restorePosition();
+            }
+        };
+        // Initial check
+        findAndSetupTooltipWrapper();
+        // Watch for tooltip wrapper changes and style mutations
+        const observer = new MutationObserver(mutations => {
+            findAndSetupTooltipWrapper();
+            // If transform attribute changed, restore position if needed
+            mutations.forEach(mutation => {
+                if (mutation.type === 'attributes' &&
+                    mutation.attributeName === 'style' &&
+                    mutation.target === tooltipWrapperRef.current) {
+                    restorePosition();
+                }
+            });
+        });
+        if (rootRef.current) {
+            observer.observe(rootRef.current, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['style'],
+            });
+        }
+        // Use requestAnimationFrame to continuously monitor and restore position
+        // Only run when we have a last position to maintain
+        let rafId = null;
+        const monitorPosition = () => {
+            if (rawTooltipCoordinateRef.current && tooltipWrapperRef.current) {
+                restorePosition();
+                rafId = requestAnimationFrame(monitorPosition);
+            }
+            else {
+                rafId = null;
+            }
+        };
+        // Start monitoring if we already have a position
+        if (rawTooltipCoordinateRef.current) {
+            rafId = requestAnimationFrame(monitorPosition);
+        }
+        return () => {
+            observer.disconnect();
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+            }
+        };
+    }, []);
+    const renderTooltipContent = (props) => {
+        // Filter payload to exclude items with null/undefined values
+        // This prevents showing stale data when hovering on dates without data points
+        const filteredPayload = props.payload?.filter((item) => item.value !== null && item.value !== undefined && item.type !== 'none');
+        // If no valid payload items, render ChartTooltipContent with active=false and empty payload
+        // This allows ChartTooltipContent to clear its lastTooltipData state
+        if (!filteredPayload || filteredPayload.length === 0) {
+            // Update refs to reflect inactive state
+            if (isTooltipActiveRef.current) {
+                isTooltipActiveRef.current = false;
+                // Always maintain last position when tooltip becomes inactive
+                const pos = lastAppliedTooltipPositionRef.current ??
+                    rawTooltipCoordinateRef.current;
+                if (pos && tooltipWrapperRef.current) {
+                    const wrapper = tooltipWrapperRef.current;
+                    wrapper.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
+                    wrapper.style.visibility = 'visible';
+                    wrapper.style.opacity = '0';
+                    wrapper.style.pointerEvents = 'none';
+                }
+            }
+            // Render ChartTooltipContent with active=false and empty payload to trigger cleanup
+            // This ensures lastTooltipData is cleared when there's no valid data
+            return (jsx(ChartTooltipContent, { active: false, payload: [], label: props.label, labelFormatter: labelFormatter || defaultLabelFormatter, indicator: "dot" }));
+        }
+        // Store tooltip data in ref (not state) to avoid re-render
+        // Use filtered payload instead of original props.payload
+        activeDataRef.current = {
+            ...props,
+            payload: filteredPayload,
+        };
+        const wasActive = isTooltipActiveRef.current;
+        const isActive = props.active === true;
+        // When tooltip becomes active and has coordinate, update last position
+        if (isActive && props.coordinate) {
+            const newCoordinate = {
+                x: props.coordinate.x,
+                y: props.coordinate.y,
+            };
+            rawTooltipCoordinateRef.current = newCoordinate;
+            isTooltipActiveRef.current = true;
+            if (tooltipWrapperRef.current) {
+                tooltipWrapperRef.current.style.visibility = 'visible';
+                tooltipWrapperRef.current.style.opacity = '1';
+                tooltipWrapperRef.current.style.pointerEvents = 'auto';
+                applyTooltipPosition();
+            }
+        }
+        else if (!isActive && wasActive) {
+            isTooltipActiveRef.current = false;
+            // Always maintain last position when tooltip becomes inactive
+            const pos = lastAppliedTooltipPositionRef.current ??
+                rawTooltipCoordinateRef.current;
+            if (pos && tooltipWrapperRef.current) {
+                const wrapper = tooltipWrapperRef.current;
+                wrapper.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
+                // Keep visibility visible but hide with opacity transition
+                wrapper.style.visibility = 'visible';
+                wrapper.style.opacity = '0';
+                wrapper.style.pointerEvents = 'none';
+            }
+        }
+        else if (!isActive && !wasActive) {
+            // Ensure opacity is 0 when inactive, but keep visibility visible and maintain position
+            if (tooltipWrapperRef.current) {
+                tooltipWrapperRef.current.style.visibility = 'visible';
+                tooltipWrapperRef.current.style.opacity = '0';
+                tooltipWrapperRef.current.style.pointerEvents = 'none';
+                const pos = lastAppliedTooltipPositionRef.current ??
+                    rawTooltipCoordinateRef.current;
+                if (pos) {
+                    tooltipWrapperRef.current.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
+                }
+            }
+        }
+        return (jsx(ChartTooltipContent, { active: props.active, payload: filteredPayload, label: props.label, labelFormatter: labelFormatter || defaultLabelFormatter, indicator: "dot" }));
+    };
+    // Extract only line data (historical and forecast_* properties) for animation trigger
+    // This prevents re-animation when only quantile band data changes
+    // Use a stable reference based on actual line data values, not chartData reference
+    const lineDataKey = useMemo(() => {
+        const lineData = chartData.map(point => {
+            const linePoint = { date: point.date };
+            if (point.historical !== undefined) {
+                linePoint.historical = point.historical;
+            }
+            // Include all forecast_* properties but exclude quantile band properties
+            Object.keys(point).forEach(key => {
+                if (key.startsWith('forecast_')) {
+                    linePoint[key] = point[key];
+                }
+            });
+            return linePoint;
+        });
+        // Create a stable key based on actual line data values
+        return JSON.stringify(lineData);
+    }, [chartData]);
+    const lineDataForAnimation = useMemo(() => {
+        const lineData = chartData.map(point => {
+            const linePoint = { date: point.date };
+            if (point.historical !== undefined) {
+                linePoint.historical = point.historical;
+            }
+            // Include all forecast_* properties but exclude quantile band properties
+            Object.keys(point).forEach(key => {
+                if (key.startsWith('forecast_')) {
+                    linePoint[key] = point[key];
+                }
+            });
+            return linePoint;
+        });
+        return lineData;
+    }, [lineDataKey]);
+    const legendPayload = useMemo(() => {
+        if (!showLegend)
+            return [];
+        return forecastData
+            .filter((item) => excludeLegendIds ? !excludeLegendIds.includes(item.id) : true)
+            .map((item, index) => ({
+            value: item.name?.toString() || item.id?.toString() || '',
+            // type: item.id?.toString() || '',
+            color: item.color?.toString() || getForecastColor(index),
+            dataKey: `forecast_${item.id}`,
+            icon: item.icon,
+            status: item.status,
+            // pending: item.pending,
+            // tooltip: item.tooltip,
+            dimmed: item.dimmed,
+            updated_at: item.updated_at,
+        }));
+    }, [forecastData, excludeLegendIds, showLegend]);
+    useEffect(() => {
+        if (disableAnimation)
+            return;
+        // Enable animation briefly when line data changes (not quantile band data)
+        setShouldAnimate(true);
+        const timer = setTimeout(() => setShouldAnimate(false), 1000);
+        return () => clearTimeout(timer);
+    }, [lineDataForAnimation, disableAnimation]);
+    const isLoaded = useMemo(() => !loading && chartData.length > 0, [loading, chartData.length]);
+    // const resizePinContainer = useThrottleCallback(() => {
+    //   const grid = rootRef.current?.querySelector('.recharts-cartesian-grid');
+    //   if (grid && rootRef.current) {
+    //     const rect = grid.getBoundingClientRect();
+    //     // Check if height changed for backward compatibility
+    //     if (rect.height !== prevGridHeightRef.current) {
+    //       onGridHeightChange?.(rect.height);
+    //       prevGridHeightRef.current = rect.height;
+    //     }
+    //   }
+    // }, 1000);
+    // useResizeObserver(rootRef, resizePinContainer);
+    if (error) {
+        return (jsx("div", { className: cn(S.root, className), children: jsx("div", { className: S.errorContainer, children: jsxs("div", { className: S.errorMessage, children: ["Error: ", error] }) }) }));
+    }
+    if (loadingMessage !== undefined) {
+        return (jsx("div", { className: cn(S.root, className), children: jsx("div", { className: S.chartLoadingContainer, children: loadingMessage }) }));
+    }
+    if (!chartData.length) {
+        // If hasCombinedData is true but chartData is empty, data is being processed - wait instead of showing "No data"
+        if (hasCombinedData) {
+            // Return empty div to wait for chartData to be populated
+            return jsx("div", { className: cn(S.root, className) });
+        }
+        // If renderId is undefined/null, we're still initializing - wait instead of showing "No data"
+        if (!renderId) {
+            // Return empty div to wait for initialization to complete
+            return jsx("div", { className: cn(S.root, className) });
+        }
+        return (jsx("div", { className: cn(S.root, className), children: jsx("div", { className: S.errorContainer, children: noDataMessage }) }));
+    }
+    // Smart auto-scaling: detect when explicit bounds are too wide
+    // Only apply smart auto-scaling if autoScaleYAxis is not explicitly set to false
+    // When autoScaleYAxis is explicitly false, respect it (e.g., for IntervalsOverlay quantile dragging)
+    let effectiveAutoScale = autoScaleYAxis;
+    if (autoScaleYAxis !== false && yMin !== undefined && yMax !== undefined) {
+        const dataKeys = chartData.length > 0 ? Object.keys(chartData[0]) : [];
+        const historicalValues = chartData
+            .map(p => p.historical)
+            .filter(v => v !== null && v !== undefined);
+        const forecastKeys = dataKeys.filter(k => k.startsWith('forecast_'));
+        const forecastValues = chartData
+            .flatMap(p => forecastKeys.map(k => p[k]))
+            .filter(v => v !== null && v !== undefined);
+        const allLineValues = [...historicalValues, ...forecastValues];
+        if (allLineValues.length > 0) {
+            // @ts-ignore
+            const dataMin = Math.min(...allLineValues);
+            // @ts-ignore
+            const dataMax = Math.max(...allLineValues);
+            const explicitRange = yMax - yMin;
+            const dataRange = dataMax - dataMin;
+            const wastedSpaceRatio = (explicitRange - dataRange) / dataRange;
+            // If more than 30% of the chart is empty space, switch to auto-scaling
+            if (wastedSpaceRatio > 0.3) {
+                effectiveAutoScale = true;
+            }
+        }
+    }
+    const ChartComponent = chartType === 'line' ? LineChart : ComposedChart;
+    const defaultLabelFormatter = (v) => formatDateFn(v, true);
+    return (jsxs("div", { className: cn(S.root, !showLegend && S.noLegend, !showChartAxesLegend && S.hideChartAxesLegend, isLoaded && S.loaded, className), ref: setRefs, children: [loading && (jsx("div", { className: S.loadingOverlay, children: jsx(Skeleton, {}) })), showGrid && (jsx(ChartContainer, { config: chartConfig, className: cn(S.gridLayer, chartClassName), style: height ? { height: `${height}px` } : undefined, children: jsxs(ChartComponent, { data: chartData, margin: margin, children: [jsx(ChartGrid, {}), showAxes && (jsx(ChartAxes, { formatDate: formatDateFn, formatNumber: formatNumber, xAxisClassName: xAxisClassName, yAxisClassName: yAxisClassName, xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xMin: xMin, xMax: xMax, yMin: yMin, yMax: yMax, autoScaleYAxis: effectiveAutoScale }))] }) })), jsx(ChartContainer, { config: chartConfig, className: cn(S.chartLayer, chartClassName), style: height ? { height: `${height}px` } : undefined, ...containerProps, children: jsxs(ChartComponent, { data: chartData, margin: margin, children: [showAxes && (jsx(ChartAxes, { formatDate: formatDateFn, formatNumber: formatNumber, xAxisClassName: cn(xAxisClassName), yAxisClassName: cn(yAxisClassName), xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xMin: xMin, xMax: xMax, yMin: yMin, yMax: yMax, autoScaleYAxis: effectiveAutoScale })), quantileBands?.[0] && (jsx(QuantileBands, { hiddenBands: hiddenSeries, quantileBandKey: quantileBandKey, animate: true, animationDuration: 150, animationBegin: 0, customBands: quantileBands, showLegend: showLegend })), jsx(ChartLines, { historicalLineColor: historicalLineColor, chartData: chartData, forecastData: forecastData, hiddenSeries: hiddenSeries, isDarkTheme: isDarkTheme, shouldAnimate: shouldAnimate, showLegend: showLegend, forecastLineStyle: forecastLineStyle }), showTooltip && (jsx("div", { children: jsx(ChartTooltip, { cursor: false, content: renderTooltipContent }) }))] }) }), overlayElements, jsxs("div", { className: cn(S.footer, footerClassName), children: [showLegend &&
+                        (legendVariant === 'svg' ? (jsx(LegendSvg, { payload: legendPayload.map(p => ({
+                                value: p.value,
+                                color: p.color,
+                                dataKey: p.dataKey,
+                            })), width: legendWidth, marginLeft: legendMarginLeft })) : (jsx(CustomChartLegend, { className: legendClassName, payload: legendPayload, onClick: onLegendClick, hiddenSeries: hiddenSeries, onAnalysisSelect: onAnalysisSelect, onFailedAnalysisClick: onFailedAnalysisClick, maxVisibleItems: maxVisibleItems, preventDeselection: preventDeselection }))), footerActions] })] }));
+});
+BaseChartWrapperContent.displayName = 'BaseChartWrapperContent';
+/**
+ * Base chart wrapper component with common structure
+ * Handles container, grid, axes, tooltip, and legend
+ */
+function BaseChartWrapper(props) {
+    const { renderId, chartData, loading, hasCombinedData, legendVariant } = props;
+    const [isReadyToRender, setIsReadyToRender] = useState(false);
+    const containerRef = useRef(null);
+    // Register callback in render queue on mount, only if chart is visible
+    useEffect(() => {
+        // Export mode (legendVariant=svg): render immediately, skip queue
+        if (legendVariant === 'svg') {
+            setIsReadyToRender(true);
+            return;
+        }
+        // Skip render queue if data is available from cache, chartData is ready, and not loading
+        if (hasCombinedData && chartData.length > 0 && !loading) {
+            setIsReadyToRender(true);
+            return;
+        }
+        let observer = null;
+        // Wait for DOM to be ready before checking visibility
+        const checkAndRegister = () => {
+            const container = containerRef.current;
+            if (!container) {
+                return;
+            }
+            // Check if element is already visible
+            const rect = container.getBoundingClientRect();
+            const isVisible = rect.width > 0 &&
+                rect.height > 0 &&
+                rect.top < window.innerHeight &&
+                rect.bottom > 0 &&
+                rect.left < window.innerWidth &&
+                rect.right > 0;
+            if (isVisible) {
+                chartRenderQueue.registerCallback(() => {
+                    setIsReadyToRender(true);
+                });
+                return;
+            }
+            // Otherwise, wait for element to become visible using IntersectionObserver
+            observer = new IntersectionObserver(entries => {
+                const entry = entries[0];
+                if (entry.isIntersecting) {
+                    // Element is visible, register callback
+                    chartRenderQueue.registerCallback(() => {
+                        setIsReadyToRender(true);
+                    });
+                    observer?.disconnect();
+                }
+            }, {
+                threshold: 0.01, // Trigger when at least 1% of the element is visible
+            });
+            observer.observe(container);
+        };
+        // Use requestAnimationFrame to ensure DOM is ready
+        const rafId = requestAnimationFrame(() => {
+            checkAndRegister();
+        });
+        return () => {
+            cancelAnimationFrame(rafId);
+            observer?.disconnect();
+        };
+    }, [renderId, chartData.length, loading, hasCombinedData, legendVariant]);
+    // Show loading skeleton when datasets list is loading (after all hooks are called)
+    if (loading) {
+        return (jsx(BaseChartWrapperLoading, { ref: containerRef, className: cn(props.className, props.loadingComponentClassName), height: props.height, loadingMessage: props.loadingMessage }));
+    }
+    // If not ready to render, show loading component (no hooks initialized)
+    if (!isReadyToRender) {
+        return (jsx(BaseChartWrapperLoading, { ref: containerRef, className: cn(props.className, props.loadingComponentClassName), height: props.height, loadingMessage: props.loadingMessage }));
+    }
+    // Render chart content with all hooks
+    return jsx(BaseChartWrapperContent, { ref: containerRef, ...props });
+}
+
+export { BaseChartWrapper };

package/dist/esm/components/ui/Chart/components/BaseChartWrapper.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".BaseChartWrapper_chartContainer__J6CIc,.BaseChartWrapper_root__hhfho{min-height:100%}.BaseChartWrapper_root__hhfho{position:relative;width:100%}.BaseChartWrapper_gridLayer__cwJXA{pointer-events:none;position:absolute;z-index:1}.BaseChartWrapper_gridLayer__cwJXA .recharts-cartesian-axis{pointer-events:auto;z-index:1}.BaseChartWrapper_chartLayer__HmBaJ{inset:0;pointer-events:auto;position:relative;z-index:3}.BaseChartWrapper_chartLayer__HmBaJ .recharts-surface{background:transparent}.BaseChartWrapper_chartLayer__HmBaJ .recharts-layer{pointer-events:none}.BaseChartWrapper_chartLayer__HmBaJ .recharts-tooltip-wrapper{visibility:visible!important}.BaseChartWrapper_invisibleAxis__TQ-Zk .recharts-cartesian-axis-tick{visibility:hidden}.BaseChartWrapper_legend__gkSy1{position:absolute;top:100%;width:100%}.BaseChartWrapper_noLegend__jqaPa{display:block}.BaseChartWrapper_hideChartAxesLegend__dgVx- .recharts-cartesian-axis-tick-label{display:none!important}.BaseChartWrapper_chartLoadingContainer__AJP-0{align-items:center;display:flex;height:var(--chart-height);justify-content:center;width:100%}.BaseChartWrapper_loadingOverlay__GcOkA{height:100%;inset:0;opacity:.5;pointer-events:none;position:absolute;transition:opacity .1s ease-out;width:100%;z-index:10}.BaseChartWrapper_loadingOverlay__GcOkA [data-slot=skeleton]{border-radius:var(--p-4)!important}.BaseChartWrapper_loaded__Gj15C .BaseChartWrapper_loadingOverlay__GcOkA{opacity:0}.BaseChartWrapper_errorContainer__1bXy1{align-items:center;color:var(--destructive);display:flex;justify-content:center;min-height:250px}.BaseChartWrapper_errorMessage__veSmB{color:var(--destructive)}.BaseChartWrapper_footer__nP5u6{align-items:center;display:flex;gap:var(--p-2);justify-content:space-between}";
+var S = {"root":"BaseChartWrapper_root__hhfho","chartContainer":"BaseChartWrapper_chartContainer__J6CIc","gridLayer":"BaseChartWrapper_gridLayer__cwJXA","chartLayer":"BaseChartWrapper_chartLayer__HmBaJ","invisibleAxis":"BaseChartWrapper_invisibleAxis__TQ-Zk","legend":"BaseChartWrapper_legend__gkSy1","noLegend":"BaseChartWrapper_noLegend__jqaPa","hideChartAxesLegend":"BaseChartWrapper_hideChartAxesLegend__dgVx-","chartLoadingContainer":"BaseChartWrapper_chartLoadingContainer__AJP-0","loadingOverlay":"BaseChartWrapper_loadingOverlay__GcOkA","loaded":"BaseChartWrapper_loaded__Gj15C","errorContainer":"BaseChartWrapper_errorContainer__1bXy1","errorMessage":"BaseChartWrapper_errorMessage__veSmB","footer":"BaseChartWrapper_footer__nP5u6"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Chart/components/ChartAxes.js

@@ -0,0 +1,52 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { XAxis, Label, YAxis } from 'recharts';
+import { generateRoundedYTicks, formatNumber, formatYAxisNumber } from '../tools/formatters.js';
+
+function ChartAxes({ xAxisClassName, yAxisClassName, xAxisLabel, yAxisLabel, formatDate, 
+// formatNumber = formatYAxisNumber,
+xMin, xMax, yMin, yMax, autoScaleYAxis = false, }) {
+    const tickColor = 'var(--muted-foreground)';
+    // Generate rounded ticks to avoid duplicates when we have explicit domain
+    const yTicks = useMemo(() => {
+        if (yMin !== undefined && yMax !== undefined && !autoScaleYAxis) {
+            const ticks = generateRoundedYTicks(yMin, yMax);
+            const formatter = formatNumber || formatYAxisNumber;
+            // Group ticks by formatted value and keep the one closest to its rounded value
+            const ticksByFormatted = new Map();
+            ticks.forEach(tick => {
+                const formatted = formatter(tick);
+                // Parse formatted value back to number to find the target rounded value
+                const targetValue = parseFloat(formatted.replace(/[KM]$/, '')) || 0;
+                const multiplier = formatted.endsWith('M')
+                    ? 1000000
+                    : formatted.endsWith('K')
+                        ? 1000
+                        : 1;
+                const roundedTarget = targetValue * multiplier;
+                const existing = ticksByFormatted.get(formatted);
+                if (existing === undefined ||
+                    Math.abs(tick - roundedTarget) < Math.abs(existing - roundedTarget)) {
+                    ticksByFormatted.set(formatted, tick);
+                }
+            });
+            return Array.from(ticksByFormatted.values()).sort((a, b) => a - b);
+        }
+        return undefined;
+    }, [yMin, yMax, autoScaleYAxis, formatNumber]);
+    // Determine Y-axis domain
+    let yDomain;
+    if (autoScaleYAxis) {
+        yDomain = [
+            (dataMin) => dataMin * 0.95,
+            (dataMax) => dataMax * 1.05,
+        ];
+    }
+    else if (yMin !== undefined && yMax !== undefined) {
+        yDomain = [yMin, yMax];
+    }
+    return (jsxs(Fragment, { children: [jsx(XAxis, { className: xAxisClassName, dataKey: "date", tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 32, tick: { fill: tickColor }, tickFormatter: value => formatDate(value), ...(xMin !== undefined &&
+                    xMax !== undefined && { domain: [xMin, xMax] }), children: xAxisLabel && (jsx(Label, { value: xAxisLabel, position: "insideBottom", offset: -5 })) }), jsx(YAxis, { className: yAxisClassName, tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 32, tick: { fill: tickColor }, tickFormatter: formatNumber, ...(yDomain && { domain: yDomain }), ...(yTicks && { ticks: yTicks }), allowDataOverflow: !autoScaleYAxis, children: yAxisLabel && (jsx(Label, { value: yAxisLabel, angle: -90, position: "insideLeft" })) })] }));
+}
+
+export { ChartAxes };

package/dist/esm/components/ui/Chart/components/ChartContainer.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useId } from 'react';
+import { ChartContext } from '../Chart.context.js';
+import { THEMES } from '../Chart.types.js';
+import * as RechartsPrimitive from 'recharts';
+import S from '../Chart.styl.js';
+
+function ChartContainer({ id, className, children, config, ...props }) {
+    const uniqueId = useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+    return (jsx(ChartContext.Provider, { value: { config }, children: jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn(S.chartContainer, className), ...props, children: [jsx(ChartStyle, { id: chartId, config: config }), jsx(RechartsPrimitive.ResponsiveContainer, { children: children })] }) }));
+}
+const ChartStyle = ({ id, config, }) => {
+    const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+    if (!colorConfig.length)
+        return null;
+    return (jsx("style", { children: Object.entries(THEMES).map(([theme, prefix]) => `
+          ${prefix} [data-chart=${id}] {
+            ${colorConfig
+            .map(([key, itemConfig]) => {
+            const color = itemConfig.theme?.[theme] ||
+                itemConfig.color;
+            return color ? `  --color-${key}: ${color};` : null;
+        })
+            .join('\n')}
+          }
+        `) }));
+};
+
+export { ChartContainer, ChartStyle };

package/dist/esm/components/ui/Chart/components/ChartGrid.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { CartesianGrid } from 'recharts';
+import S from '../Chart.styl.js';
+
+function ChartGrid() {
+    return jsx(CartesianGrid, { className: S.chartGrid, strokeWidth: 0.6 });
+}
+
+export { ChartGrid };

package/dist/esm/components/ui/Chart/components/ChartLegendContent.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useChart } from '../Chart.context.js';
+import S from '../Chart.styl.js';
+import { ChartLegendItem } from './ChartLegendItem.js';
+
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey, }) {
+    const { config } = useChart();
+    if (!payload?.length) {
+        return null;
+    }
+    return (jsx("div", { className: cn(S.legendContainer, verticalAlign === 'top' ? 'pb-3' : 'pt-3', className), children: payload
+            .filter(item => item.type !== 'none')
+            .map(item => (jsx(ChartLegendItem, { item: item, config: config, hideIcon: hideIcon, nameKey: nameKey }, item.value))) }));
+}
+
+export { ChartLegendContent };