@optilogic/charts 1.0.0-beta.9 → 1.0.0

package/src/radial/radar-chart.tsx

@@ -0,0 +1,111 @@
+import * as React from "react";
+import {
+  RadarChart as RechartsRadarChart,
+  Radar,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  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 RadarChartSeries {
+  dataKey: string;
+  name: string;
+  color?: string;
+  fillOpacity?: number;
+  strokeWidth?: number;
+  /** Use dashed stroke for baseline/reference series */
+  strokeDasharray?: string;
+}
+
+export interface RadarChartProps extends BaseChartProps {
+  data: Record<string, unknown>[];
+  series: RadarChartSeries[];
+  /** Key in data used for the angle axis labels */
+  categoryKey: string;
+  domain?: [number, number];
+  legend?: boolean | ChartLegend;
+  tooltip?: ChartTooltipProp;
+  loading?: boolean;
+}
+
+const RadarChart = React.forwardRef<HTMLDivElement, RadarChartProps>(
+  (
+    {
+      data,
+      series,
+      categoryKey,
+      domain,
+      legend = false,
+      tooltip = true,
+      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}
+      >
+        <RechartsRadarChart data={data} margin={margin} cx="50%" cy="50%">
+          <PolarGrid stroke="hsl(var(--divider))" />
+          <PolarAngleAxis
+            dataKey={categoryKey}
+            tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
+          />
+          <PolarRadiusAxis
+            domain={domain}
+            tick={{ fontSize: 9, fill: "hsl(var(--muted-foreground))" }}
+            axisLine={false}
+          />
+          {tooltipProps && <Tooltip {...tooltipProps} />}
+          {legendConfig && (
+            <Legend
+              verticalAlign={legendConfig.position ?? "bottom"}
+              align={legendConfig.align ?? "center"}
+              content={<ChartLegendContent />}
+            />
+          )}
+          {series.map((s, index) => {
+            const color = getChartColor(index, s.color);
+            return (
+              <Radar
+                key={s.dataKey}
+                name={s.name}
+                dataKey={s.dataKey}
+                stroke={color}
+                strokeWidth={s.strokeWidth ?? 2}
+                strokeDasharray={s.strokeDasharray}
+                fill={color}
+                fillOpacity={s.fillOpacity ?? 0.15}
+                isAnimationActive={isAnimated}
+                animationDuration={isAnimated ? 400 : 0}
+              />
+            );
+          })}
+        </RechartsRadarChart>
+      </ChartContainer>
+    );
+  },
+);
+
+RadarChart.displayName = "RadarChart";
+export { RadarChart };

package/src/radial/radial-bar-chart.tsx

