@aeriz/chart 1.1.0 → 2.0.0

package/README.md

@@ -1,6 +1,6 @@
 # @aeriz/chart
 
-Visualization, light as air. 21 canvas chart types from one options object, with zero dependencies.
+Visualization, light as air. 21 canvas chart types, one way to use them, zero dependencies.
 
 **Docs and live demos: https://aeriz.dev/chart/**
 
@@ -18,77 +18,103 @@ const chart = new BarChart('#sales', {
 chart.update({ data: { Jan: 30, Feb: 80 } }); // animates to the new values
 ```
 
-## Why
+## One way to do it
 
-- **One API.** Every type works the same: `new Chart(el, options)` → `update()` → `destroy()`.
-- **Only what you use.** Each chart is its own module and the package has `"sideEffects": false`, so bundlers keep only the charts you import. One chart costs about 7–10 KB min+gzip, and all 21 cost about 19 KB.
-- **Works anywhere.** Adapters for React, Vue, Svelte and jQuery are separate entry points.
-- **Fast.** A million-point line draws in about 50 ms. Off-screen charts don't draw.
-- **Fits in without config.** Text color, font and background come from the page, so charts match light and dark themes. Override any of it with `--aeriz-*` CSS variables.
-- **Accessible.** You get keyboard navigation, screen-reader announcements, a clickable legend, and touch and pen tooltips.
+Every chart, in every environment:
+
+| To | Use |
+|---|---|
+| Create | `new BarChart(target, options)` |
+| Change data or options | `chart.update({ data, … })` |
+| Loading · empty · error | `chart.setState('loading' \| 'empty' \| 'error' \| null, text?)` |
+| Redraw now (after CSS changes, off-screen) | `chart.render()` |
+| Remove | `chart.destroy()` |
+
+Data is always the `data` option:
+
+```js
+new BarChart(el, { data: [64, 42, 78] });                     // numbers
+new BarChart(el, { data: { Jan: 64, Feb: 42 } });             // an object
+new BarChart(el, { data: rows, value: (r) => r.sales });      // your rows
+
+new MultiLineChart(el, {
+  data: { categories: ['Q1', 'Q2'], series: [{ name: '2026', values: [140, 160] }] },
+});
+```
+
+Mistakes don't fail silently. The console says what is wrong and how to fix it:
+
+```
+[aeriz] BarChart: unknown option "dat" — did you mean "data"?
+[aeriz] MultiLineChart: series[0] "2026" has 1 values but there are 2 categories.
+```
 
 ## Charts
 
-`BarChart` `HBarChart` `LineChart` `AreaChart` `StackedBarChart` `GroupedBarChart` `MultiLineChart` `ScatterChart` `BubbleChart` `PieChart` `RadarChart` `PolarChart` `GaugeChart` `HeatmapChart` `BoxplotChart` `FunnelChart` `TreemapChart` `Sparkline` `RealtimeChart` `WaterfallChart` `CompositeChart`
+`BarChart` `HBarChart` `LineChart` `AreaChart` `StackedBarChart` `GroupedBarChart` `MultiLineChart` `ScatterChart` `BubbleChart` `PieChart` `RadarChart` `PolarChart` `GaugeChart` `HeatmapChart` `BoxplotChart` `FunnelChart` `TreemapChart` `SparklineChart` `RealtimeChart` `WaterfallChart` `CompositeChart`
 
-Import one directly by its subpath: `@aeriz/chart/bar`, `@aeriz/chart/line`, `@aeriz/chart/multi-line` and so on.
+Each chart is its own module and the package has `"sideEffects": false`, so bundlers keep only the charts you import: one chart is about 9–12 KB min+gzip, all 21 about 21 KB. Without a bundler, import a subpath: `@aeriz/chart/bar`, `@aeriz/chart/line`, `@aeriz/chart/multi-line` and so on.
 
 ## Frameworks
 
+Same chart names, same options as props.
+
 ```jsx
 // React 16.8+
-import { BarChart } from '@aeriz/chart/bar';
-import { AerizChart } from '@aeriz/chart/react';
+import { BarChart } from '@aeriz/chart/react';
 
-<AerizChart type={BarChart} data={rows} style={{ height: 320 }} />;
+<BarChart data={rows} format={{ style: 'percent' }} onClick={(hit) => …} style={{ height: 320 }} />;
 ```
 
 ```vue
 <!-- Vue 3.2+ -->
-<AerizChart :type="LineChart" :data="rows" style="height: 300px" />
-<!-- import { AerizChart } from '@aeriz/chart/vue' -->
+<script setup>
+import { LineChart } from '@aeriz/chart/vue';
+</script>
+<template><LineChart :data="rows" @click="onHit" style="height: 300px" /></template>
 ```
 
 ```svelte
 <!-- Svelte 3, 4, 5 (an action, so no compiler setup) -->
-<div use:aeriz={{ type: BarChart, data: rows }} style="height: 300px"></div>
-<!-- import { aeriz } from '@aeriz/chart/svelte' -->
+<script>
+  import { barChart } from '@aeriz/chart/svelte';
+</script>
+<div use:barChart={{ data: rows }} style="height: 300px"></div>
 ```
 
 ```js
 // jQuery 1.7+
+import { PieChart } from '@aeriz/chart/pie';
 import { install } from '@aeriz/chart/jquery';
-install($);
-$('#share').aerizChart(PieChart, { data: { Chrome: 64, Safari: 19 } });
+
+install($, { PieChart });
+$('#share').aerizChart('pie', { data: { Chrome: 64, Safari: 19 } });
+$('#share').aerizChart('update', { data: { Chrome: 70, Safari: 20 } });
 ```
 
 ## CDN
 
 ```html
-<!-- Everything, as the global Aeriz (also installs the jQuery plugin if jQuery is present) -->
-<script src="https://cdn.jsdelivr.net/npm/@aeriz/chart@1.1.0/dist/aeriz.min.js"></script>
+<!-- Everything, as the global Aeriz (also installs the jQuery plugin if jQuery is loaded first) -->
+<script src="https://cdn.jsdelivr.net/npm/@aeriz/chart@2.0.0/dist/aeriz.min.js"></script>
 
 <!-- One chart, as an ES module -->
 <script type="module">
-  import { BarChart } from 'https://cdn.jsdelivr.net/npm/@aeriz/chart@1.1.0/dist/esm/charts/bar.js';
+  import { BarChart } from 'https://cdn.jsdelivr.net/npm/@aeriz/chart@2.0.0/dist/esm/charts/bar.js';
 </script>
 ```
 
-## New in 1.1
+## Upgrading from 1.x
 
-1.0 code keeps working. What 1.1 adds:
+2.0 removes the duplicate ways of doing the same thing. When you use a 1.x name, the console tells you the 2.0 one. The main changes:
 
-- per-chart modules and subpath imports;
-- the framework adapters;
-- `update()`;
-- a `format` option for numbers;
-- a legend that toggles series;
-- keyboard support and accessibility;
-- local-time axes;
-- right-axis composite charts;
-- large-data decimation.
+- `setData(d)` → `update({ data: d })`; `setLoading/setEmpty/setError/clearState` → `setState(…)`; `invalidate()` → `render()`.
+- `categories`/`series`/`layers`/`axes` options → `data: { categories, series }`.
+- `ariaLabel` → `title`, `palette`/`color` → `colors`, `yTickFormat`/`xTickFormat` → `format`/`labelFormat`, `interpolation` → `curve`.
+- React/Vue `<AerizChart type={BarChart}>` → `<BarChart>`; Svelte `use:aeriz` → `use:barChart`; jQuery `.aerizChart(PieChart, …)` → `.aerizChart('pie', …)`.
+- `Sparkline` → `SparklineChart`.
 
-It also fixes a long list of 1.0 bugs. The full list is at https://aeriz.dev/chart/#changes.
+The full table is at https://aeriz.dev/chart/#migrate. To stay on 1.x: `npm install @aeriz/chart@1`.
 
 ## License