@vuu-ui/vuu-chart 2.1.0-alpha.3 → 2.1.0-alpha.5
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.
- package/cjs/Chart.js +1 -1
- package/cjs/Chart.js.map +1 -1
- package/cjs/ChartSeries.js +7 -1
- package/cjs/ChartSeries.js.map +1 -1
- package/cjs/useChartContextMenu.js +7 -5
- package/cjs/useChartContextMenu.js.map +1 -1
- package/esm/Chart.js +1 -1
- package/esm/Chart.js.map +1 -1
- package/esm/ChartSeries.js +8 -2
- package/esm/ChartSeries.js.map +1 -1
- package/esm/useChartContextMenu.js +7 -5
- package/esm/useChartContextMenu.js.map +1 -1
- package/package.json +5 -5
- package/types/ChartSeries.d.ts +8 -2
- package/types/index.d.ts +1 -1
- package/types/useChartContextMenu.d.ts +3 -2
package/cjs/Chart.js
CHANGED
|
@@ -33,7 +33,7 @@ const Chart = ({
|
|
|
33
33
|
dataSource,
|
|
34
34
|
seriesColumnNames
|
|
35
35
|
});
|
|
36
|
-
const onContextMenu = useChartContextMenu.useChartContextMenu({ categoryColumnName
|
|
36
|
+
const onContextMenu = useChartContextMenu.useChartContextMenu({ categoryColumnName });
|
|
37
37
|
react.useEffect(() => {
|
|
38
38
|
const chart = echarts.init(chartRef.current, null, chartSettings);
|
|
39
39
|
chart.on("contextmenu", onContextMenu);
|
package/cjs/Chart.js.map
CHANGED
|
@@ -1 +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
|
|
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;;;;"}
|
package/cjs/ChartSeries.js
CHANGED
|
@@ -13,6 +13,10 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
|
|
|
13
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
14
|
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
|
|
15
15
|
var _categoryColumn, _columnMap, _dataSource, _categoryCount, _dates, _series, _seriesColumns;
|
|
16
|
+
const { KEY } = vuuUtils.metadataKeys;
|
|
17
|
+
function DataSourceValue(key, row, value) {
|
|
18
|
+
return { key, row, value };
|
|
19
|
+
}
|
|
16
20
|
function getCategoriesAndSeries(columnMap, data, categoryColumn, seriesColumns) {
|
|
17
21
|
const categoryValues = [];
|
|
18
22
|
const seriesMap = /* @__PURE__ */ new Map();
|
|
@@ -32,7 +36,9 @@ function getCategoriesAndSeries(columnMap, data, categoryColumn, seriesColumns)
|
|
|
32
36
|
};
|
|
33
37
|
seriesMap.set(seriesColumn, series);
|
|
34
38
|
}
|
|
35
|
-
|
|
39
|
+
const key = row[KEY];
|
|
40
|
+
const value = row[columnMap[seriesColumn]];
|
|
41
|
+
series.data.push(DataSourceValue(key, row, value));
|
|
36
42
|
}
|
|
37
43
|
});
|
|
38
44
|
return [categoryValues, Array.from(seriesMap.values())];
|
package/cjs/ChartSeries.js.map
CHANGED
|
@@ -1 +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 {\n buildColumnMap,\n ColumnMap,\n EventEmitter,\n Range,\n} from \"@vuu-ui/vuu-utils\";\n\ntype Series = {\n id: string;\n name: string;\n label: string;\n data: number[];\n type: \"line\";\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
|
|
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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"}
|
|
@@ -9,22 +9,24 @@ const useChartContextMenu = ({
|
|
|
9
9
|
const showContextMenu = vuuContextMenu.useContextMenu();
|
|
10
10
|
const onContextMenu = react.useCallback(
|
|
11
11
|
({
|
|
12
|
-
|
|
12
|
+
data,
|
|
13
13
|
event,
|
|
14
14
|
name: categoryValue,
|
|
15
|
-
// seriesId,
|
|
16
15
|
seriesName: valueColumn,
|
|
17
|
-
value
|
|
18
|
-
|
|
16
|
+
value: keyedValue,
|
|
17
|
+
...rest
|
|
19
18
|
}) => {
|
|
20
19
|
event.stop();
|
|
20
|
+
console.log({ rest });
|
|
21
|
+
const { row, value } = data;
|
|
21
22
|
const menuOptions = {
|
|
22
23
|
categoryColumn: categoryColumnName,
|
|
23
24
|
categoryValue,
|
|
25
|
+
row,
|
|
24
26
|
valueColumn,
|
|
25
27
|
value
|
|
26
28
|
};
|
|
27
|
-
showContextMenu(event.event, "
|
|
29
|
+
showContextMenu(event.event, "series", menuOptions, {
|
|
28
30
|
onOpenChange: (isOpen) => {
|
|
29
31
|
console.log(`[useTableContextMenu] onOpenChange ${isOpen}`);
|
|
30
32
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useChartContextMenu.js","sources":["../../../packages/vuu-chart/src/useChartContextMenu.ts"],"sourcesContent":["import { useContextMenu } from \"@vuu-ui/vuu-context-menu\";\nimport {
|
|
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 { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { useCallback } from \"react\";\nimport { DataSourceValue } from \"./ChartSeries\";\n\nexport type ChartMenuLocation = \"canvas\" | \"series\";\n\ntype EChartContextMenuEvent = {\n event: PointerEvent;\n offsetX: number;\n offsetY: number;\n stop: () => void;\n type: \"contextmenu\";\n};\n\nexport type ChartContextMenuOptions = {\n categoryColumn: string;\n categoryValue: VuuRowDataItemType;\n row: DataSourceRow;\n valueColumn: string;\n value: VuuRowDataItemType;\n};\n\ntype EChartContextMenuHandlerParams = {\n data: DataSourceValue;\n dataIndex: number;\n event: EChartContextMenuEvent;\n name: string;\n seriesId: string;\n seriesName: string;\n value: DataSourceValue;\n};\n\ninterface ChartContextMenuHookProps {\n allowContextMenu?: boolean;\n categoryColumnName: string;\n}\n\nexport const useChartContextMenu = ({\n categoryColumnName,\n}: ChartContextMenuHookProps) => {\n const showContextMenu = useContextMenu();\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n //@ts-ignore\n const onContextMenu = useCallback<any>(\n ({\n data,\n event,\n name: categoryValue,\n seriesName: valueColumn,\n value: keyedValue,\n ...rest\n }: EChartContextMenuHandlerParams) => {\n event.stop();\n console.log({ rest });\n const { row, value } = data;\n\n const menuOptions: ChartContextMenuOptions = {\n categoryColumn: categoryColumnName,\n categoryValue,\n row,\n valueColumn,\n value,\n };\n\n showContextMenu(event.event, \"series\", menuOptions, {\n onOpenChange: (isOpen: boolean) => {\n console.log(`[useTableContextMenu] onOpenChange ${isOpen}`);\n },\n });\n },\n [categoryColumnName, showContextMenu],\n );\n\n return onContextMenu;\n};\n"],"names":["useContextMenu","useCallback"],"mappings":";;;;;AAuCO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AACF,CAAiC,KAAA;AAC/B,EAAA,MAAM,kBAAkBA,6BAAe,EAAA;AAIvC,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC;AAAA,MACC,IAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAM,EAAA,aAAA;AAAA,MACN,UAAY,EAAA,WAAA;AAAA,MACZ,KAAO,EAAA,UAAA;AAAA,MACP,GAAG;AAAA,KACiC,KAAA;AACpC,MAAA,KAAA,CAAM,IAAK,EAAA;AACX,MAAQ,OAAA,CAAA,GAAA,CAAI,EAAE,IAAA,EAAM,CAAA;AACpB,MAAM,MAAA,EAAE,GAAK,EAAA,KAAA,EAAU,GAAA,IAAA;AAEvB,MAAA,MAAM,WAAuC,GAAA;AAAA,QAC3C,cAAgB,EAAA,kBAAA;AAAA,QAChB,aAAA;AAAA,QACA,GAAA;AAAA,QACA,WAAA;AAAA,QACA;AAAA,OACF;AAEA,MAAgB,eAAA,CAAA,KAAA,CAAM,KAAO,EAAA,QAAA,EAAU,WAAa,EAAA;AAAA,QAClD,YAAA,EAAc,CAAC,MAAoB,KAAA;AACjC,UAAQ,OAAA,CAAA,GAAA,CAAI,CAAsC,mCAAA,EAAA,MAAM,CAAE,CAAA,CAAA;AAAA;AAC5D,OACD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,oBAAoB,eAAe;AAAA,GACtC;AAEA,EAAO,OAAA,aAAA;AACT;;;;"}
|
package/esm/Chart.js
CHANGED
|
@@ -31,7 +31,7 @@ const Chart = ({
|
|
|
31
31
|
dataSource,
|
|
32
32
|
seriesColumnNames
|
|
33
33
|
});
|
|
34
|
-
const onContextMenu = useChartContextMenu({ categoryColumnName
|
|
34
|
+
const onContextMenu = useChartContextMenu({ categoryColumnName });
|
|
35
35
|
useEffect(() => {
|
|
36
36
|
const chart = init(chartRef.current, null, chartSettings);
|
|
37
37
|
chart.on("contextmenu", onContextMenu);
|
package/esm/Chart.js.map
CHANGED
|
@@ -1 +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
|
|
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;;;;"}
|
package/esm/ChartSeries.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { EventEmitter, Range, buildColumnMap } from '@vuu-ui/vuu-utils';
|
|
1
|
+
import { EventEmitter, Range, buildColumnMap, metadataKeys } from '@vuu-ui/vuu-utils';
|
|
2
2
|
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
4
|
var __typeError = (msg) => {
|
|
@@ -11,6 +11,10 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
|
|
|
11
11
|
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);
|
|
12
12
|
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
|
|
13
13
|
var _categoryColumn, _columnMap, _dataSource, _categoryCount, _dates, _series, _seriesColumns;
|
|
14
|
+
const { KEY } = metadataKeys;
|
|
15
|
+
function DataSourceValue(key, row, value) {
|
|
16
|
+
return { key, row, value };
|
|
17
|
+
}
|
|
14
18
|
function getCategoriesAndSeries(columnMap, data, categoryColumn, seriesColumns) {
|
|
15
19
|
const categoryValues = [];
|
|
16
20
|
const seriesMap = /* @__PURE__ */ new Map();
|
|
@@ -30,7 +34,9 @@ function getCategoriesAndSeries(columnMap, data, categoryColumn, seriesColumns)
|
|
|
30
34
|
};
|
|
31
35
|
seriesMap.set(seriesColumn, series);
|
|
32
36
|
}
|
|
33
|
-
|
|
37
|
+
const key = row[KEY];
|
|
38
|
+
const value = row[columnMap[seriesColumn]];
|
|
39
|
+
series.data.push(DataSourceValue(key, row, value));
|
|
34
40
|
}
|
|
35
41
|
});
|
|
36
42
|
return [categoryValues, Array.from(seriesMap.values())];
|
package/esm/ChartSeries.js.map
CHANGED
|
@@ -1 +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 {\n buildColumnMap,\n ColumnMap,\n EventEmitter,\n Range,\n} from \"@vuu-ui/vuu-utils\";\n\ntype Series = {\n id: string;\n name: string;\n label: string;\n data: number[];\n type: \"line\";\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
|
|
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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"}
|
|
@@ -7,22 +7,24 @@ const useChartContextMenu = ({
|
|
|
7
7
|
const showContextMenu = useContextMenu();
|
|
8
8
|
const onContextMenu = useCallback(
|
|
9
9
|
({
|
|
10
|
-
|
|
10
|
+
data,
|
|
11
11
|
event,
|
|
12
12
|
name: categoryValue,
|
|
13
|
-
// seriesId,
|
|
14
13
|
seriesName: valueColumn,
|
|
15
|
-
value
|
|
16
|
-
|
|
14
|
+
value: keyedValue,
|
|
15
|
+
...rest
|
|
17
16
|
}) => {
|
|
18
17
|
event.stop();
|
|
18
|
+
console.log({ rest });
|
|
19
|
+
const { row, value } = data;
|
|
19
20
|
const menuOptions = {
|
|
20
21
|
categoryColumn: categoryColumnName,
|
|
21
22
|
categoryValue,
|
|
23
|
+
row,
|
|
22
24
|
valueColumn,
|
|
23
25
|
value
|
|
24
26
|
};
|
|
25
|
-
showContextMenu(event.event, "
|
|
27
|
+
showContextMenu(event.event, "series", menuOptions, {
|
|
26
28
|
onOpenChange: (isOpen) => {
|
|
27
29
|
console.log(`[useTableContextMenu] onOpenChange ${isOpen}`);
|
|
28
30
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useChartContextMenu.js","sources":["../../../packages/vuu-chart/src/useChartContextMenu.ts"],"sourcesContent":["import { useContextMenu } from \"@vuu-ui/vuu-context-menu\";\nimport {
|
|
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 { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { useCallback } from \"react\";\nimport { DataSourceValue } from \"./ChartSeries\";\n\nexport type ChartMenuLocation = \"canvas\" | \"series\";\n\ntype EChartContextMenuEvent = {\n event: PointerEvent;\n offsetX: number;\n offsetY: number;\n stop: () => void;\n type: \"contextmenu\";\n};\n\nexport type ChartContextMenuOptions = {\n categoryColumn: string;\n categoryValue: VuuRowDataItemType;\n row: DataSourceRow;\n valueColumn: string;\n value: VuuRowDataItemType;\n};\n\ntype EChartContextMenuHandlerParams = {\n data: DataSourceValue;\n dataIndex: number;\n event: EChartContextMenuEvent;\n name: string;\n seriesId: string;\n seriesName: string;\n value: DataSourceValue;\n};\n\ninterface ChartContextMenuHookProps {\n allowContextMenu?: boolean;\n categoryColumnName: string;\n}\n\nexport const useChartContextMenu = ({\n categoryColumnName,\n}: ChartContextMenuHookProps) => {\n const showContextMenu = useContextMenu();\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n //@ts-ignore\n const onContextMenu = useCallback<any>(\n ({\n data,\n event,\n name: categoryValue,\n seriesName: valueColumn,\n value: keyedValue,\n ...rest\n }: EChartContextMenuHandlerParams) => {\n event.stop();\n console.log({ rest });\n const { row, value } = data;\n\n const menuOptions: ChartContextMenuOptions = {\n categoryColumn: categoryColumnName,\n categoryValue,\n row,\n valueColumn,\n value,\n };\n\n showContextMenu(event.event, \"series\", menuOptions, {\n onOpenChange: (isOpen: boolean) => {\n console.log(`[useTableContextMenu] onOpenChange ${isOpen}`);\n },\n });\n },\n [categoryColumnName, showContextMenu],\n );\n\n return onContextMenu;\n};\n"],"names":[],"mappings":";;;AAuCO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AACF,CAAiC,KAAA;AAC/B,EAAA,MAAM,kBAAkB,cAAe,EAAA;AAIvC,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC;AAAA,MACC,IAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAM,EAAA,aAAA;AAAA,MACN,UAAY,EAAA,WAAA;AAAA,MACZ,KAAO,EAAA,UAAA;AAAA,MACP,GAAG;AAAA,KACiC,KAAA;AACpC,MAAA,KAAA,CAAM,IAAK,EAAA;AACX,MAAQ,OAAA,CAAA,GAAA,CAAI,EAAE,IAAA,EAAM,CAAA;AACpB,MAAM,MAAA,EAAE,GAAK,EAAA,KAAA,EAAU,GAAA,IAAA;AAEvB,MAAA,MAAM,WAAuC,GAAA;AAAA,QAC3C,cAAgB,EAAA,kBAAA;AAAA,QAChB,aAAA;AAAA,QACA,GAAA;AAAA,QACA,WAAA;AAAA,QACA;AAAA,OACF;AAEA,MAAgB,eAAA,CAAA,KAAA,CAAM,KAAO,EAAA,QAAA,EAAU,WAAa,EAAA;AAAA,QAClD,YAAA,EAAc,CAAC,MAAoB,KAAA;AACjC,UAAQ,OAAA,CAAA,GAAA,CAAI,CAAsC,mCAAA,EAAA,MAAM,CAAE,CAAA,CAAA;AAAA;AAC5D,OACD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,oBAAoB,eAAe;AAAA,GACtC;AAEA,EAAO,OAAA,aAAA;AACT;;;;"}
|
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "2.1.0-alpha.
|
|
2
|
+
"version": "2.1.0-alpha.5",
|
|
3
3
|
"description": "support for apache echarts using vuu data",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"devDependencies": {
|
|
6
|
-
"@vuu-ui/vuu-data-types": "2.1.0-alpha.
|
|
7
|
-
"@vuu-ui/vuu-protocol-types": "2.1.0-alpha.
|
|
6
|
+
"@vuu-ui/vuu-data-types": "2.1.0-alpha.5",
|
|
7
|
+
"@vuu-ui/vuu-protocol-types": "2.1.0-alpha.5"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
10
|
"@salt-ds/styles": "0.2.1",
|
|
11
11
|
"@salt-ds/window": "0.1.1",
|
|
12
|
-
"@vuu-ui/vuu-context-menu": "2.1.0-alpha.
|
|
13
|
-
"@vuu-ui/vuu-utils": "2.1.0-alpha.
|
|
12
|
+
"@vuu-ui/vuu-context-menu": "2.1.0-alpha.5",
|
|
13
|
+
"@vuu-ui/vuu-utils": "2.1.0-alpha.5"
|
|
14
14
|
},
|
|
15
15
|
"peerDependencies": {
|
|
16
16
|
"echarts": "6.0.0",
|
package/types/ChartSeries.d.ts
CHANGED
|
@@ -1,12 +1,18 @@
|
|
|
1
|
-
import { DataSource, DataSourceSubscribeCallback } from "@vuu-ui/vuu-data-types";
|
|
1
|
+
import { DataSource, DataSourceRow, DataSourceSubscribeCallback } from "@vuu-ui/vuu-data-types";
|
|
2
|
+
import { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
|
|
2
3
|
import { EventEmitter } from "@vuu-ui/vuu-utils";
|
|
3
4
|
type Series = {
|
|
4
5
|
id: string;
|
|
5
6
|
name: string;
|
|
6
7
|
label: string;
|
|
7
|
-
data: number[];
|
|
8
|
+
data: DataSourceValue<number>[];
|
|
8
9
|
type: "line";
|
|
9
10
|
};
|
|
11
|
+
export type DataSourceValue<T extends VuuRowDataItemType = number> = {
|
|
12
|
+
key: string;
|
|
13
|
+
readonly row: DataSourceRow;
|
|
14
|
+
value: T;
|
|
15
|
+
};
|
|
10
16
|
export type ChartEvents = {
|
|
11
17
|
update: () => void;
|
|
12
18
|
};
|
package/types/index.d.ts
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DataSourceRow } from "@vuu-ui/vuu-data-types";
|
|
2
2
|
import { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
|
|
3
|
+
export type ChartMenuLocation = "canvas" | "series";
|
|
3
4
|
export type ChartContextMenuOptions = {
|
|
4
5
|
categoryColumn: string;
|
|
5
6
|
categoryValue: VuuRowDataItemType;
|
|
7
|
+
row: DataSourceRow;
|
|
6
8
|
valueColumn: string;
|
|
7
9
|
value: VuuRowDataItemType;
|
|
8
10
|
};
|
|
9
11
|
interface ChartContextMenuHookProps {
|
|
10
12
|
allowContextMenu?: boolean;
|
|
11
13
|
categoryColumnName: string;
|
|
12
|
-
dataSource: DataSource;
|
|
13
14
|
}
|
|
14
15
|
export declare const useChartContextMenu: ({ categoryColumnName, }: ChartContextMenuHookProps) => any;
|
|
15
16
|
export {};
|