@sybilion/uilib 1.3.22 → 1.3.25

package/dist/esm/index.js

@@ -104,6 +104,12 @@ export { DriverMap } from './components/widgets/DriverMap/DriverMap.js';
 export { getCategoryIcon } from './components/widgets/DriverMap/driverCategoryIcon.js';
 export { getDriverImportance, getHighestImportanceDriver } from './components/widgets/DriverMap/driverMapSelection.js';
 export { geographicCoordinates, geographicToSVG, getContinentFromRegion, getPreciseCoordinates, getResponsiveCoordinates, svgToPercentage } from './components/widgets/DriverMap/driverMapGeography.js';
+export { DriversComparisonChart } from './components/widgets/DriversComparisonChart/DriversComparisonChart.js';
+export { DRIVER_COMPARISON_CHART_LEAD_MONTHS, DRIVER_FORECAST_ID_BASE, INITIAL_VISIBLE_SERIES_COUNT, buildDriversComparisonChartData, formatSeriesImportance, mergeBacktestsChartData, mergeDatasetHistoricalWithBacktestsChartData } from './components/widgets/DriversComparisonChart/driversComparisonChart.helpers.js';
+export { PerformanceChart } from './components/widgets/PerformanceChart/PerformanceChart.js';
+export { PerformanceTable } from './components/widgets/PerformanceChart/PerformanceTable.js';
+export { SPAGHETTI_DRIFT_PER_HORIZON_ID_BASE, SPAGHETTI_MODEL_PER_HORIZON_ID_BASE, averageForecastErrorsVsHistoricalForMatrixColumn, buildDriftSpaghettiMatrixForCustomDialog, buildPerHorizonSpaghettiEntries, buildSpaghettiMergedChartData, calculateYRangeFromChartData, getForecastModelDisplayName, spaghettiGridFromHistoricalPreviousMonth } from './components/widgets/PerformanceChart/performanceChart.helpers.js';
+export { SPAGHETTI_LOCAL_LS_USER_SERIES_ROW_ID, SPAGHETTI_TIME_SERIES_MATRIX_V, tryParseSpaghettiPerformanceMatrix } from './components/widgets/PerformanceChart/performanceChartUserSeries.js';
 export { SybilionAppHeader } from './components/widgets/SybilionAppHeader/SybilionAppHeader.js';
 export { SybilionAuthLayout } from './components/widgets/SybilionAuthLayout/SybilionAuthLayout.js';
 export { SybilionAuthHeadline } from './components/widgets/SybilionAuthLayout/SybilionAuthHeadline.js';

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

