@optilogic/charts 1.3.11 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optilogic/charts",
-  "version": "1.3.11",
+  "version": "1.4.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.7.0"
+    "@optilogic/core": "^2.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -60,7 +60,7 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint src",
+    "lint": "eslint src --max-warnings 0",
     "clean": "rm -rf dist .turbo"
   }
 }

package/src/cartesian/area-chart.tsx

@@ -71,6 +71,14 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
 
+    const tableColumns = React.useMemo(
+      () => [
+        { key: xAxis.dataKey, label: xAxis.label ?? xAxis.dataKey },
+        ...series.map((s) => ({ key: s.dataKey, label: s.name })),
+      ],
+      [xAxis.dataKey, xAxis.label, series],
+    );
+
     return (
       <ChartContainer
         ref={ref}
@@ -78,6 +86,9 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
         height={height}
         loading={loading}
         empty={!data?.length}
+        ariaLabel="Area chart"
+        tableData={data}
+        tableColumns={tableColumns}
       >
         <RechartsAreaChart data={data} margin={margin}>
           <defs>

package/src/cartesian/bar-chart.tsx

@@ -2,16 +2,25 @@ import * as React from "react";
 import {
   BarChart as RechartsBarChart,
   Bar,
+  Cell,
   XAxis,
   YAxis,
   CartesianGrid,
   Tooltip,
   Legend,
 } from "recharts";
+import {
+  resolveCellFormat,
+  resolveFormatColor,
+  computeScaleDomain,
+  type ConditionalFormat,
+  type ScaleDomain,
+} from "@optilogic/core";
 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 { toCellValue } from "../shared/formatters";
 import type {
   BaseChartProps,
   ChartXAxis,
@@ -27,6 +36,14 @@ export interface BarChartSeries {
   color?: string;
   stackId?: string;
   radius?: number | [number, number, number, number];
+  /**
+   * Per-datum conditional formatting — a value-based color scale or ordered
+   * rules. The resolved `background` (or `color`) becomes each bar's fill, so
+   * bars follow the active theme. `className`-only formats do not apply to bars.
+   * Color is supplementary; the value stays available via the tooltip and the
+   * chart's accessible data table.
+   */
+  conditionalFormat?: ConditionalFormat<Record<string, unknown>>;
 }
 
 export interface BarChartProps extends BaseChartProps {
@@ -42,6 +59,12 @@ export interface BarChartProps extends BaseChartProps {
   barGap?: number;
   barCategoryGap?: number | string;
   loading?: boolean;
+  /**
+   * "Visualization link" — called when a data point is activated (a bar is
+   * clicked, or its keyboard/screen-reader link is triggered). Router-agnostic:
+   * navigate to a dashboard or open an external URL from your handler.
+   */
+  onDataPointClick?: (datum: Record<string, unknown>, index: number) => void;
 }
 
 const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
@@ -64,6 +87,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
       height = "100%",
       margin = { top: 8, right: 12, left: 0, bottom: 4 },
       loading,
+      onDataPointClick,
     },
     ref,
   ) => {
@@ -78,6 +102,45 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
     const isAnimated = live ? false : animate;
     const isHorizontal = layout === "horizontal";
 
+    const tableColumns = React.useMemo(
+      () => [
+        { key: xAxis.dataKey, label: xAxis.label ?? xAxis.dataKey },
+        ...series.map((s) => ({ key: s.dataKey, label: s.name })),
+      ],
+      [xAxis.dataKey, xAxis.label, series],
+    );
+
+    // Precompute numeric domains for auto-ranged color-scale series.
+    const seriesScaleDomains = React.useMemo(() => {
+      const domains: Record<string, ScaleDomain | undefined> = {};
+      for (const s of series) {
+        const cf = s.conditionalFormat;
+        if (cf?.type === "colorScale" && !cf.domain) {
+          domains[s.dataKey] = computeScaleDomain(
+            data.map((d) => toCellValue(d[s.dataKey])),
+          );
+        }
+      }
+      return domains;
+    }, [series, data]);
+
+    // Resolve a bar's fill from its series' conditional format (else the palette color).
+    const resolveBarFill = (
+      s: BarChartSeries,
+      datum: Record<string, unknown>,
+      fallback: string,
+    ): string => {
+      if (!s.conditionalFormat) return fallback;
+      const fmt = resolveCellFormat(
+        s.conditionalFormat,
+        toCellValue(datum[s.dataKey]),
+        datum,
+        seriesScaleDomains[s.dataKey],
+      );
+      const color = fmt?.background ?? fmt?.color;
+      return color ? resolveFormatColor(color) : fallback;
+    };
+
     return (
       <ChartContainer
         ref={ref}
@@ -85,6 +148,17 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
         height={height}
         loading={loading}
         empty={!data?.length}
+        ariaLabel="Bar chart"
+        tableData={data}
+        tableColumns={tableColumns}
+        onRowActivate={
+          onDataPointClick
+            ? (_row, index) => {
+                const datum = data[index];
+                if (datum) onDataPointClick(datum, index);
+              }
+            : undefined
+        }
       >
         <RechartsBarChart
           data={data}
@@ -195,18 +269,41 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
               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}
-            />
-          ))}
+          {series.map((s, index) => {
+            const baseFill = getChartColor(index, s.color);
+            const interactive = !!onDataPointClick;
+            const perDatum = !!s.conditionalFormat || interactive;
+            return (
+              <Bar
+                key={s.dataKey}
+                dataKey={s.dataKey}
+                name={s.name}
+                fill={baseFill}
+                stackId={s.stackId}
+                radius={s.radius ?? 0}
+                isAnimationActive={isAnimated}
+                animationDuration={isAnimated ? 300 : 0}
+                onClick={
+                  interactive
+                    ? (_data: unknown, i: number) => {
+                        const datum = data[i];
+                        if (datum) onDataPointClick?.(datum, i);
+                      }
+                    : undefined
+                }
+              >
+                {perDatum
+                  ? data.map((d, i) => (
+                      <Cell
+                        key={`${s.dataKey}-${i}`}
+                        fill={resolveBarFill(s, d, baseFill)}
+                        cursor={interactive ? "pointer" : undefined}
+                      />
+                    ))
+                  : null}
+              </Bar>
+            );
+          })}
         </RechartsBarChart>
       </ChartContainer>
     );

