@vuu-ui/vuu-chart 4.0.0-alpha.20 → 4.0.0-alpha.22

package/README.md

@@ -0,0 +1,324 @@
+# @vuu-ui/vuu-chart
+
+React chart components driven by Vuu `DataSource`s, rendered with
+[Apache ECharts](https://echarts.apache.org).
+
+Every chart is declarative and configured by **column mapping**. You tell
+the chart which columns hold the x values, the series values, the OHLC values
+and so on. The chart subscribes to the DataSource and keeps itself up to date
+as rows are inserted, updated or removed.
+
+| Component                                   | Use for                                                                |
+| ------------------------------------------- | ---------------------------------------------------------------------- |
+| `CartesianChart`                            | line, area (incl. stepped), bar (vertical/horizontal/stacked), scatter |
+| `CandlestickChart`                          | OHLC bars, optional volume pane and line/scatter overlays              |
+| `DepthChart`                                | market depth (cumulative bid/ask stepped areas)                        |
+| `HeatmapChart`                              | value by two dimensions, e.g. price level x time                       |
+| `TreemapChart`, `SunburstChart`, `PieChart` | breakdowns grouped hierarchically by columns                           |
+| `Chart`                                     | the original line/scatter chart (unchanged API)                        |
+
+Showcase examples for every chart type are in `showcase/src/examples/Chart`.
+
+## Common props
+
+All of the new chart components accept these props (`VuuChartBaseProps`),
+plus the standard `className`, `style`, `id` etc.
+
+| Prop                | Type                                                    | Notes                                                                                                   |
+| ------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `echartsOptions`    | `EChartsCoreOption \| (generated) => EChartsCoreOption` | Escape hatch: raw ECharts options, deep merged over the generated options (see below)                   |
+| `maxRows`           | `number`                                                | Maximum rows read from each DataSource. Default `1000`                                                  |
+| `renderer`          | `"canvas" \| "svg"`                                     | Default `"canvas"`, which is best for streaming data                                                    |
+| `showTooltip`       | `boolean`                                               | Default `true`                                                                                          |
+| `theme`             | `Partial<ChartTheme>`                                   | Override colours resolved from css tokens                                                               |
+| `onChartReady`      | `(chart: ECharts) => void`                              | Access to the ECharts instance                                                                          |
+| `onItemClick`       | `(evt: ChartItemEvent) => void`                         | `evt.row` is the `DataSourceRow` behind the item. For aggregated items, `evt.rows` and `evt.groupPath` are also set |
+| `onItemContextMenu` | `(evt: ChartItemEvent) => void`                         | As above                                                                                                |
+
+Cartesian, candlestick and heatmap charts also accept
+`dataZoom?: boolean | "inside" | "slider" | "both"`. `true` is the same as
+`"inside"`. Most charts accept `legend?: "top" | "bottom" | "none"`.
+
+Mark lines (`markLines?: MarkLineDef[]`) can be added to series and to the
+candlestick price axis:
+
+```ts
+interface MarkLineDef {
+  value: number | "last" | "min" | "max" | "average" | { weightedAverage: string };
+  label?: string;
+  color?: string; // css colour, or "up" | "down" | "palette-1".."palette-8"
+  lineType?: "solid" | "dashed" | "dotted";
+  labelPosition?: MarkLineLabelPosition; // default "insideEndTop"
+}
+```
+
+Rows used by a series can be restricted with `where`, either as
+`{ side: "BUY" }` (all entries must match) or as a predicate
+`(row, columnMap) => boolean`. Points can be coloured by the value in a column
+with `colorBy: { columnName: "side", colors: { BUY: "up", SELL: "down" } }`.
+
+## CartesianChart
+
+```tsx
+<CartesianChart
+  dataSource={tradesDataSource}
+  xAxis={{ columnName: "time", type: "time" }}
+  yAxes={[{ scale: true }, { position: "right", name: "Qty" }]}
+  series={[
+    { type: "line", columnName: "price", markLines: [{ value: "last" }] },
+    { type: "bar", columnName: "quantity", yAxisIndex: 1 },
+    {
+      type: "scatter",
+      columnName: "price",
+      id: "fills",
+      dataSource: fillsDataSource, // overlay from a second DataSource
+      colorBy: { columnName: "side", colors: { BUY: "up", SELL: "down" } },
+    },
+  ]}
+  dataZoom="both"
+/>
+```
+
+- `xAxis: { columnName, type?: "time" | "category" | "value", name? }`.
+  `"time"` expects epoch millisecond timestamps. The default, `"category"`,
+  uses distinct values in DataSource order.
+- `series: CartesianSeriesDef[]`. Each has a `type` of
+  `"line" | "area" | "bar" | "scatter"`, a `columnName`, and optionally:
+  - `dataSource` and `xColumnName`, to read from a different DataSource
+  - `where`, `yAxisIndex`, `stack`
+  - `step: "start" | "middle" | "end"` and `smooth`
+  - `color`, `colorBy` and `areaOpacity`
+  - `showSymbol`, `symbolSize` and `markLines`
+- `yAxes: CartesianYAxisDef[]`. Each takes `name`, `position`, `scale`,
+  `type: "value" | "log"`, `min` and `max`.
+- `orientation: "horizontal"` gives horizontal bars.
+- `aggregation: "sum" | "avg" | "min" | "max" | "count" | "last"` combines
+  rows that share the same category, e.g. notional summed by sector.
+
+## CandlestickChart
+
+```tsx
+<CandlestickChart
+  dataSource={barsDataSource} // bars for one ric and interval
+  volumeColumnName="volume"
+  markLines={[{ value: "last", label: "Last" }]}
+  overlays={[
+    { type: "line", columnName: "vwap", name: "VWAP" },
+    {
+      type: "scatter",
+      columnName: "price",
+      dataSource: fillsDataSource,
+      timeColumnName: "time",
+      colorBy: { columnName: "side", colors: { BUY: "up", SELL: "down" } },
+      markLines: [{ value: { weightedAverage: "quantity" }, label: "Avg fill" }],
+    },
+  ]}
+/>
+```
+
+- `timeColumnName` defaults to `"start"`.
+- `ohlcColumnNames` defaults to `open`, `high`, `low` and `close`.
+- `volumeColumnName` adds a volume pane, sized by `volumePaneHeight` (% of the
+  chart, default 20). The volume bars are coloured up/down.
+- `xAxisType`: the default, `"category"`, spaces bars evenly with no gaps.
+  `"time"` uses a continuous time axis.
+- `overlays` take `type: "line" | "scatter"`, `columnName`, and optionally
+  `dataSource`, `timeColumnName`, `where`, `color`, `colorBy`, `symbol`,
+  `symbolSize` and `markLines`. On a category axis, overlay points from
+  another DataSource are placed on the bar whose interval contains their
+  timestamp. Points earlier than the first bar are dropped.
+- `dataZoom` defaults to `"both"`, and the zoom is shared by the price and
+  volume panes.
+- `formatTime` formats axis labels.
+
+## DepthChart
+
+```tsx
+<DepthChart dataSource={depthDataSource} cumulativeSizeColumnName="cumSize" />
+```
+
+Renders cumulative bids (stepped area, `step: "start"`) and asks
+(`step: "end"`) over a value price axis, with a mid price mark line.
+
+Columns default to `priceColumnName="price"`, `sideColumnName="side"` and
+`sizeColumnName="size"`. The side values default to `bidValue="BUY"` and
+`askValue="SELL"`. If `cumulativeSizeColumnName` is not given, cumulative size
+is computed from `sizeColumnName`. Set `showMidPrice={false}` to hide the mid
+price line.
+
+## HeatmapChart
+
+```tsx
+<HeatmapChart
+  dataSource={tradesDataSource}
+  xAxis={{ columnName: "time", type: "time", bucketSize: 60_000 }}
+  yAxis={{ columnName: "price", type: "value", bucketSize: 0.05 }}
+  valueColumnName="quantity"
+  aggregation="sum"
+/>
+```
+
+- Both axes are category axes built from the distinct (bucketed) values.
+  `bucketSize` rounds numeric values down to a multiple of the bucket size.
+- `aggregation` defaults to `"sum"`.
+- `colorScale`: `"sequential"` (the default) uses the theme heatmap colours.
+  `"diverging"` maps negative values to down and positive values to up,
+  symmetric around zero, e.g. for pnl.
+- `min` and `max` fix the colour range. By default the range is recomputed
+  from the data on each update.
+- `showVisualMap` controls the colour scale legend (default `true`).
+- Also accepts `where` and `formatTime`.
+
+## TreemapChart, SunburstChart, PieChart
+
+```tsx
+<TreemapChart
+  dataSource={positionsDataSource}
+  groupByColumnNames={["sector", "ric"]}
+  valueColumnName="pnl"
+  colorMode="sign"
+  onItemClick={({ groupPath, rows }) => console.log(groupPath, rows?.length)}
+/>
+
+<PieChart
+  dataSource={positionsDataSource}
+  groupByColumnNames={["currency"]}
+  valueColumnName="notional"
+  donut
+  legend="bottom"
+/>
+```
+
+- `groupByColumnNames` lists the grouping columns, outermost first. Pie charts
+  use only the first column.
+- `aggregation` defaults to `"sum"`.
+- `colorMode`:
+  - `"palette"` (the default) gives each top level group its own colour.
+  - `"sign"` sizes nodes by absolute value and colours them up or down by
+    sign. A parent is sized as the sum of its children, while labels and
+    tooltips show the net value.
+- Also accepts `formatValue`, `where` and `donut` (pie only).
+- `HierarchyChart` with a `type` prop is the underlying component.
+
+## Streaming model
+
+Each chart separates **structure** from **data**:
+
+- The **base option** holds axes, grids, series definitions, theme, legends,
+  dataZoom and `echartsOptions`. It is rebuilt with
+  `setOption(..., { notMerge: true })` only when props (compared
+  structurally), theme mode or the set of DataSources change.
+- **Data** is held per DataSource in a `ChartDataStore`. The store subscribes
+  to a viewport of `maxRows` rows and applies snapshots, inserts, updates and
+  deletes by row key. Updates set a dirty flag. At most once per animation
+  frame, the chart builds a data-only partial option (series `data`, category
+  axis `data`, visualMap range, mark line values). That option is merged by
+  component id, so axes, zoom state and legend selection are preserved.
+
+A bar that ticks in place, or a depth level that updates, therefore costs one
+partial `setOption` per frame, however many updates arrive. `appendData` is not
+used because Vuu rows also update and delete in place, which `appendData`
+cannot express.
+
+The original `Chart` component is also throttled to animation frames.
+
+## DataSource ownership and teardown
+
+The new charts own the DataSource subscriptions they create:
+
+- On unmount, and when a `dataSource` prop is replaced, the chart unsubscribes
+  from the DataSource.
+- On unmount, the ECharts instance is disposed and any pending animation frame
+  is cancelled.
+
+So give each chart its own DataSource instance rather than sharing one with
+another component, such as a table. Filters, sorts and link groups apply as
+normal.
+
+## Theming
+
+Colours are read from css custom properties on the chart element. Defaults
+map to Salt tokens, so light and dark modes work automatically. The theme is
+re-read when the Vuu `ThemeContext` mode changes.
+
+```css
+.my-charts {
+  --vuuChart-upColor: #26a69a;
+  --vuuChart-downColor: #ef5350;
+}
+```
+
+The tokens are:
+
+- `--vuuChart-foreground` and `--vuuChart-secondaryForeground`
+- `--vuuChart-background`
+- `--vuuChart-axisLineColor` and `--vuuChart-splitLineColor`
+- `--vuuChart-crosshairColor`
+- `--vuuChart-fontFamily`
+- `--vuuChart-tooltip-background` and `--vuuChart-tooltip-borderColor`
+- `--vuuChart-upColor` and `--vuuChart-downColor`
+- `--vuuChart-heatmap-lowColor` and `--vuuChart-heatmap-highColor`
+- `--vuuChart-color-1` … `--vuuChart-color-8`, the series palette
+
+The `theme` prop overrides any resolved value, e.g.
+`theme={{ upColor: "#26a69a" }}`.
+
+## Escape hatch: `echartsOptions`
+
+Anything not modelled can be passed as raw ECharts options. They are deep
+merged over the generated option:
+
+- Objects merge recursively.
+- Arrays of components (series, xAxis, yAxis, grid, dataZoom …) merge item
+  by item, matched by `id`, or by index where there is no id.
+- An object given for an array component merges into the first item.
+- Arrays of primitives are replaced.
+
+A function receives the generated option and returns the option to use.
+Overrides are applied when the structure is built, not on each data update.
+`mergeEChartsOptions` is exported if you need the same merge elsewhere.
+
+```tsx
+<CandlestickChart
+  dataSource={barsDataSource}
+  echartsOptions={{
+    title: { text: "VOD.L 5s" },
+    series: [{ id: "candles", itemStyle: { color: "#26a69a", color0: "#ef5350" } }],
+  }}
+/>
+```
+
+Generated component ids:
+
+| Chart       | Ids                                                                                                                                       |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| Cartesian   | grid `main`; xAxis `x`; yAxes `y0`, `y1` …; series `id ?? columnName`                                                                     |
+| Candlestick | grids `price`, `volume`; xAxes `x`, `x-volume`; yAxes `price`, `volume`; series `candles`, `volume`, `overlay-{index}-{id ?? columnName}` |
+| Depth       | grid `main`; xAxis `x`; series `bids`, `asks`                                                                                             |
+| Heatmap     | grid `main`; xAxis `x`; series `heatmap`; visualMap `vm`                                                                                  |
+| Hierarchy   | series `treemap` / `sunburst` / `pie`                                                                                                     |
+| dataZoom    | `zoom-inside`, `zoom-slider`                                                                                                              |
+
+## Bundle size
+
+ECharts is imported via `echarts/core`, registering only the chart types and
+components used (see `src/echarts.ts`). Measured with esbuild, minified:
+
+| Import                                          | min      | gzip   |
+| ----------------------------------------------- | -------- | ------ |
+| `import * as echarts from "echarts"` (previous) | 1,142 KB | 383 KB |
+| vuu-chart registered set (all chart types)      | 733 KB   | 248 KB |
+| line + scatter + grid/tooltip/legend only       | 548 KB   | 187 KB |
+
+So the package now adds about 135 KB less (gzipped) to an application than
+before, even with the new chart types.
+
+## Limitations
+
+- At most `maxRows` (default 1000) rows are read from each DataSource. Use
+  DataSource filters, or the bars interval, to keep data within range.
+- On a data update, a treemap or sunburst may reset to the root after the
+  user has drilled down.
+- Heatmap axes are category axes (bucketed values), not continuous axes.
+- `echartsOptions` given as a function are applied on structural rebuilds
+  only.

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-alpha.20",
+  "version": "4.0.0-alpha.22",
   "description": "support for apache echarts using vuu data",
   "main": "./src/index.js",
   "type": "module",
@@ -10,35 +10,32 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-data-local": "4.0.0-alpha.20"
+    "@vuu-ui/vuu-data-types": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-data-local": "4.0.0-alpha.22"
   },
   "dependencies": {
-    "@salt-ds/styles": "0.2.1",
-    "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.20",
-    "clsx": "^2.0.0"
+    "@salt-ds/styles": "0.4.1",
+    "@salt-ds/window": "0.1.2",
+    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.22",
+    "clsx": "^2.0.0",
+    "echarts": "6.1.0",
+    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.22"
   },
   "peerDependencies": {
-    "echarts": "6.0.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
   },
   "files": [
     "README.md",
-    "src",
-    "/types"
+    "src"
   ],
   "exports": {
     ".": {
-      "types": "./types/index.d.ts",
-      "import": "./src/index.js",
-      "default": "./src/index.js"
+      "import": "./src/index.js"
     }
   },
   "module": "./src/index.js",