@@ -0,0 +1,18 @@
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import type { BacktestsComponentPayload } from '@sybilion/platform-sdk';
+export type DriversComparisonChartProps = {
+    payload: BacktestsComponentPayload | null;
+    datasetHistorical?: ChartDataPoint[];
+    loading?: boolean;
+    chartLoading?: boolean;
+    statusHint?: string | null;
+    statusTone?: 'destructive' | 'muted';
+    runAnalysisHint?: boolean;
+    timeRange?: string;
+    onTimeRangeChange?: (range: string) => void;
+    isDarkTheme?: boolean;
+    className?: string;
+    /** Resets visible series when this key changes (e.g. selected analysis id). */
+    seriesInitKey?: string;
+};
+export declare function DriversComparisonChart({ payload, datasetHistorical, loading, chartLoading, statusHint, statusTone, runAnalysisHint, timeRange: timeRangeProp, onTimeRangeChange, isDarkTheme, className, seriesInitKey, }: DriversComparisonChartProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import type { BacktestsComponentPayload } from '@sybilion/platform-sdk';
+export declare const DRIVER_FORECAST_ID_BASE = 8000000;
+export declare const INITIAL_VISIBLE_SERIES_COUNT = 3;
+/** Months of historical context before the earliest forecast month (inclusive). */
+export declare const DRIVER_COMPARISON_CHART_LEAD_MONTHS = 6;
+export declare function formatSeriesImportance(value: number | null): string;
+export declare function mergeBacktestsChartData(payload: BacktestsComponentPayload | null): ChartDataPoint[];
+/** While drivers comparison is not loaded: dataset historical only. After load: normalized historical from target.normalized_series (see mergeBacktestsChartData) replaces it. */
+export declare function mergeDatasetHistoricalWithBacktestsChartData(datasetHistorical: ChartDataPoint[], backtestsMerged: ChartDataPoint[]): ChartDataPoint[];
+/**
+ * For each driver, first month with materially non-zero value; anchor = median of those months.
+ * (Min is too early with outliers; max matched logs where one driver started 2017-12 while most started 2015-01.)
+ */
+export declare function getZoomAnchorMonthFromDriverMaterialStarts(points: ChartDataPoint[], forecastIds: number[]): {
+    anchor: string | null;
+    perDriverFirstMaterial: string[];
+};
+export declare function subtractMonthsFromMonthStart(date: string, count: number): string;
+/**
+ * Backtests payload often starts at the same month for target + drivers, so xMin falls
+ * in a range with no rows. Prepend historical-only months from raw dataset series
+ * (scaled to the first normalized point) so the lead-in shows the target line alone.
+ */
+export declare function prependHistoricalLeadFromDataset(points: ChartDataPoint[], datasetHistorical: ChartDataPoint[], xMin: string): ChartDataPoint[];
+export declare function buildDriversComparisonChartData(mergedWithHistorical: ChartDataPoint[], datasetHistorical: ChartDataPoint[], forecastIds: number[]): ChartDataPoint[];

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

@@ -0,0 +1,2 @@
+export { DriversComparisonChart, type DriversComparisonChartProps, } from './DriversComparisonChart';
+export { buildDriversComparisonChartData, DRIVER_COMPARISON_CHART_LEAD_MONTHS, DRIVER_FORECAST_ID_BASE, formatSeriesImportance, INITIAL_VISIBLE_SERIES_COUNT, mergeBacktestsChartData, mergeDatasetHistoricalWithBacktestsChartData, } from './driversComparisonChart.helpers';

package/dist/esm/types/src/components/widgets/PerformanceChart/HorizonsSelector/HorizonsSelector.d.ts

@@ -0,0 +1,7 @@
+interface HorizonsSelectorProps {
+    selectedHorizon: string;
+    onHorizonChange: (horizon: string) => void;
+    availableHorizons: string[];
+}
+export declare function HorizonsSelector({ selectedHorizon, onHorizonChange, availableHorizons, }: HorizonsSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/widgets/PerformanceChart/PerformanceChart.constants.d.ts

@@ -0,0 +1,3 @@
+export declare const METRICS_KEY: "24m";
+export declare const MONTHS_24 = 24;
+export declare const MONTH_NAMES: string[];

package/dist/esm/types/src/components/widgets/PerformanceChart/PerformanceChart.d.ts

@@ -0,0 +1,54 @@
+import { type ReactNode } from 'react';
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import type { ForecastData } from '#uilib/types/forecast-data';
+import { type SpaghettiPerformanceMatrixPayload } from './performanceChartUserSeries';
+export type PerformanceViewTab = 'perHorizon' | 'spaghetti';
+export type PerformanceChartPayload = Record<string, {
+    forecasts?: Record<string, Record<string, number>>;
+    metrics_history?: Record<string, {
+        mae?: Record<string, number>;
+        mape?: Record<string, number>;
+    }>;
+}>;
+export type PerformanceChartProps = {
+    performanceData: PerformanceChartPayload | null;
+    historicalData?: ChartDataPoint[];
+    combinedData?: ChartDataPoint[];
+    forecastData?: Record<string, ForecastData>;
+    userSeries?: {
+        id: number;
+        name?: string;
+    }[];
+    spaghettiUserSeries?: {
+        id: number;
+        name?: string;
+    }[];
+    customPerformanceMatrix?: SpaghettiPerformanceMatrixPayload | null;
+    customPerformanceLabel?: string | null;
+    loading?: boolean;
+    chartLoading?: boolean;
+    performanceSectionPending?: boolean;
+    isEmpty?: boolean;
+    perfFetchSettled?: boolean;
+    performanceDataLoading?: boolean;
+    performanceAnalysisId?: number | null;
+    statusHint?: string | null;
+    statusTone?: 'destructive' | 'muted';
+    runAnalysisHint?: boolean;
+    timeRange?: string;
+    onTimeRangeChange?: (range: string, meta?: {
+        viewTab: PerformanceViewTab;
+    }) => void;
+    isDarkTheme?: boolean;
+    className?: string;
+    seriesInitKey?: string;
+    toolbarStart?: ReactNode;
+    onEditCustomPerformance?: () => void;
+    showAddEditCustomDataButton?: boolean;
+    addEditCustomDataDisabled?: boolean;
+    hiddenSeries?: Set<string>;
+    onToggleLegendSeries?: (key: string) => void;
+    onEnsureSeriesVisible?: (key: string) => void;
+    onHiddenSeriesChange?: (update: Set<string> | ((prev: Set<string>) => Set<string>)) => void;
+};
+export declare function PerformanceChart({ performanceData, historicalData, combinedData, forecastData, userSeries, spaghettiUserSeries, customPerformanceMatrix, customPerformanceLabel, loading, chartLoading, performanceSectionPending, isEmpty, perfFetchSettled, performanceDataLoading, performanceAnalysisId, statusHint, statusTone, runAnalysisHint, timeRange: timeRangeProp, onTimeRangeChange, isDarkTheme, className, seriesInitKey, toolbarStart, onEditCustomPerformance, showAddEditCustomDataButton, addEditCustomDataDisabled, hiddenSeries: hiddenSeriesProp, onToggleLegendSeries, onEnsureSeriesVisible, onHiddenSeriesChange, }: PerformanceChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/widgets/PerformanceChart/PerformanceTable.d.ts

@@ -0,0 +1,31 @@
+export interface ForecastModelData {
+    key: string;
+    mae: number;
+    mape: number;
+}
+export interface AdjustParameters {
+    procurementVolume: number;
+    variableRawMaterialCostShare: number;
+    controllableCosts: number;
+    currentForecastAccuracy: number;
+    expectedImprovement: number;
+    analystHourlyRate: number;
+}
+interface PerformanceTableProps {
+    forecastModels: ForecastModelData[];
+    adjustParameters: AdjustParameters;
+    onAdjustParametersChange: (params: AdjustParameters) => void;
+    /** Shown when custom spaghetti matrix is saved (localStorage). Metrics vs historical for selected horizon. */
+    customPerformance?: {
+        label: string;
+        mae: number;
+        mape: number;
+    } | null;
+    /** Opens custom performance dialog; used by the custom row edit control. */
+    onEditCustomPerformance?: () => void;
+    /** Last row with Add custom data (hidden when custom row already present); per-horizon + spaghetti. */
+    showAddEditCustomDataButton?: boolean;
+    addEditCustomDataDisabled?: boolean;
+}
+export declare function PerformanceTable({ forecastModels, adjustParameters, onAdjustParametersChange, customPerformance, onEditCustomPerformance, showAddEditCustomDataButton, addEditCustomDataDisabled, }: PerformanceTableProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/widgets/PerformanceChart/PerformanceUnderChartLegend/PerformanceUnderChartLegend.d.ts

@@ -0,0 +1,20 @@
+export type PerformanceUnderChartLegendRowProps = {
+    label: React.ReactNode;
+    /** Line color (CSS color string). */
+    lineColor: string;
+    /** Historical uses solid bar; forecast lines use dashed preview. */
+    lineStyle?: 'solid' | 'dashed';
+    hidden: boolean;
+    onToggle?: () => void;
+};
+export type PerformanceUnderChartLegendItemConfig = PerformanceUnderChartLegendRowProps & {
+    id: string;
+};
+export declare function PerformanceUnderChartLegendRow({ label, lineColor, lineStyle, hidden, onToggle, }: PerformanceUnderChartLegendRowProps): import("react/jsx-runtime").JSX.Element;
+/** Renders rows from tab-agnostic config (labels + toggles supplied by parent). */
+export declare function PerformanceUnderChartLegendFromItems({ items, }: {
+    items: PerformanceUnderChartLegendItemConfig[];
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PerformanceUnderChartLegend({ children, }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/widgets/PerformanceChart/index.d.ts

@@ -0,0 +1,4 @@
+export { PerformanceChart, type PerformanceChartPayload, type PerformanceChartProps, type PerformanceViewTab, } from './PerformanceChart';
+export { type AdjustParameters, type ForecastModelData, PerformanceTable, } from './PerformanceTable';
+export { SPAGHETTI_DRIFT_PER_HORIZON_ID_BASE, SPAGHETTI_MODEL_PER_HORIZON_ID_BASE, averageForecastErrorsVsHistoricalForMatrixColumn, buildDriftSpaghettiMatrixForCustomDialog, buildPerHorizonSpaghettiEntries, buildSpaghettiMergedChartData, calculateYRangeFromChartData, getForecastModelDisplayName, spaghettiGridFromHistoricalPreviousMonth, } from './performanceChart.helpers';
+export { SPAGHETTI_LOCAL_LS_USER_SERIES_ROW_ID, SPAGHETTI_TIME_SERIES_MATRIX_V, tryParseSpaghettiPerformanceMatrix, type SpaghettiPerformanceMatrixPayload, } from './performanceChartUserSeries';

package/dist/esm/types/src/components/widgets/PerformanceChart/performanceChart.helpers.d.ts

@@ -0,0 +1,212 @@
+/**
+ * Helper functions for Performance Tab calculations
+ * Note: ROI/calculatons.ts is only for reference/example
+ */
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import type { ForecastData } from '#uilib/types/forecast-data';
+import type { SpaghettiPerformanceMatrixPayload } from './performanceChartUserSeries';
+export type RealBacktestsEntry = {
+    forecast_start: string;
+    forecast_end: string;
+    forecast_series: Record<string, number>;
+};
+/** Legacy: API backtest spaghetti lines used `SPAGHETTI_FORECAST_ID_BASE + i` (spaghetti view now uses drift per-horizon instead). */
+export declare const SPAGHETTI_FORECAST_ID_BASE = 6000;
+/** Model PER_HORIZON_TO_SPAGHETTI lines use `SPAGHETTI_MODEL_PER_HORIZON_ID_BASE + i`. */
+export declare const SPAGHETTI_MODEL_PER_HORIZON_ID_BASE = 7000;
+/** Drift PER_HORIZON_TO_SPAGHETTI lines use `SPAGHETTI_DRIFT_PER_HORIZON_ID_BASE + i`. */
+export declare const SPAGHETTI_DRIFT_PER_HORIZON_ID_BASE = 8000;
+export declare function isSpaghettiModelPerHorizonLineId(id: number): boolean;
+export declare function isSpaghettiDriftPerHorizonLineId(id: number): boolean;
+/**
+ * Converts `performance.model` / `performance.drift` per-horizon forecasts into synthetic
+ * backtest-shaped entries: each line is [horizon_1[i], …, horizon_n[i]] as date→value points
+ * (aligned by sorted key index per horizon).
+ */
+export declare function buildPerHorizonSpaghettiEntries(forecastRoot: {
+    forecasts?: Record<string, Record<string, number>>;
+} | null | undefined, horizonKeys: string[]): RealBacktestsEntry[];
+/**
+ * Same row alignment as {@link buildPerHorizonSpaghettiEntries}: row `i` uses each horizon's
+ * i-th sorted forecast month; `dates[i]` is horizon_1's month at that row (Date column).
+ * Use this for custom dialog seed + “copy statistical baseline (drift)” prefill.
+ */
+export declare function buildDriftSpaghettiMatrixForCustomDialog(driftRoot: {
+    forecasts?: Record<string, Record<string, number>>;
+} | null | undefined, horizonKeys: string[]): {
+    dates: string[];
+    grid: number[][];
+    perHorizonDates: string[][];
+} | null;
+/**
+ * Prefill for custom performance when copying drift layout: each spaghetti row is flat at the
+ * historical value for the month before the earliest forecast month in that row (same anchor as
+ * chart connection-point logic).
+ */
+export declare function spaghettiGridFromHistoricalPreviousMonth(perHorizonDates: string[][], horizonCount: number, historicalByDate: Map<string, number>): number[][];
+/** Mean absolute error / MAPE vs historical for one horizon column of a spaghetti matrix (aligned by month). */
+export declare function averageForecastErrorsVsHistoricalForMatrixColumn(matrix: SpaghettiPerformanceMatrixPayload, horizonColumnIndex: number, historicalByDate: Map<string, number>): {
+    mae: number;
+    mape: number;
+} | null;
+/** @deprecated Use {@link buildPerHorizonSpaghettiEntries} (same implementation). */
+export declare const buildModelPerHorizonSpaghettiEntries: typeof buildPerHorizonSpaghettiEntries;
+export declare function mergeSpaghettiMergedBases(a: {
+    mergedData: ChartDataPoint[];
+    seriesMeta: {
+        id: number;
+        label: string;
+    }[];
+}, b: {
+    mergedData: ChartDataPoint[];
+    seriesMeta: {
+        id: number;
+        label: string;
+    }[];
+}): {
+    mergedData: ChartDataPoint[];
+    seriesMeta: {
+        id: number;
+        label: string;
+    }[];
+};
+export declare function buildSpaghettiMergedChartData(entries: RealBacktestsEntry[], historicalChartData: ChartDataPoint[], idBase?: number): {
+    mergedData: ChartDataPoint[];
+    seriesMeta: {
+        id: number;
+        label: string;
+    }[];
+};
+/** Appends forecast-backed user series (from dataset context) onto spaghetti backtest lines. */
+export declare function mergeSpaghettiUserSeriesFromForecastData(base: {
+    mergedData: ChartDataPoint[];
+    seriesMeta: {
+        id: number;
+        label: string;
+    }[];
+}, userSeries: {
+    id: number;
+    name?: string;
+}[], forecastData: Record<string, ForecastData>): {
+    mergedData: ChartDataPoint[];
+    seriesMeta: {
+        id: number;
+        label: string;
+    }[];
+};
+export declare function filterChartDataLast24Months(data: ChartDataPoint[], months: number): ChartDataPoint[];
+/**
+ * Spaghetti chart x-range: from two months before the earliest forecast_start
+ * (per-horizon synthetic entries + mergeable user forecast series), inclusive.
+ * Falls back to last N months when no forecast candidates exist.
+ *
+ * When `historicalWindowFloor` is set (e.g. first month of per-horizon `filtered24mData`),
+ * the range start is floored to that month so the historical line matches the per-horizon tab.
+ *
+ * When `historicalWindowCeiling` is set (e.g. last month of `filtered24mData`), drops points after
+ * that month so spaghetti X matches per-horizon (per-horizon chart trims forecasts past last historical).
+ */
+export declare function filterSpaghettiDataFromEarliestForecastStart(mergedData: ChartDataPoint[], entries: RealBacktestsEntry[], userSeries: {
+    id: number;
+    name?: string;
+}[], forecastData: Record<string, ForecastData>, 
+/** Series meta from the first merged batch (e.g. drift) — used to skip duplicate user-series ids. */
+firstBatchSeriesMeta: {
+    id: number;
+    label: string;
+}[], fallbackMonths: number, extraForecastCandidates?: RealBacktestsEntry[], historicalWindowFloor?: string | null, historicalWindowCeiling?: string | null): ChartDataPoint[];
+/**
+ * Ensure each spaghetti row has `historical` from {@link historicalChartData} when that month
+ * falls in the filtered window — matches per-horizon chart (actuals line), and fills months that
+ * exist in history but were missing after merge/filter.
+ */
+export declare function mergeHistoricalIntoSpaghettiChartData(filteredRows: ChartDataPoint[], historicalChartData: ChartDataPoint[]): ChartDataPoint[];
+/**
+ * Calculate Accuracy: 100% - MAPE
+ * @param mape - MAPE value as decimal (e.g., 0.0436 for 4.36%)
+ * @returns Accuracy percentage
+ */
+export declare function calculateAccuracy(mape: number): number;
+/**
+ * Format Accuracy as percentage
+ * @param value - Accuracy value
+ * @returns Formatted accuracy string (e.g., "97%")
+ */
+export declare function formatAccuracy(value: number): string;
+/**
+ * Format Error as "$/Ton"
+ * @param mae - MAE value from metrics_summary.24m.mae
+ * @returns Formatted error string (e.g., "0.05$/Ton")
+ */
+export declare function formatError(mae: number): string;
+/**
+ * Calculate ROI
+ * Reference: ROI/calculatons.ts for example logic
+ * @param totalBenefit - Total annual benefit
+ * @param operatingCost - Annual operating cost
+ * @returns ROI percentage
+ */
+export declare function calculateROI(totalBenefit: number, operatingCost: number): number;
+/**
+ * Calculate ROI Multiple
+ * Formula: ROI Multiple = ROI / 100
+ * Where ROI = (AB - IC) / IC × 100
+ * @param totalBenefit - Total annual benefit (AB)
+ * @param operatingCost - Annual operating cost (IC)
+ * @returns ROI multiple (e.g., 1.0 for 100% ROI, 2.0 for 200% ROI)
+ */
+export declare function calculateROIMultiple(totalBenefit: number, operatingCost: number): number;
+/**
+ * Format ROI as multiplier (xN format)
+ * Formula: ROI Multiple = ROI / 100
+ * Examples: 100% ROI = x1, 200% ROI = x2, 0% ROI = x0
+ * Note: Negative ROI (when benefit < cost) is displayed as x1
+ * @param totalBenefit - Total annual benefit (AB)
+ * @param operatingCost - Annual operating cost (IC)
+ * @returns Formatted ROI string (e.g., "x1.5")
+ */
+export declare function formatROI(totalBenefit: number, operatingCost: number): string;
+/**
+ * Calculate Benefit p/a
+ * Formula: Annual Benefit = PV × V × C × PI
+ * Where:
+ * - PV = Procurement Volume
+ * - V = Variable Raw Material Share (as decimal)
+ * - C = Controllable Cost Share (as decimal)
+ * - PI = Price Improvement = |FA_new - FA_current| × 0.2 (correlation factor)
+ * @param mae - MAE value (not used in calculation, kept for backward compatibility)
+ * @param mape - MAPE value (used to calculate actual forecast accuracy)
+ * @param adjustParams - Adjust parameters from dialog
+ * @param baselineAccuracy - Optional baseline accuracy for comparison (if provided, uses actual improvement)
+ * @returns Benefit per annum
+ */
+export declare function calculateBenefit(mae: number, mape: number, adjustParams: {
+    procurementVolume: number;
+    variableRawMaterialCostShare: number;
+    controllableCosts: number;
+    currentForecastAccuracy: number;
+    expectedImprovement: number;
+    analystHourlyRate: number;
+}, baselineAccuracy?: number): number;
+/**
+ * Format Benefit as euros
+ * @param value - Benefit value
+ * @returns Formatted benefit string (e.g., "€616.640")
+ */
+export declare function formatBenefit(value: number): string;
+/**
+ * Map forecast model key to display name
+ * @param key - Forecast model key (e.g., "mean", "drift", "seasonal")
+ * @returns Display name (e.g., "Mean", "Drift", "Seasonal")
+ */
+export declare function getForecastModelDisplayName(key: string): string;
+/**
+ * Calculate Y range (min/max) from chart data points
+ * Extracts all numeric values from chart data points and calculates min/max with padding
+ * @param chartData - Array of chart data points
+ * @returns Object with yMin and yMax values
+ */
+export declare function calculateYRangeFromChartData(chartData: Array<Record<string, unknown>>): {
+    yMin: number;
+    yMax: number;
+};

package/dist/esm/types/src/components/widgets/PerformanceChart/performanceChartUserSeries.d.ts

@@ -0,0 +1,20 @@
+import type { ForecastData } from '#uilib/types/forecast-data';
+export declare const SPAGHETTI_TIME_SERIES_MATRIX_V: 2;
+export interface SpaghettiPerformanceMatrixPayload {
+    v: typeof SPAGHETTI_TIME_SERIES_MATRIX_V;
+    dates: string[];
+    horizonKeys: string[];
+    grid: number[][];
+    perHorizonDates?: string[][];
+}
+export declare const SPAGHETTI_MATRIX_SYNTHETIC_BASE = 9800000;
+export declare const SPAGHETTI_MATRIX_MAX_COLS = 128;
+export declare const SPAGHETTI_LOCAL_LS_USER_SERIES_ROW_ID = 9000001;
+export declare function spaghettiMatrixSyntheticId(userSeriesRowId: number, horizonIndex: number): number;
+export declare function isSpaghettiMatrixSyntheticLineId(id: number): boolean;
+export declare function getCustomMatrixSeriesForHorizonTab(matrix: SpaghettiPerformanceMatrixPayload, horizonKey: string, rowId: number, forecastData: Record<string, ForecastData> | undefined): {
+    lineId: number;
+    dates: string[];
+    forecastValues: number[];
+} | null;
+export declare function tryParseSpaghettiPerformanceMatrix(parsed: unknown): SpaghettiPerformanceMatrixPayload | null;

package/dist/esm/types/src/docs/pages/DriversComparisonChartPage.d.ts

@@ -0,0 +1 @@
+export default function DriversComparisonChartPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/docs/pages/PerformanceChartPage.d.ts

@@ -0,0 +1 @@
+export default function PerformanceChartPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/index.d.ts

@@ -68,6 +68,8 @@ export * from './components/ui/WorkspaceAppSwitcher';
 export * from './components/widgets/SidebarDatasetsItemsGrouped';
 export * from './components/widgets/DriverCard';
 export * from './components/widgets/DriverMap';
+export * from './components/widgets/DriversComparisonChart';
+export * from './components/widgets/PerformanceChart';
 export * from './components/widgets/SybilionAppHeader';
 export * from './components/widgets/SybilionAuthLayout';
 export * from './components/widgets/SybilionSignInPanel';

package/dist/esm/utils/chartConnectionPoint.js

@@ -101,5 +101,13 @@ function getPreviousMonth(date) {
     d.setMonth(d.getMonth() - 1);
     return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-01`;
 }
+/**
+ * Get the next month date (first day of next month)
+ */
+function getNextMonth(date) {
+    const d = new Date(date);
+    d.setMonth(d.getMonth() + 1);
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-01`;
+}
 
-export { ensureChartForecastBridge, findLastValidHistoricalChartPoint, getPreviousMonth, normalizeToMonthStart };
+export { ensureChartForecastBridge, findLastValidHistoricalChartPoint, getNextMonth, getPreviousMonth, normalizeToMonthStart };

package/package.json

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

package/src/components/widgets/DriversComparisonChart/DriversComparisonChart.styl

@@ -0,0 +1,145 @@
+@import '../../../lib/theme.styl';
+
+.root
+  display flex
+  flex-direction column
+  gap var(--p-4)
+  width 100%
+
+.chartShell
+  position relative
+  width 100%
+
+.chartShellLoading
+  .chartSlot
+    opacity 0.3
+    pointer-events none
+
+  :global(.recharts-line-dots)
+    display none
+
+.chartSlot
+  width 100%
+
+.loadingLayer
+  position absolute
+  inset 0
+  z-index 10
+  pointer-events none
+
+.loadingMessage
+  position absolute
+  z-index 1
+  top calc(50% - 4em)
+  left 0
+  width 100%
+  display block
+  text-align center
+  color var(--foreground)
+
+.loadingText
+  font-size 16px
+  font-weight 500
+  color var(--foreground)
+  border-radius var(--p-4)
+  padding 0 var(--p-3)
+  backdrop-filter blur(10px)
+  box-shadow 0 0 0 2px var(--page-color)
+
+.chartWithOverlay
+  position relative
+  width 100%
+
+.chartInteractiveLayer
+  width 100%
+  transition opacity 0.2s ease-out
+
+.chartInteractiveDimmed
+  opacity 0.3
+  pointer-events none
+
+  :global(.recharts-line-dots)
+    display none
+
+.chartEmptyOverlay
+  position absolute
+  inset 0
+  z-index 6
+  display flex
+  align-items center
+  justify-content center
+  padding var(--p-4)
+  pointer-events none
+
+.chartEmptyBlurb
+  max-width 42rem
+  padding 0 var(--p-3)
+
+.seriesEmptyWrap
+  display flex
+  justify-content center
+  padding var(--p-8) var(--p-4)
+
+.seriesSection
+  width 100%
+
+.seriesTableWrapper
+  position relative
+  margin 0 calc(var(--page-x-padding) * -1)
+
+.seriesTableContainer
+  position relative
+  width 100%
+  overflow-x auto
+
+.seriesScrollbar
+  bottom calc(var(--p-7) * -1 + 2px) !important
+
+.seriesTable
+  table-layout auto
+  width 100%
+  max-width 100%
+
+  tr
+    position relative
+    cursor pointer
+
+  td
+  th
+    &:not(:first-child)
+      text-align right
+
+.seriesColSeries
+  text-align left
+  vertical-align middle
+
+.rowHidden
+  opacity .4
+
+.colorSwatch
+  display inline-flex
+  flex-shrink 0
+  width 10px
+  height 10px
+  margin-right var(--p-2)
+  border-radius 2px
+
+.seriesLabel
+  min-width 0
+  max-width 60vw
+  padding var(--p-2) 0
+  line-clamp(3)
+  white-space break-spaces
+
+.chartContainer
+  margin-left calc(-1 * var(--page-x-padding) + 26px)
+  width calc(100% + 60px)
+  max-width @width
+  transition opacity 300ms ease-out
+
+  :global(.recharts-yAxis-tick-labels)
+    display none
+
+  @media (max-width: unit(MOBILE, 'px'))
+    margin-left calc(-1 * var(--page-x-padding) + 10px)
+    width calc(100% + 30px)

package/src/components/widgets/DriversComparisonChart/DriversComparisonChart.styl.d.ts

@@ -0,0 +1,29 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'chartContainer': string;
+  'chartEmptyBlurb': string;
+  'chartEmptyOverlay': string;
+  'chartInteractiveDimmed': string;
+  'chartInteractiveLayer': string;
+  'chartShell': string;
+  'chartShellLoading': string;
+  'chartSlot': string;
+  'chartWithOverlay': string;
+  'colorSwatch': string;
+  'loadingLayer': string;
+  'loadingMessage': string;
+  'loadingText': string;
+  'root': string;
+  'rowHidden': string;
+  'seriesColSeries': string;
+  'seriesEmptyWrap': string;
+  'seriesLabel': string;
+  'seriesScrollbar': string;
+  'seriesSection': string;
+  'seriesTable': string;
+  'seriesTableContainer': string;
+  'seriesTableWrapper': string;
+}
+export const cssExports: CssExports;
+export default cssExports;