@alpic-ai/ui 0.0.0-dev.g378c8b6 → 0.0.0-dev.g380fab7

package/src/components/area-chart.tsx

@@ -0,0 +1,339 @@
+"use client";
+
+import * as React from "react";
+import {
+  Area,
+  CartesianGrid,
+  LabelList,
+  AreaChart as RechartsAreaChart,
+  ReferenceArea,
+  ReferenceDot,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { useReducedMotion } from "../hooks/use-reduced-motion";
+import { type ChartSeries, orderByLuminance, resolveSeries } from "../lib/chart";
+import type { ChartPaletteName } from "../lib/chart-palette";
+import { cn } from "../lib/cn";
+import { useChartContext } from "./chart-container";
+import { ChartLegend } from "./chart-legend";
+import { ChartTooltipContent } from "./chart-tooltip";
+
+const CURVE_TYPE = { monotone: "monotone", linear: "linear", step: "stepAfter" } as const;
+
+export interface ChartMarker {
+  x: string | number;
+  y: number;
+  label?: string;
+  color?: string;
+}
+
+export interface AreaChartProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  index: string;
+  series: ChartSeries[];
+  variant?: "stacked" | "grouped" | "expand";
+  curve?: keyof typeof CURVE_TYPE;
+  legend?: boolean;
+  valueFlags?: boolean;
+  height?: number;
+  yAxisWidth?: number;
+  palette?: ChartPaletteName;
+  referenceLine?: { y: number; label?: string; band?: boolean };
+  markers?: ChartMarker[];
+  lastValueLabel?: boolean;
+  texture?: boolean;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  labelFormatter?: (label: string | number) => string;
+  className?: string;
+}
+
+function AreaChart({
+  data,
+  index,
+  series,
+  variant = "stacked",
+  curve = "monotone",
+  legend = false,
+  valueFlags = false,
+  height = 200,
+  yAxisWidth = 48,
+  palette,
+  referenceLine,
+  markers,
+  lastValueLabel = false,
+  texture = false,
+  loading = false,
+  valueFormatter = (value) => value.toLocaleString("en-US"),
+  labelFormatter,
+  className,
+}: AreaChartProps) {
+  const { palette: paletteColors, theme } = useChartContext(palette);
+  const reactId = React.useId().replace(/:/g, "");
+  const reducedMotion = useReducedMotion();
+  const animated = !reducedMotion;
+
+  const resolved = resolveSeries(series, paletteColors, theme);
+  const stacked = variant === "stacked" || variant === "expand";
+  const rendered = stacked ? orderByLuminance(resolved) : resolved;
+
+  const strokeOnly = variant === "grouped" && rendered.length > 1;
+  const filled = !strokeOnly;
+  const lead = resolved[0];
+  const withTotal = stacked && rendered.length > 1;
+
+  // Stacked bands must reach the stack height (sum per x-point), not the tallest
+  // single series, or the reference band stops short of the chart top.
+  const numericMax = React.useMemo(() => {
+    let max = 0;
+    for (const row of data) {
+      let rowTotal = 0;
+      for (const entry of series) {
+        const value = Number(row[entry.key]);
+        if (Number.isFinite(value)) {
+          rowTotal += value;
+          if (!stacked && value > max) {
+            max = value;
+          }
+        }
+      }
+      if (stacked && rowTotal > max) {
+        max = rowTotal;
+      }
+    }
+    return max;
+  }, [data, series, stacked]);
+
+  const curveType = CURVE_TYPE[curve];
+  const margin = { top: markers?.length ? 18 : 8, right: lastValueLabel ? 56 : 8, bottom: 2, left: 0 };
+
+  const axis = {
+    stroke: theme.border,
+    tick: { fill: theme.axisForeground, fontSize: 10, fontFamily: theme.fontMono },
+    tickLine: false as const,
+    axisLine: { stroke: theme.border, strokeOpacity: 0.6 },
+  };
+
+  const legendItems = resolved.map((entry) => ({ name: entry.name, color: entry.color, dashed: entry.dashed }));
+
+  const activeDotFor = (entry: (typeof rendered)[number]) =>
+    valueFlags
+      ? (dotProps: { cx?: number; cy?: number; value?: number | string }) => {
+          if (dotProps.cx == null || dotProps.cy == null) {
+            return <g />;
+          }
+          return (
+            <g>
+              <circle
+                cx={dotProps.cx}
+                cy={dotProps.cy}
+                r={3.5}
+                fill={entry.color}
+                stroke={theme.card}
+                strokeWidth={2}
+              />
+              <text
+                x={dotProps.cx}
+                y={dotProps.cy - 8}
+                textAnchor="middle"
+                fill={entry.color}
+                fontFamily={theme.fontMono}
+                fontSize={10}
+                style={{ fontVariantNumeric: "tabular-nums" }}
+              >
+                {valueFormatter(Number(dotProps.value ?? 0))}
+              </text>
+            </g>
+          );
+        }
+      : { r: 3.5, fill: entry.color, stroke: theme.card, strokeWidth: 2 };
+
+  const fillFor = (entry: (typeof rendered)[number], slot: number) => {
+    if (!filled) {
+      return "none";
+    }
+    if (texture && lead && entry.key === lead.key) {
+      return `url(#hatch-${reactId})`;
+    }
+    return `url(#area-${reactId}-${slot})`;
+  };
+
+  const renderLastLabel =
+    (color: string) =>
+    (props: {
+      x?: string | number;
+      y?: string | number;
+      value?: string | number | boolean | Array<string | number | boolean> | null;
+      index?: number;
+    }) => {
+      if (props.index !== data.length - 1 || props.x == null || props.y == null) {
+        return null;
+      }
+      return (
+        <text
+          x={Number(props.x) + 6}
+          y={Number(props.y)}
+          dy={3}
+          fill={color}
+          fontFamily={theme.fontMono}
+          fontSize={10}
+          textAnchor="start"
+          style={{ fontVariantNumeric: "tabular-nums" }}
+        >
+          {valueFormatter(Number(props.value ?? 0))}
+        </text>
+      );
+    };
+
+  const isEmpty = data.length === 0 || rendered.length === 0;
+
+  return (
+    <div data-slot="area-chart" className={cn("flex w-full flex-col gap-3", className)}>
+      <div className="w-full" style={{ height }}>
+        {loading ? (
+          <div className="flex h-full items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs">
+            <span className="size-4 animate-spin rounded-full border-2 border-border border-t-foreground" />
+            loading…
+          </div>
+        ) : isEmpty ? (
+          <div className="flex h-full items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs">
+            no data in range
+          </div>
+        ) : (
+          <ResponsiveContainer width="100%" height="100%">
+            <RechartsAreaChart
+              data={data as Record<string, string | number>[]}
+              stackOffset={variant === "expand" ? "expand" : "none"}
+              margin={margin}
+            >
+              <defs>
+                {filled &&
+                  rendered.map((entry, slot) => (
+                    <linearGradient key={entry.key} id={`area-${reactId}-${slot}`} x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="0%" stopColor={entry.color} stopOpacity={stacked ? 0.78 : 0.5} />
+                      <stop offset="100%" stopColor={entry.color} stopOpacity={stacked ? 0.32 : 0.04} />
+                    </linearGradient>
+                  ))}
+                {texture && filled && lead && (
+                  <pattern
+                    id={`hatch-${reactId}`}
+                    patternUnits="userSpaceOnUse"
+                    width={6}
+                    height={6}
+                    patternTransform="rotate(45)"
+                  >
+                    <rect width={6} height={6} fill={lead.color} fillOpacity={0.18} />
+                    <line x1={0} y1={0} x2={0} y2={6} stroke={lead.color} strokeWidth={1.2} strokeOpacity={0.6} />
+                  </pattern>
+                )}
+              </defs>
+
+              <CartesianGrid vertical={false} stroke={theme.grid} strokeDasharray="2 4" />
+              <XAxis dataKey={index} {...axis} interval="preserveStartEnd" minTickGap={44} />
+              <YAxis
+                {...axis}
+                width={yAxisWidth}
+                tickFormatter={(value: number) =>
+                  variant === "expand" ? `${Math.round(value * 100)}%` : valueFormatter(value)
+                }
+              />
+              <Tooltip
+                offset={12}
+                allowEscapeViewBox={{ x: false, y: false }}
+                cursor={{ stroke: theme.axisForeground, strokeWidth: 1, strokeDasharray: "3 3" }}
+                content={
+                  <ChartTooltipContent
+                    valueFormatter={valueFormatter}
+                    labelFormatter={labelFormatter}
+                    showTotal={withTotal}
+                  />
+                }
+              />
+              {referenceLine?.band && (
+                <ReferenceArea
+                  y1={referenceLine.y}
+                  y2={numericMax}
+                  fill={theme.warning}
+                  fillOpacity={0.06}
+                  ifOverflow="extendDomain"
+                />
+              )}
+              {referenceLine && (
+                <ReferenceLine
+                  y={referenceLine.y}
+                  stroke={theme.warning}
+                  strokeDasharray="4 4"
+                  strokeOpacity={0.6}
+                  label={
+                    referenceLine.label
+                      ? {
+                          value: referenceLine.label,
+                          fill: theme.warning,
+                          fontSize: 9,
+                          fontFamily: theme.fontMono,
+                          position: "insideBottomRight",
+                        }
+                      : undefined
+                  }
+                />
+              )}
+
+              {rendered.map((entry, slot) => (
+                <Area
+                  key={entry.key}
+                  type={curveType}
+                  dataKey={entry.key}
+                  name={entry.name}
+                  stackId={stacked ? "stack" : undefined}
+                  stroke={entry.color}
+                  strokeWidth={entry.dashed ? 2 : 1.6}
+                  strokeDasharray={entry.dashed ? "5 3" : undefined}
+                  fill={fillFor(entry, slot)}
+                  dot={false}
+                  activeDot={activeDotFor(entry)}
+                  isAnimationActive={animated}
+                  animationDuration={650}
+                  animationEasing="ease-out"
+                >
+                  {lastValueLabel && <LabelList dataKey={entry.key} content={renderLastLabel(entry.color)} />}
+                </Area>
+              ))}
+
+              {markers?.map((marker) => (
+                <ReferenceDot
+                  key={`${marker.x}-${marker.y}`}
+                  x={marker.x}
+                  y={marker.y}
+                  r={3.5}
+                  fill={marker.color ?? theme.foreground}
+                  stroke={theme.card}
+                  strokeWidth={2}
+                  label={
+                    marker.label
+                      ? {
+                          value: marker.label,
+                          fill: marker.color ?? theme.foreground,
+                          fontSize: 9,
+                          fontFamily: theme.fontMono,
+                          position: "top",
+                        }
+                      : undefined
+                  }
+                />
+              ))}
+            </RechartsAreaChart>
+          </ResponsiveContainer>
+        )}
+      </div>
+
+      {legend && !isEmpty && <ChartLegend items={legendItems} style={{ paddingLeft: yAxisWidth }} />}
+    </div>
+  );
+}
+
+export { AreaChart };

