@aeriz/chart 1.0.1 → 2.0.0

package/dist/index.d.ts

@@ -0,0 +1,323 @@
+/**
+ * @aeriz/chart 2.0 — visualization, light as air.
+ *
+ * 21 canvas chart types with one way to do each thing:
+ * `new XChart(target, options)` → `update(patch)` · `setState(state)` · `render()` · `destroy()`.
+ * Every chart takes its data as `data`. Framework adapters: `@aeriz/chart/react`,
+ * `/vue`, `/svelte`, `/jquery`.
+ *
+ * @packageDocumentation
+ */
+
+// ─── Shared types ────────────────────────────────────────────────
+
+/** A CSS selector or a DOM element to mount the chart into. */
+export type Target = string | HTMLElement;
+
+/** Any CSS color. */
+export type Color = string;
+
+/**
+ * Number format for tooltips and the value axis: `Intl.NumberFormat` options
+ * such as `{ style: 'currency', currency: 'KRW' }`, or a function.
+ * Without it, numbers follow the browser locale.
+ */
+export type NumberFormat = Intl.NumberFormatOptions | ((value: number) => string);
+
+/** Formats category / time labels on the x axis and in tooltips. Time labels are ms timestamps. */
+export type LabelFormat = (label: any) => string;
+
+/** What `onClick` receives: the clicked item. */
+export interface Hit<Row = unknown> {
+  /** Index of the row / category (heatmap: column). */
+  index: number;
+  /** Its label (category, row label, or point label). */
+  label: any;
+  /** Its value, when the item has one. */
+  value?: number;
+  /** Series index in multi-series charts (heatmap: row). */
+  series?: number;
+  /** The original data item: your row, point or series object. */
+  row?: Row;
+}
+
+/** `chart.setState()` overlays. `null` removes the overlay. */
+export type State = 'loading' | 'empty' | 'error' | null;
+
+/** Options every chart takes. */
+export interface CommonOptions<D, Row = unknown> {
+  /** The data. Its shape depends on the chart — see each chart's `data`. */
+  data?: D;
+  /** Accessible name for screen readers (gauge also shows it as a caption). */
+  title?: string;
+  /** Series / item colors, in order. Defaults to `--aeriz-color-1…12`, then the built-in palette. */
+  colors?: Color[];
+  /** Number format for tooltips and the value axis. */
+  format?: NumberFormat;
+  /** Show the legend (multi-series charts and pie). Default `true`. */
+  legend?: boolean;
+  /** Animate drawing and updates. Default `true` (off with prefers-reduced-motion). */
+  animate?: boolean;
+  /** Text shown when there is no data. Default `'No data'`. */
+  emptyText?: string;
+  /** Called when an item is clicked (or Enter is pressed on it). */
+  onClick?: (hit: Hit<Row>, chart: Chart) => void;
+  /** Called when a legend item is toggled. */
+  onLegend?: (index: number, visible: boolean, chart: Chart) => void;
+}
+
+/** Value axis range (charts with axes). */
+export interface AxisOptions {
+  /** Formats x-axis labels and tooltip titles. */
+  labelFormat?: LabelFormat;
+  /** Lowest value on the value axis (default: from the data, starting at 0). */
+  min?: number;
+  /** Highest value on the value axis (default: from the data). */
+  max?: number;
+}
+
+// ─── Data shapes ─────────────────────────────────────────────────
+
+/** A `{ label, value }` row. Extra fields are allowed (use `label` / `value` accessors to read others). */
+export interface Row {
+  label: string | number;
+  value: number;
+  /** Per-item color. */
+  color?: Color;
+}
+
+/**
+ * Single-series data, three ways that mean the same:
+ * `[64, 42, 78]` · `{ Jan: 64, Feb: 42 }` · `[{ label: 'Jan', value: 64 }]`
+ * (or your own objects with `label` / `value` accessors).
+ */
+export type Rows<R = Row> = number[] | Float64Array | Float32Array | Record<string, number> | R[];
+
+/** Single-series options: read other fields with accessors. */
+export interface RowOptions<R> {
+  /** Reads a row's label, e.g. `(row) => row.month`. */
+  label?: (row: R, index: number) => string | number;
+  /** Reads a row's value, e.g. `(row) => row.sales`. */
+  value?: (row: R, index: number) => number;
+}
+
+export interface Series {
+  name: string;
+  values: ArrayLike<number | null>;
+  color?: Color;
+}
+
+/** Multi-series data. Every series has one value per category. */
+export interface SeriesData<S extends Series = Series> {
+  categories: ArrayLike<string | number>;
+  series: S[];
+}
+
+export interface Point {
+  x: number;
+  y: number;
+  /** Scatter: radius in px. Bubble: a value, drawn as the bubble's area. */
+  size?: number;
+  /** Colors points by series index. */
+  group?: number;
+  label?: string;
+  color?: Color;
+}
+
+// ─── Base class ──────────────────────────────────────────────────
+
+export interface ChartMeta {
+  id: string;
+  name: string;
+  aria: string;
+  data: 'rows' | 'series' | 'stream' | 'points' | 'matrix' | 'boxes' | 'steps' | 'number';
+  options: string[];
+}
+
+export declare class Chart<O = CommonOptions<unknown>> {
+  constructor(target: Target, options?: O);
+  static readonly meta: ChartMeta | null;
+  readonly container: HTMLElement;
+  readonly canvas: HTMLCanvasElement;
+  readonly options: O;
+  /** Change any options, data included. Changed values animate in. */
+  update(patch: Partial<O>): this;
+  /** Show a loading / empty / error overlay (with optional text), or remove it with `null`. */
+  setState(state: State, text?: string): this;
+  /** Re-read CSS variables and draw the final frame now — also off-screen (print, export). */
+  render(): this;
+  /** Remove the chart and undo every change to the container. */
+  destroy(): void;
+}
+
+/** The default color palette. */
+export declare const PALETTE: readonly Color[];
+
+// ─── Charts ──────────────────────────────────────────────────────
+
+type Curve = 'smooth' | 'linear' | 'step';
+
+export interface BarOptions<R = Row> extends CommonOptions<Rows<R>, R>, AxisOptions, RowOptions<R> {
+  /** Value labels on the bars: `true`, or a function for the text. */
+  dataLabels?: boolean | ((value: number, row: R, index: number) => string);
+}
+export declare class BarChart<R = Row> extends Chart<BarOptions<R>> {}
+
+export interface HBarOptions<R = Row> extends CommonOptions<Rows<R>, R>, AxisOptions, RowOptions<R> {}
+export declare class HBarChart<R = Row> extends Chart<HBarOptions<R>> {}
+
+export interface LineOptions<R = Row> extends CommonOptions<Rows<R>, R>, AxisOptions, RowOptions<R> {
+  /** Default `'smooth'`. */
+  curve?: Curve;
+  /** Gradient fill under the line. Default `true`. */
+  fill?: boolean;
+  /** Point markers (up to 50 points). Default `true`. */
+  points?: boolean;
+  /** `'time'`: labels are ms timestamps on a local-time axis. Default `'category'`. */
+  xScale?: 'category' | 'time';
+  /** Default `'linear'`. */
+  yScale?: 'linear' | 'log';
+}
+export declare class LineChart<R = Row> extends Chart<LineOptions<R>> {}
+
+export interface AreaOptions extends CommonOptions<SeriesData, Series>, AxisOptions {
+  /** Stack the series. */
+  stacked?: boolean;
+}
+export declare class AreaChart extends Chart<AreaOptions> {}
+
+export interface StackedBarOptions extends CommonOptions<SeriesData, Series>, AxisOptions {}
+export declare class StackedBarChart extends Chart<StackedBarOptions> {}
+
+export interface GroupedBarOptions extends CommonOptions<SeriesData, Series>, AxisOptions {}
+export declare class GroupedBarChart extends Chart<GroupedBarOptions> {}
+
+export interface MultiLineOptions extends CommonOptions<SeriesData, Series>, AxisOptions {
+  curve?: Curve;
+  xScale?: 'category' | 'time';
+}
+export declare class MultiLineChart extends Chart<MultiLineOptions> {}
+
+export interface ScatterOptions extends CommonOptions<Point[], Point>, AxisOptions {}
+export declare class ScatterChart extends Chart<ScatterOptions> {}
+
+export interface BubbleOptions extends CommonOptions<Point[], Point>, AxisOptions {
+  /** Bubble radius range in px for the smallest and largest `size`. Default `[4, 32]`. */
+  radius?: [number, number];
+}
+export declare class BubbleChart extends Chart<BubbleOptions> {}
+
+export interface PieOptions<R = Row> extends CommonOptions<Rows<R>, R>, RowOptions<R> {
+  /** Donut hole as a share of the radius, 0–0.9. Default `0` (pie). */
+  innerRadius?: number;
+  /** Donut center text. Default: the formatted total. `false` hides it. */
+  center?: string | false;
+}
+export declare class PieChart<R = Row> extends Chart<PieOptions<R>> {}
+
+export interface RadarOptions extends CommonOptions<SeriesData, Series> {
+  labelFormat?: LabelFormat;
+  /** Value at the outer ring (default: from the data). */
+  max?: number;
+}
+export declare class RadarChart extends Chart<RadarOptions> {}
+
+export interface PolarOptions<R = Row> extends CommonOptions<Rows<R>, R>, RowOptions<R> {
+  /** `'sqrt'` keeps areas true to the values. Default `'sqrt'`. */
+  scale?: 'sqrt' | 'linear';
+}
+export declare class PolarChart<R = Row> extends Chart<PolarOptions<R>> {}
+
+export interface GaugeOptions extends CommonOptions<number> {
+  /** Default `0`. */
+  min?: number;
+  /** Default `100`. */
+  max?: number;
+  /** Text after the number, e.g. `'%'`. */
+  unit?: string;
+}
+export declare class GaugeChart extends Chart<GaugeOptions> {}
+
+export interface HeatmapData {
+  x: ArrayLike<string | number>;
+  y: ArrayLike<string | number>;
+  /** `values[y][x]`; `null` leaves a cell empty. */
+  values: Array<ArrayLike<number | null>>;
+}
+export interface HeatmapOptions extends Omit<CommonOptions<HeatmapData, { x: unknown; y: unknown; value: number }>, 'colors'> {
+  labelFormat?: LabelFormat;
+  /** Colors for the lowest and highest values. */
+  colors?: { low?: Color; high?: Color };
+}
+export declare class HeatmapChart extends Chart<HeatmapOptions> {}
+
+export interface Box {
+  label: string | number;
+  min: number;
+  q1: number;
+  median: number;
+  q3: number;
+  max: number;
+  outliers?: number[];
+  color?: Color;
+}
+export interface BoxplotOptions extends CommonOptions<Box[], Box>, AxisOptions {}
+export declare class BoxplotChart extends Chart<BoxplotOptions> {}
+
+export interface FunnelOptions<R = Row> extends CommonOptions<Rows<R>, R>, RowOptions<R> {
+  /** Color of labels drawn inside the segments. Default `'#fff'`. */
+  labelColor?: Color;
+}
+export declare class FunnelChart<R = Row> extends Chart<FunnelOptions<R>> {}
+
+export interface TreemapOptions<R = Row> extends CommonOptions<Rows<R>, R>, RowOptions<R> {
+  /** Color of labels drawn inside the tiles. Default `'#fff'`. */
+  labelColor?: Color;
+}
+export declare class TreemapChart<R = Row> extends Chart<TreemapOptions<R>> {}
+
+export interface SparklineOptions<R = Row> extends CommonOptions<Rows<R>, R>, RowOptions<R> {
+  min?: number;
+  max?: number;
+  /** Default `true`. */
+  fill?: boolean;
+  /** Dot on the last value. Default `true`. */
+  lastDot?: boolean;
+}
+export declare class SparklineChart<R = Row> extends Chart<SparklineOptions<R>> {}
+
+export interface RealtimeOptions extends CommonOptions<{ series: Array<{ name: string; color?: Color }> }> {
+  min?: number;
+  max?: number;
+  /** How many samples stay visible. Default `200`. */
+  window?: number;
+}
+export declare class RealtimeChart extends Chart<RealtimeOptions> {
+  /** Add one sample: one value per series (a number for a single series). */
+  push(values: number | Array<number | null>): this;
+  /** Remove every sample. */
+  clear(): this;
+}
+
+export interface Step {
+  label: string | number;
+  value: number;
+  /** Draw this bar from zero to its value (a subtotal or the end result). */
+  total?: boolean;
+}
+export interface WaterfallOptions extends Omit<CommonOptions<Step[], Step>, 'colors'>, AxisOptions {
+  colors?: { up?: Color; down?: Color; total?: Color };
+}
+export declare class WaterfallChart extends Chart<WaterfallOptions> {}
+
+export interface CompositeSeries extends Series {
+  type: 'bar' | 'line' | 'area' | 'scatter';
+  /** Put this series on the right axis. */
+  axis?: 'left' | 'right';
+  /** Number format for this series (tooltip and its axis). */
+  format?: NumberFormat;
+}
+export interface CompositeOptions extends CommonOptions<SeriesData<CompositeSeries>, CompositeSeries>, AxisOptions {
+  xScale?: 'category' | 'time';
+}
+export declare class CompositeChart extends Chart<CompositeOptions> {}

