@vuu-ui/vuu-chart 3.0.0-beta.3 → 3.1.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/package.json +15 -12
  2. package/src/Chart.css.js +46 -0
  3. package/src/Chart.mjs +81 -0
  4. package/src/ChartSeries.mjs +151 -0
  5. package/src/DataRowMovingWindow.mjs +64 -0
  6. package/src/chart-types.mjs +2 -0
  7. package/src/chartTooltip.mjs +23 -0
  8. package/src/index.mjs +2 -0
  9. package/src/useChartContextMenu.mjs +22 -0
  10. package/src/useChartOptions.mjs +88 -0
  11. package/src/useChartSelection.mjs +47 -0
  12. package/cjs/Chart.css.js +0 -6
  13. package/cjs/Chart.css.js.map +0 -1
  14. package/cjs/Chart.js +0 -89
  15. package/cjs/Chart.js.map +0 -1
  16. package/cjs/ChartSeries.js +0 -183
  17. package/cjs/ChartSeries.js.map +0 -1
  18. package/cjs/DataRowMovingWindow.js +0 -97
  19. package/cjs/DataRowMovingWindow.js.map +0 -1
  20. package/cjs/chart-types.js +0 -6
  21. package/cjs/chart-types.js.map +0 -1
  22. package/cjs/chartTooltip.js +0 -27
  23. package/cjs/chartTooltip.js.map +0 -1
  24. package/cjs/index.js +0 -10
  25. package/cjs/index.js.map +0 -1
  26. package/cjs/useChartContextMenu.js +0 -29
  27. package/cjs/useChartContextMenu.js.map +0 -1
  28. package/cjs/useChartOptions.js +0 -101
  29. package/cjs/useChartOptions.js.map +0 -1
  30. package/cjs/useChartSelection.js +0 -72
  31. package/cjs/useChartSelection.js.map +0 -1
  32. package/esm/Chart.css.js +0 -4
  33. package/esm/Chart.css.js.map +0 -1
  34. package/esm/Chart.js +0 -87
  35. package/esm/Chart.js.map +0 -1
  36. package/esm/ChartSeries.js +0 -181
  37. package/esm/ChartSeries.js.map +0 -1
  38. package/esm/DataRowMovingWindow.js +0 -95
  39. package/esm/DataRowMovingWindow.js.map +0 -1
  40. package/esm/chart-types.js +0 -4
  41. package/esm/chart-types.js.map +0 -1
  42. package/esm/chartTooltip.js +0 -25
  43. package/esm/chartTooltip.js.map +0 -1
  44. package/esm/index.js +0 -3
  45. package/esm/index.js.map +0 -1
  46. package/esm/useChartContextMenu.js +0 -27
  47. package/esm/useChartContextMenu.js.map +0 -1
  48. package/esm/useChartOptions.js +0 -99
  49. package/esm/useChartOptions.js.map +0 -1
  50. package/esm/useChartSelection.js +0 -70
  51. package/esm/useChartSelection.js.map +0 -1
