@sybilion/uilib 1.3.55 → 1.3.56

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

@@ -5,16 +5,16 @@ import { getForecastColor, ChartLines } from '../../ChartAreaInteractive/ChartLi
 import { Skeleton } from '../../Skeleton/Skeleton.js';
 import { chartRenderQueue } from '../../../../utils/chartRenderQueue.js';
 import { Tooltip, LineChart, ComposedChart } from 'recharts';
-import { ChartContainer } from './ChartContainer.js';
-import { ChartTooltipContent } from './ChartTooltipContent.js';
-import { CustomChartLegend } from './CustomChartLegend/CustomChartLegend.js';
-import { QuantileBands } from './QuantileBands.js';
 import { resolveChartMargin, getPlotViewBox } from '../tools/chartPlotGeometry.js';
 import { formatDate } from '../tools/formatters.js';
 import S from './BaseChartWrapper.styl.js';
 import { ChartAxes } from './ChartAxes.js';
+import { ChartContainer } from './ChartContainer.js';
 import { ChartGrid } from './ChartGrid.js';
+import { ChartTooltipContent } from './ChartTooltipContent.js';
+import { CustomChartLegend } from './CustomChartLegend/CustomChartLegend.js';
 import { LegendSvg } from './LegendSvg/LegendSvg.js';
+import { QuantileBands } from './QuantileBands.js';
 
 function clampTooltipTranslate(args) {
     const { coordinate, viewBox, tooltipWidth: tw, tooltipHeight: th, offset, edgeMargin, } = args;
@@ -48,8 +48,9 @@ BaseChartWrapperLoading.displayName = 'BaseChartWrapperLoading';
  * 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 { 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, disableLineDrawAnimation = 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 [shouldAnimate, setShouldAnimate] = useState(false);
+    const lineDataInitializedRef = useRef(false);
     const rootRef = useRef(null);
     const setRefs = (node) => {
         rootRef.current = node;
@@ -238,13 +239,20 @@ const BaseChartWrapperContent = forwardRef((props, ref) => {
         }));
     }, [forecastData, excludeLegendIds, showLegend]);
     useEffect(() => {
-        if (disableAnimation)
+        if (disableAnimation) {
+            setShouldAnimate(false);
             return;
+        }
+        if (disableLineDrawAnimation && !lineDataInitializedRef.current) {
+            lineDataInitializedRef.current = true;
+            setShouldAnimate(false);
+            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]);
+    }, [lineDataForAnimation, disableAnimation, disableLineDrawAnimation]);
     const isLoaded = useMemo(() => !loading && chartData.length > 0, [loading, chartData.length]);
     // const resizePinContainer = useThrottleCallback(() => {
     //   const grid = rootRef.current?.querySelector('.recharts-cartesian-grid');