package/dist/jquery.d.ts

@@ -0,0 +1,21 @@
+// @aeriz/chart/jquery — install($, { BarChart }) then $(el).aerizChart('bar', options)
+import type { Chart } from './index.js';
+
+export type ChartId = 'bar' | 'hbar' | 'line' | 'area' | 'stacked-bar' | 'grouped-bar' | 'multi-line' | 'scatter' | 'bubble' | 'pie' | 'radar' | 'polar' | 'gauge' | 'heatmap' | 'boxplot' | 'funnel' | 'treemap' | 'sparkline' | 'realtime' | 'waterfall' | 'composite';
+
+/** Adds `$.fn.aerizChart` with the given chart classes. Call again to add more. */
+export declare function install<J extends { fn: any }>($: J, charts: Record<string, typeof Chart<any>>): J;
+
+declare global {
+  interface JQuery {
+    /** Create a chart: `.aerizChart('bar', { data })` (the chart must be installed). */
+    aerizChart(id: ChartId, options?: object): this;
+    /** Call a chart method on every matched element. */
+    aerizChart(method: 'update', patch: object): this;
+    aerizChart(method: 'setState', state: 'loading' | 'empty' | 'error' | null, text?: string): this;
+    aerizChart(method: 'render' | 'destroy' | 'clear'): this;
+    aerizChart(method: 'push', values: number | Array<number | null>): this;
+    /** The first element's chart instance, or `null`. */
+    aerizChart(method: 'instance'): Chart<any> | null;
+  }
+}

