@vuu-ui/vuu-chart 2.1.0-alpha.8 → 2.1.0

package/cjs/ChartSeries.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var vuuUtils = require('@vuu-ui/vuu-utils');
+var DataRowMovingWindow = require('./DataRowMovingWindow.js');
 
 var __defProp = Object.defineProperty;
 var __typeError = (msg) => {
@@ -12,7 +13,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var _categoryColumn, _columnMap, _itemColorFunction, _dataSource, _categoryCount, _dates, _series, _seriesColumns;
+var _categoryColumn, _columnMap, _itemColorFunction, _dataWindow, _dates, _series, _seriesColumns;
 const defaultItemColorFunction = ({ color }) => color;
 const { KEY } = vuuUtils.metadataKeys;
 function DataSourceValue(key, row, value) {
@@ -52,49 +53,64 @@ function getCategoriesAndSeries(columnMap, data, categoryColumn, seriesColumns,
   return [categoryValues, Array.from(seriesMap.values())];
 }
 class ChartSeries extends vuuUtils.EventEmitter {
-  constructor({
-    category,
-    dataSource,
-    itemColorFunction,
-    series
-  }) {
+  constructor({ dataSource, itemColorFunction }) {
     super();
-    __privateAdd(this, _categoryColumn);
+    __privateAdd(this, _categoryColumn, "");
     __privateAdd(this, _columnMap, {});
     __privateAdd(this, _itemColorFunction);
-    __privateAdd(this, _dataSource);
-    __privateAdd(this, _categoryCount, 0);
+    __privateAdd(this, _dataWindow, new DataRowMovingWindow.MovingDataRowWindow(vuuUtils.Range(0, 1e3)));
     __privateAdd(this, _dates, []);
     __privateAdd(this, _series, []);
-    __privateAdd(this, _seriesColumns);
+    __privateAdd(this, _seriesColumns, []);
     __publicField(this, "handleData", (message) => {
       if (message.type === "subscribed") {
         __privateSet(this, _columnMap, vuuUtils.buildColumnMap(message.tableSchema.columns));
       } else if (message.type === "viewport-update") {
-        if (message.mode === "size-only") {
-          __privateSet(this, _categoryCount, message.size ?? 0);
-        } else if (message.rows) {
-          const [dates, series] = getCategoriesAndSeries(
-            __privateGet(this, _columnMap),
-            message.rows,
-            __privateGet(this, _categoryColumn),
-            __privateGet(this, _seriesColumns),
-            __privateGet(this, _itemColorFunction)
-          );
-          __privateSet(this, _dates, dates);
-          __privateSet(this, _series, series);
-          this.emit("update");
+        if (message.mode === "size-only") ; else if (message.rows) {
+          for (const row of message.rows) {
+            __privateGet(this, _dataWindow).add(row);
+          }
+          this.buildCategoriesAndSeries();
         }
       } else {
         console.warn(JSON.stringify(message));
       }
     });
-    __privateSet(this, _categoryColumn, category);
-    __privateSet(this, _dataSource, dataSource);
     __privateSet(this, _itemColorFunction, itemColorFunction);
-    __privateSet(this, _seriesColumns, series);
     dataSource.subscribe({ range: vuuUtils.Range(0, 1e3) }, this.handleData);
   }
+  buildCategoriesAndSeries() {
+    if (__privateGet(this, _categoryColumn) && __privateGet(this, _seriesColumns).length > 0) {
+      const [dates, series] = getCategoriesAndSeries(
+        __privateGet(this, _columnMap),
+        __privateGet(this, _dataWindow).data,
+        __privateGet(this, _categoryColumn),
+        __privateGet(this, _seriesColumns),
+        __privateGet(this, _itemColorFunction)
+      );
+      __privateSet(this, _dates, dates);
+      __privateSet(this, _series, series);
+      this.emit("update");
+    }
+  }
+  get categoryColumn() {
+    return __privateGet(this, _categoryColumn);
+  }
+  set categoryColumn(categoryColumn) {
+    __privateSet(this, _categoryColumn, categoryColumn);
+    if (__privateGet(this, _seriesColumns).length > 0) {
+      this.buildCategoriesAndSeries();
+    }
+  }
+  get seriesColumnNames() {
+    return __privateGet(this, _seriesColumns);
+  }
+  set seriesColumnNames(seriesColumnNames) {
+    __privateSet(this, _seriesColumns, seriesColumnNames);
+    if (__privateGet(this, _categoryColumn)) {
+      this.buildCategoriesAndSeries();
+    }
+  }
   get categories() {
     return __privateGet(this, _dates);
   }
@@ -105,8 +121,7 @@ class ChartSeries extends vuuUtils.EventEmitter {
 _categoryColumn = new WeakMap();
 _columnMap = new WeakMap();
 _itemColorFunction = new WeakMap();
-_dataSource = new WeakMap();
-_categoryCount = new WeakMap();
+_dataWindow = new WeakMap();
 _dates = new WeakMap();
 _series = new WeakMap();
 _seriesColumns = new WeakMap();

package/cjs/ChartSeries.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartSeries.js","sources":["../../../packages/vuu-chart/src/ChartSeries.ts"],"sourcesContent":["import {\n  DataSource,\n  DataSourceRow,\n  DataSourceSubscribeCallback,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  buildColumnMap,\n  ColumnMap,\n  EventEmitter,\n  Range,\n  metadataKeys,\n} from \"@vuu-ui/vuu-utils\";\n\ntype Series = {\n  id: string;\n  name: string;\n  label: string;\n  data: DataSourceValue<number>[];\n  lineStyle: {\n    width: number;\n  };\n  itemStyle: {\n    color: string | ItemColorFunction;\n  };\n  symbol: \"emptyCircle\" | \"circle\";\n  type: \"line\";\n};\n\nexport type ItemColorFunction = (params: {\n  color: string;\n  data: DataSourceValue;\n  dataIndex: number;\n  name: string;\n  seriesName: string;\n}) => string;\n\nconst defaultItemColorFunction: ItemColorFunction = ({ color }) => color;\n\nconst { KEY } = metadataKeys;\n\nexport type DataSourceValue<T extends VuuRowDataItemType = number> = {\n  key: string;\n  readonly row: DataSourceRow;\n  value: T;\n};\n\nfunction DataSourceValue<T extends VuuRowDataItemType = number>(\n  key: string,\n  row: DataSourceRow,\n  value: T,\n): DataSourceValue<T> {\n  return { key, row, value };\n}\n\nfunction getCategoriesAndSeries(\n  columnMap: ColumnMap,\n  data: DataSourceRow[],\n  categoryColumn: string,\n  seriesColumns: string[],\n  itemColorFunction = defaultItemColorFunction,\n): [string[], Series[]] {\n  const categoryValues: string[] = [];\n  const seriesMap = new Map<string, Series>();\n\n  data.forEach((row) => {\n    const categoryValue = row[columnMap[categoryColumn]] as string;\n    categoryValues.push(categoryValue);\n\n    for (const seriesColumn of seriesColumns) {\n      let series = seriesMap.get(seriesColumn);\n      if (!series) {\n        series = {\n          //any reason we can't simply use col name here ?\n          id: seriesColumn,\n          name: seriesColumn,\n          label: seriesColumn,\n          data: [],\n          type: \"line\",\n          itemStyle: {\n            color: itemColorFunction,\n          },\n          lineStyle: {\n            width: 1.5,\n          },\n          symbol: \"circle\",\n        };\n        seriesMap.set(seriesColumn, series);\n      }\n\n      const key = row[KEY] as string;\n      const value = row[columnMap[seriesColumn]] as number;\n      series.data.push(DataSourceValue(key, row, value));\n    }\n  });\n\n  return [categoryValues, Array.from(seriesMap.values())];\n}\n\nexport type ChartEvents = {\n  update: () => void;\n};\nexport interface ChartSeriesConstructorProps {\n  dataSource: DataSource;\n  /**\n   * The column name of the column that defines our category axis.\n   * By default, these are the x axis values.\n   */\n  category: string;\n\n  itemColorFunction?: ItemColorFunction;\n  /**\n   * The column names of the columns that define our data.\n   * By default, these are the y axis values.\n   */\n  series: string[];\n}\n\nexport class ChartSeries extends EventEmitter<ChartEvents> {\n  #categoryColumn: string;\n  #columnMap: ColumnMap = {};\n  #itemColorFunction: ItemColorFunction | undefined;\n  #dataSource: DataSource;\n  #categoryCount = 0;\n\n  #dates: string[] = [];\n  #series: Series[] = [];\n  #seriesColumns: string[];\n\n  handleData: DataSourceSubscribeCallback = (message) => {\n    if (message.type === \"subscribed\") {\n      this.#columnMap = buildColumnMap(message.tableSchema.columns);\n    } else if (message.type === \"viewport-update\") {\n      if (message.mode === \"size-only\") {\n        this.#categoryCount = message.size ?? 0;\n      } else if (message.rows) {\n        const [dates, series] = getCategoriesAndSeries(\n          this.#columnMap,\n          message.rows,\n          this.#categoryColumn,\n          this.#seriesColumns,\n          this.#itemColorFunction,\n        );\n        this.#dates = dates;\n        this.#series = series;\n        this.emit(\"update\");\n      }\n    } else {\n      console.warn(JSON.stringify(message));\n    }\n  };\n\n  constructor({\n    category,\n    dataSource,\n    itemColorFunction,\n    series,\n  }: ChartSeriesConstructorProps) {\n    super();\n    this.#categoryColumn = category;\n    this.#dataSource = dataSource;\n    this.#itemColorFunction = itemColorFunction;\n    this.#seriesColumns = series;\n\n    dataSource.subscribe({ range: Range(0, 1000) }, this.handleData);\n  }\n\n  get categories() {\n    return this.#dates;\n  }\n\n  get series() {\n    return this.#series;\n  }\n}\n"],"names":["metadataKeys","EventEmitter","buildColumnMap","Range"],"mappings":"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"}
+{"version":3,"file":"ChartSeries.js","sources":["../../../packages/vuu-chart/src/ChartSeries.ts"],"sourcesContent":["import {\n  DataSource,\n  DataSourceRow,\n  DataSourceSubscribeCallback,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  buildColumnMap,\n  ColumnMap,\n  EventEmitter,\n  Range,\n  metadataKeys,\n} from \"@vuu-ui/vuu-utils\";\nimport { MovingDataRowWindow } from \"./DataRowMovingWindow\";\n\ntype Series = {\n  id: string;\n  name: string;\n  label: string;\n  data: DataSourceValue<number>[];\n  lineStyle: {\n    width: number;\n  };\n  itemStyle: {\n    color: string | ItemColorFunction;\n  };\n  symbol: \"emptyCircle\" | \"circle\";\n  type: \"line\";\n};\n\nexport type ItemColorFunction = (params: {\n  color: string;\n  data: DataSourceValue;\n  dataIndex: number;\n  name: string;\n  seriesName: string;\n}) => string;\n\nconst defaultItemColorFunction: ItemColorFunction = ({ color }) => color;\n\nconst { KEY } = metadataKeys;\n\nexport type DataSourceValue<T extends VuuRowDataItemType = number> = {\n  key: string;\n  readonly row: DataSourceRow;\n  value: T;\n};\n\nfunction DataSourceValue<T extends VuuRowDataItemType = number>(\n  key: string,\n  row: DataSourceRow,\n  value: T,\n): DataSourceValue<T> {\n  return { key, row, value };\n}\n\nfunction getCategoriesAndSeries(\n  columnMap: ColumnMap,\n  data: DataSourceRow[],\n  categoryColumn: string,\n  seriesColumns: string[],\n  itemColorFunction = defaultItemColorFunction,\n): [string[], Series[]] {\n  const categoryValues: string[] = [];\n  const seriesMap = new Map<string, Series>();\n\n  data.forEach((row) => {\n    const categoryValue = row[columnMap[categoryColumn]] as string;\n    categoryValues.push(categoryValue);\n\n    for (const seriesColumn of seriesColumns) {\n      let series = seriesMap.get(seriesColumn);\n      if (!series) {\n        series = {\n          //any reason we can't simply use col name here ?\n          id: seriesColumn,\n          name: seriesColumn,\n          label: seriesColumn,\n          data: [],\n          type: \"line\",\n          itemStyle: {\n            color: itemColorFunction,\n          },\n          lineStyle: {\n            width: 1.5,\n          },\n          symbol: \"circle\",\n        };\n        seriesMap.set(seriesColumn, series);\n      }\n\n      const key = row[KEY] as string;\n      const value = row[columnMap[seriesColumn]] as number;\n      series.data.push(DataSourceValue(key, row, value));\n    }\n  });\n\n  return [categoryValues, Array.from(seriesMap.values())];\n}\n\nexport type ChartEvents = {\n  update: () => void;\n};\nexport interface ChartSeriesConstructorProps {\n  dataSource: DataSource;\n  itemColorFunction?: ItemColorFunction;\n}\n\nexport class ChartSeries extends EventEmitter<ChartEvents> {\n  #categoryColumn = \"\";\n  #columnMap: ColumnMap = {};\n  #itemColorFunction: ItemColorFunction | undefined;\n  #dataWindow = new MovingDataRowWindow(Range(0, 1000));\n\n  #dates: string[] = [];\n  #series: Series[] = [];\n  #seriesColumns: string[] = [];\n\n  handleData: DataSourceSubscribeCallback = (message) => {\n    if (message.type === \"subscribed\") {\n      this.#columnMap = buildColumnMap(message.tableSchema.columns);\n    } else if (message.type === \"viewport-update\") {\n      if (message.mode === \"size-only\") {\n        // ???\n      } else if (message.rows) {\n        for (const row of message.rows) {\n          this.#dataWindow.add(row);\n        }\n        this.buildCategoriesAndSeries();\n      }\n    } else {\n      console.warn(JSON.stringify(message));\n    }\n  };\n\n  buildCategoriesAndSeries() {\n    if (this.#categoryColumn && this.#seriesColumns.length > 0) {\n      const [dates, series] = getCategoriesAndSeries(\n        this.#columnMap,\n        this.#dataWindow.data,\n        this.#categoryColumn,\n        this.#seriesColumns,\n        this.#itemColorFunction,\n      );\n      this.#dates = dates;\n      this.#series = series;\n\n      this.emit(\"update\");\n    }\n  }\n\n  constructor({ dataSource, itemColorFunction }: ChartSeriesConstructorProps) {\n    super();\n    this.#itemColorFunction = itemColorFunction;\n    dataSource.subscribe({ range: Range(0, 1000) }, this.handleData);\n  }\n\n  get categoryColumn() {\n    return this.#categoryColumn;\n  }\n\n  set categoryColumn(categoryColumn: string) {\n    this.#categoryColumn = categoryColumn;\n    if (this.#seriesColumns.length > 0) {\n      this.buildCategoriesAndSeries();\n    }\n  }\n\n  get seriesColumnNames() {\n    return this.#seriesColumns;\n  }\n\n  set seriesColumnNames(seriesColumnNames: string[]) {\n    this.#seriesColumns = seriesColumnNames;\n    if (this.#categoryColumn) {\n      this.buildCategoriesAndSeries();\n    }\n  }\n\n  get categories() {\n    return this.#dates;\n  }\n\n  get series() {\n    return this.#series;\n  }\n}\n"],"names":["metadataKeys","EventEmitter","MovingDataRowWindow","Range","buildColumnMap"],"mappings":"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"}

package/cjs/DataRowMovingWindow.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+var __defProp = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _range;
+const { IDX, KEY } = vuuUtils.metadataKeys;
+class MovingDataRowWindow {
+  constructor({ from, to }) {
+    __publicField(this, "data");
+    __publicField(this, "rowCount", 0);
+    __privateAdd(this, _range);
+    __publicField(this, "setRowCount", (rowCount) => {
+      if (rowCount < this.data.length) {
+        this.data.length = rowCount;
+      }
+      this.rowCount = rowCount;
+    });
+    __privateSet(this, _range, new vuuUtils.WindowRange(from, to));
+    this.data = new Array(Math.max(0, to - from));
+    this.rowCount = 0;
+  }
+  add(data) {
+    const index = data[IDX];
+    if (this.isWithinRange(index)) {
+      const internalIndex = index - __privateGet(this, _range).from;
+      this.data[internalIndex] = data;
+    }
+  }
+  getAtIndex(index) {
+    return __privateGet(this, _range).isWithin(index) && this.data[index - __privateGet(this, _range).from] != null ? this.data[index - __privateGet(this, _range).from] : void 0;
+  }
+  getByKey(key) {
+    return this.data.find((row) => row[KEY] === key);
+  }
+  isWithinRange(index) {
+    return __privateGet(this, _range).isWithin(index);
+  }
+  setRange({ from, to }) {
+    if (from !== __privateGet(this, _range).from || to !== __privateGet(this, _range).to) {
+      const [overlapFrom, overlapTo] = __privateGet(this, _range).overlap(from, to);
+      const newData = new Array(Math.max(0, to - from));
+      for (let i = overlapFrom; i < overlapTo; i++) {
+        const data = this.getAtIndex(i);
+        if (data) {
+          const index = i - from;
+          newData[index] = data;
+        }
+      }
+      this.data = newData;
+      __privateGet(this, _range).from = from;
+      __privateGet(this, _range).to = to;
+    }
+  }
+  get hasData() {
+    return this.data.some((d) => d !== void 0);
+  }
+  /**
+   * This will throw if there is no data. Check `hasData` first
+   * to guard against this, if not certain.
+   */
+  get firstRow() {
+    for (let i = 0; i < this.data.length; i++) {
+      if (this.data[i]) {
+        return this.data[i];
+      }
+    }
+    throw Error(`[DataRowMovingWinddow] firstRow, no data`);
+  }
+  get range() {
+    return __privateGet(this, _range);
+  }
+  // TODO make this more performant, see implementation in
+  // array-backed-moving-window - use same implementation
+  get hasAllRowsWithinRange() {
+    const { from, to } = __privateGet(this, _range);
+    for (let i = from; i < to; i++) {
+      if (this.getAtIndex(i) === void 0) {
+        return false;
+      }
+    }
+    return true;
+  }
+}
+_range = new WeakMap();
+
+exports.MovingDataRowWindow = MovingDataRowWindow;
+//# sourceMappingURL=DataRowMovingWindow.js.map

package/cjs/DataRowMovingWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataRowMovingWindow.js","sources":["../../../packages/vuu-chart/src/DataRowMovingWindow.ts"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { WindowRange } from \"@vuu-ui/vuu-utils\";\nimport { metadataKeys } from \"@vuu-ui/vuu-utils\";\n\nconst { IDX, KEY } = metadataKeys;\n\nexport class MovingDataRowWindow {\n  public data: DataSourceRow[];\n  public rowCount = 0;\n  #range: WindowRange;\n\n  constructor({ from, to }: VuuRange) {\n    this.#range = new WindowRange(from, to);\n    //internal data is always 0 based, we add range.from to determine an offset\n    this.data = new Array(Math.max(0, to - from));\n    this.rowCount = 0;\n  }\n\n  setRowCount = (rowCount: number) => {\n    if (rowCount < this.data.length) {\n      this.data.length = rowCount;\n    }\n\n    this.rowCount = rowCount;\n  };\n\n  add(data: DataSourceRow) {\n    const index = data[IDX];\n    if (this.isWithinRange(index)) {\n      const internalIndex = index - this.#range.from;\n      this.data[internalIndex] = data;\n    }\n  }\n\n  getAtIndex(index: number) {\n    return this.#range.isWithin(index) &&\n      this.data[index - this.#range.from] != null\n      ? this.data[index - this.#range.from]\n      : undefined;\n  }\n\n  getByKey(key: string) {\n    return this.data.find((row) => row[KEY] === key);\n  }\n\n  isWithinRange(index: number) {\n    return this.#range.isWithin(index);\n  }\n\n  setRange({ from, to }: VuuRange) {\n    if (from !== this.#range.from || to !== this.#range.to) {\n      const [overlapFrom, overlapTo] = this.#range.overlap(from, to);\n      const newData = new Array(Math.max(0, to - from));\n      for (let i = overlapFrom; i < overlapTo; i++) {\n        const data = this.getAtIndex(i);\n        if (data) {\n          const index = i - from;\n          newData[index] = data;\n        }\n      }\n      this.data = newData;\n      this.#range.from = from;\n      this.#range.to = to;\n    }\n  }\n\n  get hasData() {\n    return this.data.some((d) => d !== undefined);\n  }\n\n  /**\n   * This will throw if there is no data. Check `hasData` first\n   * to guard against this, if not certain.\n   */\n  get firstRow() {\n    for (let i = 0; i < this.data.length; i++) {\n      if (this.data[i]) {\n        return this.data[i];\n      }\n    }\n    throw Error(`[DataRowMovingWinddow] firstRow, no data`);\n  }\n\n  get range() {\n    return this.#range;\n  }\n\n  // TODO make this more performant, see implementation in\n  // array-backed-moving-window - use same implementation\n  get hasAllRowsWithinRange(): boolean {\n    const { from, to } = this.#range;\n\n    for (let i = from; i < to; i++) {\n      if (this.getAtIndex(i) === undefined) {\n        return false;\n      }\n    }\n    return true;\n  }\n}\n"],"names":["metadataKeys","WindowRange"],"mappings":"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"}

package/cjs/useChartOptions.js

@@ -2,6 +2,7 @@
 
 var react = require('react');
 var ChartSeries = require('./ChartSeries.js');
+var vuuUtils = require('@vuu-ui/vuu-utils');
 
 const defaultPalette = [
   "#4676bf",
@@ -20,15 +21,22 @@ const useChartOptions = ({
 }) => {
   const [, forceRender] = react.useState({});
   const chartSeries = react.useMemo(() => {
+    console.log("new ChartSeries");
     const cs = new ChartSeries.ChartSeries({
-      category: categoryColumnName,
       itemColorFunction,
-      series: seriesColumnNames,
       dataSource
     });
     cs.on("update", () => forceRender({}));
     return cs;
-  }, [categoryColumnName, dataSource, itemColorFunction, seriesColumnNames]);
+  }, [dataSource, itemColorFunction]);
+  react.useMemo(() => {
+    if (categoryColumnName !== chartSeries.categoryColumn) {
+      chartSeries.categoryColumn = categoryColumnName;
+    }
+    if (vuuUtils.itemsChanged(seriesColumnNames, chartSeries.seriesColumnNames)) {
+      chartSeries.seriesColumnNames = seriesColumnNames;
+    }
+  }, [categoryColumnName, chartSeries, seriesColumnNames]);
   return {
     animation: false,
     color: palette,
@@ -45,6 +53,9 @@ const useChartOptions = ({
       right: 5
     },
     series: chartSeries.series,
+    tooltip: {
+      trigger: "axis"
+    },
     xAxis: {
       data: chartSeries.categories
     },

package/cjs/useChartOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChartOptions.js","sources":["../../../packages/vuu-chart/src/useChartOptions.ts"],"sourcesContent":["import { type EChartsCoreOption } from \"echarts\";\nimport { useMemo, useState } from \"react\";\nimport { ChartSeries, ItemColorFunction } from \"./ChartSeries\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nconst defaultPalette = [\n  \"#4676bf\",\n  \"#ab6528\",\n  \"#9f55c2\",\n  \"#2a8285\",\n  \"#697694\",\n  \"#B0549d\",\n];\nexport interface ChartOptionsProps {\n  categoryColumnName: string;\n  dataSource: DataSource;\n  itemColorFunction?: ItemColorFunction;\n  palette?: string[];\n  seriesColumnNames: string[];\n}\n\nexport const useChartOptions = ({\n  categoryColumnName,\n  dataSource,\n  itemColorFunction,\n  palette = defaultPalette,\n  seriesColumnNames,\n}: ChartOptionsProps) => {\n  const [, forceRender] = useState({});\n\n  const chartSeries = useMemo(() => {\n    const cs = new ChartSeries({\n      category: categoryColumnName,\n      itemColorFunction,\n      series: seriesColumnNames,\n      dataSource,\n    });\n    cs.on(\"update\", () => forceRender({}));\n    return cs;\n  }, [categoryColumnName, dataSource, itemColorFunction, seriesColumnNames]);\n\n  return {\n    animation: false,\n    color: palette,\n    dataZoom: [\n      {\n        type: \"slider\",\n        start: 0,\n        end: 100,\n      },\n    ],\n    grid: {\n      left: \"0\",\n      bottom: 0,\n      right: 5,\n    },\n    series: chartSeries.series,\n    xAxis: {\n      data: chartSeries.categories,\n    },\n    yAxis: {},\n  } as EChartsCoreOption;\n};\n"],"names":["useState","useMemo","ChartSeries"],"mappings":";;;;;AAKA,MAAM,cAAiB,GAAA;AAAA,EACrB,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA;AASO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,kBAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,OAAU,GAAA,cAAA;AAAA,EACV;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,GAAG,WAAW,CAAI,GAAAA,cAAA,CAAS,EAAE,CAAA;AAEnC,EAAM,MAAA,WAAA,GAAcC,cAAQ,MAAM;AAChC,IAAM,MAAA,EAAA,GAAK,IAAIC,uBAAY,CAAA;AAAA,MACzB,QAAU,EAAA,kBAAA;AAAA,MACV,iBAAA;AAAA,MACA,MAAQ,EAAA,iBAAA;AAAA,MACR;AAAA,KACD,CAAA;AACD,IAAA,EAAA,CAAG,GAAG,QAAU,EAAA,MAAM,WAAY,CAAA,EAAE,CAAC,CAAA;AACrC,IAAO,OAAA,EAAA;AAAA,KACN,CAAC,kBAAA,EAAoB,UAAY,EAAA,iBAAA,EAAmB,iBAAiB,CAAC,CAAA;AAEzE,EAAO,OAAA;AAAA,IACL,SAAW,EAAA,KAAA;AAAA,IACX,KAAO,EAAA,OAAA;AAAA,IACP,QAAU,EAAA;AAAA,MACR;AAAA,QACE,IAAM,EAAA,QAAA;AAAA,QACN,KAAO,EAAA,CAAA;AAAA,QACP,GAAK,EAAA;AAAA;AACP,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,IAAM,EAAA,GAAA;AAAA,MACN,MAAQ,EAAA,CAAA;AAAA,MACR,KAAO,EAAA;AAAA,KACT;AAAA,IACA,QAAQ,WAAY,CAAA,MAAA;AAAA,IACpB,KAAO,EAAA;AAAA,MACL,MAAM,WAAY,CAAA;AAAA,KACpB;AAAA,IACA,OAAO;AAAC,GACV;AACF;;;;"}
+{"version":3,"file":"useChartOptions.js","sources":["../../../packages/vuu-chart/src/useChartOptions.ts"],"sourcesContent":["import { type EChartsCoreOption } from \"echarts\";\nimport { useMemo, useState } from \"react\";\nimport { ChartSeries, ItemColorFunction } from \"./ChartSeries\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { itemsChanged } from \"@vuu-ui/vuu-utils\";\n\nconst defaultPalette = [\n  \"#4676bf\",\n  \"#ab6528\",\n  \"#9f55c2\",\n  \"#2a8285\",\n  \"#697694\",\n  \"#B0549d\",\n];\nexport interface ChartOptionsProps {\n  categoryColumnName: string;\n  dataSource: DataSource;\n  itemColorFunction?: ItemColorFunction;\n  palette?: string[];\n  seriesColumnNames: string[];\n}\n\nexport const useChartOptions = ({\n  categoryColumnName,\n  dataSource,\n  itemColorFunction,\n  palette = defaultPalette,\n  seriesColumnNames,\n}: ChartOptionsProps) => {\n  const [, forceRender] = useState({});\n\n  const chartSeries = useMemo(() => {\n    console.log(\"new ChartSeries\");\n    const cs = new ChartSeries({\n      itemColorFunction,\n      dataSource,\n    });\n    cs.on(\"update\", () => forceRender({}));\n    return cs;\n  }, [dataSource, itemColorFunction]);\n\n  useMemo(() => {\n    if (categoryColumnName !== chartSeries.categoryColumn) {\n      chartSeries.categoryColumn = categoryColumnName;\n    }\n    if (itemsChanged(seriesColumnNames, chartSeries.seriesColumnNames)) {\n      chartSeries.seriesColumnNames = seriesColumnNames;\n    }\n  }, [categoryColumnName, chartSeries, seriesColumnNames]);\n\n  return {\n    animation: false,\n    color: palette,\n    dataZoom: [\n      {\n        type: \"slider\",\n        start: 0,\n        end: 100,\n      },\n    ],\n    grid: {\n      left: \"0\",\n      bottom: 0,\n      right: 5,\n    },\n    series: chartSeries.series,\n    tooltip: {\n      trigger: \"axis\",\n    },\n    xAxis: {\n      data: chartSeries.categories,\n    },\n    yAxis: {},\n  } as EChartsCoreOption;\n};\n"],"names":["useState","useMemo","ChartSeries","itemsChanged"],"mappings":";;;;;;AAMA,MAAM,cAAiB,GAAA;AAAA,EACrB,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA;AASO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,kBAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,OAAU,GAAA,cAAA;AAAA,EACV;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,GAAG,WAAW,CAAI,GAAAA,cAAA,CAAS,EAAE,CAAA;AAEnC,EAAM,MAAA,WAAA,GAAcC,cAAQ,MAAM;AAChC,IAAA,OAAA,CAAQ,IAAI,iBAAiB,CAAA;AAC7B,IAAM,MAAA,EAAA,GAAK,IAAIC,uBAAY,CAAA;AAAA,MACzB,iBAAA;AAAA,MACA;AAAA,KACD,CAAA;AACD,IAAA,EAAA,CAAG,GAAG,QAAU,EAAA,MAAM,WAAY,CAAA,EAAE,CAAC,CAAA;AACrC,IAAO,OAAA,EAAA;AAAA,GACN,EAAA,CAAC,UAAY,EAAA,iBAAiB,CAAC,CAAA;AAElC,EAAAD,aAAA,CAAQ,MAAM;AACZ,IAAI,IAAA,kBAAA,KAAuB,YAAY,cAAgB,EAAA;AACrD,MAAA,WAAA,CAAY,cAAiB,GAAA,kBAAA;AAAA;AAE/B,IAAA,IAAIE,qBAAa,CAAA,iBAAA,EAAmB,WAAY,CAAA,iBAAiB,CAAG,EAAA;AAClE,MAAA,WAAA,CAAY,iBAAoB,GAAA,iBAAA;AAAA;AAClC,GACC,EAAA,CAAC,kBAAoB,EAAA,WAAA,EAAa,iBAAiB,CAAC,CAAA;AAEvD,EAAO,OAAA;AAAA,IACL,SAAW,EAAA,KAAA;AAAA,IACX,KAAO,EAAA,OAAA;AAAA,IACP,QAAU,EAAA;AAAA,MACR;AAAA,QACE,IAAM,EAAA,QAAA;AAAA,QACN,KAAO,EAAA,CAAA;AAAA,QACP,GAAK,EAAA;AAAA;AACP,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,IAAM,EAAA,GAAA;AAAA,MACN,MAAQ,EAAA,CAAA;AAAA,MACR,KAAO,EAAA;AAAA,KACT;AAAA,IACA,QAAQ,WAAY,CAAA,MAAA;AAAA,IACpB,OAAS,EAAA;AAAA,MACP,OAAS,EAAA;AAAA,KACX;AAAA,IACA,KAAO,EAAA;AAAA,MACL,MAAM,WAAY,CAAA;AAAA,KACpB;AAAA,IACA,OAAO;AAAC,GACV;AACF;;;;"}

package/esm/ChartSeries.js

@@ -1,4 +1,5 @@
-import { EventEmitter, Range, buildColumnMap, metadataKeys } from '@vuu-ui/vuu-utils';
+import { EventEmitter, Range, metadataKeys, buildColumnMap } from '@vuu-ui/vuu-utils';
+import { MovingDataRowWindow } from './DataRowMovingWindow.js';
 
 var __defProp = Object.defineProperty;
 var __typeError = (msg) => {
@@ -10,7 +11,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var _categoryColumn, _columnMap, _itemColorFunction, _dataSource, _categoryCount, _dates, _series, _seriesColumns;
+var _categoryColumn, _columnMap, _itemColorFunction, _dataWindow, _dates, _series, _seriesColumns;
 const defaultItemColorFunction = ({ color }) => color;
 const { KEY } = metadataKeys;
 function DataSourceValue(key, row, value) {
@@ -50,49 +51,64 @@ function getCategoriesAndSeries(columnMap, data, categoryColumn, seriesColumns,
   return [categoryValues, Array.from(seriesMap.values())];
 }
 class ChartSeries extends EventEmitter {
-  constructor({
-    category,
-    dataSource,
-    itemColorFunction,
-    series
-  }) {
+  constructor({ dataSource, itemColorFunction }) {
     super();
-    __privateAdd(this, _categoryColumn);
+    __privateAdd(this, _categoryColumn, "");
     __privateAdd(this, _columnMap, {});
     __privateAdd(this, _itemColorFunction);
-    __privateAdd(this, _dataSource);
-    __privateAdd(this, _categoryCount, 0);
+    __privateAdd(this, _dataWindow, new MovingDataRowWindow(Range(0, 1e3)));
     __privateAdd(this, _dates, []);
     __privateAdd(this, _series, []);
-    __privateAdd(this, _seriesColumns);
+    __privateAdd(this, _seriesColumns, []);
     __publicField(this, "handleData", (message) => {
       if (message.type === "subscribed") {
         __privateSet(this, _columnMap, buildColumnMap(message.tableSchema.columns));
       } else if (message.type === "viewport-update") {
-        if (message.mode === "size-only") {
-          __privateSet(this, _categoryCount, message.size ?? 0);
-        } else if (message.rows) {
-          const [dates, series] = getCategoriesAndSeries(
-            __privateGet(this, _columnMap),
-            message.rows,
-            __privateGet(this, _categoryColumn),
-            __privateGet(this, _seriesColumns),
-            __privateGet(this, _itemColorFunction)
-          );
-          __privateSet(this, _dates, dates);
-          __privateSet(this, _series, series);
-          this.emit("update");
+        if (message.mode === "size-only") ; else if (message.rows) {
+          for (const row of message.rows) {
+            __privateGet(this, _dataWindow).add(row);
+          }
+          this.buildCategoriesAndSeries();
         }
       } else {
         console.warn(JSON.stringify(message));
       }
     });
-    __privateSet(this, _categoryColumn, category);
-    __privateSet(this, _dataSource, dataSource);
     __privateSet(this, _itemColorFunction, itemColorFunction);
-    __privateSet(this, _seriesColumns, series);
     dataSource.subscribe({ range: Range(0, 1e3) }, this.handleData);
   }
+  buildCategoriesAndSeries() {
+    if (__privateGet(this, _categoryColumn) && __privateGet(this, _seriesColumns).length > 0) {
+      const [dates, series] = getCategoriesAndSeries(
+        __privateGet(this, _columnMap),
+        __privateGet(this, _dataWindow).data,
+        __privateGet(this, _categoryColumn),
+        __privateGet(this, _seriesColumns),
+        __privateGet(this, _itemColorFunction)
+      );
+      __privateSet(this, _dates, dates);
+      __privateSet(this, _series, series);
+      this.emit("update");
+    }
+  }
+  get categoryColumn() {
+    return __privateGet(this, _categoryColumn);
+  }
+  set categoryColumn(categoryColumn) {
+    __privateSet(this, _categoryColumn, categoryColumn);
+    if (__privateGet(this, _seriesColumns).length > 0) {
+      this.buildCategoriesAndSeries();
+    }
+  }
+  get seriesColumnNames() {
+    return __privateGet(this, _seriesColumns);
+  }
+  set seriesColumnNames(seriesColumnNames) {
+    __privateSet(this, _seriesColumns, seriesColumnNames);
+    if (__privateGet(this, _categoryColumn)) {
+      this.buildCategoriesAndSeries();
+    }
+  }
   get categories() {
     return __privateGet(this, _dates);
   }
@@ -103,8 +119,7 @@ class ChartSeries extends EventEmitter {
 _categoryColumn = new WeakMap();
 _columnMap = new WeakMap();
 _itemColorFunction = new WeakMap();
-_dataSource = new WeakMap();
-_categoryCount = new WeakMap();
+_dataWindow = new WeakMap();
 _dates = new WeakMap();
 _series = new WeakMap();
 _seriesColumns = new WeakMap();

package/esm/ChartSeries.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartSeries.js","sources":["../../../packages/vuu-chart/src/ChartSeries.ts"],"sourcesContent":["import {\n  DataSource,\n  DataSourceRow,\n  DataSourceSubscribeCallback,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  buildColumnMap,\n  ColumnMap,\n  EventEmitter,\n  Range,\n  metadataKeys,\n} from \"@vuu-ui/vuu-utils\";\n\ntype Series = {\n  id: string;\n  name: string;\n  label: string;\n  data: DataSourceValue<number>[];\n  lineStyle: {\n    width: number;\n  };\n  itemStyle: {\n    color: string | ItemColorFunction;\n  };\n  symbol: \"emptyCircle\" | \"circle\";\n  type: \"line\";\n};\n\nexport type ItemColorFunction = (params: {\n  color: string;\n  data: DataSourceValue;\n  dataIndex: number;\n  name: string;\n  seriesName: string;\n}) => string;\n\nconst defaultItemColorFunction: ItemColorFunction = ({ color }) => color;\n\nconst { KEY } = metadataKeys;\n\nexport type DataSourceValue<T extends VuuRowDataItemType = number> = {\n  key: string;\n  readonly row: DataSourceRow;\n  value: T;\n};\n\nfunction DataSourceValue<T extends VuuRowDataItemType = number>(\n  key: string,\n  row: DataSourceRow,\n  value: T,\n): DataSourceValue<T> {\n  return { key, row, value };\n}\n\nfunction getCategoriesAndSeries(\n  columnMap: ColumnMap,\n  data: DataSourceRow[],\n  categoryColumn: string,\n  seriesColumns: string[],\n  itemColorFunction = defaultItemColorFunction,\n): [string[], Series[]] {\n  const categoryValues: string[] = [];\n  const seriesMap = new Map<string, Series>();\n\n  data.forEach((row) => {\n    const categoryValue = row[columnMap[categoryColumn]] as string;\n    categoryValues.push(categoryValue);\n\n    for (const seriesColumn of seriesColumns) {\n      let series = seriesMap.get(seriesColumn);\n      if (!series) {\n        series = {\n          //any reason we can't simply use col name here ?\n          id: seriesColumn,\n          name: seriesColumn,\n          label: seriesColumn,\n          data: [],\n          type: \"line\",\n          itemStyle: {\n            color: itemColorFunction,\n          },\n          lineStyle: {\n            width: 1.5,\n          },\n          symbol: \"circle\",\n        };\n        seriesMap.set(seriesColumn, series);\n      }\n\n      const key = row[KEY] as string;\n      const value = row[columnMap[seriesColumn]] as number;\n      series.data.push(DataSourceValue(key, row, value));\n    }\n  });\n\n  return [categoryValues, Array.from(seriesMap.values())];\n}\n\nexport type ChartEvents = {\n  update: () => void;\n};\nexport interface ChartSeriesConstructorProps {\n  dataSource: DataSource;\n  /**\n   * The column name of the column that defines our category axis.\n   * By default, these are the x axis values.\n   */\n  category: string;\n\n  itemColorFunction?: ItemColorFunction;\n  /**\n   * The column names of the columns that define our data.\n   * By default, these are the y axis values.\n   */\n  series: string[];\n}\n\nexport class ChartSeries extends EventEmitter<ChartEvents> {\n  #categoryColumn: string;\n  #columnMap: ColumnMap = {};\n  #itemColorFunction: ItemColorFunction | undefined;\n  #dataSource: DataSource;\n  #categoryCount = 0;\n\n  #dates: string[] = [];\n  #series: Series[] = [];\n  #seriesColumns: string[];\n\n  handleData: DataSourceSubscribeCallback = (message) => {\n    if (message.type === \"subscribed\") {\n      this.#columnMap = buildColumnMap(message.tableSchema.columns);\n    } else if (message.type === \"viewport-update\") {\n      if (message.mode === \"size-only\") {\n        this.#categoryCount = message.size ?? 0;\n      } else if (message.rows) {\n        const [dates, series] = getCategoriesAndSeries(\n          this.#columnMap,\n          message.rows,\n          this.#categoryColumn,\n          this.#seriesColumns,\n          this.#itemColorFunction,\n        );\n        this.#dates = dates;\n        this.#series = series;\n        this.emit(\"update\");\n      }\n    } else {\n      console.warn(JSON.stringify(message));\n    }\n  };\n\n  constructor({\n    category,\n    dataSource,\n    itemColorFunction,\n    series,\n  }: ChartSeriesConstructorProps) {\n    super();\n    this.#categoryColumn = category;\n    this.#dataSource = dataSource;\n    this.#itemColorFunction = itemColorFunction;\n    this.#seriesColumns = series;\n\n    dataSource.subscribe({ range: Range(0, 1000) }, this.handleData);\n  }\n\n  get categories() {\n    return this.#dates;\n  }\n\n  get series() {\n    return this.#series;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAAA,IAAA,eAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,MAAA,EAAA,OAAA,EAAA,cAAA;AAqCA,MAAM,wBAA8C,GAAA,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA;AAEnE,MAAM,EAAE,KAAQ,GAAA,YAAA;AAQhB,SAAS,eAAA,CACP,GACA,EAAA,GAAA,EACA,KACoB,EAAA;AACpB,EAAO,OAAA,EAAE,GAAK,EAAA,GAAA,EAAK,KAAM,EAAA;AAC3B;AAEA,SAAS,uBACP,SACA,EAAA,IAAA,EACA,cACA,EAAA,aAAA,EACA,oBAAoB,wBACE,EAAA;AACtB,EAAA,MAAM,iBAA2B,EAAC;AAClC,EAAM,MAAA,SAAA,uBAAgB,GAAoB,EAAA;AAE1C,EAAK,IAAA,CAAA,OAAA,CAAQ,CAAC,GAAQ,KAAA;AACpB,IAAA,MAAM,aAAgB,GAAA,GAAA,CAAI,SAAU,CAAA,cAAc,CAAC,CAAA;AACnD,IAAA,cAAA,CAAe,KAAK,aAAa,CAAA;AAEjC,IAAA,KAAA,MAAW,gBAAgB,aAAe,EAAA;AACxC,MAAI,IAAA,MAAA,GAAS,SAAU,CAAA,GAAA,CAAI,YAAY,CAAA;AACvC,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAS,MAAA,GAAA;AAAA;AAAA,UAEP,EAAI,EAAA,YAAA;AAAA,UACJ,IAAM,EAAA,YAAA;AAAA,UACN,KAAO,EAAA,YAAA;AAAA,UACP,MAAM,EAAC;AAAA,UACP,IAAM,EAAA,MAAA;AAAA,UACN,SAAW,EAAA;AAAA,YACT,KAAO,EAAA;AAAA,WACT;AAAA,UACA,SAAW,EAAA;AAAA,YACT,KAAO,EAAA;AAAA,WACT;AAAA,UACA,MAAQ,EAAA;AAAA,SACV;AACA,QAAU,SAAA,CAAA,GAAA,CAAI,cAAc,MAAM,CAAA;AAAA;AAGpC,MAAM,MAAA,GAAA,GAAM,IAAI,GAAG,CAAA;AACnB,MAAA,MAAM,KAAQ,GAAA,GAAA,CAAI,SAAU,CAAA,YAAY,CAAC,CAAA;AACzC,MAAA,MAAA,CAAO,KAAK,IAAK,CAAA,eAAA,CAAgB,GAAK,EAAA,GAAA,EAAK,KAAK,CAAC,CAAA;AAAA;AACnD,GACD,CAAA;AAED,EAAA,OAAO,CAAC,cAAgB,EAAA,KAAA,CAAM,KAAK,SAAU,CAAA,MAAA,EAAQ,CAAC,CAAA;AACxD;AAqBO,MAAM,oBAAoB,YAA0B,CAAA;AAAA,EAkCzD,WAAY,CAAA;AAAA,IACV,QAAA;AAAA,IACA,UAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GAC8B,EAAA;AAC9B,IAAM,KAAA,EAAA;AAvCR,IAAA,YAAA,CAAA,IAAA,EAAA,eAAA,CAAA;AACA,IAAA,YAAA,CAAA,IAAA,EAAA,UAAA,EAAwB,EAAC,CAAA;AACzB,IAAA,YAAA,CAAA,IAAA,EAAA,kBAAA,CAAA;AACA,IAAA,YAAA,CAAA,IAAA,EAAA,WAAA,CAAA;AACA,IAAiB,YAAA,CAAA,IAAA,EAAA,cAAA,EAAA,CAAA,CAAA;AAEjB,IAAA,YAAA,CAAA,IAAA,EAAA,MAAA,EAAmB,EAAC,CAAA;AACpB,IAAA,YAAA,CAAA,IAAA,EAAA,OAAA,EAAoB,EAAC,CAAA;AACrB,IAAA,YAAA,CAAA,IAAA,EAAA,cAAA,CAAA;AAEA,IAAA,aAAA,CAAA,IAAA,EAAA,YAAA,EAA0C,CAAC,OAAY,KAAA;AACrD,MAAI,IAAA,OAAA,CAAQ,SAAS,YAAc,EAAA;AACjC,QAAA,YAAA,CAAA,IAAA,EAAK,UAAa,EAAA,cAAA,CAAe,OAAQ,CAAA,WAAA,CAAY,OAAO,CAAA,CAAA;AAAA,OAC9D,MAAA,IAAW,OAAQ,CAAA,IAAA,KAAS,iBAAmB,EAAA;AAC7C,QAAI,IAAA,OAAA,CAAQ,SAAS,WAAa,EAAA;AAChC,UAAK,YAAA,CAAA,IAAA,EAAA,cAAA,EAAiB,QAAQ,IAAQ,IAAA,CAAA,CAAA;AAAA,SACxC,MAAA,IAAW,QAAQ,IAAM,EAAA;AACvB,UAAM,MAAA,CAAC,KAAO,EAAA,MAAM,CAAI,GAAA,sBAAA;AAAA,YACtB,YAAK,CAAA,IAAA,EAAA,UAAA,CAAA;AAAA,YACL,OAAQ,CAAA,IAAA;AAAA,YACR,YAAK,CAAA,IAAA,EAAA,eAAA,CAAA;AAAA,YACL,YAAK,CAAA,IAAA,EAAA,cAAA,CAAA;AAAA,YACL,YAAK,CAAA,IAAA,EAAA,kBAAA;AAAA,WACP;AACA,UAAA,YAAA,CAAA,IAAA,EAAK,MAAS,EAAA,KAAA,CAAA;AACd,UAAA,YAAA,CAAA,IAAA,EAAK,OAAU,EAAA,MAAA,CAAA;AACf,UAAA,IAAA,CAAK,KAAK,QAAQ,CAAA;AAAA;AACpB,OACK,MAAA;AACL,QAAA,OAAA,CAAQ,IAAK,CAAA,IAAA,CAAK,SAAU,CAAA,OAAO,CAAC,CAAA;AAAA;AACtC,KACF,CAAA;AASE,IAAA,YAAA,CAAA,IAAA,EAAK,eAAkB,EAAA,QAAA,CAAA;AACvB,IAAA,YAAA,CAAA,IAAA,EAAK,WAAc,EAAA,UAAA,CAAA;AACnB,IAAA,YAAA,CAAA,IAAA,EAAK,kBAAqB,EAAA,iBAAA,CAAA;AAC1B,IAAA,YAAA,CAAA,IAAA,EAAK,cAAiB,EAAA,MAAA,CAAA;AAEtB,IAAW,UAAA,CAAA,SAAA,CAAU,EAAE,KAAO,EAAA,KAAA,CAAM,GAAG,GAAI,CAAA,EAAK,EAAA,IAAA,CAAK,UAAU,CAAA;AAAA;AACjE,EAEA,IAAI,UAAa,GAAA;AACf,IAAA,OAAO,YAAK,CAAA,IAAA,EAAA,MAAA,CAAA;AAAA;AACd,EAEA,IAAI,MAAS,GAAA;AACX,IAAA,OAAO,YAAK,CAAA,IAAA,EAAA,OAAA,CAAA;AAAA;AAEhB;AAvDE,eAAA,GAAA,IAAA,OAAA,EAAA;AACA,UAAA,GAAA,IAAA,OAAA,EAAA;AACA,kBAAA,GAAA,IAAA,OAAA,EAAA;AACA,WAAA,GAAA,IAAA,OAAA,EAAA;AACA,cAAA,GAAA,IAAA,OAAA,EAAA;AAEA,MAAA,GAAA,IAAA,OAAA,EAAA;AACA,OAAA,GAAA,IAAA,OAAA,EAAA;AACA,cAAA,GAAA,IAAA,OAAA,EAAA;;;;"}
+{"version":3,"file":"ChartSeries.js","sources":["../../../packages/vuu-chart/src/ChartSeries.ts"],"sourcesContent":["import {\n  DataSource,\n  DataSourceRow,\n  DataSourceSubscribeCallback,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  buildColumnMap,\n  ColumnMap,\n  EventEmitter,\n  Range,\n  metadataKeys,\n} from \"@vuu-ui/vuu-utils\";\nimport { MovingDataRowWindow } from \"./DataRowMovingWindow\";\n\ntype Series = {\n  id: string;\n  name: string;\n  label: string;\n  data: DataSourceValue<number>[];\n  lineStyle: {\n    width: number;\n  };\n  itemStyle: {\n    color: string | ItemColorFunction;\n  };\n  symbol: \"emptyCircle\" | \"circle\";\n  type: \"line\";\n};\n\nexport type ItemColorFunction = (params: {\n  color: string;\n  data: DataSourceValue;\n  dataIndex: number;\n  name: string;\n  seriesName: string;\n}) => string;\n\nconst defaultItemColorFunction: ItemColorFunction = ({ color }) => color;\n\nconst { KEY } = metadataKeys;\n\nexport type DataSourceValue<T extends VuuRowDataItemType = number> = {\n  key: string;\n  readonly row: DataSourceRow;\n  value: T;\n};\n\nfunction DataSourceValue<T extends VuuRowDataItemType = number>(\n  key: string,\n  row: DataSourceRow,\n  value: T,\n): DataSourceValue<T> {\n  return { key, row, value };\n}\n\nfunction getCategoriesAndSeries(\n  columnMap: ColumnMap,\n  data: DataSourceRow[],\n  categoryColumn: string,\n  seriesColumns: string[],\n  itemColorFunction = defaultItemColorFunction,\n): [string[], Series[]] {\n  const categoryValues: string[] = [];\n  const seriesMap = new Map<string, Series>();\n\n  data.forEach((row) => {\n    const categoryValue = row[columnMap[categoryColumn]] as string;\n    categoryValues.push(categoryValue);\n\n    for (const seriesColumn of seriesColumns) {\n      let series = seriesMap.get(seriesColumn);\n      if (!series) {\n        series = {\n          //any reason we can't simply use col name here ?\n          id: seriesColumn,\n          name: seriesColumn,\n          label: seriesColumn,\n          data: [],\n          type: \"line\",\n          itemStyle: {\n            color: itemColorFunction,\n          },\n          lineStyle: {\n            width: 1.5,\n          },\n          symbol: \"circle\",\n        };\n        seriesMap.set(seriesColumn, series);\n      }\n\n      const key = row[KEY] as string;\n      const value = row[columnMap[seriesColumn]] as number;\n      series.data.push(DataSourceValue(key, row, value));\n    }\n  });\n\n  return [categoryValues, Array.from(seriesMap.values())];\n}\n\nexport type ChartEvents = {\n  update: () => void;\n};\nexport interface ChartSeriesConstructorProps {\n  dataSource: DataSource;\n  itemColorFunction?: ItemColorFunction;\n}\n\nexport class ChartSeries extends EventEmitter<ChartEvents> {\n  #categoryColumn = \"\";\n  #columnMap: ColumnMap = {};\n  #itemColorFunction: ItemColorFunction | undefined;\n  #dataWindow = new MovingDataRowWindow(Range(0, 1000));\n\n  #dates: string[] = [];\n  #series: Series[] = [];\n  #seriesColumns: string[] = [];\n\n  handleData: DataSourceSubscribeCallback = (message) => {\n    if (message.type === \"subscribed\") {\n      this.#columnMap = buildColumnMap(message.tableSchema.columns);\n    } else if (message.type === \"viewport-update\") {\n      if (message.mode === \"size-only\") {\n        // ???\n      } else if (message.rows) {\n        for (const row of message.rows) {\n          this.#dataWindow.add(row);\n        }\n        this.buildCategoriesAndSeries();\n      }\n    } else {\n      console.warn(JSON.stringify(message));\n    }\n  };\n\n  buildCategoriesAndSeries() {\n    if (this.#categoryColumn && this.#seriesColumns.length > 0) {\n      const [dates, series] = getCategoriesAndSeries(\n        this.#columnMap,\n        this.#dataWindow.data,\n        this.#categoryColumn,\n        this.#seriesColumns,\n        this.#itemColorFunction,\n      );\n      this.#dates = dates;\n      this.#series = series;\n\n      this.emit(\"update\");\n    }\n  }\n\n  constructor({ dataSource, itemColorFunction }: ChartSeriesConstructorProps) {\n    super();\n    this.#itemColorFunction = itemColorFunction;\n    dataSource.subscribe({ range: Range(0, 1000) }, this.handleData);\n  }\n\n  get categoryColumn() {\n    return this.#categoryColumn;\n  }\n\n  set categoryColumn(categoryColumn: string) {\n    this.#categoryColumn = categoryColumn;\n    if (this.#seriesColumns.length > 0) {\n      this.buildCategoriesAndSeries();\n    }\n  }\n\n  get seriesColumnNames() {\n    return this.#seriesColumns;\n  }\n\n  set seriesColumnNames(seriesColumnNames: string[]) {\n    this.#seriesColumns = seriesColumnNames;\n    if (this.#categoryColumn) {\n      this.buildCategoriesAndSeries();\n    }\n  }\n\n  get categories() {\n    return this.#dates;\n  }\n\n  get series() {\n    return this.#series;\n  }\n}\n"],"names":[],"mappings":"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"}

package/esm/DataRowMovingWindow.js

@@ -0,0 +1,95 @@
+import { WindowRange, metadataKeys } from '@vuu-ui/vuu-utils';
+
+var __defProp = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _range;
+const { IDX, KEY } = metadataKeys;
+class MovingDataRowWindow {
+  constructor({ from, to }) {
+    __publicField(this, "data");
+    __publicField(this, "rowCount", 0);
+    __privateAdd(this, _range);
+    __publicField(this, "setRowCount", (rowCount) => {
+      if (rowCount < this.data.length) {
+        this.data.length = rowCount;
+      }
+      this.rowCount = rowCount;
+    });
+    __privateSet(this, _range, new WindowRange(from, to));
+    this.data = new Array(Math.max(0, to - from));
+    this.rowCount = 0;
+  }
+  add(data) {
+    const index = data[IDX];
+    if (this.isWithinRange(index)) {
+      const internalIndex = index - __privateGet(this, _range).from;
+      this.data[internalIndex] = data;
+    }
+  }
+  getAtIndex(index) {
+    return __privateGet(this, _range).isWithin(index) && this.data[index - __privateGet(this, _range).from] != null ? this.data[index - __privateGet(this, _range).from] : void 0;
+  }
+  getByKey(key) {
+    return this.data.find((row) => row[KEY] === key);
+  }
+  isWithinRange(index) {
+    return __privateGet(this, _range).isWithin(index);
+  }
+  setRange({ from, to }) {
+    if (from !== __privateGet(this, _range).from || to !== __privateGet(this, _range).to) {
+      const [overlapFrom, overlapTo] = __privateGet(this, _range).overlap(from, to);
+      const newData = new Array(Math.max(0, to - from));
+      for (let i = overlapFrom; i < overlapTo; i++) {
+        const data = this.getAtIndex(i);
+        if (data) {
+          const index = i - from;
+          newData[index] = data;
+        }
+      }
+      this.data = newData;
+      __privateGet(this, _range).from = from;
+      __privateGet(this, _range).to = to;
+    }
+  }
+  get hasData() {
+    return this.data.some((d) => d !== void 0);
+  }
+  /**
+   * This will throw if there is no data. Check `hasData` first
+   * to guard against this, if not certain.
+   */
+  get firstRow() {
+    for (let i = 0; i < this.data.length; i++) {
+      if (this.data[i]) {
+        return this.data[i];
+      }
+    }
+    throw Error(`[DataRowMovingWinddow] firstRow, no data`);
+  }
+  get range() {
+    return __privateGet(this, _range);
+  }
+  // TODO make this more performant, see implementation in
+  // array-backed-moving-window - use same implementation
+  get hasAllRowsWithinRange() {
+    const { from, to } = __privateGet(this, _range);
+    for (let i = from; i < to; i++) {
+      if (this.getAtIndex(i) === void 0) {
+        return false;
+      }
+    }
+    return true;
+  }
+}
+_range = new WeakMap();
+
+export { MovingDataRowWindow };
+//# sourceMappingURL=DataRowMovingWindow.js.map

package/esm/DataRowMovingWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataRowMovingWindow.js","sources":["../../../packages/vuu-chart/src/DataRowMovingWindow.ts"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { WindowRange } from \"@vuu-ui/vuu-utils\";\nimport { metadataKeys } from \"@vuu-ui/vuu-utils\";\n\nconst { IDX, KEY } = metadataKeys;\n\nexport class MovingDataRowWindow {\n  public data: DataSourceRow[];\n  public rowCount = 0;\n  #range: WindowRange;\n\n  constructor({ from, to }: VuuRange) {\n    this.#range = new WindowRange(from, to);\n    //internal data is always 0 based, we add range.from to determine an offset\n    this.data = new Array(Math.max(0, to - from));\n    this.rowCount = 0;\n  }\n\n  setRowCount = (rowCount: number) => {\n    if (rowCount < this.data.length) {\n      this.data.length = rowCount;\n    }\n\n    this.rowCount = rowCount;\n  };\n\n  add(data: DataSourceRow) {\n    const index = data[IDX];\n    if (this.isWithinRange(index)) {\n      const internalIndex = index - this.#range.from;\n      this.data[internalIndex] = data;\n    }\n  }\n\n  getAtIndex(index: number) {\n    return this.#range.isWithin(index) &&\n      this.data[index - this.#range.from] != null\n      ? this.data[index - this.#range.from]\n      : undefined;\n  }\n\n  getByKey(key: string) {\n    return this.data.find((row) => row[KEY] === key);\n  }\n\n  isWithinRange(index: number) {\n    return this.#range.isWithin(index);\n  }\n\n  setRange({ from, to }: VuuRange) {\n    if (from !== this.#range.from || to !== this.#range.to) {\n      const [overlapFrom, overlapTo] = this.#range.overlap(from, to);\n      const newData = new Array(Math.max(0, to - from));\n      for (let i = overlapFrom; i < overlapTo; i++) {\n        const data = this.getAtIndex(i);\n        if (data) {\n          const index = i - from;\n          newData[index] = data;\n        }\n      }\n      this.data = newData;\n      this.#range.from = from;\n      this.#range.to = to;\n    }\n  }\n\n  get hasData() {\n    return this.data.some((d) => d !== undefined);\n  }\n\n  /**\n   * This will throw if there is no data. Check `hasData` first\n   * to guard against this, if not certain.\n   */\n  get firstRow() {\n    for (let i = 0; i < this.data.length; i++) {\n      if (this.data[i]) {\n        return this.data[i];\n      }\n    }\n    throw Error(`[DataRowMovingWinddow] firstRow, no data`);\n  }\n\n  get range() {\n    return this.#range;\n  }\n\n  // TODO make this more performant, see implementation in\n  // array-backed-moving-window - use same implementation\n  get hasAllRowsWithinRange(): boolean {\n    const { from, to } = this.#range;\n\n    for (let i = from; i < to; i++) {\n      if (this.getAtIndex(i) === undefined) {\n        return false;\n      }\n    }\n    return true;\n  }\n}\n"],"names":[],"mappings":"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"}

package/esm/useChartOptions.js

@@ -1,5 +1,6 @@
 import { useState, useMemo } from 'react';
 import { ChartSeries } from './ChartSeries.js';
+import { itemsChanged } from '@vuu-ui/vuu-utils';
 
 const defaultPalette = [
   "#4676bf",
@@ -18,15 +19,22 @@ const useChartOptions = ({
 }) => {
   const [, forceRender] = useState({});
   const chartSeries = useMemo(() => {
+    console.log("new ChartSeries");
     const cs = new ChartSeries({
-      category: categoryColumnName,
       itemColorFunction,
-      series: seriesColumnNames,
       dataSource
     });
     cs.on("update", () => forceRender({}));
     return cs;
-  }, [categoryColumnName, dataSource, itemColorFunction, seriesColumnNames]);
+  }, [dataSource, itemColorFunction]);
+  useMemo(() => {
+    if (categoryColumnName !== chartSeries.categoryColumn) {
+      chartSeries.categoryColumn = categoryColumnName;
+    }
+    if (itemsChanged(seriesColumnNames, chartSeries.seriesColumnNames)) {
+      chartSeries.seriesColumnNames = seriesColumnNames;
+    }
+  }, [categoryColumnName, chartSeries, seriesColumnNames]);
   return {
     animation: false,
     color: palette,
@@ -43,6 +51,9 @@ const useChartOptions = ({
       right: 5
     },
     series: chartSeries.series,
+    tooltip: {
+      trigger: "axis"
+    },
     xAxis: {
       data: chartSeries.categories
     },

package/esm/useChartOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChartOptions.js","sources":["../../../packages/vuu-chart/src/useChartOptions.ts"],"sourcesContent":["import { type EChartsCoreOption } from \"echarts\";\nimport { useMemo, useState } from \"react\";\nimport { ChartSeries, ItemColorFunction } from \"./ChartSeries\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nconst defaultPalette = [\n  \"#4676bf\",\n  \"#ab6528\",\n  \"#9f55c2\",\n  \"#2a8285\",\n  \"#697694\",\n  \"#B0549d\",\n];\nexport interface ChartOptionsProps {\n  categoryColumnName: string;\n  dataSource: DataSource;\n  itemColorFunction?: ItemColorFunction;\n  palette?: string[];\n  seriesColumnNames: string[];\n}\n\nexport const useChartOptions = ({\n  categoryColumnName,\n  dataSource,\n  itemColorFunction,\n  palette = defaultPalette,\n  seriesColumnNames,\n}: ChartOptionsProps) => {\n  const [, forceRender] = useState({});\n\n  const chartSeries = useMemo(() => {\n    const cs = new ChartSeries({\n      category: categoryColumnName,\n      itemColorFunction,\n      series: seriesColumnNames,\n      dataSource,\n    });\n    cs.on(\"update\", () => forceRender({}));\n    return cs;\n  }, [categoryColumnName, dataSource, itemColorFunction, seriesColumnNames]);\n\n  return {\n    animation: false,\n    color: palette,\n    dataZoom: [\n      {\n        type: \"slider\",\n        start: 0,\n        end: 100,\n      },\n    ],\n    grid: {\n      left: \"0\",\n      bottom: 0,\n      right: 5,\n    },\n    series: chartSeries.series,\n    xAxis: {\n      data: chartSeries.categories,\n    },\n    yAxis: {},\n  } as EChartsCoreOption;\n};\n"],"names":[],"mappings":";;;AAKA,MAAM,cAAiB,GAAA;AAAA,EACrB,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA;AASO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,kBAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,OAAU,GAAA,cAAA;AAAA,EACV;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,GAAG,WAAW,CAAI,GAAA,QAAA,CAAS,EAAE,CAAA;AAEnC,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAM,MAAA,EAAA,GAAK,IAAI,WAAY,CAAA;AAAA,MACzB,QAAU,EAAA,kBAAA;AAAA,MACV,iBAAA;AAAA,MACA,MAAQ,EAAA,iBAAA;AAAA,MACR;AAAA,KACD,CAAA;AACD,IAAA,EAAA,CAAG,GAAG,QAAU,EAAA,MAAM,WAAY,CAAA,EAAE,CAAC,CAAA;AACrC,IAAO,OAAA,EAAA;AAAA,KACN,CAAC,kBAAA,EAAoB,UAAY,EAAA,iBAAA,EAAmB,iBAAiB,CAAC,CAAA;AAEzE,EAAO,OAAA;AAAA,IACL,SAAW,EAAA,KAAA;AAAA,IACX,KAAO,EAAA,OAAA;AAAA,IACP,QAAU,EAAA;AAAA,MACR;AAAA,QACE,IAAM,EAAA,QAAA;AAAA,QACN,KAAO,EAAA,CAAA;AAAA,QACP,GAAK,EAAA;AAAA;AACP,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,IAAM,EAAA,GAAA;AAAA,MACN,MAAQ,EAAA,CAAA;AAAA,MACR,KAAO,EAAA;AAAA,KACT;AAAA,IACA,QAAQ,WAAY,CAAA,MAAA;AAAA,IACpB,KAAO,EAAA;AAAA,MACL,MAAM,WAAY,CAAA;AAAA,KACpB;AAAA,IACA,OAAO;AAAC,GACV;AACF;;;;"}
+{"version":3,"file":"useChartOptions.js","sources":["../../../packages/vuu-chart/src/useChartOptions.ts"],"sourcesContent":["import { type EChartsCoreOption } from \"echarts\";\nimport { useMemo, useState } from \"react\";\nimport { ChartSeries, ItemColorFunction } from \"./ChartSeries\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { itemsChanged } from \"@vuu-ui/vuu-utils\";\n\nconst defaultPalette = [\n  \"#4676bf\",\n  \"#ab6528\",\n  \"#9f55c2\",\n  \"#2a8285\",\n  \"#697694\",\n  \"#B0549d\",\n];\nexport interface ChartOptionsProps {\n  categoryColumnName: string;\n  dataSource: DataSource;\n  itemColorFunction?: ItemColorFunction;\n  palette?: string[];\n  seriesColumnNames: string[];\n}\n\nexport const useChartOptions = ({\n  categoryColumnName,\n  dataSource,\n  itemColorFunction,\n  palette = defaultPalette,\n  seriesColumnNames,\n}: ChartOptionsProps) => {\n  const [, forceRender] = useState({});\n\n  const chartSeries = useMemo(() => {\n    console.log(\"new ChartSeries\");\n    const cs = new ChartSeries({\n      itemColorFunction,\n      dataSource,\n    });\n    cs.on(\"update\", () => forceRender({}));\n    return cs;\n  }, [dataSource, itemColorFunction]);\n\n  useMemo(() => {\n    if (categoryColumnName !== chartSeries.categoryColumn) {\n      chartSeries.categoryColumn = categoryColumnName;\n    }\n    if (itemsChanged(seriesColumnNames, chartSeries.seriesColumnNames)) {\n      chartSeries.seriesColumnNames = seriesColumnNames;\n    }\n  }, [categoryColumnName, chartSeries, seriesColumnNames]);\n\n  return {\n    animation: false,\n    color: palette,\n    dataZoom: [\n      {\n        type: \"slider\",\n        start: 0,\n        end: 100,\n      },\n    ],\n    grid: {\n      left: \"0\",\n      bottom: 0,\n      right: 5,\n    },\n    series: chartSeries.series,\n    tooltip: {\n      trigger: \"axis\",\n    },\n    xAxis: {\n      data: chartSeries.categories,\n    },\n    yAxis: {},\n  } as EChartsCoreOption;\n};\n"],"names":[],"mappings":";;;;AAMA,MAAM,cAAiB,GAAA;AAAA,EACrB,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA;AASO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,kBAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,OAAU,GAAA,cAAA;AAAA,EACV;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,GAAG,WAAW,CAAI,GAAA,QAAA,CAAS,EAAE,CAAA;AAEnC,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,OAAA,CAAQ,IAAI,iBAAiB,CAAA;AAC7B,IAAM,MAAA,EAAA,GAAK,IAAI,WAAY,CAAA;AAAA,MACzB,iBAAA;AAAA,MACA;AAAA,KACD,CAAA;AACD,IAAA,EAAA,CAAG,GAAG,QAAU,EAAA,MAAM,WAAY,CAAA,EAAE,CAAC,CAAA;AACrC,IAAO,OAAA,EAAA;AAAA,GACN,EAAA,CAAC,UAAY,EAAA,iBAAiB,CAAC,CAAA;AAElC,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAI,IAAA,kBAAA,KAAuB,YAAY,cAAgB,EAAA;AACrD,MAAA,WAAA,CAAY,cAAiB,GAAA,kBAAA;AAAA;AAE/B,IAAA,IAAI,YAAa,CAAA,iBAAA,EAAmB,WAAY,CAAA,iBAAiB,CAAG,EAAA;AAClE,MAAA,WAAA,CAAY,iBAAoB,GAAA,iBAAA;AAAA;AAClC,GACC,EAAA,CAAC,kBAAoB,EAAA,WAAA,EAAa,iBAAiB,CAAC,CAAA;AAEvD,EAAO,OAAA;AAAA,IACL,SAAW,EAAA,KAAA;AAAA,IACX,KAAO,EAAA,OAAA;AAAA,IACP,QAAU,EAAA;AAAA,MACR;AAAA,QACE,IAAM,EAAA,QAAA;AAAA,QACN,KAAO,EAAA,CAAA;AAAA,QACP,GAAK,EAAA;AAAA;AACP,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,IAAM,EAAA,GAAA;AAAA,MACN,MAAQ,EAAA,CAAA;AAAA,MACR,KAAO,EAAA;AAAA,KACT;AAAA,IACA,QAAQ,WAAY,CAAA,MAAA;AAAA,IACpB,OAAS,EAAA;AAAA,MACP,OAAS,EAAA;AAAA,KACX;AAAA,IACA,KAAO,EAAA;AAAA,MACL,MAAM,WAAY,CAAA;AAAA,KACpB;AAAA,IACA,OAAO;AAAC,GACV;AACF;;;;"}

package/package.json

@@ -1,16 +1,16 @@
 {
-  "version": "2.1.0-alpha.8",
+  "version": "2.1.0",
   "description": "support for apache echarts using vuu data",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "2.1.0-alpha.8",
-    "@vuu-ui/vuu-protocol-types": "2.1.0-alpha.8"
+    "@vuu-ui/vuu-data-types": "2.1.0",
+    "@vuu-ui/vuu-protocol-types": "2.1.0"
   },
   "dependencies": {
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-context-menu": "2.1.0-alpha.8",
-    "@vuu-ui/vuu-utils": "2.1.0-alpha.8"
+    "@vuu-ui/vuu-context-menu": "2.1.0",
+    "@vuu-ui/vuu-utils": "2.1.0"
   },
   "peerDependencies": {
     "echarts": "6.0.0",

package/types/ChartSeries.d.ts

@@ -32,22 +32,17 @@ export type ChartEvents = {
 };
 export interface ChartSeriesConstructorProps {
     dataSource: DataSource;
-    /**
-     * The column name of the column that defines our category axis.
-     * By default, these are the x axis values.
-     */
-    category: string;
     itemColorFunction?: ItemColorFunction;
-    /**
-     * The column names of the columns that define our data.
-     * By default, these are the y axis values.
-     */
-    series: string[];
 }
 export declare class ChartSeries extends EventEmitter<ChartEvents> {
     #private;
     handleData: DataSourceSubscribeCallback;
-    constructor({ category, dataSource, itemColorFunction, series, }: ChartSeriesConstructorProps);
+    buildCategoriesAndSeries(): void;
+    constructor({ dataSource, itemColorFunction }: ChartSeriesConstructorProps);
+    get categoryColumn(): string;
+    set categoryColumn(categoryColumn: string);
+    get seriesColumnNames(): string[];
+    set seriesColumnNames(seriesColumnNames: string[]);
     get categories(): string[];
     get series(): Series[];
 }

package/types/DataRowMovingWindow.d.ts

@@ -0,0 +1,23 @@
+import { DataSourceRow } from "@vuu-ui/vuu-data-types";
+import { VuuRange } from "@vuu-ui/vuu-protocol-types";
+import { WindowRange } from "@vuu-ui/vuu-utils";
+export declare class MovingDataRowWindow {
+    #private;
+    data: DataSourceRow[];
+    rowCount: number;
+    constructor({ from, to }: VuuRange);
+    setRowCount: (rowCount: number) => void;
+    add(data: DataSourceRow): void;
+    getAtIndex(index: number): DataSourceRow | undefined;
+    getByKey(key: string): DataSourceRow | undefined;
+    isWithinRange(index: number): boolean;
+    setRange({ from, to }: VuuRange): void;
+    get hasData(): boolean;
+    /**
+     * This will throw if there is no data. Check `hasData` first
+     * to guard against this, if not certain.
+     */
+    get firstRow(): DataSourceRow;
+    get range(): WindowRange;
+    get hasAllRowsWithinRange(): boolean;
+}