@optilogic/charts 1.0.0-beta.9 → 1.1.0

package/src/bar-chart.tsx

@@ -1,337 +0,0 @@
-/**
- * BarChart
- *
- * A reusable, theme-aware bar chart component built on Recharts.
- * Supports vertical/horizontal layouts, stacked/grouped bars,
- * configurable axes, animations, and styling that integrates
- * with the project's CSS variable theming system.
- */
-
-import * as React from "react";
-import {
-  BarChart as RechartsBarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from "recharts";
-import { cn } from "@optilogic/core";
-import { CHART_COLORS, getChartColor } from "./line-chart";
-
-/** Configuration for a single bar series */
-export interface BarChartSeries {
-  /** Key in data objects for this series' values */
-  dataKey: string;
-  /** Display name shown in legend/tooltip */
-  name: string;
-  /** Custom color (defaults to theme chart colors) */
-  color?: string;
-  /** Stack ID - bars with the same stackId will be stacked */
-  stackId?: string;
-  /** Border radius for bars */
-  radius?: number | [number, number, number, number];
-}
-
-/** X-axis configuration */
-export interface BarChartXAxis {
-  /** Key in data objects for x-axis values (category axis in vertical layout) */
-  dataKey: string;
-  /** Axis label */
-  label?: string;
-  /** Custom tick formatter */
-  tickFormatter?: (value: unknown) => string;
-  /** Minimum gap between ticks in pixels */
-  minTickGap?: number;
-}
-
-/** Y-axis configuration */
-export interface BarChartYAxis {
-  /** Domain bounds [min, max] - use "auto" for automatic */
-  domain?: [
-    number | "auto" | "dataMin" | "dataMax",
-    number | "auto" | "dataMin" | "dataMax"
-  ];
-  /** Axis label */
-  label?: string;
-  /** Custom tick formatter */
-  tickFormatter?: (value: unknown) => string;
-  /** Axis width in pixels */
-  width?: number;
-}
-
-/** Grid configuration */
-export interface BarChartGrid {
-  /** Show vertical grid lines */
-  vertical?: boolean;
-  /** Show horizontal grid lines */
-  horizontal?: boolean;
-}
-
-/** Legend configuration */
-export interface BarChartLegend {
-  /** Vertical position */
-  position?: "top" | "bottom";
-  /** Horizontal alignment */
-  align?: "left" | "center" | "right";
-}
-
-export interface BarChartProps {
-  /** Array of data points */
-  data: Record<string, unknown>[];
-  /** Series configurations */
-  series: BarChartSeries[];
-  /** Chart layout orientation */
-  layout?: "vertical" | "horizontal";
-  /** X-axis configuration */
-  xAxis: BarChartXAxis;
-  /** Y-axis configuration */
-  yAxis?: BarChartYAxis;
-  /** Grid configuration (true for default, false to hide, or object for fine control) */
-  grid?: boolean | BarChartGrid;
-  /** Show tooltip on hover */
-  tooltip?: boolean;
-  /** Legend configuration (true for default, false to hide, or object for fine control) */
-  legend?: boolean | BarChartLegend;
-  /** Enable animations */
-  animate?: boolean;
-  /** Bar width in pixels */
-  barSize?: number;
-  /** Gap between bars in a group (pixels) */
-  barGap?: number;
-  /** Gap between bar groups (pixels or percentage) */
-  barCategoryGap?: number | string;
-  /** Additional CSS classes */
-  className?: string;
-  /** Chart height (default: 100%) */
-  height?: number | string;
-  /** Chart margins */
-  margin?: { top?: number; right?: number; bottom?: number; left?: number };
-}
-
-/**
- * A flexible, theme-aware bar chart component.
- *
- * @example
- * // Grouped bar chart
- * <BarChart
- *   data={salesData}
- *   series={[
- *     { dataKey: "revenue", name: "Revenue" },
- *     { dataKey: "profit", name: "Profit" }
- *   ]}
- *   xAxis={{ dataKey: "month" }}
- *   legend={{ position: "top" }}
- * />
- *
- * @example
- * // Stacked bar chart
- * <BarChart
- *   data={salesData}
- *   series={[
- *     { dataKey: "q1", name: "Q1", stackId: "revenue" },
- *     { dataKey: "q2", name: "Q2", stackId: "revenue" }
- *   ]}
- *   xAxis={{ dataKey: "category" }}
- * />
- */
-const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
-  (
-    {
-      data,
-      series,
-      layout = "vertical",
-      xAxis,
-      yAxis,
-      grid = true,
-      tooltip = true,
-      legend = false,
-      animate = true,
-      barSize,
-      barGap,
-      barCategoryGap,
-      className,
-      height = "100%",
-      margin = { top: 8, right: 12, left: 0, bottom: 4 },
-    },
-    ref
-  ) => {
-    const gridConfig = React.useMemo(() => {
-      if (grid === false) return null;
-      if (grid === true) return { vertical: false, horizontal: true };
-      return grid;
-    }, [grid]);
-
-    const legendConfig = React.useMemo(() => {
-      if (legend === false) return null;
-      if (legend === true)
-        return { position: "top" as const, align: "right" as const };
-      return legend;
-    }, [legend]);
-
-    const isHorizontal = layout === "horizontal";
-
-    return (
-      <div ref={ref} className={cn("w-full", className)} style={{ height }}>
-        <ResponsiveContainer width="100%" height="100%">
-          <RechartsBarChart
-            data={data}
-            layout={isHorizontal ? "vertical" : "horizontal"}
-            margin={margin}
-            barSize={barSize}
-            barGap={barGap}
-            barCategoryGap={barCategoryGap}
-          >
-            {gridConfig && (
-              <CartesianGrid
-                strokeDasharray="3 3"
-                stroke="hsl(var(--divider))"
-                vertical={
-                  isHorizontal
-                    ? (gridConfig.horizontal ?? true)
-                    : (gridConfig.vertical ?? false)
-                }
-                horizontal={
-                  isHorizontal
-                    ? (gridConfig.vertical ?? false)
-                    : (gridConfig.horizontal ?? true)
-                }
-              />
-            )}
-
-            {isHorizontal ? (
-              <XAxis
-                type="number"
-                domain={yAxis?.domain ?? ["auto", "auto"]}
-                tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
-                tickLine={false}
-                axisLine={false}
-                tickFormatter={yAxis?.tickFormatter}
-                label={
-                  yAxis?.label
-                    ? {
-                        value: yAxis.label,
-                        position: "insideBottom",
-                        offset: -4,
-                        fontSize: 11,
-                        fill: "hsl(var(--muted-foreground))",
-                      }
-                    : undefined
-                }
-              />
-            ) : (
-              <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
-                }
-              />
-            )}
-
-            {isHorizontal ? (
-              <YAxis
-                type="category"
-                dataKey={xAxis.dataKey}
-                tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
-                tickLine={false}
-                axisLine={false}
-                width={yAxis?.width ?? 80}
-                tickFormatter={xAxis.tickFormatter}
-                label={
-                  xAxis.label
-                    ? {
-                        value: xAxis.label,
-                        angle: -90,
-                        position: "insideLeft",
-                        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
-                }
-              />
-            )}
-
-            {tooltip && (
-              <Tooltip
-                contentStyle={{
-                  background: "hsl(var(--card))",
-                  border: "1px solid hsl(var(--border))",
-                  borderRadius: 6,
-                  fontSize: 11,
-                }}
-                labelStyle={{
-                  color: "hsl(var(--foreground))",
-                  fontWeight: 500,
-                  marginBottom: 4,
-                }}
-                itemStyle={{
-                  color: "hsl(var(--foreground))",
-                }}
-                cursor={{ fill: "hsl(var(--accent))", fillOpacity: 0.3 }}
-              />
-            )}
-
-            {legendConfig && (
-              <Legend
-                verticalAlign={legendConfig.position ?? "top"}
-                align={legendConfig.align ?? "right"}
-                wrapperStyle={{ fontSize: 11, paddingBottom: 4 }}
-              />
-            )}
-
-            {series.map((s, index) => (
-              <Bar
-                key={s.dataKey}
-                dataKey={s.dataKey}
-                name={s.name}
-                fill={getChartColor(index, s.color)}
-                stackId={s.stackId}
-                radius={s.radius ?? 0}
-                isAnimationActive={animate}
-              />
-            ))}
-          </RechartsBarChart>
-        </ResponsiveContainer>
-      </div>
-    );
-  }
-);
-
-BarChart.displayName = "BarChart";
-
-export { BarChart };

