@sybilion/uilib 1.0.20

package/src/components/ui/Chart/components/ChartAxes.tsx

@@ -0,0 +1,140 @@
+import { useMemo, useRef } from 'react';
+
+import { Label, XAxis, YAxis } from 'recharts';
+
+import {
+  formatNumber,
+  formatYAxisNumber,
+  generateRoundedYTicks,
+} from '../tools/formatters';
+
+interface ChartAxesProps {
+  xAxisClassName?: string;
+  yAxisClassName?: string;
+  xAxisLabel?: string;
+  yAxisLabel?: string;
+  formatDate: (value: string, detailed?: boolean) => string;
+  formatNumber?: (value: number) => string;
+  xMin?: string | number;
+  xMax?: string | number;
+  yMin?: number;
+  yMax?: number;
+  autoScaleYAxis?: boolean;
+}
+
+export function ChartAxes({
+  xAxisClassName,
+  yAxisClassName,
+  xAxisLabel,
+  yAxisLabel,
+  formatDate,
+  // formatNumber = formatYAxisNumber,
+  xMin,
+  xMax,
+  yMin,
+  yMax,
+  autoScaleYAxis = false,
+}: ChartAxesProps) {
+  const tickColor = 'var(--muted-foreground)';
+
+  // Generate rounded ticks to avoid duplicates when we have explicit domain
+  const yTicks = useMemo(() => {
+    if (yMin !== undefined && yMax !== undefined && !autoScaleYAxis) {
+      const ticks = generateRoundedYTicks(yMin, yMax);
+      const formatter = formatNumber || formatYAxisNumber;
+
+      // Group ticks by formatted value and keep the one closest to its rounded value
+      const ticksByFormatted = new Map<string, number>();
+      ticks.forEach(tick => {
+        const formatted = formatter(tick);
+        // Parse formatted value back to number to find the target rounded value
+        const targetValue = parseFloat(formatted.replace(/[KM]$/, '')) || 0;
+        const multiplier = formatted.endsWith('M')
+          ? 1000000
+          : formatted.endsWith('K')
+            ? 1000
+            : 1;
+        const roundedTarget = targetValue * multiplier;
+
+        const existing = ticksByFormatted.get(formatted);
+        if (
+          existing === undefined ||
+          Math.abs(tick - roundedTarget) < Math.abs(existing - roundedTarget)
+        ) {
+          ticksByFormatted.set(formatted, tick);
+        }
+      });
+
+      return Array.from(ticksByFormatted.values()).sort((a, b) => a - b);
+    }
+    return undefined;
+  }, [yMin, yMax, autoScaleYAxis, formatNumber]);
+
+  // Determine Y-axis domain
+  let yDomain:
+    | [
+        (
+          | number
+          | string
+          | 'auto'
+          | 'dataMin'
+          | 'dataMax'
+          | ((dataMin: number) => number)
+        ),
+        (
+          | number
+          | string
+          | 'auto'
+          | 'dataMin'
+          | 'dataMax'
+          | ((dataMax: number) => number)
+        ),
+      ]
+    | undefined;
+
+  if (autoScaleYAxis) {
+    yDomain = [
+      (dataMin: number) => dataMin * 0.95,
+      (dataMax: number) => dataMax * 1.05,
+    ];
+  } else if (yMin !== undefined && yMax !== undefined) {
+    yDomain = [yMin, yMax];
+  }
+
+  return (
+    <>
+      <XAxis
+        className={xAxisClassName}
+        dataKey="date"
+        tickLine={false}
+        axisLine={false}
+        tickMargin={8}
+        minTickGap={32}
+        tick={{ fill: tickColor }}
+        tickFormatter={value => formatDate(value as string)}
+        {...(xMin !== undefined &&
+          xMax !== undefined && { domain: [xMin, xMax] })}
+      >
+        {xAxisLabel && (
+          <Label value={xAxisLabel} position="insideBottom" offset={-5} />
+        )}
+      </XAxis>
+      <YAxis
+        className={yAxisClassName}
+        tickLine={false}
+        axisLine={false}
+        tickMargin={8}
+        minTickGap={32}
+        tick={{ fill: tickColor }}
+        tickFormatter={formatNumber}
+        {...(yDomain && { domain: yDomain })}
+        {...(yTicks && { ticks: yTicks })}
+        allowDataOverflow={!autoScaleYAxis}
+      >
+        {yAxisLabel && (
+          <Label value={yAxisLabel} angle={-90} position="insideLeft" />
+        )}
+      </YAxis>
+    </>
+  );
+}

