@optilogic/charts 1.0.0-beta.9 → 1.1.0

package/src/dashboard/chart-builder.tsx

@@ -0,0 +1,310 @@
+import * as React from "react";
+import { cn } from "@optilogic/core";
+import { ChartRenderer, type ChartConfig } from "./chart-renderer";
+
+const CHART_TYPE_OPTIONS = [
+  { value: "line", label: "Line" },
+  { value: "bar", label: "Bar" },
+  { value: "area", label: "Area" },
+  { value: "pie", label: "Pie" },
+  { value: "donut", label: "Donut" },
+  { value: "scatter", label: "Scatter" },
+  { value: "radar", label: "Radar" },
+  { value: "composed", label: "Composed" },
+  { value: "waterfall", label: "Waterfall" },
+  { value: "funnel", label: "Funnel" },
+  { value: "treemap", label: "Treemap" },
+  { value: "radialBar", label: "Radial Bar" },
+  { value: "heatmap", label: "Heatmap" },
+] as const;
+
+const LEGEND_POSITIONS = [
+  { value: "none", label: "None" },
+  { value: "top-left", label: "Top Left" },
+  { value: "top-center", label: "Top Center" },
+  { value: "top-right", label: "Top Right" },
+  { value: "bottom-center", label: "Bottom Center" },
+] as const;
+
+export interface ChartBuilderProps {
+  /** Available data columns the user can map to chart dimensions */
+  columns: string[];
+  /** The raw data rows */
+  data: Record<string, unknown>[];
+  /** Called when the config changes */
+  onChange?: (config: ChartConfig) => void;
+  /** Called when user explicitly saves */
+  onSave?: (config: ChartConfig) => void;
+  /** Initial config to start editing */
+  initialConfig?: Partial<ChartConfig>;
+  className?: string;
+}
+
+function useControlledConfig(
+  initial: Partial<ChartConfig> | undefined,
+  columns: string[],
+): [ChartConfig, React.Dispatch<React.SetStateAction<ChartConfig>>] {
+  const defaultConfig: ChartConfig = {
+    type: "bar",
+    categoryKey: columns[0] ?? "",
+    series: columns.length > 1 ? [{ dataKey: columns[1], name: columns[1] }] : [],
+    legend: "none",
+    grid: true,
+    animate: true,
+  };
+  return React.useState<ChartConfig>({ ...defaultConfig, ...initial });
+}
+
+const selectStyle: React.CSSProperties = {
+  width: "100%",
+  padding: "5px 8px",
+  fontSize: 12,
+  borderRadius: 4,
+  border: "1px solid hsl(var(--border))",
+  background: "hsl(var(--card))",
+  color: "hsl(var(--foreground))",
+};
+
+const labelStyle: React.CSSProperties = {
+  fontSize: 11,
+  fontWeight: 500,
+  color: "hsl(var(--muted-foreground))",
+  marginBottom: 3,
+  display: "block",
+};
+
+const ChartBuilder = React.memo(function ChartBuilder({
+  columns,
+  data,
+  onChange,
+  onSave,
+  initialConfig,
+  className,
+}: ChartBuilderProps) {
+  const [config, setConfig] = useControlledConfig(initialConfig, columns);
+
+  React.useEffect(() => {
+    onChange?.(config);
+  }, [config, onChange]);
+
+  const addSeries = () => {
+    const unused = columns.find(
+      (c) =>
+        c !== config.categoryKey &&
+        !config.series.some((s) => s.dataKey === c),
+    );
+    if (!unused) return;
+    setConfig((prev) => ({
+      ...prev,
+      series: [...prev.series, { dataKey: unused, name: unused }],
+    }));
+  };
+
+  const removeSeries = (index: number) => {
+    setConfig((prev) => ({
+      ...prev,
+      series: prev.series.filter((_, i) => i !== index),
+    }));
+  };
+
+  const updateSeries = (index: number, field: string, value: string) => {
+    setConfig((prev) => ({
+      ...prev,
+      series: prev.series.map((s, i) =>
+        i === index ? { ...s, [field]: value } : s,
+      ),
+    }));
+  };
+
+  return (
+    <div
+      className={cn("flex gap-4", className)}
+      style={{ minHeight: 400 }}
+    >
+      {/* Config panel */}
+      <div
+        className="flex flex-col gap-3 shrink-0 overflow-y-auto"
+        style={{
+          width: 240,
+          padding: 12,
+          background: "hsl(var(--card))",
+          border: "1px solid hsl(var(--border))",
+          borderRadius: 8,
+        }}
+      >
+        <div style={{ fontSize: 13, fontWeight: 600, color: "hsl(var(--foreground))" }}>
+          Chart Builder
+        </div>
+
+        {/* Chart type */}
+        <div>
+          <label style={labelStyle}>Chart Type</label>
+          <select
+            style={selectStyle}
+            value={config.type}
+            onChange={(e) =>
+              setConfig((prev) => ({ ...prev, type: e.target.value as ChartConfig["type"] }))
+            }
+          >
+            {CHART_TYPE_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>{opt.label}</option>
+            ))}
+          </select>
+        </div>
+
+        {/* Category axis */}
+        <div>
+          <label style={labelStyle}>Category Axis</label>
+          <select
+            style={selectStyle}
+            value={config.categoryKey}
+            onChange={(e) =>
+              setConfig((prev) => ({ ...prev, categoryKey: e.target.value }))
+            }
+          >
+            {columns.map((c) => (
+              <option key={c} value={c}>{c}</option>
+            ))}
+          </select>
+        </div>
+
+        {/* Series */}
+        <div>
+          <label style={labelStyle}>Series</label>
+          {config.series.map((s, i) => (
+            <div
+              key={i}
+              className="flex gap-1 items-center"
+              style={{ marginBottom: 4 }}
+            >
+              <select
+                style={{ ...selectStyle, flex: 1 }}
+                value={s.dataKey}
+                onChange={(e) => updateSeries(i, "dataKey", e.target.value)}
+              >
+                {columns
+                  .filter((c) => c !== config.categoryKey)
+                  .map((c) => (
+                    <option key={c} value={c}>{c}</option>
+                  ))}
+              </select>
+              <button
+                onClick={() => removeSeries(i)}
+                style={{
+                  padding: "2px 6px",
+                  fontSize: 14,
+                  lineHeight: 1,
+                  border: "1px solid hsl(var(--border))",
+                  borderRadius: 4,
+                  background: "hsl(var(--card))",
+                  color: "hsl(var(--muted-foreground))",
+                  cursor: "pointer",
+                }}
+              >
+                ×
+              </button>
+            </div>
+          ))}
+          <button
+            onClick={addSeries}
+            style={{
+              width: "100%",
+              padding: "4px 8px",
+              fontSize: 11,
+              border: "1px dashed hsl(var(--border))",
+              borderRadius: 4,
+              background: "transparent",
+              color: "hsl(var(--muted-foreground))",
+              cursor: "pointer",
+              marginTop: 2,
+            }}
+          >
+            + Add Series
+          </button>
+        </div>
+
+        {/* Legend */}
+        <div>
+          <label style={labelStyle}>Legend</label>
+          <select
+            style={selectStyle}
+            value={config.legend}
+            onChange={(e) =>
+              setConfig((prev) => ({ ...prev, legend: e.target.value }))
+            }
+          >
+            {LEGEND_POSITIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>{opt.label}</option>
+            ))}
+          </select>
+        </div>
+
+        {/* Grid toggle */}
+        <div className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            id="grid-toggle"
+            checked={config.grid}
+            onChange={(e) =>
+              setConfig((prev) => ({ ...prev, grid: e.target.checked }))
+            }
+          />
+          <label htmlFor="grid-toggle" style={{ ...labelStyle, margin: 0 }}>
+            Show Grid
+          </label>
+        </div>
+
+        {/* Animate toggle */}
+        <div className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            id="animate-toggle"
+            checked={config.animate}
+            onChange={(e) =>
+              setConfig((prev) => ({ ...prev, animate: e.target.checked }))
+            }
+          />
+          <label htmlFor="animate-toggle" style={{ ...labelStyle, margin: 0 }}>
+            Animate
+          </label>
+        </div>
+
+        {onSave && (
+          <button
+            onClick={() => onSave(config)}
+            style={{
+              marginTop: 8,
+              padding: "6px 12px",
+              fontSize: 12,
+              fontWeight: 600,
+              borderRadius: 6,
+              border: "none",
+              background: "hsl(var(--primary))",
+              color: "hsl(var(--primary-foreground))",
+              cursor: "pointer",
+            }}
+          >
+            Save Chart
+          </button>
+        )}
+      </div>
+
+      {/* Preview */}
+      <div
+        className="flex-1"
+        style={{
+          border: "1px solid hsl(var(--border))",
+          borderRadius: 8,
+          padding: 12,
+          background: "hsl(var(--background))",
+          minHeight: 300,
+        }}
+      >
+        <ChartRenderer config={config} data={data} height="100%" />
+      </div>
+    </div>
+  );
+});
+
+ChartBuilder.displayName = "ChartBuilder";
+export { ChartBuilder };

