@sybilion/uilib 1.0.20

package/src/components/ui/Chart/index.ts

@@ -0,0 +1,2 @@
+export * from './Chart';
+export * from './Chart.types';

package/src/components/ui/Chart/tools/formatters.ts

@@ -0,0 +1,88 @@
+/**
+ * Format number for display (with k/m abbreviations)
+ */
+export const formatNumber = (value: number): string => {
+  if (Math.abs(value) >= 1000000) {
+    return (value / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+  } else if (Math.abs(value) >= 1000) {
+    return (value / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+  }
+  return value.toFixed(0);
+};
+
+/**
+ * Round a number based on its magnitude
+ * - 2 digits (10-99): round to nearest 10
+ * - 3 digits (100-999): round to nearest 100
+ * - 4 digits (1000-9999): round to nearest 1000
+ * - etc.
+ */
+const roundByMagnitude = (value: number): number => {
+  const absValue = Math.abs(value);
+
+  // Handle zero and very small numbers
+  if (absValue === 0) return 0;
+  if (absValue < 10) return Math.round(value);
+
+  // Calculate number of digits
+  const numDigits = Math.floor(Math.log10(absValue)) + 1;
+
+  // Round to nearest 10^(n-1) where n is number of digits
+  const roundingFactor = Math.pow(10, numDigits - 1);
+  return Math.round(value / roundingFactor) * roundingFactor;
+};
+
+/**
+ * Format Y-axis number with smart rounding based on magnitude
+ */
+export const formatYAxisNumber = (value: number): string => {
+  const rounded = roundByMagnitude(value);
+  return rounded.toFixed(0);
+};
+
+/**
+ * Generate simple Y-axis ticks
+ * - Get the highest chart point (max)
+ * - Round max to nearest appropriate value
+ * - Divide rounded max by 10 and round to get the step
+ * - Add legend for every step from top to bottom
+ * - No extra gaps from top/bottom
+ */
+export const generateRoundedYTicks = (min: number, max: number): number[] => {
+  if (min === max) return [min];
+  if (max <= 0) return [0];
+
+  const rawStep = (max - min) / 10; // generate 10 ticks
+
+  // Round step to nearest power of 10 (10, 100, 1000, ...)
+  const magnitude = Math.floor(Math.log10(rawStep));
+  const powerOf10 = Math.pow(10, magnitude);
+  const step = rawStep >= powerOf10 * 5 ? powerOf10 * 10 : powerOf10;
+
+  // find start round number that > min
+  const startMin = Math.ceil(min / step) * step;
+  // find end round number that < max
+  const endMax = Math.floor(max / step) * step;
+
+  return Array.from(
+    { length: (endMax - startMin) / step + 1 },
+    (_, i) => startMin + i * step,
+  );
+};
+
+/**
+ * Format date for display
+ */
+export const formatDate = (dateStr: string, long: boolean = false): string => {
+  const date = new Date(dateStr);
+  if (long) {
+    return date.toLocaleDateString('en-US', {
+      month: 'long',
+      year: 'numeric',
+    });
+  }
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    year: '2-digit',
+  });
+};

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

