@sybilion/uilib 1.0.26 → 1.0.28

package/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.helpers.ts

@@ -67,22 +67,99 @@ const timeRangeToMonths = {
 
 export type TimeRange = keyof typeof timeRangeToMonths;
 
+function isPlottableNumber(value: unknown): value is number {
+  return typeof value === 'number' && Number.isFinite(value);
+}
+
+/** Any row the chart can draw a number for (excludes date-only or empty rows) */
+function hasPlottableChartSeriesValue(item: ChartDataPoint): boolean {
+  for (const [key, v] of Object.entries(item)) {
+    if (key === 'date') continue;
+    if (isPlottableNumber(v)) return true;
+    if (Array.isArray(v) && v.some(x => isPlottableNumber(x))) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Row counts toward the "end" of the window when anchoring the time range to a
+ * selected forecast (shared historical + that analysis line / quantiles).
+ */
+function rowContributesToAnchoredTimeRange(
+  item: ChartDataPoint,
+  analysisId: number,
+): boolean {
+  if (isPlottableNumber(item.historical)) {
+    return true;
+  }
+  const forecastKey = `forecast_${analysisId}`;
+  if (isPlottableNumber(item[forecastKey])) {
+    return true;
+  }
+  for (const key of Object.keys(item)) {
+    if (key.startsWith('q') && key.endsWith(`_${analysisId}`)) {
+      if (isPlottableNumber(item[key])) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+function computeLatestPlottableDate(
+  data: ChartDataPoint[],
+  options?: { endDateAnchorAnalysisId?: number | null },
+): Date | null {
+  const anchorId = options?.endDateAnchorAnalysisId;
+
+  const pick = (item: ChartDataPoint, useAnchor: boolean): Date | null => {
+    if (!item.date) return null;
+    if (useAnchor && anchorId != null) {
+      if (!rowContributesToAnchoredTimeRange(item, anchorId)) {
+        return null;
+      }
+    } else if (!hasPlottableChartSeriesValue(item)) {
+      return null;
+    }
+    return new Date(item.date);
+  };
+
+  let latest: Date | null = null;
+  for (const item of data) {
+    const d = pick(item, true);
+    if (d && (!latest || d > latest)) {
+      latest = d;
+    }
+  }
+
+  if (latest == null && anchorId != null) {
+    for (const item of data) {
+      const d = pick(item, false);
+      if (d && (!latest || d > latest)) {
+        latest = d;
+      }
+    }
+  }
+
+  return latest;
+}
+
+export type FilterDataForTimeRangeOptions = {
+  /** When set (e.g. selected forecast on Forecast tab), the window ends at the
+   *  latest point that has shared historical or that analysis — not at another run. */
+  endDateAnchorAnalysisId?: number | null;
+};
+
 export const filterDataForTimeRange = (
   data: ChartDataPoint[],
   currentTimeRange: TimeRange,
-  availableAnalyses: number[],
+  options?: FilterDataForTimeRangeOptions,
 ) => {
   if (currentTimeRange === 'All') return data;
 
-  // Find the latest date in the data
-  const latestDate = data.reduce(
-    (latest, item) => {
-      if (!item.date) return latest;
-      const itemDate = new Date(item.date);
-      return !latest || itemDate > latest ? itemDate : latest;
-    },
-    null as Date | null,
-  );
+  const latestDate = computeLatestPlottableDate(data, options);
 
   // Pre-compute start date based on latest date in data
   let startDate: Date | null = null;
@@ -93,41 +170,14 @@ export const filterDataForTimeRange = (
     startDate.setMonth(startDate.getMonth() - monthsToSubtract);
   }
 
-  // Create a Set for faster lookup when there are many analyses
-  const forecastKeyPrefix = 'forecast_';
-  const hasManyAnalyses = availableAnalyses.length > 10;
-  const hasAnalyses = availableAnalyses.length > 0;
-  const forecastKeysSet = hasManyAnalyses
-    ? new Set(availableAnalyses.map(id => `${forecastKeyPrefix}${id}`))
-    : null;
-
+  // Slice by date for every row. Rows with forecast_* keys must not bypass the
+  // window (e.g. spaghetti plots), or the X range stays stuck at full history.
   const filteredData = data.filter(item => {
-    if (hasAnalyses) {
-      // Optimize forecast data check for many analyses
-      let hasForecastData = false;
-      if (hasManyAnalyses && forecastKeysSet) {
-        // Check if any forecast key exists in the item
-        hasForecastData = Object.keys(item).some(key =>
-          forecastKeysSet.has(key),
-        );
-      } else {
-        // Original approach for small number of analyses
-        hasForecastData = availableAnalyses.some(
-          analysisId => item[`forecast_${analysisId}`] !== undefined,
-        );
-      }
-
-      if (hasForecastData) {
-        return true;
-      }
-    }
-
-    // For historical data, apply time range filtering
+    if (!item.date) return false;
     if (startDate) {
       const date = new Date(item.date);
       return date >= startDate;
     }
-
     return true;
   });
   return filteredData;

package/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.tsx

@@ -11,6 +11,7 @@ import { TimeRangeControls } from '#uilib/components/ui/TimeRangeControls/TimeRa
 import { ensureChartForecastBridge } from '#uilib/utils/chartConnectionPoint';
 
 import {
+  filterDataForTimeRange,
   longDateFormatter,
   shortDateFormatter,
 } from './ChartAreaInteractive.helpers';
@@ -94,14 +95,25 @@ export function ChartAreaInteractive({
     }
   }, [selectedAnalysisId, ensureAnalysisSeriesVisible]);
 
+  const timeFilteredChartData = useMemo(() => {
+    const raw = selectedAnalysisId ?? selectedForecast?.id ?? null;
+    const anchorId =
+      raw == null ? null : typeof raw === 'number' ? raw : Number(raw);
+    const opts =
+      anchorId != null && Number.isFinite(anchorId)
+        ? { endDateAnchorAnalysisId: anchorId }
+        : undefined;
+    return filterDataForTimeRange(chartData, timeRange, opts);
+  }, [chartData, timeRange, selectedAnalysisId, selectedForecast?.id]);
+
   const bridgedChartData = useMemo(
     () =>
       disableForecastHistoricalBridge
-        ? chartData
-        : ensureChartForecastBridge(chartData, {
+        ? timeFilteredChartData
+        : ensureChartForecastBridge(timeFilteredChartData, {
             forecastSeriesIds: forecastData?.map(f => f.id),
           }),
-    [chartData, disableForecastHistoricalBridge, forecastData],
+    [timeFilteredChartData, disableForecastHistoricalBridge, forecastData],
   );
 
   // Extract quantileBands from restProps

package/src/docs/contexts/theme-context.tsx

@@ -8,9 +8,11 @@ export type ThemeMode = 'light' | 'dark';
 
 const ThemeContext = createContext<{
   theme: ThemeMode;
+  isDarkMode: boolean;
   setTheme: (theme: ThemeMode) => void;
 }>({
   theme: 'light',
+  isDarkMode: false,
   setTheme: () => {},
 });
 
@@ -37,7 +39,13 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   }, [theme]);
 
   return (
-    <ThemeContext.Provider value={{ theme, setTheme }}>
+    <ThemeContext.Provider
+      value={{
+        theme,
+        isDarkMode: theme === 'dark',
+        setTheme,
+      }}
+    >
       <ThemeRoot config={currThemeConfig} />
       {children}
     </ThemeContext.Provider>

package/src/docs/pages/ChartAreaInteractivePage.tsx

@@ -9,6 +9,7 @@ import type {
 import { ForecastItemData } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
 import { PageContentSection } from '#uilib/components/ui/Page';
 import { Tabs, TabsList, TabsTrigger } from '#uilib/components/ui/Tabs';
+import { useTheme } from '#uilib/docs/contexts/theme-context';
 import type { ForecastData } from '#uilib/types/forecast-data';
 
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
@@ -48,6 +49,30 @@ const DEMO_DISCRETE_THRESHOLDS = (() => {
 })();
 
 const INITIAL_CHART: ChartDataPoint[] = [
+  { date: '2021-01-01', historical: 6 },
+  { date: '2021-02-01', historical: 8 },
+  { date: '2021-03-01', historical: 7 },
+  { date: '2021-04-01', historical: 10 },
+  { date: '2021-05-01', historical: 9 },
+  { date: '2021-06-01', historical: 10 },
+  { date: '2021-07-01', historical: 11 },
+  { date: '2021-08-01', historical: 10 },
+  { date: '2021-09-01', historical: 12 },
+  { date: '2021-10-01', historical: 11 },
+  { date: '2021-11-01', historical: 13 },
+  { date: '2021-12-01', historical: 12 },
+  { date: '2022-01-01', historical: 8 },
+  { date: '2022-02-01', historical: 10 },
+  { date: '2022-03-01', historical: 9 },
+  { date: '2022-04-01', historical: 12 },
+  { date: '2022-05-01', historical: 11 },
+  { date: '2022-06-01', historical: 12 },
+  { date: '2022-07-01', historical: 13 },
+  { date: '2022-08-01', historical: 12 },
+  { date: '2022-09-01', historical: 14 },
+  { date: '2022-10-01', historical: 13 },
+  { date: '2022-11-01', historical: 15 },
+  { date: '2022-12-01', historical: 14 },
   { date: '2023-01-01', historical: 10 },
   { date: '2023-02-01', historical: 12 },
   { date: '2023-03-01', historical: 11 },
@@ -65,6 +90,7 @@ const DEMO_FORECAST_ITEMS: ForecastItemData[] = [
 type DemoMode = 'none' | OverlayMode;
 
 export default function ChartAreaInteractivePage() {
+  const { isDarkMode } = useTheme();
   const [timeRange, setTimeRange] = useState<TimeRange>('1y');
   const [pinMonth, setPinMonth] = useState<string | undefined>(undefined);
   const [demoMode, setDemoMode] = useState<DemoMode>('none');
@@ -139,7 +165,7 @@ export default function ChartAreaInteractivePage() {
           chartData={chartData}
           forecastData={DEMO_FORECAST_ITEMS}
           loading={false}
-          isDarkTheme={false}
+          isDarkTheme={isDarkMode}
           toggleLegendSeries={toggleLegendSeries}
           ensureAnalysisSeriesVisible={ensureAnalysisSeriesVisible}
           hiddenSeries={hidden}

package/src/docs/pages/MiniAppRootPage.tsx

@@ -1,4 +1,5 @@
 import { PageContentSection } from '#uilib/components/ui/Page';
+import { getThemeConfig } from '#uilib/docs/lib/theme';
 import { MiniAppRoot, useMiniAppShellTheme } from '#uilib/mini-app';
 
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
@@ -44,7 +45,11 @@ export default function MiniAppRootPage() {
         }
       `}</style>
       <PageContentSection style={{ maxHeight: '500px' }}>
-        <MiniAppRoot appId="uilib-docs" className="mini-app-root-page">
+        <MiniAppRoot
+          appId="uilib-docs"
+          className="mini-app-root-page"
+          getThemeConfig={isDarkMode => getThemeConfig(isDarkMode)}
+        >
           <MiniAppThemeDemo />
         </MiniAppRoot>
       </PageContentSection>

package/src/mini-app/MiniAppRoot.tsx

@@ -10,7 +10,7 @@ import React, {
   useState,
 } from 'react';
 
-import { Scroll } from '@homecode/ui';
+import { Scroll, Theme } from '@homecode/ui';
 
 import S from './MiniAppRoot.styl';
 import {
@@ -20,6 +20,10 @@ import {
   parseThemeSyncMessage,
   resolveParentOriginFromReferrer,
 } from './miniAppProtocol';
+import {
+  type MiniAppThemeConfig,
+  getDefaultMiniAppThemeConfig,
+} from './miniAppThemeConfig';
 
 const defaultTheme: ThemeSyncPayload = {
   mode: 'light',
@@ -76,6 +80,8 @@ export type MiniAppRootProps = {
   /** Included in READY payload when set. */
   appId?: string;
   onThemeChange?: (theme: ThemeSyncPayload) => void;
+  /** Overrides `@homecode/ui` `<Theme config>` builder (defaults to generic mini-app palette). */
+  getThemeConfig?: (isDarkMode: boolean) => MiniAppThemeConfig;
 };
 
 export function MiniAppRoot({
@@ -83,6 +89,7 @@ export function MiniAppRoot({
   className,
   appId,
   onThemeChange,
+  getThemeConfig,
 }: MiniAppRootProps): React.ReactElement {
   const [theme, setTheme] = useState<ThemeSyncPayload>(() =>
     isEmbeddedMiniApp() ? defaultTheme : themeFromDocument(),
@@ -90,6 +97,16 @@ export function MiniAppRoot({
   const onThemeChangeRef = useRef(onThemeChange);
   onThemeChangeRef.current = onThemeChange;
 
+  const getThemeConfigRef = useRef(
+    getThemeConfig ?? getDefaultMiniAppThemeConfig,
+  );
+  getThemeConfigRef.current = getThemeConfig ?? getDefaultMiniAppThemeConfig;
+
+  const currThemeConfig = useMemo(
+    () => getThemeConfigRef.current(theme.isDarkMode),
+    [theme.isDarkMode],
+  );
+
   const sendReady = useCallback(() => {
     if (!window.parent || window.parent === window) return;
     const payload = appId ? { appId } : {};
@@ -131,6 +148,7 @@ export function MiniAppRoot({
 
   return (
     <MiniAppShellContext.Provider value={ctx}>
+      <Theme config={currThemeConfig} />
       <Scroll
         y
         fadeSize="l"

package/src/mini-app/index.ts

@@ -11,11 +11,7 @@ export type {
   MiniAppMessageThemeSync,
   ThemeSyncPayload,
 } from './miniAppProtocol';
-export {
-  MiniAppRoot,
-  useMiniAppShellTheme,
-} from './MiniAppRoot';
-export type {
-  MiniAppRootProps,
-  MiniAppShellContextValue,
-} from './MiniAppRoot';
+export { getDefaultMiniAppThemeConfig } from './miniAppThemeConfig';
+export type { MiniAppThemeConfig } from './miniAppThemeConfig';
+export { MiniAppRoot, useMiniAppShellTheme } from './MiniAppRoot';
+export type { MiniAppRootProps, MiniAppShellContextValue } from './MiniAppRoot';

package/src/mini-app/miniAppThemeConfig.ts

@@ -0,0 +1,45 @@
+import { ThemeDefaults, ThemeHelpers } from '@homecode/ui';
+
+const { colors, getColors, getConfig } = ThemeDefaults;
+
+const defaultPalette = getColors();
+
+const colorsConfig = {
+  light: {
+    ...ThemeHelpers.colorsConfigToVars({
+      ...getColors({
+        accent: colors.dark,
+        decent: colors.light,
+      }),
+    }),
+  },
+  dark: {
+    ...ThemeHelpers.colorsConfigToVars({
+      ...getColors({
+        accent: colors.light,
+        decent: colors.dark,
+      }),
+    }),
+  },
+};
+
+/** Homecode `<Theme config={...}>` shape for workspace mini-apps (generic palette). */
+export function getDefaultMiniAppThemeConfig(isDarkMode: boolean) {
+  return {
+    ...getConfig(),
+    ...colorsConfig[isDarkMode ? 'dark' : 'light'],
+    ...ThemeHelpers.colorsConfigToVars({
+      active: {
+        color: '#00a9c7',
+        mods: {
+          // @ts-ignore — extend defaults so --active-color-alpha-* variants match Homecode
+          alpha: [0, 50, 100, 200, ...defaultPalette.active.mods.alpha],
+        },
+      },
+    }),
+  };
+}
+
+export type MiniAppThemeConfig = ReturnType<
+  typeof getDefaultMiniAppThemeConfig
+>;