@optilogic/charts 1.0.0-beta.9 → 1.1.0

package/src/cartesian/line-chart.tsx

@@ -0,0 +1,159 @@
+import * as React from "react";
+import {
+  LineChart as RechartsLineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+} from "recharts";
+import { cn } from "@optilogic/core";
+import { getChartColor } from "../shared/colors";
+import { resolveTooltipProps, ChartTooltipContent } from "../shared/chart-tooltip";
+import { ChartLegendContent, resolveLegendConfig } from "../shared/chart-legend";
+import { ChartContainer } from "../shared/chart-container";
+import type {
+  BaseChartProps,
+  ChartXAxis,
+  ChartYAxis,
+  ChartGrid,
+  ChartLegend,
+  ChartTooltipProp,
+} from "../shared/types";
+
+export interface LineChartSeries {
+  dataKey: string;
+  name: string;
+  color?: string;
+  strokeWidth?: number;
+  dot?: boolean;
+  type?: "monotone" | "linear" | "step" | "basis" | "natural";
+  strokeDasharray?: string;
+}
+
+export interface LineChartProps extends BaseChartProps {
+  data: Record<string, unknown>[];
+  series: LineChartSeries[];
+  xAxis: ChartXAxis;
+  yAxis?: ChartYAxis;
+  grid?: boolean | ChartGrid;
+  legend?: boolean | ChartLegend;
+  tooltip?: ChartTooltipProp;
+  loading?: boolean;
+}
+
+const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
+  (
+    {
+      data,
+      series,
+      xAxis,
+      yAxis,
+      grid = true,
+      tooltip = true,
+      legend = false,
+      animate = false,
+      live = false,
+      className,
+      height = "100%",
+      margin = { top: 8, right: 12, left: 0, bottom: 4 },
+      loading,
+    },
+    ref,
+  ) => {
+    const gridConfig = React.useMemo(() => {
+      if (grid === false) return null;
+      if (grid === true) return { vertical: false, horizontal: true };
+      return grid;
+    }, [grid]);
+
+    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}
+      >
+        <RechartsLineChart data={data} margin={margin}>
+          {gridConfig && (
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="hsl(var(--divider))"
+              vertical={gridConfig.vertical ?? false}
+              horizontal={gridConfig.horizontal ?? true}
+            />
+          )}
+          <XAxis
+            dataKey={xAxis.dataKey}
+            tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
+            tickLine={false}
+            axisLine={false}
+            minTickGap={xAxis.minTickGap ?? 24}
+            tickFormatter={xAxis.tickFormatter}
+            label={
+              xAxis.label
+                ? {
+                    value: xAxis.label,
+                    position: "insideBottom",
+                    offset: -4,
+                    fontSize: 11,
+                    fill: "hsl(var(--muted-foreground))",
+                  }
+                : undefined
+            }
+          />
+          <YAxis
+            domain={yAxis?.domain ?? ["auto", "auto"]}
+            tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
+            tickLine={false}
+            axisLine={false}
+            width={yAxis?.width ?? 30}
+            tickFormatter={yAxis?.tickFormatter}
+            label={
+              yAxis?.label
+                ? {
+                    value: yAxis.label,
+                    angle: -90,
+                    position: "insideLeft",
+                    fontSize: 11,
+                    fill: "hsl(var(--muted-foreground))",
+                  }
+                : undefined
+            }
+          />
+          {tooltipProps && <Tooltip {...tooltipProps} />}
+          {legendConfig && (
+            <Legend
+              verticalAlign={legendConfig.position ?? "top"}
+              align={legendConfig.align ?? "right"}
+              content={<ChartLegendContent />}
+            />
+          )}
+          {series.map((s, index) => (
+            <Line
+              key={s.dataKey}
+              type={s.type ?? "monotone"}
+              dataKey={s.dataKey}
+              name={s.name}
+              stroke={getChartColor(index, s.color)}
+              strokeWidth={s.strokeWidth ?? 2}
+              strokeDasharray={s.strokeDasharray}
+              dot={s.dot ?? false}
+              isAnimationActive={isAnimated}
+              animationDuration={isAnimated ? 300 : 0}
+            />
+          ))}
+        </RechartsLineChart>
+      </ChartContainer>
+    );
+  },
+);
+
+LineChart.displayName = "LineChart";
+export { LineChart };

package/src/cartesian/scatter-chart.tsx