@@ -0,0 +1,168 @@
+import type { Analysis, ChartDataPoint } from './ChartAreaInteractive.types';
+
+// Helper function to format large numbers with k/m abbreviations
+export const formatNumber = (value: number): string => {
+  if (value >= 1000000) {
+    return (value / 1000000).toFixed(1).replace(/\.0$/, '') + 'm';
+  } else if (value >= 1000) {
+    return (value / 1000).toFixed(1).replace(/\.0$/, '') + 'k';
+  }
+  return value.toFixed(0);
+};
+
+// Find pin position for a specific date in the current filtered data
+export const findPinPositionForDate = (
+  targetDate: string,
+  filteredData: ChartDataPoint[],
+) => {
+  if (!filteredData.length) return 0;
+
+  const targetDateObj = new Date(targetDate);
+  let closestIndex = 0;
+  let minDistance = Infinity;
+
+  // First, try to find an exact match
+  const exactMatch = filteredData.findIndex(
+    dataPoint =>
+      dataPoint.date &&
+      new Date(dataPoint.date).getTime() === targetDateObj.getTime(),
+  );
+
+  if (exactMatch !== -1) {
+    return (exactMatch / (filteredData.length - 1)) * 100;
+  }
+
+  // If no exact match, find the closest date
+  filteredData.forEach((dataPoint, index) => {
+    if (dataPoint.date) {
+      const pointDate = new Date(dataPoint.date);
+      const distance = Math.abs(pointDate.getTime() - targetDateObj.getTime());
+      if (distance < minDistance) {
+        minDistance = distance;
+        closestIndex = index;
+      }
+    }
+  });
+
+  // If the target date is outside the current range, clamp to the nearest edge
+  const firstDate = new Date(filteredData[0].date);
+  const lastDate = new Date(filteredData[filteredData.length - 1].date);
+
+  if (targetDateObj < firstDate) {
+    return 0; // Pin at the beginning
+  } else if (targetDateObj > lastDate) {
+    return 100; // Pin at the end
+  }
+
+  return (closestIndex / (filteredData.length - 1)) * 100;
+};
+
+const timeRangeToMonths = {
+  '6m': 6,
+  '1y': 12,
+  '3y': 36,
+  '5y': 60,
+  All: 12,
+} as const;
+
+export type TimeRange = keyof typeof timeRangeToMonths;
+
+export const filterDataForTimeRange = (
+  data: ChartDataPoint[],
+  currentTimeRange: TimeRange,
+  availableAnalyses: number[],
+) => {
+  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,
+  );
+
+  // Pre-compute start date based on latest date in data
+  let startDate: Date | null = null;
+  if (latestDate) {
+    const monthsToSubtract =
+      timeRangeToMonths[currentTimeRange] || timeRangeToMonths.All;
+    startDate = new Date(latestDate);
+    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;
+
+  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 (startDate) {
+      const date = new Date(item.date);
+      return date >= startDate;
+    }
+
+    return true;
+  });
+  return filteredData;
+};
+
+export const shortDateFormatter = (value: string) => {
+  return new Date(value as string).toLocaleDateString('en-US', {
+    month: 'short',
+    year: '2-digit',
+  });
+};
+
+export const longDateFormatter = (value: string) => {
+  return new Date(value as string).toLocaleDateString('en-US', {
+    month: 'long',
+    year: 'numeric',
+  });
+};
+
+/**
+ * Checks if an analysis status is 'fail' (case-insensitive).
+ * @param analysis - The analysis object with optional status field
+ * @returns true if status is 'fail', false otherwise
+ */
+export const isAnalysisFailed = (
+  analysis: Analysis | { status?: string },
+): boolean => {
+  return analysis.status?.toLowerCase() === 'fail';
+};
+
+/**
+ * Checks if an analysis status is not 'fail' (case-insensitive).
+ * @param analysis - The analysis object with optional status field
+ * @returns true if status is not 'fail', false otherwise
+ */
+export const isAnalysisNotFailed = (
+  analysis: Analysis | { status?: string },
+): boolean => !isAnalysisFailed(analysis);

package/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.styl

@@ -0,0 +1,66 @@
+@import 'lib/theme.styl'
+
+:global(:root)
+  --chart-height: 586px
+
+  @media (max-width: unit(MOBILE, 'px'))
+    --chart-height: 300px
+
+// Loading spinner styles
+.loadingSpinner
+  width 1.5rem
+  height 1.5rem
+  border 2px solid var(--muted-foreground) // 0.2
+  border-top-color var(--muted-foreground) // 0.6
+  border-radius 9999px
+  animation spin 1s linear infinite
+
+@keyframes spin
+  to
+    transform rotate(360deg)
+
+@keyframes fadeIn
+  from
+    opacity 0
+  to
+    opacity 1
+
+// Container styles
+.chartHeaderContainer
+  display flex
+  align-items center
+  justify-content space-between
+  flex-wrap wrap
+  gap var(--p-2)
+  margin-bottom 1rem
+
+.chartContainerWrapper
+  position relative
+
+// Chart area styles
+.chartContainer
+  // z-index 11
+  // position relative
+  aspect-ratio auto
+  height var(--chart-height)
+  width 100%
+  transition opacity 300ms ease-out
+
+  .loading &
+    opacity 0.3
+    pointer-events none
+
+  :global(.recharts-legend-item)
+    margin-right var(--p-6) !important
+    cursor pointer
+
+
+// Chart overlay and pin styles
+.overlay
+  position absolute
+  inset 0
+  margin var(--p-5) var(--p-8) var(--p-24) var(--p-12)
+
+@media (max-width: unit(MOBILE, 'px'))
+  .overlay
+    height 230px !important