package/src/dashboard/chart-renderer.tsx

@@ -0,0 +1,250 @@
+import * as React from "react";
+import { LineChart } from "../cartesian/line-chart";
+import { BarChart } from "../cartesian/bar-chart";
+import { AreaChart } from "../cartesian/area-chart";
+import { ScatterChart } from "../cartesian/scatter-chart";
+import { ComposedChart } from "../cartesian/composed-chart";
+import { WaterfallChart, type WaterfallItem } from "../cartesian/waterfall-chart";
+import { PieChart } from "../radial/pie-chart";
+import { DonutChart } from "../radial/donut-chart";
+import { RadarChart } from "../radial/radar-chart";
+import { RadialBarChart } from "../radial/radial-bar-chart";
+import { FunnelChart } from "../specialized/funnel-chart";
+import { TreemapChart } from "../specialized/treemap-chart";
+import { HeatmapChart } from "../specialized/heatmap-chart";
+import type { ChartLegend, ChartTooltipProp } from "../shared/types";
+
+export interface ChartConfigSeries {
+  dataKey: string;
+  name: string;
+  color?: string;
+  /** Only used for composed chart */
+  composedType?: "line" | "bar" | "area";
+}
+
+export interface ChartConfig {
+  type:
+    | "line"
+    | "bar"
+    | "area"
+    | "pie"
+    | "donut"
+    | "scatter"
+    | "radar"
+    | "composed"
+    | "waterfall"
+    | "funnel"
+    | "treemap"
+    | "radialBar"
+    | "heatmap";
+  categoryKey: string;
+  series: ChartConfigSeries[];
+  legend?: string;
+  grid?: boolean;
+  animate?: boolean;
+  tooltip?: ChartTooltipProp;
+}
+
+export interface ChartRendererProps {
+  config: ChartConfig;
+  data: Record<string, unknown>[];
+  height?: number | string;
+  className?: string;
+}
+
+function resolveLegendFromString(
+  val: string | undefined,
+): boolean | ChartLegend {
+  if (!val || val === "none") return false;
+  const parts = val.split("-");
+  return {
+    position: (parts[0] as "top" | "bottom") ?? "top",
+    align: (parts[1] as "left" | "center" | "right") ?? "right",
+  };
+}
+
+const ChartRenderer = React.memo(function ChartRenderer({
+  config,
+  data,
+  height = "100%",
+  className,
+}: ChartRendererProps) {
+  if (!data?.length || !config.series.length) {
+    return (
+      <div
+        className={className}
+        style={{
+          height,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "hsl(var(--muted-foreground))",
+          fontSize: 12,
+        }}
+      >
+        Configure a chart to preview
+      </div>
+    );
+  }
+
+  const legend = resolveLegendFromString(config.legend);
+  const common = {
+    className,
+    height,
+    grid: config.grid ?? true,
+    animate: config.animate ?? true,
+    tooltip: config.tooltip ?? true,
+    legend,
+  };
+  const xAxis = { dataKey: config.categoryKey };
+  const series = config.series;
+
+  switch (config.type) {
+    case "line":
+      return <LineChart data={data} series={series} xAxis={xAxis} {...common} />;
+    case "bar":
+      return <BarChart data={data} series={series} xAxis={xAxis} {...common} />;
+    case "area":
+      return <AreaChart data={data} series={series} xAxis={xAxis} {...common} />;
+    case "pie":
+      return (
+        <PieChart
+          data={data.map((d) => ({
+            name: String(d[config.categoryKey]),
+            value: Number(d[series[0].dataKey] ?? 0),
+          }))}
+          label
+          {...common}
+        />
+      );
+    case "donut":
+      return (
+        <DonutChart
+          data={data.map((d) => ({
+            name: String(d[config.categoryKey]),
+            value: Number(d[series[0].dataKey] ?? 0),
+          }))}
+          {...common}
+        />
+      );
+    case "scatter":
+      return (
+        <ScatterChart
+          series={[
+            {
+              name: series[0]?.name ?? "Data",
+              data: data as Record<string, unknown>[],
+            },
+          ]}
+          xAxis={{ ...xAxis, name: config.categoryKey }}
+          {...common}
+        />
+      );
+    case "radar":
+      return (
+        <RadarChart
+          data={data}
+          series={series}
+          categoryKey={config.categoryKey}
+          {...common}
+        />
+      );
+    case "composed":
+      return (
+        <ComposedChart
+          data={data}
+          series={series.map((s) => ({
+            type: s.composedType ?? "bar",
+            dataKey: s.dataKey,
+            name: s.name,
+            color: s.color,
+          }))}
+          xAxis={xAxis}
+          {...common}
+        />
+      );
+    case "waterfall":
+      return (
+        <WaterfallChart
+          data={data.map((d) => ({
+            name: String(d[config.categoryKey]),
+            value: Number(d[series[0]?.dataKey] ?? 0),
+          }))}
+          {...common}
+        />
+      );
+    case "funnel":
+      return (
+        <FunnelChart
+          data={data.map((d) => ({
+            name: String(d[config.categoryKey]),
+            value: Number(d[series[0]?.dataKey] ?? 0),
+          }))}
+          {...common}
+        />
+      );
+    case "treemap":
+      return (
+        <TreemapChart
+          data={data.map((d) => ({
+            name: String(d[config.categoryKey]),
+            value: Number(d[series[0]?.dataKey] ?? 0),
+          }))}
+          {...common}
+        />
+      );
+    case "radialBar":
+      return (
+        <RadialBarChart
+          data={data.map((d) => ({
+            name: String(d[config.categoryKey]),
+            value: Number(d[series[0]?.dataKey] ?? 0),
+          }))}
+          {...common}
+        />
+      );
+    case "heatmap": {
+      if (series.length < 2) {
+        return (
+          <div
+            style={{
+              height,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "hsl(var(--muted-foreground))",
+              fontSize: 12,
+            }}
+          >
+            Heatmap requires at least 2 series (x, value)
+          </div>
+        );
+      }
+      const xLabels = Array.from(
+        new Set(data.map((d) => String(d[config.categoryKey]))),
+      );
+      const yLabels = Array.from(
+        new Set(data.map((d) => String(d[series[0].dataKey]))),
+      );
+      const cells = data.map((d) => ({
+        x: String(d[config.categoryKey]),
+        y: String(d[series[0].dataKey]),
+        value: Number(d[series[1].dataKey] ?? 0),
+      }));
+      return (
+        <HeatmapChart
+          data={cells}
+          xLabels={xLabels}
+          yLabels={yLabels}
+          height={height}
+          className={className}
+        />
+      );
+    }
+    default:
+      return null;
+  }
+});
+
+ChartRenderer.displayName = "ChartRenderer";
+export { ChartRenderer };