@@ -0,0 +1,158 @@
+import * as React from "react";
+import {
+  ScatterChart as RechartsScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  ZAxis,
+  CartesianGrid,
+  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,
+  ChartXAxis,
+  ChartYAxis,
+  ChartGrid,
+  ChartLegend,
+  ChartTooltipProp,
+} from "../shared/types";
+
+export interface ScatterChartSeries {
+  name: string;
+  data: Record<string, unknown>[];
+  color?: string;
+  /** Key for bubble size (optional, creates bubble chart) */
+  zDataKey?: string;
+}
+
+export interface ScatterChartProps extends BaseChartProps {
+  series: ScatterChartSeries[];
+  xAxis: ChartXAxis & { name?: string };
+  yAxis?: ChartYAxis & { name?: string };
+  zAxis?: { range?: [number, number] };
+  grid?: boolean | ChartGrid;
+  legend?: boolean | ChartLegend;
+  tooltip?: ChartTooltipProp;
+  loading?: boolean;
+}
+
+const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>(
+  (
+    {
+      series,
+      xAxis,
+      yAxis,
+      zAxis,
+      grid = true,
+      tooltip = true,
+      legend = false,
+      animate = true,
+      live = false,
+      className,
+      height = "100%",
+      margin = { top: 8, right: 12, left: 0, bottom: 4 },
+      loading,
+    },
+    ref,
+  ) => {
+    const gridConfig = React.useMemo(() => {
+      if (grid === false) return null;
+      if (grid === true) return { vertical: true, horizontal: true };
+      return grid;
+    }, [grid]);
+
+    const legendConfig = resolveLegendConfig(legend);
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
+    const hasZ = series.some((s) => s.zDataKey);
+
+    return (
+      <ChartContainer
+        ref={ref}
+        className={className}
+        height={height}
+        loading={loading}
+        empty={!series.some((s) => s.data?.length)}
+      >
+        <RechartsScatterChart margin={margin}>
+          {gridConfig && (
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="hsl(var(--divider))"
+              vertical={gridConfig.vertical ?? true}
+              horizontal={gridConfig.horizontal ?? true}
+            />
+          )}
+          <XAxis
+            dataKey={xAxis.dataKey}
+            name={xAxis.name ?? xAxis.dataKey}
+            type="number"
+            tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
+            tickLine={false}
+            axisLine={false}
+            tickFormatter={xAxis.tickFormatter}
+            label={
+              xAxis.label
+                ? {
+                    value: xAxis.label,
+                    position: "insideBottom",
+                    offset: -4,
+                    fontSize: 11,
+                    fill: "hsl(var(--muted-foreground))",
+                  }
+                : undefined
+            }
+          />
+          <YAxis
+            dataKey={yAxis?.domain ? undefined : "y"}
+            name={yAxis?.name}
+            type="number"
+            domain={yAxis?.domain ?? ["auto", "auto"]}
+            tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
+            tickLine={false}
+            axisLine={false}
+            width={yAxis?.width ?? 40}
+            tickFormatter={yAxis?.tickFormatter}
+            label={
+              yAxis?.label
+                ? {
+                    value: yAxis.label,
+                    angle: -90,
+                    position: "insideLeft",
+                    fontSize: 11,
+                    fill: "hsl(var(--muted-foreground))",
+                  }
+                : undefined
+            }
+          />
+          {hasZ && <ZAxis range={zAxis?.range ?? [40, 400]} />}
+          {tooltipProps && <Tooltip {...tooltipProps} />}
+          {legendConfig && (
+            <Legend
+              verticalAlign={legendConfig.position ?? "top"}
+              align={legendConfig.align ?? "right"}
+              content={<ChartLegendContent />}
+            />
+          )}
+          {series.map((s, index) => (
+            <Scatter
+              key={s.name}
+              name={s.name}
+              data={s.data}
+              fill={getChartColor(index, s.color)}
+              isAnimationActive={isAnimated}
+            />
+          ))}
+        </RechartsScatterChart>
+      </ChartContainer>
+    );
+  },
+);
+
+ScatterChart.displayName = "ScatterChart";
+export { ScatterChart };

package/src/cartesian/waterfall-chart.tsx