@@ -0,0 +1,115 @@
+import * as React from "react";
+import {
+  RadialBarChart as RechartsRadialBarChart,
+  RadialBar,
+  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 RadialBarDatum {
+  name: string;
+  value: number;
+  fill?: string;
+}
+
+export interface RadialBarChartProps extends BaseChartProps {
+  data: RadialBarDatum[];
+  innerRadius?: number | string;
+  outerRadius?: number | string;
+  startAngle?: number;
+  endAngle?: number;
+  legend?: boolean | ChartLegend;
+  tooltip?: ChartTooltipProp;
+  /** Show value labels on each bar */
+  showLabels?: boolean;
+  loading?: boolean;
+}
+
+const RadialBarChart = React.forwardRef<HTMLDivElement, RadialBarChartProps>(
+  (
+    {
+      data,
+      innerRadius = "30%",
+      outerRadius = "90%",
+      startAngle = 180,
+      endAngle = 0,
+      legend = false,
+      tooltip = true,
+      showLabels = true,
+      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 coloredData = React.useMemo(
+      () =>
+        data.map((d, i) => ({
+          ...d,
+          fill: d.fill ?? getChartColor(i),
+        })),
+      [data],
+    );
+
+    return (
+      <ChartContainer
+        ref={ref}
+        className={className}
+        height={height}
+        loading={loading}
+        empty={!data?.length}
+      >
+        <RechartsRadialBarChart
+          data={coloredData}
+          innerRadius={innerRadius}
+          outerRadius={outerRadius}
+          startAngle={startAngle}
+          endAngle={endAngle}
+          margin={margin}
+          cx="50%"
+          cy="50%"
+        >
+          <RadialBar
+            dataKey="value"
+            background={{ fill: "hsl(var(--muted))" }}
+            isAnimationActive={isAnimated}
+            animationDuration={isAnimated ? 400 : 0}
+            label={
+              showLabels
+                ? {
+                    position: "insideStart",
+                    fill: "hsl(var(--foreground))",
+                    fontSize: 10,
+                    fontWeight: 600,
+                  }
+                : false
+            }
+          />
+          {tooltipProps && <Tooltip {...tooltipProps} />}
+          {legendConfig && (
+            <Legend
+              verticalAlign={legendConfig.position ?? "bottom"}
+              align={legendConfig.align ?? "center"}
+              content={<ChartLegendContent />}
+            />
+          )}
+        </RechartsRadialBarChart>
+      </ChartContainer>
+    );
+  },
+);
+
+RadialBarChart.displayName = "RadialBarChart";
+export { RadialBarChart };

package/src/shared/chart-container.tsx

@@ -0,0 +1,104 @@
+import * as React from "react";
+import { ResponsiveContainer } from "recharts";
+import { cn } from "@optilogic/core";
+
+export interface ChartContainerProps {
+  children: React.ReactNode;
+  className?: string;
+  height?: number | string;
+  loading?: boolean;
+  empty?: boolean;
+  emptyMessage?: string;
+  title?: string;
+  description?: string;
+}
+
+export const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  ChartContainerProps
+>(function ChartContainer(
+  {
+    children,
+    className,
+    height = "100%",
+    loading,
+    empty,
+    emptyMessage = "No data available",
+    title,
+    description,
+  },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cn("w-full", className)} style={{ height }}>
+      {(title || description) && (
+        <div style={{ marginBottom: 8 }}>
+          {title && (
+            <div
+              style={{
+                fontSize: 13,
+                fontWeight: 600,
+                color: "hsl(var(--foreground))",
+              }}
+            >
+              {title}
+            </div>
+          )}
+          {description && (
+            <div
+              style={{
+                fontSize: 11,
+                color: "hsl(var(--muted-foreground))",
+                marginTop: 2,
+              }}
+            >
+              {description}
+            </div>
+          )}
+        </div>
+      )}
+      {loading ? (
+        <div
+          style={{
+            width: "100%",
+            height: title || description ? "calc(100% - 40px)" : "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <div
+            className="animate-pulse"
+            style={{
+              width: "80%",
+              height: "60%",
+              borderRadius: 6,
+              background: "hsl(var(--muted))",
+            }}
+          />
+        </div>
+      ) : empty ? (
+        <div
+          style={{
+            width: "100%",
+            height: title || description ? "calc(100% - 40px)" : "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "hsl(var(--muted-foreground))",
+            fontSize: 12,
+          }}
+        >
+          {emptyMessage}
+        </div>
+      ) : (
+        <ResponsiveContainer
+          width="100%"
+          height={title || description ? "calc(100% - 40px)" : "100%"}
+        >
+          {children as React.ReactElement}
+        </ResponsiveContainer>
+      )}
+    </div>
+  );
+});

package/src/shared/chart-legend.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import type { ChartLegend } from "./types";
+
+interface LegendPayloadItem {
+  value: string;
+  color: string;
+  dataKey?: string;
+}
+
+interface ChartLegendContentProps {
+  payload?: LegendPayloadItem[];
+}
+
+export const ChartLegendContent = React.memo(function ChartLegendContent({
+  payload,
+}: ChartLegendContentProps) {
+  if (!payload?.length) return null;
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "8px 16px",
+        fontSize: 11,
+        lineHeight: 1,
+        padding: "0 0 4px",
+      }}
+    >
+      {payload.map((entry, i) => (
+        <span
+          key={entry.dataKey ?? i}
+          style={{ display: "flex", alignItems: "center", gap: 5 }}
+        >
+          <span
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: "50%",
+              background: entry.color,
+              flexShrink: 0,
+            }}
+          />
+          <span style={{ color: "hsl(var(--muted-foreground))" }}>
+            {entry.value}
+          </span>
+        </span>
+      ))}
+    </div>
+  );
+});
+
+export function resolveLegendConfig(legend: boolean | ChartLegend | undefined) {
+  if (legend === false || legend === undefined) return null;
+  if (legend === true) return { position: "top" as const, align: "right" as const };
+  return legend;
+}

package/src/shared/chart-tooltip.tsx

