@optilogic/charts 1.0.0-beta.8 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optilogic/charts",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0",
   "description": "Chart components for Optilogic - LineChart and BarChart built on Recharts",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -24,7 +24,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@optilogic/core": "1.0.0-beta.8"
+    "@optilogic/core": "1.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/cartesian/area-chart.tsx

@@ -0,0 +1,177 @@
+import * as React from "react";
+import {
+  AreaChart as RechartsAreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  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 AreaChartSeries {
+  dataKey: string;
+  name: string;
+  color?: string;
+  fillOpacity?: number;
+  strokeWidth?: number;
+  type?: "monotone" | "linear" | "step" | "basis" | "natural";
+  stackId?: string;
+}
+
+export interface AreaChartProps extends BaseChartProps {
+  data: Record<string, unknown>[];
+  series: AreaChartSeries[];
+  xAxis: ChartXAxis;
+  yAxis?: ChartYAxis;
+  grid?: boolean | ChartGrid;
+  legend?: boolean | ChartLegend;
+  tooltip?: ChartTooltipProp;
+  loading?: boolean;
+}
+
+const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
+  (
+    {
+      data,
+      series,
+      xAxis,
+      yAxis,
+      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: 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}
+      >
+        <RechartsAreaChart data={data} margin={margin}>
+          <defs>
+            {series.map((s, index) => {
+              const color = getChartColor(index, s.color);
+              return (
+                <linearGradient
+                  key={s.dataKey}
+                  id={`area-gradient-${s.dataKey}`}
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop offset="5%" stopColor={color} stopOpacity={0.3} />
+                  <stop offset="95%" stopColor={color} stopOpacity={0.05} />
+                </linearGradient>
+              );
+            })}
+          </defs>
+          {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) => (
+            <Area
+              key={s.dataKey}
+              type={s.type ?? "monotone"}
+              dataKey={s.dataKey}
+              name={s.name}
+              stroke={getChartColor(index, s.color)}
+              strokeWidth={s.strokeWidth ?? 2}
+              fill={`url(#area-gradient-${s.dataKey})`}
+              fillOpacity={s.fillOpacity ?? 1}
+              stackId={s.stackId}
+              isAnimationActive={isAnimated}
+              animationDuration={isAnimated ? 300 : 0}
+            />
+          ))}
+        </RechartsAreaChart>
+      </ChartContainer>
+    );
+  },
+);
+
+AreaChart.displayName = "AreaChart";
+export { AreaChart };

package/src/cartesian/bar-chart.tsx

@@ -0,0 +1,217 @@
+import * as React from "react";
+import {
+  BarChart as RechartsBarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  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 BarChartSeries {
+  dataKey: string;
+  name: string;
+  color?: string;
+  stackId?: string;
+  radius?: number | [number, number, number, number];
+}
+
+export interface BarChartProps extends BaseChartProps {
+  data: Record<string, unknown>[];
+  series: BarChartSeries[];
+  layout?: "vertical" | "horizontal";
+  xAxis: ChartXAxis;
+  yAxis?: ChartYAxis;
+  grid?: boolean | ChartGrid;
+  legend?: boolean | ChartLegend;
+  tooltip?: ChartTooltipProp;
+  barSize?: number;
+  barGap?: number;
+  barCategoryGap?: number | string;
+  loading?: boolean;
+}
+
+const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
+  (
+    {
+      data,
+      series,
+      layout = "vertical",
+      xAxis,
+      yAxis,
+      grid = true,
+      tooltip = true,
+      legend = false,
+      animate = true,
+      live = false,
+      barSize,
+      barGap,
+      barCategoryGap,
+      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;
+    const isHorizontal = layout === "horizontal";
+
+    return (
+      <ChartContainer
+        ref={ref}
+        className={className}
+        height={height}
+        loading={loading}
+        empty={!data?.length}
+      >
+        <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}
+            />
+          ) : (
+            <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}
+              cursor={{ fill: "hsl(var(--accent))", fillOpacity: 0.3 }}
+            />
+          )}
+          {legendConfig && (
+            <Legend
+              verticalAlign={legendConfig.position ?? "top"}
+              align={legendConfig.align ?? "right"}
+              content={<ChartLegendContent />}
+            />
+          )}
+          {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={isAnimated}
+              animationDuration={isAnimated ? 300 : 0}
+            />
+          ))}
+        </RechartsBarChart>
+      </ChartContainer>
+    );
+  },
+);
+
+BarChart.displayName = "BarChart";
+export { BarChart };

