@hitachivantara/uikit-react-viz 5.12.1 → 5.12.3
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/dist/cjs/BaseChart/BaseChart.cjs +1 -1
- package/dist/cjs/hooks/useDataZoom.cjs +7 -5
- package/dist/esm/BaseChart/BaseChart.js +1 -1
- package/dist/esm/BaseChart/BaseChart.js.map +1 -1
- package/dist/esm/hooks/useDataZoom.js +7 -5
- package/dist/esm/hooks/useDataZoom.js.map +1 -1
- package/package.json +3 -3
|
@@ -56,7 +56,7 @@ const HvBaseChart = react.forwardRef(
|
|
|
56
56
|
if (!instance)
|
|
57
57
|
return;
|
|
58
58
|
instance.setOption(option, {
|
|
59
|
-
replaceMerge: ["xAxis", "yAxis", "series", "dataset"]
|
|
59
|
+
replaceMerge: ["xAxis", "yAxis", "series", "dataset", "dataZoom"]
|
|
60
60
|
});
|
|
61
61
|
}, [theme, option]);
|
|
62
62
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1,23 +1,25 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const react = require("react");
|
|
4
|
-
const useDataZoom = ({
|
|
4
|
+
const useDataZoom = ({
|
|
5
|
+
showHorizontal = false
|
|
6
|
+
}) => {
|
|
5
7
|
const option = react.useMemo(() => {
|
|
6
8
|
return {
|
|
7
|
-
dataZoom: [
|
|
9
|
+
dataZoom: showHorizontal ? [
|
|
8
10
|
{
|
|
9
|
-
show:
|
|
11
|
+
show: true,
|
|
10
12
|
type: "slider",
|
|
11
13
|
orient: "horizontal"
|
|
12
14
|
},
|
|
13
15
|
{
|
|
14
|
-
show:
|
|
16
|
+
show: true,
|
|
15
17
|
type: "inside",
|
|
16
18
|
orient: "horizontal",
|
|
17
19
|
zoomOnMouseWheel: "shift",
|
|
18
20
|
moveOnMouseWheel: true
|
|
19
21
|
}
|
|
20
|
-
]
|
|
22
|
+
] : []
|
|
21
23
|
};
|
|
22
24
|
}, [showHorizontal]);
|
|
23
25
|
return option;
|
|
@@ -33,7 +33,7 @@ const HvBaseChart = forwardRef(
|
|
|
33
33
|
if (!instance)
|
|
34
34
|
return;
|
|
35
35
|
instance.setOption(option, {
|
|
36
|
-
replaceMerge: ["xAxis", "yAxis", "series", "dataset"]
|
|
36
|
+
replaceMerge: ["xAxis", "yAxis", "series", "dataset", "dataZoom"]
|
|
37
37
|
});
|
|
38
38
|
}, [theme, option]);
|
|
39
39
|
return /* @__PURE__ */ jsx(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseChart.js","sources":["../../../src/BaseChart/BaseChart.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { AriaComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { CanvasRenderer } from \"echarts/renderers\";\n\nimport { useVizTheme } from \"../hooks\";\nimport { HvChartCommonProps, HvEChartsOption } from \"../types/common\";\n\n// Register chart components\necharts.use([CanvasRenderer, AriaComponent]);\n\nexport interface HvBaseChartProps extends Pick<HvChartCommonProps, \"onEvents\"> {\n /** ECharts option. */\n option: HvEChartsOption;\n /** Charts width. */\n width?: echarts.ResizeOpts[\"width\"];\n /** Charts height. */\n height?: echarts.ResizeOpts[\"height\"];\n}\n\n/**\n * Base chart.\n */\nexport const HvBaseChart = forwardRef<ReactECharts, HvBaseChartProps>(\n (props, ref) => {\n const { option, width, height, onEvents, ...others } = props;\n\n const { theme, activeTheme } = useVizTheme();\n\n const currentTheme = useRef<string | undefined>(theme);\n const chartRef = useRef<ReactECharts>(null);\n\n const forkedRef = useForkRef<ReactECharts>(ref, chartRef);\n\n const [initialOption, setInitialOption] = useState<HvEChartsOption>(option);\n\n // Dispose the instance of the chart when the component unmounts. This ensures that\n // the chart theme will update when the theme changes.\n useEffect(() => {\n const instance = chartRef.current?.getEchartsInstance();\n\n if (!instance) return;\n\n return () => {\n instance.dispose();\n };\n }, [activeTheme]);\n\n useEffect(() => {\n // When the theme changes echarts destroys the chart and mounts it again\n // thus we need to reset the initial option\n if (theme !== currentTheme.current) {\n setInitialOption(option);\n currentTheme.current = theme;\n return;\n }\n\n const instance = chartRef.current?.getEchartsInstance();\n\n if (!instance) return;\n\n instance.setOption(option, {\n replaceMerge: [\"xAxis\", \"yAxis\", \"series\", \"dataset\"],\n });\n }, [theme, option]);\n\n return (\n <ReactECharts\n ref={forkedRef}\n echarts={echarts}\n option={initialOption}\n theme={theme}\n notMerge\n style={{\n width: width ?? \"100%\",\n height: height ?? \"100%\",\n }}\n onEvents={onEvents}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;AAWA,QAAQ,IAAI,CAAC,gBAAgB,aAAa,CAAC;AAcpC,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,QAAQ,OAAO,QAAQ,UAAU,GAAG,OAAW,IAAA;AAEvD,UAAM,EAAE,OAAO,YAAY,IAAI,YAAY;AAErC,UAAA,eAAe,OAA2B,KAAK;AAC/C,UAAA,WAAW,OAAqB,IAAI;AAEpC,UAAA,YAAY,WAAyB,KAAK,QAAQ;AAExD,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAA0B,MAAM;AAI1E,cAAU,MAAM;AACR,YAAA,WAAW,SAAS,SAAS,mBAAmB;AAEtD,UAAI,CAAC;AAAU;AAEf,aAAO,MAAM;AACX,iBAAS,QAAQ;AAAA,MAAA;AAAA,IACnB,GACC,CAAC,WAAW,CAAC;AAEhB,cAAU,MAAM;AAGV,UAAA,UAAU,aAAa,SAAS;AAClC,yBAAiB,MAAM;AACvB,qBAAa,UAAU;AACvB;AAAA,MACF;AAEM,YAAA,WAAW,SAAS,SAAS,mBAAmB;AAEtD,UAAI,CAAC;AAAU;
|
|
1
|
+
{"version":3,"file":"BaseChart.js","sources":["../../../src/BaseChart/BaseChart.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { AriaComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { CanvasRenderer } from \"echarts/renderers\";\n\nimport { useVizTheme } from \"../hooks\";\nimport { HvChartCommonProps, HvEChartsOption } from \"../types/common\";\n\n// Register chart components\necharts.use([CanvasRenderer, AriaComponent]);\n\nexport interface HvBaseChartProps extends Pick<HvChartCommonProps, \"onEvents\"> {\n /** ECharts option. */\n option: HvEChartsOption;\n /** Charts width. */\n width?: echarts.ResizeOpts[\"width\"];\n /** Charts height. */\n height?: echarts.ResizeOpts[\"height\"];\n}\n\n/**\n * Base chart.\n */\nexport const HvBaseChart = forwardRef<ReactECharts, HvBaseChartProps>(\n (props, ref) => {\n const { option, width, height, onEvents, ...others } = props;\n\n const { theme, activeTheme } = useVizTheme();\n\n const currentTheme = useRef<string | undefined>(theme);\n const chartRef = useRef<ReactECharts>(null);\n\n const forkedRef = useForkRef<ReactECharts>(ref, chartRef);\n\n const [initialOption, setInitialOption] = useState<HvEChartsOption>(option);\n\n // Dispose the instance of the chart when the component unmounts. This ensures that\n // the chart theme will update when the theme changes.\n useEffect(() => {\n const instance = chartRef.current?.getEchartsInstance();\n\n if (!instance) return;\n\n return () => {\n instance.dispose();\n };\n }, [activeTheme]);\n\n useEffect(() => {\n // When the theme changes echarts destroys the chart and mounts it again\n // thus we need to reset the initial option\n if (theme !== currentTheme.current) {\n setInitialOption(option);\n currentTheme.current = theme;\n return;\n }\n\n const instance = chartRef.current?.getEchartsInstance();\n\n if (!instance) return;\n\n // More info: https://echarts.apache.org/en/api.html#echartsInstance.setOption\n instance.setOption(option, {\n replaceMerge: [\"xAxis\", \"yAxis\", \"series\", \"dataset\", \"dataZoom\"],\n });\n }, [theme, option]);\n\n return (\n <ReactECharts\n ref={forkedRef}\n echarts={echarts}\n option={initialOption}\n theme={theme}\n notMerge // When true all the current components will be removed and new components will be created according to the new option\n style={{\n width: width ?? \"100%\",\n height: height ?? \"100%\",\n }}\n onEvents={onEvents}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;AAWA,QAAQ,IAAI,CAAC,gBAAgB,aAAa,CAAC;AAcpC,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,QAAQ,OAAO,QAAQ,UAAU,GAAG,OAAW,IAAA;AAEvD,UAAM,EAAE,OAAO,YAAY,IAAI,YAAY;AAErC,UAAA,eAAe,OAA2B,KAAK;AAC/C,UAAA,WAAW,OAAqB,IAAI;AAEpC,UAAA,YAAY,WAAyB,KAAK,QAAQ;AAExD,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAA0B,MAAM;AAI1E,cAAU,MAAM;AACR,YAAA,WAAW,SAAS,SAAS,mBAAmB;AAEtD,UAAI,CAAC;AAAU;AAEf,aAAO,MAAM;AACX,iBAAS,QAAQ;AAAA,MAAA;AAAA,IACnB,GACC,CAAC,WAAW,CAAC;AAEhB,cAAU,MAAM;AAGV,UAAA,UAAU,aAAa,SAAS;AAClC,yBAAiB,MAAM;AACvB,qBAAa,UAAU;AACvB;AAAA,MACF;AAEM,YAAA,WAAW,SAAS,SAAS,mBAAmB;AAEtD,UAAI,CAAC;AAAU;AAGf,eAAS,UAAU,QAAQ;AAAA,QACzB,cAAc,CAAC,SAAS,SAAS,UAAU,WAAW,UAAU;AAAA,MAAA,CACjE;AAAA,IAAA,GACA,CAAC,OAAO,MAAM,CAAC;AAGhB,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA,UAAQ;AAAA,QACR,OAAO;AAAA,UACL,OAAO,SAAS;AAAA,UAChB,QAAQ,UAAU;AAAA,QACpB;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
|
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
|
-
const useDataZoom = ({
|
|
2
|
+
const useDataZoom = ({
|
|
3
|
+
showHorizontal = false
|
|
4
|
+
}) => {
|
|
3
5
|
const option = useMemo(() => {
|
|
4
6
|
return {
|
|
5
|
-
dataZoom: [
|
|
7
|
+
dataZoom: showHorizontal ? [
|
|
6
8
|
{
|
|
7
|
-
show:
|
|
9
|
+
show: true,
|
|
8
10
|
type: "slider",
|
|
9
11
|
orient: "horizontal"
|
|
10
12
|
},
|
|
11
13
|
{
|
|
12
|
-
show:
|
|
14
|
+
show: true,
|
|
13
15
|
type: "inside",
|
|
14
16
|
orient: "horizontal",
|
|
15
17
|
zoomOnMouseWheel: "shift",
|
|
16
18
|
moveOnMouseWheel: true
|
|
17
19
|
}
|
|
18
|
-
]
|
|
20
|
+
] : []
|
|
19
21
|
};
|
|
20
22
|
}, [showHorizontal]);
|
|
21
23
|
return option;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDataZoom.js","sources":["../../../src/hooks/useDataZoom.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvEChartsOption } from \"../types/common\";\n\ninterface HvDataZoomHookProps {\n showHorizontal?: boolean;\n}\n\nexport const useDataZoom = ({
|
|
1
|
+
{"version":3,"file":"useDataZoom.js","sources":["../../../src/hooks/useDataZoom.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvEChartsOption } from \"../types/common\";\n\ninterface HvDataZoomHookProps {\n showHorizontal?: boolean;\n}\n\nexport const useDataZoom = ({\n showHorizontal = false,\n}: HvDataZoomHookProps) => {\n const option = useMemo<Pick<HvEChartsOption, \"dataZoom\">>(() => {\n return {\n dataZoom: showHorizontal\n ? [\n {\n show: true,\n type: \"slider\",\n orient: \"horizontal\",\n },\n {\n show: true,\n type: \"inside\",\n orient: \"horizontal\",\n zoomOnMouseWheel: \"shift\",\n moveOnMouseWheel: true,\n },\n ]\n : [],\n };\n }, [showHorizontal]);\n\n return option;\n};\n"],"names":[],"mappings":";AAQO,MAAM,cAAc,CAAC;AAAA,EAC1B,iBAAiB;AACnB,MAA2B;AACnB,QAAA,SAAS,QAA2C,MAAM;AACvD,WAAA;AAAA,MACL,UAAU,iBACN;AAAA,QACE;AAAA,UACE,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,QACV;AAAA,QACA;AAAA,UACE,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,kBAAkB;AAAA,UAClB,kBAAkB;AAAA,QACpB;AAAA,MAAA,IAEF,CAAC;AAAA,IAAA;AAAA,EACP,GACC,CAAC,cAAc,CAAC;AAEZ,SAAA;AACT;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-viz",
|
|
3
|
-
"version": "5.12.
|
|
3
|
+
"version": "5.12.3",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Contributed React visualization components for the NEXT UI Kit.",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@emotion/css": "^11.11.0",
|
|
36
|
-
"@hitachivantara/uikit-react-core": "^5.
|
|
36
|
+
"@hitachivantara/uikit-react-core": "^5.65.0"
|
|
37
37
|
},
|
|
38
38
|
"files": [
|
|
39
39
|
"dist"
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"access": "public",
|
|
43
43
|
"directory": "package"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "cb05193961d5b75c15c779f8f573e0e5f07becee",
|
|
46
46
|
"exports": {
|
|
47
47
|
".": {
|
|
48
48
|
"require": "./dist/cjs/index.cjs",
|