@@ -0,0 +1,159 @@
+import * as React from "react";
+import type { TooltipProps } from "recharts";
+import type { ChartTooltipConfig } from "./types";
+
+interface ChartTooltipPayloadItem {
+  name: string;
+  value: number;
+  color: string;
+  dataKey: string;
+  payload: Record<string, unknown>;
+}
+
+export interface ChartTooltipContentProps
+  extends TooltipProps<number, string> {
+  config?: ChartTooltipConfig;
+}
+
+export const ChartTooltipContent = React.memo(function ChartTooltipContent({
+  active,
+  payload,
+  label,
+  config,
+}: ChartTooltipContentProps) {
+  if (!active || !payload?.length) return null;
+
+  const items = payload as unknown as ChartTooltipPayloadItem[];
+
+  const formattedLabel = config?.labelFormatter
+    ? config.labelFormatter(String(label))
+    : String(label ?? "");
+
+  const total = config?.showTotal
+    ? items.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
+    : null;
+
+  return (
+    <div
+      style={{
+        background: "hsl(var(--card))",
+        border: "1px solid hsl(var(--border))",
+        borderRadius: 6,
+        padding: "8px 10px",
+        fontSize: 11,
+        lineHeight: 1.5,
+        boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+        minWidth: 120,
+      }}
+    >
+      {formattedLabel && (
+        <div
+          style={{
+            color: "hsl(var(--foreground))",
+            fontWeight: 600,
+            marginBottom: 4,
+            borderBottom: "1px solid hsl(var(--border))",
+            paddingBottom: 4,
+          }}
+        >
+          {formattedLabel}
+        </div>
+      )}
+      {items.map((item, i) => {
+        const formatted = config?.formatter
+          ? config.formatter(Number(item.value), item.name)
+          : String(item.value);
+        const displayValue = Array.isArray(formatted) ? formatted[0] : formatted;
+        const displayName = Array.isArray(formatted) ? formatted[1] : item.name;
+
+        let delta: React.ReactNode = null;
+        if (config?.showDelta && config.baseline) {
+          const baselineValue = Number(
+            item.payload?.[config.baseline] ?? 0,
+          );
+          if (baselineValue !== 0) {
+            const diff = Number(item.value) - baselineValue;
+            const pct = ((diff / baselineValue) * 100).toFixed(1);
+            const sign = diff >= 0 ? "+" : "";
+            const color =
+              diff > 0
+                ? "hsl(var(--success))"
+                : diff < 0
+                  ? "hsl(var(--destructive))"
+                  : "hsl(var(--muted-foreground))";
+            delta = (
+              <span style={{ color, marginLeft: 4, fontSize: 10 }}>
+                {diff >= 0 ? "▲" : "▼"} {sign}{pct}%
+              </span>
+            );
+          }
+        }
+
+        return (
+          <div
+            key={item.dataKey ?? i}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 12,
+              padding: "1px 0",
+            }}
+          >
+            <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
+              <span
+                style={{
+                  width: 8,
+                  height: 8,
+                  borderRadius: "50%",
+                  background: item.color,
+                  flexShrink: 0,
+                }}
+              />
+              <span style={{ color: "hsl(var(--muted-foreground))" }}>
+                {displayName}
+              </span>
+            </span>
+            <span
+              style={{
+                fontWeight: 600,
+                color: "hsl(var(--foreground))",
+                fontVariantNumeric: "tabular-nums",
+              }}
+            >
+              {displayValue}
+              {delta}
+            </span>
+          </div>
+        );
+      })}
+      {total != null && (
+        <div
+          style={{
+            borderTop: "1px solid hsl(var(--border))",
+            marginTop: 4,
+            paddingTop: 4,
+            display: "flex",
+            justifyContent: "space-between",
+            fontWeight: 600,
+            color: "hsl(var(--foreground))",
+          }}
+        >
+          <span>Total</span>
+          <span style={{ fontVariantNumeric: "tabular-nums" }}>
+            {config?.formatter ? config.formatter(total, "Total") : total}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+});
+
+/** Resolve the tooltip prop into Recharts Tooltip props */
+export function resolveTooltipProps(tooltip: boolean | ChartTooltipConfig | undefined) {
+  if (tooltip === false || tooltip === undefined) return null;
+  if (tooltip === true) return { content: <ChartTooltipContent /> };
+  return {
+    content: <ChartTooltipContent config={tooltip} />,
+  };
+}

package/src/shared/colors.ts

@@ -0,0 +1,37 @@
+/** Theme-aware chart colors from CSS variables */
+export const CHART_COLORS = [
+  "hsl(var(--chart-1))",
+  "hsl(var(--chart-2))",
+  "hsl(var(--chart-3))",
+  "hsl(var(--chart-4))",
+  "hsl(var(--chart-5))",
+  "hsl(var(--chart-6))",
+  "hsl(var(--chart-7))",
+  "hsl(var(--chart-8))",
+  "hsl(var(--chart-9))",
+  "hsl(var(--chart-10))",
+  "hsl(var(--chart-11))",
+  "hsl(var(--chart-12))",
+] as const;
+
+export function getChartColor(index: number, custom?: string): string {
+  if (custom) return custom;
+  return CHART_COLORS[index % CHART_COLORS.length] ?? "hsl(var(--chart-1))";
+}
+
+export type SemanticColorName =
+  | "positive"
+  | "negative"
+  | "neutral"
+  | "warning";
+
+const SEMANTIC_COLORS: Record<SemanticColorName, string> = {
+  positive: "hsl(var(--success))",
+  negative: "hsl(var(--destructive))",
+  neutral: "hsl(var(--muted-foreground))",
+  warning: "hsl(var(--warning))",
+};
+
+export function getSemanticColor(name: SemanticColorName): string {
+  return SEMANTIC_COLORS[name];
+}

package/src/shared/formatters.ts

@@ -0,0 +1,51 @@
+const compactThresholds: [number, string][] = [
+  [1_000_000_000, "B"],
+  [1_000_000, "M"],
+  [1_000, "K"],
+];
+
+export function formatCompact(value: number, decimals = 1): string {
+  for (const [threshold, suffix] of compactThresholds) {
+    if (Math.abs(value) >= threshold) {
+      return `${(value / threshold).toFixed(decimals)}${suffix}`;
+    }
+  }
+  return value.toLocaleString();
+}
+
+export function formatCurrency(
+  value: number,
+  currency = "USD",
+  decimals?: number,
+): string {
+  if (Math.abs(value) >= 1_000_000) {
+    return `$${formatCompact(value, decimals ?? 1)}`;
+  }
+  return value.toLocaleString("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: decimals ?? 0,
+    maximumFractionDigits: decimals ?? 0,
+  });
+}
+
+export function formatPercent(value: number, decimals = 1): string {
+  return `${value.toFixed(decimals)}%`;
+}
+
+export function formatUnit(value: number, unit: string, decimals = 1): string {
+  return `${value.toLocaleString(undefined, { maximumFractionDigits: decimals })} ${unit}`;
+}
+
+export function formatDuration(seconds: number): string {
+  if (seconds < 60) return `${Math.round(seconds)}s`;
+  if (seconds < 3600) return `${Math.round(seconds / 60)}m`;
+  if (seconds < 86400) {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.round((seconds % 3600) / 60);
+    return m > 0 ? `${h}h ${m}m` : `${h}h`;
+  }
+  const d = Math.floor(seconds / 86400);
+  const h = Math.round((seconds % 86400) / 3600);
+  return h > 0 ? `${d}d ${h}h` : `${d}d`;
+}