package/cjs/Chart.js DELETED
@@ -1,89 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var styles = require('@salt-ds/styles');
5
- var window = require('@salt-ds/window');
6
- var cx = require('clsx');
7
- var echarts = require('echarts');
8
- var react = require('react');
9
- var useChartContextMenu = require('./useChartContextMenu.js');
10
- var useChartOptions = require('./useChartOptions.js');
11
- var useChartSelection = require('./useChartSelection.js');
12
- var vuuUtils = require('@vuu-ui/vuu-utils');
13
- var Chart$1 = require('./Chart.css.js');
14
-
15
- const classBase = "vuuChart";
16
- const Chart = ({
17
- categoryColumnName,
18
- chartSettings = { useCoarsePointer: true, renderer: "svg" },
19
- className,
20
- config,
21
- dataExclusions,
22
- dataSource,
23
- optionSettings = { notMerge: true },
24
- // don't merge two options together when updating option
25
- palette,
26
- showTooltip,
27
- style = { width: "100%", height: "100%" },
28
- seriesColumnNames,
29
- ...htmlAttributes
30
- }) => {
31
- const targetWindow = window.useWindow();
32
- styles.useComponentCssInjection({
33
- testId: "vuu-toast-notification",
34
- css: Chart$1,
35
- window: targetWindow
36
- });
37
- const chartRef = react.useRef(null);
38
- const columnMap = vuuUtils.buildColumnMap(dataSource.columns);
39
- const onContextMenu = useChartContextMenu.useChartContextMenu({ categoryColumnName, columnMap });
40
- const {
41
- itemColorFunction,
42
- onClick,
43
- onMouseOut,
44
- onMouseOver,
45
- symbolSizeFunction
46
- } = useChartSelection.useChartSelection({
47
- categoryColumnName,
48
- selectionModel: config?.selectionModel
49
- });
50
- const option = useChartOptions.useChartOptions({
51
- categoryColumnName,
52
- config,
53
- itemColorFunction,
54
- palette,
55
- dataExclusions,
56
- dataSource,
57
- seriesColumnNames,
58
- symbolSizeFunction,
59
- showTooltip
60
- });
61
- react.useEffect(() => {
62
- const chart = echarts.init(chartRef.current, null, chartSettings);
63
- chart.on("contextmenu", onContextMenu);
64
- chart.on("click", onClick);
65
- chart.on("mouseover", onMouseOver);
66
- chart.on("mouseout", onMouseOut);
67
- return () => {
68
- chart?.dispose();
69
- };
70
- }, [chartSettings, onClick, onContextMenu, onMouseOver, onMouseOut]);
71
- react.useEffect(() => {
72
- if (chartRef.current) {
73
- const chart = echarts.getInstanceByDom(chartRef.current);
74
- chart?.setOption(option, optionSettings);
75
- }
76
- }, [option, optionSettings]);
77
- return /* @__PURE__ */ jsxRuntime.jsx(
78
- "div",
79
- {
80
- ...htmlAttributes,
81
- className: cx(classBase, className),
82
- ref: chartRef,
83
- style
84
- }
85
- );
86
- };
87
-
88
- exports.Chart = Chart;
89
- //# sourceMappingURL=Chart.js.map
package/cjs/Chart.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Chart.js","sources":["../../../packages/vuu-chart/src/Chart.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { getInstanceByDom, init } from \"echarts\";\nimport { HTMLAttributes, useEffect, useRef } from \"react\";\nimport { useChartContextMenu } from \"./useChartContextMenu\";\nimport { ChartOptionsProps, useChartOptions } from \"./useChartOptions\";\nimport { useChartSelection } from \"./useChartSelection\";\nimport { buildColumnMap } from \"@vuu-ui/vuu-utils\";\n\nimport chartCss from \"./Chart.css\";\n\nconst classBase = \"vuuChart\";\n\ntype OptionSettings = {\n notMerge: boolean;\n};\n\ntype ChartSettings = {\n /**\n * Default value will be svg\n */\n renderer: \"svg\" | \"canvas\";\n /**\n * Enlarges 'click zone' around interactive elements.\n * Default value true;\n */\n useCoarsePointer: boolean;\n};\n\nexport interface ChartProps\n extends ChartOptionsProps,\n HTMLAttributes<HTMLDivElement> {\n chartSettings?: Partial<ChartSettings>;\n optionSettings?: OptionSettings;\n /**\n * An array of color values that will be assigned, in the order given\n * to rendered series.\n */\n palette?: string[];\n showTooltip?: boolean;\n}\n\nexport const Chart = ({\n categoryColumnName,\n chartSettings = { useCoarsePointer: true, renderer: \"svg\" },\n className,\n config,\n dataExclusions,\n dataSource,\n optionSettings = { notMerge: true }, // don't merge two options together when updating option\n palette,\n showTooltip,\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: chartCss,\n window: targetWindow,\n });\n\n const chartRef = useRef<HTMLDivElement>(null);\n\n const columnMap = buildColumnMap(dataSource.columns);\n\n const onContextMenu = useChartContextMenu({ categoryColumnName, columnMap });\n const {\n itemColorFunction,\n onClick,\n onMouseOut,\n onMouseOver,\n symbolSizeFunction,\n } = useChartSelection({\n categoryColumnName,\n selectionModel: config?.selectionModel,\n });\n\n const option = useChartOptions({\n categoryColumnName,\n config,\n itemColorFunction,\n palette,\n dataExclusions,\n dataSource,\n seriesColumnNames,\n symbolSizeFunction,\n showTooltip,\n });\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 chart.on(\"click\", onClick);\n chart.on(\"mouseover\", onMouseOver);\n chart.on(\"mouseout\", onMouseOut);\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, onClick, onContextMenu, onMouseOver, onMouseOut]);\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 (\n <div\n {...htmlAttributes}\n className={cx(classBase, className)}\n ref={chartRef}\n style={style}\n />\n );\n};\n"],"names":["useWindow","useComponentCssInjection","chartCss","useRef","buildColumnMap","useChartContextMenu","useChartSelection","useChartOptions","useEffect","init","getInstanceByDom","jsx"],"mappings":";;;;;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,UAAA;AA+BX,MAAM,QAAQ,CAAC;AAAA,EACpB,kBAAA;AAAA,EACA,aAAgB,GAAA,EAAE,gBAAkB,EAAA,IAAA,EAAM,UAAU,KAAM,EAAA;AAAA,EAC1D,SAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA,GAAiB,EAAE,QAAA,EAAU,IAAK,EAAA;AAAA;AAAA,EAClC,OAAA;AAAA,EACA,WAAA;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,EAAM,MAAA,SAAA,GAAYC,uBAAe,CAAA,UAAA,CAAW,OAAO,CAAA;AAEnD,EAAA,MAAM,aAAgB,GAAAC,uCAAA,CAAoB,EAAE,kBAAA,EAAoB,WAAW,CAAA;AAC3E,EAAM,MAAA;AAAA,IACJ,iBAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,MACEC,mCAAkB,CAAA;AAAA,IACpB,kBAAA;AAAA,IACA,gBAAgB,MAAQ,EAAA;AAAA,GACzB,CAAA;AAED,EAAA,MAAM,SAASC,+BAAgB,CAAA;AAAA,IAC7B,kBAAA;AAAA,IACA,MAAA;AAAA,IACA,iBAAA;AAAA,IACA,OAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,iBAAA;AAAA,IACA,kBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAcD,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;AACrC,IAAM,KAAA,CAAA,EAAA,CAAG,SAAS,OAAO,CAAA;AACzB,IAAM,KAAA,CAAA,EAAA,CAAG,aAAa,WAAW,CAAA;AACjC,IAAM,KAAA,CAAA,EAAA,CAAG,YAAY,UAAU,CAAA;AAU/B,IAAA,OAAO,MAAM;AACX,MAAA,KAAA,EAAO,OAAQ,EAAA;AAAA,KAMjB;AAAA,KACC,CAAC,aAAA,EAAe,SAAS,aAAe,EAAA,WAAA,EAAa,UAAU,CAAC,CAAA;AAEnE,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,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,QAAA;AAAA,MACL;AAAA;AAAA,GACF;AAEJ;;;;"}
@@ -1,183 +0,0 @@
1
- 'use strict';
2
-
3
- var vuuUtils = require('@vuu-ui/vuu-utils');
4
- var DataRowMovingWindow = require('./DataRowMovingWindow.js');
5
- var chartTypes = require('./chart-types.js');
6
-
7
- var __defProp = Object.defineProperty;
8
- var __typeError = (msg) => {
9
- throw TypeError(msg);
10
- };
11
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
12
- var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
13
- var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
14
- var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
15
- 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);
16
- var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
17
- var _categoryColumn, _colorMap, _columnMap, _config, _dataExclusions, _dataWindow, _dates, _palette, _series, _seriesColumns;
18
- const { KEY } = vuuUtils.metadataKeys;
19
- function DataSourceValue(key, row, value) {
20
- return { key, row, value };
21
- }
22
- class ChartSeries extends vuuUtils.EventEmitter {
23
- constructor({
24
- config,
25
- dataExclusions,
26
- dataSource,
27
- palette
28
- }) {
29
- super();
30
- __privateAdd(this, _categoryColumn, "");
31
- __privateAdd(this, _colorMap, /* @__PURE__ */ new Map());
32
- __privateAdd(this, _columnMap, {});
33
- __privateAdd(this, _config);
34
- __privateAdd(this, _dataExclusions);
35
- __privateAdd(this, _dataWindow, new DataRowMovingWindow.MovingDataRowWindow(vuuUtils.Range(0, 1e3)));
36
- __privateAdd(this, _dates, []);
37
- __privateAdd(this, _palette);
38
- __privateAdd(this, _series, []);
39
- __privateAdd(this, _seriesColumns, []);
40
- __publicField(this, "handleData", (message) => {
41
- if (message.type === "subscribed") {
42
- __privateSet(this, _columnMap, vuuUtils.buildColumnMap(message.tableSchema.columns));
43
- } else if (message.type === "viewport-update") {
44
- if (message.mode === "size-only") ; else if (message.rows) {
45
- for (const row of message.rows) {
46
- __privateGet(this, _dataWindow).add(row);
47
- }
48
- this.buildCategoriesAndSeries();
49
- }
50
- } else {
51
- console.warn(JSON.stringify(message));
52
- }
53
- });
54
- __privateSet(this, _config, config);
55
- __privateSet(this, _dataExclusions, dataExclusions);
56
- __privateSet(this, _palette, palette);
57
- dataSource.subscribe({ range: vuuUtils.Range(0, 1e3) }, this.handleData);
58
- }
59
- buildCategoriesAndSeries() {
60
- if (__privateGet(this, _categoryColumn) && __privateGet(this, _seriesColumns).length > 0) {
61
- const [dates, series] = this.getCategoriesAndSeries();
62
- __privateSet(this, _dates, dates);
63
- __privateSet(this, _series, series);
64
- this.emit("update");
65
- }
66
- }
67
- get palette() {
68
- return __privateGet(this, _seriesColumns).map((col) => __privateGet(this, _colorMap).get(col));
69
- }
70
- get categoryColumn() {
71
- return __privateGet(this, _categoryColumn);
72
- }
73
- set categoryColumn(categoryColumn) {
74
- __privateSet(this, _categoryColumn, categoryColumn);
75
- if (__privateGet(this, _seriesColumns).length > 0) {
76
- this.buildCategoriesAndSeries();
77
- }
78
- }
79
- get seriesColumnNames() {
80
- return __privateGet(this, _seriesColumns);
81
- }
82
- set seriesColumnNames(seriesColumnNames) {
83
- __privateSet(this, _seriesColumns, seriesColumnNames);
84
- if (__privateGet(this, _categoryColumn)) {
85
- this.buildCategoriesAndSeries();
86
- }
87
- }
88
- get categories() {
89
- return __privateGet(this, _dates);
90
- }
91
- get series() {
92
- return __privateGet(this, _series);
93
- }
94
- getCategoriesAndSeries() {
95
- const colorMap = __privateGet(this, _colorMap);
96
- const columnMap = __privateGet(this, _columnMap);
97
- const data = __privateGet(this, _dataWindow).data;
98
- const categoryColumn = __privateGet(this, _categoryColumn);
99
- const seriesColumns = __privateGet(this, _seriesColumns);
100
- const config = __privateGet(this, _config);
101
- const categoryValues = [];
102
- const seriesMap = /* @__PURE__ */ new Map();
103
- const { itemColorFunction = chartTypes.defaultItemColorFunction, symbolSize = 6 } = config;
104
- data.forEach((row) => {
105
- const categoryValue = row[columnMap[categoryColumn]];
106
- categoryValues.push(categoryValue);
107
- for (const seriesColumn of seriesColumns) {
108
- let lineSeries;
109
- let scatterSeries = void 0;
110
- const seriesTuple = seriesMap.get(seriesColumn);
111
- if (seriesTuple) {
112
- [lineSeries, scatterSeries] = seriesTuple;
113
- } else {
114
- if (!colorMap.has(seriesColumn)) {
115
- colorMap.set(seriesColumn, __privateGet(this, _palette)[__privateGet(this, _colorMap).size]);
116
- }
117
- lineSeries = {
118
- //any reason we can't simply use col name here ?
119
- id: seriesColumn,
120
- name: seriesColumn,
121
- label: seriesColumn,
122
- connectNulls: true,
123
- data: [],
124
- type: "line",
125
- itemStyle: {
126
- color: itemColorFunction
127
- },
128
- lineStyle: {
129
- width: 1.5
130
- },
131
- symbol: "circle",
132
- symbolSize
133
- };
134
- if (__privateGet(this, _dataExclusions)) {
135
- const { symbol } = __privateGet(this, _dataExclusions);
136
- scatterSeries = {
137
- id: `${seriesColumn}-excluded`,
138
- data: [],
139
- itemStyle: {
140
- borderColor: "#FDC82F",
141
- color: "#101820",
142
- borderWidth: 2
143
- },
144
- label: "",
145
- name: seriesColumn,
146
- symbol,
147
- symbolSize: 20,
148
- type: "scatter"
149
- };
150
- }
151
- if (scatterSeries) {
152
- seriesMap.set(seriesColumn, [lineSeries, scatterSeries]);
153
- } else {
154
- seriesMap.set(seriesColumn, [lineSeries]);
155
- }
156
- }
157
- const key = row[KEY];
158
- const value = row[columnMap[seriesColumn]];
159
- if (__privateGet(this, _dataExclusions)?.isExcludedData(row, columnMap, seriesColumn)) {
160
- lineSeries.data.push(DataSourceValue(key, row, null));
161
- scatterSeries?.data.push(DataSourceValue(key, row, value));
162
- } else {
163
- lineSeries.data.push(DataSourceValue(key, row, value));
164
- scatterSeries?.data.push(DataSourceValue(key, row, null));
165
- }
166
- }
167
- });
168
- return [categoryValues, Array.from(seriesMap.values()).flat()];
169
- }
170
- }
171
- _categoryColumn = new WeakMap();
172
- _colorMap = new WeakMap();
173
- _columnMap = new WeakMap();
174
- _config = new WeakMap();
175
- _dataExclusions = new WeakMap();
176
- _dataWindow = new WeakMap();
177
- _dates = new WeakMap();
178
- _palette = new WeakMap();
179
- _series = new WeakMap();
180
- _seriesColumns = new WeakMap();
181
-
182
- exports.ChartSeries = ChartSeries;
183
- //# sourceMappingURL=ChartSeries.js.map
@@ -1 +0,0 @@
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 {\n buildColumnMap,\n ColumnMap,\n EventEmitter,\n metadataKeys,\n Range,\n} from \"@vuu-ui/vuu-utils\";\nimport { MovingDataRowWindow } from \"./DataRowMovingWindow\";\nimport {\n defaultItemColorFunction,\n LineSeries,\n ScatterSeries,\n Series,\n} from \"./chart-types\";\nimport { ChartConfig, DataExclusionOptions } from \"./useChartOptions\";\n\nconst { KEY } = metadataKeys;\n\nexport type DataSourceValue = {\n key: string;\n readonly row: DataSourceRow;\n value: number | null;\n};\n\nfunction DataSourceValue(\n key: string,\n row: DataSourceRow,\n value: number | null,\n): DataSourceValue {\n return { key, row, value };\n}\n\nexport type ChartEvents = {\n update: () => void;\n};\nexport interface ChartSeriesConstructorProps {\n dataExclusions?: DataExclusionOptions;\n dataSource: DataSource;\n config: ChartConfig;\n palette: string[];\n}\n\nexport class ChartSeries extends EventEmitter<ChartEvents> {\n #categoryColumn = \"\";\n #colorMap = new Map<string, string>();\n #columnMap: ColumnMap = {};\n #config: ChartConfig;\n #dataExclusions: DataExclusionOptions | undefined;\n #dataWindow = new MovingDataRowWindow(Range(0, 1000));\n\n #dates: string[] = [];\n #palette: 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] = this.getCategoriesAndSeries();\n this.#dates = dates;\n this.#series = series;\n\n this.emit(\"update\");\n }\n }\n\n constructor({\n config,\n dataExclusions,\n dataSource,\n palette,\n }: ChartSeriesConstructorProps) {\n super();\n this.#config = config;\n this.#dataExclusions = dataExclusions;\n this.#palette = palette;\n dataSource.subscribe({ range: Range(0, 1000) }, this.handleData);\n }\n\n get palette() {\n return this.#seriesColumns.map((col) => this.#colorMap.get(col));\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 private getCategoriesAndSeries(): [string[], Series[]] {\n const colorMap = this.#colorMap;\n const columnMap = this.#columnMap;\n const data = this.#dataWindow.data;\n const categoryColumn = this.#categoryColumn;\n const seriesColumns = this.#seriesColumns;\n const config = this.#config;\n\n const categoryValues: string[] = [];\n const seriesMap = new Map<\n string,\n [LineSeries, ScatterSeries] | [LineSeries]\n >();\n const { itemColorFunction = defaultItemColorFunction, symbolSize = 6 } =\n config;\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 lineSeries: LineSeries;\n let scatterSeries: ScatterSeries | undefined = undefined;\n\n const seriesTuple = seriesMap.get(seriesColumn);\n if (seriesTuple) {\n [lineSeries, scatterSeries] = seriesTuple;\n } else {\n if (!colorMap.has(seriesColumn)) {\n // Record palette color used for each series so we can preserve the color\n // associations even if some series are hidden by user.\n colorMap.set(seriesColumn, this.#palette[this.#colorMap.size]);\n }\n\n lineSeries = {\n //any reason we can't simply use col name here ?\n id: seriesColumn,\n name: seriesColumn,\n label: seriesColumn,\n connectNulls: true,\n data: [],\n type: \"line\",\n itemStyle: {\n color: itemColorFunction,\n },\n lineStyle: {\n width: 1.5,\n },\n symbol: \"circle\",\n symbolSize,\n };\n\n if (this.#dataExclusions) {\n const { symbol } = this.#dataExclusions;\n scatterSeries = {\n id: `${seriesColumn}-excluded`,\n data: [],\n itemStyle: {\n borderColor: \"#FDC82F\",\n color: \"#101820\",\n borderWidth: 2,\n },\n label: \"\",\n name: seriesColumn,\n symbol,\n symbolSize: 20,\n type: \"scatter\",\n };\n }\n\n if (scatterSeries) {\n seriesMap.set(seriesColumn, [lineSeries, scatterSeries]);\n } else {\n seriesMap.set(seriesColumn, [lineSeries]);\n }\n }\n\n const key = row[KEY] as string;\n const value = row[columnMap[seriesColumn]] as number;\n\n if (\n this.#dataExclusions?.isExcludedData(row, columnMap, seriesColumn)\n ) {\n lineSeries.data.push(DataSourceValue(key, row, null));\n scatterSeries?.data.push(DataSourceValue(key, row, value));\n } else {\n lineSeries.data.push(DataSourceValue(key, row, value));\n scatterSeries?.data.push(DataSourceValue(key, row, null));\n }\n }\n });\n\n return [categoryValues, Array.from(seriesMap.values()).flat()];\n }\n}\n"],"names":["metadataKeys","EventEmitter","MovingDataRowWindow","Range","buildColumnMap","defaultItemColorFunction"],"mappings":"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"}
@@ -1,97 +0,0 @@
1
- 'use strict';
2
-
3
- var vuuUtils = require('@vuu-ui/vuu-utils');
4
-
5
- var __defProp = Object.defineProperty;
6
- var __typeError = (msg) => {
7
- throw TypeError(msg);
8
- };
9
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
10
- var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
11
- var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
12
- var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
13
- 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);
14
- var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
15
- var _range;
16
- const { IDX, KEY } = vuuUtils.metadataKeys;
17
- class MovingDataRowWindow {
18
- constructor({ from, to }) {
19
- __publicField(this, "data");
20
- __publicField(this, "rowCount", 0);
21
- __privateAdd(this, _range);
22
- __publicField(this, "setRowCount", (rowCount) => {
23
- if (rowCount < this.data.length) {
24
- this.data.length = rowCount;
25
- }
26
- this.rowCount = rowCount;
27
- });
28
- __privateSet(this, _range, new vuuUtils.WindowRange(from, to));
29
- this.data = new Array(Math.max(0, to - from));
30
- this.rowCount = 0;
31
- }
32
- add(data) {
33
- const index = data[IDX];
34
- if (this.isWithinRange(index)) {
35
- const internalIndex = index - __privateGet(this, _range).from;
36
- this.data[internalIndex] = data;
37
- }
38
- }
39
- getAtIndex(index) {
40
- return __privateGet(this, _range).isWithin(index) && this.data[index - __privateGet(this, _range).from] != null ? this.data[index - __privateGet(this, _range).from] : void 0;
41
- }
42
- getByKey(key) {
43
- return this.data.find((row) => row[KEY] === key);
44
- }
45
- isWithinRange(index) {
46
- return __privateGet(this, _range).isWithin(index);
47
- }
48
- setRange({ from, to }) {
49
- if (from !== __privateGet(this, _range).from || to !== __privateGet(this, _range).to) {
50
- const [overlapFrom, overlapTo] = __privateGet(this, _range).overlap(from, to);
51
- const newData = new Array(Math.max(0, to - from));
52
- for (let i = overlapFrom; i < overlapTo; i++) {
53
- const data = this.getAtIndex(i);
54
- if (data) {
55
- const index = i - from;
56
- newData[index] = data;
57
- }
58
- }
59
- this.data = newData;
60
- __privateGet(this, _range).from = from;
61
- __privateGet(this, _range).to = to;
62
- }
63
- }
64
- get hasData() {
65
- return this.data.some((d) => d !== void 0);
66
- }
67
- /**
68
- * This will throw if there is no data. Check `hasData` first
69
- * to guard against this, if not certain.
70
- */
71
- get firstRow() {
72
- for (let i = 0; i < this.data.length; i++) {
73
- if (this.data[i]) {
74
- return this.data[i];
75
- }
76
- }
77
- throw Error(`[DataRowMovingWinddow] firstRow, no data`);
78
- }
79
- get range() {
80
- return __privateGet(this, _range);
81
- }
82
- // TODO make this more performant, see implementation in
83
- // array-backed-moving-window - use same implementation
84
- get hasAllRowsWithinRange() {
85
- const { from, to } = __privateGet(this, _range);
86
- for (let i = from; i < to; i++) {
87
- if (this.getAtIndex(i) === void 0) {
88
- return false;
89
- }
90
- }
91
- return true;
92
- }
93
- }
94
- _range = new WeakMap();
95
-
96
- exports.MovingDataRowWindow = MovingDataRowWindow;
97
- //# sourceMappingURL=DataRowMovingWindow.js.map
@@ -1 +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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"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- const defaultItemColorFunction = ({ color }) => color;
4
-
5
- exports.defaultItemColorFunction = defaultItemColorFunction;
6
- //# sourceMappingURL=chart-types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"chart-types.js","sources":["../../../packages/vuu-chart/src/chart-types.ts"],"sourcesContent":["import { DataSourceValue } from \"./ChartSeries\";\n\nexport const defaultItemColorFunction: ItemColorFunction = ({ color }) => color;\n\nexport type EChartsCallbackParams = {\n color: string;\n data: DataSourceValue;\n dataIndex: number;\n name: string;\n /**\n * This is the Vuu column name\n */\n seriesName: string;\n};\n\nexport type SymbolSizeFunction = (\n value: number,\n params: EChartsCallbackParams,\n) => number | [number, number];\nexport type SymbolSize = number | [number, number] | SymbolSizeFunction;\nexport type SymbolType = \"emptyCircle\" | \"circle\" | `path://${string}`;\n\nexport type ItemColorFunction = (params: EChartsCallbackParams) => string;\n\nexport interface SeriesBase {\n data: DataSourceValue[];\n id: string;\n itemStyle?: {\n borderColor?: string;\n color: string | ItemColorFunction;\n borderWidth?: number;\n };\n label: string;\n name: string;\n symbol?: SymbolType;\n symbolSize: SymbolSize;\n}\n\nexport interface LineSeries extends SeriesBase {\n connectNulls?: boolean;\n lineStyle: {\n color?: string;\n width: number;\n };\n type: \"line\";\n}\nexport interface ScatterSeries extends SeriesBase {\n type: \"scatter\";\n}\n\nexport type Series = LineSeries | ScatterSeries;\n\nexport type ChartSelectionModel =\n | \"none\"\n | \"single\"\n | \"single-no-deselect\"\n | \"extended\";\n"],"names":[],"mappings":";;AAEO,MAAM,wBAA8C,GAAA,CAAC,EAAE,KAAA,EAAY,KAAA;;;;"}
@@ -1,27 +0,0 @@
1
- 'use strict';
2
-
3
- const chartTooltip = (params) => {
4
- if (params.length > 0) {
5
- const [{ axisValueLabel }] = params;
6
- const values = [];
7
- for (const { color, seriesName, seriesType, value } of params) {
8
- if (seriesType === "line") {
9
- values.push({ color, value, seriesName });
10
- }
11
- }
12
- const tooltipEntries = values.map(({ color, value, seriesName }) => [
13
- '<div class="vuuChart-tooltip-entry">',
14
- `<span class="vuuChart-tooltip-icon" style="background:${color};"></span>`,
15
- `<span class="vuuChart-tooltip-label">${seriesName}</span>`,
16
- `<span class="vuuChart-tooltip-value">${value ?? "n/a"}</span>`,
17
- "</div>"
18
- ].join(""));
19
- return [
20
- `<div class="vuuChart-tooltip-title">${axisValueLabel}</div>`,
21
- '<div class="vuuChart-tooltip-container">'
22
- ].concat(tooltipEntries).concat("</div>").join("");
23
- }
24
- };
25
-
26
- exports.chartTooltip = chartTooltip;
27
- //# sourceMappingURL=chartTooltip.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"chartTooltip.js","sources":["../../../packages/vuu-chart/src/chartTooltip.ts"],"sourcesContent":["import { DataSourceValue } from \"./ChartSeries\";\n\nexport interface TooltipParams {\n axisValueLabel: string\n color: string;\n componentType: string;\n componentSubType: string;\n data: DataSourceValue;\n seriesName: string;\n seriesType: 'line' | 'scatter';\n value: number;\n}\n\nexport const chartTooltip = (params: TooltipParams[]) => {\n\n if (params.length > 0){\n const [{axisValueLabel}] = params;\n\n const values = [];\n\n for (const {color, seriesName, seriesType, value} of params){\n if (seriesType === 'line'){\n values.push({color, value, seriesName})\n }\n }\n \n const tooltipEntries = values.map(({color, value, seriesName}) => \n ['<div class=\"vuuChart-tooltip-entry\">',\n `<span class=\"vuuChart-tooltip-icon\" style=\"background:${color};\"></span>`,\n `<span class=\"vuuChart-tooltip-label\">${seriesName}</span>`,\n `<span class=\"vuuChart-tooltip-value\">${value ?? 'n/a'}</span>`,\n '</div>'\n ].join(\"\"));\n\n\n return [\n `<div class=\"vuuChart-tooltip-title\">${axisValueLabel}</div>`,\n '<div class=\"vuuChart-tooltip-container\">']\n .concat(tooltipEntries)\n .concat('</div>')\n .join(\"\");\n\n }\n\n}\n"],"names":[],"mappings":";;AAaa,MAAA,YAAA,GAAe,CAAC,MAA4B,KAAA;AAErD,EAAI,IAAA,MAAA,CAAO,SAAS,CAAE,EAAA;AAClB,IAAA,MAAM,CAAC,EAAC,cAAc,EAAC,CAAI,GAAA,MAAA;AAE3B,IAAA,MAAM,SAAS,EAAC;AAEhB,IAAA,KAAA,MAAW,EAAC,KAAO,EAAA,UAAA,EAAY,UAAY,EAAA,KAAA,MAAU,MAAO,EAAA;AACxD,MAAA,IAAI,eAAe,MAAO,EAAA;AACtB,QAAA,MAAA,CAAO,IAAK,CAAA,EAAC,KAAO,EAAA,KAAA,EAAO,YAAW,CAAA;AAAA;AAC1C;AAGJ,IAAM,MAAA,cAAA,GAAiB,OAAO,GAAI,CAAA,CAAC,EAAC,KAAO,EAAA,KAAA,EAAO,YAC1C,KAAA;AAAA,MAAC,sCAAA;AAAA,MACA,yDAAyD,KAAK,CAAA,UAAA,CAAA;AAAA,MAC9D,wCAAwC,UAAU,CAAA,OAAA,CAAA;AAAA,MAClD,CAAA,qCAAA,EAAwC,SAAS,KAAK,CAAA,OAAA,CAAA;AAAA,MACtD;AAAA,KACD,CAAE,IAAK,CAAA,EAAE,CAAC,CAAA;AAGlB,IAAO,OAAA;AAAA,MACH,uCAAuC,cAAc,CAAA,MAAA,CAAA;AAAA,MACrD;AAAA,KAA0C,CACzC,OAAO,cAAc,CAAA,CACrB,OAAO,QAAQ,CAAA,CACf,KAAK,EAAE,CAAA;AAAA;AAIpB;;;;"}
package/cjs/index.js DELETED
@@ -1,10 +0,0 @@
1
- 'use strict';
2
-
3
- var Chart = require('./Chart.js');
4
- var ChartSeries = require('./ChartSeries.js');
5
-
6
-
7
-
8
- exports.Chart = Chart.Chart;
9
- exports.ChartSeries = ChartSeries.ChartSeries;
10
- //# sourceMappingURL=index.js.map
package/cjs/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -1,29 +0,0 @@
1
- 'use strict';
2
-
3
- var vuuContextMenu = require('@vuu-ui/vuu-context-menu');
4
- var react = require('react');
5
-
6
- const useChartContextMenu = ({
7
- columnMap
8
- }) => {
9
- const showContextMenu = vuuContextMenu.useContextMenu();
10
- const onContextMenu = react.useCallback(
11
- ({ data, event, seriesName }) => {
12
- if (event && seriesName) {
13
- event?.stop();
14
- const { row } = data;
15
- const menuOptions = {
16
- column: seriesName,
17
- columnMap,
18
- row
19
- };
20
- showContextMenu(event.event, "series", menuOptions);
21
- }
22
- },
23
- [columnMap, showContextMenu]
24
- );
25
- return onContextMenu;
26
- };
27
-
28
- exports.useChartContextMenu = useChartContextMenu;
29
- //# sourceMappingURL=useChartContextMenu.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useChartContextMenu.js","sources":["../../../packages/vuu-chart/src/useChartContextMenu.ts"],"sourcesContent":["import { useContextMenu } from \"@vuu-ui/vuu-context-menu\";\nimport { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport { useCallback } from \"react\";\nimport { ECElementEvent } from \"echarts\";\nimport { DataSourceValue } from \"./ChartSeries\";\nimport { ColumnMap } from \"@vuu-ui/vuu-utils\";\n\nexport type ChartMenuLocation = \"canvas\" | \"series\";\n\nexport type ChartContextMenuOptions = {\n column: string;\n columnMap: ColumnMap;\n row: DataSourceRow;\n};\n\ninterface ChartContextMenuHookProps {\n allowContextMenu?: boolean;\n categoryColumnName?: string;\n columnMap: ColumnMap;\n}\n\nexport const useChartContextMenu = ({\n columnMap,\n}: ChartContextMenuHookProps) => {\n const showContextMenu = useContextMenu();\n\n const onContextMenu = useCallback(\n ({ data, event, seriesName }: ECElementEvent) => {\n if (event && seriesName) {\n event?.stop();\n\n const { row } = data as DataSourceValue;\n\n const menuOptions: ChartContextMenuOptions = {\n column: seriesName,\n columnMap,\n row,\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n showContextMenu(event.event as any, \"series\", menuOptions);\n }\n },\n [columnMap, showContextMenu],\n );\n\n return onContextMenu;\n};\n"],"names":["useContextMenu","useCallback"],"mappings":";;;;;AAqBO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AACF,CAAiC,KAAA;AAC/B,EAAA,MAAM,kBAAkBA,6BAAe,EAAA;AAEvC,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC,EAAE,IAAM,EAAA,KAAA,EAAO,YAAiC,KAAA;AAC/C,MAAA,IAAI,SAAS,UAAY,EAAA;AACvB,QAAA,KAAA,EAAO,IAAK,EAAA;AAEZ,QAAM,MAAA,EAAE,KAAQ,GAAA,IAAA;AAEhB,QAAA,MAAM,WAAuC,GAAA;AAAA,UAC3C,MAAQ,EAAA,UAAA;AAAA,UACR,SAAA;AAAA,UACA;AAAA,SACF;AAGA,QAAgB,eAAA,CAAA,KAAA,CAAM,KAAc,EAAA,QAAA,EAAU,WAAW,CAAA;AAAA;AAC3D,KACF;AAAA,IACA,CAAC,WAAW,eAAe;AAAA,GAC7B;AAEA,EAAO,OAAA,aAAA;AACT;;;;"}
@@ -1,101 +0,0 @@
1
- 'use strict';
2
-
3
- var vuuUtils = require('@vuu-ui/vuu-utils');
4
- var react = require('react');
5
- var ChartSeries = require('./ChartSeries.js');
6
- var chartTooltip = require('./chartTooltip.js');
7
-
8
- const defaultPalette = [
9
- "#4676bf",
10
- "#ab6528",
11
- "#9f55c2",
12
- "#2a8285",
13
- "#697694",
14
- "#B0549d"
15
- ];
16
- const combineConfig = (config, overrides) => {
17
- return {
18
- ...config,
19
- ...overrides
20
- };
21
- };
22
- const useChartOptions = ({
23
- categoryColumnName,
24
- config,
25
- dataExclusions,
26
- dataSource,
27
- itemColorFunction,
28
- palette = defaultPalette,
29
- seriesColumnNames,
30
- showTooltip = true,
31
- symbolSizeFunction: symbolSize
32
- }) => {
33
- const [, forceRender] = react.useState({});
34
- const chartSeries = react.useMemo(() => {
35
- const cs = new ChartSeries.ChartSeries({
36
- config: combineConfig(config, { itemColorFunction, symbolSize }),
37
- dataExclusions,
38
- dataSource,
39
- palette
40
- });
41
- cs.on("update", () => forceRender({}));
42
- return cs;
43
- }, [dataSource, config]);
44
- react.useMemo(() => {
45
- if (categoryColumnName !== chartSeries.categoryColumn) {
46
- chartSeries.categoryColumn = categoryColumnName;
47
- }
48
- if (vuuUtils.itemsChanged(seriesColumnNames, chartSeries.seriesColumnNames)) {
49
- chartSeries.seriesColumnNames = seriesColumnNames;
50
- }
51
- }, [categoryColumnName, chartSeries, seriesColumnNames]);
52
- return {
53
- animation: false,
54
- color: chartSeries.palette,
55
- dataZoom: [
56
- {
57
- backgroundColor: "var(--vuuChart-zoom-background, transparent)",
58
- borderColor: "var(--vuuChart-zoom-borderColor, white)",
59
- handleStyle: {
60
- color: "var(--vuuChart-zoom-handleColor, white)"
61
- },
62
- moveHandleStyle: {
63
- color: "var(--vuuChart-zoom-slideColor, white)"
64
- },
65
- type: "slider",
66
- start: 0,
67
- end: 100
68
- }
69
- ],
70
- grid: {
71
- left: "0",
72
- bottom: 0,
73
- right: 5
74
- },
75
- series: chartSeries.series,
76
- tooltip: showTooltip ? {
77
- alwaysShowContent: true,
78
- backgroundColor: "",
79
- borderColor: "",
80
- // borderWidth: "",
81
- className: "vuuChartTooltip",
82
- enterable: true,
83
- formatter: chartTooltip.chartTooltip,
84
- // padding: "",
85
- trigger: "axis"
86
- } : void 0,
87
- xAxis: {
88
- data: chartSeries.categories
89
- },
90
- yAxis: {
91
- splitLine: {
92
- lineStyle: {
93
- color: "var(--salt-separable-tertiary-borderColor)"
94
- }
95
- }
96
- }
97
- };
98
- };
99
-
100
- exports.useChartOptions = useChartOptions;
101
- //# sourceMappingURL=useChartOptions.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useChartOptions.js","sources":["../../../packages/vuu-chart/src/useChartOptions.ts"],"sourcesContent":["import { DataSource, DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport { ColumnMap, itemsChanged } from \"@vuu-ui/vuu-utils\";\nimport { type EChartsCoreOption } from \"echarts\";\nimport { useMemo, useState } from \"react\";\nimport type {\n ChartSelectionModel,\n ItemColorFunction,\n SymbolSize,\n SymbolSizeFunction,\n SymbolType,\n} from \"./chart-types\";\nimport { ChartSeries } from \"./ChartSeries\";\nimport { chartTooltip } from \"./chartTooltip\";\n\nconst defaultPalette = [\n \"#4676bf\",\n \"#ab6528\",\n \"#9f55c2\",\n \"#2a8285\",\n \"#697694\",\n \"#B0549d\",\n];\n\nexport interface ChartConfig {\n itemColorFunction?: ItemColorFunction;\n selectionModel?: ChartSelectionModel;\n symbolSize?: SymbolSize;\n}\n\nexport interface DataExclusionOptions {\n isExcludedData: (\n row: DataSourceRow,\n columnMap: ColumnMap,\n column: string,\n ) => boolean;\n /**\n * An embedded SVG path. If provided, will be used to render excluded values.\n */\n symbol?: SymbolType;\n}\n\nexport interface ChartOptionsProps {\n categoryColumnName: string;\n config: ChartConfig;\n dataExclusions?: DataExclusionOptions;\n dataSource: DataSource;\n itemColorFunction?: ItemColorFunction;\n palette?: string[];\n seriesColumnNames: string[];\n showTooltip?: boolean;\n symbolSizeFunction?: SymbolSizeFunction;\n}\n\nconst combineConfig = (config: ChartConfig, overrides: ChartConfig) => {\n return {\n ...config,\n ...overrides,\n };\n};\n\nexport const useChartOptions = ({\n categoryColumnName,\n config,\n dataExclusions,\n dataSource,\n itemColorFunction,\n palette = defaultPalette,\n seriesColumnNames,\n showTooltip = true,\n symbolSizeFunction: symbolSize,\n}: ChartOptionsProps) => {\n const [, forceRender] = useState({});\n\n const chartSeries = useMemo(() => {\n const cs = new ChartSeries({\n config: combineConfig(config, { itemColorFunction, symbolSize }),\n dataExclusions,\n dataSource,\n palette,\n });\n cs.on(\"update\", () => forceRender({}));\n return cs;\n }, [dataSource, config]);\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: chartSeries.palette,\n dataZoom: [\n {\n backgroundColor: \"var(--vuuChart-zoom-background, transparent)\",\n borderColor: \"var(--vuuChart-zoom-borderColor, white)\",\n handleStyle: {\n color: \"var(--vuuChart-zoom-handleColor, white)\",\n },\n moveHandleStyle: {\n color: \"var(--vuuChart-zoom-slideColor, white)\",\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: showTooltip\n ? {\n alwaysShowContent: true,\n backgroundColor: \"\",\n borderColor: \"\",\n // borderWidth: \"\",\n className: \"vuuChartTooltip\",\n enterable: true,\n formatter: chartTooltip,\n // padding: \"\",\n trigger: \"axis\",\n }\n : undefined,\n xAxis: {\n data: chartSeries.categories,\n },\n yAxis: {\n splitLine: {\n lineStyle: {\n color: \"var(--salt-separable-tertiary-borderColor)\",\n },\n },\n },\n } as EChartsCoreOption;\n};\n"],"names":["useState","useMemo","ChartSeries","itemsChanged","chartTooltip"],"mappings":"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"}