@vuu-ui/vuu-chart 2.1.0-alpha.5 → 2.1.0-alpha.6

package/cjs/Chart.js

@@ -11,13 +11,14 @@ var Chart$1 = require('./Chart.css.js');
 
 const Chart = ({
   categoryColumnName,
-  chartSettings = { useCoarsePointer: true },
+  chartSettings = { useCoarsePointer: true, renderer: "svg" },
   // enables clicking near a line and still highlighting it
   dataSource,
+  itemColorFunction,
   optionSettings = { notMerge: true },
   // don't merge two options together when updating option
+  palette,
   style = { width: "100%", height: "100%" },
-  events = {},
   seriesColumnNames,
   ...htmlAttributes
 }) => {
@@ -30,6 +31,8 @@ const Chart = ({
   const chartRef = react.useRef(null);
   const option = useChartOptions.useChartOptions({
     categoryColumnName,
+    itemColorFunction,
+    palette,
     dataSource,
     seriesColumnNames
   });
@@ -40,7 +43,7 @@ const Chart = ({
     return () => {
       chart?.dispose();
     };
-  }, [chartSettings, events, onContextMenu]);
+  }, [chartSettings, onContextMenu]);
   react.useEffect(() => {
     if (chartRef.current) {
       const chart = echarts.getInstanceByDom(chartRef.current);

package/cjs/Chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","sources":["../../../packages/vuu-chart/src/Chart.tsx"],"sourcesContent":["import { useRef, useEffect, HTMLAttributes } from \"react\";\nimport { init, getInstanceByDom } from \"echarts\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ChartOptionsProps, useChartOptions } from \"./useChartOptions\";\nimport { useChartContextMenu } from \"./useChartContextMenu\";\n\nimport echartCss from \"./Chart.css\";\n\ntype OptionSettings = {\n  notMerge: boolean;\n};\n\ntype ChartSettings = {\n  useCoarsePointer: boolean;\n};\n\nexport interface ChartProps\n  extends ChartOptionsProps,\n    HTMLAttributes<HTMLDivElement> {\n  chartSettings?: ChartSettings;\n  events?: unknown;\n  optionSettings?: OptionSettings;\n}\n\nexport const Chart = ({\n  categoryColumnName,\n  chartSettings = { useCoarsePointer: true }, // enables clicking near a line and still highlighting it\n  dataSource,\n  optionSettings = { notMerge: true }, // don't merge two options together when updating option\n  style = { width: \"100%\", height: \"100%\" },\n  events = {},\n  seriesColumnNames,\n  ...htmlAttributes\n}: ChartProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toast-notification\",\n    css: echartCss,\n    window: targetWindow,\n  });\n\n  const chartRef = useRef<HTMLDivElement>(null);\n\n  const option = useChartOptions({\n    categoryColumnName,\n    dataSource,\n    seriesColumnNames,\n  });\n\n  const onContextMenu = useChartContextMenu({ categoryColumnName });\n\n  // Debounce resize event so it only fires periodically instead of constantly\n  //   const resizeChart = useMemo(\n  //     () =>\n  //       debounce(() => {\n  //         if (chartRef.current) {\n  //           const chart = getInstanceByDom(chartRef.current);\n  //           chart.resize();\n  //         }\n  //       }, 100),\n  //     [],\n  //   );\n\n  useEffect(() => {\n    // Initialize chart\n    const chart = init(chartRef.current, null, chartSettings);\n\n    chart.on(\"contextmenu\", onContextMenu);\n\n    // Set up event listeners\n    // for (const [key, handler] of Object.entries(events)) {\n    //   console.log(`register ${key} handler`);\n    //   chart.on(key, (param) => {\n    //     handler(param);\n    //   });\n    // }\n\n    // Resize event listener\n    // const resizeObserver = new ResizeObserver(() => {\n    //   resizeChart();\n    // });\n\n    // resizeObserver.observe(chartRef.current);\n\n    // Return cleanup function\n    return () => {\n      chart?.dispose();\n\n      //   if (chartRef.current) {\n      //     resizeObserver.unobserve(chartRef.current);\n      //   }\n      //   resizeObserver.disconnect();\n    };\n  }, [chartSettings, events, onContextMenu]);\n\n  useEffect(() => {\n    if (chartRef.current) {\n      // Re-render chart when option changes\n      const chart = getInstanceByDom(chartRef.current);\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      chart?.setOption(option, optionSettings);\n    }\n  }, [option, optionSettings]);\n\n  return <div {...htmlAttributes} ref={chartRef} style={style} />;\n};\n"],"names":["useWindow","useComponentCssInjection","echartCss","useRef","useChartOptions","useChartContextMenu","useEffect","init","getInstanceByDom"],"mappings":";;;;;;;;;;;AAyBO,MAAM,QAAQ,CAAC;AAAA,EACpB,kBAAA;AAAA,EACA,aAAA,GAAgB,EAAE,gBAAA,EAAkB,IAAK,EAAA;AAAA;AAAA,EACzC,UAAA;AAAA,EACA,cAAA,GAAiB,EAAE,QAAA,EAAU,IAAK,EAAA;AAAA;AAAA,EAClC,KAAQ,GAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,QAAQ,MAAO,EAAA;AAAA,EACxC,SAAS,EAAC;AAAA,EACV,iBAAA;AAAA,EACA,GAAG;AACL,CAAkB,KAAA;AAChB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,QAAA,GAAWC,aAAuB,IAAI,CAAA;AAE5C,EAAA,MAAM,SAASC,+BAAgB,CAAA;AAAA,IAC7B,kBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,aAAgB,GAAAC,uCAAA,CAAoB,EAAE,kBAAA,EAAoB,CAAA;AAchE,EAAAC,eAAA,CAAU,MAAM;AAEd,IAAA,MAAM,KAAQ,GAAAC,YAAA,CAAK,QAAS,CAAA,OAAA,EAAS,MAAM,aAAa,CAAA;AAExD,IAAM,KAAA,CAAA,EAAA,CAAG,eAAe,aAAa,CAAA;AAkBrC,IAAA,OAAO,MAAM;AACX,MAAA,KAAA,EAAO,OAAQ,EAAA;AAAA,KAMjB;AAAA,GACC,EAAA,CAAC,aAAe,EAAA,MAAA,EAAQ,aAAa,CAAC,CAAA;AAEzC,EAAAD,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAS,OAAS,EAAA;AAEpB,MAAM,MAAA,KAAA,GAAQE,wBAAiB,CAAA,QAAA,CAAS,OAAO,CAAA;AAG/C,MAAO,KAAA,EAAA,SAAA,CAAU,QAAQ,cAAc,CAAA;AAAA;AACzC,GACC,EAAA,CAAC,MAAQ,EAAA,cAAc,CAAC,CAAA;AAE3B,EAAA,sCAAQ,KAAK,EAAA,EAAA,GAAG,cAAgB,EAAA,GAAA,EAAK,UAAU,KAAc,EAAA,CAAA;AAC/D;;;;"}
+{"version":3,"file":"Chart.js","sources":["../../../packages/vuu-chart/src/Chart.tsx"],"sourcesContent":["import { useRef, useEffect, HTMLAttributes } from \"react\";\nimport { init, getInstanceByDom } from \"echarts\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ChartOptionsProps, useChartOptions } from \"./useChartOptions\";\nimport { useChartContextMenu } from \"./useChartContextMenu\";\n\nimport echartCss from \"./Chart.css\";\nimport { ItemColorFunction } from \"./ChartSeries\";\n\ntype OptionSettings = {\n  notMerge: boolean;\n};\n\ntype ChartSettings = {\n  renderer: \"svg\" | \"canvas\";\n  useCoarsePointer: boolean;\n};\n\nexport interface ChartProps\n  extends ChartOptionsProps,\n    HTMLAttributes<HTMLDivElement> {\n  chartSettings?: ChartSettings;\n  itemColorFunction?: ItemColorFunction;\n  optionSettings?: OptionSettings;\n  palette?: string[];\n}\n\nexport const Chart = ({\n  categoryColumnName,\n  chartSettings = { useCoarsePointer: true, renderer: \"svg\" }, // enables clicking near a line and still highlighting it\n  dataSource,\n  itemColorFunction,\n  optionSettings = { notMerge: true }, // don't merge two options together when updating option\n  palette,\n  style = { width: \"100%\", height: \"100%\" },\n  seriesColumnNames,\n  ...htmlAttributes\n}: ChartProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toast-notification\",\n    css: echartCss,\n    window: targetWindow,\n  });\n\n  const chartRef = useRef<HTMLDivElement>(null);\n\n  const option = useChartOptions({\n    categoryColumnName,\n    itemColorFunction,\n    palette,\n    dataSource,\n    seriesColumnNames,\n  });\n\n  const onContextMenu = useChartContextMenu({ categoryColumnName });\n\n  // Debounce resize event so it only fires periodically instead of constantly\n  //   const resizeChart = useMemo(\n  //     () =>\n  //       debounce(() => {\n  //         if (chartRef.current) {\n  //           const chart = getInstanceByDom(chartRef.current);\n  //           chart.resize();\n  //         }\n  //       }, 100),\n  //     [],\n  //   );\n\n  useEffect(() => {\n    // Initialize chart\n    const chart = init(chartRef.current, null, chartSettings);\n\n    chart.on(\"contextmenu\", onContextMenu);\n\n    // Resize event listener\n    // const resizeObserver = new ResizeObserver(() => {\n    //   resizeChart();\n    // });\n\n    // resizeObserver.observe(chartRef.current);\n\n    // Return cleanup function\n    return () => {\n      chart?.dispose();\n\n      //   if (chartRef.current) {\n      //     resizeObserver.unobserve(chartRef.current);\n      //   }\n      //   resizeObserver.disconnect();\n    };\n  }, [chartSettings, onContextMenu]);\n\n  useEffect(() => {\n    if (chartRef.current) {\n      // Re-render chart when option changes\n      const chart = getInstanceByDom(chartRef.current);\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      chart?.setOption(option, optionSettings);\n    }\n  }, [option, optionSettings]);\n\n  return <div {...htmlAttributes} ref={chartRef} style={style} />;\n};\n"],"names":["useWindow","useComponentCssInjection","echartCss","useRef","useChartOptions","useChartContextMenu","useEffect","init","getInstanceByDom"],"mappings":";;;;;;;;;;;AA4BO,MAAM,QAAQ,CAAC;AAAA,EACpB,kBAAA;AAAA,EACA,aAAgB,GAAA,EAAE,gBAAkB,EAAA,IAAA,EAAM,UAAU,KAAM,EAAA;AAAA;AAAA,EAC1D,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,cAAA,GAAiB,EAAE,QAAA,EAAU,IAAK,EAAA;AAAA;AAAA,EAClC,OAAA;AAAA,EACA,KAAQ,GAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,QAAQ,MAAO,EAAA;AAAA,EACxC,iBAAA;AAAA,EACA,GAAG;AACL,CAAkB,KAAA;AAChB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,QAAA,GAAWC,aAAuB,IAAI,CAAA;AAE5C,EAAA,MAAM,SAASC,+BAAgB,CAAA;AAAA,IAC7B,kBAAA;AAAA,IACA,iBAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,aAAgB,GAAAC,uCAAA,CAAoB,EAAE,kBAAA,EAAoB,CAAA;AAchE,EAAAC,eAAA,CAAU,MAAM;AAEd,IAAA,MAAM,KAAQ,GAAAC,YAAA,CAAK,QAAS,CAAA,OAAA,EAAS,MAAM,aAAa,CAAA;AAExD,IAAM,KAAA,CAAA,EAAA,CAAG,eAAe,aAAa,CAAA;AAUrC,IAAA,OAAO,MAAM;AACX,MAAA,KAAA,EAAO,OAAQ,EAAA;AAAA,KAMjB;AAAA,GACC,EAAA,CAAC,aAAe,EAAA,aAAa,CAAC,CAAA;AAEjC,EAAAD,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAS,OAAS,EAAA;AAEpB,MAAM,MAAA,KAAA,GAAQE,wBAAiB,CAAA,QAAA,CAAS,OAAO,CAAA;AAG/C,MAAO,KAAA,EAAA,SAAA,CAAU,QAAQ,cAAc,CAAA;AAAA;AACzC,GACC,EAAA,CAAC,MAAQ,EAAA,cAAc,CAAC,CAAA;AAE3B,EAAA,sCAAQ,KAAK,EAAA,EAAA,GAAG,cAAgB,EAAA,GAAA,EAAK,UAAU,KAAc,EAAA,CAAA;AAC/D;;;;"}

package/cjs/ChartSeries.js

@@ -12,12 +12,13 @@ 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, _dataSource, _categoryCount, _dates, _series, _seriesColumns;
+var _categoryColumn, _columnMap, _itemColorFunction, _dataSource, _categoryCount, _dates, _series, _seriesColumns;
+const defaultItemColorFunction = ({ color }) => color;
 const { KEY } = vuuUtils.metadataKeys;
 function DataSourceValue(key, row, value) {
   return { key, row, value };
 }
-function getCategoriesAndSeries(columnMap, data, categoryColumn, seriesColumns) {
+function getCategoriesAndSeries(columnMap, data, categoryColumn, seriesColumns, itemColorFunction = defaultItemColorFunction) {
   const categoryValues = [];
   const seriesMap = /* @__PURE__ */ new Map();
   data.forEach((row) => {
@@ -32,7 +33,14 @@ function getCategoriesAndSeries(columnMap, data, categoryColumn, seriesColumns)
           name: seriesColumn,
           label: seriesColumn,
           data: [],
-          type: "line"
+          type: "line",
+          itemStyle: {
+            color: itemColorFunction
+          },
+          lineStyle: {
+            width: 1.5
+          },
+          symbol: "circle"
         };
         seriesMap.set(seriesColumn, series);
       }
@@ -44,10 +52,16 @@ function getCategoriesAndSeries(columnMap, data, categoryColumn, seriesColumns)
   return [categoryValues, Array.from(seriesMap.values())];
 }
 class ChartSeries extends vuuUtils.EventEmitter {
-  constructor({ category, dataSource, series }) {
+  constructor({
+    category,
+    dataSource,
+    itemColorFunction,
+    series
+  }) {
     super();
     __privateAdd(this, _categoryColumn);
     __privateAdd(this, _columnMap, {});
+    __privateAdd(this, _itemColorFunction);
     __privateAdd(this, _dataSource);
     __privateAdd(this, _categoryCount, 0);
     __privateAdd(this, _dates, []);
@@ -64,7 +78,8 @@ class ChartSeries extends vuuUtils.EventEmitter {
             __privateGet(this, _columnMap),
             message.rows,
             __privateGet(this, _categoryColumn),
-            __privateGet(this, _seriesColumns)
+            __privateGet(this, _seriesColumns),
+            __privateGet(this, _itemColorFunction)
           );
           __privateSet(this, _dates, dates);
           __privateSet(this, _series, series);
@@ -75,6 +90,7 @@ class ChartSeries extends vuuUtils.EventEmitter {
     });
     __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);
   }
@@ -87,6 +103,7 @@ class ChartSeries extends vuuUtils.EventEmitter {
 }
 _categoryColumn = new WeakMap();
 _columnMap = new WeakMap();
+_itemColorFunction = new WeakMap();
 _dataSource = new WeakMap();
 _categoryCount = new WeakMap();
 _dates = 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  type: \"line\";\n};\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): [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        };\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   * 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  #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        );\n        this.#dates = dates;\n        this.#series = series;\n      }\n    } else {\n      console.warn(JSON.stringify(message));\n    }\n  };\n\n  constructor({ category, dataSource, series }: ChartSeriesConstructorProps) {\n    super();\n    this.#categoryColumn = category;\n    this.#dataSource = dataSource;\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\";\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      }\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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"}

package/cjs/useChartOptions.js

@@ -3,23 +3,35 @@
 var react = require('react');
 var ChartSeries = require('./ChartSeries.js');
 
+const defaultPalette = [
+  "#4676bf",
+  "#ab6528",
+  "#9f55c2",
+  "#2a8285",
+  "#697694",
+  "#B0549d"
+];
 const useChartOptions = ({
   categoryColumnName,
   dataSource,
+  itemColorFunction,
+  palette = defaultPalette,
   seriesColumnNames
 }) => {
   const [, forceRender] = react.useState({});
   const chartSeries = react.useMemo(() => {
     const cs = new ChartSeries.ChartSeries({
       category: categoryColumnName,
+      itemColorFunction,
       series: seriesColumnNames,
       dataSource
     });
     cs.on("update", () => forceRender({}));
     return cs;
-  }, [categoryColumnName, dataSource, seriesColumnNames]);
+  }, [categoryColumnName, dataSource, itemColorFunction, seriesColumnNames]);
   return {
     animation: false,
+    color: palette,
     dataZoom: [
       {
         type: "slider",

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 } from \"./ChartSeries\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface ChartOptionsProps {\n  categoryColumnName: string;\n  dataSource: DataSource;\n  seriesColumnNames: string[];\n}\n\nexport const useChartOptions = ({\n  categoryColumnName,\n  dataSource,\n  seriesColumnNames,\n}: ChartOptionsProps) => {\n  const [, forceRender] = useState({});\n\n  const chartSeries = useMemo(() => {\n    const cs = new ChartSeries({\n      category: categoryColumnName,\n      series: seriesColumnNames,\n      dataSource,\n    });\n    cs.on(\"update\", () => forceRender({}));\n    return cs;\n  }, [categoryColumnName, dataSource, seriesColumnNames]);\n\n  return {\n    animation: false,\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":";;;;;AAWO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,kBAAA;AAAA,EACA,UAAA;AAAA,EACA;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,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,GACN,EAAA,CAAC,kBAAoB,EAAA,UAAA,EAAY,iBAAiB,CAAC,CAAA;AAEtD,EAAO,OAAA;AAAA,IACL,SAAW,EAAA,KAAA;AAAA,IACX,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\";\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;;;;"}

package/esm/Chart.js

@@ -9,13 +9,14 @@ import echartCss from './Chart.css.js';
 
 const Chart = ({
   categoryColumnName,
-  chartSettings = { useCoarsePointer: true },
+  chartSettings = { useCoarsePointer: true, renderer: "svg" },
   // enables clicking near a line and still highlighting it
   dataSource,
+  itemColorFunction,
   optionSettings = { notMerge: true },
   // don't merge two options together when updating option
+  palette,
   style = { width: "100%", height: "100%" },
-  events = {},
   seriesColumnNames,
   ...htmlAttributes
 }) => {
@@ -28,6 +29,8 @@ const Chart = ({
   const chartRef = useRef(null);
   const option = useChartOptions({
     categoryColumnName,
+    itemColorFunction,
+    palette,
     dataSource,
     seriesColumnNames
   });
@@ -38,7 +41,7 @@ const Chart = ({
     return () => {
       chart?.dispose();
     };
-  }, [chartSettings, events, onContextMenu]);
+  }, [chartSettings, onContextMenu]);
   useEffect(() => {
     if (chartRef.current) {
       const chart = getInstanceByDom(chartRef.current);

package/esm/Chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","sources":["../../../packages/vuu-chart/src/Chart.tsx"],"sourcesContent":["import { useRef, useEffect, HTMLAttributes } from \"react\";\nimport { init, getInstanceByDom } from \"echarts\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ChartOptionsProps, useChartOptions } from \"./useChartOptions\";\nimport { useChartContextMenu } from \"./useChartContextMenu\";\n\nimport echartCss from \"./Chart.css\";\n\ntype OptionSettings = {\n  notMerge: boolean;\n};\n\ntype ChartSettings = {\n  useCoarsePointer: boolean;\n};\n\nexport interface ChartProps\n  extends ChartOptionsProps,\n    HTMLAttributes<HTMLDivElement> {\n  chartSettings?: ChartSettings;\n  events?: unknown;\n  optionSettings?: OptionSettings;\n}\n\nexport const Chart = ({\n  categoryColumnName,\n  chartSettings = { useCoarsePointer: true }, // enables clicking near a line and still highlighting it\n  dataSource,\n  optionSettings = { notMerge: true }, // don't merge two options together when updating option\n  style = { width: \"100%\", height: \"100%\" },\n  events = {},\n  seriesColumnNames,\n  ...htmlAttributes\n}: ChartProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toast-notification\",\n    css: echartCss,\n    window: targetWindow,\n  });\n\n  const chartRef = useRef<HTMLDivElement>(null);\n\n  const option = useChartOptions({\n    categoryColumnName,\n    dataSource,\n    seriesColumnNames,\n  });\n\n  const onContextMenu = useChartContextMenu({ categoryColumnName });\n\n  // Debounce resize event so it only fires periodically instead of constantly\n  //   const resizeChart = useMemo(\n  //     () =>\n  //       debounce(() => {\n  //         if (chartRef.current) {\n  //           const chart = getInstanceByDom(chartRef.current);\n  //           chart.resize();\n  //         }\n  //       }, 100),\n  //     [],\n  //   );\n\n  useEffect(() => {\n    // Initialize chart\n    const chart = init(chartRef.current, null, chartSettings);\n\n    chart.on(\"contextmenu\", onContextMenu);\n\n    // Set up event listeners\n    // for (const [key, handler] of Object.entries(events)) {\n    //   console.log(`register ${key} handler`);\n    //   chart.on(key, (param) => {\n    //     handler(param);\n    //   });\n    // }\n\n    // Resize event listener\n    // const resizeObserver = new ResizeObserver(() => {\n    //   resizeChart();\n    // });\n\n    // resizeObserver.observe(chartRef.current);\n\n    // Return cleanup function\n    return () => {\n      chart?.dispose();\n\n      //   if (chartRef.current) {\n      //     resizeObserver.unobserve(chartRef.current);\n      //   }\n      //   resizeObserver.disconnect();\n    };\n  }, [chartSettings, events, onContextMenu]);\n\n  useEffect(() => {\n    if (chartRef.current) {\n      // Re-render chart when option changes\n      const chart = getInstanceByDom(chartRef.current);\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      chart?.setOption(option, optionSettings);\n    }\n  }, [option, optionSettings]);\n\n  return <div {...htmlAttributes} ref={chartRef} style={style} />;\n};\n"],"names":[],"mappings":";;;;;;;;;AAyBO,MAAM,QAAQ,CAAC;AAAA,EACpB,kBAAA;AAAA,EACA,aAAA,GAAgB,EAAE,gBAAA,EAAkB,IAAK,EAAA;AAAA;AAAA,EACzC,UAAA;AAAA,EACA,cAAA,GAAiB,EAAE,QAAA,EAAU,IAAK,EAAA;AAAA;AAAA,EAClC,KAAQ,GAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,QAAQ,MAAO,EAAA;AAAA,EACxC,SAAS,EAAC;AAAA,EACV,iBAAA;AAAA,EACA,GAAG;AACL,CAAkB,KAAA;AAChB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,SAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA;AAE5C,EAAA,MAAM,SAAS,eAAgB,CAAA;AAAA,IAC7B,kBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,aAAgB,GAAA,mBAAA,CAAoB,EAAE,kBAAA,EAAoB,CAAA;AAchE,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,QAAS,CAAA,OAAA,EAAS,MAAM,aAAa,CAAA;AAExD,IAAM,KAAA,CAAA,EAAA,CAAG,eAAe,aAAa,CAAA;AAkBrC,IAAA,OAAO,MAAM;AACX,MAAA,KAAA,EAAO,OAAQ,EAAA;AAAA,KAMjB;AAAA,GACC,EAAA,CAAC,aAAe,EAAA,MAAA,EAAQ,aAAa,CAAC,CAAA;AAEzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAS,OAAS,EAAA;AAEpB,MAAM,MAAA,KAAA,GAAQ,gBAAiB,CAAA,QAAA,CAAS,OAAO,CAAA;AAG/C,MAAO,KAAA,EAAA,SAAA,CAAU,QAAQ,cAAc,CAAA;AAAA;AACzC,GACC,EAAA,CAAC,MAAQ,EAAA,cAAc,CAAC,CAAA;AAE3B,EAAA,2BAAQ,KAAK,EAAA,EAAA,GAAG,cAAgB,EAAA,GAAA,EAAK,UAAU,KAAc,EAAA,CAAA;AAC/D;;;;"}
+{"version":3,"file":"Chart.js","sources":["../../../packages/vuu-chart/src/Chart.tsx"],"sourcesContent":["import { useRef, useEffect, HTMLAttributes } from \"react\";\nimport { init, getInstanceByDom } from \"echarts\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ChartOptionsProps, useChartOptions } from \"./useChartOptions\";\nimport { useChartContextMenu } from \"./useChartContextMenu\";\n\nimport echartCss from \"./Chart.css\";\nimport { ItemColorFunction } from \"./ChartSeries\";\n\ntype OptionSettings = {\n  notMerge: boolean;\n};\n\ntype ChartSettings = {\n  renderer: \"svg\" | \"canvas\";\n  useCoarsePointer: boolean;\n};\n\nexport interface ChartProps\n  extends ChartOptionsProps,\n    HTMLAttributes<HTMLDivElement> {\n  chartSettings?: ChartSettings;\n  itemColorFunction?: ItemColorFunction;\n  optionSettings?: OptionSettings;\n  palette?: string[];\n}\n\nexport const Chart = ({\n  categoryColumnName,\n  chartSettings = { useCoarsePointer: true, renderer: \"svg\" }, // enables clicking near a line and still highlighting it\n  dataSource,\n  itemColorFunction,\n  optionSettings = { notMerge: true }, // don't merge two options together when updating option\n  palette,\n  style = { width: \"100%\", height: \"100%\" },\n  seriesColumnNames,\n  ...htmlAttributes\n}: ChartProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toast-notification\",\n    css: echartCss,\n    window: targetWindow,\n  });\n\n  const chartRef = useRef<HTMLDivElement>(null);\n\n  const option = useChartOptions({\n    categoryColumnName,\n    itemColorFunction,\n    palette,\n    dataSource,\n    seriesColumnNames,\n  });\n\n  const onContextMenu = useChartContextMenu({ categoryColumnName });\n\n  // Debounce resize event so it only fires periodically instead of constantly\n  //   const resizeChart = useMemo(\n  //     () =>\n  //       debounce(() => {\n  //         if (chartRef.current) {\n  //           const chart = getInstanceByDom(chartRef.current);\n  //           chart.resize();\n  //         }\n  //       }, 100),\n  //     [],\n  //   );\n\n  useEffect(() => {\n    // Initialize chart\n    const chart = init(chartRef.current, null, chartSettings);\n\n    chart.on(\"contextmenu\", onContextMenu);\n\n    // Resize event listener\n    // const resizeObserver = new ResizeObserver(() => {\n    //   resizeChart();\n    // });\n\n    // resizeObserver.observe(chartRef.current);\n\n    // Return cleanup function\n    return () => {\n      chart?.dispose();\n\n      //   if (chartRef.current) {\n      //     resizeObserver.unobserve(chartRef.current);\n      //   }\n      //   resizeObserver.disconnect();\n    };\n  }, [chartSettings, onContextMenu]);\n\n  useEffect(() => {\n    if (chartRef.current) {\n      // Re-render chart when option changes\n      const chart = getInstanceByDom(chartRef.current);\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      chart?.setOption(option, optionSettings);\n    }\n  }, [option, optionSettings]);\n\n  return <div {...htmlAttributes} ref={chartRef} style={style} />;\n};\n"],"names":[],"mappings":";;;;;;;;;AA4BO,MAAM,QAAQ,CAAC;AAAA,EACpB,kBAAA;AAAA,EACA,aAAgB,GAAA,EAAE,gBAAkB,EAAA,IAAA,EAAM,UAAU,KAAM,EAAA;AAAA;AAAA,EAC1D,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,cAAA,GAAiB,EAAE,QAAA,EAAU,IAAK,EAAA;AAAA;AAAA,EAClC,OAAA;AAAA,EACA,KAAQ,GAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,QAAQ,MAAO,EAAA;AAAA,EACxC,iBAAA;AAAA,EACA,GAAG;AACL,CAAkB,KAAA;AAChB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,SAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA;AAE5C,EAAA,MAAM,SAAS,eAAgB,CAAA;AAAA,IAC7B,kBAAA;AAAA,IACA,iBAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,aAAgB,GAAA,mBAAA,CAAoB,EAAE,kBAAA,EAAoB,CAAA;AAchE,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,QAAS,CAAA,OAAA,EAAS,MAAM,aAAa,CAAA;AAExD,IAAM,KAAA,CAAA,EAAA,CAAG,eAAe,aAAa,CAAA;AAUrC,IAAA,OAAO,MAAM;AACX,MAAA,KAAA,EAAO,OAAQ,EAAA;AAAA,KAMjB;AAAA,GACC,EAAA,CAAC,aAAe,EAAA,aAAa,CAAC,CAAA;AAEjC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAS,OAAS,EAAA;AAEpB,MAAM,MAAA,KAAA,GAAQ,gBAAiB,CAAA,QAAA,CAAS,OAAO,CAAA;AAG/C,MAAO,KAAA,EAAA,SAAA,CAAU,QAAQ,cAAc,CAAA;AAAA;AACzC,GACC,EAAA,CAAC,MAAQ,EAAA,cAAc,CAAC,CAAA;AAE3B,EAAA,2BAAQ,KAAK,EAAA,EAAA,GAAG,cAAgB,EAAA,GAAA,EAAK,UAAU,KAAc,EAAA,CAAA;AAC/D;;;;"}

package/esm/ChartSeries.js

@@ -10,12 +10,13 @@ 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, _dataSource, _categoryCount, _dates, _series, _seriesColumns;
+var _categoryColumn, _columnMap, _itemColorFunction, _dataSource, _categoryCount, _dates, _series, _seriesColumns;
+const defaultItemColorFunction = ({ color }) => color;
 const { KEY } = metadataKeys;
 function DataSourceValue(key, row, value) {
   return { key, row, value };
 }
-function getCategoriesAndSeries(columnMap, data, categoryColumn, seriesColumns) {
+function getCategoriesAndSeries(columnMap, data, categoryColumn, seriesColumns, itemColorFunction = defaultItemColorFunction) {
   const categoryValues = [];
   const seriesMap = /* @__PURE__ */ new Map();
   data.forEach((row) => {
@@ -30,7 +31,14 @@ function getCategoriesAndSeries(columnMap, data, categoryColumn, seriesColumns)
           name: seriesColumn,
           label: seriesColumn,
           data: [],
-          type: "line"
+          type: "line",
+          itemStyle: {
+            color: itemColorFunction
+          },
+          lineStyle: {
+            width: 1.5
+          },
+          symbol: "circle"
         };
         seriesMap.set(seriesColumn, series);
       }
@@ -42,10 +50,16 @@ function getCategoriesAndSeries(columnMap, data, categoryColumn, seriesColumns)
   return [categoryValues, Array.from(seriesMap.values())];
 }
 class ChartSeries extends EventEmitter {
-  constructor({ category, dataSource, series }) {
+  constructor({
+    category,
+    dataSource,
+    itemColorFunction,
+    series
+  }) {
     super();
     __privateAdd(this, _categoryColumn);
     __privateAdd(this, _columnMap, {});
+    __privateAdd(this, _itemColorFunction);
     __privateAdd(this, _dataSource);
     __privateAdd(this, _categoryCount, 0);
     __privateAdd(this, _dates, []);
@@ -62,7 +76,8 @@ class ChartSeries extends EventEmitter {
             __privateGet(this, _columnMap),
             message.rows,
             __privateGet(this, _categoryColumn),
-            __privateGet(this, _seriesColumns)
+            __privateGet(this, _seriesColumns),
+            __privateGet(this, _itemColorFunction)
           );
           __privateSet(this, _dates, dates);
           __privateSet(this, _series, series);
@@ -73,6 +88,7 @@ class ChartSeries extends EventEmitter {
     });
     __privateSet(this, _categoryColumn, category);
     __privateSet(this, _dataSource, dataSource);
+    __privateSet(this, _itemColorFunction, itemColorFunction);
     __privateSet(this, _seriesColumns, series);
     dataSource.subscribe({ range: Range(0, 1e3) }, this.handleData);
   }
@@ -85,6 +101,7 @@ class ChartSeries extends EventEmitter {
 }
 _categoryColumn = new WeakMap();
 _columnMap = new WeakMap();
+_itemColorFunction = new WeakMap();
 _dataSource = new WeakMap();
 _categoryCount = new WeakMap();
 _dates = 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  type: \"line\";\n};\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): [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        };\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   * 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  #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        );\n        this.#dates = dates;\n        this.#series = series;\n      }\n    } else {\n      console.warn(JSON.stringify(message));\n    }\n  };\n\n  constructor({ category, dataSource, series }: ChartSeriesConstructorProps) {\n    super();\n    this.#categoryColumn = category;\n    this.#dataSource = dataSource;\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":"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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\";\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      }\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":"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"}

package/esm/useChartOptions.js

@@ -1,23 +1,35 @@
 import { useState, useMemo } from 'react';
 import { ChartSeries } from './ChartSeries.js';
 
+const defaultPalette = [
+  "#4676bf",
+  "#ab6528",
+  "#9f55c2",
+  "#2a8285",
+  "#697694",
+  "#B0549d"
+];
 const useChartOptions = ({
   categoryColumnName,
   dataSource,
+  itemColorFunction,
+  palette = defaultPalette,
   seriesColumnNames
 }) => {
   const [, forceRender] = useState({});
   const chartSeries = useMemo(() => {
     const cs = new ChartSeries({
       category: categoryColumnName,
+      itemColorFunction,
       series: seriesColumnNames,
       dataSource
     });
     cs.on("update", () => forceRender({}));
     return cs;
-  }, [categoryColumnName, dataSource, seriesColumnNames]);
+  }, [categoryColumnName, dataSource, itemColorFunction, seriesColumnNames]);
   return {
     animation: false,
+    color: palette,
     dataZoom: [
       {
         type: "slider",

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 } from \"./ChartSeries\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface ChartOptionsProps {\n  categoryColumnName: string;\n  dataSource: DataSource;\n  seriesColumnNames: string[];\n}\n\nexport const useChartOptions = ({\n  categoryColumnName,\n  dataSource,\n  seriesColumnNames,\n}: ChartOptionsProps) => {\n  const [, forceRender] = useState({});\n\n  const chartSeries = useMemo(() => {\n    const cs = new ChartSeries({\n      category: categoryColumnName,\n      series: seriesColumnNames,\n      dataSource,\n    });\n    cs.on(\"update\", () => forceRender({}));\n    return cs;\n  }, [categoryColumnName, dataSource, seriesColumnNames]);\n\n  return {\n    animation: false,\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":";;;AAWO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,kBAAA;AAAA,EACA,UAAA;AAAA,EACA;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,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,GACN,EAAA,CAAC,kBAAoB,EAAA,UAAA,EAAY,iBAAiB,CAAC,CAAA;AAEtD,EAAO,OAAA;AAAA,IACL,SAAW,EAAA,KAAA;AAAA,IACX,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\";\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;;;;"}

package/package.json

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

package/types/Chart.d.ts

@@ -1,15 +1,18 @@
 import { HTMLAttributes } from "react";
 import { ChartOptionsProps } from "./useChartOptions";
+import { ItemColorFunction } from "./ChartSeries";
 type OptionSettings = {
     notMerge: boolean;
 };
 type ChartSettings = {
+    renderer: "svg" | "canvas";
     useCoarsePointer: boolean;
 };
 export interface ChartProps extends ChartOptionsProps, HTMLAttributes<HTMLDivElement> {
     chartSettings?: ChartSettings;
-    events?: unknown;
+    itemColorFunction?: ItemColorFunction;
     optionSettings?: OptionSettings;
+    palette?: string[];
 }
-export declare const Chart: ({ categoryColumnName, chartSettings, dataSource, optionSettings, style, events, seriesColumnNames, ...htmlAttributes }: ChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Chart: ({ categoryColumnName, chartSettings, dataSource, itemColorFunction, optionSettings, palette, style, seriesColumnNames, ...htmlAttributes }: ChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/types/ChartSeries.d.ts

@@ -6,8 +6,22 @@ type Series = {
     name: string;
     label: string;
     data: DataSourceValue<number>[];
+    lineStyle: {
+        width: number;
+    };
+    itemStyle: {
+        color: string | ItemColorFunction;
+    };
+    symbol: "emptyCircle" | "circle";
     type: "line";
 };
+export type ItemColorFunction = (params: {
+    color: string;
+    data: DataSourceValue;
+    dataIndex: number;
+    name: string;
+    seriesName: string;
+}) => string;
 export type DataSourceValue<T extends VuuRowDataItemType = number> = {
     key: string;
     readonly row: DataSourceRow;
@@ -23,6 +37,7 @@ export interface ChartSeriesConstructorProps {
      * 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.
@@ -32,7 +47,7 @@ export interface ChartSeriesConstructorProps {
 export declare class ChartSeries extends EventEmitter<ChartEvents> {
     #private;
     handleData: DataSourceSubscribeCallback;
-    constructor({ category, dataSource, series }: ChartSeriesConstructorProps);
+    constructor({ category, dataSource, itemColorFunction, series, }: ChartSeriesConstructorProps);
     get categories(): string[];
     get series(): Series[];
 }

package/types/useChartOptions.d.ts

@@ -1,8 +1,11 @@
 import { type EChartsCoreOption } from "echarts";
+import { ItemColorFunction } from "./ChartSeries";
 import { DataSource } from "@vuu-ui/vuu-data-types";
 export interface ChartOptionsProps {
     categoryColumnName: string;
     dataSource: DataSource;
+    itemColorFunction?: ItemColorFunction;
+    palette?: string[];
     seriesColumnNames: string[];
 }
-export declare const useChartOptions: ({ categoryColumnName, dataSource, seriesColumnNames, }: ChartOptionsProps) => EChartsCoreOption;
+export declare const useChartOptions: ({ categoryColumnName, dataSource, itemColorFunction, palette, seriesColumnNames, }: ChartOptionsProps) => EChartsCoreOption;