package/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.styl.d.ts

@@ -0,0 +1,14 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'chartContainer': string;
+  'chartContainerWrapper': string;
+  'chartHeaderContainer': string;
+  'fadeIn': string;
+  'loading': string;
+  'loadingSpinner': string;
+  'overlay': string;
+  'spin': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

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

@@ -0,0 +1,230 @@
+import cn from 'classnames';
+import { useEffect, useMemo, useRef } from 'react';
+
+import { ChartConfig } from '#uilib/components/ui/Chart/Chart';
+import {
+  BaseChartWrapper,
+  BaseChartWrapperProps,
+} from '#uilib/components/ui/Chart/components/BaseChartWrapper';
+import { InteractionOverlay } from '#uilib/components/ui/InteractionOverlay/InteractionOverlay';
+import { TimeRangeControls } from '#uilib/components/ui/TimeRangeControls/TimeRangeControls';
+import { ensureChartForecastBridge } from '#uilib/utils/chartConnectionPoint';
+
+import {
+  longDateFormatter,
+  shortDateFormatter,
+} from './ChartAreaInteractive.helpers';
+import S from './ChartAreaInteractive.styl';
+import { ChartAreaInteractiveProps } from './ChartAreaInteractive.types';
+import { IntervalsOverlay, PinOverlay, ThresholdsOverlay } from './overlays';
+
+export const chartConfig = {
+  // Chart now supports light/dark themes with dynamic colors
+} satisfies ChartConfig;
+
+export function ChartAreaInteractive({
+  className,
+  chartContainerClassName,
+  legendClassName,
+  xAxisClassName,
+  yAxisClassName,
+  timeRange,
+  onTimeRangeChange,
+  pinMonth,
+  onPinMonthChange,
+  onPreviewMonthChange,
+  chartData,
+  forecastData,
+  error,
+  loading = false,
+  isDarkTheme = false,
+  footerActions,
+  mode,
+  selectedForecast,
+  upperQuantiles,
+  lowerQuantiles,
+  selectedLowerQuantile,
+  selectedUpperQuantile,
+  onLowerQuantileChange,
+  onUpperQuantileChange,
+  lowerThreshold,
+  upperThreshold,
+  onLowerThresholdChange,
+  onUpperThresholdChange,
+  discreteThresholdValues,
+  headerActions,
+  excludeLegendIds,
+  loadingAnalyses,
+  onLegendClick,
+  onAnalysisSelect,
+  disableTimeRangeSelector,
+  forecastLineStyle = 'dashed',
+  selectedAnalysisId,
+  chartRenderId,
+  toggleLegendSeries,
+  ensureAnalysisSeriesVisible,
+  overlayForecastData = {},
+  hiddenSeries,
+  disableForecastHistoricalBridge,
+  ...restProps
+}: ChartAreaInteractiveProps) {
+  const seriesHidden = hiddenSeries ?? new Set<string>();
+  const hiddenSeriesRef = useRef(seriesHidden);
+  const prevSelectedAnalysisIdRef = useRef<number | string | null | undefined>(
+    selectedAnalysisId,
+  );
+
+  // Keep ref in sync with hiddenSeries (use seriesHidden so ref is always a Set)
+  useEffect(() => {
+    hiddenSeriesRef.current = seriesHidden;
+  }, [seriesHidden]);
+
+  // When analysis selected in CardTable, ensure it's visible in chart legend
+  // Only run when selectedAnalysisId changes, not when hiddenSeries changes
+  // This allows users to manually hide selected analyses via legend toggle
+  useEffect(() => {
+    // Only run when selectedAnalysisId actually changes
+    if (prevSelectedAnalysisIdRef.current === selectedAnalysisId) return;
+    prevSelectedAnalysisIdRef.current = selectedAnalysisId;
+
+    if (selectedAnalysisId == null) return;
+    const dataKey = `forecast_${selectedAnalysisId}`;
+    if (hiddenSeriesRef.current.has(dataKey)) {
+      ensureAnalysisSeriesVisible(selectedAnalysisId);
+    }
+  }, [selectedAnalysisId, ensureAnalysisSeriesVisible]);
+
+  const bridgedChartData = useMemo(
+    () =>
+      disableForecastHistoricalBridge
+        ? chartData
+        : ensureChartForecastBridge(chartData, {
+            forecastSeriesIds: forecastData?.map(f => f.id),
+          }),
+    [chartData, disableForecastHistoricalBridge, forecastData],
+  );
+
+  // Extract quantileBands from restProps
+  // const quantileBands = (restProps as any).quantileBands;
+
+  const getLoadingMessage = () => {
+    // Always return undefined - BaseChartWrapper will handle loading state
+    // This prevents showing spinner when data is cached but timeRangedChartData hasn't been computed yet
+    return undefined;
+  };
+
+  const handleLegendClick = data => {
+    const seriesName = data.dataKey as string;
+
+    if (onLegendClick?.(data) === false) return;
+
+    toggleLegendSeries(seriesName);
+  };
+
+  const loadingMessage = getLoadingMessage();
+
+  const baseChartProps: BaseChartWrapperProps = {
+    renderId: chartRenderId?.toString(),
+    xAxisClassName,
+    yAxisClassName,
+    chartData: bridgedChartData,
+    chartClassName: S.chartContainer,
+    // chartClassName: cn(S.chartContainer, chartContainerClassName),
+    legendClassName,
+    forecastData,
+    loading,
+    hasCombinedData: restProps.hasCombinedData,
+    isDarkTheme,
+    // formatNumber,
+    formatDate: shortDateFormatter,
+    labelFormatter: (v: unknown) => longDateFormatter(v as string),
+    chartType: 'composed' as const,
+    margin: { left: -10, right: 30, top: 20, bottom: 20 },
+    hiddenSeries: seriesHidden,
+    onLegendClick: handleLegendClick,
+    onAnalysisSelect: onAnalysisSelect,
+    error,
+    footerActions,
+    loadingMessage,
+    excludeLegendIds,
+    forecastLineStyle,
+    // loadingAnalyses,
+    ...restProps,
+  };
+
+  const renderChart = () => {
+    const overlayClassName = cn(chartContainerClassName);
+
+    switch (mode) {
+      case 'pin':
+        return (
+          <PinOverlay
+            className={overlayClassName}
+            baseChartProps={baseChartProps}
+            pinMonth={pinMonth}
+            onPinMonthChange={onPinMonthChange}
+            onPreviewMonthChange={onPreviewMonthChange}
+          />
+        );
+
+      case 'intervals':
+        return (
+          <IntervalsOverlay
+            className={overlayClassName}
+            baseChartProps={baseChartProps}
+            selectedForecast={selectedForecast}
+            upperQuantiles={upperQuantiles}
+            lowerQuantiles={lowerQuantiles}
+            selectedLowerQuantile={selectedLowerQuantile}
+            selectedUpperQuantile={selectedUpperQuantile}
+            onLowerQuantileChange={onLowerQuantileChange}
+            onUpperQuantileChange={onUpperQuantileChange}
+            overlayForecastData={overlayForecastData}
+          />
+        );
+
+      case 'thresholds':
+        return (
+          <ThresholdsOverlay
+            className={overlayClassName}
+            baseChartProps={baseChartProps}
+            selectedForecast={selectedForecast}
+            lowerThreshold={lowerThreshold}
+            upperThreshold={upperThreshold}
+            onLowerThresholdChange={onLowerThresholdChange}
+            onUpperThresholdChange={onUpperThresholdChange}
+            discreteThresholdValues={discreteThresholdValues}
+            overlayForecastData={overlayForecastData}
+          />
+        );
+
+      default:
+        return (
+          <BaseChartWrapper
+            {...baseChartProps}
+            chartClassName={cn(S.chartContainer, chartContainerClassName)}
+          />
+        );
+    }
+  };
+
+  return (
+    <InteractionOverlay className={cn(className, loading && S.loading)}>
+      {(!disableTimeRangeSelector || headerActions) && (
+        <div className={S.chartHeaderContainer}>
+          {!disableTimeRangeSelector && (
+            <TimeRangeControls
+              timeRange={timeRange}
+              onTimeRangeChange={onTimeRangeChange}
+              loading={loading}
+            />
+          )}
+
+          {headerActions}
+        </div>
+      )}
+
+      {renderChart()}
+    </InteractionOverlay>
+  );
+}

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

