@sybilion/uilib 1.3.22 → 1.3.25

package/src/components/widgets/PerformanceChart/performanceChartUserSeries.ts

@@ -0,0 +1,149 @@
+import type { ForecastData } from '#uilib/types/forecast-data';
+import { normalizeToMonthStart } from '#uilib/utils/chartConnectionPoint';
+
+export const SPAGHETTI_TIME_SERIES_MATRIX_V = 2 as const;
+
+export interface SpaghettiPerformanceMatrixPayload {
+  v: typeof SPAGHETTI_TIME_SERIES_MATRIX_V;
+  dates: string[];
+  horizonKeys: string[];
+  grid: number[][];
+  perHorizonDates?: string[][];
+}
+
+export const SPAGHETTI_MATRIX_SYNTHETIC_BASE = 9_800_000;
+export const SPAGHETTI_MATRIX_MAX_COLS = 128;
+export const SPAGHETTI_LOCAL_LS_USER_SERIES_ROW_ID = 9_000_001;
+
+const PER_HORIZON_VIEW_CUSTOM_LINE_ID_BASE =
+  SPAGHETTI_MATRIX_SYNTHETIC_BASE + 4_000_000;
+
+export function spaghettiMatrixSyntheticId(
+  userSeriesRowId: number,
+  horizonIndex: number,
+): number {
+  return (
+    SPAGHETTI_MATRIX_SYNTHETIC_BASE +
+    userSeriesRowId * SPAGHETTI_MATRIX_MAX_COLS +
+    horizonIndex
+  );
+}
+
+export function isSpaghettiMatrixSyntheticLineId(id: number): boolean {
+  return id >= SPAGHETTI_MATRIX_SYNTHETIC_BASE;
+}
+
+function perHorizonViewCustomMatrixSyntheticId(colIdx: number): number {
+  return PER_HORIZON_VIEW_CUSTOM_LINE_ID_BASE + colIdx;
+}
+
+function matrixHasValidPerHorizonDates(
+  matrix: SpaghettiPerformanceMatrixPayload,
+): boolean {
+  const ph = matrix.perHorizonDates;
+  if (!ph || ph.length !== matrix.grid.length) return false;
+  const h = matrix.horizonKeys.length;
+  return ph.every(
+    (row, r) =>
+      Array.isArray(row) &&
+      row.length === h &&
+      row.length === matrix.grid[r].length,
+  );
+}
+
+export function getCustomMatrixSeriesForHorizonTab(
+  matrix: SpaghettiPerformanceMatrixPayload,
+  horizonKey: string,
+  rowId: number,
+  forecastData: Record<string, ForecastData> | undefined,
+): {
+  lineId: number;
+  dates: string[];
+  forecastValues: number[];
+} | null {
+  const colIdx = matrix.horizonKeys.indexOf(horizonKey);
+  if (colIdx < 0) return null;
+
+  if (matrixHasValidPerHorizonDates(matrix)) {
+    const ph = matrix.perHorizonDates!;
+    const dates: string[] = [];
+    const forecastValues: number[] = [];
+    for (let r = 0; r < matrix.grid.length; r++) {
+      const rawD = ph[r][colIdx];
+      const v = matrix.grid[r][colIdx];
+      if (typeof v !== 'number' || !Number.isFinite(v)) continue;
+      dates.push(
+        normalizeToMonthStart(typeof rawD === 'string' ? rawD : String(rawD)),
+      );
+      forecastValues.push(v);
+    }
+    if (dates.length === 0) return null;
+    return {
+      lineId: perHorizonViewCustomMatrixSyntheticId(colIdx),
+      dates,
+      forecastValues,
+    };
+  }
+
+  const lineId = spaghettiMatrixSyntheticId(rowId, colIdx);
+  const fd = forecastData?.[String(lineId)];
+  if (!fd?.dates?.length || fd.forecastValues.length !== fd.dates.length) {
+    return null;
+  }
+  return {
+    lineId,
+    dates: fd.dates,
+    forecastValues: fd.forecastValues,
+  };
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+export function tryParseSpaghettiPerformanceMatrix(
+  parsed: unknown,
+): SpaghettiPerformanceMatrixPayload | null {
+  if (!isRecord(parsed)) return null;
+  if (parsed.v !== SPAGHETTI_TIME_SERIES_MATRIX_V) return null;
+  const dates = parsed.dates;
+  const horizonKeys = parsed.horizonKeys;
+  const grid = parsed.grid;
+  if (
+    !Array.isArray(dates) ||
+    !Array.isArray(horizonKeys) ||
+    !Array.isArray(grid)
+  ) {
+    return null;
+  }
+  if (
+    dates.length === 0 ||
+    horizonKeys.length === 0 ||
+    grid.length !== dates.length
+  ) {
+    return null;
+  }
+  const h = horizonKeys.length;
+  if (!grid.every(row => Array.isArray(row) && row.length === h)) return null;
+  const perHorizonDates = parsed.perHorizonDates;
+  let ph: string[][] | undefined;
+  if (perHorizonDates !== undefined) {
+    if (
+      !Array.isArray(perHorizonDates) ||
+      perHorizonDates.length !== grid.length
+    ) {
+      return null;
+    }
+    ph = perHorizonDates.map(row => {
+      if (!Array.isArray(row) || row.length !== h) return [];
+      return row.map(d => String(d));
+    });
+  }
+  return {
+    v: SPAGHETTI_TIME_SERIES_MATRIX_V,
+    dates: dates.map(d => String(d)),
+    horizonKeys: horizonKeys.map(k => String(k)),
+    grid: grid.map(row => row.map(v => Number(v))),
+    ...(ph ? { perHorizonDates: ph } : {}),
+  };
+}

package/src/docs/pages/DriversComparisonChartPage.tsx

@@ -0,0 +1,174 @@
+import { useMemo, useState } from 'react';
+
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { Switch } from '#uilib/components/ui/Switch';
+import { TIME_RANGES } from '#uilib/components/ui/TimeRangeControls/TimeRangeControls.constants';
+import { DriversComparisonChart } from '#uilib/components/widgets/DriversComparisonChart';
+import { useTheme } from '#uilib/contexts/theme-context';
+import type { BacktestsComponentPayload } from '@sybilion/platform-sdk';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const ALL_TIME_RANGE = TIME_RANGES[TIME_RANGES.length - 1];
+
+function monthKey(year: number, month: number): string {
+  return `${year}-${String(month).padStart(2, '0')}-01`;
+}
+
+function buildMonthlySeries(
+  startYear: number,
+  startMonth: number,
+  count: number,
+  base: number,
+  drift = 0.08,
+  phase = 0,
+): Record<string, number> {
+  const out: Record<string, number> = {};
+  let y = startYear;
+  let m = startMonth;
+  for (let i = 0; i < count; i++) {
+    out[monthKey(y, m)] = base + Math.sin(i * 0.4 + phase) * 0.35 + i * drift;
+    m += 1;
+    if (m > 12) {
+      m = 1;
+      y += 1;
+    }
+  }
+  return out;
+}
+
+function buildTargetSeries(): Record<string, number> {
+  return buildMonthlySeries(2018, 1, 48, 1.0, 0.012, 0.2);
+}
+
+const MOCK_PAYLOAD: BacktestsComponentPayload = {
+  target: {
+    id: 'target',
+    name: 'Normalized target',
+    normalized_series: buildTargetSeries(),
+  },
+  drivers: [
+    {
+      id: 'driver-us-pmi',
+      name: 'U.S. manufacturing PMI composite',
+      importance: 84.2,
+      lag: '1 quarter(s)',
+      normalized_series: buildMonthlySeries(2019, 4, 42, 0.45, 0.015, 0),
+    },
+    {
+      id: 'driver-eu-orders',
+      name: 'German industrial orders (domestic + foreign)',
+      importance: 81.6,
+      lag: '2 month(s)',
+      normalized_series: buildMonthlySeries(2019, 1, 42, 0.52, -0.006, 1.1),
+    },
+    {
+      id: 'driver-jp-machinery',
+      name: 'Japan machinery orders (core private-sector)',
+      importance: 77,
+      lag: '~1 month(s)',
+      normalized_series: buildMonthlySeries(2019, 7, 42, 0.38, 0.01, 2.4),
+    },
+    {
+      id: 'driver-global-risk',
+      name: 'Global equity risk appetite composite',
+      importance: 66.5,
+      lag: 'Unknown',
+      normalized_series: buildMonthlySeries(2018, 10, 42, 0.41, 0.004, 3.8),
+    },
+    {
+      id: 'driver-china-credit',
+      name: 'China aggregate financing impulse',
+      importance: 58.3,
+      lag: '3 month(s)',
+      normalized_series: buildMonthlySeries(2020, 1, 36, 0.29, 0.018, 4.2),
+    },
+  ],
+};
+
+function buildDatasetHistorical(): ChartDataPoint[] {
+  const raw = buildMonthlySeries(2017, 7, 54, 112, 0.9, 0.5);
+  return Object.entries(raw).map(([date, historical]) => ({
+    date,
+    historical,
+  }));
+}
+
+export default function DriversComparisonChartPage() {
+  const { isDarkMode } = useTheme();
+  const [loading, setLoading] = useState(false);
+  const [runAnalysisHint, setRunAnalysisHint] = useState(false);
+  const [emptyPayload, setEmptyPayload] = useState(false);
+  const [timeRange, setTimeRange] = useState<string>(ALL_TIME_RANGE);
+
+  const payload = useMemo(
+    () => (emptyPayload ? null : MOCK_PAYLOAD),
+    [emptyPayload],
+  );
+  const datasetHistorical = useMemo(() => buildDatasetHistorical(), []);
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Drivers comparison chart' }]}
+        title="DriversComparisonChart"
+        subheader="Normalized target line with driver series; table rows toggle chart visibility."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            gap: 16,
+            marginBottom: 16,
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <Switch
+              id="loading-overlay"
+              checked={loading}
+              onCheckedChange={setLoading}
+            />
+            <label htmlFor="loading-overlay">Loading overlay</label>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <Switch
+              id="run-analysis-hint"
+              checked={runAnalysisHint}
+              onCheckedChange={setRunAnalysisHint}
+            />
+            <label htmlFor="run-analysis-hint">Run analysis hint</label>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <Switch
+              id="empty-payload"
+              checked={emptyPayload}
+              onCheckedChange={setEmptyPayload}
+            />
+            <label htmlFor="empty-payload">Empty payload</label>
+          </div>
+        </div>
+        <DriversComparisonChart
+          payload={payload}
+          datasetHistorical={datasetHistorical}
+          loading={loading}
+          chartLoading={false}
+          runAnalysisHint={runAnalysisHint}
+          statusHint={
+            emptyPayload
+              ? 'No normalized driver series in the response yet.'
+              : null
+          }
+          timeRange={timeRange}
+          onTimeRangeChange={setTimeRange}
+          isDarkTheme={isDarkMode}
+          seriesInitKey={emptyPayload ? 'empty' : 'mock'}
+        />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/PerformanceChartPage.tsx

@@ -0,0 +1,211 @@
+import { useMemo, useState } from 'react';
+
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { Switch } from '#uilib/components/ui/Switch';
+import {
+  PerformanceChart,
+  type PerformanceChartPayload,
+  SPAGHETTI_TIME_SERIES_MATRIX_V,
+} from '#uilib/components/widgets/PerformanceChart';
+import { useTheme } from '#uilib/contexts/theme-context';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+function monthKey(year: number, month: number): string {
+  return `${year}-${String(month).padStart(2, '0')}-01`;
+}
+
+function buildMonthlyHistorical(
+  startYear: number,
+  startMonth: number,
+  count: number,
+  base: number,
+): ChartDataPoint[] {
+  const out: ChartDataPoint[] = [];
+  let y = startYear;
+  let m = startMonth;
+  for (let i = 0; i < count; i++) {
+    out.push({
+      date: monthKey(y, m),
+      historical: base + Math.sin(i * 0.25) * 8 + i * 0.4,
+    });
+    m += 1;
+    if (m > 12) {
+      m = 1;
+      y += 1;
+    }
+  }
+  return out;
+}
+
+function buildHorizonForecasts(
+  horizonKey: string,
+  startYear: number,
+  startMonth: number,
+  count: number,
+  base: number,
+  drift: number,
+): Record<string, number> {
+  const out: Record<string, number> = {};
+  let y = startYear;
+  let m = startMonth;
+  for (let i = 0; i < count; i++) {
+    out[monthKey(y, m)] = base + Math.cos(i * 0.3 + drift) * 3 + i * 0.15;
+    m += 1;
+    if (m > 12) {
+      m = 1;
+      y += 1;
+    }
+  }
+  return out;
+}
+
+const MOCK_PERFORMANCE: PerformanceChartPayload = {
+  model: {
+    forecasts: {
+      horizon_1: buildHorizonForecasts('horizon_1', 2022, 1, 24, 112, 0),
+      horizon_2: buildHorizonForecasts('horizon_2', 2022, 1, 24, 112, 0.5),
+      horizon_3: buildHorizonForecasts('horizon_3', 2022, 1, 24, 112, 1),
+    },
+    metrics_history: {
+      horizon_1: {
+        mae: { '24m': 0.42 },
+        mape: { '24m': 0.038 },
+      },
+      horizon_2: {
+        mae: { '24m': 0.51 },
+        mape: { '24m': 0.045 },
+      },
+      horizon_3: {
+        mae: { '24m': 0.58 },
+        mape: { '24m': 0.052 },
+      },
+    },
+  },
+  drift: {
+    forecasts: {
+      horizon_1: buildHorizonForecasts('horizon_1', 2022, 1, 24, 112, 1.2),
+      horizon_2: buildHorizonForecasts('horizon_2', 2022, 1, 24, 112, 1.4),
+      horizon_3: buildHorizonForecasts('horizon_3', 2022, 1, 24, 112, 1.6),
+    },
+    metrics_history: {
+      horizon_1: {
+        mae: { '24m': 0.62 },
+        mape: { '24m': 0.055 },
+      },
+      horizon_2: {
+        mae: { '24m': 0.71 },
+        mape: { '24m': 0.061 },
+      },
+      horizon_3: {
+        mae: { '24m': 0.79 },
+        mape: { '24m': 0.068 },
+      },
+    },
+  },
+};
+
+export default function PerformanceChartPage() {
+  const { isDarkMode } = useTheme();
+  const [loading, setLoading] = useState(false);
+  const [runAnalysisHint, setRunAnalysisHint] = useState(false);
+  const [emptyPayload, setEmptyPayload] = useState(false);
+  const [timeRange, setTimeRange] = useState<string>('All');
+
+  const performanceData = useMemo(
+    () => (emptyPayload ? null : MOCK_PERFORMANCE),
+    [emptyPayload],
+  );
+  const historicalData = useMemo(
+    () => buildMonthlyHistorical(2020, 1, 48, 108),
+    [],
+  );
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Performance chart' }]}
+        title="PerformanceChart"
+        subheader="Per-horizon and spaghetti performance plots with linked metrics table."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            gap: 16,
+            marginBottom: 16,
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <Switch
+              id="loading-overlay"
+              checked={loading}
+              onCheckedChange={setLoading}
+            />
+            <label htmlFor="loading-overlay">Loading overlay</label>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <Switch
+              id="run-analysis-hint"
+              checked={runAnalysisHint}
+              onCheckedChange={setRunAnalysisHint}
+            />
+            <label htmlFor="run-analysis-hint">Run analysis hint</label>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <Switch
+              id="empty-payload"
+              checked={emptyPayload}
+              onCheckedChange={setEmptyPayload}
+            />
+            <label htmlFor="empty-payload">Empty payload</label>
+          </div>
+        </div>
+        <PerformanceChart
+          performanceData={performanceData}
+          historicalData={historicalData}
+          combinedData={historicalData}
+          loading={loading}
+          chartLoading={loading}
+          performanceSectionPending={loading}
+          performanceDataLoading={loading}
+          perfFetchSettled={!loading}
+          isEmpty={emptyPayload}
+          runAnalysisHint={runAnalysisHint}
+          statusHint={
+            emptyPayload ? 'No performance data for this dataset.' : null
+          }
+          timeRange={timeRange}
+          onTimeRangeChange={setTimeRange}
+          isDarkTheme={isDarkMode}
+          performanceAnalysisId={1}
+          seriesInitKey={emptyPayload ? 'empty' : 'mock'}
+          showAddEditCustomDataButton
+          customPerformanceMatrix={
+            emptyPayload
+              ? null
+              : {
+                  v: SPAGHETTI_TIME_SERIES_MATRIX_V,
+                  dates: ['2022-01-01', '2022-02-01'],
+                  horizonKeys: ['horizon_1', 'horizon_2', 'horizon_3'],
+                  grid: [
+                    [111, 110.5, 110],
+                    [112, 111.2, 110.8],
+                  ],
+                  perHorizonDates: [
+                    ['2022-01-01', '2022-01-01', '2022-01-01'],
+                    ['2022-02-01', '2022-02-01', '2022-02-01'],
+                  ],
+                }
+          }
+          customPerformanceLabel="Demo custom series"
+        />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/registry.ts

@@ -145,6 +145,18 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Widgets',
     load: () => import('./pages/DriverMapPage'),
   },
+  {
+    slug: 'drivers-comparison-chart',
+    title: 'DriversComparisonChart',
+    section: 'Widgets',
+    load: () => import('./pages/DriversComparisonChartPage'),
+  },
+  {
+    slug: 'performance-chart',
+    title: 'PerformanceChart',
+    section: 'Widgets',
+    load: () => import('./pages/PerformanceChartPage'),
+  },
   {
     slug: 'dropdown-menu',
     title: 'DropdownMenu',

package/src/index.ts

@@ -73,6 +73,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';