@sybilion/uilib 1.3.23 → 1.3.26

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

@@ -0,0 +1,807 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { ChartEmptyState } from '../../ui/Chart/components/ChartEmptyState/ChartEmptyState.js';
+import { ChartAreaInteractive } from '../../ui/ChartAreaInteractive/ChartAreaInteractive.js';
+import { filterDataForTimeRange } from '../../ui/ChartAreaInteractive/ChartAreaInteractive.helpers.js';
+import { FORECAST_LINE_COLORS } from '../../ui/ChartAreaInteractive/ChartLines.js';
+import { Tabs, TabsList, TabsTrigger } from '../../ui/Tabs/Tabs.js';
+import { TextShimmer } from '../../ui/TextShimmer/TextShimmer.js';
+import '../../ui/TimeRangeControls/TimeRangeControls.js';
+import { TIME_RANGES } from '../../ui/TimeRangeControls/TimeRangeControls.constants.js';
+import { normalizeToMonthStart } from '../../../utils/chartConnectionPoint.js';
+import { HorizonsSelector } from './HorizonsSelector/HorizonsSelector.js';
+import { MONTHS_24, MONTH_NAMES } from './PerformanceChart.constants.js';
+import S from './PerformanceChart.styl.js';
+import { PerformanceTable } from './PerformanceTable.js';
+import { PerformanceUnderChartLegendFromItems } from './PerformanceUnderChartLegend/PerformanceUnderChartLegend.js';
+import { getForecastModelDisplayName, averageForecastErrorsVsHistoricalForMatrixColumn, buildPerHorizonSpaghettiEntries, buildSpaghettiMergedChartData, SPAGHETTI_DRIFT_PER_HORIZON_ID_BASE, SPAGHETTI_MODEL_PER_HORIZON_ID_BASE, mergeSpaghettiMergedBases, mergeSpaghettiUserSeriesFromForecastData, filterSpaghettiDataFromEarliestForecastStart, mergeHistoricalIntoSpaghettiChartData, calculateYRangeFromChartData, isSpaghettiModelPerHorizonLineId, isSpaghettiDriftPerHorizonLineId } from './performanceChart.helpers.js';
+import { getCustomMatrixSeriesForHorizonTab, isSpaghettiMatrixSyntheticLineId, SPAGHETTI_LOCAL_LS_USER_SERIES_ROW_ID } from './performanceChartUserSeries.js';
+
+const SPAGHETTI_DRIFT_LINE_COLOR = FORECAST_LINE_COLORS[0];
+const SPAGHETTI_MODEL_LINE_COLOR = 'var(--sb-cyan-400)';
+const SPAGHETTI_CUSTOM_PERFORMANCE_LINE_COLOR = 'var(--sb-purple-400)';
+function reorderSpaghettiMatrixToHorizons(m, targetKeys) {
+    if (m.horizonKeys.length !== targetKeys.length)
+        return m;
+    const idxMap = targetKeys.map(tk => m.horizonKeys.indexOf(tk));
+    if (idxMap.some(j => j < 0))
+        return m;
+    const perHorizonDates = m.perHorizonDates &&
+        m.perHorizonDates.length === m.grid.length &&
+        m.perHorizonDates.every((row, r) => row.length === m.horizonKeys.length && row.length === m.grid[r].length)
+        ? m.perHorizonDates.map(row => idxMap.map(j => row[j]))
+        : m.perHorizonDates;
+    return {
+        ...m,
+        horizonKeys: [...targetKeys],
+        grid: m.grid.map(row => idxMap.map(j => row[j])),
+        perHorizonDates,
+    };
+}
+function spaghettiForecastLineColor(id, index) {
+    if (isSpaghettiDriftPerHorizonLineId(id))
+        return SPAGHETTI_DRIFT_LINE_COLOR;
+    if (isSpaghettiModelPerHorizonLineId(id))
+        return SPAGHETTI_MODEL_LINE_COLOR;
+    if (isSpaghettiMatrixSyntheticLineId(id))
+        return SPAGHETTI_CUSTOM_PERFORMANCE_LINE_COLOR;
+    return FORECAST_LINE_COLORS[index % FORECAST_LINE_COLORS.length];
+}
+function PerformanceChart({ performanceData, historicalData = [], combinedData = [], forecastData = {}, userSeries = [], spaghettiUserSeries = [], customPerformanceMatrix = null, customPerformanceLabel = null, loading = false, chartLoading = false, performanceSectionPending = false, isEmpty = false, perfFetchSettled = true, performanceDataLoading = false, performanceAnalysisId = null, statusHint = null, statusTone = 'muted', runAnalysisHint = false, timeRange: timeRangeProp, onTimeRangeChange, isDarkTheme = false, className, seriesInitKey, toolbarStart, onEditCustomPerformance, showAddEditCustomDataButton = false, addEditCustomDataDisabled = false, hiddenSeries: hiddenSeriesProp, onToggleLegendSeries, onEnsureSeriesVisible, onHiddenSeriesChange, }) {
+    const [viewTab, setViewTab] = useState('perHorizon');
+    const [pinMonth, setPinMonth] = useState(undefined);
+    const [spaghettiTimeRange, setSpaghettiTimeRange] = useState('All');
+    const [perHorizonChartTimeRange, setPerHorizonChartTimeRange] = useState('All');
+    const [internalHiddenSeries, setInternalHiddenSeries] = useState(new Set());
+    const [adjustParameters, setAdjustParameters] = useState({
+        procurementVolume: 100000000,
+        variableRawMaterialCostShare: 50,
+        controllableCosts: 60,
+        currentForecastAccuracy: 70,
+        expectedImprovement: 10,
+        analystHourlyRate: 80,
+    });
+    const hiddenSeriesControlled = hiddenSeriesProp !== undefined;
+    const hiddenSeries = hiddenSeriesProp ?? internalHiddenSeries;
+    const setHiddenSeries = useCallback((update) => {
+        if (onHiddenSeriesChange) {
+            onHiddenSeriesChange(update);
+            return;
+        }
+        setInternalHiddenSeries(update);
+    }, [onHiddenSeriesChange]);
+    const toggleLegendSeriesKey = useCallback((key) => {
+        if (onToggleLegendSeries) {
+            onToggleLegendSeries(key);
+            return;
+        }
+        setHiddenSeries(prev => {
+            const next = new Set(prev);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    }, [onToggleLegendSeries, setHiddenSeries]);
+    const ensureSeriesVisible = useCallback((key) => {
+        if (onEnsureSeriesVisible) {
+            onEnsureSeriesVisible(key);
+            return;
+        }
+        setHiddenSeries(prev => {
+            if (!prev.has(key))
+                return prev;
+            const next = new Set(prev);
+            next.delete(key);
+            return next;
+        });
+    }, [onEnsureSeriesVisible, setHiddenSeries]);
+    const userSeriesForSpaghetti = useMemo(() => [...userSeries, ...spaghettiUserSeries], [userSeries, spaghettiUserSeries]);
+    const availableHorizons = useMemo(() => {
+        if (!performanceData)
+            return [];
+        const driftModelData = performanceData['drift'];
+        if (!driftModelData)
+            return [];
+        const forecasts = driftModelData?.forecasts;
+        if (forecasts && typeof forecasts === 'object') {
+            return Object.keys(forecasts).filter(key => key.startsWith('horizon_'));
+        }
+        return [];
+    }, [performanceData]);
+    const sortedHorizonKeysForCustom = useMemo(() => [...availableHorizons].sort((a, b) => {
+        const na = parseInt(a.replace(/\D/g, ''), 10) || 0;
+        const nb = parseInt(b.replace(/\D/g, ''), 10) || 0;
+        return na - nb;
+    }), [availableHorizons]);
+    const parsedCustomMatrixForCharts = useMemo(() => {
+        if (!customPerformanceMatrix)
+            return null;
+        return {
+            matrix: reorderSpaghettiMatrixToHorizons(customPerformanceMatrix, sortedHorizonKeysForCustom),
+            displayLabel: customPerformanceLabel?.trim() || 'Custom performance',
+        };
+    }, [
+        customPerformanceMatrix,
+        customPerformanceLabel,
+        sortedHorizonKeysForCustom,
+    ]);
+    const [selectedHorizon, setSelectedHorizon] = useState(availableHorizons[0] || 'horizon_1');
+    useEffect(() => {
+        if (availableHorizons.length > 0 &&
+            !availableHorizons.includes(selectedHorizon)) {
+            setSelectedHorizon(availableHorizons[0]);
+        }
+    }, [availableHorizons, selectedHorizon]);
+    const getTimeRangeForForecastLength = useCallback((mode) => {
+        if (mode === 'pin')
+            return '5y';
+        if (performanceAnalysisId == null ||
+            !forecastData[String(performanceAnalysisId)]) {
+            return TIME_RANGES[0];
+        }
+        const forecastDataForSelected = forecastData[String(performanceAnalysisId)];
+        const dates = forecastDataForSelected.dates;
+        if (!dates || dates.length === 0)
+            return TIME_RANGES[0];
+        const firstDate = new Date(dates[0]);
+        const lastDate = new Date(dates[dates.length - 1]);
+        const monthsDiff = (lastDate.getFullYear() - firstDate.getFullYear()) * 12 +
+            (lastDate.getMonth() - firstDate.getMonth()) +
+            1;
+        if (monthsDiff < 6)
+            return '6m';
+        if (monthsDiff < 12)
+            return '1y';
+        if (monthsDiff < 36)
+            return '3y';
+        if (monthsDiff < 60)
+            return '5y';
+        return 'All';
+    }, [performanceAnalysisId, forecastData]);
+    const forecastModelsData = useMemo(() => {
+        if (!performanceData || !selectedHorizon)
+            return [];
+        const models = [];
+        ['model', 'drift'].forEach(key => {
+            const modelData = performanceData[key];
+            const horizonMetrics = modelData?.metrics_history?.[selectedHorizon];
+            if (horizonMetrics?.mae && horizonMetrics?.mape) {
+                const maeValues = Object.values(horizonMetrics.mae);
+                const mapeValues = Object.values(horizonMetrics.mape);
+                models.push({
+                    key,
+                    mae: maeValues.reduce((sum, val) => sum + val, 0) / maeValues.length,
+                    mape: mapeValues.reduce((sum, val) => sum + val, 0) / mapeValues.length,
+                });
+            }
+        });
+        return models;
+    }, [performanceData, selectedHorizon]);
+    const historicalChartData = useMemo(() => historicalData.map(point => ({ ...point })), [historicalData]);
+    const chartForecastData = useMemo(() => {
+        const forecastItems = [];
+        if (performanceData) {
+            ['model', 'drift'].forEach((key, index) => {
+                const modelData = performanceData[key];
+                const horizonData = modelData?.forecasts?.[selectedHorizon];
+                if (horizonData) {
+                    forecastItems.push({
+                        id: index + 1000,
+                        name: getForecastModelDisplayName(key),
+                        color: key === 'model' ? 'var(--sb-cyan-400)' : FORECAST_LINE_COLORS[0],
+                    });
+                }
+            });
+        }
+        if (parsedCustomMatrixForCharts) {
+            const slice = getCustomMatrixSeriesForHorizonTab(parsedCustomMatrixForCharts.matrix, selectedHorizon, SPAGHETTI_LOCAL_LS_USER_SERIES_ROW_ID, forecastData);
+            if (slice) {
+                forecastItems.push({
+                    id: slice.lineId,
+                    name: parsedCustomMatrixForCharts.displayLabel,
+                    color: SPAGHETTI_CUSTOM_PERFORMANCE_LINE_COLOR,
+                });
+            }
+        }
+        return forecastItems;
+    }, [
+        performanceData,
+        selectedHorizon,
+        parsedCustomMatrixForCharts,
+        forecastData,
+    ]);
+    const forecastChartData = useMemo(() => {
+        const chartDataMap = new Map();
+        const modelKeys = ['model', 'drift'];
+        const normalizeDate = (dateStr) => dateStr.split(' ')[0];
+        const latestHistoricalDate = historicalChartData.length > 0
+            ? historicalChartData[historicalChartData.length - 1].date
+            : null;
+        historicalChartData.forEach(point => {
+            chartDataMap.set(point.date, { ...point });
+        });
+        if (performanceData) {
+            modelKeys.forEach(key => {
+                const index = modelKeys.indexOf(key);
+                const modelData = performanceData[key];
+                const horizonData = modelData?.forecasts?.[selectedHorizon];
+                const dataKey = `forecast_${index + 1000}`;
+                if (horizonData) {
+                    Object.entries(horizonData).forEach(([date, value]) => {
+                        if (value !== null && value !== undefined) {
+                            const normalizedDate = normalizeDate(String(date));
+                            if (latestHistoricalDate &&
+                                normalizedDate > latestHistoricalDate) {
+                                return;
+                            }
+                            const existingPoint = chartDataMap.get(normalizedDate);
+                            if (existingPoint) {
+                                chartDataMap.set(normalizedDate, {
+                                    ...existingPoint,
+                                    [dataKey]: value,
+                                });
+                            }
+                            else {
+                                chartDataMap.set(normalizedDate, {
+                                    date: normalizedDate,
+                                    [dataKey]: value,
+                                });
+                            }
+                        }
+                    });
+                }
+            });
+        }
+        const customSlice = parsedCustomMatrixForCharts
+            ? getCustomMatrixSeriesForHorizonTab(parsedCustomMatrixForCharts.matrix, selectedHorizon, SPAGHETTI_LOCAL_LS_USER_SERIES_ROW_ID, forecastData)
+            : null;
+        if (customSlice) {
+            const dataKey = `forecast_${customSlice.lineId}`;
+            const n = Math.min(customSlice.dates.length, customSlice.forecastValues.length);
+            for (let i = 0; i < n; i++) {
+                const value = customSlice.forecastValues[i];
+                if (typeof value !== 'number' || !Number.isFinite(value))
+                    continue;
+                const normalizedDate = normalizeDate(String(customSlice.dates[i]));
+                if (latestHistoricalDate && normalizedDate > latestHistoricalDate) {
+                    continue;
+                }
+                const existingPoint = chartDataMap.get(normalizedDate);
+                if (existingPoint) {
+                    chartDataMap.set(normalizedDate, {
+                        ...existingPoint,
+                        [dataKey]: value,
+                    });
+                }
+                else {
+                    chartDataMap.set(normalizedDate, {
+                        date: normalizedDate,
+                        [dataKey]: value,
+                    });
+                }
+            }
+        }
+        const sortedData = Array.from(chartDataMap.values()).sort((a, b) => a.date.localeCompare(b.date));
+        if (latestHistoricalDate) {
+            return sortedData.filter(point => {
+                if (historicalChartData.some(h => h.date === point.date))
+                    return true;
+                return point.date <= latestHistoricalDate;
+            });
+        }
+        return sortedData;
+    }, [
+        performanceData,
+        selectedHorizon,
+        historicalChartData,
+        parsedCustomMatrixForCharts,
+        forecastData,
+    ]);
+    const maxYScale = useMemo(() => {
+        if (!performanceData || availableHorizons.length === 0)
+            return undefined;
+        const modelKeys = ['model', 'drift'];
+        const normalizeDate = (dateStr) => dateStr.split(' ')[0];
+        const latestHistoricalDate = historicalChartData.length > 0
+            ? historicalChartData[historicalChartData.length - 1].date
+            : null;
+        const allValues = [];
+        availableHorizons.forEach(horizon => {
+            const chartDataMap = new Map();
+            historicalChartData.forEach(point => {
+                chartDataMap.set(point.date, { ...point });
+            });
+            modelKeys.forEach(key => {
+                const index = modelKeys.indexOf(key);
+                const modelData = performanceData[key];
+                const horizonData = modelData?.forecasts?.[horizon];
+                const dataKey = `forecast_${index + 1000}`;
+                if (horizonData) {
+                    Object.entries(horizonData).forEach(([date, value]) => {
+                        if (value !== null && value !== undefined) {
+                            const normalizedDate = normalizeDate(String(date));
+                            if (latestHistoricalDate &&
+                                normalizedDate > latestHistoricalDate) {
+                                return;
+                            }
+                            const existingPoint = chartDataMap.get(normalizedDate);
+                            if (existingPoint) {
+                                chartDataMap.set(normalizedDate, {
+                                    ...existingPoint,
+                                    [dataKey]: value,
+                                });
+                            }
+                            else {
+                                chartDataMap.set(normalizedDate, {
+                                    date: normalizedDate,
+                                    [dataKey]: value,
+                                });
+                            }
+                        }
+                    });
+                }
+            });
+            if (parsedCustomMatrixForCharts) {
+                const customSlice = getCustomMatrixSeriesForHorizonTab(parsedCustomMatrixForCharts.matrix, horizon, SPAGHETTI_LOCAL_LS_USER_SERIES_ROW_ID, forecastData);
+                if (customSlice) {
+                    const dataKey = `forecast_${customSlice.lineId}`;
+                    const n = Math.min(customSlice.dates.length, customSlice.forecastValues.length);
+                    for (let i = 0; i < n; i++) {
+                        const value = customSlice.forecastValues[i];
+                        if (typeof value !== 'number' || !Number.isFinite(value))
+                            continue;
+                        const normalizedDate = normalizeDate(String(customSlice.dates[i]));
+                        if (latestHistoricalDate && normalizedDate > latestHistoricalDate) {
+                            continue;
+                        }
+                        const existingPoint = chartDataMap.get(normalizedDate);
+                        if (existingPoint) {
+                            chartDataMap.set(normalizedDate, {
+                                ...existingPoint,
+                                [dataKey]: value,
+                            });
+                        }
+                        else {
+                            chartDataMap.set(normalizedDate, {
+                                date: normalizedDate,
+                                [dataKey]: value,
+                            });
+                        }
+                    }
+                }
+            }
+            const sortedData = Array.from(chartDataMap.values()).sort((a, b) => a.date.localeCompare(b.date));
+            const filteredData = latestHistoricalDate
+                ? sortedData.filter(point => {
+                    if (historicalChartData.some(h => h.date === point.date)) {
+                        return true;
+                    }
+                    return point.date <= latestHistoricalDate;
+                })
+                : sortedData;
+            if (filteredData.length > 0) {
+                const cutoffDate = new Date(filteredData[filteredData.length - 1].date);
+                cutoffDate.setMonth(cutoffDate.getMonth() - MONTHS_24);
+                filteredData
+                    .filter(point => new Date(point.date) >= cutoffDate)
+                    .forEach(point => {
+                    Object.entries(point).forEach(([key, value]) => {
+                        if (key === 'date')
+                            return;
+                        if (typeof value === 'number')
+                            allValues.push(value);
+                    });
+                });
+            }
+        });
+        if (allValues.length === 0)
+            return undefined;
+        const min = Math.min(...allValues);
+        const max = Math.max(...allValues);
+        const diff = max - min;
+        return { yMin: min - diff * 0.1, yMax: max + diff * 0.1 };
+    }, [
+        performanceData,
+        availableHorizons,
+        historicalChartData,
+        parsedCustomMatrixForCharts,
+        forecastData,
+    ]);
+    const filtered24mData = useMemo(() => {
+        const dataToUse = forecastChartData.length > 0 ? forecastChartData : combinedData;
+        if (dataToUse.length === 0)
+            return [];
+        const sorted = [...dataToUse].sort((a, b) => a.date.localeCompare(b.date));
+        const cutoffDate = new Date(sorted[sorted.length - 1].date);
+        cutoffDate.setMonth(cutoffDate.getMonth() - MONTHS_24);
+        return sorted.filter(point => new Date(point.date) >= cutoffDate);
+    }, [forecastChartData, combinedData]);
+    const historicalByDateForCustomMetrics = useMemo(() => {
+        const norm = (d) => normalizeToMonthStart(String(d).split(' ')[0] ?? d);
+        const m = new Map();
+        historicalChartData.forEach(p => {
+            const v = p.historical;
+            if (typeof v === 'number' && Number.isFinite(v)) {
+                m.set(norm(p.date), v);
+            }
+        });
+        return m;
+    }, [historicalChartData]);
+    const customPerformanceTableRow = useMemo(() => {
+        if (!parsedCustomMatrixForCharts)
+            return null;
+        const colIdx = sortedHorizonKeysForCustom.indexOf(selectedHorizon);
+        if (colIdx < 0)
+            return null;
+        const errs = averageForecastErrorsVsHistoricalForMatrixColumn(parsedCustomMatrixForCharts.matrix, colIdx, historicalByDateForCustomMetrics);
+        if (!errs)
+            return null;
+        return {
+            label: parsedCustomMatrixForCharts.displayLabel,
+            mae: errs.mae,
+            mape: errs.mape,
+        };
+    }, [
+        parsedCustomMatrixForCharts,
+        sortedHorizonKeysForCustom,
+        selectedHorizon,
+        historicalByDateForCustomMetrics,
+    ]);
+    const perHorizonWindowStart = useMemo(() => {
+        if (filtered24mData.length === 0)
+            return null;
+        const sorted = [...filtered24mData].sort((a, b) => a.date.localeCompare(b.date));
+        return sorted[0]?.date ?? null;
+    }, [filtered24mData]);
+    const perHorizonWindowEnd = useMemo(() => {
+        if (filtered24mData.length === 0)
+            return null;
+        const sorted = [...filtered24mData].sort((a, b) => a.date.localeCompare(b.date));
+        return sorted[sorted.length - 1]?.date ?? null;
+    }, [filtered24mData]);
+    const modelPerHorizonEntries = useMemo(() => buildPerHorizonSpaghettiEntries(performanceData?.model, availableHorizons), [performanceData, availableHorizons]);
+    const driftPerHorizonEntries = useMemo(() => buildPerHorizonSpaghettiEntries(performanceData?.drift, availableHorizons), [performanceData, availableHorizons]);
+    const spaghettiPipeline = useMemo(() => {
+        if (viewTab !== 'spaghetti') {
+            return {
+                merged: {
+                    mergedData: [],
+                    seriesMeta: [],
+                },
+                driftSeriesMeta: [],
+            };
+        }
+        const driftMerged = driftPerHorizonEntries.length > 0
+            ? buildSpaghettiMergedChartData(driftPerHorizonEntries, historicalChartData, SPAGHETTI_DRIFT_PER_HORIZON_ID_BASE)
+            : { mergedData: [], seriesMeta: [] };
+        const modelMerged = modelPerHorizonEntries.length > 0
+            ? buildSpaghettiMergedChartData(modelPerHorizonEntries, historicalChartData, SPAGHETTI_MODEL_PER_HORIZON_ID_BASE)
+            : { mergedData: [], seriesMeta: [] };
+        let merged;
+        if (driftMerged.seriesMeta.length === 0 &&
+            modelMerged.seriesMeta.length === 0) {
+            const historicalOnly = historicalChartData.length > 0
+                ? [...historicalChartData]
+                    .map(p => ({
+                    ...p,
+                    date: normalizeToMonthStart(String(p.date).split(' ')[0] ?? p.date),
+                }))
+                    .sort((a, b) => a.date.localeCompare(b.date))
+                : [];
+            merged = { mergedData: historicalOnly, seriesMeta: [] };
+        }
+        else if (driftMerged.seriesMeta.length === 0) {
+            merged = modelMerged;
+        }
+        else if (modelMerged.seriesMeta.length === 0) {
+            merged = driftMerged;
+        }
+        else {
+            merged = mergeSpaghettiMergedBases(driftMerged, modelMerged);
+        }
+        return { merged, driftSeriesMeta: driftMerged.seriesMeta };
+    }, [
+        viewTab,
+        driftPerHorizonEntries,
+        historicalChartData,
+        modelPerHorizonEntries,
+    ]);
+    const spaghettiWithUserSeries = useMemo(() => {
+        if (viewTab !== 'spaghetti') {
+            return { mergedData: [], seriesMeta: [] };
+        }
+        return mergeSpaghettiUserSeriesFromForecastData(spaghettiPipeline.merged, userSeriesForSpaghetti, forecastData);
+    }, [viewTab, spaghettiPipeline.merged, userSeriesForSpaghetti, forecastData]);
+    const spaghettiFilteredChartData = useMemo(() => {
+        if (viewTab !== 'spaghetti')
+            return [];
+        const filtered = filterSpaghettiDataFromEarliestForecastStart(spaghettiWithUserSeries.mergedData, [], userSeriesForSpaghetti, forecastData, spaghettiPipeline.driftSeriesMeta, MONTHS_24, [...modelPerHorizonEntries, ...driftPerHorizonEntries], perHorizonWindowStart, perHorizonWindowEnd);
+        return mergeHistoricalIntoSpaghettiChartData(filtered, historicalChartData);
+    }, [
+        viewTab,
+        spaghettiWithUserSeries.mergedData,
+        userSeriesForSpaghetti,
+        forecastData,
+        spaghettiPipeline.driftSeriesMeta,
+        modelPerHorizonEntries,
+        driftPerHorizonEntries,
+        perHorizonWindowStart,
+        perHorizonWindowEnd,
+        historicalChartData,
+    ]);
+    const spaghettiDisplayedForScale = useMemo(() => filterDataForTimeRange(spaghettiFilteredChartData, spaghettiTimeRange, undefined), [spaghettiFilteredChartData, spaghettiTimeRange]);
+    const spaghettiYScale = useMemo(() => {
+        if (spaghettiDisplayedForScale.length === 0)
+            return undefined;
+        return calculateYRangeFromChartData(spaghettiDisplayedForScale);
+    }, [spaghettiDisplayedForScale]);
+    const spaghettiForecastItems = useMemo(() => {
+        return spaghettiWithUserSeries.seriesMeta.map((meta, i) => ({
+            id: meta.id,
+            name: meta.label,
+            color: spaghettiForecastLineColor(meta.id, i),
+        }));
+    }, [spaghettiWithUserSeries.seriesMeta]);
+    useEffect(() => {
+        if (performanceAnalysisId != null &&
+            forecastData[String(performanceAnalysisId)] &&
+            performanceData) {
+            setSpaghettiTimeRange(getTimeRangeForForecastLength('pin'));
+        }
+    }, [
+        performanceAnalysisId,
+        forecastData,
+        performanceData,
+        getTimeRangeForForecastLength,
+    ]);
+    useEffect(() => {
+        if (isEmpty && viewTab === 'spaghetti') {
+            setSpaghettiTimeRange('All');
+        }
+    }, [isEmpty, viewTab]);
+    const updatePinMonth = useCallback((month) => {
+        if (month)
+            setPinMonth(month);
+    }, []);
+    const handlePerformanceChartTimeRangeChange = useCallback((val) => {
+        if (!val)
+            return;
+        onTimeRangeChange?.(val, { viewTab });
+        if (timeRangeProp === undefined) {
+            if (viewTab === 'spaghetti')
+                setSpaghettiTimeRange(val);
+            else
+                setPerHorizonChartTimeRange(val);
+        }
+    }, [onTimeRangeChange, timeRangeProp, viewTab]);
+    useEffect(() => {
+        if (filtered24mData.length > 0 && historicalData.length > 0) {
+            const lastHistoricalPoint = historicalData[historicalData.length - 1];
+            const date = new Date(lastHistoricalPoint.date);
+            updatePinMonth(`${MONTH_NAMES[date.getMonth()]} ${date.getFullYear()}`);
+        }
+    }, [filtered24mData, historicalData, updatePinMonth]);
+    useEffect(() => {
+        if (hiddenSeriesControlled)
+            return;
+        if (viewTab === 'spaghetti') {
+            setHiddenSeries(prev => {
+                const next = new Set(prev);
+                next.delete('forecast_1000');
+                next.delete('forecast_1001');
+                return next;
+            });
+        }
+    }, [viewTab, hiddenSeriesControlled, setHiddenSeries]);
+    useEffect(() => {
+        if (hiddenSeriesControlled)
+            return;
+        if (viewTab === 'perHorizon') {
+            setHiddenSeries(prev => {
+                const next = new Set(prev);
+                let changed = false;
+                prev.forEach(k => {
+                    const m = /^forecast_(\d+)$/.exec(k);
+                    if (!m)
+                        return;
+                    const id = parseInt(m[1], 10);
+                    if (id >= 6000 && id < 9000) {
+                        next.delete(k);
+                        changed = true;
+                    }
+                });
+                return changed ? next : prev;
+            });
+        }
+    }, [viewTab, hiddenSeriesControlled, setHiddenSeries]);
+    const performanceLineIdsForLegend = useMemo(() => spaghettiWithUserSeries.seriesMeta
+        .filter(m => isSpaghettiModelPerHorizonLineId(m.id))
+        .map(m => m.id), [spaghettiWithUserSeries.seriesMeta]);
+    const driftLineIdsForLegend = useMemo(() => spaghettiWithUserSeries.seriesMeta
+        .filter(m => isSpaghettiDriftPerHorizonLineId(m.id))
+        .map(m => m.id), [spaghettiWithUserSeries.seriesMeta]);
+    const customMatrixLineIdsForLegend = useMemo(() => spaghettiWithUserSeries.seriesMeta
+        .filter(m => isSpaghettiMatrixSyntheticLineId(m.id))
+        .map(m => m.id), [spaghettiWithUserSeries.seriesMeta]);
+    const customMatrixLegendGroupLabel = useMemo(() => {
+        const first = spaghettiWithUserSeries.seriesMeta.find(m => isSpaghettiMatrixSyntheticLineId(m.id));
+        if (!first?.label)
+            return 'Custom performance';
+        const head = first.label.split(' · ')[0]?.trim();
+        return head || 'Custom performance';
+    }, [spaghettiWithUserSeries.seriesMeta]);
+    const performanceGroupHidden = useMemo(() => {
+        if (performanceLineIdsForLegend.length === 0)
+            return false;
+        return performanceLineIdsForLegend.every(id => hiddenSeries.has(`forecast_${id}`));
+    }, [performanceLineIdsForLegend, hiddenSeries]);
+    const driftGroupHidden = useMemo(() => {
+        if (driftLineIdsForLegend.length === 0)
+            return false;
+        return driftLineIdsForLegend.every(id => hiddenSeries.has(`forecast_${id}`));
+    }, [driftLineIdsForLegend, hiddenSeries]);
+    const customMatrixGroupHidden = useMemo(() => {
+        if (customMatrixLineIdsForLegend.length === 0)
+            return false;
+        return customMatrixLineIdsForLegend.every(id => hiddenSeries.has(`forecast_${id}`));
+    }, [customMatrixLineIdsForLegend, hiddenSeries]);
+    const toggleSpaghettiGroup = useCallback((group) => {
+        const ids = group === 'performance'
+            ? performanceLineIdsForLegend
+            : group === 'drift'
+                ? driftLineIdsForLegend
+                : customMatrixLineIdsForLegend;
+        if (ids.length === 0)
+            return;
+        setHiddenSeries(prev => {
+            const next = new Set(prev);
+            const allHidden = ids.every(id => next.has(`forecast_${id}`));
+            if (allHidden)
+                ids.forEach(id => next.delete(`forecast_${id}`));
+            else
+                ids.forEach(id => next.add(`forecast_${id}`));
+            return next;
+        });
+    }, [
+        performanceLineIdsForLegend,
+        driftLineIdsForLegend,
+        customMatrixLineIdsForLegend,
+        setHiddenSeries,
+    ]);
+    const performanceHistoricalLegendLineColor = isDarkTheme
+        ? '#ffffff'
+        : '#000000';
+    const performanceUnderChartLegend = useMemo(() => {
+        if (isEmpty)
+            return null;
+        const items = [];
+        if (historicalChartData.length > 0) {
+            items.push({
+                id: 'historical',
+                label: 'Historical',
+                lineColor: performanceHistoricalLegendLineColor,
+                lineStyle: 'solid',
+                hidden: hiddenSeries.has('historical'),
+            });
+        }
+        if (viewTab === 'perHorizon') {
+            chartForecastData.forEach(item => {
+                items.push({
+                    id: `forecast-${item.id}`,
+                    label: item.name ?? `Series ${item.id}`,
+                    lineColor: String(item.color ?? 'var(--foreground)'),
+                    lineStyle: 'dashed',
+                    hidden: hiddenSeries.has(`forecast_${item.id}`),
+                    onToggle: () => toggleLegendSeriesKey(`forecast_${item.id}`),
+                });
+            });
+        }
+        if (viewTab === 'spaghetti') {
+            if (performanceLineIdsForLegend.length > 0) {
+                items.push({
+                    id: 'spaghetti-performance',
+                    label: 'Sybilion AI',
+                    lineColor: SPAGHETTI_MODEL_LINE_COLOR,
+                    lineStyle: 'dashed',
+                    hidden: performanceGroupHidden,
+                    onToggle: () => toggleSpaghettiGroup('performance'),
+                });
+            }
+            if (driftLineIdsForLegend.length > 0) {
+                items.push({
+                    id: 'spaghetti-drift',
+                    label: getForecastModelDisplayName('drift'),
+                    lineColor: SPAGHETTI_DRIFT_LINE_COLOR,
+                    lineStyle: 'dashed',
+                    hidden: driftGroupHidden,
+                    onToggle: () => toggleSpaghettiGroup('drift'),
+                });
+            }
+            if (customMatrixLineIdsForLegend.length > 0) {
+                items.push({
+                    id: 'spaghetti-custom-matrix',
+                    label: customMatrixLegendGroupLabel,
+                    lineColor: SPAGHETTI_CUSTOM_PERFORMANCE_LINE_COLOR,
+                    lineStyle: 'dashed',
+                    hidden: customMatrixGroupHidden,
+                    onToggle: () => toggleSpaghettiGroup('custom'),
+                });
+            }
+        }
+        return jsx(PerformanceUnderChartLegendFromItems, { items: items });
+    }, [
+        isEmpty,
+        viewTab,
+        historicalChartData.length,
+        chartForecastData,
+        performanceHistoricalLegendLineColor,
+        hiddenSeries,
+        toggleLegendSeriesKey,
+        performanceLineIdsForLegend.length,
+        driftLineIdsForLegend.length,
+        performanceGroupHidden,
+        driftGroupHidden,
+        toggleSpaghettiGroup,
+        customMatrixLineIdsForLegend.length,
+        customMatrixLegendGroupLabel,
+        customMatrixGroupHidden,
+    ]);
+    const isSpaghettiView = viewTab === 'spaghetti';
+    const hasSpaghettiPoints = spaghettiFilteredChartData.length > 0;
+    const spaghettiChartLoading = isSpaghettiView && performanceSectionPending;
+    const spaghettiTabShowsChartData = isSpaghettiView && hasSpaghettiPoints;
+    const spaghettiOverridesPerformanceEmpty = isSpaghettiView &&
+        (hasSpaghettiPoints || performanceDataLoading || spaghettiChartLoading);
+    const isLoaded = useMemo(() => !loading &&
+        !performanceDataLoading &&
+        perfFetchSettled &&
+        (!isEmpty || spaghettiOverridesPerformanceEmpty), [
+        loading,
+        performanceDataLoading,
+        perfFetchSettled,
+        isEmpty,
+        spaghettiOverridesPerformanceEmpty,
+    ]);
+    const spaghettiNoDataMessage = isSpaghettiView &&
+        perfFetchSettled &&
+        !performanceDataLoading &&
+        spaghettiFilteredChartData.length === 0
+        ? 'No spaghetti plot data for this dataset.'
+        : undefined;
+    const activeTimeRange = timeRangeProp ??
+        (isSpaghettiView ? spaghettiTimeRange : perHorizonChartTimeRange);
+    const perHorizonChartProps = viewTab === 'perHorizon'
+        ? {
+            chartData: filtered24mData,
+            forecastData: chartForecastData,
+            yMin: maxYScale?.yMin,
+            yMax: maxYScale?.yMax,
+            loading: performanceSectionPending,
+            noDataMessage: undefined,
+            noDataStatusTone: undefined,
+            hasCombinedData: undefined,
+        }
+        : {
+            chartData: spaghettiFilteredChartData,
+            forecastData: spaghettiForecastItems,
+            yMin: spaghettiYScale?.yMin ?? maxYScale?.yMin,
+            yMax: spaghettiYScale?.yMax ?? maxYScale?.yMax,
+            loading: spaghettiChartLoading,
+            noDataMessage: spaghettiNoDataMessage,
+            noDataStatusTone: spaghettiNoDataMessage
+                ? 'destructive'
+                : undefined,
+            hasCombinedData: spaghettiFilteredChartData.length > 0,
+        };
+    const showEmptyOverlay = (runAnalysisHint || Boolean(statusHint) || isEmpty) && !loading;
+    return (jsx("div", { className: cn(S.root, performanceSectionPending && !spaghettiTabShowsChartData && S.loading, isLoaded && S.loaded, isEmpty && S.isEmpty, className), children: jsxs(Tabs, { variant: "button", value: viewTab, onValueChange: v => {
+                if (v === 'perHorizon' || v === 'spaghetti') {
+                    setViewTab(v);
+                }
+            }, className: S.viewTabs, children: [jsxs("div", { className: S.toolbarRow, children: [toolbarStart, jsxs(TabsList, { className: S.viewTabsList, children: [jsx(TabsTrigger, { value: "perHorizon", children: "Per horizon plot" }), jsx(TabsTrigger, { value: "spaghetti", children: "Spaghetti plots" })] }), jsx("div", { className: S.toolBarRight, children: viewTab === 'perHorizon' && performanceData && (jsx(HorizonsSelector, { selectedHorizon: selectedHorizon, onHorizonChange: setSelectedHorizon, availableHorizons: availableHorizons })) })] }), jsxs("div", { className: cn(S.perHorizonChartWrap, performanceSectionPending && S.perHorizonChartWrapLoading), children: [jsx(ChartAreaInteractive, { disableHistoricalAnimation: true, disableTimeRangeSelector: true, enableTimeRangeBrush: true, disableAnimation: isSpaghettiView, chartContainerClassName: S.chartContainer, chartData: perHorizonChartProps.chartData, forecastData: perHorizonChartProps.forecastData, timeRange: activeTimeRange, onTimeRangeChange: handlePerformanceChartTimeRangeChange, pinMonth: pinMonth, onPinMonthChange: updatePinMonth, isDarkTheme: isDarkTheme, loading: perHorizonChartProps.loading || chartLoading, yMin: perHorizonChartProps.yMin, yMax: perHorizonChartProps.yMax, autoScaleYAxis: false, maxVisibleItems: 2, preventDeselection: true, showLegend: false, footerActions: performanceUnderChartLegend ?? undefined, hasCombinedData: perHorizonChartProps.hasCombinedData, hiddenSeries: hiddenSeries, toggleLegendSeries: toggleLegendSeriesKey, ensureAnalysisSeriesVisible: ensureSeriesVisible }), showEmptyOverlay && (jsx("div", { className: S.chartEmptyOverlay, role: "status", "aria-live": "polite", children: jsx(ChartEmptyState, { variant: "inline", hint: runAnalysisHint ? ('Run a completed analysis to load performance data for an analysis.') : isEmpty ? (jsxs(Fragment, { children: ["No performance data for this dataset.", jsx("br", {}), "Please contact", ' ', jsx("a", { href: "mailto:support@sybilion.com", children: "support team" }), " to gain access to the latest performance data."] })) : undefined, status: statusHint ?? undefined, statusTone: statusTone }) })), performanceSectionPending && (jsx("div", { className: S.performanceLoadingLayer, "aria-busy": "true", "aria-live": "polite", children: jsx("div", { className: S.emptyState, children: jsx(TextShimmer, { as: "span", className: S.performanceLoadingText, children: "Loading performance data\u2026" }) }) }))] }), !performanceDataLoading && performanceData && (jsx(PerformanceTable, { forecastModels: forecastModelsData, adjustParameters: adjustParameters, onAdjustParametersChange: setAdjustParameters, customPerformance: customPerformanceTableRow, onEditCustomPerformance: onEditCustomPerformance, showAddEditCustomDataButton: showAddEditCustomDataButton, addEditCustomDataDisabled: addEditCustomDataDisabled }))] }) }));
+}
+
+export { PerformanceChart };