package/dist/react.d.ts

@@ -0,0 +1,59 @@
+// @aeriz/chart/react — one component per chart: <BarChart data={rows} … />
+import type { ForwardRefExoticComponent, ReactElement, Ref, CSSProperties, AriaAttributes } from 'react';
+import type {
+  BarChart as BarC, BarOptions,
+  HBarChart as HBarC, HBarOptions,
+  LineChart as LineC, LineOptions,
+  AreaChart as AreaC, AreaOptions,
+  StackedBarChart as StackedBarC, StackedBarOptions,
+  GroupedBarChart as GroupedBarC, GroupedBarOptions,
+  MultiLineChart as MultiLineC, MultiLineOptions,
+  ScatterChart as ScatterC, ScatterOptions,
+  BubbleChart as BubbleC, BubbleOptions,
+  PieChart as PieC, PieOptions,
+  RadarChart as RadarC, RadarOptions,
+  PolarChart as PolarC, PolarOptions,
+  GaugeChart as GaugeC, GaugeOptions,
+  HeatmapChart as HeatmapC, HeatmapOptions,
+  BoxplotChart as BoxplotC, BoxplotOptions,
+  FunnelChart as FunnelC, FunnelOptions,
+  TreemapChart as TreemapC, TreemapOptions,
+  SparklineChart as SparklineC, SparklineOptions,
+  RealtimeChart as RealtimeC, RealtimeOptions,
+  WaterfallChart as WaterfallC, WaterfallOptions,
+  CompositeChart as CompositeC, CompositeOptions,
+  Row,
+} from './index.js';
+
+/** Chart options as props, plus wrapper-div props. `ref` gives the chart instance. */
+export type Props<O, C> = O & AriaAttributes & {
+  className?: string;
+  style?: CSSProperties;
+  id?: string;
+  role?: string;
+  tabIndex?: number;
+  ref?: Ref<C>;
+  [data: `data-${string}`]: string | undefined;
+};
+
+export declare const BarChart: <R = Row>(props: Props<BarOptions<R>, BarC<any>>) => ReactElement | null;
+export declare const HBarChart: <R = Row>(props: Props<HBarOptions<R>, HBarC<any>>) => ReactElement | null;
+export declare const LineChart: <R = Row>(props: Props<LineOptions<R>, LineC<any>>) => ReactElement | null;
+export declare const AreaChart: ForwardRefExoticComponent<Props<AreaOptions, AreaC>>;
+export declare const StackedBarChart: ForwardRefExoticComponent<Props<StackedBarOptions, StackedBarC>>;
+export declare const GroupedBarChart: ForwardRefExoticComponent<Props<GroupedBarOptions, GroupedBarC>>;
+export declare const MultiLineChart: ForwardRefExoticComponent<Props<MultiLineOptions, MultiLineC>>;
+export declare const ScatterChart: ForwardRefExoticComponent<Props<ScatterOptions, ScatterC>>;
+export declare const BubbleChart: ForwardRefExoticComponent<Props<BubbleOptions, BubbleC>>;
+export declare const PieChart: <R = Row>(props: Props<PieOptions<R>, PieC<any>>) => ReactElement | null;
+export declare const RadarChart: ForwardRefExoticComponent<Props<RadarOptions, RadarC>>;
+export declare const PolarChart: <R = Row>(props: Props<PolarOptions<R>, PolarC<any>>) => ReactElement | null;
+export declare const GaugeChart: ForwardRefExoticComponent<Props<GaugeOptions, GaugeC>>;
+export declare const HeatmapChart: ForwardRefExoticComponent<Props<HeatmapOptions, HeatmapC>>;
+export declare const BoxplotChart: ForwardRefExoticComponent<Props<BoxplotOptions, BoxplotC>>;
+export declare const FunnelChart: <R = Row>(props: Props<FunnelOptions<R>, FunnelC<any>>) => ReactElement | null;
+export declare const TreemapChart: <R = Row>(props: Props<TreemapOptions<R>, TreemapC<any>>) => ReactElement | null;
+export declare const SparklineChart: <R = Row>(props: Props<SparklineOptions<R>, SparklineC<any>>) => ReactElement | null;
+export declare const RealtimeChart: ForwardRefExoticComponent<Props<RealtimeOptions, RealtimeC>>;
+export declare const WaterfallChart: ForwardRefExoticComponent<Props<WaterfallOptions, WaterfallC>>;
+export declare const CompositeChart: ForwardRefExoticComponent<Props<CompositeOptions, CompositeC>>;

