@sybilion/uilib 1.3.22 → 1.3.25

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

@@ -0,0 +1,139 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import { ChartEmptyState } from '../../ui/Chart/components/ChartEmptyState/ChartEmptyState.js';
+import { ChartAreaInteractive } from '../../ui/ChartAreaInteractive/ChartAreaInteractive.js';
+import { getForecastColor } from '../../ui/ChartAreaInteractive/ChartLines.js';
+import '../../ui/Page/AppShell/AppShell.js';
+import 'react-router-dom';
+import '../../ui/Sidebar/Sidebar.js';
+import 'lucide-react';
+import '../../ui/Page/Breadcrumbs/Breadcrumbs.styl.js';
+import '../../ui/Page/pageContext.js';
+import '@radix-ui/react-tooltip';
+import '../../ui/Tooltip/Tooltip.styl.js';
+import '../../ui/Page/PageHeader/PageHeader.styl.js';
+import '../../ui/Page/PageEmptyCanvas/PageEmptyCanvas.styl.js';
+import '../../ui/Page/PageContent/PageContent.styl.js';
+import '@homecode/ui';
+import '../../ui/Page/PageScroll/PageScroll.styl.js';
+import { PageXScroll } from '../../ui/Page/PageXScroll/PageXScroll.js';
+import '../../ui/Page/PageFooter/PageFooter.styl.js';
+import '@radix-ui/react-tabs';
+import '../../ui/Tabs/Tabs.styl.js';
+import '../../ui/Page/PageTabs/PageTabs.styl.js';
+import '../../ui/Page/PageColumns/PageColumns.styl.js';
+import '../../ui/Page/SectionHeader/SectionHeader.styl.js';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../../ui/Table/Table.js';
+import { TextShimmer } from '../../ui/TextShimmer/TextShimmer.js';
+import { TIME_RANGES } from '../../ui/TimeRangeControls/TimeRangeControls.constants.js';
+import S from './DriversComparisonChart.styl.js';
+import { mergeBacktestsChartData, mergeDatasetHistoricalWithBacktestsChartData, DRIVER_FORECAST_ID_BASE, INITIAL_VISIBLE_SERIES_COUNT, buildDriversComparisonChartData, formatSeriesImportance } from './driversComparisonChart.helpers.js';
+
+const ALL_TIME_RANGE = TIME_RANGES[TIME_RANGES.length - 1];
+function toForecastDataKey(id) {
+    const s = String(id);
+    return s.startsWith('forecast_') ? s : `forecast_${id}`;
+}
+function DriversComparisonChart({ payload, datasetHistorical = [], loading = false, chartLoading = false, statusHint = null, statusTone = 'muted', runAnalysisHint = false, timeRange: timeRangeProp, onTimeRangeChange, isDarkTheme = false, className, seriesInitKey, }) {
+    const [internalTimeRange, setInternalTimeRange] = useState(ALL_TIME_RANGE);
+    const [hiddenSeries, setHiddenSeries] = useState(new Set());
+    const timeRange = timeRangeProp ?? internalTimeRange;
+    const handleTimeRangeChange = useCallback((val) => {
+        if (!val)
+            return;
+        onTimeRangeChange?.(val);
+        if (timeRangeProp === undefined) {
+            setInternalTimeRange(val);
+        }
+    }, [onTimeRangeChange, timeRangeProp]);
+    const toggleSeries = useCallback((id) => {
+        const key = toForecastDataKey(id);
+        setHiddenSeries(prev => {
+            const next = new Set(prev);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    }, []);
+    const showSeries = useCallback((id) => {
+        const key = toForecastDataKey(id);
+        setHiddenSeries(prev => {
+            if (!prev.has(key))
+                return prev;
+            const next = new Set(prev);
+            next.delete(key);
+            return next;
+        });
+    }, []);
+    const sortedDriversWithData = useMemo(() => {
+        const driversList = payload?.drivers ?? [];
+        if (!driversList.length)
+            return [];
+        return [...driversList]
+            .filter(d => d.normalized_series &&
+            Object.keys(d.normalized_series).some(key => d.normalized_series[key] != null))
+            .sort((a, b) => String(a.id).localeCompare(String(b.id)));
+    }, [payload?.drivers]);
+    const mergedChartData = useMemo(() => mergeBacktestsChartData(payload), [payload]);
+    const mergedWithHistorical = useMemo(() => mergeDatasetHistoricalWithBacktestsChartData(datasetHistorical, mergedChartData), [datasetHistorical, mergedChartData]);
+    const chartForecastData = useMemo(() => {
+        if (!payload?.target?.normalized_series)
+            return [];
+        return sortedDriversWithData.map((driver, idx) => ({
+            id: DRIVER_FORECAST_ID_BASE + idx,
+            name: driver.name || String(driver.id),
+            color: getForecastColor(idx + 1),
+        }));
+    }, [payload?.target?.normalized_series, sortedDriversWithData]);
+    const tableSeriesRows = useMemo(() => {
+        if (sortedDriversWithData.length === 0)
+            return [];
+        return sortedDriversWithData.map((driver, idx) => {
+            const raw = driver.importance;
+            const importance = typeof raw === 'number' && Number.isFinite(raw) ? raw : null;
+            return {
+                id: DRIVER_FORECAST_ID_BASE + idx,
+                name: driver.name || String(driver.id),
+                color: getForecastColor(idx + 1),
+                importance,
+                lag: driver.lag,
+            };
+        });
+    }, [sortedDriversWithData]);
+    const seriesInitKeyResolved = seriesInitKey ?? `${tableSeriesRows.map(r => r.id).join(',') || 'none'}`;
+    const backtestsSeriesInitKeyRef = useRef('');
+    useEffect(() => {
+        if (tableSeriesRows.length === 0)
+            return;
+        const initKey = seriesInitKeyResolved;
+        if (backtestsSeriesInitKeyRef.current === initKey)
+            return;
+        backtestsSeriesInitKeyRef.current = initKey;
+        setHiddenSeries(() => {
+            const next = new Set();
+            tableSeriesRows.forEach((row, idx) => {
+                const key = toForecastDataKey(row.id);
+                if (idx >= INITIAL_VISIBLE_SERIES_COUNT) {
+                    next.add(key);
+                }
+            });
+            return next;
+        });
+    }, [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, { 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: "Importance" }), jsx(TableHead, { children: "Lag" })] }) }), jsx(TableBody, { children: tableSeriesRows.map(row => {
+                                        const dataKey = toForecastDataKey(row.id);
+                                        const hidden = hiddenSeries.has(dataKey);
+                                        return (jsxs(TableRow, { className: cn(hidden && S.rowHidden), onClick: () => toggleSeries(row.id), children: [jsx(TableCell, { children: jsxs("span", { className: S.seriesLabel, children: [jsx("span", { className: S.colorSwatch, style: {
+                                                                    backgroundColor: row.color,
+                                                                } }), row.name ?? String(row.id)] }) }), jsx(TableCell, { children: formatSeriesImportance(row.importance) }), jsx(TableCell, { children: row.lag ?? '—' })] }, row.id));
+                                    }) })] }) }) })) })] }));
+}
+
+export { DriversComparisonChart };

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

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.DriversComparisonChart_root__GLnlF{display:flex;flex-direction:column;gap:var(--p-4);width:100%}.DriversComparisonChart_chartShell__0AzAz{position:relative;width:100%}.DriversComparisonChart_chartShellLoading__wTLod .DriversComparisonChart_chartSlot__WKe6N{opacity:.3;pointer-events:none}.DriversComparisonChart_chartShellLoading__wTLod .recharts-line-dots{display:none}.DriversComparisonChart_chartSlot__WKe6N{width:100%}.DriversComparisonChart_loadingLayer__HlEmA{inset:0;pointer-events:none;position:absolute;z-index:10}.DriversComparisonChart_loadingMessage__Li3S7{color:var(--foreground);display:block;left:0;position:absolute;text-align:center;top:calc(50% - 4em);width:100%;z-index:1}.DriversComparisonChart_loadingText__0y3Ms{backdrop-filter:blur(10px);border-radius:var(--p-4);box-shadow:0 0 0 2px var(--page-color);color:var(--foreground);font-size:16px;font-weight:500;padding:0 var(--p-3)}.DriversComparisonChart_chartWithOverlay__SMToK{position:relative;width:100%}.DriversComparisonChart_chartInteractiveLayer__0aquh{transition:opacity .2s ease-out;width:100%}.DriversComparisonChart_chartInteractiveDimmed__us1dv{opacity:.3;pointer-events:none}.DriversComparisonChart_chartInteractiveDimmed__us1dv .recharts-line-dots{display:none}.DriversComparisonChart_chartEmptyOverlay__eXqzk{align-items:center;display:flex;inset:0;justify-content:center;padding:var(--p-4);pointer-events:none;position:absolute;z-index:6}.DriversComparisonChart_chartEmptyBlurb__Tjy9E{max-width:42rem;padding:0 var(--p-3)}.DriversComparisonChart_seriesEmptyWrap__RyRs5{display:flex;justify-content:center;padding:var(--p-8) var(--p-4)}.DriversComparisonChart_seriesSection__yrf4I{width:100%}.DriversComparisonChart_seriesTableWrapper__oredC{margin:0 calc(var(--page-x-padding)*-1);position:relative}.DriversComparisonChart_seriesTableContainer__dhfXK{overflow-x:auto;position:relative;width:100%}.DriversComparisonChart_seriesScrollbar__2jgk6{bottom:calc(var(--p-7)*-1 + 2px)!important}.DriversComparisonChart_seriesTable__NybPR{max-width:100%;table-layout:auto;width:100%}.DriversComparisonChart_seriesTable__NybPR tr{cursor:pointer;position:relative}.DriversComparisonChart_seriesTable__NybPR td:not(:first-child),.DriversComparisonChart_seriesTable__NybPR th:not(:first-child){text-align:right}.DriversComparisonChart_seriesColSeries__--0mj{text-align:left;vertical-align:middle}.DriversComparisonChart_rowHidden__Fwhna{opacity:.4}.DriversComparisonChart_colorSwatch__o3ZVr{border-radius:2px;display:inline-flex;flex-shrink:0;height:10px;margin-right:var(--p-2);width:10px}.DriversComparisonChart_seriesLabel__Aidof{display:-webkit-box;-webkit-line-clamp:3;max-width:60vw;min-width:0;padding:var(--p-2) 0;-webkit-box-orient:vertical;white-space:break-spaces}.DriversComparisonChart_chartContainer__1eM-O{margin-left:calc(var(--page-x-padding)*-1 + 26px);max-width:calc(100% + 60px);transition:opacity .3s ease-out;width:calc(100% + 60px)}.DriversComparisonChart_chartContainer__1eM-O .recharts-yAxis-tick-labels{display:none}@media (max-width:768px){.DriversComparisonChart_chartContainer__1eM-O{margin-left:calc(var(--page-x-padding)*-1 + 10px);width:calc(100% + 30px)}}";
+var S = {"root":"DriversComparisonChart_root__GLnlF","chartShell":"DriversComparisonChart_chartShell__0AzAz","chartShellLoading":"DriversComparisonChart_chartShellLoading__wTLod","chartSlot":"DriversComparisonChart_chartSlot__WKe6N","loadingLayer":"DriversComparisonChart_loadingLayer__HlEmA","loadingMessage":"DriversComparisonChart_loadingMessage__Li3S7","loadingText":"DriversComparisonChart_loadingText__0y3Ms","chartWithOverlay":"DriversComparisonChart_chartWithOverlay__SMToK","chartInteractiveLayer":"DriversComparisonChart_chartInteractiveLayer__0aquh","chartInteractiveDimmed":"DriversComparisonChart_chartInteractiveDimmed__us1dv","chartEmptyOverlay":"DriversComparisonChart_chartEmptyOverlay__eXqzk","chartEmptyBlurb":"DriversComparisonChart_chartEmptyBlurb__Tjy9E","seriesEmptyWrap":"DriversComparisonChart_seriesEmptyWrap__RyRs5","seriesSection":"DriversComparisonChart_seriesSection__yrf4I","seriesTableWrapper":"DriversComparisonChart_seriesTableWrapper__oredC","seriesTableContainer":"DriversComparisonChart_seriesTableContainer__dhfXK","seriesScrollbar":"DriversComparisonChart_seriesScrollbar__2jgk6","seriesTable":"DriversComparisonChart_seriesTable__NybPR","seriesColSeries":"DriversComparisonChart_seriesColSeries__--0mj","rowHidden":"DriversComparisonChart_rowHidden__Fwhna","colorSwatch":"DriversComparisonChart_colorSwatch__o3ZVr","seriesLabel":"DriversComparisonChart_seriesLabel__Aidof","chartContainer":"DriversComparisonChart_chartContainer__1eM-O"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -0,0 +1,159 @@
+import { normalizeToMonthStart, getPreviousMonth, getNextMonth } from '../../../utils/chartConnectionPoint.js';
+
+const DRIVER_FORECAST_ID_BASE = 8_000_000;
+const INITIAL_VISIBLE_SERIES_COUNT = 3;
+/** Months of historical context before the earliest forecast month (inclusive). */
+const DRIVER_COMPARISON_CHART_LEAD_MONTHS = 6;
+/** Ignore leading months where drivers are numerically zero (API often fills 0; lines look empty until real signal). */
+const DRIVER_FORECAST_NONZERO_EPS = 1e-9;
+function formatSeriesImportance(value) {
+    if (value === null)
+        return '—';
+    return `${value.toFixed(1)}%`;
+}
+function mergeBacktestsChartData(payload) {
+    if (!payload?.target?.normalized_series)
+        return [];
+    const norm = (d) => normalizeToMonthStart(d);
+    const map = new Map();
+    const targetSeries = payload.target.normalized_series;
+    Object.entries(targetSeries).forEach(([dateStr, val]) => {
+        if (val === null || val === undefined)
+            return;
+        const k = norm(dateStr);
+        const existing = map.get(k) ?? { date: k };
+        existing.historical = val;
+        map.set(k, existing);
+    });
+    if (payload.drivers?.length) {
+        const sorted = [...payload.drivers]
+            .filter(d => d.normalized_series &&
+            Object.keys(d.normalized_series).some(key => d.normalized_series[key] != null))
+            .sort((a, b) => String(a.id).localeCompare(String(b.id)));
+        sorted.forEach((driver, idx) => {
+            const fid = DRIVER_FORECAST_ID_BASE + idx;
+            const series = driver.normalized_series;
+            Object.entries(series).forEach(([dateStr, val]) => {
+                if (val === null || val === undefined)
+                    return;
+                const k = norm(dateStr);
+                const existing = map.get(k) ?? { date: k };
+                existing[`forecast_${fid}`] = val;
+                map.set(k, existing);
+            });
+        });
+    }
+    return Array.from(map.values()).sort((a, b) => a.date.localeCompare(b.date));
+}
+/** While drivers comparison is not loaded: dataset historical only. After load: normalized historical from target.normalized_series (see mergeBacktestsChartData) replaces it. */
+function mergeDatasetHistoricalWithBacktestsChartData(datasetHistorical, backtestsMerged) {
+    if (backtestsMerged.length === 0) {
+        if (datasetHistorical.length === 0)
+            return [];
+        return datasetHistorical
+            .map(p => {
+            const k = normalizeToMonthStart(p.date);
+            const histVal = p.historical;
+            return {
+                date: k,
+                ...(typeof histVal === 'number' ? { historical: histVal } : {}),
+            };
+        })
+            .sort((a, b) => a.date.localeCompare(b.date));
+    }
+    return backtestsMerged;
+}
+/** Lower-median of ISO month strings (YYYY-MM-01 sorts lexicographically). */
+function medianSortedIsoMonth(months) {
+    const s = [...months].sort((a, b) => a.localeCompare(b));
+    return s[Math.floor((s.length - 1) / 2)];
+}
+/**
+ * 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.)
+ */
+function getZoomAnchorMonthFromDriverMaterialStarts(points, forecastIds) {
+    const perDriverFirstMaterial = [];
+    for (const id of forecastIds) {
+        let minForId = null;
+        for (const p of points) {
+            const v = p[`forecast_${id}`];
+            if (typeof v !== 'number' ||
+                !Number.isFinite(v) ||
+                Math.abs(v) <= DRIVER_FORECAST_NONZERO_EPS) {
+                continue;
+            }
+            const d = normalizeToMonthStart(p.date);
+            if (minForId === null || d.localeCompare(minForId) < 0)
+                minForId = d;
+        }
+        if (minForId === null) {
+            return { anchor: null, perDriverFirstMaterial };
+        }
+        perDriverFirstMaterial.push(minForId);
+    }
+    const anchor = medianSortedIsoMonth(perDriverFirstMaterial);
+    return { anchor, perDriverFirstMaterial };
+}
+function subtractMonthsFromMonthStart(date, count) {
+    let result = date;
+    for (let i = 0; i < count; i++) {
+        result = getPreviousMonth(result);
+    }
+    return result;
+}
+/**
+ * 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.
+ */
+function prependHistoricalLeadFromDataset(points, datasetHistorical, xMin) {
+    if (points.length === 0)
+        return points;
+    const firstMonth = normalizeToMonthStart(points[0].date);
+    if (xMin.localeCompare(firstMonth) >= 0)
+        return points;
+    const rawByMonth = new Map();
+    for (const p of datasetHistorical) {
+        const k = normalizeToMonthStart(p.date);
+        const v = p.historical;
+        if (typeof v === 'number' && Number.isFinite(v))
+            rawByMonth.set(k, v);
+    }
+    const histFirst = points[0].historical;
+    const rawFirst = rawByMonth.get(firstMonth);
+    if (typeof histFirst !== 'number' ||
+        !Number.isFinite(histFirst) ||
+        typeof rawFirst !== 'number' ||
+        !Number.isFinite(rawFirst) ||
+        Math.abs(rawFirst) <= 1e-15) {
+        return points;
+    }
+    const lead = [];
+    let m = xMin;
+    while (m.localeCompare(firstMonth) < 0) {
+        const rawM = rawByMonth.get(m);
+        if (typeof rawM === 'number' && Number.isFinite(rawM)) {
+            lead.push({
+                date: m,
+                historical: histFirst * (rawM / rawFirst),
+            });
+        }
+        m = getNextMonth(m);
+    }
+    return [...lead, ...points];
+}
+function buildDriversComparisonChartData(mergedWithHistorical, datasetHistorical, forecastIds) {
+    if (mergedWithHistorical.length === 0)
+        return mergedWithHistorical;
+    if (forecastIds.length === 0)
+        return mergedWithHistorical;
+    const { anchor: anchorMonth } = getZoomAnchorMonthFromDriverMaterialStarts(mergedWithHistorical, forecastIds);
+    if (anchorMonth === null)
+        return mergedWithHistorical;
+    const xMin = subtractMonthsFromMonthStart(anchorMonth, DRIVER_COMPARISON_CHART_LEAD_MONTHS);
+    const withLead = prependHistoricalLeadFromDataset(mergedWithHistorical, datasetHistorical, xMin);
+    return withLead.filter(p => normalizeToMonthStart(p.date) >= xMin);
+}
+
+export { DRIVER_COMPARISON_CHART_LEAD_MONTHS, DRIVER_FORECAST_ID_BASE, INITIAL_VISIBLE_SERIES_COUNT, buildDriversComparisonChartData, formatSeriesImportance, getZoomAnchorMonthFromDriverMaterialStarts, mergeBacktestsChartData, mergeDatasetHistoricalWithBacktestsChartData, prependHistoricalLeadFromDataset, subtractMonthsFromMonthStart };

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

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Tabs, TabsList, TabsTrigger } from '../../../ui/Tabs/Tabs.js';
+import { useThrottledCallback } from '../../../../hooks/useThrottledCallback.js';
+import S from './HorizonsSelector.styl.js';
+
+function HorizonsSelector({ selectedHorizon, onHorizonChange, availableHorizons, }) {
+    const horizons = useMemo(() => {
+        return availableHorizons
+            .sort((a, b) => {
+            // Sort by horizon number: horizon_1, horizon_2, etc.
+            const numA = parseInt(a.replace('horizon_', ''), 10);
+            const numB = parseInt(b.replace('horizon_', ''), 10);
+            return numA - numB;
+        })
+            .map(horizon => {
+            const num = horizon.replace('horizon_', '');
+            return {
+                value: horizon,
+                label: num,
+            };
+        });
+    }, [availableHorizons]);
+    const onChangeThrottled = useThrottledCallback(onHorizonChange, 300);
+    if (horizons.length === 0) {
+        return null;
+    }
+    return (jsxs("div", { className: S.root, children: [jsx("span", { className: S.horizonsLabel, children: "Planning horizon in months:" }), jsx(Tabs, { value: selectedHorizon, onValueChange: onHorizonChange, variant: "button", children: jsx(TabsList, { children: horizons.map(horizon => (jsx(TabsTrigger, { value: horizon.value, onPointerMove: () => {
+                            if (selectedHorizon !== horizon.value)
+                                onChangeThrottled(horizon.value);
+                        }, children: horizon.label }, horizon.value))) }) })] }));
+}
+
+export { HorizonsSelector };

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

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.HorizonsSelector_root__r5vAR{align-items:center;display:flex;flex-grow:1;gap:var(--p-4);justify-content:flex-end}.HorizonsSelector_horizonsLabel__-OzSL{color:var(--foreground);font-size:14px;font-weight:500}.HorizonsSelector_horizonsButtons__Z0aVg{display:flex;gap:var(--p-2)}.HorizonsSelector_horizonButton__YYpIJ{min-width:40px}.HorizonsSelector_infoIcon__7p03J{font-size:12px;margin-left:4px;opacity:.6}";
+var S = {"root":"HorizonsSelector_root__r5vAR","horizonsLabel":"HorizonsSelector_horizonsLabel__-OzSL","horizonsButtons":"HorizonsSelector_horizonsButtons__Z0aVg","horizonButton":"HorizonsSelector_horizonButton__YYpIJ","infoIcon":"HorizonsSelector_infoIcon__7p03J"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -0,0 +1,17 @@
+const MONTHS_24 = 24;
+const MONTH_NAMES = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+];
+
+export { MONTHS_24, MONTH_NAMES };