package/src/components/ui/Chart/components/ChartContainer.tsx

@@ -0,0 +1,73 @@
+import cn from 'classnames';
+import { ComponentProps, useId } from 'react';
+
+import { ChartContext } from '#uilib/components/ui/Chart/Chart.context';
+import { ChartConfig, THEMES } from '#uilib/components/ui/Chart/Chart.types';
+import * as RechartsPrimitive from 'recharts';
+
+import S from '../Chart.styl';
+
+export function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: ComponentProps<'div'> & {
+  config: ChartConfig;
+  children: ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >['children'];
+}) {
+  const uniqueId = useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(S.chartContainer, className)}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+export const ChartStyle = ({
+  id,
+  config,
+}: {
+  id: string;
+  config: ChartConfig;
+}) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  );
+
+  if (!colorConfig.length) return null;
+
+  return (
+    <style>
+      {Object.entries(THEMES).map(
+        ([theme, prefix]) => `
+          ${prefix} [data-chart=${id}] {
+            ${colorConfig
+              .map(([key, itemConfig]) => {
+                const color =
+                  itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+                  itemConfig.color;
+                return color ? `  --color-${key}: ${color};` : null;
+              })
+              .join('\n')}
+          }
+        `,
+      )}
+    </style>
+  );
+};

package/src/components/ui/Chart/components/ChartGrid.tsx

@@ -0,0 +1,7 @@
+import { CartesianGrid } from 'recharts';
+
+import S from '../Chart.styl';
+
+export function ChartGrid() {
+  return <CartesianGrid className={S.chartGrid} strokeWidth={0.6} />;
+}

package/src/components/ui/Chart/components/ChartLegendContent.tsx

@@ -0,0 +1,48 @@
+import cn from 'classnames';
+import { ComponentProps } from 'react';
+
+import { useChart } from '#uilib/components/ui/Chart/Chart.context';
+
+import S from '../Chart.styl';
+import { ChartLegendItem } from './ChartLegendItem';
+
+export function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = 'bottom',
+  nameKey,
+}: ComponentProps<'div'> & {
+  payload?: any[];
+  verticalAlign?: 'top' | 'bottom';
+  hideIcon?: boolean;
+  nameKey?: string;
+}) {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        S.legendContainer,
+        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+        className,
+      )}
+    >
+      {payload
+        .filter(item => item.type !== 'none')
+        .map(item => (
+          <ChartLegendItem
+            key={item.value}
+            item={item}
+            config={config}
+            hideIcon={hideIcon}
+            nameKey={nameKey}
+          />
+        ))}
+    </div>
+  );
+}

package/src/components/ui/Chart/components/ChartLegendItem.tsx

@@ -0,0 +1,43 @@
+import { getPayloadConfigFromPayload } from '../Chart.helpers';
+import S from '../Chart.styl';
+import { ChartConfig } from '../Chart.types';
+
+type LegendItem = {
+  type: string;
+  value: string;
+  color: string;
+  dataKey?: string;
+};
+
+type ChartLegendItemProps = {
+  item: LegendItem;
+  config: ChartConfig;
+  hideIcon: boolean;
+  nameKey?: string;
+};
+
+export function ChartLegendItem({
+  item,
+  config,
+  hideIcon,
+  nameKey,
+}: ChartLegendItemProps) {
+  const key = `${nameKey || item.dataKey || 'value'}`;
+  const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+  return (
+    <div key={item.value} className={S.legendItem}>
+      {itemConfig?.icon && !hideIcon ? (
+        <itemConfig.icon />
+      ) : (
+        <div
+          className={S.legendIndicator}
+          style={{
+            backgroundColor: item.color,
+          }}
+        />
+      )}
+      {itemConfig?.label}
+    </div>
+  );
+}

package/src/components/ui/Chart/components/ChartTooltipContent.tsx