package/src/line-chart.tsx

@@ -1,266 +0,0 @@
-/**
- * LineChart
- *
- * A reusable, theme-aware line chart component built on Recharts.
- * Supports multiple series, configurable axes, animations, and styling
- * that integrates with the project's CSS variable theming system.
- */
-
-import * as React from "react";
-import {
-  LineChart as RechartsLineChart,
-  Line,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from "recharts";
-import { cn } from "@optilogic/core";
-
-/** 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))",
-];
-
-export function getChartColor(index: number, custom?: string): string {
-  if (custom) return custom;
-  return CHART_COLORS[index % CHART_COLORS.length] ?? "hsl(var(--chart-1))";
-}
-
-/** Configuration for a single line series */
-export interface LineChartSeries {
-  /** Key in data objects for this series' values */
-  dataKey: string;
-  /** Display name shown in legend/tooltip */
-  name: string;
-  /** Custom color (defaults to theme chart colors) */
-  color?: string;
-  /** Line stroke width (default: 2) */
-  strokeWidth?: number;
-  /** Show dots on data points (default: false) */
-  dot?: boolean;
-  /** Line interpolation type */
-  type?: "monotone" | "linear" | "step" | "basis" | "natural";
-}
-
-/** X-axis configuration */
-export interface LineChartXAxis {
-  /** Key in data objects for x-axis values */
-  dataKey: string;
-  /** Axis label */
-  label?: string;
-  /** Custom tick formatter */
-  tickFormatter?: (value: unknown) => string;
-  /** Minimum gap between ticks in pixels */
-  minTickGap?: number;
-}
-
-/** Y-axis configuration */
-export interface LineChartYAxis {
-  /** Domain bounds [min, max] - use "auto" for automatic */
-  domain?: [
-    number | "auto" | "dataMin" | "dataMax",
-    number | "auto" | "dataMin" | "dataMax"
-  ];
-  /** Axis label */
-  label?: string;
-  /** Custom tick formatter */
-  tickFormatter?: (value: unknown) => string;
-  /** Axis width in pixels */
-  width?: number;
-}
-
-/** Grid configuration */
-export interface LineChartGrid {
-  /** Show vertical grid lines */
-  vertical?: boolean;
-  /** Show horizontal grid lines */
-  horizontal?: boolean;
-}
-
-/** Legend configuration */
-export interface LineChartLegend {
-  /** Vertical position */
-  position?: "top" | "bottom";
-  /** Horizontal alignment */
-  align?: "left" | "center" | "right";
-}
-
-export interface LineChartProps {
-  /** Array of data points */
-  data: Record<string, unknown>[];
-  /** Series configurations */
-  series: LineChartSeries[];
-  /** X-axis configuration */
-  xAxis: LineChartXAxis;
-  /** Y-axis configuration */
-  yAxis?: LineChartYAxis;
-  /** Grid configuration (true for default, false to hide, or object for fine control) */
-  grid?: boolean | LineChartGrid;
-  /** Show tooltip on hover */
-  tooltip?: boolean;
-  /** Legend configuration (true for default, false to hide, or object for fine control) */
-  legend?: boolean | LineChartLegend;
-  /** Enable animations */
-  animate?: boolean;
-  /** Additional CSS classes */
-  className?: string;
-  /** Chart height (default: 100%) */
-  height?: number | string;
-  /** Chart margins */
-  margin?: { top?: number; right?: number; bottom?: number; left?: number };
-}
-
-/**
- * A flexible, theme-aware line chart component.
- *
- * @example
- * <LineChart
- *   data={metrics}
- *   series={[
- *     { dataKey: "cpu", name: "CPU %" },
- *     { dataKey: "memory", name: "Memory %", color: "hsl(var(--success))" }
- *   ]}
- *   xAxis={{ dataKey: "time", tickFormatter: formatTime }}
- *   yAxis={{ domain: [0, 100] }}
- *   animate
- * />
- */
-const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
-  (
-    {
-      data,
-      series,
-      xAxis,
-      yAxis,
-      grid = true,
-      tooltip = true,
-      legend = false,
-      animate = false,
-      className,
-      height = "100%",
-      margin = { top: 8, right: 12, left: 0, bottom: 4 },
-    },
-    ref
-  ) => {
-    const gridConfig = React.useMemo(() => {
-      if (grid === false) return null;
-      if (grid === true) return { vertical: false, horizontal: true };
-      return grid;
-    }, [grid]);
-
-    const legendConfig = React.useMemo(() => {
-      if (legend === false) return null;
-      if (legend === true)
-        return { position: "top" as const, align: "right" as const };
-      return legend;
-    }, [legend]);
-
-    return (
-      <div ref={ref} className={cn("w-full", className)} style={{ height }}>
-        <ResponsiveContainer width="100%" height="100%">
-          <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
-              }
-            />
-
-            {tooltip && (
-              <Tooltip
-                contentStyle={{
-                  background: "hsl(var(--card))",
-                  border: "1px solid hsl(var(--border))",
-                  borderRadius: 6,
-                  fontSize: 11,
-                }}
-                labelStyle={{
-                  color: "hsl(var(--foreground))",
-                  fontWeight: 500,
-                  marginBottom: 4,
-                }}
-                itemStyle={{
-                  color: "hsl(var(--foreground))",
-                }}
-              />
-            )}
-
-            {legendConfig && (
-              <Legend
-                verticalAlign={legendConfig.position ?? "top"}
-                align={legendConfig.align ?? "right"}
-                wrapperStyle={{ fontSize: 11, paddingBottom: 4 }}
-              />
-            )}
-
-            {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}
-                dot={s.dot ?? false}
-                isAnimationActive={animate}
-              />
-            ))}
-          </RechartsLineChart>
-        </ResponsiveContainer>
-      </div>
-    );
-  }
-);
-
-LineChart.displayName = "LineChart";
-
-export { LineChart };