package/src/dashboard/kpi-card.tsx

@@ -0,0 +1,121 @@
+import * as React from "react";
+import { cn } from "@optilogic/core";
+import { Sparkline, type SparklineVariant } from "./sparkline";
+
+export interface KPICardProps {
+  label: string;
+  value: string | number;
+  /** Previous period value for comparison */
+  previousValue?: number;
+  /** Change descriptor (e.g. "vs last month") */
+  changeLabel?: string;
+  sparklineData?: number[];
+  sparklineVariant?: SparklineVariant;
+  sparklineColor?: string;
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+const KPICard = React.memo(function KPICard({
+  label,
+  value,
+  previousValue,
+  changeLabel,
+  sparklineData,
+  sparklineVariant = "area",
+  sparklineColor,
+  icon,
+  className,
+}: KPICardProps) {
+  const currentNum = typeof value === "number" ? value : parseFloat(String(value));
+  const hasDelta =
+    previousValue != null && !isNaN(currentNum) && previousValue !== 0;
+  const delta = hasDelta ? ((currentNum - previousValue!) / previousValue!) * 100 : null;
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg border p-4 flex flex-col gap-2",
+        className,
+      )}
+      style={{
+        background: "hsl(var(--card))",
+        borderColor: "hsl(var(--border))",
+      }}
+    >
+      <div className="flex items-center justify-between">
+        <span
+          style={{
+            fontSize: 12,
+            color: "hsl(var(--muted-foreground))",
+            fontWeight: 500,
+          }}
+        >
+          {label}
+        </span>
+        {icon && (
+          <span style={{ color: "hsl(var(--muted-foreground))" }}>{icon}</span>
+        )}
+      </div>
+      <div className="flex items-end justify-between gap-3">
+        <div className="flex flex-col gap-1">
+          <span
+            style={{
+              fontSize: 22,
+              fontWeight: 700,
+              color: "hsl(var(--foreground))",
+              lineHeight: 1,
+              fontVariantNumeric: "tabular-nums",
+            }}
+          >
+            {value}
+          </span>
+          {delta != null && (
+            <span
+              style={{
+                fontSize: 11,
+                fontWeight: 500,
+                color:
+                  delta > 0
+                    ? "hsl(var(--success))"
+                    : delta < 0
+                      ? "hsl(var(--destructive))"
+                      : "hsl(var(--muted-foreground))",
+                display: "flex",
+                alignItems: "center",
+                gap: 2,
+              }}
+            >
+              {delta >= 0 ? "▲" : "▼"} {delta >= 0 ? "+" : ""}
+              {delta.toFixed(1)}%
+              {changeLabel && (
+                <span style={{ color: "hsl(var(--muted-foreground))", marginLeft: 4 }}>
+                  {changeLabel}
+                </span>
+              )}
+            </span>
+          )}
+        </div>
+        {sparklineData && sparklineData.length > 1 && (
+          <Sparkline
+            data={sparklineData}
+            variant={sparklineVariant}
+            color={
+              sparklineColor ??
+              (delta != null
+                ? delta >= 0
+                  ? "hsl(var(--success))"
+                  : "hsl(var(--destructive))"
+                : undefined)
+            }
+            width={80}
+            height={32}
+          />
+        )}
+      </div>
+    </div>
+  );
+});
+
+KPICard.displayName = "KPICard";
+export { KPICard };