@@ -0,0 +1,68 @@
+import { BaseChartWrapperProps } from '#uilib/components/ui/Chart/components/BaseChartWrapper';
+import type { ForecastData } from '#uilib/types/forecast-data';
+import { LegendPayload } from 'recharts';
+
+import { TimeRange } from './ChartAreaInteractive.helpers';
+
+export type OverlayMode = 'pin' | 'intervals' | 'thresholds';
+
+export interface ChartDataPoint {
+  date: string;
+  historical?: number;
+  [key: string]: string | number | [number, number] | undefined; // For dynamic forecast series and quantile bands
+}
+
+export interface Analysis {
+  id: number;
+  icon?: string;
+  name: string;
+  color?: string;
+  status?: string;
+  updated_at?: string;
+  analysis_cycle?: {
+    id: number;
+    name: string;
+  };
+  // metadata?: Record<string, unknown>;
+}
+
+export interface ChartAreaInteractiveProps extends BaseChartWrapperProps {
+  chartContainerClassName?: string;
+  timeRange: TimeRange;
+  onTimeRangeChange: (range: string) => void;
+  pinMonth: string | undefined;
+  onPinMonthChange: (month: string | undefined) => void;
+  onPreviewMonthChange?: (month: string | undefined) => void;
+  mode?: OverlayMode;
+  selectedForecast?: Analysis;
+  // Quantile selection props for intervals overlay
+  upperQuantiles?: string[];
+  lowerQuantiles?: string[];
+  selectedLowerQuantile?: string | null;
+  selectedUpperQuantile?: string | null;
+  onLowerQuantileChange?: (quantile: string | null) => void;
+  onUpperQuantileChange?: (quantile: string | null) => void;
+  // Threshold props for thresholds overlay
+  lowerThreshold?: number;
+  upperThreshold?: number;
+  onLowerThresholdChange?: (value: number) => void;
+  onUpperThresholdChange?: (value: number) => void;
+  discreteThresholdValues?: { lower: number[]; upper: number[] };
+  headerActions?: React.ReactNode;
+  loadingAnalyses?: Set<string>;
+  onLegendClick?: (data: LegendPayload) => undefined | boolean;
+  disableTimeRangeSelector?: boolean;
+  forecastLineStyle?: 'dashed' | 'solid';
+  /** When set, ensures this analysis is visible (selected) in chart legend */
+  selectedAnalysisId?: number | null;
+  /** Stable id for chart instance (e.g. dataset id string). */
+  chartRenderId?: string | null;
+  /** Toggle series visibility by Recharts `dataKey` (e.g. `forecast_12`, `historical`). */
+  toggleLegendSeries: (seriesKey: string) => void;
+  /** Show a forecast series when it was hidden (e.g. after table row selection). */
+  ensureAnalysisSeriesVisible: (analysisId: number | string) => void;
+  /** Forecast quantile payloads keyed by analysis id (intervals/threshold overlays). */
+  overlayForecastData?: Record<number, ForecastData>;
+  /** Skip automatic forecast bridge points at last historical month (legacy / custom-shaped data). */
+  disableForecastHistoricalBridge?: boolean;
+}