package/src/shared/types.ts

@@ -0,0 +1,66 @@
+/** X-axis configuration shared across cartesian charts */
+export interface ChartXAxis {
+  dataKey: string;
+  label?: string;
+  tickFormatter?: (value: unknown) => string;
+  minTickGap?: number;
+}
+
+/** Y-axis configuration shared across cartesian charts */
+export interface ChartYAxis {
+  domain?: [
+    number | "auto" | "dataMin" | "dataMax",
+    number | "auto" | "dataMin" | "dataMax",
+  ];
+  label?: string;
+  tickFormatter?: (value: unknown) => string;
+  width?: number;
+}
+
+/** Grid configuration */
+export interface ChartGrid {
+  vertical?: boolean;
+  horizontal?: boolean;
+}
+
+/** Legend configuration */
+export interface ChartLegend {
+  position?: "top" | "bottom";
+  align?: "left" | "center" | "right";
+}
+
+/** Chart margin */
+export interface ChartMargin {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+}
+
+/** Tooltip value formatter */
+export type TooltipFormatter = (
+  value: number,
+  name: string,
+) => string | [string, string];
+
+/** Tooltip configuration (pass true for defaults, false to disable) */
+export interface ChartTooltipConfig {
+  formatter?: TooltipFormatter;
+  labelFormatter?: (label: string) => string;
+  showTotal?: boolean;
+  showDelta?: boolean;
+  baseline?: string;
+}
+
+export type ChartTooltipProp = boolean | ChartTooltipConfig;
+
+/** Common props shared by all charts */
+export interface BaseChartProps {
+  className?: string;
+  height?: number | string;
+  margin?: ChartMargin;
+  animate?: boolean;
+  tooltip?: ChartTooltipProp;
+  /** Disables animation and optimises for frequent data updates */
+  live?: boolean;
+}