package/dist/svelte.d.ts

@@ -0,0 +1,56 @@
+// @aeriz/chart/svelte — one action per chart: <div use:barChart={{ data }}></div>
+import type { Chart } from './index.js';
+import type {
+  BarChart as BarC, BarOptions,
+  HBarChart as HBarC, HBarOptions,
+  LineChart as LineC, LineOptions,
+  AreaChart as AreaC, AreaOptions,
+  StackedBarChart as StackedBarC, StackedBarOptions,
+  GroupedBarChart as GroupedBarC, GroupedBarOptions,
+  MultiLineChart as MultiLineC, MultiLineOptions,
+  ScatterChart as ScatterC, ScatterOptions,
+  BubbleChart as BubbleC, BubbleOptions,
+  PieChart as PieC, PieOptions,
+  RadarChart as RadarC, RadarOptions,
+  PolarChart as PolarC, PolarOptions,
+  GaugeChart as GaugeC, GaugeOptions,
+  HeatmapChart as HeatmapC, HeatmapOptions,
+  BoxplotChart as BoxplotC, BoxplotOptions,
+  FunnelChart as FunnelC, FunnelOptions,
+  TreemapChart as TreemapC, TreemapOptions,
+  SparklineChart as SparklineC, SparklineOptions,
+  RealtimeChart as RealtimeC, RealtimeOptions,
+  WaterfallChart as WaterfallC, WaterfallOptions,
+  CompositeChart as CompositeC, CompositeOptions,
+} from './index.js';
+
+/** A Svelte action whose parameter is the chart's options. */
+export type Action<O> = (node: HTMLElement, options?: O) => {
+  update(options?: O): void;
+  destroy(): void;
+};
+
+/** The chart an action created on `node`, or `null`. */
+export declare function chartOf(node: HTMLElement): Chart<any> | null;
+
+export declare const barChart: Action<BarOptions>;
+export declare const hbarChart: Action<HBarOptions>;
+export declare const lineChart: Action<LineOptions>;
+export declare const areaChart: Action<AreaOptions>;
+export declare const stackedBarChart: Action<StackedBarOptions>;
+export declare const groupedBarChart: Action<GroupedBarOptions>;
+export declare const multiLineChart: Action<MultiLineOptions>;
+export declare const scatterChart: Action<ScatterOptions>;
+export declare const bubbleChart: Action<BubbleOptions>;
+export declare const pieChart: Action<PieOptions>;
+export declare const radarChart: Action<RadarOptions>;
+export declare const polarChart: Action<PolarOptions>;
+export declare const gaugeChart: Action<GaugeOptions>;
+export declare const heatmapChart: Action<HeatmapOptions>;
+export declare const boxplotChart: Action<BoxplotOptions>;
+export declare const funnelChart: Action<FunnelOptions>;
+export declare const treemapChart: Action<TreemapOptions>;
+export declare const sparklineChart: Action<SparklineOptions>;
+export declare const realtimeChart: Action<RealtimeOptions>;
+export declare const waterfallChart: Action<WaterfallOptions>;
+export declare const compositeChart: Action<CompositeOptions>;