@@ -307,7 +315,7 @@ const BaseChartWrapperContent = forwardRef((props, ref) => {
     }
     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(Tooltip, { cursor: false, offset: TOOLTIP_OFFSET, allowEscapeViewBox: { x: false, y: false }, content: renderTooltipContent }) }))] }) }), overlayElements, jsxs("div", { className: cn(S.footer, footerClassName), children: [showLegend &&
+    return (jsxs("div", { className: cn(S.root, !showLegend && S.noLegend, !showChartAxesLegend && S.hideChartAxesLegend, disableLineDrawAnimation && S.noLineDrawAnimation, 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, isAnimationActive: !disableAnimation, 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, isAnimationActive: !disableAnimation, 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, disableAnimation: disableAnimation, disableHistoricalAnimation: disableHistoricalAnimation, showLegend: showLegend, forecastLineStyle: forecastLineStyle }), showTooltip && (jsx("div", { children: jsx(Tooltip, { cursor: false, offset: TOOLTIP_OFFSET, allowEscapeViewBox: { x: false, y: 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,

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

@@ -1,7 +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"};
+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_noLineDrawAnimation__cyrzV .recharts-line-curve{stroke-dasharray:inherit!important}.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","noLineDrawAnimation":"BaseChartWrapper_noLineDrawAnimation__cyrzV","footer":"BaseChartWrapper_footer__nP5u6"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/components/ui/ChartAreaInteractive/ChartLines.js

@@ -23,7 +23,7 @@ function resolveQuantileBandFillForForecastLine(lineColor, forecastIndex) {
     return mapped ?? getForecastQuantileBandColor(forecastIndex);
 }
 // Memoized component for chart lines - only re-renders when data/analyses/hiddenSeries change
-const ChartLines = memo(({ chartData, forecastData, hiddenSeries, isDarkTheme, shouldAnimate, historicalLineColor = isDarkTheme ? '#ffffff' : '#000000', showLegend = true, forecastLineStyle = 'dashed', disableHistoricalAnimation = false, }) => {
+const ChartLines = memo(({ chartData, forecastData, hiddenSeries, isDarkTheme, shouldAnimate, historicalLineColor = isDarkTheme ? '#ffffff' : '#000000', showLegend = true, forecastLineStyle = 'dashed', disableAnimation = false, disableHistoricalAnimation = false, }) => {
     const dotStroke = isDarkTheme ? '#000000' : '#FFFFFF';
     const activeDotHistorical = {
         r: 6,
@@ -75,10 +75,15 @@ const ChartLines = memo(({ chartData, forecastData, hiddenSeries, isDarkTheme, s
     };
     const renderHistoricalDot = (props) => renderDot(props, lastHistoricalIndex, 'historical', historicalLineColor);
     const renderForecastDot = (props, id, color) => renderDot(props, lastForecastIndices[id] ?? -1, `forecast_${id}`, color);
-    return (jsxs(Fragment, { children: [jsx(Line, { type: "monotone", dataKey: "historical", stroke: historicalLineColor, strokeWidth: 1, dot: props => renderHistoricalDot(props), activeDot: activeDotHistorical, name: "Historical Data", legendType: showLegend === false ? 'none' : undefined, strokeDasharray: "0", hide: hiddenSeries?.has('historical'), isAnimationActive: shouldAnimate && !disableHistoricalAnimation, animationDuration: disableHistoricalAnimation ? 0 : ANIMATION_DURATION, animationBegin: 0, animationEasing: "ease-out" }, "historical"), forecastData?.map((data, index) => {
+    const animationActive = Boolean(shouldAnimate) && !disableAnimation;
+    const historicalAnimationActive = animationActive && !disableHistoricalAnimation;
+    const forecastAnimationActive = animationActive;
+    const animationDuration = disableAnimation ? 0 : ANIMATION_DURATION;
+    const valueAnimationEnabled = !disableAnimation;
+    return (jsxs(Fragment, { children: [jsx(Line, { type: "monotone", dataKey: "historical", stroke: historicalLineColor, strokeWidth: 1, dot: props => renderHistoricalDot(props), activeDot: activeDotHistorical, name: "Historical Data", legendType: showLegend === false ? 'none' : undefined, strokeDasharray: "0", hide: hiddenSeries?.has('historical'), isAnimationActive: historicalAnimationActive, animationDuration: animationDuration, animateNewValues: valueAnimationEnabled, animationBegin: 0, animationEasing: "ease-out" }, "historical"), forecastData?.map((data, index) => {
                 const { id, name, color = FORECAST_LINE_COLORS[index % FORECAST_LINE_COLORS.length], } = data;
                 const dataKey = `forecast_${id}`;
-                return (jsx(Line, { type: "monotone", dataKey: dataKey, stroke: color, strokeWidth: 1, strokeDasharray: forecastLineStyle === 'dashed' ? '4 2' : '0', dot: props => renderForecastDot(props, id, color), activeDot: activeDotForecast(color), name: `${name || `${id}`}`, legendType: showLegend === false ? 'none' : undefined, hide: hiddenSeries?.has(dataKey), isAnimationActive: shouldAnimate, animationDuration: ANIMATION_DURATION, animationBegin: 0, animationEasing: "ease-out", className: "chart-line-blinking" }, `forecast-${id}`));
+                return (jsx(Line, { type: "monotone", dataKey: dataKey, stroke: color, strokeWidth: 1, strokeDasharray: forecastLineStyle === 'dashed' ? '4 2' : '0', dot: props => renderForecastDot(props, id, color), activeDot: activeDotForecast(color), name: `${name || `${id}`}`, legendType: showLegend === false ? 'none' : undefined, hide: hiddenSeries?.has(dataKey), isAnimationActive: forecastAnimationActive, animationDuration: animationDuration, animateNewValues: valueAnimationEnabled, animationBegin: 0, animationEasing: "ease-out", className: data.status === 'pending' ? 'chart-line-blinking' : undefined }, `forecast-${id}`));
             })] }));
 });
 ChartLines.displayName = 'ChartLines';

package/dist/esm/components/widgets/DriversComparisonChart/DriversComparisonChart.js

@@ -114,7 +114,8 @@ function DriversComparisonChart({ payload, datasetHistorical = [], loading = fal
             };
         });
     }, [originalDriversById, sortedDriversWithData, viewTab]);
-    const seriesInitKeyResolved = `${seriesInitKey ?? `${tableSeriesRows.map(r => r.id).join(',') || 'none'}`}:${viewTab}`;
+    const seriesInitKeyResolved = seriesInitKey ??
+        `${tableSeriesRows.map(r => r.id).join(',') || 'none'}`;
     const backtestsSeriesInitKeyRef = useRef('');
     useEffect(() => {
         if (tableSeriesRows.length === 0)
@@ -136,7 +137,7 @@ function DriversComparisonChart({ payload, datasetHistorical = [], loading = fal
     }, [seriesInitKeyResolved, tableSeriesRows]);
     const driversComparisonChartData = useMemo(() => buildDriversComparisonChartData(mergedWithHistorical, datasetHistorical, chartForecastData.map(f => f.id)), [chartForecastData, datasetHistorical, mergedWithHistorical]);
     const showEmptyOverlay = (runAnalysisHint || Boolean(statusHint)) && !loading;
-    return (jsxs("div", { className: cn(S.root, className), children: [jsxs("div", { className: cn(S.chartShell, loading && S.chartShellLoading), children: [jsx("div", { className: S.chartSlot, children: jsxs("div", { className: S.chartWithOverlay, children: [jsx("div", { className: cn(S.chartInteractiveLayer, showEmptyOverlay && S.chartInteractiveDimmed), children: jsx(ChartAreaInteractive, { chartRenderId: `drivers-comparison-${viewTab}`, disableHistoricalAnimation: true, disableTimeRangeSelector: true, enableTimeRangeBrush: true, chartContainerClassName: S.chartContainer, chartData: driversComparisonChartData, forecastData: chartForecastData, timeRange: timeRange, onTimeRangeChange: handleTimeRangeChange, pinMonth: undefined, onPinMonthChange: () => { }, isDarkTheme: isDarkTheme, loading: chartLoading, hasCombinedData: mergedWithHistorical.length > 0, forecastLineStyle: "solid", showLegend: false, hiddenSeries: hiddenSeries, toggleLegendSeries: toggleSeries, ensureAnalysisSeriesVisible: showSeries }, viewTab) }), showEmptyOverlay && (jsx("div", { className: S.chartEmptyOverlay, role: "status", "aria-live": "polite", children: jsx("div", { className: S.chartEmptyBlurb, children: jsx(ChartEmptyState, { variant: "inline", hint: runAnalysisHint
+    return (jsxs("div", { className: cn(S.root, className), children: [jsxs("div", { className: cn(S.chartShell, loading && S.chartShellLoading), children: [jsx("div", { className: S.chartSlot, children: jsxs("div", { className: S.chartWithOverlay, children: [jsx("div", { className: cn(S.chartInteractiveLayer, showEmptyOverlay && S.chartInteractiveDimmed), children: jsx(ChartAreaInteractive, { chartRenderId: "drivers-comparison", disableLineDrawAnimation: true, disableHistoricalAnimation: true, disableTimeRangeSelector: true, enableTimeRangeBrush: true, chartContainerClassName: S.chartContainer, chartData: driversComparisonChartData, forecastData: chartForecastData, timeRange: timeRange, onTimeRangeChange: handleTimeRangeChange, pinMonth: undefined, onPinMonthChange: () => { }, isDarkTheme: isDarkTheme, loading: chartLoading, hasCombinedData: mergedWithHistorical.length > 0, forecastLineStyle: "solid", showLegend: false, hiddenSeries: hiddenSeries, toggleLegendSeries: toggleSeries, ensureAnalysisSeriesVisible: showSeries }) }), showEmptyOverlay && (jsx("div", { className: S.chartEmptyOverlay, role: "status", "aria-live": "polite", children: jsx("div", { className: S.chartEmptyBlurb, children: jsx(ChartEmptyState, { variant: "inline", hint: runAnalysisHint
                                                 ? 'Run a completed analysis to load the drivers comparison chart for an analysis.'
                                                 : undefined, status: statusHint ?? undefined, statusTone: statusTone }) }) }))] }) }), loading && (jsx("div", { className: S.loadingLayer, "aria-busy": "true", "aria-live": "polite", children: jsx("div", { className: S.loadingMessage, children: jsx(TextShimmer, { as: "span", className: S.loadingText, children: "Loading drivers comparison\u2026" }) }) }))] }), jsx("div", { className: S.seriesSection, children: tableSeriesRows.length === 0 ? (jsx("div", { className: S.seriesEmptyWrap, children: jsx("div", { className: S.chartEmptyBlurb, children: jsx(ChartEmptyState, { variant: "inline", align: "center", status: "No series" }) }) })) : (jsx("div", { className: S.seriesTableWrapper, children: jsx(PageXScroll, { size: "md", fullWidth: true, innerClassName: S.seriesTableContainer, scrollbarClassName: S.seriesScrollbar, children: jsxs(Table, { withBackground: true, withPaddings: true, className: S.seriesTable, children: [jsx(TableHeader, { children: jsxs(TableRow, { children: [jsx(TableHead, { className: S.seriesColSeries, children: "Driver name" }), jsx(TableHead, { children: jsxs(TableCellValue, { children: ["Importance", jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { children: jsx(InfoIcon, { size: 16, style: { cursor: 'help' } }) }) }), jsx(TooltipContent, { side: "top", maxWidth: 300, children: "How much this driver contributes to price movements in the forecast model. Higher = stronger influence. Reflects relative weight of each driver, scored from 0% to 100%." })] })] }) }), jsx(TableHead, { children: jsxs(TableCellValue, { children: ["Lag", jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { children: jsx(InfoIcon, { size: 16, style: { cursor: 'help' } }) }) }), jsx(TooltipContent, { side: "top", maxWidth: 300, children: "Lag shows how far ahead this driver predicts price movement. A range (e.g. 9\u201312 months) means the predictive signal is strongest somewhere in that window \u2014 not at a single fixed point." })] })] }) })] }) }), jsx(TableBody, { children: tableSeriesRows.map(row => {
                                         const dataKey = toForecastDataKey(row.id);

package/dist/esm/components/widgets/DriversComparisonChart/driversComparisonChart.helpers.js

@@ -15,8 +15,7 @@ function resolveDriverLagLabel(driver) {
     if (typeof driver.lag === 'string' && driver.lag.trim()) {
         return driver.lag;
     }
-    const raw = driver;
-    const overallLag = raw.overall_lag ?? raw.overallLag;
+    const overallLag = driver.overall_lag ?? driver.overallLag;
     if (typeof overallLag === 'string' && overallLag.trim()) {
         return overallLag;
     }

package/dist/esm/types/src/components/ui/Chart/components/BaseChartWrapper.d.ts

@@ -2,9 +2,9 @@ import { ComponentProps, ReactNode } from 'react';
 import type { QuantileBandConfig } from '#uilib/components/ui/Chart/chartForecastVisualization.types';
 import { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
 import { ForecastItemData } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
+import { LegendPayload } from 'recharts/types/component/DefaultLegendContent';
 import type { ChartConfig } from '../Chart.types';
 import { ChartContainer } from './ChartContainer';
-import { LegendPayload } from 'recharts/types/component/DefaultLegendContent';
 export interface BaseChartWrapperProps {
     renderId?: string;
     chartConfig?: ChartConfig;
@@ -43,6 +43,11 @@ export interface BaseChartWrapperProps {
     children?: ReactNode;
     chartType?: 'composed' | 'line';
     disableAnimation?: boolean;
+    /**
+     * Skip left-to-right line path draw; still animate Y on data updates.
+     * Independent of `disableAnimation` (full off).
+     */
+    disableLineDrawAnimation?: boolean;
     showGrid?: boolean;
     showAxes?: boolean;
     showTooltip?: boolean;

package/dist/esm/types/src/components/ui/ChartAreaInteractive/ChartLines.d.ts

@@ -34,7 +34,7 @@ export declare const getForecastColor: (index: number) => string;
 export declare const getForecastQuantileBandColor: (index: number) => any;
 /** Same tint logic as intervals/threshold overlays: band fill follows forecast line hex when known. */
 export declare function resolveQuantileBandFillForForecastLine(lineColor: string, forecastIndex: number): string;
-export declare const ChartLines: import("react").MemoExoticComponent<({ chartData, forecastData, hiddenSeries, isDarkTheme, shouldAnimate, historicalLineColor, showLegend, forecastLineStyle, disableHistoricalAnimation, }: {
+export declare const ChartLines: import("react").MemoExoticComponent<({ chartData, forecastData, hiddenSeries, isDarkTheme, shouldAnimate, historicalLineColor, showLegend, forecastLineStyle, disableAnimation, disableHistoricalAnimation, }: {
     chartData: ChartDataPoint[];
     forecastData?: ForecastItemData[];
     hiddenSeries?: Set<string>;
@@ -43,5 +43,6 @@ export declare const ChartLines: import("react").MemoExoticComponent<({ chartDat
     historicalLineColor?: string;
     showLegend?: boolean;
     forecastLineStyle?: "dashed" | "solid";
+    disableAnimation?: boolean;
     disableHistoricalAnimation?: boolean;
 }) => import("react/jsx-runtime").JSX.Element>;

package/dist/esm/types/src/components/widgets/DriversComparisonChart/driversComparisonChart.helpers.d.ts

@@ -8,6 +8,8 @@ export type DriversComparisonViewTab = 'overlapped' | 'lagged';
 export declare function formatSeriesImportance(value: number | null): string;
 export declare function resolveDriverLagLabel(driver: {
     lag?: string | null;
+    overall_lag?: string | null;
+    overallLag?: string | null;
 }): string | null;
 /** Parse lag label to month count; ranges use the upper bound. */
 export declare function parseLagMonthsFromLabel(lag: string | null | undefined): number | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.55",
+  "version": "1.3.56",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Chart/components/BaseChartWrapper.styl

@@ -89,6 +89,11 @@
 .errorMessage
   color var(--destructive)
 
+.noLineDrawAnimation
+  :global
+    .recharts-line-curve
+      stroke-dasharray unset !important
+
 .footer
   display flex
   align-items center

package/src/components/ui/Chart/components/BaseChartWrapper.styl.d.ts

@@ -14,6 +14,7 @@ interface CssExports {
   'loaded': string;
   'loadingOverlay': string;
   'noLegend': string;
+  'noLineDrawAnimation': string;
   'root': string;
 }
 export const cssExports: CssExports;

package/src/components/ui/Chart/components/BaseChartWrapper.tsx

@@ -18,21 +18,20 @@ import {
 } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
 import { Skeleton } from '#uilib/components/ui/Skeleton';
 import { chartRenderQueue } from '#uilib/utils/chartRenderQueue';
-import { ComposedChart, LineChart, Tooltip as ChartTooltip } from 'recharts';
-
-import type { ChartConfig } from '../Chart.types';
-import { ChartContainer } from './ChartContainer';
-import { ChartTooltipContent } from './ChartTooltipContent';
-import { CustomChartLegend } from './CustomChartLegend/CustomChartLegend';
-import { QuantileBands } from './QuantileBands';
+import { Tooltip as ChartTooltip, ComposedChart, LineChart } from 'recharts';
 import { LegendPayload } from 'recharts/types/component/DefaultLegendContent';
 
+import type { ChartConfig } from '../Chart.types';
 import { getPlotViewBox, resolveChartMargin } from '../tools/chartPlotGeometry';
 import { formatDate } from '../tools/formatters';
 import S from './BaseChartWrapper.styl';
 import { ChartAxes } from './ChartAxes';
+import { ChartContainer } from './ChartContainer';
 import { ChartGrid } from './ChartGrid';
+import { ChartTooltipContent } from './ChartTooltipContent';
+import { CustomChartLegend } from './CustomChartLegend/CustomChartLegend';
 import { LegendSvg } from './LegendSvg/LegendSvg';
+import { QuantileBands } from './QuantileBands';
 
 function clampTooltipTranslate(args: {
   coordinate: { x: number; y: number };
@@ -107,6 +106,11 @@ export interface BaseChartWrapperProps {
   children?: ReactNode;
   chartType?: 'composed' | 'line';
   disableAnimation?: boolean;
+  /**
+   * Skip left-to-right line path draw; still animate Y on data updates.
+   * Independent of `disableAnimation` (full off).
+   */
+  disableLineDrawAnimation?: boolean;
   showGrid?: boolean;
   showAxes?: boolean;
   showTooltip?: boolean;
@@ -210,6 +214,7 @@ const BaseChartWrapperContent = forwardRef<
     margin,
     chartType = 'composed',
     disableAnimation = false,
+    disableLineDrawAnimation = false,
     showGrid = true,
     showAxes = true,
     showTooltip = true,
@@ -240,6 +245,7 @@ const BaseChartWrapperContent = forwardRef<
   } = props;
 
   const [shouldAnimate, setShouldAnimate] = useState(false);
+  const lineDataInitializedRef = useRef(false);
 
   const rootRef = useRef<HTMLDivElement>(null);
 
@@ -483,12 +489,20 @@ const BaseChartWrapperContent = forwardRef<
   }, [forecastData, excludeLegendIds, showLegend]);
 
   useEffect(() => {
-    if (disableAnimation) return;
+    if (disableAnimation) {
+      setShouldAnimate(false);
+      return;
+    }
+    if (disableLineDrawAnimation && !lineDataInitializedRef.current) {
+      lineDataInitializedRef.current = true;
+      setShouldAnimate(false);
+      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]);
+  }, [lineDataForAnimation, disableAnimation, disableLineDrawAnimation]);
 
   const isLoaded = useMemo(
     () => !loading && chartData.length > 0,
@@ -587,6 +601,7 @@ const BaseChartWrapperContent = forwardRef<
         S.root,
         !showLegend && S.noLegend,
         !showChartAxesLegend && S.hideChartAxesLegend,
+        disableLineDrawAnimation && S.noLineDrawAnimation,
         isLoaded && S.loaded,
         className,
       )}
@@ -605,7 +620,11 @@ const BaseChartWrapperContent = forwardRef<
           className={cn(S.gridLayer, chartClassName)}
           style={height ? { height: `${height}px` } : undefined}
         >
-          <ChartComponent data={chartData} margin={margin}>
+          <ChartComponent
+            data={chartData}
+            margin={margin}
+            isAnimationActive={!disableAnimation}
+          >
             <ChartGrid />
             {showAxes && (
               <ChartAxes
@@ -633,7 +652,11 @@ const BaseChartWrapperContent = forwardRef<
         style={height ? { height: `${height}px` } : undefined}
         {...containerProps}
       >
-        <ChartComponent data={chartData} margin={margin}>
+        <ChartComponent
+          data={chartData}
+          margin={margin}
+          isAnimationActive={!disableAnimation}
+        >
           {/* Render invisible axes for coordinate system, but hide labels */}
           {showAxes && (
             <ChartAxes
@@ -671,9 +694,10 @@ const BaseChartWrapperContent = forwardRef<
             hiddenSeries={hiddenSeries}
             isDarkTheme={isDarkTheme}
             shouldAnimate={shouldAnimate}
+            disableAnimation={disableAnimation}
+            disableHistoricalAnimation={disableHistoricalAnimation}
             showLegend={showLegend}
             forecastLineStyle={forecastLineStyle}
-            // disableHistoricalAnimation={disableHistoricalAnimation}
           />
 
           {showTooltip && (

package/src/components/ui/ChartAreaInteractive/ChartLines.tsx

@@ -73,6 +73,7 @@ export const ChartLines = memo(
     historicalLineColor = isDarkTheme ? '#ffffff' : '#000000',
     showLegend = true,
     forecastLineStyle = 'dashed',
+    disableAnimation = false,
     disableHistoricalAnimation = false,
   }: {
     chartData: ChartDataPoint[];
@@ -83,6 +84,7 @@ export const ChartLines = memo(
     historicalLineColor?: string;
     showLegend?: boolean;
     forecastLineStyle?: 'dashed' | 'solid';
+    disableAnimation?: boolean;
     disableHistoricalAnimation?: boolean;
   }) => {
     const dotStroke = isDarkTheme ? '#000000' : '#FFFFFF';
@@ -152,6 +154,14 @@ export const ChartLines = memo(
 
     const renderForecastDot = (props: any, id: number, color: string) =>
       renderDot(props, lastForecastIndices[id] ?? -1, `forecast_${id}`, color);
+
+    const animationActive = Boolean(shouldAnimate) && !disableAnimation;
+    const historicalAnimationActive =
+      animationActive && !disableHistoricalAnimation;
+    const forecastAnimationActive = animationActive;
+    const animationDuration = disableAnimation ? 0 : ANIMATION_DURATION;
+    const valueAnimationEnabled = !disableAnimation;
+
     return (
       <>
         {/* Historical Data Line */}
@@ -167,10 +177,9 @@ export const ChartLines = memo(
           legendType={showLegend === false ? 'none' : undefined}
           strokeDasharray="0"
           hide={hiddenSeries?.has('historical')}
-          isAnimationActive={shouldAnimate && !disableHistoricalAnimation}
-          animationDuration={
-            disableHistoricalAnimation ? 0 : ANIMATION_DURATION
-          }
+          isAnimationActive={historicalAnimationActive}
+          animationDuration={animationDuration}
+          animateNewValues={valueAnimationEnabled}
           animationBegin={0}
           animationEasing="ease-out"
         />
@@ -197,12 +206,14 @@ export const ChartLines = memo(
               name={`${name || `${id}`}`}
               legendType={showLegend === false ? 'none' : undefined}
               hide={hiddenSeries?.has(dataKey)}
-              isAnimationActive={shouldAnimate}
-              animationDuration={ANIMATION_DURATION}
+              isAnimationActive={forecastAnimationActive}
+              animationDuration={animationDuration}
+              animateNewValues={valueAnimationEnabled}
               animationBegin={0}
               animationEasing="ease-out"
-              className="chart-line-blinking"
-              // className={pending ? 'chart-line-blinking' : undefined}
+              className={
+                data.status === 'pending' ? 'chart-line-blinking' : undefined
+              }
             />
           );
         })}

package/src/components/widgets/DriversComparisonChart/DriversComparisonChart.tsx

@@ -192,7 +192,9 @@ export function DriversComparisonChart({
     });
   }, [originalDriversById, sortedDriversWithData, viewTab]);
 
-  const seriesInitKeyResolved = `${seriesInitKey ?? `${tableSeriesRows.map(r => r.id).join(',') || 'none'}`}:${viewTab}`;
+  const seriesInitKeyResolved =
+    seriesInitKey ??
+    `${tableSeriesRows.map(r => r.id).join(',') || 'none'}`;
 
   const backtestsSeriesInitKeyRef = useRef<string>('');
 
@@ -238,8 +240,8 @@ export function DriversComparisonChart({
               )}
             >
               <ChartAreaInteractive
-                key={viewTab}
-                chartRenderId={`drivers-comparison-${viewTab}`}
+                chartRenderId="drivers-comparison"
+                disableLineDrawAnimation
                 disableHistoricalAnimation
                 disableTimeRangeSelector
                 enableTimeRangeBrush

package/src/components/widgets/DriversComparisonChart/driversComparisonChart.helpers.ts

@@ -23,12 +23,13 @@ export function formatSeriesImportance(value: number | null): string {
 
 export function resolveDriverLagLabel(driver: {
   lag?: string | null;
+  overall_lag?: string | null;
+  overallLag?: string | null;
 }): string | null {
   if (typeof driver.lag === 'string' && driver.lag.trim()) {
     return driver.lag;
   }
-  const raw = driver as Record<string, unknown>;
-  const overallLag = raw.overall_lag ?? raw.overallLag;
+  const overallLag = driver.overall_lag ?? driver.overallLag;
   if (typeof overallLag === 'string' && overallLag.trim()) {
     return overallLag;
   }