package/src/components/bar-chart.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import * as React from "react";
+import {
+  Bar,
+  CartesianGrid,
+  LabelList,
+  BarChart as RechartsBarChart,
+  ReferenceArea,
+  ReferenceDot,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { useReducedMotion } from "../hooks/use-reduced-motion";
+import { type ChartSeries, orderByLuminance, resolveSeries } from "../lib/chart";
+import type { ChartPaletteName } from "../lib/chart-palette";
+import { cn } from "../lib/cn";
+import type { ChartMarker } from "./area-chart";
+import { useChartContext } from "./chart-container";
+import { ChartLegend } from "./chart-legend";
+import { ChartTooltipContent } from "./chart-tooltip";
+
+const BAR_RADIUS = 4;
+const MAX_BAR_SIZE = 48;
+
+export interface BarChartProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  index: string;
+  series: ChartSeries[];
+  variant?: "stacked" | "grouped" | "expand";
+  legend?: boolean;
+  valueLabels?: boolean;
+  height?: number;
+  yAxisWidth?: number;
+  palette?: ChartPaletteName;
+  referenceLine?: { y: number; label?: string; band?: boolean };
+  markers?: ChartMarker[];
+  texture?: boolean;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  labelFormatter?: (label: string | number) => string;
+  className?: string;
+}
+
+function BarChart({
+  data,
+  index,
+  series,
+  variant = "stacked",
+  legend = false,
+  valueLabels = false,
+  height = 200,
+  yAxisWidth = 48,
+  palette,
+  referenceLine,
+  markers,
+  texture = false,
+  loading = false,
+  valueFormatter = (value) => value.toLocaleString("en-US"),
+  labelFormatter,
+  className,
+}: BarChartProps) {
+  const { palette: paletteColors, theme } = useChartContext(palette);
+  const reactId = React.useId().replace(/:/g, "");
+  const reducedMotion = useReducedMotion();
+  const animated = !reducedMotion;
+
+  const resolved = resolveSeries(series, paletteColors, theme);
+  const stacked = variant === "stacked" || variant === "expand";
+  const rendered = stacked ? orderByLuminance(resolved) : resolved;
+  const lead = resolved[0];
+  const withTotal = stacked && rendered.length > 1;
+
+  const numericMax = React.useMemo(() => {
+    let max = 0;
+    for (const row of data) {
+      for (const entry of series) {
+        const value = Number(row[entry.key]);
+        if (Number.isFinite(value) && value > max) {
+          max = value;
+        }
+      }
+    }
+    return max;
+  }, [data, series]);
+
+  const margin = { top: markers?.length || valueLabels ? 18 : 8, right: 8, bottom: 2, left: 0 };
+
+  const axis = {
+    stroke: theme.border,
+    tick: { fill: theme.axisForeground, fontSize: 10, fontFamily: theme.fontMono },
+    tickLine: false as const,
+    axisLine: { stroke: theme.border, strokeOpacity: 0.6 },
+  };
+
+  const legendItems = resolved.map((entry) => ({ name: entry.name, color: entry.color, dashed: entry.dashed }));
+
+  const radiusFor = (slot: number): [number, number, number, number] => {
+    if (!stacked || slot === rendered.length - 1) {
+      return [BAR_RADIUS, BAR_RADIUS, 0, 0];
+    }
+    return [0, 0, 0, 0];
+  };
+
+  const fillFor = (entry: (typeof rendered)[number], slot: number) => {
+    if (texture && lead && entry.key === lead.key) {
+      return `url(#bar-hatch-${reactId})`;
+    }
+    // Stacked segments read cleanest as flat solids — a per-segment gradient
+    // banding looks like a drop shadow between bands. Grouped bars keep the fade.
+    if (stacked) {
+      return entry.color;
+    }
+    return `url(#bar-${reactId}-${slot})`;
+  };
+
+  const renderValueLabel =
+    (color: string) =>
+    (props: {
+      x?: string | number;
+      y?: string | number;
+      width?: string | number;
+      value?: string | number | boolean | Array<string | number | boolean> | null;
+    }) => {
+      if (props.x == null || props.y == null) {
+        return null;
+      }
+      return (
+        <text
+          x={Number(props.x) + Number(props.width ?? 0) / 2}
+          y={Number(props.y) - 5}
+          textAnchor="middle"
+          fill={color}
+          fontFamily={theme.fontMono}
+          fontSize={10}
+          style={{ fontVariantNumeric: "tabular-nums" }}
+        >
+          {valueFormatter(Number(props.value ?? 0))}
+        </text>
+      );
+    };
+
+  const isEmpty = data.length === 0 || rendered.length === 0;
+
+  return (
+    <div data-slot="bar-chart" className={cn("flex w-full flex-col gap-3", className)}>
+      <div className="w-full" style={{ height }}>
+        {loading ? (
+          <div className="flex h-full items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs">
+            <span className="size-4 animate-spin rounded-full border-2 border-border border-t-foreground" />
+            loading…
+          </div>
+        ) : isEmpty ? (
+          <div className="flex h-full items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs">
+            no data in range
+          </div>
+        ) : (
+          <ResponsiveContainer width="100%" height="100%">
+            <RechartsBarChart
+              data={data as Record<string, string | number>[]}
+              stackOffset={variant === "expand" ? "expand" : "none"}
+              margin={margin}
+              barCategoryGap={stacked ? "20%" : "16%"}
+            >
+              <defs>
+                {!stacked &&
+                  rendered.map((entry, slot) => (
+                    <linearGradient key={entry.key} id={`bar-${reactId}-${slot}`} x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="0%" stopColor={entry.color} stopOpacity={0.95} />
+                      <stop offset="100%" stopColor={entry.color} stopOpacity={0.5} />
+                    </linearGradient>
+                  ))}
+                {texture && lead && (
+                  <pattern
+                    id={`bar-hatch-${reactId}`}
+                    patternUnits="userSpaceOnUse"
+                    width={6}
+                    height={6}
+                    patternTransform="rotate(45)"
+                  >
+                    <rect width={6} height={6} fill={lead.color} fillOpacity={0.22} />
+                    <line x1={0} y1={0} x2={0} y2={6} stroke={lead.color} strokeWidth={1.2} strokeOpacity={0.65} />
+                  </pattern>
+                )}
+              </defs>
+
+              <CartesianGrid vertical={false} stroke={theme.grid} strokeDasharray="2 4" />
+              <XAxis dataKey={index} {...axis} interval="preserveStartEnd" minTickGap={44} />
+              <YAxis
+                {...axis}
+                width={yAxisWidth}
+                domain={
+                  referenceLine && variant !== "expand"
+                    ? [0, Math.ceil(Math.max(numericMax, referenceLine.y) * 1.15)]
+                    : undefined
+                }
+                tickFormatter={(value: number) =>
+                  variant === "expand" ? `${Math.round(value * 100)}%` : valueFormatter(value)
+                }
+              />
+              <Tooltip
+                offset={12}
+                allowEscapeViewBox={{ x: false, y: false }}
+                cursor={{ fill: lead?.color ?? theme.mutedForeground, fillOpacity: theme.isDark ? 0.1 : 0.06 }}
+                content={
+                  <ChartTooltipContent
+                    valueFormatter={valueFormatter}
+                    labelFormatter={labelFormatter}
+                    showTotal={withTotal}
+                  />
+                }
+              />
+              {referenceLine?.band && (
+                <ReferenceArea
+                  y1={referenceLine.y}
+                  y2={numericMax}
+                  fill={theme.warning}
+                  fillOpacity={0.06}
+                  ifOverflow="extendDomain"
+                />
+              )}
+              {referenceLine && (
+                <ReferenceLine
+                  y={referenceLine.y}
+                  stroke={theme.warning}
+                  strokeDasharray="4 4"
+                  strokeOpacity={0.6}
+                  label={
+                    referenceLine.label
+                      ? {
+                          value: referenceLine.label,
+                          fill: theme.warning,
+                          fontSize: 9,
+                          fontFamily: theme.fontMono,
+                          position: "insideBottomRight",
+                        }
+                      : undefined
+                  }
+                />
+              )}
+
+              {rendered.map((entry, slot) => (
+                <Bar
+                  key={entry.key}
+                  dataKey={entry.key}
+                  name={entry.name}
+                  stackId={stacked ? "stack" : undefined}
+                  fill={fillFor(entry, slot)}
+                  stroke={entry.color}
+                  strokeWidth={0}
+                  radius={radiusFor(slot)}
+                  maxBarSize={MAX_BAR_SIZE}
+                  activeBar={{ fillOpacity: 1, stroke: theme.card, strokeWidth: 1 }}
+                  isAnimationActive={animated}
+                  animationDuration={650}
+                  animationEasing="ease-out"
+                >
+                  {valueLabels && (!stacked || rendered.length === 1) && (
+                    <LabelList dataKey={entry.key} content={renderValueLabel(entry.color)} />
+                  )}
+                </Bar>
+              ))}
+
+              {markers?.map((marker) => (
+                <ReferenceDot
+                  key={`${marker.x}-${marker.y}`}
+                  x={marker.x}
+                  y={marker.y}
+                  r={3.5}
+                  fill={marker.color ?? theme.foreground}
+                  stroke={theme.card}
+                  strokeWidth={2}
+                  label={
+                    marker.label
+                      ? {
+                          value: marker.label,
+                          fill: marker.color ?? theme.foreground,
+                          fontSize: 9,
+                          fontFamily: theme.fontMono,
+                          position: "top",
+                        }
+                      : undefined
+                  }
+                />
+              ))}
+            </RechartsBarChart>
+          </ResponsiveContainer>
+        )}
+      </div>
+
+      {legend && !isEmpty && <ChartLegend items={legendItems} style={{ paddingLeft: yAxisWidth }} />}
+    </div>
+  );
+}
+
+export { BarChart };