@vuu-ui/vuu-chart 2.1.4 → 2.1.6
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.css.js +2 -2
- package/cjs/Chart.js +15 -2
- package/cjs/Chart.js.map +1 -1
- package/cjs/useChartOptions.js +24 -4
- package/cjs/useChartOptions.js.map +1 -1
- package/esm/Chart.css.js +2 -2
- package/esm/Chart.js +17 -4
- package/esm/Chart.js.map +1 -1
- package/esm/useChartOptions.js +24 -4
- package/esm/useChartOptions.js.map +1 -1
- package/package.json +6 -5
- package/types/Chart.d.ts +2 -1
- package/types/useChartOptions.d.ts +2 -1
package/cjs/Chart.css.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chartCss = "\n.vuuChartTooltip {\n background-color: var(--salt-container-primary-background) !important;\n border-color:var(--salt-selectable-borderColor-selected) !important;\n border-radius: 6px !important;\n font-family: var(--salt-text-fontFamily) !important;\n\n &> div > div {\n &>div:nth-child(1) {\n /* Title */\n color: var(--salt-content-primary-foreground) !important;\n }\n\n &>div:nth-child(2) > div {\n &>div {\n align-items: center;\n display: flex;\n /* Line item */\n span:nth-child(1){\n /* icon */\n flex: 0 0 12px\n }\n span:nth-child(2){\n /* label */\n color: var(--salt-content-secondary-foreground) !important;\n flex: 0 0 auto;\n font-size: var(--salt-text-label-fontSize) !important;\n text-transform: capitalize;\n }\n span:nth-child(3){\n /* value */\n flex: 1 1 auto;\n color: var(--salt-content-primary-foreground) !important;\n font-size: var(--salt-text-label-fontSize) !important;\n text-align: right;\n }\n }\n }\n\n } \n}";
|
|
4
4
|
|
|
5
|
-
module.exports =
|
|
5
|
+
module.exports = chartCss;
|
|
6
6
|
//# sourceMappingURL=Chart.css.js.map
|
package/cjs/Chart.js
CHANGED
|
@@ -7,17 +7,21 @@ var styles = require('@salt-ds/styles');
|
|
|
7
7
|
var window = require('@salt-ds/window');
|
|
8
8
|
var useChartOptions = require('./useChartOptions.js');
|
|
9
9
|
var useChartContextMenu = require('./useChartContextMenu.js');
|
|
10
|
+
var cx = require('clsx');
|
|
10
11
|
var Chart$1 = require('./Chart.css.js');
|
|
11
12
|
|
|
13
|
+
const classBase = "vuuChart";
|
|
12
14
|
const Chart = ({
|
|
13
15
|
categoryColumnName,
|
|
14
16
|
chartSettings = { useCoarsePointer: true, renderer: "svg" },
|
|
15
17
|
// enables clicking near a line and still highlighting it
|
|
18
|
+
className,
|
|
16
19
|
dataSource,
|
|
17
20
|
itemColorFunction,
|
|
18
21
|
optionSettings = { notMerge: true },
|
|
19
22
|
// don't merge two options together when updating option
|
|
20
23
|
palette,
|
|
24
|
+
showTooltip,
|
|
21
25
|
style = { width: "100%", height: "100%" },
|
|
22
26
|
seriesColumnNames,
|
|
23
27
|
...htmlAttributes
|
|
@@ -34,7 +38,8 @@ const Chart = ({
|
|
|
34
38
|
itemColorFunction,
|
|
35
39
|
palette,
|
|
36
40
|
dataSource,
|
|
37
|
-
seriesColumnNames
|
|
41
|
+
seriesColumnNames,
|
|
42
|
+
showTooltip
|
|
38
43
|
});
|
|
39
44
|
const onContextMenu = useChartContextMenu.useChartContextMenu({ categoryColumnName });
|
|
40
45
|
react.useEffect(() => {
|
|
@@ -50,7 +55,15 @@ const Chart = ({
|
|
|
50
55
|
chart?.setOption(option, optionSettings);
|
|
51
56
|
}
|
|
52
57
|
}, [option, optionSettings]);
|
|
53
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
58
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
59
|
+
"div",
|
|
60
|
+
{
|
|
61
|
+
...htmlAttributes,
|
|
62
|
+
className: cx(classBase, className),
|
|
63
|
+
ref: chartRef,
|
|
64
|
+
style
|
|
65
|
+
}
|
|
66
|
+
);
|
|
54
67
|
};
|
|
55
68
|
|
|
56
69
|
exports.Chart = Chart;
|
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\";\
|
|
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\";\nimport cx from \"clsx\";\n\nimport { ItemColorFunction } from \"./ChartSeries\";\n\nimport chartCss from \"./Chart.css\";\n\nconst classBase = \"vuuChart\";\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 showTooltip?: boolean;\n}\n\nexport const Chart = ({\n categoryColumnName,\n chartSettings = { useCoarsePointer: true, renderer: \"svg\" }, // enables clicking near a line and still highlighting it\n className,\n dataSource,\n itemColorFunction,\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 option = useChartOptions({\n categoryColumnName,\n itemColorFunction,\n palette,\n dataSource,\n seriesColumnNames,\n showTooltip,\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 (\n <div\n {...htmlAttributes}\n className={cx(classBase, className)}\n ref={chartRef}\n style={style}\n />\n );\n};\n"],"names":["useWindow","useComponentCssInjection","chartCss","useRef","useChartOptions","useChartContextMenu","useEffect","init","getInstanceByDom","jsx"],"mappings":";;;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,UAAA;AAqBX,MAAM,QAAQ,CAAC;AAAA,EACpB,kBAAA;AAAA,EACA,aAAgB,GAAA,EAAE,gBAAkB,EAAA,IAAA,EAAM,UAAU,KAAM,EAAA;AAAA;AAAA,EAC1D,SAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;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,EAAA,MAAM,SAASC,+BAAgB,CAAA;AAAA,IAC7B,kBAAA;AAAA,IACA,iBAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,iBAAA;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,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;;;;"}
|
package/cjs/useChartOptions.js
CHANGED
|
@@ -17,7 +17,8 @@ const useChartOptions = ({
|
|
|
17
17
|
dataSource,
|
|
18
18
|
itemColorFunction,
|
|
19
19
|
palette = defaultPalette,
|
|
20
|
-
seriesColumnNames
|
|
20
|
+
seriesColumnNames,
|
|
21
|
+
showTooltip = true
|
|
21
22
|
}) => {
|
|
22
23
|
const [, forceRender] = react.useState({});
|
|
23
24
|
const chartSeries = react.useMemo(() => {
|
|
@@ -42,6 +43,14 @@ const useChartOptions = ({
|
|
|
42
43
|
color: palette,
|
|
43
44
|
dataZoom: [
|
|
44
45
|
{
|
|
46
|
+
backgroundColor: "var(--vuuChart-zoom-background, transparent)",
|
|
47
|
+
borderColor: "var(--vuuChart-zoom-borderColor, white)",
|
|
48
|
+
handleStyle: {
|
|
49
|
+
color: "var(--vuuChart-zoom-handleColor, white)"
|
|
50
|
+
},
|
|
51
|
+
moveHandleStyle: {
|
|
52
|
+
color: "var(--vuuChart-zoom-slideColor, white)"
|
|
53
|
+
},
|
|
45
54
|
type: "slider",
|
|
46
55
|
start: 0,
|
|
47
56
|
end: 100
|
|
@@ -53,13 +62,24 @@ const useChartOptions = ({
|
|
|
53
62
|
right: 5
|
|
54
63
|
},
|
|
55
64
|
series: chartSeries.series,
|
|
56
|
-
tooltip: {
|
|
65
|
+
tooltip: showTooltip ? {
|
|
66
|
+
backgroundColor: "",
|
|
67
|
+
borderColor: "",
|
|
68
|
+
// borderWidth: "",
|
|
69
|
+
className: "vuuChartTooltip",
|
|
70
|
+
// padding: "",
|
|
57
71
|
trigger: "axis"
|
|
58
|
-
},
|
|
72
|
+
} : void 0,
|
|
59
73
|
xAxis: {
|
|
60
74
|
data: chartSeries.categories
|
|
61
75
|
},
|
|
62
|
-
yAxis: {
|
|
76
|
+
yAxis: {
|
|
77
|
+
splitLine: {
|
|
78
|
+
lineStyle: {
|
|
79
|
+
color: "var(--salt-separable-tertiary-borderColor)"
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
63
83
|
};
|
|
64
84
|
};
|
|
65
85
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useChartOptions.js","sources":["../../../packages/vuu-chart/src/useChartOptions.ts"],"sourcesContent":["import { type EChartsCoreOption } from \"echarts\";\nimport { useMemo, useState } from \"react\";\nimport { ChartSeries, ItemColorFunction } from \"./ChartSeries\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { itemsChanged } from \"@vuu-ui/vuu-utils\";\n\nconst defaultPalette = [\n \"#4676bf\",\n \"#ab6528\",\n \"#9f55c2\",\n \"#2a8285\",\n \"#697694\",\n \"#B0549d\",\n];\nexport interface ChartOptionsProps {\n categoryColumnName: string;\n dataSource: DataSource;\n itemColorFunction?: ItemColorFunction;\n palette?: string[];\n seriesColumnNames: string[];\n}\n\nexport const useChartOptions = ({\n categoryColumnName,\n dataSource,\n itemColorFunction,\n palette = defaultPalette,\n seriesColumnNames,\n}: ChartOptionsProps) => {\n const [, forceRender] = useState({});\n\n const chartSeries = useMemo(() => {\n console.log(\"new ChartSeries\");\n const cs = new ChartSeries({\n itemColorFunction,\n dataSource,\n });\n cs.on(\"update\", () => forceRender({}));\n return cs;\n }, [dataSource, itemColorFunction]);\n\n useMemo(() => {\n if (categoryColumnName !== chartSeries.categoryColumn) {\n chartSeries.categoryColumn = categoryColumnName;\n }\n if (itemsChanged(seriesColumnNames, chartSeries.seriesColumnNames)) {\n chartSeries.seriesColumnNames = seriesColumnNames;\n }\n }, [categoryColumnName, chartSeries, seriesColumnNames]);\n\n return {\n animation: false,\n color: palette,\n dataZoom: [\n {\n type: \"slider\",\n start: 0,\n end: 100,\n },\n ],\n grid: {\n left: \"0\",\n bottom: 0,\n right: 5,\n },\n series: chartSeries.series,\n tooltip: {\n
|
|
1
|
+
{"version":3,"file":"useChartOptions.js","sources":["../../../packages/vuu-chart/src/useChartOptions.ts"],"sourcesContent":["import { type EChartsCoreOption } from \"echarts\";\nimport { useMemo, useState } from \"react\";\nimport { ChartSeries, ItemColorFunction } from \"./ChartSeries\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { itemsChanged } from \"@vuu-ui/vuu-utils\";\n\nconst defaultPalette = [\n \"#4676bf\",\n \"#ab6528\",\n \"#9f55c2\",\n \"#2a8285\",\n \"#697694\",\n \"#B0549d\",\n];\nexport interface ChartOptionsProps {\n categoryColumnName: string;\n dataSource: DataSource;\n itemColorFunction?: ItemColorFunction;\n palette?: string[];\n seriesColumnNames: string[];\n showTooltip?: boolean;\n}\n\nexport const useChartOptions = ({\n categoryColumnName,\n dataSource,\n itemColorFunction,\n palette = defaultPalette,\n seriesColumnNames,\n showTooltip = true,\n}: ChartOptionsProps) => {\n const [, forceRender] = useState({});\n\n const chartSeries = useMemo(() => {\n console.log(\"new ChartSeries\");\n const cs = new ChartSeries({\n itemColorFunction,\n dataSource,\n });\n cs.on(\"update\", () => forceRender({}));\n return cs;\n }, [dataSource, itemColorFunction]);\n\n useMemo(() => {\n if (categoryColumnName !== chartSeries.categoryColumn) {\n chartSeries.categoryColumn = categoryColumnName;\n }\n if (itemsChanged(seriesColumnNames, chartSeries.seriesColumnNames)) {\n chartSeries.seriesColumnNames = seriesColumnNames;\n }\n }, [categoryColumnName, chartSeries, seriesColumnNames]);\n\n return {\n animation: false,\n color: palette,\n dataZoom: [\n {\n 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 backgroundColor: \"\",\n borderColor: \"\",\n // borderWidth: \"\",\n className: \"vuuChartTooltip\",\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"],"mappings":";;;;;;AAMA,MAAM,cAAiB,GAAA;AAAA,EACrB,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA;AAUO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,kBAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,OAAU,GAAA,cAAA;AAAA,EACV,iBAAA;AAAA,EACA,WAAc,GAAA;AAChB,CAAyB,KAAA;AACvB,EAAA,MAAM,GAAG,WAAW,CAAI,GAAAA,cAAA,CAAS,EAAE,CAAA;AAEnC,EAAM,MAAA,WAAA,GAAcC,cAAQ,MAAM;AAChC,IAAA,OAAA,CAAQ,IAAI,iBAAiB,CAAA;AAC7B,IAAM,MAAA,EAAA,GAAK,IAAIC,uBAAY,CAAA;AAAA,MACzB,iBAAA;AAAA,MACA;AAAA,KACD,CAAA;AACD,IAAA,EAAA,CAAG,GAAG,QAAU,EAAA,MAAM,WAAY,CAAA,EAAE,CAAC,CAAA;AACrC,IAAO,OAAA,EAAA;AAAA,GACN,EAAA,CAAC,UAAY,EAAA,iBAAiB,CAAC,CAAA;AAElC,EAAAD,aAAA,CAAQ,MAAM;AACZ,IAAI,IAAA,kBAAA,KAAuB,YAAY,cAAgB,EAAA;AACrD,MAAA,WAAA,CAAY,cAAiB,GAAA,kBAAA;AAAA;AAE/B,IAAA,IAAIE,qBAAa,CAAA,iBAAA,EAAmB,WAAY,CAAA,iBAAiB,CAAG,EAAA;AAClE,MAAA,WAAA,CAAY,iBAAoB,GAAA,iBAAA;AAAA;AAClC,GACC,EAAA,CAAC,kBAAoB,EAAA,WAAA,EAAa,iBAAiB,CAAC,CAAA;AAEvD,EAAO,OAAA;AAAA,IACL,SAAW,EAAA,KAAA;AAAA,IACX,KAAO,EAAA,OAAA;AAAA,IACP,QAAU,EAAA;AAAA,MACR;AAAA,QACE,eAAiB,EAAA,8CAAA;AAAA,QACjB,WAAa,EAAA,yCAAA;AAAA,QACb,WAAa,EAAA;AAAA,UACX,KAAO,EAAA;AAAA,SACT;AAAA,QACA,eAAiB,EAAA;AAAA,UACf,KAAO,EAAA;AAAA,SACT;AAAA,QACA,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,SAAS,WACL,GAAA;AAAA,MACE,eAAiB,EAAA,EAAA;AAAA,MACjB,WAAa,EAAA,EAAA;AAAA;AAAA,MAEb,SAAW,EAAA,iBAAA;AAAA;AAAA,MAEX,OAAS,EAAA;AAAA,KAEX,GAAA,KAAA,CAAA;AAAA,IACJ,KAAO,EAAA;AAAA,MACL,MAAM,WAAY,CAAA;AAAA,KACpB;AAAA,IACA,KAAO,EAAA;AAAA,MACL,SAAW,EAAA;AAAA,QACT,SAAW,EAAA;AAAA,UACT,KAAO,EAAA;AAAA;AACT;AACF;AACF,GACF;AACF;;;;"}
|
package/esm/Chart.css.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var chartCss = "\n.vuuChartTooltip {\n background-color: var(--salt-container-primary-background) !important;\n border-color:var(--salt-selectable-borderColor-selected) !important;\n border-radius: 6px !important;\n font-family: var(--salt-text-fontFamily) !important;\n\n &> div > div {\n &>div:nth-child(1) {\n /* Title */\n color: var(--salt-content-primary-foreground) !important;\n }\n\n &>div:nth-child(2) > div {\n &>div {\n align-items: center;\n display: flex;\n /* Line item */\n span:nth-child(1){\n /* icon */\n flex: 0 0 12px\n }\n span:nth-child(2){\n /* label */\n color: var(--salt-content-secondary-foreground) !important;\n flex: 0 0 auto;\n font-size: var(--salt-text-label-fontSize) !important;\n text-transform: capitalize;\n }\n span:nth-child(3){\n /* value */\n flex: 1 1 auto;\n color: var(--salt-content-primary-foreground) !important;\n font-size: var(--salt-text-label-fontSize) !important;\n text-align: right;\n }\n }\n }\n\n } \n}";
|
|
2
2
|
|
|
3
|
-
export {
|
|
3
|
+
export { chartCss as default };
|
|
4
4
|
//# sourceMappingURL=Chart.css.js.map
|
package/esm/Chart.js
CHANGED
|
@@ -5,17 +5,21 @@ import { useComponentCssInjection } from '@salt-ds/styles';
|
|
|
5
5
|
import { useWindow } from '@salt-ds/window';
|
|
6
6
|
import { useChartOptions } from './useChartOptions.js';
|
|
7
7
|
import { useChartContextMenu } from './useChartContextMenu.js';
|
|
8
|
-
import
|
|
8
|
+
import cx from 'clsx';
|
|
9
|
+
import chartCss from './Chart.css.js';
|
|
9
10
|
|
|
11
|
+
const classBase = "vuuChart";
|
|
10
12
|
const Chart = ({
|
|
11
13
|
categoryColumnName,
|
|
12
14
|
chartSettings = { useCoarsePointer: true, renderer: "svg" },
|
|
13
15
|
// enables clicking near a line and still highlighting it
|
|
16
|
+
className,
|
|
14
17
|
dataSource,
|
|
15
18
|
itemColorFunction,
|
|
16
19
|
optionSettings = { notMerge: true },
|
|
17
20
|
// don't merge two options together when updating option
|
|
18
21
|
palette,
|
|
22
|
+
showTooltip,
|
|
19
23
|
style = { width: "100%", height: "100%" },
|
|
20
24
|
seriesColumnNames,
|
|
21
25
|
...htmlAttributes
|
|
@@ -23,7 +27,7 @@ const Chart = ({
|
|
|
23
27
|
const targetWindow = useWindow();
|
|
24
28
|
useComponentCssInjection({
|
|
25
29
|
testId: "vuu-toast-notification",
|
|
26
|
-
css:
|
|
30
|
+
css: chartCss,
|
|
27
31
|
window: targetWindow
|
|
28
32
|
});
|
|
29
33
|
const chartRef = useRef(null);
|
|
@@ -32,7 +36,8 @@ const Chart = ({
|
|
|
32
36
|
itemColorFunction,
|
|
33
37
|
palette,
|
|
34
38
|
dataSource,
|
|
35
|
-
seriesColumnNames
|
|
39
|
+
seriesColumnNames,
|
|
40
|
+
showTooltip
|
|
36
41
|
});
|
|
37
42
|
const onContextMenu = useChartContextMenu({ categoryColumnName });
|
|
38
43
|
useEffect(() => {
|
|
@@ -48,7 +53,15 @@ const Chart = ({
|
|
|
48
53
|
chart?.setOption(option, optionSettings);
|
|
49
54
|
}
|
|
50
55
|
}, [option, optionSettings]);
|
|
51
|
-
return /* @__PURE__ */ jsx(
|
|
56
|
+
return /* @__PURE__ */ jsx(
|
|
57
|
+
"div",
|
|
58
|
+
{
|
|
59
|
+
...htmlAttributes,
|
|
60
|
+
className: cx(classBase, className),
|
|
61
|
+
ref: chartRef,
|
|
62
|
+
style
|
|
63
|
+
}
|
|
64
|
+
);
|
|
52
65
|
};
|
|
53
66
|
|
|
54
67
|
export { Chart };
|
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\";\
|
|
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\";\nimport cx from \"clsx\";\n\nimport { ItemColorFunction } from \"./ChartSeries\";\n\nimport chartCss from \"./Chart.css\";\n\nconst classBase = \"vuuChart\";\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 showTooltip?: boolean;\n}\n\nexport const Chart = ({\n categoryColumnName,\n chartSettings = { useCoarsePointer: true, renderer: \"svg\" }, // enables clicking near a line and still highlighting it\n className,\n dataSource,\n itemColorFunction,\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 option = useChartOptions({\n categoryColumnName,\n itemColorFunction,\n palette,\n dataSource,\n seriesColumnNames,\n showTooltip,\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 (\n <div\n {...htmlAttributes}\n className={cx(classBase, className)}\n ref={chartRef}\n style={style}\n />\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAYA,MAAM,SAAY,GAAA,UAAA;AAqBX,MAAM,QAAQ,CAAC;AAAA,EACpB,kBAAA;AAAA,EACA,aAAgB,GAAA,EAAE,gBAAkB,EAAA,IAAA,EAAM,UAAU,KAAM,EAAA;AAAA;AAAA,EAC1D,SAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;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,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,QAAA;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,iBAAA;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,EACE,uBAAA,GAAA;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;;;;"}
|
package/esm/useChartOptions.js
CHANGED
|
@@ -15,7 +15,8 @@ const useChartOptions = ({
|
|
|
15
15
|
dataSource,
|
|
16
16
|
itemColorFunction,
|
|
17
17
|
palette = defaultPalette,
|
|
18
|
-
seriesColumnNames
|
|
18
|
+
seriesColumnNames,
|
|
19
|
+
showTooltip = true
|
|
19
20
|
}) => {
|
|
20
21
|
const [, forceRender] = useState({});
|
|
21
22
|
const chartSeries = useMemo(() => {
|
|
@@ -40,6 +41,14 @@ const useChartOptions = ({
|
|
|
40
41
|
color: palette,
|
|
41
42
|
dataZoom: [
|
|
42
43
|
{
|
|
44
|
+
backgroundColor: "var(--vuuChart-zoom-background, transparent)",
|
|
45
|
+
borderColor: "var(--vuuChart-zoom-borderColor, white)",
|
|
46
|
+
handleStyle: {
|
|
47
|
+
color: "var(--vuuChart-zoom-handleColor, white)"
|
|
48
|
+
},
|
|
49
|
+
moveHandleStyle: {
|
|
50
|
+
color: "var(--vuuChart-zoom-slideColor, white)"
|
|
51
|
+
},
|
|
43
52
|
type: "slider",
|
|
44
53
|
start: 0,
|
|
45
54
|
end: 100
|
|
@@ -51,13 +60,24 @@ const useChartOptions = ({
|
|
|
51
60
|
right: 5
|
|
52
61
|
},
|
|
53
62
|
series: chartSeries.series,
|
|
54
|
-
tooltip: {
|
|
63
|
+
tooltip: showTooltip ? {
|
|
64
|
+
backgroundColor: "",
|
|
65
|
+
borderColor: "",
|
|
66
|
+
// borderWidth: "",
|
|
67
|
+
className: "vuuChartTooltip",
|
|
68
|
+
// padding: "",
|
|
55
69
|
trigger: "axis"
|
|
56
|
-
},
|
|
70
|
+
} : void 0,
|
|
57
71
|
xAxis: {
|
|
58
72
|
data: chartSeries.categories
|
|
59
73
|
},
|
|
60
|
-
yAxis: {
|
|
74
|
+
yAxis: {
|
|
75
|
+
splitLine: {
|
|
76
|
+
lineStyle: {
|
|
77
|
+
color: "var(--salt-separable-tertiary-borderColor)"
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
61
81
|
};
|
|
62
82
|
};
|
|
63
83
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useChartOptions.js","sources":["../../../packages/vuu-chart/src/useChartOptions.ts"],"sourcesContent":["import { type EChartsCoreOption } from \"echarts\";\nimport { useMemo, useState } from \"react\";\nimport { ChartSeries, ItemColorFunction } from \"./ChartSeries\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { itemsChanged } from \"@vuu-ui/vuu-utils\";\n\nconst defaultPalette = [\n \"#4676bf\",\n \"#ab6528\",\n \"#9f55c2\",\n \"#2a8285\",\n \"#697694\",\n \"#B0549d\",\n];\nexport interface ChartOptionsProps {\n categoryColumnName: string;\n dataSource: DataSource;\n itemColorFunction?: ItemColorFunction;\n palette?: string[];\n seriesColumnNames: string[];\n}\n\nexport const useChartOptions = ({\n categoryColumnName,\n dataSource,\n itemColorFunction,\n palette = defaultPalette,\n seriesColumnNames,\n}: ChartOptionsProps) => {\n const [, forceRender] = useState({});\n\n const chartSeries = useMemo(() => {\n console.log(\"new ChartSeries\");\n const cs = new ChartSeries({\n itemColorFunction,\n dataSource,\n });\n cs.on(\"update\", () => forceRender({}));\n return cs;\n }, [dataSource, itemColorFunction]);\n\n useMemo(() => {\n if (categoryColumnName !== chartSeries.categoryColumn) {\n chartSeries.categoryColumn = categoryColumnName;\n }\n if (itemsChanged(seriesColumnNames, chartSeries.seriesColumnNames)) {\n chartSeries.seriesColumnNames = seriesColumnNames;\n }\n }, [categoryColumnName, chartSeries, seriesColumnNames]);\n\n return {\n animation: false,\n color: palette,\n dataZoom: [\n {\n type: \"slider\",\n start: 0,\n end: 100,\n },\n ],\n grid: {\n left: \"0\",\n bottom: 0,\n right: 5,\n },\n series: chartSeries.series,\n tooltip: {\n
|
|
1
|
+
{"version":3,"file":"useChartOptions.js","sources":["../../../packages/vuu-chart/src/useChartOptions.ts"],"sourcesContent":["import { type EChartsCoreOption } from \"echarts\";\nimport { useMemo, useState } from \"react\";\nimport { ChartSeries, ItemColorFunction } from \"./ChartSeries\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { itemsChanged } from \"@vuu-ui/vuu-utils\";\n\nconst defaultPalette = [\n \"#4676bf\",\n \"#ab6528\",\n \"#9f55c2\",\n \"#2a8285\",\n \"#697694\",\n \"#B0549d\",\n];\nexport interface ChartOptionsProps {\n categoryColumnName: string;\n dataSource: DataSource;\n itemColorFunction?: ItemColorFunction;\n palette?: string[];\n seriesColumnNames: string[];\n showTooltip?: boolean;\n}\n\nexport const useChartOptions = ({\n categoryColumnName,\n dataSource,\n itemColorFunction,\n palette = defaultPalette,\n seriesColumnNames,\n showTooltip = true,\n}: ChartOptionsProps) => {\n const [, forceRender] = useState({});\n\n const chartSeries = useMemo(() => {\n console.log(\"new ChartSeries\");\n const cs = new ChartSeries({\n itemColorFunction,\n dataSource,\n });\n cs.on(\"update\", () => forceRender({}));\n return cs;\n }, [dataSource, itemColorFunction]);\n\n useMemo(() => {\n if (categoryColumnName !== chartSeries.categoryColumn) {\n chartSeries.categoryColumn = categoryColumnName;\n }\n if (itemsChanged(seriesColumnNames, chartSeries.seriesColumnNames)) {\n chartSeries.seriesColumnNames = seriesColumnNames;\n }\n }, [categoryColumnName, chartSeries, seriesColumnNames]);\n\n return {\n animation: false,\n color: palette,\n dataZoom: [\n {\n 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 backgroundColor: \"\",\n borderColor: \"\",\n // borderWidth: \"\",\n className: \"vuuChartTooltip\",\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":[],"mappings":";;;;AAMA,MAAM,cAAiB,GAAA;AAAA,EACrB,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA;AAUO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,kBAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,OAAU,GAAA,cAAA;AAAA,EACV,iBAAA;AAAA,EACA,WAAc,GAAA;AAChB,CAAyB,KAAA;AACvB,EAAA,MAAM,GAAG,WAAW,CAAI,GAAA,QAAA,CAAS,EAAE,CAAA;AAEnC,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,OAAA,CAAQ,IAAI,iBAAiB,CAAA;AAC7B,IAAM,MAAA,EAAA,GAAK,IAAI,WAAY,CAAA;AAAA,MACzB,iBAAA;AAAA,MACA;AAAA,KACD,CAAA;AACD,IAAA,EAAA,CAAG,GAAG,QAAU,EAAA,MAAM,WAAY,CAAA,EAAE,CAAC,CAAA;AACrC,IAAO,OAAA,EAAA;AAAA,GACN,EAAA,CAAC,UAAY,EAAA,iBAAiB,CAAC,CAAA;AAElC,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAI,IAAA,kBAAA,KAAuB,YAAY,cAAgB,EAAA;AACrD,MAAA,WAAA,CAAY,cAAiB,GAAA,kBAAA;AAAA;AAE/B,IAAA,IAAI,YAAa,CAAA,iBAAA,EAAmB,WAAY,CAAA,iBAAiB,CAAG,EAAA;AAClE,MAAA,WAAA,CAAY,iBAAoB,GAAA,iBAAA;AAAA;AAClC,GACC,EAAA,CAAC,kBAAoB,EAAA,WAAA,EAAa,iBAAiB,CAAC,CAAA;AAEvD,EAAO,OAAA;AAAA,IACL,SAAW,EAAA,KAAA;AAAA,IACX,KAAO,EAAA,OAAA;AAAA,IACP,QAAU,EAAA;AAAA,MACR;AAAA,QACE,eAAiB,EAAA,8CAAA;AAAA,QACjB,WAAa,EAAA,yCAAA;AAAA,QACb,WAAa,EAAA;AAAA,UACX,KAAO,EAAA;AAAA,SACT;AAAA,QACA,eAAiB,EAAA;AAAA,UACf,KAAO,EAAA;AAAA,SACT;AAAA,QACA,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,SAAS,WACL,GAAA;AAAA,MACE,eAAiB,EAAA,EAAA;AAAA,MACjB,WAAa,EAAA,EAAA;AAAA;AAAA,MAEb,SAAW,EAAA,iBAAA;AAAA;AAAA,MAEX,OAAS,EAAA;AAAA,KAEX,GAAA,KAAA,CAAA;AAAA,IACJ,KAAO,EAAA;AAAA,MACL,MAAM,WAAY,CAAA;AAAA,KACpB;AAAA,IACA,KAAO,EAAA;AAAA,MACL,SAAW,EAAA;AAAA,QACT,SAAW,EAAA;AAAA,UACT,KAAO,EAAA;AAAA;AACT;AACF;AACF,GACF;AACF;;;;"}
|
package/package.json
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "2.1.
|
|
2
|
+
"version": "2.1.6",
|
|
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.
|
|
7
|
-
"@vuu-ui/vuu-protocol-types": "2.1.
|
|
6
|
+
"@vuu-ui/vuu-data-types": "2.1.6",
|
|
7
|
+
"@vuu-ui/vuu-protocol-types": "2.1.6"
|
|
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.
|
|
13
|
-
"@vuu-ui/vuu-utils": "2.1.
|
|
12
|
+
"@vuu-ui/vuu-context-menu": "2.1.6",
|
|
13
|
+
"@vuu-ui/vuu-utils": "2.1.6",
|
|
14
|
+
"clsx": "^2.0.0"
|
|
14
15
|
},
|
|
15
16
|
"peerDependencies": {
|
|
16
17
|
"echarts": "6.0.0",
|
package/types/Chart.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ export interface ChartProps extends ChartOptionsProps, HTMLAttributes<HTMLDivEle
|
|
|
13
13
|
itemColorFunction?: ItemColorFunction;
|
|
14
14
|
optionSettings?: OptionSettings;
|
|
15
15
|
palette?: string[];
|
|
16
|
+
showTooltip?: boolean;
|
|
16
17
|
}
|
|
17
|
-
export declare const Chart: ({ categoryColumnName, chartSettings, dataSource, itemColorFunction, optionSettings, palette, style, seriesColumnNames, ...htmlAttributes }: ChartProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare const Chart: ({ categoryColumnName, chartSettings, className, dataSource, itemColorFunction, optionSettings, palette, showTooltip, style, seriesColumnNames, ...htmlAttributes }: ChartProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
19
|
export {};
|
|
@@ -7,5 +7,6 @@ export interface ChartOptionsProps {
|
|
|
7
7
|
itemColorFunction?: ItemColorFunction;
|
|
8
8
|
palette?: string[];
|
|
9
9
|
seriesColumnNames: string[];
|
|
10
|
+
showTooltip?: boolean;
|
|
10
11
|
}
|
|
11
|
-
export declare const useChartOptions: ({ categoryColumnName, dataSource, itemColorFunction, palette, seriesColumnNames, }: ChartOptionsProps) => EChartsCoreOption;
|
|
12
|
+
export declare const useChartOptions: ({ categoryColumnName, dataSource, itemColorFunction, palette, seriesColumnNames, showTooltip, }: ChartOptionsProps) => EChartsCoreOption;
|