@optilogic/charts 1.3.11 → 1.4.0

package/dist/index.d.cts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { TooltipProps } from 'recharts';
+import { ConditionalFormat } from '@optilogic/core';
 
 /** Theme-aware chart colors from CSS variables */
 declare const CHART_COLORS: readonly ["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))"];
@@ -84,6 +85,11 @@ interface ChartLegendContentProps {
 declare const ChartLegendContent: React.NamedExoticComponent<ChartLegendContentProps>;
 declare function resolveLegendConfig(legend: boolean | ChartLegend | undefined): ChartLegend | null;
 
+/** Column descriptor for the screen-reader data-table fallback. */
+interface ChartTableColumn {
+    key: string;
+    label: string;
+}
 interface ChartContainerProps {
     children: React.ReactNode;
     className?: string;
@@ -93,6 +99,34 @@ interface ChartContainerProps {
     emptyMessage?: string;
     title?: string;
     description?: string;
+    /**
+     * Accessible name for the visual chart region (SC 1.1.1). Falls back to
+     * `title` when omitted.
+     */
+    ariaLabel?: string;
+    /**
+     * Accessible description for the chart. Falls back to `description` when
+     * omitted. Exposed to assistive tech via `aria-describedby`.
+     */
+    ariaDescription?: string;
+    /**
+     * Row data rendered as a visually-hidden `<table>` so screen-reader users can
+     * access the underlying numbers (SC 1.1.1, 1.3.1). Requires `tableColumns`.
+     * Accepts any object row; cells are read by `tableColumns[].key`.
+     */
+    tableData?: ReadonlyArray<object>;
+    /** Column definitions for the data-table fallback. Requires `tableData`. */
+    tableColumns?: Array<ChartTableColumn>;
+    /**
+     * Makes each data point actionable (a "visualization link"). When provided, a
+     * keyboard- and screen-reader-reachable list of buttons is rendered — one per
+     * `tableData` row — that is visually hidden until focused (skip-link pattern),
+     * so pointer users click the chart while keyboard users tab to the same
+     * actions without an invisible-focus trap (WCAG SC 2.1.1, 2.4.7).
+     */
+    onRowActivate?: (row: object, index: number) => void;
+    /** Accessible label for a row's action. Defaults to the first column's value. */
+    rowActionLabel?: (row: object, index: number) => string;
 }
 declare const ChartContainer: React.ForwardRefExoticComponent<ChartContainerProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -153,6 +187,14 @@ 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>>;
 }
 interface BarChartProps extends BaseChartProps {
     data: Record<string, unknown>[];
@@ -167,6 +209,12 @@ 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;
 }
 declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -534,4 +582,4 @@ interface ChartBuilderProps {
 }
 declare const ChartBuilder: React.NamedExoticComponent<ChartBuilderProps>;
 
-export { AreaChart, type AreaChartProps, type AreaChartSeries, BarChart, type BarChartProps, type BarChartSeries, type BaseChartProps, CHART_COLORS, ChartBuilder, type ChartBuilderProps, type ChartConfig, type ChartConfigSeries, ChartContainer, type ChartContainerProps, type ChartGrid, type ChartLegend, ChartLegendContent, type ChartMargin, ChartRenderer, type ChartRendererProps, type ChartTooltipConfig, ChartTooltipContent, type ChartTooltipContentProps, type ChartTooltipProp, type ChartXAxis, type ChartYAxis, ComposedChart, type ComposedChartProps, type ComposedChartSeries, DonutChart, type DonutChartDatum, type DonutChartProps, FunnelChart, type FunnelChartProps, type FunnelDatum, GanttChart, type GanttChartProps, type GanttMilestone, type GanttTask, type GanttTimeScale, type HeatmapCell, HeatmapChart, type HeatmapChartProps, type HeatmapColorScale, KPICard, type KPICardProps, LineChart, type LineChartProps, type LineChartSeries, PieChart, type PieChartDatum, type PieChartProps, RadarChart, type RadarChartProps, type RadarChartSeries, RadialBarChart, type RadialBarChartProps, type RadialBarDatum, SankeyChart, type SankeyChartData, type SankeyChartProps, type SankeyLink, type SankeyNode, ScatterChart, type ScatterChartProps, type ScatterChartSeries, ScenarioComparison, type ScenarioComparisonMode, type ScenarioComparisonProps, type ScenarioData, type SemanticColorName, Sparkline, type SparklineProps, type SparklineVariant, type TooltipFormatter, TreemapChart, type TreemapChartProps, type TreemapDatum, type UseLiveDataConfig, type UseLiveDataReturn, WaterfallChart, type WaterfallChartProps, type WaterfallItem, formatCompact, formatCurrency, formatDuration, formatPercent, formatUnit, getChartColor, getSemanticColor, resolveLegendConfig, resolveTooltipProps, useLiveData };
+export { AreaChart, type AreaChartProps, type AreaChartSeries, BarChart, type BarChartProps, type BarChartSeries, type BaseChartProps, CHART_COLORS, ChartBuilder, type ChartBuilderProps, type ChartConfig, type ChartConfigSeries, ChartContainer, type ChartContainerProps, type ChartGrid, type ChartLegend, ChartLegendContent, type ChartMargin, ChartRenderer, type ChartRendererProps, type ChartTableColumn, type ChartTooltipConfig, ChartTooltipContent, type ChartTooltipContentProps, type ChartTooltipProp, type ChartXAxis, type ChartYAxis, ComposedChart, type ComposedChartProps, type ComposedChartSeries, DonutChart, type DonutChartDatum, type DonutChartProps, FunnelChart, type FunnelChartProps, type FunnelDatum, GanttChart, type GanttChartProps, type GanttMilestone, type GanttTask, type GanttTimeScale, type HeatmapCell, HeatmapChart, type HeatmapChartProps, type HeatmapColorScale, KPICard, type KPICardProps, LineChart, type LineChartProps, type LineChartSeries, PieChart, type PieChartDatum, type PieChartProps, RadarChart, type RadarChartProps, type RadarChartSeries, RadialBarChart, type RadialBarChartProps, type RadialBarDatum, SankeyChart, type SankeyChartData, type SankeyChartProps, type SankeyLink, type SankeyNode, ScatterChart, type ScatterChartProps, type ScatterChartSeries, ScenarioComparison, type ScenarioComparisonMode, type ScenarioComparisonProps, type ScenarioData, type SemanticColorName, Sparkline, type SparklineProps, type SparklineVariant, type TooltipFormatter, TreemapChart, type TreemapChartProps, type TreemapDatum, type UseLiveDataConfig, type UseLiveDataReturn, WaterfallChart, type WaterfallChartProps, type WaterfallItem, formatCompact, formatCurrency, formatDuration, formatPercent, formatUnit, getChartColor, getSemanticColor, resolveLegendConfig, resolveTooltipProps, useLiveData };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { TooltipProps } from 'recharts';
+import { ConditionalFormat } from '@optilogic/core';
 
 /** Theme-aware chart colors from CSS variables */
 declare const CHART_COLORS: readonly ["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))"];
@@ -84,6 +85,11 @@ interface ChartLegendContentProps {
 declare const ChartLegendContent: React.NamedExoticComponent<ChartLegendContentProps>;
 declare function resolveLegendConfig(legend: boolean | ChartLegend | undefined): ChartLegend | null;
 
+/** Column descriptor for the screen-reader data-table fallback. */
+interface ChartTableColumn {
+    key: string;
+    label: string;
+}
 interface ChartContainerProps {
     children: React.ReactNode;
     className?: string;
@@ -93,6 +99,34 @@ interface ChartContainerProps {
     emptyMessage?: string;
     title?: string;
     description?: string;
+    /**
+     * Accessible name for the visual chart region (SC 1.1.1). Falls back to
+     * `title` when omitted.
+     */
+    ariaLabel?: string;
+    /**
+     * Accessible description for the chart. Falls back to `description` when
+     * omitted. Exposed to assistive tech via `aria-describedby`.
+     */
+    ariaDescription?: string;
+    /**
+     * Row data rendered as a visually-hidden `<table>` so screen-reader users can
+     * access the underlying numbers (SC 1.1.1, 1.3.1). Requires `tableColumns`.
+     * Accepts any object row; cells are read by `tableColumns[].key`.
+     */
+    tableData?: ReadonlyArray<object>;
+    /** Column definitions for the data-table fallback. Requires `tableData`. */
+    tableColumns?: Array<ChartTableColumn>;
+    /**
+     * Makes each data point actionable (a "visualization link"). When provided, a
+     * keyboard- and screen-reader-reachable list of buttons is rendered — one per
+     * `tableData` row — that is visually hidden until focused (skip-link pattern),
+     * so pointer users click the chart while keyboard users tab to the same
+     * actions without an invisible-focus trap (WCAG SC 2.1.1, 2.4.7).
+     */
+    onRowActivate?: (row: object, index: number) => void;
+    /** Accessible label for a row's action. Defaults to the first column's value. */
+    rowActionLabel?: (row: object, index: number) => string;
 }
 declare const ChartContainer: React.ForwardRefExoticComponent<ChartContainerProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -153,6 +187,14 @@ 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>>;
 }
 interface BarChartProps extends BaseChartProps {
     data: Record<string, unknown>[];
@@ -167,6 +209,12 @@ 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;
 }
 declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -534,4 +582,4 @@ interface ChartBuilderProps {
 }
 declare const ChartBuilder: React.NamedExoticComponent<ChartBuilderProps>;
 
-export { AreaChart, type AreaChartProps, type AreaChartSeries, BarChart, type BarChartProps, type BarChartSeries, type BaseChartProps, CHART_COLORS, ChartBuilder, type ChartBuilderProps, type ChartConfig, type ChartConfigSeries, ChartContainer, type ChartContainerProps, type ChartGrid, type ChartLegend, ChartLegendContent, type ChartMargin, ChartRenderer, type ChartRendererProps, type ChartTooltipConfig, ChartTooltipContent, type ChartTooltipContentProps, type ChartTooltipProp, type ChartXAxis, type ChartYAxis, ComposedChart, type ComposedChartProps, type ComposedChartSeries, DonutChart, type DonutChartDatum, type DonutChartProps, FunnelChart, type FunnelChartProps, type FunnelDatum, GanttChart, type GanttChartProps, type GanttMilestone, type GanttTask, type GanttTimeScale, type HeatmapCell, HeatmapChart, type HeatmapChartProps, type HeatmapColorScale, KPICard, type KPICardProps, LineChart, type LineChartProps, type LineChartSeries, PieChart, type PieChartDatum, type PieChartProps, RadarChart, type RadarChartProps, type RadarChartSeries, RadialBarChart, type RadialBarChartProps, type RadialBarDatum, SankeyChart, type SankeyChartData, type SankeyChartProps, type SankeyLink, type SankeyNode, ScatterChart, type ScatterChartProps, type ScatterChartSeries, ScenarioComparison, type ScenarioComparisonMode, type ScenarioComparisonProps, type ScenarioData, type SemanticColorName, Sparkline, type SparklineProps, type SparklineVariant, type TooltipFormatter, TreemapChart, type TreemapChartProps, type TreemapDatum, type UseLiveDataConfig, type UseLiveDataReturn, WaterfallChart, type WaterfallChartProps, type WaterfallItem, formatCompact, formatCurrency, formatDuration, formatPercent, formatUnit, getChartColor, getSemanticColor, resolveLegendConfig, resolveTooltipProps, useLiveData };
+export { AreaChart, type AreaChartProps, type AreaChartSeries, BarChart, type BarChartProps, type BarChartSeries, type BaseChartProps, CHART_COLORS, ChartBuilder, type ChartBuilderProps, type ChartConfig, type ChartConfigSeries, ChartContainer, type ChartContainerProps, type ChartGrid, type ChartLegend, ChartLegendContent, type ChartMargin, ChartRenderer, type ChartRendererProps, type ChartTableColumn, type ChartTooltipConfig, ChartTooltipContent, type ChartTooltipContentProps, type ChartTooltipProp, type ChartXAxis, type ChartYAxis, ComposedChart, type ComposedChartProps, type ComposedChartSeries, DonutChart, type DonutChartDatum, type DonutChartProps, FunnelChart, type FunnelChartProps, type FunnelDatum, GanttChart, type GanttChartProps, type GanttMilestone, type GanttTask, type GanttTimeScale, type HeatmapCell, HeatmapChart, type HeatmapChartProps, type HeatmapColorScale, KPICard, type KPICardProps, LineChart, type LineChartProps, type LineChartSeries, PieChart, type PieChartDatum, type PieChartProps, RadarChart, type RadarChartProps, type RadarChartSeries, RadialBarChart, type RadialBarChartProps, type RadialBarDatum, SankeyChart, type SankeyChartData, type SankeyChartProps, type SankeyLink, type SankeyNode, ScatterChart, type ScatterChartProps, type ScatterChartSeries, ScenarioComparison, type ScenarioComparisonMode, type ScenarioComparisonProps, type ScenarioData, type SemanticColorName, Sparkline, type SparklineProps, type SparklineVariant, type TooltipFormatter, TreemapChart, type TreemapChartProps, type TreemapDatum, type UseLiveDataConfig, type UseLiveDataReturn, WaterfallChart, type WaterfallChartProps, type WaterfallItem, formatCompact, formatCurrency, formatDuration, formatPercent, formatUnit, getChartColor, getSemanticColor, resolveLegendConfig, resolveTooltipProps, useLiveData };