package/src/cartesian/composed-chart.tsx

@@ -79,6 +79,14 @@ const ComposedChart = React.forwardRef<HTMLDivElement, ComposedChartProps>(
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
 
+    const tableColumns = React.useMemo(
+      () => [
+        { key: xAxis.dataKey, label: xAxis.label ?? xAxis.dataKey },
+        ...series.map((s) => ({ key: s.dataKey, label: s.name })),
+      ],
+      [xAxis.dataKey, xAxis.label, series],
+    );
+
     return (
       <ChartContainer
         ref={ref}
@@ -86,6 +94,9 @@ const ComposedChart = React.forwardRef<HTMLDivElement, ComposedChartProps>(
         height={height}
         loading={loading}
         empty={!data?.length}
+        ariaLabel="Composed chart"
+        tableData={data}
+        tableColumns={tableColumns}
       >
         <RechartsComposedChart data={data} margin={margin}>
           {gridConfig && (

package/src/cartesian/line-chart.tsx

@@ -8,9 +8,8 @@ import {
   Tooltip,
   Legend,
 } from "recharts";
-import { cn } from "@optilogic/core";
 import { getChartColor } from "../shared/colors";
-import { resolveTooltipProps, ChartTooltipContent } from "../shared/chart-tooltip";
+import { resolveTooltipProps } from "../shared/chart-tooltip";
 import { ChartLegendContent, resolveLegendConfig } from "../shared/chart-legend";
 import { ChartContainer } from "../shared/chart-container";
 import type {
@@ -72,6 +71,14 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
 
+    const tableColumns = React.useMemo(
+      () => [
+        { key: xAxis.dataKey, label: xAxis.label ?? xAxis.dataKey },
+        ...series.map((s) => ({ key: s.dataKey, label: s.name })),
+      ],
+      [xAxis.dataKey, xAxis.label, series],
+    );
+
     return (
       <ChartContainer
         ref={ref}
@@ -79,6 +86,9 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
         height={height}
         loading={loading}
         empty={!data?.length}
+        ariaLabel="Line chart"
+        tableData={data}
+        tableColumns={tableColumns}
       >
         <RechartsLineChart data={data} margin={margin}>
           {gridConfig && (

package/src/cartesian/scatter-chart.tsx

@@ -71,6 +71,25 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>(
     const isAnimated = live ? false : animate;
     const hasZ = series.some((s) => s.zDataKey);
 
+    const zDataKey = series.find((s) => s.zDataKey)?.zDataKey;
+    const tableColumns = React.useMemo(() => {
+      const cols = [
+        { key: "__series", label: "Series" },
+        { key: xAxis.dataKey, label: xAxis.name ?? xAxis.label ?? xAxis.dataKey },
+        { key: "y", label: yAxis?.name ?? yAxis?.label ?? "y" },
+      ];
+      if (zDataKey) cols.push({ key: zDataKey, label: zDataKey });
+      return cols;
+    }, [xAxis.dataKey, xAxis.name, xAxis.label, yAxis?.name, yAxis?.label, zDataKey]);
+
+    const tableData = React.useMemo(
+      () =>
+        series.flatMap((s) =>
+          (s.data ?? []).map((point) => ({ __series: s.name, ...point })),
+        ),
+      [series],
+    );
+
     return (
       <ChartContainer
         ref={ref}
@@ -78,6 +97,9 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>(
         height={height}
         loading={loading}
         empty={!series.some((s) => s.data?.length)}
+        ariaLabel="Scatter chart"
+        tableData={tableData}
+        tableColumns={tableColumns}
       >
         <RechartsScatterChart margin={margin}>
           {gridConfig && (

package/src/cartesian/waterfall-chart.tsx

@@ -93,6 +93,14 @@ const WaterfallChart = React.forwardRef<HTMLDivElement, WaterfallChartProps>(
     const negColor = negativeColor ?? getSemanticColor("negative");
     const totColor = totalColor ?? "hsl(var(--chart-3))";
 
+    const tableColumns = React.useMemo(
+      () => [
+        { key: "name", label: xAxis?.label ?? "Name" },
+        { key: "value", label: yAxis?.label ?? "Value" },
+      ],
+      [xAxis?.label, yAxis?.label],
+    );
+
     return (
       <ChartContainer
         ref={ref}
@@ -100,6 +108,9 @@ const WaterfallChart = React.forwardRef<HTMLDivElement, WaterfallChartProps>(
         height={height}
         loading={loading}
         empty={!data?.length}
+        ariaLabel="Waterfall chart"
+        tableData={data}
+        tableColumns={tableColumns}
       >
         <RechartsBarChart data={rows} margin={margin}>
           <CartesianGrid

package/src/dashboard/chart-builder.tsx

@@ -73,6 +73,22 @@ const labelStyle: React.CSSProperties = {
   display: "block",
 };
 
+/** Visible keyboard focus indicator for the inline-styled controls (SC 2.4.7). */
+const FOCUS_STYLE_ID = "opti-chart-builder-focus";
+const focusStyles = `
+.opti-chart-builder-control:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 1px;
+  border-radius: 4px;
+}
+`;
+
+function FocusStyles() {
+  return <style id={FOCUS_STYLE_ID}>{focusStyles}</style>;
+}
+
+const FOCUS_CLASS = "opti-chart-builder-control";
+
 const ChartBuilder = React.memo(function ChartBuilder({
   columns,
   data,
@@ -121,6 +137,7 @@ const ChartBuilder = React.memo(function ChartBuilder({
       className={cn("flex gap-4", className)}
       style={{ minHeight: 400 }}
     >
+      <FocusStyles />
       {/* Config panel */}
       <div
         className="flex flex-col gap-3 shrink-0 overflow-y-auto"
@@ -138,8 +155,12 @@ const ChartBuilder = React.memo(function ChartBuilder({
 
         {/* Chart type */}
         <div>
-          <label style={labelStyle}>Chart Type</label>
+          <label htmlFor="cb-chart-type" style={labelStyle}>
+            Chart Type
+          </label>
           <select
+            id="cb-chart-type"
+            className={FOCUS_CLASS}
             style={selectStyle}
             value={config.type}
             onChange={(e) =>
@@ -154,8 +175,12 @@ const ChartBuilder = React.memo(function ChartBuilder({
 
         {/* Category axis */}
         <div>
-          <label style={labelStyle}>Category Axis</label>
+          <label htmlFor="cb-category-axis" style={labelStyle}>
+            Category Axis
+          </label>
           <select
+            id="cb-category-axis"
+            className={FOCUS_CLASS}
             style={selectStyle}
             value={config.categoryKey}
             onChange={(e) =>
@@ -169,8 +194,8 @@ const ChartBuilder = React.memo(function ChartBuilder({
         </div>
 
         {/* Series */}
-        <div>
-          <label style={labelStyle}>Series</label>
+        <div role="group" aria-label="Series">
+          <div style={labelStyle}>Series</div>
           {config.series.map((s, i) => (
             <div
               key={i}
@@ -178,6 +203,8 @@ const ChartBuilder = React.memo(function ChartBuilder({
               style={{ marginBottom: 4 }}
             >
               <select
+                className={FOCUS_CLASS}
+                aria-label={`Series ${i + 1} data column`}
                 style={{ ...selectStyle, flex: 1 }}
                 value={s.dataKey}
                 onChange={(e) => updateSeries(i, "dataKey", e.target.value)}
@@ -189,6 +216,9 @@ const ChartBuilder = React.memo(function ChartBuilder({
                   ))}
               </select>
               <button
+                type="button"
+                aria-label={`Remove series ${i + 1}`}
+                className={FOCUS_CLASS}
                 onClick={() => removeSeries(i)}
                 style={{
                   padding: "2px 6px",
@@ -206,6 +236,8 @@ const ChartBuilder = React.memo(function ChartBuilder({
             </div>
           ))}
           <button
+            type="button"
+            className={FOCUS_CLASS}
             onClick={addSeries}
             style={{
               width: "100%",
@@ -225,8 +257,12 @@ const ChartBuilder = React.memo(function ChartBuilder({
 
         {/* Legend */}
         <div>
-          <label style={labelStyle}>Legend</label>
+          <label htmlFor="cb-legend" style={labelStyle}>
+            Legend
+          </label>
           <select
+            id="cb-legend"
+            className={FOCUS_CLASS}
             style={selectStyle}
             value={config.legend}
             onChange={(e) =>
@@ -244,6 +280,8 @@ const ChartBuilder = React.memo(function ChartBuilder({
           <input
             type="checkbox"
             id="grid-toggle"
+            aria-label="Show Grid"
+            className={FOCUS_CLASS}
             checked={config.grid}
             onChange={(e) =>
               setConfig((prev) => ({ ...prev, grid: e.target.checked }))
@@ -259,6 +297,8 @@ const ChartBuilder = React.memo(function ChartBuilder({
           <input
             type="checkbox"
             id="animate-toggle"
+            aria-label="Animate"
+            className={FOCUS_CLASS}
             checked={config.animate}
             onChange={(e) =>
               setConfig((prev) => ({ ...prev, animate: e.target.checked }))
@@ -271,6 +311,8 @@ const ChartBuilder = React.memo(function ChartBuilder({
 
         {onSave && (
           <button
+            type="button"
+            className={FOCUS_CLASS}
             onClick={() => onSave(config)}
             style={{
               marginTop: 8,

package/src/dashboard/chart-renderer.tsx

@@ -4,7 +4,7 @@ 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 { WaterfallChart } from "../cartesian/waterfall-chart";
 import { PieChart } from "../radial/pie-chart";
 import { DonutChart } from "../radial/donut-chart";
 import { RadarChart } from "../radial/radar-chart";

package/src/index.ts

@@ -2,7 +2,11 @@
 export { CHART_COLORS, getChartColor, getSemanticColor, type SemanticColorName } from "./shared/colors";
 export { ChartTooltipContent, resolveTooltipProps, type ChartTooltipContentProps } from "./shared/chart-tooltip";
 export { ChartLegendContent, resolveLegendConfig } from "./shared/chart-legend";
-export { ChartContainer, type ChartContainerProps } from "./shared/chart-container";
+export {
+  ChartContainer,
+  type ChartContainerProps,
+  type ChartTableColumn,
+} from "./shared/chart-container";
 export { useLiveData, type UseLiveDataConfig, type UseLiveDataReturn } from "./shared/use-live-data";
 export {
   formatCompact,

package/src/radial/donut-chart.tsx

@@ -62,6 +62,12 @@ const DonutChart = React.forwardRef<HTMLDivElement, DonutChartProps>(
         height={height}
         loading={loading}
         empty={!data?.length}
+        ariaLabel={centerLabel ?? "Donut chart"}
+        tableData={data}
+        tableColumns={[
+          { key: "name", label: "Name" },
+          { key: "value", label: "Value" },
+        ]}
       >
         <RechartsPieChart margin={margin}>
           <Pie

package/src/radial/pie-chart.tsx

@@ -108,6 +108,12 @@ const PieChart = React.forwardRef<HTMLDivElement, PieChartProps>(
         height={height}
         loading={loading}
         empty={!data?.length}
+        ariaLabel="Pie chart"
+        tableData={data}
+        tableColumns={[
+          { key: "name", label: "Name" },
+          { key: "value", label: "Value" },
+        ]}
       >
         <RechartsPieChart margin={margin}>
           <Pie

package/src/radial/radar-chart.tsx

@@ -57,6 +57,14 @@ const RadarChart = React.forwardRef<HTMLDivElement, RadarChartProps>(
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
 
+    const tableColumns = React.useMemo(
+      () => [
+        { key: categoryKey, label: categoryKey },
+        ...series.map((s) => ({ key: s.dataKey, label: s.name })),
+      ],
+      [categoryKey, series],
+    );
+
     return (
       <ChartContainer
         ref={ref}
@@ -64,6 +72,9 @@ const RadarChart = React.forwardRef<HTMLDivElement, RadarChartProps>(
         height={height}
         loading={loading}
         empty={!data?.length}
+        ariaLabel="Radar chart"
+        tableData={data}
+        tableColumns={tableColumns}
       >
         <RechartsRadarChart data={data} margin={margin} cx="50%" cy="50%">
           <PolarGrid stroke="hsl(var(--divider))" />

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

@@ -70,6 +70,12 @@ const RadialBarChart = React.forwardRef<HTMLDivElement, RadialBarChartProps>(
         height={height}
         loading={loading}
         empty={!data?.length}
+        ariaLabel="Radial bar chart"
+        tableData={data}
+        tableColumns={[
+          { key: "name", label: "Name" },
+          { key: "value", label: "Value" },
+        ]}
       >
         <RechartsRadialBarChart
           data={coloredData}