@aeriz/chart 1.1.0 → 2.0.0

package/dist/jquery.d.ts

@@ -1,10 +1,21 @@
+// @aeriz/chart/jquery — install($, { BarChart }) then $(el).aerizChart('bar', options)
 import type { Chart } from './index.js';
 
-/**
- * Adds `$.fn.aerizChart`:
- * `$(el).aerizChart(BarChart, options)` · `$(el).aerizChart('setData', rows)` ·
- * `$(el).aerizChart('instance')` · `$(el).aerizChart('destroy')`.
- * `registry` lets you pass chart types by name (`'BarChart'`).
- */
-export declare function install<J>(jquery: J, registry?: Record<string, new (el: HTMLElement, o: any) => Chart<any>>): J;
-export default install;
+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

@@ -1,22 +1,59 @@
-import type { CSSProperties, ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from 'react';
-import type { Chart } from './index.js';
+// @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';
 
-type ChartClass<C extends Chart<any>> = new (container: HTMLElement, options: any) => C;
-type OptionsOf<C> = C extends Chart<infer O> ? O : never;
-
-export interface AerizChartProps<C extends Chart<any> = Chart<any>> extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
-  /** The chart class, e.g. `BarChart` from `@aeriz/chart/bar`. Changing it re-creates the chart. */
-  type: ChartClass<C>;
-  /** Chart options. A changed object (shallow-compared) calls `chart.update()`. */
-  options?: Partial<OptionsOf<C>>;
-  /** Shorthand for `options.data`. */
-  data?: OptionsOf<C> extends { data: infer D } ? D : unknown;
-  /** Receives the chart instance after mount. */
-  onReady?: (chart: C) => void;
+/** 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;
+};
 
-/** `ref` receives the chart instance. */
-export declare const AerizChart: ForwardRefExoticComponent<AerizChartProps & RefAttributes<Chart<any>>>;
-export default AerizChart;
+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

@@ -1,17 +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';
 
-export interface AerizActionParams<C extends Chart<any> = Chart<any>> {
-  /** The chart class, e.g. `BarChart`. Changing it re-creates the chart. */
-  type: new (el: HTMLElement, options: any) => C;
-  /** Receives the chart instance. */
-  onReady?: (chart: C) => void;
-  /** Any chart option (data, format, …). */
-  [option: string]: unknown;
-}
+/** A Svelte action whose parameter is the chart's options. */
+export type Action<O> = (node: HTMLElement, options?: O) => {
+  update(options?: O): void;
+  destroy(): void;
+};
 
-/** `<div use:aeriz={{ type: BarChart, data }} />` — works in Svelte 3, 4 and 5. */
-export declare function aeriz(
-  node: HTMLElement,
-  params: AerizActionParams,
-): { update(params: AerizActionParams): void; destroy(): void };
-export default aeriz;
+/** 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/sparkline.d.ts

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

package/dist/vue.d.ts

@@ -1,13 +1,63 @@
-import type { DefineComponent, PropType } from 'vue';
-import type { Chart } from './index.js';
+// @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';
 
 /**
- * `<AerizChart :type="BarChart" :data="rows" :options="{…}" @ready @click />`
- * Template ref: `.chart()` returns the instance.
+ * Chart options are props; `onClick` / `onLegend` are the events `@click` / `@legend`.
+ * The template ref exposes `chart` (the chart instance).
  */
-export declare const AerizChart: DefineComponent<{
-  type: { type: PropType<new (el: HTMLElement, options: any) => Chart<any>>; required: true };
-  options: { type: PropType<Record<string, unknown>>; default: () => {} };
-  data: { type: PropType<unknown>; default: undefined };
-}>;
-export default AerizChart;
+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>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aeriz/chart",
-  "version": "1.1.0",
-  "description": "Visualization, light as air — 21 canvas chart types, import only what you use, zero dependencies. React, Vue, Svelte and jQuery adapters included.",
+  "version": "2.0.0",
+  "description": "Visualization, light as air — 21 canvas chart types with one way to use them, import only what you use, zero dependencies. React, Vue, Svelte and jQuery components included.",
   "keywords": [
     "chart",
     "charts",