@optilogic/charts 1.0.0-beta.9 → 1.1.0

package/src/dashboard/scenario-comparison.tsx

@@ -0,0 +1,235 @@
+import * as React from "react";
+import { cn } from "@optilogic/core";
+import { LineChart } from "../cartesian/line-chart";
+import { BarChart } from "../cartesian/bar-chart";
+import { RadarChart } from "../radial/radar-chart";
+import type { ChartTooltipProp } from "../shared/types";
+
+export interface ScenarioData {
+  name: string;
+  color?: string;
+  data: Record<string, unknown>[];
+}
+
+export type ScenarioComparisonMode =
+  | "side-by-side"
+  | "overlay"
+  | "delta"
+  | "scorecard";
+
+export interface ScenarioComparisonProps {
+  scenarios: ScenarioData[];
+  /** Data keys to compare */
+  metrics: string[];
+  /** Category axis key */
+  categoryKey: string;
+  mode?: ScenarioComparisonMode;
+  /** Index of the baseline scenario for delta calculations */
+  baselineIndex?: number;
+  tooltip?: ChartTooltipProp;
+  className?: string;
+  height?: number | string;
+}
+
+function buildOverlayData(
+  scenarios: ScenarioData[],
+  categoryKey: string,
+  metrics: string[],
+): { data: Record<string, unknown>[]; series: { dataKey: string; name: string; color?: string; strokeDasharray?: string }[] } {
+  const merged = new Map<string, Record<string, unknown>>();
+  for (const scenario of scenarios) {
+    for (const row of scenario.data) {
+      const key = String(row[categoryKey]);
+      if (!merged.has(key)) merged.set(key, { [categoryKey]: row[categoryKey] });
+      const target = merged.get(key)!;
+      for (const m of metrics) {
+        target[`${scenario.name}_${m}`] = row[m];
+      }
+    }
+  }
+  const data = Array.from(merged.values());
+  const series = scenarios.flatMap((s, si) =>
+    metrics.map((m) => ({
+      dataKey: `${s.name}_${m}`,
+      name: `${s.name} – ${m}`,
+      color: s.color,
+      strokeDasharray: si > 0 ? "5 3" : undefined,
+    })),
+  );
+  return { data, series };
+}
+
+function buildDeltaData(
+  scenarios: ScenarioData[],
+  baselineIndex: number,
+  categoryKey: string,
+  metrics: string[],
+): { data: Record<string, unknown>[]; series: { dataKey: string; name: string }[] } {
+  const baseline = scenarios[baselineIndex];
+  if (!baseline) return { data: [], series: [] };
+
+  const baseMap = new Map<string, Record<string, unknown>>();
+  for (const row of baseline.data) {
+    baseMap.set(String(row[categoryKey]), row);
+  }
+
+  const comparisons = scenarios.filter((_, i) => i !== baselineIndex);
+  const merged = new Map<string, Record<string, unknown>>();
+
+  for (const scenario of comparisons) {
+    for (const row of scenario.data) {
+      const key = String(row[categoryKey]);
+      if (!merged.has(key)) merged.set(key, { [categoryKey]: row[categoryKey] });
+      const target = merged.get(key)!;
+      const baseRow = baseMap.get(key);
+      for (const m of metrics) {
+        const base = Number(baseRow?.[m] ?? 0);
+        const val = Number(row[m] ?? 0);
+        target[`${scenario.name}_${m}`] = val - base;
+      }
+    }
+  }
+
+  const data = Array.from(merged.values());
+  const series = comparisons.flatMap((s) =>
+    metrics.map((m) => ({
+      dataKey: `${s.name}_${m}`,
+      name: `${s.name} Δ ${m}`,
+    })),
+  );
+  return { data, series };
+}
+
+function buildScorecardData(
+  scenarios: ScenarioData[],
+  metrics: string[],
+): { data: Record<string, unknown>[]; series: { dataKey: string; name: string; color?: string; strokeDasharray?: string }[] } {
+  const data: Record<string, unknown>[] = metrics.map((m) => {
+    const row: Record<string, unknown> = { metric: m };
+    for (const s of scenarios) {
+      const values = s.data.map((d) => Number(d[m] ?? 0));
+      const avg = values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;
+      row[s.name] = Math.round(avg * 10) / 10;
+    }
+    return row;
+  });
+  const series = scenarios.map((s, i) => ({
+    dataKey: s.name,
+    name: s.name,
+    color: s.color,
+    strokeDasharray: i > 0 ? "5 3" : undefined,
+  }));
+  return { data, series };
+}
+
+const ScenarioComparison = React.memo(function ScenarioComparison({
+  scenarios,
+  metrics,
+  categoryKey,
+  mode = "overlay",
+  baselineIndex = 0,
+  tooltip = true,
+  className,
+  height = 350,
+}: ScenarioComparisonProps) {
+  if (!scenarios.length || !metrics.length) return null;
+
+  if (mode === "side-by-side") {
+    return (
+      <div
+        className={cn("grid gap-4", className)}
+        style={{
+          gridTemplateColumns: `repeat(${scenarios.length}, 1fr)`,
+        }}
+      >
+        {scenarios.map((scenario) => (
+          <div key={scenario.name} style={{ height }}>
+            <div
+              style={{
+                fontSize: 12,
+                fontWeight: 600,
+                color: "hsl(var(--foreground))",
+                marginBottom: 6,
+              }}
+            >
+              {scenario.name}
+            </div>
+            <LineChart
+              data={scenario.data}
+              series={metrics.map((m) => ({
+                dataKey: m,
+                name: m,
+                color: scenario.color,
+              }))}
+              xAxis={{ dataKey: categoryKey }}
+              tooltip={tooltip}
+              legend={metrics.length > 1}
+              height="calc(100% - 24px)"
+            />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (mode === "overlay") {
+    const { data, series } = buildOverlayData(scenarios, categoryKey, metrics);
+    return (
+      <div className={className} style={{ height }}>
+        <LineChart
+          data={data}
+          series={series}
+          xAxis={{ dataKey: categoryKey }}
+          tooltip={tooltip}
+          legend
+          height="100%"
+        />
+      </div>
+    );
+  }
+
+  if (mode === "delta") {
+    const { data, series } = buildDeltaData(
+      scenarios,
+      baselineIndex,
+      categoryKey,
+      metrics,
+    );
+    return (
+      <div className={className} style={{ height }}>
+        <BarChart
+          data={data}
+          series={series.map((s) => ({ ...s }))}
+          xAxis={{ dataKey: categoryKey }}
+          tooltip={tooltip}
+          legend
+          height="100%"
+        />
+      </div>
+    );
+  }
+
+  if (mode === "scorecard") {
+    const { data, series } = buildScorecardData(scenarios, metrics);
+    return (
+      <div className={className} style={{ height }}>
+        <RadarChart
+          data={data}
+          series={series.map((s) => ({
+            ...s,
+            fillOpacity: 0.1,
+          }))}
+          categoryKey="metric"
+          tooltip={tooltip}
+          legend
+          height="100%"
+        />
+      </div>
+    );
+  }
+
+  return null;
+});
+
+ScenarioComparison.displayName = "ScenarioComparison";
+export { ScenarioComparison };

package/src/dashboard/sparkline.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import {
+  LineChart,
+  Line,
+  AreaChart,
+  Area,
+  BarChart,
+  Bar,
+  ResponsiveContainer,
+} from "recharts";
+import { getChartColor } from "../shared/colors";
+
+export type SparklineVariant = "line" | "area" | "bar";
+
+export interface SparklineProps {
+  data: number[];
+  variant?: SparklineVariant;
+  color?: string;
+  width?: number | string;
+  height?: number;
+  strokeWidth?: number;
+  className?: string;
+}
+
+const Sparkline = React.memo(function Sparkline({
+  data,
+  variant = "line",
+  color,
+  width = "100%",
+  height = 24,
+  strokeWidth = 1.5,
+  className,
+}: SparklineProps) {
+  const chartColor = color ?? getChartColor(0);
+
+  const points = React.useMemo(
+    () => data.map((v, i) => ({ i, v })),
+    [data],
+  );
+
+  if (!points.length) return null;
+
+  return (
+    <div className={className} style={{ width, height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        {variant === "bar" ? (
+          <BarChart data={points} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
+            <Bar dataKey="v" fill={chartColor} fillOpacity={0.7} isAnimationActive={false} />
+          </BarChart>
+        ) : variant === "area" ? (
+          <AreaChart data={points} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
+            <defs>
+              <linearGradient id="sparkArea" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor={chartColor} stopOpacity={0.3} />
+                <stop offset="95%" stopColor={chartColor} stopOpacity={0.05} />
+              </linearGradient>
+            </defs>
+            <Area
+              type="monotone"
+              dataKey="v"
+              stroke={chartColor}
+              strokeWidth={strokeWidth}
+              fill="url(#sparkArea)"
+              isAnimationActive={false}
+              dot={false}
+            />
+          </AreaChart>
+        ) : (
+          <LineChart data={points} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
+            <Line
+              type="monotone"
+              dataKey="v"
+              stroke={chartColor}
+              strokeWidth={strokeWidth}
+              dot={false}
+              isAnimationActive={false}
+            />
+          </LineChart>
+        )}
+      </ResponsiveContainer>
+    </div>
+  );
+});
+
+Sparkline.displayName = "Sparkline";
+export { Sparkline };

package/src/index.ts

@@ -1,21 +1,52 @@
+// ── Shared ────────────────────────────────────────────────────────────────────
+export { CHART_COLORS, getChartColor, getSemanticColor, type SemanticColorName } from "./shared/colors";
+export { ChartTooltipContent, resolveTooltipProps, type ChartTooltipContentProps } from "./shared/chart-tooltip";
+export { ChartLegendContent, resolveLegendConfig } from "./shared/chart-legend";
+export { ChartContainer, type ChartContainerProps } from "./shared/chart-container";
+export { useLiveData, type UseLiveDataConfig, type UseLiveDataReturn } from "./shared/use-live-data";
 export {
-  LineChart,
-  CHART_COLORS,
-  getChartColor,
-  type LineChartProps,
-  type LineChartSeries,
-  type LineChartXAxis,
-  type LineChartYAxis,
-  type LineChartGrid,
-  type LineChartLegend,
-} from "./line-chart";
+  formatCompact,
+  formatCurrency,
+  formatPercent,
+  formatUnit,
+  formatDuration,
+} from "./shared/formatters";
+export type {
+  ChartXAxis,
+  ChartYAxis,
+  ChartGrid,
+  ChartLegend,
+  ChartMargin,
+  ChartTooltipConfig,
+  ChartTooltipProp,
+  TooltipFormatter,
+  BaseChartProps,
+} from "./shared/types";
 
-export {
-  BarChart,
-  type BarChartProps,
-  type BarChartSeries,
-  type BarChartXAxis,
-  type BarChartYAxis,
-  type BarChartGrid,
-  type BarChartLegend,
-} from "./bar-chart";
+// ── Cartesian Charts ──────────────────────────────────────────────────────────
+export { LineChart, type LineChartProps, type LineChartSeries } from "./cartesian/line-chart";
+export { BarChart, type BarChartProps, type BarChartSeries } from "./cartesian/bar-chart";
+export { AreaChart, type AreaChartProps, type AreaChartSeries } from "./cartesian/area-chart";
+export { ScatterChart, type ScatterChartProps, type ScatterChartSeries } from "./cartesian/scatter-chart";
+export { ComposedChart, type ComposedChartProps, type ComposedChartSeries } from "./cartesian/composed-chart";
+export { WaterfallChart, type WaterfallChartProps, type WaterfallItem } from "./cartesian/waterfall-chart";
+
+// ── Radial Charts ─────────────────────────────────────────────────────────────
+export { PieChart, type PieChartProps, type PieChartDatum } from "./radial/pie-chart";
+export { DonutChart, type DonutChartProps, type DonutChartDatum } from "./radial/donut-chart";
+export { RadarChart, type RadarChartProps, type RadarChartSeries } from "./radial/radar-chart";
+export { RadialBarChart, type RadialBarChartProps, type RadialBarDatum } from "./radial/radial-bar-chart";
+
+// ── Specialized Charts ────────────────────────────────────────────────────────
+export { SankeyChart, type SankeyChartProps, type SankeyChartData, type SankeyNode, type SankeyLink } from "./specialized/sankey-chart";
+export { TreemapChart, type TreemapChartProps, type TreemapDatum } from "./specialized/treemap-chart";
+export { FunnelChart, type FunnelChartProps, type FunnelDatum } from "./specialized/funnel-chart";
+export { GanttChart, type GanttChartProps, type GanttTask, type GanttMilestone, type GanttTimeScale } from "./specialized/gantt-chart";
+export { HeatmapChart, type HeatmapChartProps, type HeatmapCell, type HeatmapColorScale } from "./specialized/heatmap-chart";
+
+// ── Dashboard & Analytics ─────────────────────────────────────────────────────
+export { Sparkline, type SparklineProps, type SparklineVariant } from "./dashboard/sparkline";
+export { KPICard, type KPICardProps } from "./dashboard/kpi-card";
+export { ScenarioComparison, type ScenarioComparisonProps, type ScenarioData, type ScenarioComparisonMode } from "./dashboard/scenario-comparison";
+export { ChartBuilder, type ChartBuilderProps } from "./dashboard/chart-builder";
+export { ChartRenderer, type ChartRendererProps, type ChartConfig, type ChartConfigSeries } from "./dashboard/chart-renderer";

package/src/radial/donut-chart.tsx

@@ -0,0 +1,135 @@
+import * as React from "react";
+import {
+  PieChart as RechartsPieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  Legend,
+} from "recharts";
+import { getChartColor } from "../shared/colors";
+import { resolveTooltipProps } from "../shared/chart-tooltip";
+import { ChartLegendContent, resolveLegendConfig } from "../shared/chart-legend";
+import { ChartContainer } from "../shared/chart-container";
+import type { BaseChartProps, ChartLegend, ChartTooltipProp } from "../shared/types";
+
+export interface DonutChartDatum {
+  name: string;
+  value: number;
+  color?: string;
+}
+
+export interface DonutChartProps extends BaseChartProps {
+  data: DonutChartDatum[];
+  innerRadius?: number | string;
+  outerRadius?: number | string;
+  paddingAngle?: number;
+  legend?: boolean | ChartLegend;
+  tooltip?: ChartTooltipProp;
+  /** Content rendered in the center of the donut */
+  centerLabel?: string;
+  centerValue?: string;
+  loading?: boolean;
+}
+
+const DonutChart = React.forwardRef<HTMLDivElement, DonutChartProps>(
+  (
+    {
+      data,
+      innerRadius = "60%",
+      outerRadius = "80%",
+      paddingAngle = 2,
+      legend = false,
+      tooltip = true,
+      centerLabel,
+      centerValue,
+      animate = true,
+      live = false,
+      className,
+      height = "100%",
+      margin = { top: 8, right: 8, left: 8, bottom: 8 },
+      loading,
+    },
+    ref,
+  ) => {
+    const legendConfig = resolveLegendConfig(legend);
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
+
+    return (
+      <ChartContainer
+        ref={ref}
+        className={className}
+        height={height}
+        loading={loading}
+        empty={!data?.length}
+      >
+        <RechartsPieChart margin={margin}>
+          <Pie
+            data={data}
+            dataKey="value"
+            nameKey="name"
+            cx="50%"
+            cy="50%"
+            innerRadius={innerRadius}
+            outerRadius={outerRadius}
+            paddingAngle={paddingAngle}
+            startAngle={90}
+            endAngle={-270}
+            isAnimationActive={isAnimated}
+            animationDuration={isAnimated ? 400 : 0}
+            stroke="hsl(var(--card))"
+            strokeWidth={2}
+          >
+            {data.map((entry, index) => (
+              <Cell
+                key={entry.name}
+                fill={getChartColor(index, entry.color)}
+              />
+            ))}
+          </Pie>
+          {(centerLabel || centerValue) && (
+            <text
+              x="50%"
+              y="50%"
+              textAnchor="middle"
+              dominantBaseline="central"
+            >
+              {centerValue && (
+                <tspan
+                  x="50%"
+                  dy={centerLabel ? "-0.5em" : "0"}
+                  fontSize={20}
+                  fontWeight={700}
+                  fill="hsl(var(--foreground))"
+                >
+                  {centerValue}
+                </tspan>
+              )}
+              {centerLabel && (
+                <tspan
+                  x="50%"
+                  dy={centerValue ? "1.4em" : "0"}
+                  fontSize={11}
+                  fill="hsl(var(--muted-foreground))"
+                >
+                  {centerLabel}
+                </tspan>
+              )}
+            </text>
+          )}
+          {tooltipProps && <Tooltip {...tooltipProps} />}
+          {legendConfig && (
+            <Legend
+              verticalAlign={legendConfig.position ?? "bottom"}
+              align={legendConfig.align ?? "center"}
+              content={<ChartLegendContent />}
+            />
+          )}
+        </RechartsPieChart>
+      </ChartContainer>
+    );
+  },
+);
+
+DonutChart.displayName = "DonutChart";
+export { DonutChart };

package/src/radial/pie-chart.tsx

@@ -0,0 +1,153 @@
+import * as React from "react";
+import {
+  PieChart as RechartsPieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  Legend,
+} from "recharts";
+import { getChartColor } from "../shared/colors";
+import { resolveTooltipProps } from "../shared/chart-tooltip";
+import { ChartLegendContent, resolveLegendConfig } from "../shared/chart-legend";
+import { ChartContainer } from "../shared/chart-container";
+import type { BaseChartProps, ChartLegend, ChartTooltipProp } from "../shared/types";
+
+export interface PieChartDatum {
+  name: string;
+  value: number;
+  color?: string;
+}
+
+export interface PieChartProps extends BaseChartProps {
+  data: PieChartDatum[];
+  innerRadius?: number | string;
+  outerRadius?: number | string;
+  paddingAngle?: number;
+  startAngle?: number;
+  endAngle?: number;
+  legend?: boolean | ChartLegend;
+  tooltip?: ChartTooltipProp;
+  /** Label rendered on each slice */
+  label?: boolean | ((entry: PieChartDatum) => string);
+  loading?: boolean;
+}
+
+const RADIAN = Math.PI / 180;
+
+function defaultRenderLabel({
+  cx,
+  cy,
+  midAngle,
+  innerRadius,
+  outerRadius,
+  percent,
+}: {
+  cx: number;
+  cy: number;
+  midAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  percent: number;
+}) {
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+  if (percent < 0.04) return null;
+  return (
+    <text
+      x={x}
+      y={y}
+      fill="hsl(var(--card-foreground))"
+      textAnchor="middle"
+      dominantBaseline="central"
+      fontSize={10}
+      fontWeight={600}
+    >
+      {`${(percent * 100).toFixed(0)}%`}
+    </text>
+  );
+}
+
+const PieChart = React.forwardRef<HTMLDivElement, PieChartProps>(
+  (
+    {
+      data,
+      innerRadius = 0,
+      outerRadius = "80%",
+      paddingAngle = 2,
+      startAngle = 90,
+      endAngle = -270,
+      legend = false,
+      tooltip = true,
+      label = false,
+      animate = true,
+      live = false,
+      className,
+      height = "100%",
+      margin = { top: 8, right: 8, left: 8, bottom: 8 },
+      loading,
+    },
+    ref,
+  ) => {
+    const legendConfig = resolveLegendConfig(legend);
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
+
+    const renderLabel =
+      label === true
+        ? defaultRenderLabel
+        : typeof label === "function"
+          ? (entry: Record<string, unknown>) =>
+              (label as (e: PieChartDatum) => string)(entry as unknown as PieChartDatum)
+          : undefined;
+
+    return (
+      <ChartContainer
+        ref={ref}
+        className={className}
+        height={height}
+        loading={loading}
+        empty={!data?.length}
+      >
+        <RechartsPieChart margin={margin}>
+          <Pie
+            data={data}
+            dataKey="value"
+            nameKey="name"
+            cx="50%"
+            cy="50%"
+            innerRadius={innerRadius}
+            outerRadius={outerRadius}
+            paddingAngle={paddingAngle}
+            startAngle={startAngle}
+            endAngle={endAngle}
+            isAnimationActive={isAnimated}
+            animationDuration={isAnimated ? 400 : 0}
+            label={renderLabel}
+            labelLine={false}
+            stroke="hsl(var(--card))"
+            strokeWidth={2}
+          >
+            {data.map((entry, index) => (
+              <Cell
+                key={entry.name}
+                fill={getChartColor(index, entry.color)}
+              />
+            ))}
+          </Pie>
+          {tooltipProps && <Tooltip {...tooltipProps} />}
+          {legendConfig && (
+            <Legend
+              verticalAlign={legendConfig.position ?? "bottom"}
+              align={legendConfig.align ?? "center"}
+              content={<ChartLegendContent />}
+            />
+          )}
+        </RechartsPieChart>
+      </ChartContainer>
+    );
+  },
+);
+
+PieChart.displayName = "PieChart";
+export { PieChart };