package/src/cartesian/composed-chart.tsx

@@ -0,0 +1,222 @@
+import * as React from "react";
+import {
+  ComposedChart as RechartsComposedChart,
+  Line,
+  Bar,
+  Area,
+  XAxis,
+  YAxis,
+  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 ComposedChartSeries {
+  type: "line" | "bar" | "area";
+  dataKey: string;
+  name: string;
+  color?: string;
+  yAxisId?: string;
+  stackId?: string;
+  strokeWidth?: number;
+  strokeDasharray?: string;
+  fillOpacity?: number;
+  radius?: number | [number, number, number, number];
+}
+
+export interface ComposedChartProps extends BaseChartProps {
+  data: Record<string, unknown>[];
+  series: ComposedChartSeries[];
+  xAxis: ChartXAxis;
+  yAxis?: ChartYAxis;
+  /** Secondary Y axis displayed on the right */
+  yAxisRight?: ChartYAxis & { id: string };
+  grid?: boolean | ChartGrid;
+  legend?: boolean | ChartLegend;
+  tooltip?: ChartTooltipProp;
+  loading?: boolean;
+}
+
+const ComposedChart = React.forwardRef<HTMLDivElement, ComposedChartProps>(
+  (
+    {
+      data,
+      series,
+      xAxis,
+      yAxis,
+      yAxisRight,
+      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: 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}
+      >
+        <RechartsComposedChart 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
+            yAxisId="left"
+            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
+            }
+          />
+          {yAxisRight && (
+            <YAxis
+              yAxisId={yAxisRight.id}
+              orientation="right"
+              domain={yAxisRight.domain ?? ["auto", "auto"]}
+              tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
+              tickLine={false}
+              axisLine={false}
+              width={yAxisRight.width ?? 40}
+              tickFormatter={yAxisRight.tickFormatter}
+              label={
+                yAxisRight.label
+                  ? {
+                      value: yAxisRight.label,
+                      angle: 90,
+                      position: "insideRight",
+                      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) => {
+            const color = getChartColor(index, s.color);
+            const yAxisId = s.yAxisId ?? "left";
+            const props = {
+              key: s.dataKey,
+              dataKey: s.dataKey,
+              name: s.name,
+              yAxisId,
+              isAnimationActive: isAnimated,
+              animationDuration: isAnimated ? 300 : 0,
+            };
+            switch (s.type) {
+              case "line":
+                return (
+                  <Line
+                    {...props}
+                    type="monotone"
+                    stroke={color}
+                    strokeWidth={s.strokeWidth ?? 2}
+                    strokeDasharray={s.strokeDasharray}
+                    dot={false}
+                  />
+                );
+              case "bar":
+                return (
+                  <Bar
+                    {...props}
+                    fill={color}
+                    stackId={s.stackId}
+                    radius={s.radius ?? 0}
+                  />
+                );
+              case "area":
+                return (
+                  <Area
+                    {...props}
+                    type="monotone"
+                    stroke={color}
+                    fill={color}
+                    fillOpacity={s.fillOpacity ?? 0.15}
+                    strokeWidth={s.strokeWidth ?? 2}
+                    stackId={s.stackId}
+                  />
+                );
+            }
+          })}
+        </RechartsComposedChart>
+      </ChartContainer>
+    );
+  },
+);
+
+ComposedChart.displayName = "ComposedChart";
+export { ComposedChart };