@hitachivantara/uikit-react-viz 5.16.7 → 6.0.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/dist/{esm/BaseChart → BaseChart}/BaseChart.js +1 -1
  2. package/dist/{types/index.d.ts → index.d.ts} +6 -4
  3. package/dist/{esm/index.js → index.js} +3 -2
  4. package/dist/{esm/providers → providers}/Provider.js +9 -5
  5. package/dist/{esm/utils → utils}/registerTheme.js +1 -1
  6. package/package.json +12 -12
  7. package/dist/cjs/BarChart/BarChart.cjs +0 -138
  8. package/dist/cjs/BaseChart/BaseChart.cjs +0 -77
  9. package/dist/cjs/Boxplot/Boxplot.cjs +0 -116
  10. package/dist/cjs/Boxplot/Boxplot.styles.cjs +0 -26
  11. package/dist/cjs/Boxplot/useBoxplot.cjs +0 -72
  12. package/dist/cjs/Boxplot/useBoxplotData.cjs +0 -40
  13. package/dist/cjs/ConfusionMatrix/ConfusionMatrix.cjs +0 -182
  14. package/dist/cjs/ConfusionMatrix/ConfusionMatrix.styles.cjs +0 -29
  15. package/dist/cjs/ConfusionMatrix/utils.cjs +0 -142
  16. package/dist/cjs/DonutChart/DonutChart.cjs +0 -111
  17. package/dist/cjs/Heatmap/Heatmap.cjs +0 -127
  18. package/dist/cjs/Heatmap/Heatmap.styles.cjs +0 -26
  19. package/dist/cjs/LineChart/LineChart.cjs +0 -136
  20. package/dist/cjs/ScatterPlot/ScatterPlot.cjs +0 -128
  21. package/dist/cjs/Treemap/Treemap.cjs +0 -72
  22. package/dist/cjs/hooks/tooltip/styles.cjs +0 -80
  23. package/dist/cjs/hooks/tooltip/useTooltip.cjs +0 -116
  24. package/dist/cjs/hooks/useData.cjs +0 -164
  25. package/dist/cjs/hooks/useDataZoom.cjs +0 -27
  26. package/dist/cjs/hooks/useDataset.cjs +0 -16
  27. package/dist/cjs/hooks/useGrid.cjs +0 -39
  28. package/dist/cjs/hooks/useLegend.cjs +0 -46
  29. package/dist/cjs/hooks/useOption.cjs +0 -20
  30. package/dist/cjs/hooks/useSeries.cjs +0 -119
  31. package/dist/cjs/hooks/useVisualMap.cjs +0 -57
  32. package/dist/cjs/hooks/useVizTheme.cjs +0 -8
  33. package/dist/cjs/hooks/useXAxis.cjs +0 -64
  34. package/dist/cjs/hooks/useYAxis.cjs +0 -58
  35. package/dist/cjs/index.cjs +0 -25
  36. package/dist/cjs/providers/Provider.cjs +0 -20
  37. package/dist/cjs/utils/index.cjs +0 -193
  38. package/dist/cjs/utils/registerTheme.cjs +0 -142
  39. package/dist/esm/hooks/useVizTheme.js +0 -8
  40. /package/dist/{esm/BarChart → BarChart}/BarChart.js +0 -0
  41. /package/dist/{esm/Boxplot → Boxplot}/Boxplot.js +0 -0
  42. /package/dist/{esm/Boxplot → Boxplot}/Boxplot.styles.js +0 -0
  43. /package/dist/{esm/Boxplot → Boxplot}/useBoxplot.js +0 -0
  44. /package/dist/{esm/Boxplot → Boxplot}/useBoxplotData.js +0 -0
  45. /package/dist/{esm/ConfusionMatrix → ConfusionMatrix}/ConfusionMatrix.js +0 -0
  46. /package/dist/{esm/ConfusionMatrix → ConfusionMatrix}/ConfusionMatrix.styles.js +0 -0
  47. /package/dist/{esm/ConfusionMatrix → ConfusionMatrix}/utils.js +0 -0
  48. /package/dist/{esm/DonutChart → DonutChart}/DonutChart.js +0 -0
  49. /package/dist/{esm/Heatmap → Heatmap}/Heatmap.js +0 -0
  50. /package/dist/{esm/Heatmap → Heatmap}/Heatmap.styles.js +0 -0
  51. /package/dist/{esm/LineChart → LineChart}/LineChart.js +0 -0
  52. /package/dist/{esm/ScatterPlot → ScatterPlot}/ScatterPlot.js +0 -0
  53. /package/dist/{esm/Treemap → Treemap}/Treemap.js +0 -0
  54. /package/dist/{esm/hooks → hooks}/tooltip/styles.js +0 -0
  55. /package/dist/{esm/hooks → hooks}/tooltip/useTooltip.js +0 -0
  56. /package/dist/{esm/hooks → hooks}/useData.js +0 -0
  57. /package/dist/{esm/hooks → hooks}/useDataZoom.js +0 -0
  58. /package/dist/{esm/hooks → hooks}/useDataset.js +0 -0
  59. /package/dist/{esm/hooks → hooks}/useGrid.js +0 -0
  60. /package/dist/{esm/hooks → hooks}/useLegend.js +0 -0
  61. /package/dist/{esm/hooks → hooks}/useOption.js +0 -0
  62. /package/dist/{esm/hooks → hooks}/useSeries.js +0 -0
  63. /package/dist/{esm/hooks → hooks}/useVisualMap.js +0 -0
  64. /package/dist/{esm/hooks → hooks}/useXAxis.js +0 -0
  65. /package/dist/{esm/hooks → hooks}/useYAxis.js +0 -0
  66. /package/dist/{esm/utils → utils}/index.js +0 -0
