@sybilion/uilib 1.3.23 → 1.3.26

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/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/pages/TextWithDeferTooltipPage.tsx

@@ -4,6 +4,9 @@ import { TextWithDeferTooltip } from '#uilib/components/ui/TextWithDeferTooltip'
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
+const LONG_LABEL =
+  'This is a long label that should overflow and show a tooltip on hover.';
+
 export default function TextWithDeferTooltipPage() {
   return (
     <>
@@ -13,16 +16,29 @@ export default function TextWithDeferTooltipPage() {
         subheader="Tooltip only when text overflows."
         actions={<DocsHeaderActions />}
       />
-      <PageContentSection
-        style={{
-          maxWidth: 120,
-          border: '1px dashed var(--border)',
-          padding: 8,
-        }}
-      >
-        <TextWithDeferTooltip>
-          This is a long label that should overflow and show a tooltip on hover.
-        </TextWithDeferTooltip>
+      <PageContentSection>
+        <p style={{ margin: '0 0 8px', fontWeight: 600 }}>Default</p>
+        <div
+          style={{
+            maxWidth: 120,
+            border: '1px dashed var(--border)',
+            padding: 8,
+          }}
+        >
+          <TextWithDeferTooltip>{LONG_LABEL}</TextWithDeferTooltip>
+        </div>
+      </PageContentSection>
+      <PageContentSection>
+        <p style={{ margin: '0 0 8px', fontWeight: 600 }}>Over trigger</p>
+        <div
+          style={{
+            maxWidth: 120,
+            border: '1px dashed var(--border)',
+            padding: 8,
+          }}
+        >
+          <TextWithDeferTooltip overTrigger>{LONG_LABEL}</TextWithDeferTooltip>
+        </div>
       </PageContentSection>
     </>
   );

package/src/docs/pages/TooltipPage.tsx

@@ -11,6 +11,9 @@ import { DocsHeaderActions } from '../docsHeaderActions';
 
 const TOOLTIP_SIDES = ['left', 'top', 'bottom', 'right'] as const;
 
+const OVER_TRIGGER_TEXT =
+  'Actual Order volume for Baerlocher MB 301, a compound that includes stearin as a component. MB 301 is typically used in construction-grade applications.';
+
 export default function TooltipPage() {
   return (
     <>
@@ -34,6 +37,33 @@ export default function TooltipPage() {
           ))}
         </div>
       </PageContentSection>
+      <PageContentSection>
+        <p style={{ margin: '0 0 8px', fontWeight: 600 }}>Over trigger</p>
+        <div
+          style={{
+            maxWidth: 280,
+            border: '1px dashed var(--border)',
+            padding: 8,
+          }}
+        >
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                style={{
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {OVER_TRIGGER_TEXT}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent overTrigger maxWidth={400}>
+              {OVER_TRIGGER_TEXT}
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      </PageContentSection>
     </>
   );
 }

package/src/docs/registry.ts

@@ -151,6 +151,12 @@ export const DOC_REGISTRY: DocEntry[] = [
     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

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