package/dist/types/area.d.ts

@@ -0,0 +1 @@
+export { AreaChart } from '../index.js';

package/dist/types/bar.d.ts

@@ -0,0 +1 @@
+export { BarChart } from '../index.js';

package/dist/types/boxplot.d.ts

@@ -0,0 +1 @@
+export { BoxplotChart } from '../index.js';

package/dist/types/bubble.d.ts

@@ -0,0 +1 @@
+export { BubbleChart } from '../index.js';

package/dist/types/composite.d.ts

@@ -0,0 +1 @@
+export { CompositeChart } from '../index.js';

package/dist/types/funnel.d.ts

@@ -0,0 +1 @@
+export { FunnelChart } from '../index.js';

package/dist/types/gauge.d.ts

@@ -0,0 +1 @@
+export { GaugeChart } from '../index.js';

package/dist/types/grouped-bar.d.ts

@@ -0,0 +1 @@
+export { GroupedBarChart } from '../index.js';

package/dist/types/hbar.d.ts

@@ -0,0 +1 @@
+export { HBarChart } from '../index.js';

package/dist/types/heatmap.d.ts

@@ -0,0 +1 @@
+export { HeatmapChart } from '../index.js';

package/dist/types/line.d.ts

@@ -0,0 +1 @@
+export { LineChart } from '../index.js';

