@hitachivantara/uikit-react-viz 5.6.26 → 5.6.28
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/components/BarChart/BarChart.cjs +82 -80
- package/dist/cjs/components/BarChart/BarChart.cjs.map +1 -1
- package/dist/cjs/components/BaseChart/BaseChart.cjs +42 -36
- package/dist/cjs/components/BaseChart/BaseChart.cjs.map +1 -1
- package/dist/cjs/components/ConfusionMatrix/ConfusionMatrix.cjs +28 -17
- package/dist/cjs/components/ConfusionMatrix/ConfusionMatrix.cjs.map +1 -1
- package/dist/cjs/components/ConfusionMatrix/ConfusionMatrix.styles.cjs +22 -22
- package/dist/cjs/components/ConfusionMatrix/ConfusionMatrix.styles.cjs.map +1 -1
- package/dist/cjs/components/ConfusionMatrix/utils.cjs +32 -23
- package/dist/cjs/components/ConfusionMatrix/utils.cjs.map +1 -1
- package/dist/cjs/components/DonutChart/DonutChart.cjs +60 -59
- package/dist/cjs/components/DonutChart/DonutChart.cjs.map +1 -1
- package/dist/cjs/components/LineChart/LineChart.cjs +80 -81
- package/dist/cjs/components/LineChart/LineChart.cjs.map +1 -1
- package/dist/cjs/hooks/tooltip/styles.cjs +2 -7
- package/dist/cjs/hooks/tooltip/styles.cjs.map +1 -1
- package/dist/cjs/hooks/tooltip/useTooltip.cjs +55 -37
- package/dist/cjs/hooks/tooltip/useTooltip.cjs.map +1 -1
- package/dist/cjs/hooks/useData.cjs +24 -22
- package/dist/cjs/hooks/useData.cjs.map +1 -1
- package/dist/cjs/hooks/useDataZoom.cjs +15 -14
- package/dist/cjs/hooks/useDataZoom.cjs.map +1 -1
- package/dist/cjs/hooks/useDataset.cjs +7 -4
- package/dist/cjs/hooks/useDataset.cjs.map +1 -1
- package/dist/cjs/hooks/useGrid.cjs.map +1 -1
- package/dist/cjs/hooks/useLegend.cjs +5 -7
- package/dist/cjs/hooks/useLegend.cjs.map +1 -1
- package/dist/cjs/hooks/useOption.cjs +1 -4
- package/dist/cjs/hooks/useOption.cjs.map +1 -1
- package/dist/cjs/hooks/useSeries.cjs +14 -4
- package/dist/cjs/hooks/useSeries.cjs.map +1 -1
- package/dist/cjs/hooks/useVisualMap.cjs +11 -1
- package/dist/cjs/hooks/useVisualMap.cjs.map +1 -1
- package/dist/cjs/hooks/useVizTheme.cjs.map +1 -1
- package/dist/cjs/hooks/useXAxis.cjs +17 -10
- package/dist/cjs/hooks/useXAxis.cjs.map +1 -1
- package/dist/cjs/hooks/useYAxis.cjs +41 -44
- package/dist/cjs/hooks/useYAxis.cjs.map +1 -1
- package/dist/cjs/providers/Provider.cjs +3 -11
- package/dist/cjs/providers/Provider.cjs.map +1 -1
- package/dist/cjs/utils/getAgFunc.cjs.map +1 -1
- package/dist/cjs/utils/getAxisType.cjs.map +1 -1
- package/dist/cjs/utils/getGroupKey.cjs.map +1 -1
- package/dist/cjs/utils/getLegendIcon.cjs.map +1 -1
- package/dist/cjs/utils/getMeasure.cjs.map +1 -1
- package/dist/cjs/utils/registerTheme.cjs +15 -4
- package/dist/cjs/utils/registerTheme.cjs.map +1 -1
- package/dist/esm/components/BarChart/BarChart.js +82 -80
- package/dist/esm/components/BarChart/BarChart.js.map +1 -1
- package/dist/esm/components/BaseChart/BaseChart.js +42 -36
- package/dist/esm/components/BaseChart/BaseChart.js.map +1 -1
- package/dist/esm/components/ConfusionMatrix/ConfusionMatrix.js +28 -17
- package/dist/esm/components/ConfusionMatrix/ConfusionMatrix.js.map +1 -1
- package/dist/esm/components/ConfusionMatrix/ConfusionMatrix.styles.js +22 -22
- package/dist/esm/components/ConfusionMatrix/ConfusionMatrix.styles.js.map +1 -1
- package/dist/esm/components/ConfusionMatrix/utils.js +32 -23
- package/dist/esm/components/ConfusionMatrix/utils.js.map +1 -1
- package/dist/esm/components/DonutChart/DonutChart.js +60 -59
- package/dist/esm/components/DonutChart/DonutChart.js.map +1 -1
- package/dist/esm/components/LineChart/LineChart.js +80 -81
- package/dist/esm/components/LineChart/LineChart.js.map +1 -1
- package/dist/esm/hooks/tooltip/styles.js +2 -7
- package/dist/esm/hooks/tooltip/styles.js.map +1 -1
- package/dist/esm/hooks/tooltip/useTooltip.js +55 -37
- package/dist/esm/hooks/tooltip/useTooltip.js.map +1 -1
- package/dist/esm/hooks/useData.js +24 -22
- package/dist/esm/hooks/useData.js.map +1 -1
- package/dist/esm/hooks/useDataZoom.js +15 -14
- package/dist/esm/hooks/useDataZoom.js.map +1 -1
- package/dist/esm/hooks/useDataset.js +7 -4
- package/dist/esm/hooks/useDataset.js.map +1 -1
- package/dist/esm/hooks/useGrid.js.map +1 -1
- package/dist/esm/hooks/useLegend.js +5 -7
- package/dist/esm/hooks/useLegend.js.map +1 -1
- package/dist/esm/hooks/useOption.js +1 -4
- package/dist/esm/hooks/useOption.js.map +1 -1
- package/dist/esm/hooks/useSeries.js +14 -4
- package/dist/esm/hooks/useSeries.js.map +1 -1
- package/dist/esm/hooks/useVisualMap.js +11 -1
- package/dist/esm/hooks/useVisualMap.js.map +1 -1
- package/dist/esm/hooks/useVizTheme.js.map +1 -1
- package/dist/esm/hooks/useXAxis.js +17 -10
- package/dist/esm/hooks/useXAxis.js.map +1 -1
- package/dist/esm/hooks/useYAxis.js +41 -44
- package/dist/esm/hooks/useYAxis.js.map +1 -1
- package/dist/esm/providers/Provider.js +3 -11
- package/dist/esm/providers/Provider.js.map +1 -1
- package/dist/esm/utils/getAgFunc.js.map +1 -1
- package/dist/esm/utils/getAxisType.js.map +1 -1
- package/dist/esm/utils/getGroupKey.js.map +1 -1
- package/dist/esm/utils/getLegendIcon.js.map +1 -1
- package/dist/esm/utils/getMeasure.js.map +1 -1
- package/dist/esm/utils/registerTheme.js +15 -4
- package/dist/esm/utils/registerTheme.js.map +1 -1
- package/package.json +5 -5
|
@@ -7,52 +7,49 @@ const useYAxis = ({
|
|
|
7
7
|
axes,
|
|
8
8
|
defaultType = "continuous"
|
|
9
9
|
}) => {
|
|
10
|
-
const {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const createAxis = react.useCallback(({
|
|
14
|
-
id,
|
|
15
|
-
type,
|
|
16
|
-
name,
|
|
17
|
-
labelFormatter,
|
|
18
|
-
labelRotation,
|
|
19
|
-
maxValue,
|
|
20
|
-
minValue,
|
|
21
|
-
nameProps,
|
|
22
|
-
data,
|
|
23
|
-
position
|
|
24
|
-
}) => {
|
|
25
|
-
const nameStyleKeys = nameProps ? Object.keys(nameProps).filter((key) => key !== "location") : void 0;
|
|
26
|
-
const nameStyle = nameProps && nameStyleKeys ? nameStyleKeys.reduce((acc, curr) => {
|
|
27
|
-
return {
|
|
28
|
-
...acc,
|
|
29
|
-
[curr]: curr === "color" ? colors?.[nameProps[curr]] || nameProps[curr] : nameProps[curr]
|
|
30
|
-
};
|
|
31
|
-
}, {}) : void 0;
|
|
32
|
-
return {
|
|
10
|
+
const { colors } = uikitReactCore.useTheme();
|
|
11
|
+
const createAxis = react.useCallback(
|
|
12
|
+
({
|
|
33
13
|
id,
|
|
34
|
-
type
|
|
14
|
+
type,
|
|
35
15
|
name,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
},
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
16
|
+
labelFormatter,
|
|
17
|
+
labelRotation,
|
|
18
|
+
maxValue,
|
|
19
|
+
minValue,
|
|
20
|
+
nameProps,
|
|
21
|
+
data,
|
|
22
|
+
position
|
|
23
|
+
}) => {
|
|
24
|
+
const nameStyleKeys = nameProps ? Object.keys(nameProps).filter((key) => key !== "location") : void 0;
|
|
25
|
+
const nameStyle = nameProps && nameStyleKeys ? nameStyleKeys.reduce((acc, curr) => {
|
|
26
|
+
return {
|
|
27
|
+
...acc,
|
|
28
|
+
[curr]: curr === "color" ? colors?.[nameProps[curr]] || nameProps[curr] : nameProps[curr]
|
|
29
|
+
};
|
|
30
|
+
}, {}) : void 0;
|
|
31
|
+
return {
|
|
32
|
+
id,
|
|
33
|
+
type: getAxisType.getAxisType(type) ?? getAxisType.getAxisType(defaultType),
|
|
34
|
+
name,
|
|
35
|
+
axisLabel: {
|
|
36
|
+
rotate: labelRotation ?? 0,
|
|
37
|
+
formatter: labelFormatter
|
|
38
|
+
},
|
|
39
|
+
max: maxValue === "max" ? "dataMax" : maxValue,
|
|
40
|
+
min: minValue === "min" ? "dataMin" : minValue,
|
|
41
|
+
...nameProps?.location && {
|
|
42
|
+
nameLocation: nameProps?.location
|
|
43
|
+
},
|
|
44
|
+
...nameStyle && {
|
|
45
|
+
nameTextStyle: nameStyle
|
|
46
|
+
},
|
|
47
|
+
...data && { data },
|
|
48
|
+
...position && { position }
|
|
49
|
+
};
|
|
50
|
+
},
|
|
51
|
+
[colors, defaultType]
|
|
52
|
+
);
|
|
56
53
|
const option = react.useMemo(() => {
|
|
57
54
|
return {
|
|
58
55
|
yAxis: Array.isArray(axes) ? axes.map((axis) => createAxis(axis)) : [createAxis({})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useYAxis.cjs","sources":["../../../src/hooks/useYAxis.tsx"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvChartAxisType } from \"@viz/types\";\nimport { HvChartYAxis, HvEChartsOption } from \"@viz/types/common\";\n\ninterface YAxis extends HvChartYAxis {\n data?: string[];\n}\n\ninterface HvYAxisHookProps {\n axes?: YAxis[];\n defaultType?: HvChartAxisType;\n}\n\nexport const useYAxis = ({\n axes,\n defaultType = \"continuous\",\n}: HvYAxisHookProps) => {\n const { colors } = useTheme();\n\n const createAxis = useCallback(\n ({\n id,\n type,\n name,\n labelFormatter,\n labelRotation,\n maxValue,\n minValue,\n nameProps,\n data,\n position,\n }: YAxis) => {\n const nameStyleKeys = nameProps\n ? Object.keys(nameProps).filter((key) => key !== \"location\")\n : undefined;\n const nameStyle =\n nameProps && nameStyleKeys\n ? nameStyleKeys.reduce((acc, curr) => {\n return {\n ...acc,\n [curr]:\n curr === \"color\"\n ? colors?.[nameProps[curr] as string] || nameProps[curr]\n : nameProps[curr],\n };\n }, {})\n : undefined;\n\n return {\n id,\n type: getAxisType(type) ?? getAxisType(defaultType),\n name,\n axisLabel: {\n rotate: labelRotation ?? 0,\n formatter: labelFormatter,\n },\n max: maxValue === \"max\" ? \"dataMax\" : maxValue,\n min: minValue === \"min\" ? \"dataMin\" : minValue,\n ...(nameProps?.location && {\n nameLocation: nameProps?.location,\n }),\n ...(nameStyle && {\n nameTextStyle: nameStyle,\n }),\n ...(data && { data }),\n ...(position && { position }),\n };\n },\n [colors, defaultType]\n );\n\n const option = useMemo<Pick<HvEChartsOption, \"yAxis\">>(() => {\n return {\n yAxis: Array.isArray(axes)\n ? axes.map((axis) => createAxis(axis))\n : [createAxis({})],\n };\n }, [axes, createAxis]);\n\n return option;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"file":"useYAxis.cjs","sources":["../../../src/hooks/useYAxis.tsx"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvChartAxisType } from \"@viz/types\";\nimport { HvChartYAxis, HvEChartsOption } from \"@viz/types/common\";\n\ninterface YAxis extends HvChartYAxis {\n data?: string[];\n}\n\ninterface HvYAxisHookProps {\n axes?: YAxis[];\n defaultType?: HvChartAxisType;\n}\n\nexport const useYAxis = ({\n axes,\n defaultType = \"continuous\",\n}: HvYAxisHookProps) => {\n const { colors } = useTheme();\n\n const createAxis = useCallback(\n ({\n id,\n type,\n name,\n labelFormatter,\n labelRotation,\n maxValue,\n minValue,\n nameProps,\n data,\n position,\n }: YAxis) => {\n const nameStyleKeys = nameProps\n ? Object.keys(nameProps).filter((key) => key !== \"location\")\n : undefined;\n const nameStyle =\n nameProps && nameStyleKeys\n ? nameStyleKeys.reduce((acc, curr) => {\n return {\n ...acc,\n [curr]:\n curr === \"color\"\n ? colors?.[nameProps[curr] as string] || nameProps[curr]\n : nameProps[curr],\n };\n }, {})\n : undefined;\n\n return {\n id,\n type: getAxisType(type) ?? getAxisType(defaultType),\n name,\n axisLabel: {\n rotate: labelRotation ?? 0,\n formatter: labelFormatter,\n },\n max: maxValue === \"max\" ? \"dataMax\" : maxValue,\n min: minValue === \"min\" ? \"dataMin\" : minValue,\n ...(nameProps?.location && {\n nameLocation: nameProps?.location,\n }),\n ...(nameStyle && {\n nameTextStyle: nameStyle,\n }),\n ...(data && { data }),\n ...(position && { position }),\n };\n },\n [colors, defaultType]\n );\n\n const option = useMemo<Pick<HvEChartsOption, \"yAxis\">>(() => {\n return {\n yAxis: Array.isArray(axes)\n ? axes.map((axis) => createAxis(axis))\n : [createAxis({})],\n };\n }, [axes, createAxis]);\n\n return option;\n};\n"],"names":["useTheme","useCallback","getAxisType","useMemo"],"mappings":";;;;;AAiBO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,cAAc;AAChB,MAAwB;AAChB,QAAA,EAAE,WAAWA,eAAAA;AAEnB,QAAM,aAAaC,MAAA;AAAA,IACjB,CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,MACW;AACL,YAAA,gBAAgB,YAClB,OAAO,KAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,QAAQ,UAAU,IACzD;AACJ,YAAM,YACJ,aAAa,gBACT,cAAc,OAAO,CAAC,KAAK,SAAS;AAC3B,eAAA;AAAA,UACL,GAAG;AAAA,UACH,CAAC,IAAI,GACH,SAAS,UACL,SAAS,UAAU,IAAI,CAAW,KAAK,UAAU,IAAI,IACrD,UAAU,IAAI;AAAA,QAAA;AAAA,MACtB,GACC,CAAE,CAAA,IACL;AAEC,aAAA;AAAA,QACL;AAAA,QACA,MAAMC,YAAAA,YAAY,IAAI,KAAKA,YAAAA,YAAY,WAAW;AAAA,QAClD;AAAA,QACA,WAAW;AAAA,UACT,QAAQ,iBAAiB;AAAA,UACzB,WAAW;AAAA,QACb;AAAA,QACA,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,GAAI,WAAW,YAAY;AAAA,UACzB,cAAc,WAAW;AAAA,QAC3B;AAAA,QACA,GAAI,aAAa;AAAA,UACf,eAAe;AAAA,QACjB;AAAA,QACA,GAAI,QAAQ,EAAE,KAAK;AAAA,QACnB,GAAI,YAAY,EAAE,SAAS;AAAA,MAAA;AAAA,IAE/B;AAAA,IACA,CAAC,QAAQ,WAAW;AAAA,EAAA;AAGhB,QAAA,SAASC,MAAAA,QAAwC,MAAM;AACpD,WAAA;AAAA,MACL,OAAO,MAAM,QAAQ,IAAI,IACrB,KAAK,IAAI,CAAC,SAAS,WAAW,IAAI,CAAC,IACnC,CAAC,WAAW,CAAE,CAAA,CAAC;AAAA,IAAA;AAAA,EACrB,GACC,CAAC,MAAM,UAAU,CAAC;AAEd,SAAA;AACT;;"}
|
|
@@ -7,19 +7,11 @@ const registerTheme = require("../utils/registerTheme.cjs");
|
|
|
7
7
|
const HvVizContext = react.createContext({
|
|
8
8
|
theme: void 0
|
|
9
9
|
});
|
|
10
|
-
const HvVizProvider = ({
|
|
11
|
-
|
|
12
|
-
}) => {
|
|
13
|
-
const {
|
|
14
|
-
activeTheme,
|
|
15
|
-
selectedMode,
|
|
16
|
-
selectedTheme
|
|
17
|
-
} = uikitReactCore.useTheme();
|
|
10
|
+
const HvVizProvider = ({ children }) => {
|
|
11
|
+
const { activeTheme, selectedMode, selectedTheme } = uikitReactCore.useTheme();
|
|
18
12
|
const value = react.useMemo(() => {
|
|
19
13
|
registerTheme.registerTheme(selectedTheme, selectedMode, activeTheme);
|
|
20
|
-
return {
|
|
21
|
-
theme: `${selectedTheme}-${selectedMode}`
|
|
22
|
-
};
|
|
14
|
+
return { theme: `${selectedTheme}-${selectedMode}` };
|
|
23
15
|
}, [selectedTheme, selectedMode, activeTheme]);
|
|
24
16
|
return /* @__PURE__ */ jsxRuntime.jsx(HvVizContext.Provider, { value, children });
|
|
25
17
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Provider.cjs","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { createContext, useMemo } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { registerTheme } from \"@viz/utils\";\n\nexport interface HvVizContextValue {\n /**\n * Current theme\n */\n theme?: string;\n}\n\nexport const HvVizContext = createContext<HvVizContextValue>({\n theme: undefined,\n});\n\nexport interface HvVizProviderProps {\n /**\n * Component tree.\n */\n children?: React.ReactNode;\n}\n\n/**\n * Enables theming capabilities for visualizations.\n *\n * Without this provider the visualizations will not comply to the UI Kit themes.\n *\n * This provider should always be used in combination with the `HvProvider` from\n * the core package since the former uses the themes provided by the latter.\n *\n * `HvVizProvider` should always be used after `HvProvider` like so to work properly:\n *\n * ```\n * <HvProvider>\n * <HvVizProvider>\n * (...)\n * </HvVizProvider>\n * </HvProvider>\n * ```\n */\nexport const HvVizProvider = ({ children }: HvVizProviderProps) => {\n const { activeTheme, selectedMode, selectedTheme } = useTheme();\n\n const value = useMemo(() => {\n registerTheme(selectedTheme, selectedMode, activeTheme);\n\n return { theme: `${selectedTheme}-${selectedMode}` };\n }, [selectedTheme, selectedMode, activeTheme]);\n\n return (\n <HvVizContext.Provider value={value}>{children}</HvVizContext.Provider>\n );\n};\n"],"names":["
|
|
1
|
+
{"version":3,"file":"Provider.cjs","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { createContext, useMemo } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { registerTheme } from \"@viz/utils\";\n\nexport interface HvVizContextValue {\n /**\n * Current theme\n */\n theme?: string;\n}\n\nexport const HvVizContext = createContext<HvVizContextValue>({\n theme: undefined,\n});\n\nexport interface HvVizProviderProps {\n /**\n * Component tree.\n */\n children?: React.ReactNode;\n}\n\n/**\n * Enables theming capabilities for visualizations.\n *\n * Without this provider the visualizations will not comply to the UI Kit themes.\n *\n * This provider should always be used in combination with the `HvProvider` from\n * the core package since the former uses the themes provided by the latter.\n *\n * `HvVizProvider` should always be used after `HvProvider` like so to work properly:\n *\n * ```\n * <HvProvider>\n * <HvVizProvider>\n * (...)\n * </HvVizProvider>\n * </HvProvider>\n * ```\n */\nexport const HvVizProvider = ({ children }: HvVizProviderProps) => {\n const { activeTheme, selectedMode, selectedTheme } = useTheme();\n\n const value = useMemo(() => {\n registerTheme(selectedTheme, selectedMode, activeTheme);\n\n return { theme: `${selectedTheme}-${selectedMode}` };\n }, [selectedTheme, selectedMode, activeTheme]);\n\n return (\n <HvVizContext.Provider value={value}>{children}</HvVizContext.Provider>\n );\n};\n"],"names":["createContext","useTheme","useMemo","registerTheme","jsx"],"mappings":";;;;;;AAaO,MAAM,eAAeA,MAAAA,cAAiC;AAAA,EAC3D,OAAO;AACT,CAAC;AA2BM,MAAM,gBAAgB,CAAC,EAAE,eAAmC;AACjE,QAAM,EAAE,aAAa,cAAc,kBAAkBC,eAAS,SAAA;AAExD,QAAA,QAAQC,MAAAA,QAAQ,MAAM;AACZC,kBAAAA,cAAA,eAAe,cAAc,WAAW;AAEtD,WAAO,EAAE,OAAO,GAAG,aAAa,IAAI,YAAY;EAC/C,GAAA,CAAC,eAAe,cAAc,WAAW,CAAC;AAE7C,SACGC,2BAAAA,IAAA,aAAa,UAAb,EAAsB,OAAe,SAAS,CAAA;AAEnD;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getAgFunc.cjs","sources":["../../../src/utils/getAgFunc.ts"],"sourcesContent":["import { HvChartAggregation } from \"@viz/types\";\n\nexport const getAgFunc = (func: HvChartAggregation, field: string) =>\n func === \"count\" ? \"count()\" : `${func}(d[\"${field}\"])`;\n"],"names":[
|
|
1
|
+
{"version":3,"file":"getAgFunc.cjs","sources":["../../../src/utils/getAgFunc.ts"],"sourcesContent":["import { HvChartAggregation } from \"@viz/types\";\n\nexport const getAgFunc = (func: HvChartAggregation, field: string) =>\n func === \"count\" ? \"count()\" : `${func}(d[\"${field}\"])`;\n"],"names":[],"mappings":";;AAEa,MAAA,YAAY,CAAC,MAA0B,UAClD,SAAS,UAAU,YAAY,GAAG,IAAI,OAAO,KAAK;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getAxisType.cjs","sources":["../../../src/utils/getAxisType.ts"],"sourcesContent":["import { HvChartAxisType } from \"@viz/types\";\n\nexport const getAxisType = (type?: HvChartAxisType) => {\n switch (type) {\n case \"categorical\":\n return \"category\";\n case \"time\":\n return \"time\";\n case \"continuous\":\n return \"value\";\n default:\n return undefined;\n }\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"getAxisType.cjs","sources":["../../../src/utils/getAxisType.ts"],"sourcesContent":["import { HvChartAxisType } from \"@viz/types\";\n\nexport const getAxisType = (type?: HvChartAxisType) => {\n switch (type) {\n case \"categorical\":\n return \"category\";\n case \"time\":\n return \"time\";\n case \"continuous\":\n return \"value\";\n default:\n return undefined;\n }\n};\n"],"names":[],"mappings":";;AAEa,MAAA,cAAc,CAAC,SAA2B;AACrD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT;AACS,aAAA;AAAA,EACX;AACF;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getGroupKey.cjs","sources":["../../../src/utils/getGroupKey.ts"],"sourcesContent":["import { HvChartCommonProps } from \"@viz/types/common\";\n\nexport const getGroupKey = (groupBy: HvChartCommonProps[\"groupBy\"]) =>\n Array.isArray(groupBy) ? groupBy.join(\"_\") : groupBy;\n"],"names":[
|
|
1
|
+
{"version":3,"file":"getGroupKey.cjs","sources":["../../../src/utils/getGroupKey.ts"],"sourcesContent":["import { HvChartCommonProps } from \"@viz/types/common\";\n\nexport const getGroupKey = (groupBy: HvChartCommonProps[\"groupBy\"]) =>\n Array.isArray(groupBy) ? groupBy.join(\"_\") : groupBy;\n"],"names":[],"mappings":";;AAEa,MAAA,cAAc,CAAC,YAC1B,MAAM,QAAQ,OAAO,IAAI,QAAQ,KAAK,GAAG,IAAI;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getLegendIcon.cjs","sources":["../../../src/utils/getLegendIcon.ts"],"sourcesContent":["import { HvChartLegendIcon } from \"@viz/types/legend\";\n\nexport const getLegendIcon = (icon: HvChartLegendIcon) => {\n switch (icon) {\n case \"square\":\n return \"path://M0,0L16,0L16,16L0,16L0,0Z\";\n case \"line\":\n default:\n return \"path://M0,0L16,0L16,2L0,2Z\";\n }\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"getLegendIcon.cjs","sources":["../../../src/utils/getLegendIcon.ts"],"sourcesContent":["import { HvChartLegendIcon } from \"@viz/types/legend\";\n\nexport const getLegendIcon = (icon: HvChartLegendIcon) => {\n switch (icon) {\n case \"square\":\n return \"path://M0,0L16,0L16,16L0,16L0,0Z\";\n case \"line\":\n default:\n return \"path://M0,0L16,0L16,2L0,2Z\";\n }\n};\n"],"names":[],"mappings":";;AAEa,MAAA,gBAAgB,CAAC,SAA4B;AACxD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AAAA,IACL;AACS,aAAA;AAAA,EACX;AACF;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getMeasure.cjs","sources":["../../../src/utils/getMeasure.ts"],"sourcesContent":["import { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvBarChartMeasures,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"@viz/types\";\n\nexport const getMeasure = (\n name: string,\n msr: Arrayable<HvLineChartMeasures | HvBarChartMeasures> | HvDonutChartMeasure\n): HvLineChartMeasures | HvBarChartMeasures | HvDonutChartMeasure => {\n const measureName = name.split(\"_\")[0];\n const measuresArray = Array.isArray(msr) ? msr : [msr];\n // find the measure in measures array or return the first one\n return (\n measuresArray.find((m) => {\n if (typeof m === \"string\") {\n return m === measureName;\n }\n return m.field === measureName;\n }) ?? measuresArray[0]\n );\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"getMeasure.cjs","sources":["../../../src/utils/getMeasure.ts"],"sourcesContent":["import { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvBarChartMeasures,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"@viz/types\";\n\nexport const getMeasure = (\n name: string,\n msr: Arrayable<HvLineChartMeasures | HvBarChartMeasures> | HvDonutChartMeasure\n): HvLineChartMeasures | HvBarChartMeasures | HvDonutChartMeasure => {\n const measureName = name.split(\"_\")[0];\n const measuresArray = Array.isArray(msr) ? msr : [msr];\n // find the measure in measures array or return the first one\n return (\n measuresArray.find((m) => {\n if (typeof m === \"string\") {\n return m === measureName;\n }\n return m.field === measureName;\n }) ?? measuresArray[0]\n );\n};\n"],"names":[],"mappings":";;AAQa,MAAA,aAAa,CACxB,MACA,QACmE;AACnE,QAAM,cAAc,KAAK,MAAM,GAAG,EAAE,CAAC;AACrC,QAAM,gBAAgB,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC,GAAG;AAGnD,SAAA,cAAc,KAAK,CAAC,MAAM;AACpB,QAAA,OAAO,MAAM,UAAU;AACzB,aAAO,MAAM;AAAA,IACf;AACA,WAAO,EAAE,UAAU;AAAA,EAAA,CACpB,KAAK,cAAc,CAAC;AAEzB;;"}
|
|
@@ -58,7 +58,20 @@ const registerTheme = (name, mode, themeStructure) => {
|
|
|
58
58
|
}
|
|
59
59
|
};
|
|
60
60
|
echarts__namespace.registerTheme(`${name}-${mode}`, {
|
|
61
|
-
color: [
|
|
61
|
+
color: [
|
|
62
|
+
themeStructure?.colors.modes[mode].cat1,
|
|
63
|
+
themeStructure?.colors.modes[mode].cat2,
|
|
64
|
+
themeStructure?.colors.modes[mode].cat3,
|
|
65
|
+
themeStructure?.colors.modes[mode].cat4,
|
|
66
|
+
themeStructure?.colors.modes[mode].cat5,
|
|
67
|
+
themeStructure?.colors.modes[mode].cat6,
|
|
68
|
+
themeStructure?.colors.modes[mode].cat7,
|
|
69
|
+
themeStructure?.colors.modes[mode].cat8,
|
|
70
|
+
themeStructure?.colors.modes[mode].cat9,
|
|
71
|
+
themeStructure?.colors.modes[mode].cat10,
|
|
72
|
+
themeStructure?.colors.modes[mode].cat11,
|
|
73
|
+
themeStructure?.colors.modes[mode].cat12
|
|
74
|
+
],
|
|
62
75
|
legend: {
|
|
63
76
|
textStyle: {
|
|
64
77
|
...baseText
|
|
@@ -78,9 +91,7 @@ const registerTheme = (name, mode, themeStructure) => {
|
|
|
78
91
|
}
|
|
79
92
|
},
|
|
80
93
|
dataZoom: {
|
|
81
|
-
textStyle: {
|
|
82
|
-
...baseText
|
|
83
|
-
}
|
|
94
|
+
textStyle: { ...baseText }
|
|
84
95
|
},
|
|
85
96
|
categoryAxis: {
|
|
86
97
|
...customAxis
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerTheme.cjs","sources":["../../../src/utils/registerTheme.ts"],"sourcesContent":["import { HvTheme } from \"@hitachivantara/uikit-react-core\";\nimport * as echarts from \"echarts/core\";\n\nexport const registerTheme = (\n name: string,\n mode: string,\n themeStructure?: HvTheme\n) => {\n const baseText = {\n color: themeStructure?.colors.modes[mode].secondary,\n fontWeight: themeStructure?.fontWeights.normal,\n fontSize: themeStructure?.fontSizes.sm,\n fontFamily: themeStructure?.fontFamily.body,\n };\n\n const customAxis = {\n nameTextStyle: {\n ...baseText,\n color: themeStructure?.colors.modes[mode].secondary_80,\n },\n axisLine: {\n show: true,\n lineStyle: {\n color: themeStructure?.colors.modes[mode].atmo3,\n },\n },\n axisTick: {\n show: true,\n lineStyle: {\n color: themeStructure?.colors.modes[mode].atmo3,\n },\n },\n axisLabel: {\n color: themeStructure?.colors.modes[mode].secondary_80,\n fontWeight: themeStructure?.fontWeights.normal,\n fontSize: themeStructure?.fontSizes.sm,\n fontFamily: themeStructure?.fontFamily.body,\n },\n splitLine: {\n show: true,\n lineStyle: {\n color: themeStructure?.colors.modes[mode].atmo3,\n },\n },\n };\n\n echarts.registerTheme(`${name}-${mode}`, {\n color: [\n themeStructure?.colors.modes[mode].cat1,\n themeStructure?.colors.modes[mode].cat2,\n themeStructure?.colors.modes[mode].cat3,\n themeStructure?.colors.modes[mode].cat4,\n themeStructure?.colors.modes[mode].cat5,\n themeStructure?.colors.modes[mode].cat6,\n themeStructure?.colors.modes[mode].cat7,\n themeStructure?.colors.modes[mode].cat8,\n themeStructure?.colors.modes[mode].cat9,\n themeStructure?.colors.modes[mode].cat10,\n themeStructure?.colors.modes[mode].cat11,\n themeStructure?.colors.modes[mode].cat12,\n ],\n legend: {\n textStyle: {\n ...baseText,\n },\n },\n tooltip: {\n borderWidth: 0,\n padding: 0,\n textStyle: {\n ...baseText,\n },\n axisPointer: {\n lineStyle: {\n color: themeStructure?.colors.modes[mode].secondary,\n width: 1,\n },\n },\n },\n dataZoom: {\n textStyle: { ...baseText },\n },\n categoryAxis: {\n ...customAxis,\n },\n valueAxis: {\n ...customAxis,\n },\n logAxis: {\n ...customAxis,\n },\n timeAxis: {\n ...customAxis,\n },\n line: {\n lineStyle: {\n width: 2,\n },\n },\n visualMap: {\n textStyle: {\n ...baseText,\n },\n },\n heatmap: {\n label: {\n fontWeight: baseText.fontWeight,\n fontSize: baseText.fontSize,\n fontFamily: baseText.fontFamily,\n },\n itemStyle: {\n borderColor: themeStructure?.colors.modes[mode].atmo3,\n borderWidth: 1,\n },\n },\n });\n};\n"],"names":["
|
|
1
|
+
{"version":3,"file":"registerTheme.cjs","sources":["../../../src/utils/registerTheme.ts"],"sourcesContent":["import { HvTheme } from \"@hitachivantara/uikit-react-core\";\nimport * as echarts from \"echarts/core\";\n\nexport const registerTheme = (\n name: string,\n mode: string,\n themeStructure?: HvTheme\n) => {\n const baseText = {\n color: themeStructure?.colors.modes[mode].secondary,\n fontWeight: themeStructure?.fontWeights.normal,\n fontSize: themeStructure?.fontSizes.sm,\n fontFamily: themeStructure?.fontFamily.body,\n };\n\n const customAxis = {\n nameTextStyle: {\n ...baseText,\n color: themeStructure?.colors.modes[mode].secondary_80,\n },\n axisLine: {\n show: true,\n lineStyle: {\n color: themeStructure?.colors.modes[mode].atmo3,\n },\n },\n axisTick: {\n show: true,\n lineStyle: {\n color: themeStructure?.colors.modes[mode].atmo3,\n },\n },\n axisLabel: {\n color: themeStructure?.colors.modes[mode].secondary_80,\n fontWeight: themeStructure?.fontWeights.normal,\n fontSize: themeStructure?.fontSizes.sm,\n fontFamily: themeStructure?.fontFamily.body,\n },\n splitLine: {\n show: true,\n lineStyle: {\n color: themeStructure?.colors.modes[mode].atmo3,\n },\n },\n };\n\n echarts.registerTheme(`${name}-${mode}`, {\n color: [\n themeStructure?.colors.modes[mode].cat1,\n themeStructure?.colors.modes[mode].cat2,\n themeStructure?.colors.modes[mode].cat3,\n themeStructure?.colors.modes[mode].cat4,\n themeStructure?.colors.modes[mode].cat5,\n themeStructure?.colors.modes[mode].cat6,\n themeStructure?.colors.modes[mode].cat7,\n themeStructure?.colors.modes[mode].cat8,\n themeStructure?.colors.modes[mode].cat9,\n themeStructure?.colors.modes[mode].cat10,\n themeStructure?.colors.modes[mode].cat11,\n themeStructure?.colors.modes[mode].cat12,\n ],\n legend: {\n textStyle: {\n ...baseText,\n },\n },\n tooltip: {\n borderWidth: 0,\n padding: 0,\n textStyle: {\n ...baseText,\n },\n axisPointer: {\n lineStyle: {\n color: themeStructure?.colors.modes[mode].secondary,\n width: 1,\n },\n },\n },\n dataZoom: {\n textStyle: { ...baseText },\n },\n categoryAxis: {\n ...customAxis,\n },\n valueAxis: {\n ...customAxis,\n },\n logAxis: {\n ...customAxis,\n },\n timeAxis: {\n ...customAxis,\n },\n line: {\n lineStyle: {\n width: 2,\n },\n },\n visualMap: {\n textStyle: {\n ...baseText,\n },\n },\n heatmap: {\n label: {\n fontWeight: baseText.fontWeight,\n fontSize: baseText.fontSize,\n fontFamily: baseText.fontFamily,\n },\n itemStyle: {\n borderColor: themeStructure?.colors.modes[mode].atmo3,\n borderWidth: 1,\n },\n },\n });\n};\n"],"names":["echarts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,gBAAgB,CAC3B,MACA,MACA,mBACG;AACH,QAAM,WAAW;AAAA,IACf,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,IAC1C,YAAY,gBAAgB,YAAY;AAAA,IACxC,UAAU,gBAAgB,UAAU;AAAA,IACpC,YAAY,gBAAgB,WAAW;AAAA,EAAA;AAGzC,QAAM,aAAa;AAAA,IACjB,eAAe;AAAA,MACb,GAAG;AAAA,MACH,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,IAC5C;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,WAAW;AAAA,QACT,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MAC5C;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,WAAW;AAAA,QACT,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MAC5C;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACT,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MAC1C,YAAY,gBAAgB,YAAY;AAAA,MACxC,UAAU,gBAAgB,UAAU;AAAA,MACpC,YAAY,gBAAgB,WAAW;AAAA,IACzC;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,QACT,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MAC5C;AAAA,IACF;AAAA,EAAA;AAGFA,qBAAQ,cAAc,GAAG,IAAI,IAAI,IAAI,IAAI;AAAA,IACvC,OAAO;AAAA,MACL,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,IACrC;AAAA,IACA,QAAQ;AAAA,MACN,WAAW;AAAA,QACT,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW;AAAA,QACT,GAAG;AAAA,MACL;AAAA,MACA,aAAa;AAAA,QACX,WAAW;AAAA,UACT,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,UAC1C,OAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,WAAW,EAAE,GAAG,SAAS;AAAA,IAC3B;AAAA,IACA,cAAc;AAAA,MACZ,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,MACT,GAAG;AAAA,IACL;AAAA,IACA,SAAS;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IACA,UAAU;AAAA,MACR,GAAG;AAAA,IACL;AAAA,IACA,MAAM;AAAA,MACJ,WAAW;AAAA,QACT,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACT,WAAW;AAAA,QACT,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,YAAY,SAAS;AAAA,QACrB,UAAU,SAAS;AAAA,QACnB,YAAY,SAAS;AAAA,MACvB;AAAA,MACA,WAAW;AAAA,QACT,aAAa,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,QAChD,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EAAA,CACD;AACH;;"}
|
|
@@ -14,86 +14,88 @@ import { useLegend } from "../../hooks/useLegend.js";
|
|
|
14
14
|
import { useOption } from "../../hooks/useOption.js";
|
|
15
15
|
import { useTooltip } from "../../hooks/tooltip/useTooltip.js";
|
|
16
16
|
import { HvBaseChart } from "../BaseChart/BaseChart.js";
|
|
17
|
-
echarts.use([
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
option
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
});
|
|
17
|
+
echarts.use([
|
|
18
|
+
BarChart,
|
|
19
|
+
DatasetComponent,
|
|
20
|
+
GridComponent,
|
|
21
|
+
TooltipComponent,
|
|
22
|
+
LegendComponent,
|
|
23
|
+
DataZoomSliderComponent,
|
|
24
|
+
DataZoomInsideComponent
|
|
25
|
+
]);
|
|
26
|
+
const HvBarChart = forwardRef(
|
|
27
|
+
(props, ref) => {
|
|
28
|
+
const {
|
|
29
|
+
yAxis,
|
|
30
|
+
xAxis,
|
|
31
|
+
horizontal = false,
|
|
32
|
+
horizontalRangeSlider,
|
|
33
|
+
grid,
|
|
34
|
+
data,
|
|
35
|
+
groupBy,
|
|
36
|
+
splitBy,
|
|
37
|
+
sortBy,
|
|
38
|
+
stack,
|
|
39
|
+
seriesNameFormatter,
|
|
40
|
+
measures,
|
|
41
|
+
legend,
|
|
42
|
+
tooltip,
|
|
43
|
+
classes,
|
|
44
|
+
height,
|
|
45
|
+
width,
|
|
46
|
+
onOptionChange
|
|
47
|
+
} = props;
|
|
48
|
+
const chartData = useData({ data, groupBy, sortBy, splitBy, measures });
|
|
49
|
+
const chartDataset = useDataset(chartData);
|
|
50
|
+
const chartYAxis = useYAxis({
|
|
51
|
+
axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],
|
|
52
|
+
defaultType: horizontal ? "categorical" : "continuous"
|
|
53
|
+
});
|
|
54
|
+
const chartXAxis = useXAxis({
|
|
55
|
+
type: horizontal ? "continuous" : "categorical",
|
|
56
|
+
...xAxis
|
|
57
|
+
});
|
|
58
|
+
const chartSlider = useDataZoom({
|
|
59
|
+
showHorizontal: horizontalRangeSlider?.show
|
|
60
|
+
});
|
|
61
|
+
const chartGrid = useGrid({ ...grid });
|
|
62
|
+
const chartSeries = useSeries({
|
|
63
|
+
type: "bar",
|
|
64
|
+
data: chartData,
|
|
65
|
+
groupBy,
|
|
66
|
+
measures,
|
|
67
|
+
stack,
|
|
68
|
+
nameFormatter: seriesNameFormatter,
|
|
69
|
+
horizontal
|
|
70
|
+
});
|
|
71
|
+
const chartLegend = useLegend({
|
|
72
|
+
...legend,
|
|
73
|
+
series: chartSeries.series,
|
|
74
|
+
icon: "square"
|
|
75
|
+
});
|
|
76
|
+
const chartTooltip = useTooltip({
|
|
77
|
+
...tooltip,
|
|
78
|
+
trigger: "axis",
|
|
79
|
+
measures,
|
|
80
|
+
classes,
|
|
81
|
+
horizontal
|
|
82
|
+
});
|
|
83
|
+
const option = useOption({
|
|
84
|
+
option: {
|
|
85
|
+
...chartYAxis,
|
|
86
|
+
...chartXAxis,
|
|
87
|
+
...chartSlider,
|
|
88
|
+
...chartGrid,
|
|
89
|
+
...chartDataset,
|
|
90
|
+
...chartSeries,
|
|
91
|
+
...chartLegend,
|
|
92
|
+
...chartTooltip
|
|
93
|
+
},
|
|
94
|
+
onOptionChange
|
|
95
|
+
});
|
|
96
|
+
return /* @__PURE__ */ jsx(HvBaseChart, { ref, option, width, height });
|
|
97
|
+
}
|
|
98
|
+
);
|
|
97
99
|
export {
|
|
98
100
|
HvBarChart
|
|
99
101
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.js","sources":["../../../../src/components/BarChart/BarChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n useXAxis,\n useYAxis,\n useDataZoom,\n useGrid,\n useData,\n useDataset,\n useSeries,\n useLegend,\n useTooltip,\n useOption,\n HvChartTooltipClasses,\n} from \"@viz/hooks\";\n\nimport { HvBarChartMeasures } from \"../../types\";\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../../types/common\";\n\n// Register chart components\necharts.use([\n BarChart,\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n]);\n\nexport interface HvBarChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvBarChartProps\n extends HvAxisChartCommonProps,\n HvChartCommonProps {\n /** Columns to measure on the chart. */\n measures: Arrayable<HvBarChartMeasures>;\n /** Whether the bar chart should be horizontal. Defaults to `false`. */\n horizontal?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvBarChartClasses;\n}\n\n/**\n * A bar chart is a chart or graph that presents categorical data with rectangular bars.\n */\nexport const HvBarChart = forwardRef<ReactECharts, HvBarChartProps>(\n (props, ref) => {\n const {\n yAxis,\n xAxis,\n horizontal = false,\n horizontalRangeSlider,\n grid,\n data,\n groupBy,\n splitBy,\n sortBy,\n stack,\n seriesNameFormatter,\n measures,\n legend,\n tooltip,\n classes,\n height,\n width,\n onOptionChange,\n } = props;\n\n const chartData = useData({ data, groupBy, sortBy, splitBy, measures });\n\n const chartDataset = useDataset(chartData);\n\n const chartYAxis = useYAxis({\n axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n defaultType: horizontal ? \"categorical\" : \"continuous\",\n });\n\n const chartXAxis = useXAxis({\n type: horizontal ? \"continuous\" : \"categorical\",\n ...xAxis,\n });\n\n const chartSlider = useDataZoom({\n showHorizontal: horizontalRangeSlider?.show,\n });\n\n const chartGrid = useGrid({ ...grid });\n\n const chartSeries = useSeries({\n type: \"bar\",\n data: chartData,\n groupBy,\n measures,\n stack,\n nameFormatter: seriesNameFormatter,\n horizontal,\n });\n\n const chartLegend = useLegend({\n ...legend,\n series: chartSeries.series,\n icon: \"square\",\n });\n\n const chartTooltip = useTooltip({\n ...tooltip,\n trigger: \"axis\",\n measures,\n classes,\n horizontal,\n });\n\n const option = useOption({\n option: {\n ...chartYAxis,\n ...chartXAxis,\n ...chartSlider,\n ...chartGrid,\n ...chartDataset,\n ...chartSeries,\n ...chartLegend,\n ...chartTooltip,\n },\n onOptionChange,\n });\n\n return (\n <HvBaseChart ref={ref} option={option} width={width} height={height} />\n );\n }\n);\n"],"names":[
|
|
1
|
+
{"version":3,"file":"BarChart.js","sources":["../../../../src/components/BarChart/BarChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n useXAxis,\n useYAxis,\n useDataZoom,\n useGrid,\n useData,\n useDataset,\n useSeries,\n useLegend,\n useTooltip,\n useOption,\n HvChartTooltipClasses,\n} from \"@viz/hooks\";\n\nimport { HvBarChartMeasures } from \"../../types\";\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../../types/common\";\n\n// Register chart components\necharts.use([\n BarChart,\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n]);\n\nexport interface HvBarChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvBarChartProps\n extends HvAxisChartCommonProps,\n HvChartCommonProps {\n /** Columns to measure on the chart. */\n measures: Arrayable<HvBarChartMeasures>;\n /** Whether the bar chart should be horizontal. Defaults to `false`. */\n horizontal?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvBarChartClasses;\n}\n\n/**\n * A bar chart is a chart or graph that presents categorical data with rectangular bars.\n */\nexport const HvBarChart = forwardRef<ReactECharts, HvBarChartProps>(\n (props, ref) => {\n const {\n yAxis,\n xAxis,\n horizontal = false,\n horizontalRangeSlider,\n grid,\n data,\n groupBy,\n splitBy,\n sortBy,\n stack,\n seriesNameFormatter,\n measures,\n legend,\n tooltip,\n classes,\n height,\n width,\n onOptionChange,\n } = props;\n\n const chartData = useData({ data, groupBy, sortBy, splitBy, measures });\n\n const chartDataset = useDataset(chartData);\n\n const chartYAxis = useYAxis({\n axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n defaultType: horizontal ? \"categorical\" : \"continuous\",\n });\n\n const chartXAxis = useXAxis({\n type: horizontal ? \"continuous\" : \"categorical\",\n ...xAxis,\n });\n\n const chartSlider = useDataZoom({\n showHorizontal: horizontalRangeSlider?.show,\n });\n\n const chartGrid = useGrid({ ...grid });\n\n const chartSeries = useSeries({\n type: \"bar\",\n data: chartData,\n groupBy,\n measures,\n stack,\n nameFormatter: seriesNameFormatter,\n horizontal,\n });\n\n const chartLegend = useLegend({\n ...legend,\n series: chartSeries.series,\n icon: \"square\",\n });\n\n const chartTooltip = useTooltip({\n ...tooltip,\n trigger: \"axis\",\n measures,\n classes,\n horizontal,\n });\n\n const option = useOption({\n option: {\n ...chartYAxis,\n ...chartXAxis,\n ...chartSlider,\n ...chartGrid,\n ...chartDataset,\n ...chartSeries,\n ...chartLegend,\n ...chartTooltip,\n },\n onOptionChange,\n });\n\n return (\n <HvBaseChart ref={ref} option={option} width={width} height={height} />\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAmCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAkBM,MAAM,aAAa;AAAA,EACxB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACE,IAAA;AAEE,UAAA,YAAY,QAAQ,EAAE,MAAM,SAAS,QAAQ,SAAS,UAAU;AAEhE,UAAA,eAAe,WAAW,SAAS;AAEzC,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,MAC5D,aAAa,aAAa,gBAAgB;AAAA,IAAA,CAC3C;AAED,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,aAAa,eAAe;AAAA,MAClC,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,cAAc,YAAY;AAAA,MAC9B,gBAAgB,uBAAuB;AAAA,IAAA,CACxC;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf;AAAA,IAAA,CACD;AAED,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,QAAQ,YAAY;AAAA,MACpB,MAAM;AAAA,IAAA,CACP;AAED,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,IAAA,CACD;AAED,WACG,oBAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAgB,CAAA;AAAA,EAEzE;AACF;"}
|
|
@@ -7,42 +7,48 @@ import * as echarts from "echarts/core";
|
|
|
7
7
|
import ReactECharts from "echarts-for-react/lib/core";
|
|
8
8
|
import { useVizTheme } from "../../hooks/useVizTheme.js";
|
|
9
9
|
echarts.use([CanvasRenderer, AriaComponent]);
|
|
10
|
-
const HvBaseChart = forwardRef(
|
|
11
|
-
|
|
12
|
-
option,
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
10
|
+
const HvBaseChart = forwardRef(
|
|
11
|
+
(props, ref) => {
|
|
12
|
+
const { option, width, height } = props;
|
|
13
|
+
const { theme } = useVizTheme();
|
|
14
|
+
const currentTheme = useRef(theme);
|
|
15
|
+
const chartRef = useRef(null);
|
|
16
|
+
const isMounted = useRef(false);
|
|
17
|
+
const forkedRef = useForkRef(ref, chartRef);
|
|
18
|
+
const [initialOption, setInitialOption] = useState(option);
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
if (!isMounted.current) {
|
|
21
|
+
isMounted.current = true;
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
if (theme !== currentTheme.current) {
|
|
25
|
+
setInitialOption(option);
|
|
26
|
+
currentTheme.current = theme;
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
const instance = chartRef.current?.getEchartsInstance();
|
|
30
|
+
if (!instance)
|
|
31
|
+
return;
|
|
32
|
+
instance.setOption(option, {
|
|
33
|
+
replaceMerge: ["xAxis", "yAxis", "series", "dataset"]
|
|
34
|
+
});
|
|
35
|
+
}, [theme, option]);
|
|
36
|
+
return /* @__PURE__ */ jsx(
|
|
37
|
+
ReactECharts,
|
|
38
|
+
{
|
|
39
|
+
ref: forkedRef,
|
|
40
|
+
echarts,
|
|
41
|
+
option: initialOption,
|
|
42
|
+
theme,
|
|
43
|
+
notMerge: true,
|
|
44
|
+
style: {
|
|
45
|
+
width: width || "100%",
|
|
46
|
+
height: height || "100%"
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
);
|
|
46
52
|
export {
|
|
47
53
|
HvBaseChart
|
|
48
54
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseChart.js","sources":["../../../../src/components/BaseChart/BaseChart.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\n\nimport { useForkRef } from \"@mui/material\";\n\nimport { AriaComponent } from \"echarts/components\";\nimport { CanvasRenderer } from \"echarts/renderers\";\nimport * as echarts from \"echarts/core\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport { useVizTheme } from \"@viz/hooks\";\nimport { HvEChartsOption } from \"@viz/types/common\";\n\n// Register chart components\necharts.use([CanvasRenderer, AriaComponent]);\n\nexport interface HvBaseChartProps {\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 } = props;\n\n const { theme } = useVizTheme();\n\n const currentTheme = useRef<string | undefined>(theme);\n const chartRef = useRef<ReactECharts>(null);\n const isMounted = useRef<boolean>(false);\n\n const forkedRef = useForkRef<ReactECharts>(ref, chartRef);\n\n const [initialOption, setInitialOption] = useState<HvEChartsOption>(option);\n\n useEffect(() => {\n if (!isMounted.current) {\n isMounted.current = true;\n return;\n }\n\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 />\n );\n }\n);\n"],"names":[
|
|
1
|
+
{"version":3,"file":"BaseChart.js","sources":["../../../../src/components/BaseChart/BaseChart.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\n\nimport { useForkRef } from \"@mui/material\";\n\nimport { AriaComponent } from \"echarts/components\";\nimport { CanvasRenderer } from \"echarts/renderers\";\nimport * as echarts from \"echarts/core\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport { useVizTheme } from \"@viz/hooks\";\nimport { HvEChartsOption } from \"@viz/types/common\";\n\n// Register chart components\necharts.use([CanvasRenderer, AriaComponent]);\n\nexport interface HvBaseChartProps {\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 } = props;\n\n const { theme } = useVizTheme();\n\n const currentTheme = useRef<string | undefined>(theme);\n const chartRef = useRef<ReactECharts>(null);\n const isMounted = useRef<boolean>(false);\n\n const forkedRef = useForkRef<ReactECharts>(ref, chartRef);\n\n const [initialOption, setInitialOption] = useState<HvEChartsOption>(option);\n\n useEffect(() => {\n if (!isMounted.current) {\n isMounted.current = true;\n return;\n }\n\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 />\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;AAaA,QAAQ,IAAI,CAAC,gBAAgB,aAAa,CAAC;AAcpC,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,QAAQ,OAAO,OAAA,IAAW;AAE5B,UAAA,EAAE,UAAU;AAEZ,UAAA,eAAe,OAA2B,KAAK;AAC/C,UAAA,WAAW,OAAqB,IAAI;AACpC,UAAA,YAAY,OAAgB,KAAK;AAEjC,UAAA,YAAY,WAAyB,KAAK,QAAQ;AAExD,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAA0B,MAAM;AAE1E,cAAU,MAAM;AACV,UAAA,CAAC,UAAU,SAAS;AACtB,kBAAU,UAAU;AACpB;AAAA,MACF;AAII,UAAA,UAAU,aAAa,SAAS;AAClC,yBAAiB,MAAM;AACvB,qBAAa,UAAU;AACvB;AAAA,MACF;AAEM,YAAA,WAAW,SAAS,SAAS,mBAAmB;AAEtD,UAAI,CAAC;AAAU;AAEf,eAAS,UAAU,QAAQ;AAAA,QACzB,cAAc,CAAC,SAAS,SAAS,UAAU,SAAS;AAAA,MAAA,CACrD;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,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
|