@@ -1,136 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const react = require("react");
5
- const charts = require("echarts/charts");
6
- const components = require("echarts/components");
7
- const echarts = require("echarts/core");
8
- const useData = require("../hooks/useData.cjs");
9
- const useDataset = require("../hooks/useDataset.cjs");
10
- const useYAxis = require("../hooks/useYAxis.cjs");
11
- const useXAxis = require("../hooks/useXAxis.cjs");
12
- const useDataZoom = require("../hooks/useDataZoom.cjs");
13
- const useGrid = require("../hooks/useGrid.cjs");
14
- const useSeries = require("../hooks/useSeries.cjs");
15
- const useLegend = require("../hooks/useLegend.cjs");
16
- const useTooltip = require("../hooks/tooltip/useTooltip.cjs");
17
- const useOption = require("../hooks/useOption.cjs");
18
- const BaseChart = require("../BaseChart/BaseChart.cjs");
19
- function _interopNamespace(e) {
20
- if (e && e.__esModule) return e;
21
- const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
22
- if (e) {
23
- for (const k in e) {
24
- if (k !== "default") {
25
- const d = Object.getOwnPropertyDescriptor(e, k);
26
- Object.defineProperty(n, k, d.get ? d : {
27
- enumerable: true,
28
- get: () => e[k]
29
- });
30
- }
31
- }
32
- }
33
- n.default = e;
34
- return Object.freeze(n);
35
- }
36
- const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
37
- echarts__namespace.use([
38
- charts.LineChart,
39
- components.DatasetComponent,
40
- components.GridComponent,
41
- components.TooltipComponent,
42
- components.LegendComponent,
43
- components.DataZoomSliderComponent,
44
- components.DataZoomInsideComponent,
45
- components.MarkLineComponent
46
- ]);
47
- const HvLineChart = react.forwardRef(
48
- function HvLineChart2(props, ref) {
49
- const {
50
- area = false,
51
- emptyCellMode = "void",
52
- areaOpacity = 0.5,
53
- yAxis,
54
- xAxis,
55
- horizontalRangeSlider,
56
- grid,
57
- data,
58
- groupBy,
59
- splitBy,
60
- sortBy,
61
- filters,
62
- measures,
63
- stack,
64
- seriesNameFormatter,
65
- legend,
66
- classes,
67
- tooltip,
68
- width,
69
- height,
70
- onOptionChange,
71
- ...others
72
- } = props;
73
- const { data: chartData, mapping: measuresMapping } = useData.useData({
74
- data,
75
- groupBy,
76
- measures,
77
- splitBy,
78
- sortBy,
79
- filters
80
- });
81
- const chartDataset = useDataset.useDataset(chartData);
82
- const chartYAxis = useYAxis.useYAxis({
83
- axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis]
84
- });
85
- const chartXAxis = useXAxis.useXAxis({ ...xAxis, scale: true });
86
- const chartSlider = useDataZoom.useDataZoom({
87
- showHorizontal: horizontalRangeSlider?.show
88
- });
89
- const chartGrid = useGrid.useGrid({ ...grid });
90
- const chartSeries = useSeries.useSeries({
91
- type: "line",
92
- data: chartData,
93
- groupBy,
94
- measuresMapping,
95
- area,
96
- areaOpacity,
97
- emptyCellMode,
98
- stack,
99
- nameFormatter: seriesNameFormatter
100
- });
101
- const chartLegend = useLegend.useLegend({
102
- ...legend,
103
- series: chartSeries.series
104
- });
105
- const chartTooltip = useTooltip.useTooltip({
106
- ...tooltip,
107
- trigger: "axis",
108
- measuresMapping,
109
- classes
110
- });
111
- const option = useOption.useOption({
112
- option: {
113
- ...chartYAxis,
114
- ...chartXAxis,
115
- ...chartSlider,
116
- ...chartGrid,
117
- ...chartDataset,
118
- ...chartSeries,
119
- ...chartLegend,
120
- ...chartTooltip
121
- },
122
- onOptionChange
123
- });
124
- return /* @__PURE__ */ jsxRuntime.jsx(
125
- BaseChart.HvBaseChart,
126
- {
127
- ref,
128
- option,
129
- width,
130
- height,
131
- ...others
132
- }
133
- );
134
- }
135
- );
136
- exports.HvLineChart = HvLineChart;
@@ -1,128 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const react = require("react");
5
- const charts = require("echarts/charts");
6
- const components = require("echarts/components");
7
- const echarts = require("echarts/core");
8
- const useData = require("../hooks/useData.cjs");
9
- const useDataset = require("../hooks/useDataset.cjs");
10
- const useYAxis = require("../hooks/useYAxis.cjs");
11
- const useXAxis = require("../hooks/useXAxis.cjs");
12
- const useDataZoom = require("../hooks/useDataZoom.cjs");
13
- const useGrid = require("../hooks/useGrid.cjs");
14
- const useSeries = require("../hooks/useSeries.cjs");
15
- const useLegend = require("../hooks/useLegend.cjs");
16
- const useTooltip = require("../hooks/tooltip/useTooltip.cjs");
17
- const useOption = require("../hooks/useOption.cjs");
18
- const BaseChart = require("../BaseChart/BaseChart.cjs");
19
- function _interopNamespace(e) {
20
- if (e && e.__esModule) return e;
21
- const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
22
- if (e) {
23
- for (const k in e) {
24
- if (k !== "default") {
25
- const d = Object.getOwnPropertyDescriptor(e, k);
26
- Object.defineProperty(n, k, d.get ? d : {
27
- enumerable: true,
28
- get: () => e[k]
29
- });
30
- }
31
- }
32
- }
33
- n.default = e;
34
- return Object.freeze(n);
35
- }
36
- const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
37
- echarts__namespace.use([
38
- charts.ScatterChart,
39
- components.DatasetComponent,
40
- components.GridComponent,
41
- components.TooltipComponent,
42
- components.LegendComponent,
43
- components.DataZoomSliderComponent,
44
- components.DataZoomInsideComponent,
45
- components.MarkLineComponent
46
- ]);
47
- const HvScatterPlot = react.forwardRef(
48
- function HvScatterPlot2(props, ref) {
49
- const {
50
- yAxis,
51
- xAxis,
52
- horizontalRangeSlider,
53
- grid,
54
- data,
55
- groupBy,
56
- splitBy,
57
- sortBy,
58
- filters,
59
- measures,
60
- seriesNameFormatter,
61
- legend,
62
- classes,
63
- tooltip,
64
- width,
65
- height,
66
- onOptionChange,
67
- ...others
68
- } = props;
69
- const { data: chartData, mapping: measuresMapping } = useData.useData({
70
- data,
71
- groupBy,
72
- measures,
73
- splitBy,
74
- sortBy,
75
- filters
76
- });
77
- const chartDataset = useDataset.useDataset(chartData);
78
- const chartYAxis = useYAxis.useYAxis({
79
- axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis]
80
- });
81
- const chartXAxis = useXAxis.useXAxis({ type: "continuous", ...xAxis });
82
- const chartSlider = useDataZoom.useDataZoom({
83
- showHorizontal: horizontalRangeSlider?.show
84
- });
85
- const chartGrid = useGrid.useGrid({ ...grid });
86
- const chartSeries = useSeries.useSeries({
87
- type: "scatter",
88
- data: chartData,
89
- groupBy,
90
- measuresMapping,
91
- nameFormatter: seriesNameFormatter
92
- });
93
- const chartLegend = useLegend.useLegend({
94
- ...legend,
95
- series: chartSeries.series
96
- });
97
- const chartTooltip = useTooltip.useTooltip({
98
- ...tooltip,
99
- trigger: "axis",
100
- measuresMapping,
101
- classes
102
- });
103
- const option = useOption.useOption({
104
- option: {
105
- ...chartYAxis,
106
- ...chartXAxis,
107
- ...chartSlider,
108
- ...chartGrid,
109
- ...chartDataset,
110
- ...chartSeries,
111
- ...chartLegend,
112
- ...chartTooltip
113
- },
114
- onOptionChange
115
- });
116
- return /* @__PURE__ */ jsxRuntime.jsx(
117
- BaseChart.HvBaseChart,
118
- {
119
- ref,
120
- option,
121
- width,
122
- height,
123
- ...others
124
- }
125
- );
126
- }
127
- );
128
- exports.HvScatterPlot = HvScatterPlot;
@@ -1,72 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const react = require("react");
5
- const charts = require("echarts/charts");
6
- const components = require("echarts/components");
7
- const echarts = require("echarts/core");
8
- const useTooltip = require("../hooks/tooltip/useTooltip.cjs");
9
- const useOption = require("../hooks/useOption.cjs");
10
- const BaseChart = require("../BaseChart/BaseChart.cjs");
11
- function _interopNamespace(e) {
12
- if (e && e.__esModule) return e;
13
- const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
14
- if (e) {
15
- for (const k in e) {
16
- if (k !== "default") {
17
- const d = Object.getOwnPropertyDescriptor(e, k);
18
- Object.defineProperty(n, k, d.get ? d : {
19
- enumerable: true,
20
- get: () => e[k]
21
- });
22
- }
23
- }
24
- }
25
- n.default = e;
26
- return Object.freeze(n);
27
- }
28
- const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
29
- echarts__namespace.use([charts.TreemapChart, components.TooltipComponent]);
30
- const HvTreemapChart = react.forwardRef(
31
- function HvTreemapChart2(props, ref) {
32
- const {
33
- name,
34
- data,
35
- classes,
36
- width,
37
- height,
38
- tooltip,
39
- onOptionChange,
40
- ...others
41
- } = props;
42
- const chartTooltip = useTooltip.useTooltip({
43
- ...tooltip,
44
- type: "single",
45
- classes
46
- });
47
- const option = useOption.useOption({
48
- option: {
49
- series: [
50
- {
51
- name,
52
- type: "treemap",
53
- data
54
- }
55
- ],
56
- ...chartTooltip
57
- },
58
- onOptionChange
59
- });
60
- return /* @__PURE__ */ jsxRuntime.jsx(
61
- BaseChart.HvBaseChart,
62
- {
63
- ref,
64
- option,
65
- width,
66
- height,
67
- ...others
68
- }
69
- );
70
- }
71
- );
72
- exports.HvTreemapChart = HvTreemapChart;
@@ -1,80 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
4
- const uikitStyles = require("@hitachivantara/uikit-styles");
5
- const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvChartTooltip", {
6
- /** Single tooltip styles */
7
- singleTooltipRoot: {
8
- width: "fit-content",
9
- boxShadow: uikitStyles.theme.colors.shadow,
10
- backgroundColor: uikitStyles.theme.colors.bgContainer,
11
- padding: uikitStyles.theme.space.sm,
12
- display: "flex"
13
- },
14
- singleTooltipTitle: {
15
- fontFamily: uikitStyles.theme.fontFamily.body,
16
- fontWeight: uikitStyles.theme.fontWeights.semibold,
17
- fontSize: uikitStyles.theme.fontSizes.sm,
18
- color: uikitStyles.theme.colors.text
19
- },
20
- singleTooltipValue: {
21
- fontFamily: uikitStyles.theme.fontFamily.body,
22
- fontWeight: uikitStyles.theme.fontWeights.normal,
23
- fontSize: uikitStyles.theme.fontSizes.sm,
24
- color: uikitStyles.theme.colors.text,
25
- marginLeft: uikitStyles.theme.space.xs
26
- },
27
- /** Multiple tooltip styles */
28
- multipleTooltipRoot: {
29
- width: "fit-content",
30
- boxShadow: uikitStyles.theme.colors.shadow,
31
- backgroundColor: uikitStyles.theme.colors.bgContainer
32
- },
33
- multipleTooltipTitleContainer: {
34
- padding: `15px ${uikitStyles.theme.space.sm}`,
35
- borderBottom: `3px solid ${uikitStyles.theme.colors.bgPage}`
36
- },
37
- multipleTooltipTitle: {
38
- fontFamily: uikitStyles.theme.fontFamily.body,
39
- fontWeight: uikitStyles.theme.fontWeights.semibold,
40
- fontSize: uikitStyles.theme.fontSizes.sm,
41
- color: uikitStyles.theme.colors.text
42
- },
43
- multipleTooltipValuesContainer: {
44
- display: "flex",
45
- flexDirection: "column",
46
- padding: uikitStyles.theme.space.sm,
47
- "& > *:not(:last-child)": { paddingBottom: uikitStyles.theme.space.sm }
48
- },
49
- multipleTooltipSeriesContainer: {
50
- display: "flex",
51
- flexDirection: "row",
52
- justifyContent: "space-between",
53
- alignItems: "center"
54
- },
55
- multipleTooltipSeriesNameContainer: {
56
- display: "flex",
57
- flexDirection: "row",
58
- alignItems: "center",
59
- marginRight: uikitStyles.theme.space.sm
60
- },
61
- multipleTooltipSeriesColor: {
62
- width: "10px",
63
- height: "10px",
64
- marginRight: "5px"
65
- },
66
- multipleTooltipSeriesName: {
67
- fontFamily: uikitStyles.theme.fontFamily.body,
68
- fontWeight: uikitStyles.theme.fontWeights.semibold,
69
- fontSize: uikitStyles.theme.fontSizes.sm,
70
- color: uikitStyles.theme.colors.text
71
- },
72
- multipleTooltipSeriesValue: {
73
- fontFamily: uikitStyles.theme.fontFamily.body,
74
- fontWeight: uikitStyles.theme.fontWeights.normal,
75
- fontSize: uikitStyles.theme.fontSizes.sm,
76
- color: uikitStyles.theme.colors.text
77
- }
78
- });
79
- exports.staticClasses = staticClasses;
80
- exports.useClasses = useClasses;
@@ -1,116 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const react = require("react");
4
- const index = require("../../utils/index.cjs");
5
- const styles = require("./styles.cjs");
6
- const useTooltip = ({
7
- measuresMapping = {},
8
- classes,
9
- component,
10
- show = true,
11
- horizontal = false,
12
- trigger = "item",
13
- type = "multiple",
14
- valueFormatter,
15
- titleFormatter,
16
- nameFormatter
17
- }) => {
18
- const { classes: hvClasses } = styles.useClasses(classes);
19
- const renderTooltip = react.useCallback(
20
- (params) => {
21
- const title = params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" || params[0].seriesType === "boxplot" ? params[0].name : params[0].seriesType === "pie" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]];
22
- const formattedTitle = titleFormatter ? titleFormatter(title) : title;
23
- if (type === "single") {
24
- const measure = index.getMeasure(
25
- params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" || params[0].seriesType === "boxplot" ? params[0].name : horizontal ? params[0].dimensionNames[params[0].encode.x[0]] : params[0].dimensionNames[params[0].encode.y[0]],
26
- measuresMapping
27
- );
28
- const value = params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].value[params[0].encode.value[0]] : horizontal ? params[0].value[params[0].encode.x[0]] : params[0].value[params[0].encode.y[0]];
29
- const formattedValue = measure && typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
30
- return `
31
- <div class="${hvClasses?.singleTooltipRoot}">
32
- <p class="${hvClasses?.singleTooltipTitle}">${formattedTitle}</p>
33
- <p class="${hvClasses?.singleTooltipValue}">${formattedValue}</p>
34
- </div>
35
- `;
36
- }
37
- return `
38
- <div class="${hvClasses?.multipleTooltipRoot}">
39
- <div class="${hvClasses?.multipleTooltipTitleContainer}">
40
- <div>
41
- <p class="${hvClasses?.multipleTooltipTitle}">${formattedTitle}</p>
42
- </div>
43
- </div>
44
- <div class="${hvClasses?.multipleTooltipValuesContainer}">
45
- ${params.map((s) => {
46
- const measure = index.getMeasure(
47
- s.seriesType === "pie" ? s.name : horizontal ? s.dimensionNames[s.encode.x[0]] : s.dimensionNames[s.encode.y[0]],
48
- measuresMapping
49
- );
50
- const value = s.seriesType === "pie" ? s.value[s.encode.value[0]] : horizontal ? s.value[s.encode.x[0]] : s.value[s.encode.y[0]];
51
- const formattedValue = typeof measure !== "string" && measure?.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
52
- const name = s.seriesType === "pie" ? s.name : s.seriesName;
53
- const formattedName = nameFormatter ? nameFormatter(name) : name;
54
- return `
55
- <div key="${s.seriesName}" class="${hvClasses?.multipleTooltipSeriesContainer}">
56
- <div class="${hvClasses?.multipleTooltipSeriesNameContainer}">
57
- <p style="background-color: ${s.color};" class="${hvClasses?.multipleTooltipSeriesColor}" />
58
- <p class="${hvClasses?.multipleTooltipSeriesName}">${formattedName}</p>
59
- </div>
60
- <p class="${hvClasses?.multipleTooltipSeriesValue}">${formattedValue}</p>
61
- </div>
62
- `;
63
- }).join(" ")}
64
- </div>
65
- </div>
66
- `;
67
- },
68
- [
69
- hvClasses,
70
- horizontal,
71
- type,
72
- measuresMapping,
73
- nameFormatter,
74
- titleFormatter,
75
- valueFormatter
76
- ]
77
- );
78
- const renderCustomTooltip = react.useCallback(
79
- (params) => {
80
- if (typeof component === "function") {
81
- const values = {
82
- title: params[0].seriesType === "boxplot" ? params[0].name : params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]],
83
- series: params.map((p) => {
84
- return {
85
- color: p.color,
86
- name: p.seriesType === "heatmap" ? String(p.value[p.encode.y[0]]) : p.seriesType === "pie" || p.seriesType === "treemap" ? p.name : p.seriesName,
87
- value: p.seriesType === "pie" || p.seriesType === "treemap" || p.seriesType === "heatmap" ? p.value[p.encode.value[0]] : horizontal ? p.value[p.encode.x[0]] : p.value[p.encode.y[0]]
88
- };
89
- }),
90
- value: params[0].value
91
- };
92
- return component(values);
93
- }
94
- return component;
95
- },
96
- [component, horizontal]
97
- );
98
- const option = react.useMemo(() => {
99
- return {
100
- tooltip: {
101
- confine: false,
102
- show,
103
- trigger,
104
- position: (point, params, dom, rect, size) => {
105
- return [point[0], point[1] - size.contentSize[1]];
106
- },
107
- formatter: (params) => {
108
- const tooltipParams = Array.isArray(params) ? params : [params];
109
- return component ? renderCustomTooltip(tooltipParams) : renderTooltip(tooltipParams);
110
- }
111
- }
112
- };
113
- }, [trigger, component, show, renderTooltip, renderCustomTooltip]);
114
- return option;
115
- };
116
- exports.useTooltip = useTooltip;
@@ -1,164 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const react = require("react");
4
- const arquero = require("arquero");
5
- const index = require("../utils/index.cjs");
6
- const getAgFunc = (func, field) => func === "count" ? "count()" : `${func}(d["${field}"])`;
7
- const useData = ({
8
- data,
9
- groupBy,
10
- measures,
11
- sortBy,
12
- splitBy,
13
- filters: filtersProp,
14
- delta
15
- }) => {
16
- const groupByKey = index.getGroupKey(groupBy);
17
- return react.useMemo(() => {
18
- const { data: processedData, mapping } = index.processTableData(data);
19
- let tableData = processedData;
20
- if (filtersProp) {
21
- const filters = (Array.isArray(filtersProp) ? filtersProp : [filtersProp]).map((filter) => ({
22
- ...filter,
23
- field: index.normalizeColumnName(filter.field)
24
- // normalize
25
- }));
26
- tableData = tableData.filter(
27
- arquero.escape((row) => index.getHvArqueroCombinedFilters(row, filters))
28
- );
29
- }
30
- const groupByFields = (groupBy ? Array.isArray(groupBy) ? groupBy : [groupBy] : []).map((value) => index.normalizeColumnName(value));
31
- const splitByFields = (Array.isArray(splitBy) ? splitBy : splitBy != null ? [splitBy] : []).map((value) => index.normalizeColumnName(value));
32
- const measuresFields = [];
33
- const measuresMapping = {};
34
- let measuresColumns = {};
35
- if (typeof measures === "string") {
36
- measuresMapping[measures] = measures;
37
- const normalizedMeasure = index.normalizeColumnName(measures);
38
- measuresColumns[normalizedMeasure] = getAgFunc("sum", normalizedMeasure);
39
- measuresFields.push(normalizedMeasure);
40
- } else if (Array.isArray(measures)) {
41
- measuresColumns = measures.reduce(
42
- (acc, value) => {
43
- let field;
44
- let agFunction;
45
- let columnName;
46
- if (typeof value === "string") {
47
- measuresMapping[value] = value;
48
- field = index.normalizeColumnName(value);
49
- agFunction = "sum";
50
- columnName = field;
51
- } else {
52
- const notUnique = measures.filter(
53
- (m) => typeof m === "string" ? m === value.field : m.field === value.field
54
- ).length > 1;
55
- const appendAgg = notUnique && value.agg && value.agg !== "sum";
56
- measuresMapping[appendAgg ? `${value.field}_${value.agg}` : value.field] = value;
57
- field = index.normalizeColumnName(value.field);
58
- agFunction = value.agg ?? "sum";
59
- columnName = appendAgg ? `${field}_${value.agg}` : field;
60
- }
61
- measuresFields.push(field);
62
- acc[columnName] = getAgFunc(agFunction, field);
63
- return acc;
64
- },
65
- {}
66
- );
67
- } else if (measures != null) {
68
- measuresMapping[measures.field] = measures;
69
- const normalizedMeasure = index.normalizeColumnName(measures.field);
70
- measuresColumns[normalizedMeasure] = getAgFunc(
71
- measures.agg ?? "sum",
72
- normalizedMeasure
73
- );
74
- measuresFields.push(normalizedMeasure);
75
- }
76
- let sortByFields = {};
77
- if (typeof sortBy === "string") {
78
- const normalizedSort = index.normalizeColumnName(sortBy);
79
- sortByFields[normalizedSort] = "asc";
80
- } else if (Array.isArray(sortBy)) {
81
- sortByFields = sortBy.reduce(
82
- (acc, value) => {
83
- let field;
84
- let orderFunction;
85
- if (typeof value === "string") {
86
- field = index.normalizeColumnName(value);
87
- orderFunction = "asc";
88
- } else {
89
- field = index.normalizeColumnName(value.field);
90
- orderFunction = value.order ?? "asc";
91
- }
92
- acc[field] = orderFunction;
93
- return acc;
94
- },
95
- {}
96
- );
97
- } else if (sortBy != null) {
98
- const normalizedSort = index.normalizeColumnName(sortBy.field);
99
- sortByFields[normalizedSort] = sortBy.order ?? "asc";
100
- }
101
- const allFields = [...groupByFields, ...splitByFields, ...measuresFields];
102
- if (delta) {
103
- const deltaExpression = Object.keys(measuresColumns).reduce((acc, curr) => {
104
- const normalizedMeasure = index.normalizeColumnName(curr);
105
- const normalizedDelta = index.normalizeColumnName(delta);
106
- acc[normalizedMeasure] = `d => d.${normalizedMeasure} - d.${normalizedDelta}`;
107
- return acc;
108
- }, {});
109
- tableData = tableData.derive(deltaExpression);
110
- }
111
- tableData = tableData.select(...allFields);
112
- if (groupByFields.length > 0) {
113
- tableData = tableData.groupby(groupByFields);
114
- }
115
- if (splitByFields.length > 0) {
116
- tableData = tableData.pivot(splitByFields, measuresColumns);
117
- } else {
118
- tableData = tableData.rollup(measuresColumns);
119
- }
120
- if (groupByFields.length > 1) {
121
- const expression = `d => ${groupByFields.map((field) => `d.${field}`).join(" + '_' + ")}`;
122
- tableData = tableData.derive(
123
- { [groupByKey]: expression },
124
- { after: groupByFields[groupByFields.length - 1] }
125
- );
126
- }
127
- if (Object.keys(sortByFields).length > 0) {
128
- tableData = tableData.orderby(
129
- ...Object.keys(sortByFields).filter((key) => allFields.includes(key)).map((key) => sortByFields[key] === "desc" ? arquero.desc(key) : key)
130
- );
131
- }
132
- const reversedMapping = {};
133
- for (const column of tableData.columnNames()) {
134
- if (mapping[column] != null) {
135
- reversedMapping[column] = mapping[column];
136
- } else {
137
- const found = Object.entries(mapping).find(
138
- ([key]) => column.includes(key)
139
- );
140
- if (found) {
141
- const [key, value] = found;
142
- reversedMapping[column] = column.replace(key, value);
143
- } else {
144
- reversedMapping[column] = column;
145
- }
146
- }
147
- }
148
- tableData = tableData.select(reversedMapping);
149
- if (groupByFields.length > 1) {
150
- tableData = tableData.select(arquero.not(...groupByFields));
151
- }
152
- return { data: tableData, mapping: measuresMapping };
153
- }, [
154
- data,
155
- filtersProp,
156
- groupBy,
157
- splitBy,
158
- measures,
159
- sortBy,
160
- delta,
161
- groupByKey
162
- ]);
163
- };
164
- exports.useData = useData;