-  "name": "@vuu-ui/vuu-chart",
-  "types": "types/index.d.ts"
+  "name": "@vuu-ui/vuu-chart"
 }

package/src/Chart.css.js

@@ -1,5 +1,27 @@
 const css = `
 .vuuChart {
+  --vuuChart-foreground: var(--salt-content-primary-foreground);
+  --vuuChart-secondaryForeground: var(--salt-content-secondary-foreground);
+  --vuuChart-background: transparent;
+  --vuuChart-axisLineColor: var(--salt-separable-primary-borderColor);
+  --vuuChart-splitLineColor: var(--salt-separable-tertiary-borderColor);
+  --vuuChart-crosshairColor: var(--salt-content-secondary-foreground);
+  --vuuChart-fontFamily: var(--salt-text-fontFamily);
+  --vuuChart-tooltip-background: var(--salt-container-primary-background);
+  --vuuChart-tooltip-borderColor: var(--salt-selectable-borderColor-selected);
+  --vuuChart-upColor: var(--salt-sentiment-positive-foreground-decorative);
+  --vuuChart-downColor: var(--salt-sentiment-negative-foreground-decorative);
+  --vuuChart-heatmap-lowColor: var(--salt-container-secondary-background);
+  --vuuChart-heatmap-highColor: var(--salt-accent-background, #1b4f9c);
+  --vuuChart-color-1: #4676bf;
+  --vuuChart-color-2: #ab6528;
+  --vuuChart-color-3: #9f55c2;
+  --vuuChart-color-4: #2a8285;
+  --vuuChart-color-5: #697694;
+  --vuuChart-color-6: #b0549d;
+  --vuuChart-color-7: #c69d26;
+  --vuuChart-color-8: #5c8a3a;
+
   & .vuuChartTooltip {
     background-color: var(--salt-container-primary-background) !important;
     border-color: var(--salt-selectable-borderColor-selected) !important;

package/src/Chart.js

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
+import { MeasuredContainer } from "@vuu-ui/vuu-ui-controls";
+import { buildColumnMap } from "@vuu-ui/vuu-utils";
 import clsx from "clsx";
-import { getInstanceByDom, init } from "echarts";
+import { getInstanceByDom, init } from "./echarts.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useChartContextMenu } from "./useChartContextMenu.js";
 import { useChartOptions } from "./useChartOptions.js";
 import { useChartSelection } from "./useChartSelection.js";
-import { buildColumnMap } from "@vuu-ui/vuu-utils";
-import { MeasuredContainer } from "@vuu-ui/vuu-ui-controls";
 import Chart from "./Chart.css";
 const classBase = "vuuChart";
 const Chart_Chart = ({ categoryColumnName, chartSettings = {
@@ -22,7 +22,7 @@ const Chart_Chart = ({ categoryColumnName, chartSettings = {
 }, seriesColumnNames, width, ...htmlAttributes })=>{
     const targetWindow = useWindow();
     useComponentCssInjection({
-        testId: "vuu-toast-notification",
+        testId: "vuu-chart",
         css: Chart,
         window: targetWindow
     });

package/src/ChartSeries.js

@@ -15,12 +15,15 @@ class ChartSeries extends EventEmitter {
     #columnMap = {};
     #config;
     #dataExclusions;
+    #dataSource;
+    #subscribed = false;
     #dataWindow = new MovingDataRowWindow(Range(0, 1000));
     #dates = [];
     #palette;
     #series = [];
     #seriesColumns = [];
     handleData = (message)=>{
+        if (!this.#subscribed) return;
         if ("subscribed" === message.type) this.#columnMap = buildColumnMap(message.tableSchema.columns);
         else if ("viewport-update" === message.type) {
             if ("size-only" === message.mode) ;
@@ -43,9 +46,23 @@ class ChartSeries extends EventEmitter {
         this.#config = config;
         this.#dataExclusions = dataExclusions;
         this.#palette = palette;
-        dataSource.subscribe({
-            range: Range(0, 1000)
-        }, this.handleData);
+        this.#dataSource = dataSource;
+        this.subscribe();
+    }
+    subscribe() {
+        if (!this.#subscribed) {
+            this.#subscribed = true;
+            this.#dataSource.subscribe({
+                range: Range(0, 1000)
+            }, this.handleData);
+        }
+    }
+    detach() {
+        this.#subscribed = false;
+    }
+    dispose() {
+        this.#subscribed = false;
+        this.#dataSource.unsubscribe();
     }
     get palette() {
         return this.#seriesColumns.map((col)=>this.#colorMap.get(col));

package/src/chart-data/ChartDataStore.js

@@ -0,0 +1,131 @@
+import { EventEmitter, Range, buildColumnMap, metadataKeys } from "@vuu-ui/vuu-utils";
+const { IDX: IDX } = metadataKeys;
+const DEFAULT_MAX_ROWS = 1000;
+class ChartDataStore extends EventEmitter {
+    #columnMap;
+    #dataSource;
+    #denseRows = void 0;
+    #maxRows;
+    #rows = [];
+    #size = 0;
+    #subscribed = false;
+    #version = 0;
+    constructor(dataSource, { maxRows = DEFAULT_MAX_ROWS } = {}){
+        super();
+        this.#dataSource = dataSource;
+        this.#maxRows = maxRows;
+        this.#columnMap = buildColumnMap(dataSource.columns);
+    }
+    get columnMap() {
+        return this.#columnMap;
+    }
+    get dataSource() {
+        return this.#dataSource;
+    }
+    get isSubscribed() {
+        return this.#subscribed;
+    }
+    get rows() {
+        if (void 0 === this.#denseRows) {
+            const rows = [];
+            const count = Math.min(this.#rows.length, this.#size);
+            for(let i = 0; i < count; i++){
+                const row = this.#rows[i];
+                if (void 0 !== row) rows.push(row);
+            }
+            this.#denseRows = rows;
+        }
+        return this.#denseRows;
+    }
+    get size() {
+        return this.#size;
+    }
+    get version() {
+        return this.#version;
+    }
+    getValue(row, columnName) {
+        const index = this.#columnMap[columnName];
+        return void 0 === index ? void 0 : row[index];
+    }
+    subscribe() {
+        if (!this.#subscribed) {
+            this.#subscribed = true;
+            this.#dataSource.subscribe({
+                range: Range(0, this.#maxRows)
+            }, this.handleData);
+        }
+    }
+    dispose() {
+        if (this.#subscribed) {
+            this.#subscribed = false;
+            this.#dataSource.unsubscribe();
+        }
+        this.removeAllListeners();
+        this.#rows = [];
+        this.#denseRows = void 0;
+        this.#size = 0;
+    }
+    changed() {
+        this.#denseRows = void 0;
+        this.#version += 1;
+        this.emit("update");
+    }
+    handleData = (message)=>{
+        if (!this.#subscribed) return;
+        switch(message.type){
+            case "subscribed":
+                if (message.columns) this.#columnMap = buildColumnMap(message.columns);
+                break;
+            case "viewport-update":
+                {
+                    let changed = false;
+                    if ("number" == typeof message.size && message.size !== this.#size) {
+                        this.#size = message.size;
+                        if (this.#rows.length > message.size) this.#rows.length = message.size;
+                        changed = true;
+                    }
+                    if ("size-only" !== message.mode && message.rows) {
+                        for (const row of message.rows){
+                            const index = row[IDX];
+                            if (index >= 0 && index < this.#maxRows) {
+                                this.#rows[index] = row;
+                                changed = true;
+                            }
+                        }
+                        if (this.#size < this.#rows.length) this.#size = this.#rows.length;
+                    }
+                    if (changed) this.changed();
+                    break;
+                }
+            case "viewport-clear":
+                this.#rows = [];
+                this.#size = 0;
+                this.changed();
+                break;
+            default:
+        }
+    };
+}
+class ChartDataStores {
+    #stores = new Map();
+    constructor(dataSources, options, onUpdate){
+        for (const dataSource of dataSources)if (!this.#stores.has(dataSource)) {
+            const store = new ChartDataStore(dataSource, options);
+            store.on("update", onUpdate);
+            this.#stores.set(dataSource, store);
+        }
+    }
+    get(dataSource) {
+        const store = this.#stores.get(dataSource);
+        if (void 0 === store) throw Error("[ChartDataStores] no store for DataSource. All DataSources must be declared to the chart");
+        return store;
+    }
+    subscribe() {
+        for (const store of this.#stores.values())store.subscribe();
+    }
+    dispose() {
+        for (const store of this.#stores.values())store.dispose();
+        this.#stores.clear();
+    }
+}
+export { ChartDataStore, ChartDataStores, DEFAULT_MAX_ROWS };