package/dist/types/multi-line.d.ts

@@ -0,0 +1 @@
+export { MultiLineChart } from '../index.js';

package/dist/types/pie.d.ts

@@ -0,0 +1 @@
+export { PieChart } from '../index.js';

package/dist/types/polar.d.ts

@@ -0,0 +1 @@
+export { PolarChart } from '../index.js';

package/dist/types/radar.d.ts

@@ -0,0 +1 @@
+export { RadarChart } from '../index.js';

package/dist/types/realtime.d.ts

@@ -0,0 +1 @@
+export { RealtimeChart } from '../index.js';

package/dist/types/scatter.d.ts

@@ -0,0 +1 @@
+export { ScatterChart } from '../index.js';

package/dist/types/sparkline.d.ts

@@ -0,0 +1 @@
+export { SparklineChart } from '../index.js';

package/dist/types/stacked-bar.d.ts

@@ -0,0 +1 @@
+export { StackedBarChart } from '../index.js';

package/dist/types/treemap.d.ts

@@ -0,0 +1 @@
+export { TreemapChart } from '../index.js';

package/dist/types/waterfall.d.ts

@@ -0,0 +1 @@
+export { WaterfallChart } from '../index.js';

package/dist/vue.d.ts

@@ -0,0 +1,63 @@
+// @aeriz/chart/vue — one component per chart: <BarChart :data="rows" @click="…" />
+import type { DefineComponent, ShallowRef } from 'vue';
+import type { Hit, Chart } from './index.js';
+import type {
+  BarChart as BarC, BarOptions,
+  HBarChart as HBarC, HBarOptions,
+  LineChart as LineC, LineOptions,
+  AreaChart as AreaC, AreaOptions,
+  StackedBarChart as StackedBarC, StackedBarOptions,
+  GroupedBarChart as GroupedBarC, GroupedBarOptions,
+  MultiLineChart as MultiLineC, MultiLineOptions,
+  ScatterChart as ScatterC, ScatterOptions,
+  BubbleChart as BubbleC, BubbleOptions,
+  PieChart as PieC, PieOptions,
+  RadarChart as RadarC, RadarOptions,
+  PolarChart as PolarC, PolarOptions,
+  GaugeChart as GaugeC, GaugeOptions,
+  HeatmapChart as HeatmapC, HeatmapOptions,
+  BoxplotChart as BoxplotC, BoxplotOptions,
+  FunnelChart as FunnelC, FunnelOptions,
+  TreemapChart as TreemapC, TreemapOptions,
+  SparklineChart as SparklineC, SparklineOptions,
+  RealtimeChart as RealtimeC, RealtimeOptions,
+  WaterfallChart as WaterfallC, WaterfallOptions,
+  CompositeChart as CompositeC, CompositeOptions,
+} from './index.js';
+
+/**
+ * Chart options are props; `onClick` / `onLegend` are the events `@click` / `@legend`.
+ * The template ref exposes `chart` (the chart instance).
+ */
+type Component<O, C> = DefineComponent<
+  Omit<O, 'onClick' | 'onLegend'>,
+  { chart: ShallowRef<C | null> },
+  {},
+  {},
+  {},
+  {},
+  {},
+  { click: (hit: Hit, chart: Chart) => void; legend: (index: number, visible: boolean, chart: Chart) => void }
+>;
+
+export declare const BarChart: Component<BarOptions, BarC>;
+export declare const HBarChart: Component<HBarOptions, HBarC>;
+export declare const LineChart: Component<LineOptions, LineC>;
+export declare const AreaChart: Component<AreaOptions, AreaC>;
+export declare const StackedBarChart: Component<StackedBarOptions, StackedBarC>;
+export declare const GroupedBarChart: Component<GroupedBarOptions, GroupedBarC>;
+export declare const MultiLineChart: Component<MultiLineOptions, MultiLineC>;
+export declare const ScatterChart: Component<ScatterOptions, ScatterC>;
+export declare const BubbleChart: Component<BubbleOptions, BubbleC>;
+export declare const PieChart: Component<PieOptions, PieC>;
+export declare const RadarChart: Component<RadarOptions, RadarC>;
+export declare const PolarChart: Component<PolarOptions, PolarC>;
+export declare const GaugeChart: Component<GaugeOptions, GaugeC>;
+export declare const HeatmapChart: Component<HeatmapOptions, HeatmapC>;
+export declare const BoxplotChart: Component<BoxplotOptions, BoxplotC>;
+export declare const FunnelChart: Component<FunnelOptions, FunnelC>;
+export declare const TreemapChart: Component<TreemapOptions, TreemapC>;
+export declare const SparklineChart: Component<SparklineOptions, SparklineC>;
+export declare const RealtimeChart: Component<RealtimeOptions, RealtimeC>;
+export declare const WaterfallChart: Component<WaterfallOptions, WaterfallC>;
+export declare const CompositeChart: Component<CompositeOptions, CompositeC>;