@@ -0,0 +1,140 @@
+import cn from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
+
+import { useChart } from '#uilib/components/ui/Chart/Chart.context';
+import { getPayloadConfigFromPayload } from '#uilib/components/ui/Chart/Chart.helpers';
+import { ChartTooltipContentProps } from '#uilib/components/ui/Chart/Chart.types';
+
+import S from '../Chart.styl';
+import { ChartTooltipItem } from './ChartTooltipItem';
+
+type TooltipItem = {
+  type: string;
+  name: string;
+  value: number | [number, number];
+  payload: unknown;
+  color: string;
+  dataKey?: string;
+};
+
+export function ChartTooltipContent({
+  active,
+  className,
+  indicator = 'dot',
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  payload,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: ChartTooltipContentProps) {
+  const { config } = useChart();
+
+  // Keep last tooltip data in state to maintain position when inactive
+  const [lastTooltipData, setLastTooltipData] = useState<{
+    active: boolean;
+    payload: TooltipItem[] | undefined;
+    label: string | number | undefined;
+  } | null>(null);
+
+  // Update last tooltip data when active
+  useEffect(() => {
+    // Clear lastTooltipData immediately if label changed (prevents stale data)
+    // Only clear if label is explicitly provided and different (not undefined)
+    if (lastTooltipData && label && lastTooltipData.label !== label) {
+      setLastTooltipData(null);
+    }
+
+    if (active && payload?.length) {
+      setLastTooltipData({
+        active,
+        payload: payload as TooltipItem[],
+        label,
+      });
+    }
+    // Don't clear lastTooltipData when mouse moves out - keep it for position maintenance
+    // It will be cleared when label changes (above) or when new active data arrives
+  }, [active, payload, label]);
+
+  // Use last tooltip data if current is inactive, otherwise use current
+  // lastTooltipData is already cleared in useEffect if label changed, so safe to use here
+  const displayActive = active || (lastTooltipData?.active ?? false);
+  const displayPayload: TooltipItem[] | undefined =
+    active && payload?.length
+      ? (payload as TooltipItem[])
+      : lastTooltipData?.payload;
+  const displayLabel = active ? label : lastTooltipData?.label;
+
+  const tooltipLabel = useMemo(() => {
+    if (hideLabel || !displayPayload?.length) {
+      return null;
+    }
+
+    const payloadArray = displayPayload as TooltipItem[];
+    const [item] = payloadArray;
+    const key = `${labelKey || item.dataKey || item.name || 'value'}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value =
+      !labelKey && typeof displayLabel === 'string'
+        ? config[displayLabel as keyof typeof config]?.label || displayLabel
+        : itemConfig?.label;
+
+    if (labelFormatter) {
+      return (
+        <div className={cn('font-medium', labelClassName)}>
+          {labelFormatter(value, displayPayload)}
+        </div>
+      );
+    }
+
+    if (!value) {
+      return null;
+    }
+
+    return <div className={cn('font-medium', labelClassName)}>{value}</div>;
+  }, [
+    displayLabel,
+    labelFormatter,
+    displayPayload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ]);
+
+  // Don't return null - keep rendering last tooltip to maintain position
+  if (!displayPayload?.length) {
+    return null;
+  }
+
+  const nestLabel = displayPayload.length === 1 && indicator !== 'dot';
+
+  return (
+    <div className={cn(S.tooltipContainer, className)}>
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {(displayPayload as TooltipItem[])
+          .filter(item => item.type !== 'none')
+          .map((item, index) => (
+            <ChartTooltipItem
+              key={item.dataKey || index}
+              item={item}
+              index={index}
+              config={config}
+              indicator={indicator}
+              hideIndicator={hideIndicator}
+              nestLabel={nestLabel}
+              tooltipLabel={tooltipLabel}
+              color={color}
+              nameKey={nameKey}
+              formatter={formatter}
+            />
+          ))}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/Chart/components/ChartTooltipItem.tsx

@@ -0,0 +1,114 @@
+import cn from 'classnames';
+import { CSSProperties, ReactNode } from 'react';
+
+import { getPayloadConfigFromPayload } from '../Chart.helpers';
+import S from '../Chart.styl';
+import { ChartConfig } from '../Chart.types';
+
+type TooltipItem = {
+  type: string;
+  name: string;
+  value: number | [number, number];
+  payload: unknown;
+  color: string;
+  dataKey?: string;
+};
+
+type ChartTooltipItemProps = {
+  item: TooltipItem;
+  index: number;
+  config: ChartConfig;
+  indicator: 'line' | 'dot' | 'dashed';
+  hideIndicator: boolean;
+  nestLabel: boolean;
+  tooltipLabel: ReactNode;
+  color?: string;
+  nameKey?: string;
+  formatter?: (
+    value: unknown,
+    name: string,
+    props: unknown,
+    index: number,
+    payload: unknown,
+  ) => ReactNode;
+};
+
+export function ChartTooltipItem({
+  item,
+  index,
+  config,
+  indicator,
+  hideIndicator,
+  nestLabel,
+  tooltipLabel,
+  color,
+  nameKey,
+  formatter,
+}: ChartTooltipItemProps) {
+  const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+  const itemConfig = getPayloadConfigFromPayload(config, item, key);
+  const payloadFill =
+    item.payload &&
+    typeof item.payload === 'object' &&
+    'fill' in item.payload &&
+    typeof (item.payload as { fill?: unknown }).fill === 'string'
+      ? (item.payload as { fill: string }).fill
+      : undefined;
+  const indicatorColor = color || payloadFill || item.color;
+
+  return (
+    <div
+      key={item.dataKey}
+      className={cn(S.tooltipItem, indicator === 'dot' && 'items-center')}
+    >
+      {formatter && item?.value !== undefined && item.name ? (
+        formatter(item.value, item.name, item, index, item.payload)
+      ) : (
+        <>
+          {itemConfig?.icon ? (
+            <itemConfig.icon />
+          ) : (
+            !hideIndicator && (
+              <div
+                className={cn(
+                  S.tooltipIndicator,
+                  S[`indicator-${indicator}`],
+                  nestLabel && S.nested,
+                )}
+                style={
+                  {
+                    '--color-bg': indicatorColor,
+                    '--color-border': indicatorColor,
+                  } as CSSProperties
+                }
+              />
+            )
+          )}
+          <div
+            className={cn(
+              S.tooltipContent,
+              nestLabel ? 'items-end' : 'items-center',
+            )}
+          >
+            <div className={S.tooltipLabel}>
+              {nestLabel ? tooltipLabel : null}
+              <span className="text-muted-foreground">
+                {itemConfig?.label || item.name}
+              </span>
+            </div>
+
+            {item.value && (
+              <span className={S.tooltipValue}>
+                {Array.isArray(item.value)
+                  ? `${item.value[0].toLocaleString(undefined, { maximumFractionDigits: 20 })} – ${item.value[1].toLocaleString(undefined, { maximumFractionDigits: 20 })}`
+                  : item.value.toLocaleString(undefined, {
+                      maximumFractionDigits: 20,
+                    })}
+              </span>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/ui/Chart/components/ConfidenceBands.tsx

@@ -0,0 +1,49 @@
+import { Area } from 'recharts';
+
+import {
+  ANIMATION_BEGIN,
+  ANIMATION_DURATION,
+} from '../chartForecastVisualization.constants';
+
+interface ConfidenceBandsProps {
+  color: string;
+  hidden?: boolean;
+  animate?: boolean;
+}
+
+export function ConfidenceBands({
+  color,
+  hidden = false,
+  animate = false,
+}: ConfidenceBandsProps) {
+  return (
+    <>
+      {/* Lower boundary (invisible baseline) */}
+      <Area
+        type="monotone"
+        dataKey="lower_boundary"
+        stroke="transparent"
+        fill="transparent"
+        isAnimationActive={animate}
+        animationDuration={ANIMATION_DURATION}
+        animationBegin={ANIMATION_BEGIN}
+        connectNulls
+        hide={hidden}
+      />
+
+      {/* Upper boundary (creates fill between) */}
+      <Area
+        type="monotone"
+        dataKey="upper_boundary"
+        stroke="transparent"
+        fill={color}
+        fillOpacity={0.35}
+        isAnimationActive={animate}
+        animationDuration={ANIMATION_DURATION}
+        animationBegin={ANIMATION_BEGIN}
+        connectNulls
+        hide={hidden}
+      />
+    </>
+  );
+}