@@ -0,0 +1,171 @@
+import * as React from "react";
+import {
+  BarChart as RechartsBarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Cell,
+  ReferenceLine,
+} from "recharts";
+import { getSemanticColor } from "../shared/colors";
+import { resolveTooltipProps } from "../shared/chart-tooltip";
+import { ChartContainer } from "../shared/chart-container";
+import type { BaseChartProps, ChartXAxis, ChartYAxis, ChartTooltipProp } from "../shared/types";
+
+export interface WaterfallItem {
+  name: string;
+  value: number;
+  /** Mark as a summary/total bar rather than a delta */
+  isTotal?: boolean;
+}
+
+export interface WaterfallChartProps extends BaseChartProps {
+  data: WaterfallItem[];
+  xAxis?: Partial<ChartXAxis>;
+  yAxis?: ChartYAxis;
+  tooltip?: ChartTooltipProp;
+  positiveColor?: string;
+  negativeColor?: string;
+  totalColor?: string;
+  loading?: boolean;
+}
+
+interface WaterfallRow {
+  name: string;
+  invisible: number;
+  delta: number;
+  isTotal: boolean;
+  rawValue: number;
+}
+
+function buildWaterfallData(items: WaterfallItem[]): WaterfallRow[] {
+  let running = 0;
+  return items.map((item) => {
+    if (item.isTotal) {
+      const row: WaterfallRow = {
+        name: item.name,
+        invisible: 0,
+        delta: running,
+        isTotal: true,
+        rawValue: running,
+      };
+      return row;
+    }
+    const start = running;
+    running += item.value;
+    const base = item.value >= 0 ? start : running;
+    return {
+      name: item.name,
+      invisible: base,
+      delta: Math.abs(item.value),
+      isTotal: false,
+      rawValue: item.value,
+    };
+  });
+}
+
+const WaterfallChart = React.forwardRef<HTMLDivElement, WaterfallChartProps>(
+  (
+    {
+      data,
+      xAxis,
+      yAxis,
+      tooltip = true,
+      positiveColor,
+      negativeColor,
+      totalColor,
+      animate = true,
+      live = false,
+      className,
+      height = "100%",
+      margin = { top: 8, right: 12, left: 0, bottom: 4 },
+      loading,
+    },
+    ref,
+  ) => {
+    const rows = React.useMemo(() => buildWaterfallData(data), [data]);
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
+
+    const posColor = positiveColor ?? getSemanticColor("positive");
+    const negColor = negativeColor ?? getSemanticColor("negative");
+    const totColor = totalColor ?? "hsl(var(--chart-3))";
+
+    return (
+      <ChartContainer
+        ref={ref}
+        className={className}
+        height={height}
+        loading={loading}
+        empty={!data?.length}
+      >
+        <RechartsBarChart data={rows} margin={margin}>
+          <CartesianGrid
+            strokeDasharray="3 3"
+            stroke="hsl(var(--divider))"
+            vertical={false}
+          />
+          <XAxis
+            dataKey="name"
+            tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
+            tickLine={false}
+            axisLine={false}
+            tickFormatter={xAxis?.tickFormatter}
+          />
+          <YAxis
+            domain={yAxis?.domain ?? ["auto", "auto"]}
+            tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
+            tickLine={false}
+            axisLine={false}
+            width={yAxis?.width ?? 40}
+            tickFormatter={yAxis?.tickFormatter}
+            label={
+              yAxis?.label
+                ? {
+                    value: yAxis.label,
+                    angle: -90,
+                    position: "insideLeft",
+                    fontSize: 11,
+                    fill: "hsl(var(--muted-foreground))",
+                  }
+                : undefined
+            }
+          />
+          <ReferenceLine y={0} stroke="hsl(var(--divider))" />
+          {tooltipProps && <Tooltip {...tooltipProps} />}
+          <Bar
+            dataKey="invisible"
+            stackId="waterfall"
+            fill="transparent"
+            isAnimationActive={false}
+          />
+          <Bar
+            dataKey="delta"
+            stackId="waterfall"
+            isAnimationActive={isAnimated}
+            animationDuration={isAnimated ? 300 : 0}
+            radius={[2, 2, 0, 0]}
+          >
+            {rows.map((row, i) => (
+              <Cell
+                key={i}
+                fill={
+                  row.isTotal
+                    ? totColor
+                    : row.rawValue >= 0
+                      ? posColor
+                      : negColor
+                }
+              />
+            ))}
+          </Bar>
+        </RechartsBarChart>
+      </ChartContainer>
+    );
+  },
+);
+
+WaterfallChart.displayName = "WaterfallChart";
+export { WaterfallChart };