@hitachivantara/uikit-react-viz 5.11.1 → 5.12.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.
- package/dist/cjs/Boxplot/Boxplot.cjs +2 -1
- package/dist/cjs/Boxplot/useBoxplot.cjs +8 -2
- package/dist/cjs/Boxplot/useBoxplotData.cjs +14 -2
- package/dist/cjs/hooks/useData.cjs +10 -11
- package/dist/cjs/index.cjs +2 -0
- package/dist/cjs/utils/index.cjs +106 -7
- package/dist/esm/Boxplot/Boxplot.js +2 -1
- package/dist/esm/Boxplot/Boxplot.js.map +1 -1
- package/dist/esm/Boxplot/useBoxplot.js +8 -2
- package/dist/esm/Boxplot/useBoxplot.js.map +1 -1
- package/dist/esm/Boxplot/useBoxplotData.js +15 -3
- package/dist/esm/Boxplot/useBoxplotData.js.map +1 -1
- package/dist/esm/Heatmap/Heatmap.js.map +1 -1
- package/dist/esm/hooks/useData.js +11 -12
- package/dist/esm/hooks/useData.js.map +1 -1
- package/dist/esm/index.js +3 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/index.js +106 -7
- package/dist/esm/utils/index.js.map +1 -1
- package/dist/types/index.d.ts +8 -2
- package/package.json +2 -2
|
@@ -50,6 +50,7 @@ const HvBoxplot = react.forwardRef(
|
|
|
50
50
|
tooltip,
|
|
51
51
|
width,
|
|
52
52
|
height,
|
|
53
|
+
filters,
|
|
53
54
|
classes: classesProp,
|
|
54
55
|
onOptionChange,
|
|
55
56
|
...others
|
|
@@ -92,7 +93,7 @@ const HvBoxplot = react.forwardRef(
|
|
|
92
93
|
defaultType: "continuous",
|
|
93
94
|
...yAxis
|
|
94
95
|
});
|
|
95
|
-
const chartBoxplot = useBoxplot.useBoxplot({ data, groupBy, measures });
|
|
96
|
+
const chartBoxplot = useBoxplot.useBoxplot({ data, groupBy, measures, filters });
|
|
96
97
|
const chartOption = useOption.useOption({
|
|
97
98
|
option: {
|
|
98
99
|
...chartBoxplot,
|
|
@@ -2,7 +2,12 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const react = require("react");
|
|
4
4
|
const useBoxplotData = require("./useBoxplotData.cjs");
|
|
5
|
-
const useBoxplot = ({
|
|
5
|
+
const useBoxplot = ({
|
|
6
|
+
data,
|
|
7
|
+
groupBy,
|
|
8
|
+
measures,
|
|
9
|
+
filters
|
|
10
|
+
}) => {
|
|
6
11
|
const measuresFields = react.useMemo(() => {
|
|
7
12
|
if (measures == null) {
|
|
8
13
|
return {};
|
|
@@ -32,7 +37,8 @@ const useBoxplot = ({ data, groupBy, measures }) => {
|
|
|
32
37
|
const chartData = useBoxplotData.useBoxplotData({
|
|
33
38
|
data,
|
|
34
39
|
groupBy,
|
|
35
|
-
measures: measuresFields
|
|
40
|
+
measures: measuresFields,
|
|
41
|
+
filters
|
|
36
42
|
});
|
|
37
43
|
const boxplotData = react.useMemo(() => {
|
|
38
44
|
const setData = {};
|
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const react = require("react");
|
|
4
4
|
const arquero = require("arquero");
|
|
5
|
+
const index = require("../utils/index.cjs");
|
|
5
6
|
const useBoxplotData = ({
|
|
6
7
|
data,
|
|
7
8
|
groupBy,
|
|
8
|
-
measures
|
|
9
|
+
measures,
|
|
10
|
+
filters
|
|
9
11
|
}) => {
|
|
10
12
|
const chartData = react.useMemo(() => {
|
|
11
13
|
let tableData;
|
|
@@ -16,6 +18,16 @@ const useBoxplotData = ({
|
|
|
16
18
|
} else {
|
|
17
19
|
tableData = arquero.table(data);
|
|
18
20
|
}
|
|
21
|
+
if (filters) {
|
|
22
|
+
tableData = tableData.filter(
|
|
23
|
+
arquero.escape(
|
|
24
|
+
(row) => index.getHvArqueroCombinedFilters(
|
|
25
|
+
row,
|
|
26
|
+
Array.isArray(filters) ? filters : [filters]
|
|
27
|
+
)
|
|
28
|
+
)
|
|
29
|
+
);
|
|
30
|
+
}
|
|
19
31
|
const uniqueGroupBy = new Set(tableData.array(groupBy || ""));
|
|
20
32
|
const results = {};
|
|
21
33
|
uniqueGroupBy.forEach((group) => {
|
|
@@ -25,7 +37,7 @@ const useBoxplotData = ({
|
|
|
25
37
|
});
|
|
26
38
|
});
|
|
27
39
|
return results;
|
|
28
|
-
}, [data, groupBy, measures]);
|
|
40
|
+
}, [data, filters, groupBy, measures]);
|
|
29
41
|
return chartData;
|
|
30
42
|
};
|
|
31
43
|
exports.useBoxplotData = useBoxplotData;
|
|
@@ -23,6 +23,16 @@ const useData = ({
|
|
|
23
23
|
} else {
|
|
24
24
|
tableData = arquero.table(data);
|
|
25
25
|
}
|
|
26
|
+
if (filters) {
|
|
27
|
+
tableData = tableData.filter(
|
|
28
|
+
arquero.escape(
|
|
29
|
+
(row) => index.getHvArqueroCombinedFilters(
|
|
30
|
+
row,
|
|
31
|
+
Array.isArray(filters) ? filters : [filters]
|
|
32
|
+
)
|
|
33
|
+
)
|
|
34
|
+
);
|
|
35
|
+
}
|
|
26
36
|
const groupByFields = groupBy ? Array.isArray(groupBy) ? groupBy : [groupBy] : [];
|
|
27
37
|
const splitByFields = Array.isArray(splitBy) ? splitBy : splitBy != null ? [splitBy] : [];
|
|
28
38
|
const measuresFields = measures == null ? {} : typeof measures === "string" ? { [measures]: getAgFunc("sum", measures) } : Array.isArray(measures) ? measures.reduce((acc, value) => {
|
|
@@ -93,17 +103,6 @@ const useData = ({
|
|
|
93
103
|
{ after: groupByFields[groupByFields.length - 1] }
|
|
94
104
|
);
|
|
95
105
|
}
|
|
96
|
-
if (filters) {
|
|
97
|
-
const filtersArray = Array.isArray(filters) ? filters : [filters];
|
|
98
|
-
const combinedFilterFunction = (row) => {
|
|
99
|
-
return filtersArray.every((filter) => {
|
|
100
|
-
const { field, operation, value } = filter;
|
|
101
|
-
const filterFunction = index.getFilterFunction(operation, field, value);
|
|
102
|
-
return filterFunction(row);
|
|
103
|
-
});
|
|
104
|
-
};
|
|
105
|
-
tableData = tableData.filter(arquero.escape(combinedFilterFunction));
|
|
106
|
-
}
|
|
107
106
|
if (Object.keys(sortByFields).length > 0) {
|
|
108
107
|
tableData = tableData.orderby(
|
|
109
108
|
...Object.keys(sortByFields).filter((key) => allFields.includes(key)).map((key) => sortByFields[key] === "desc" ? arquero.desc(key) : key)
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const Provider = require("./providers/Provider.cjs");
|
|
4
|
+
const index = require("./utils/index.cjs");
|
|
4
5
|
const LineChart = require("./LineChart/LineChart.cjs");
|
|
5
6
|
const BarChart = require("./BarChart/BarChart.cjs");
|
|
6
7
|
const DonutChart = require("./DonutChart/DonutChart.cjs");
|
|
@@ -11,6 +12,7 @@ const Heatmap = require("./Heatmap/Heatmap.cjs");
|
|
|
11
12
|
const Boxplot = require("./Boxplot/Boxplot.cjs");
|
|
12
13
|
exports.HvVizContext = Provider.HvVizContext;
|
|
13
14
|
exports.HvVizProvider = Provider.HvVizProvider;
|
|
15
|
+
exports.getHvArqueroCombinedFilters = index.getHvArqueroCombinedFilters;
|
|
14
16
|
exports.HvLineChart = LineChart.HvLineChart;
|
|
15
17
|
exports.HvBarChart = BarChart.HvBarChart;
|
|
16
18
|
exports.HvDonutChart = DonutChart.HvDonutChart;
|
package/dist/cjs/utils/index.cjs
CHANGED
|
@@ -35,33 +35,132 @@ const getMeasure = (name, msr) => {
|
|
|
35
35
|
}) ?? measuresArray[0];
|
|
36
36
|
};
|
|
37
37
|
const getFilterFunction = (operation, field, value) => {
|
|
38
|
+
const valueArray = Array.isArray(value) ? value : [value];
|
|
39
|
+
if (valueArray.length === 0)
|
|
40
|
+
return () => true;
|
|
38
41
|
switch (operation) {
|
|
39
42
|
case "is": {
|
|
40
|
-
const valueArray = Array.isArray(value) ? value : [value];
|
|
41
43
|
return (row) => valueArray.includes(row[field]);
|
|
42
44
|
}
|
|
43
45
|
case "isNot": {
|
|
44
|
-
const valueArray = Array.isArray(value) ? value : [value];
|
|
45
46
|
return (row) => !valueArray.includes(row[field]);
|
|
46
47
|
}
|
|
47
48
|
case "contains":
|
|
48
|
-
return (row) =>
|
|
49
|
+
return (row) => {
|
|
50
|
+
let include = false;
|
|
51
|
+
for (const val of valueArray) {
|
|
52
|
+
if (row[field].includes(val)) {
|
|
53
|
+
include = true;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
return include;
|
|
57
|
+
};
|
|
58
|
+
case "notContains":
|
|
59
|
+
return (row) => {
|
|
60
|
+
let include = true;
|
|
61
|
+
for (const val of valueArray) {
|
|
62
|
+
if (row[field].includes(val)) {
|
|
63
|
+
include = false;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
return include;
|
|
67
|
+
};
|
|
49
68
|
case "greaterThan":
|
|
50
|
-
return (row) =>
|
|
69
|
+
return (row) => {
|
|
70
|
+
let include = false;
|
|
71
|
+
for (const val of valueArray) {
|
|
72
|
+
if (row[field] > val) {
|
|
73
|
+
include = true;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
return include;
|
|
77
|
+
};
|
|
51
78
|
case "greaterThanOrEqual":
|
|
52
|
-
return (row) =>
|
|
79
|
+
return (row) => {
|
|
80
|
+
let include = false;
|
|
81
|
+
for (const val of valueArray) {
|
|
82
|
+
if (row[field] >= val) {
|
|
83
|
+
include = true;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
return include;
|
|
87
|
+
};
|
|
53
88
|
case "lessThan":
|
|
54
|
-
return (row) =>
|
|
89
|
+
return (row) => {
|
|
90
|
+
let include = false;
|
|
91
|
+
for (const val of valueArray) {
|
|
92
|
+
if (row[field] < val) {
|
|
93
|
+
include = true;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
return include;
|
|
97
|
+
};
|
|
55
98
|
case "lessThanOrEqual":
|
|
56
|
-
return (row) =>
|
|
99
|
+
return (row) => {
|
|
100
|
+
let include = false;
|
|
101
|
+
for (const val of valueArray) {
|
|
102
|
+
if (row[field] <= val) {
|
|
103
|
+
include = true;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
return include;
|
|
107
|
+
};
|
|
57
108
|
case "between":
|
|
58
109
|
return (row) => row[field] >= value[0] && row[field] <= value[1];
|
|
110
|
+
case "ends":
|
|
111
|
+
return (row) => {
|
|
112
|
+
let include = false;
|
|
113
|
+
for (const val of valueArray) {
|
|
114
|
+
if (String(row[field]).endsWith(String(val))) {
|
|
115
|
+
include = true;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
return include;
|
|
119
|
+
};
|
|
120
|
+
case "notEnds":
|
|
121
|
+
return (row) => {
|
|
122
|
+
let include = true;
|
|
123
|
+
for (const val of valueArray) {
|
|
124
|
+
if (String(row[field]).endsWith(String(val))) {
|
|
125
|
+
include = false;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
return include;
|
|
129
|
+
};
|
|
130
|
+
case "starts":
|
|
131
|
+
return (row) => {
|
|
132
|
+
let include = false;
|
|
133
|
+
for (const val of valueArray) {
|
|
134
|
+
if (String(row[field]).startsWith(String(val))) {
|
|
135
|
+
include = true;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
return include;
|
|
139
|
+
};
|
|
140
|
+
case "notStarts":
|
|
141
|
+
return (row) => {
|
|
142
|
+
let include = true;
|
|
143
|
+
for (const val of valueArray) {
|
|
144
|
+
if (String(row[field]).startsWith(String(val))) {
|
|
145
|
+
include = false;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
return include;
|
|
149
|
+
};
|
|
59
150
|
default:
|
|
60
151
|
throw new Error("Unsupported operation");
|
|
61
152
|
}
|
|
62
153
|
};
|
|
154
|
+
const getHvArqueroCombinedFilters = (row, filters) => {
|
|
155
|
+
return filters.every((filter) => {
|
|
156
|
+
const { field, operation, value } = filter;
|
|
157
|
+
const filterFunction = getFilterFunction(operation, field, value);
|
|
158
|
+
return filterFunction(row);
|
|
159
|
+
});
|
|
160
|
+
};
|
|
63
161
|
exports.getAxisType = getAxisType;
|
|
64
162
|
exports.getFilterFunction = getFilterFunction;
|
|
65
163
|
exports.getGroupKey = getGroupKey;
|
|
164
|
+
exports.getHvArqueroCombinedFilters = getHvArqueroCombinedFilters;
|
|
66
165
|
exports.getLegendIcon = getLegendIcon;
|
|
67
166
|
exports.getMeasure = getMeasure;
|
|
@@ -29,6 +29,7 @@ const HvBoxplot = forwardRef(
|
|
|
29
29
|
tooltip,
|
|
30
30
|
width,
|
|
31
31
|
height,
|
|
32
|
+
filters,
|
|
32
33
|
classes: classesProp,
|
|
33
34
|
onOptionChange,
|
|
34
35
|
...others
|
|
@@ -71,7 +72,7 @@ const HvBoxplot = forwardRef(
|
|
|
71
72
|
defaultType: "continuous",
|
|
72
73
|
...yAxis
|
|
73
74
|
});
|
|
74
|
-
const chartBoxplot = useBoxplot({ data, groupBy, measures });
|
|
75
|
+
const chartBoxplot = useBoxplot({ data, groupBy, measures, filters });
|
|
75
76
|
const chartOption = useOption({
|
|
76
77
|
option: {
|
|
77
78
|
...chartBoxplot,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Boxplot.js","sources":["../../../src/Boxplot/Boxplot.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { BoxplotChart } from \"echarts/charts\";\nimport { TooltipComponent, VisualMapComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n useGrid,\n useLegend,\n useOption,\n useTooltip,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport { HvBoxplotMeasure, HvChartTooltip } from \"../types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\nimport { useClasses } from \"./Boxplot.styles\";\nimport { useBoxplot } from \"./useBoxplot\";\n\n// Register chart components\necharts.use([BoxplotChart, TooltipComponent, VisualMapComponent]);\n\nexport type HvBoxplotClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBoxplotProps\n extends HvAxisChartCommonProps,\n Omit<HvChartCommonProps, \"groupBy\"> {\n /** The name of the heatmap */\n name?: string;\n /** Columns to measure on the chart. */\n measures: Arrayable<HvBoxplotMeasure>;\n /** Columns to use to group the data. */\n groupBy?: string;\n /** The tooltip options. */\n tooltip?: Omit<HvChartTooltip, \"type\" | \"valueFormatter\" | \"titleFormatter\">;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvBoxplotClasses;\n}\n\n/**\n * A Boxplot chart visually summarizes the distribution of a dataset by depicting key statistical measures such as the median, quartiles, and outliers.\n */\nexport const HvBoxplot = forwardRef<ReactECharts, HvBoxplotProps>(\n (props, ref) => {\n const {\n name,\n data,\n xAxis,\n yAxis,\n grid,\n legend,\n measures,\n groupBy,\n splitBy,\n sortBy,\n tooltip,\n width,\n height,\n classes: classesProp,\n onOptionChange,\n ...others\n } = props;\n\n const { classes } = useClasses(classesProp);\n\n const chartTooltip = useTooltip({\n component: (params) => {\n const title = params?.title;\n const upper = params?.value?.[5];\n const q3 = params?.value?.[4];\n const median = params?.value?.[3];\n const q1 = params?.value?.[2];\n const lower = params?.value?.[1];\n\n return `\n <div class=\"${classes.tooltipRoot}\">\n <div class=\"${classes.tooltipContainer}\">\n <div>\n <p class=\"${classes.tooltipText}\">${title}</p>\n <p class=\"${classes.tooltipText}\">Upper: ${upper}</p>\n <p class=\"${classes.tooltipText}\">Q3: ${q3}</p>\n <p class=\"${classes.tooltipText}\">Median: ${median}</p>\n <p class=\"${classes.tooltipText}\">Q1: ${q1}</p>\n <p class=\"${classes.tooltipText}\">Lower: ${lower}</p>\n </div>\n </div>\n </div>`;\n },\n ...tooltip,\n });\n\n const chartGrid = useGrid({ ...grid });\n\n const chartLegend = useLegend({\n ...legend,\n icon: \"square\",\n });\n\n const chartXAxis = useXAxis({\n ...xAxis,\n });\n\n const chartYAxis = useYAxis({\n axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n defaultType: \"continuous\",\n ...yAxis,\n });\n\n const chartBoxplot = useBoxplot({ data, groupBy, measures });\n\n const chartOption = useOption({\n option: {\n ...chartBoxplot,\n ...chartGrid,\n ...chartLegend,\n ...chartTooltip,\n ...chartXAxis,\n ...chartYAxis,\n },\n });\n\n return (\n <HvBaseChart\n ref={ref}\n option={chartOption}\n width={width}\n height={height}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAsBA,QAAQ,IAAI,CAAC,cAAc,kBAAkB,kBAAkB,CAAC;AAsBzD,MAAM,YAAY;AAAA,EACvB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;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,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AAEJ,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,UAAM,eAAe,WAAW;AAAA,MAC9B,WAAW,CAAC,WAAW;AACrB,cAAM,QAAQ,QAAQ;AAChB,cAAA,QAAQ,QAAQ,QAAQ,CAAC;AACzB,cAAA,KAAK,QAAQ,QAAQ,CAAC;AACtB,cAAA,SAAS,QAAQ,QAAQ,CAAC;AAC1B,cAAA,KAAK,QAAQ,QAAQ,CAAC;AACtB,cAAA,QAAQ,QAAQ,QAAQ,CAAC;AAExB,eAAA;AAAA,wBACS,QAAQ,WAAW;AAAA,0BACjB,QAAQ,gBAAgB;AAAA;AAAA,0BAExB,QAAQ,WAAW,KAAK,KAAK;AAAA,0BAC7B,QAAQ,WAAW,YAAY,KAAK;AAAA,0BACpC,QAAQ,WAAW,SAAS,EAAE;AAAA,0BAC9B,QAAQ,WAAW,aAAa,MAAM;AAAA,0BACtC,QAAQ,WAAW,SAAS,EAAE;AAAA,0BAC9B,QAAQ,WAAW,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA,MAIxD;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,MAAM;AAAA,IAAA,CACP;AAED,UAAM,aAAa,SAAS;AAAA,MAC1B,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,MAC5D,aAAa;AAAA,MACb,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,eAAe,WAAW,EAAE,MAAM,SAAS,UAAU;
|
|
1
|
+
{"version":3,"file":"Boxplot.js","sources":["../../../src/Boxplot/Boxplot.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { BoxplotChart } from \"echarts/charts\";\nimport { TooltipComponent, VisualMapComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n useGrid,\n useLegend,\n useOption,\n useTooltip,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport { HvBoxplotMeasure, HvChartTooltip } from \"../types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\nimport { useClasses } from \"./Boxplot.styles\";\nimport { useBoxplot } from \"./useBoxplot\";\n\n// Register chart components\necharts.use([BoxplotChart, TooltipComponent, VisualMapComponent]);\n\nexport type HvBoxplotClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBoxplotProps\n extends HvAxisChartCommonProps,\n Omit<HvChartCommonProps, \"groupBy\"> {\n /** The name of the heatmap */\n name?: string;\n /** Columns to measure on the chart. */\n measures: Arrayable<HvBoxplotMeasure>;\n /** Columns to use to group the data. */\n groupBy?: string;\n /** The tooltip options. */\n tooltip?: Omit<HvChartTooltip, \"type\" | \"valueFormatter\" | \"titleFormatter\">;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvBoxplotClasses;\n}\n\n/**\n * A Boxplot chart visually summarizes the distribution of a dataset by depicting key statistical measures such as the median, quartiles, and outliers.\n */\nexport const HvBoxplot = forwardRef<ReactECharts, HvBoxplotProps>(\n (props, ref) => {\n const {\n name,\n data,\n xAxis,\n yAxis,\n grid,\n legend,\n measures,\n groupBy,\n splitBy,\n sortBy,\n tooltip,\n width,\n height,\n filters,\n classes: classesProp,\n onOptionChange,\n ...others\n } = props;\n\n const { classes } = useClasses(classesProp);\n\n const chartTooltip = useTooltip({\n component: (params) => {\n const title = params?.title;\n const upper = params?.value?.[5];\n const q3 = params?.value?.[4];\n const median = params?.value?.[3];\n const q1 = params?.value?.[2];\n const lower = params?.value?.[1];\n\n return `\n <div class=\"${classes.tooltipRoot}\">\n <div class=\"${classes.tooltipContainer}\">\n <div>\n <p class=\"${classes.tooltipText}\">${title}</p>\n <p class=\"${classes.tooltipText}\">Upper: ${upper}</p>\n <p class=\"${classes.tooltipText}\">Q3: ${q3}</p>\n <p class=\"${classes.tooltipText}\">Median: ${median}</p>\n <p class=\"${classes.tooltipText}\">Q1: ${q1}</p>\n <p class=\"${classes.tooltipText}\">Lower: ${lower}</p>\n </div>\n </div>\n </div>`;\n },\n ...tooltip,\n });\n\n const chartGrid = useGrid({ ...grid });\n\n const chartLegend = useLegend({\n ...legend,\n icon: \"square\",\n });\n\n const chartXAxis = useXAxis({\n ...xAxis,\n });\n\n const chartYAxis = useYAxis({\n axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n defaultType: \"continuous\",\n ...yAxis,\n });\n\n const chartBoxplot = useBoxplot({ data, groupBy, measures, filters });\n\n const chartOption = useOption({\n option: {\n ...chartBoxplot,\n ...chartGrid,\n ...chartLegend,\n ...chartTooltip,\n ...chartXAxis,\n ...chartYAxis,\n },\n });\n\n return (\n <HvBaseChart\n ref={ref}\n option={chartOption}\n width={width}\n height={height}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAsBA,QAAQ,IAAI,CAAC,cAAc,kBAAkB,kBAAkB,CAAC;AAsBzD,MAAM,YAAY;AAAA,EACvB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;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,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AAEJ,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,UAAM,eAAe,WAAW;AAAA,MAC9B,WAAW,CAAC,WAAW;AACrB,cAAM,QAAQ,QAAQ;AAChB,cAAA,QAAQ,QAAQ,QAAQ,CAAC;AACzB,cAAA,KAAK,QAAQ,QAAQ,CAAC;AACtB,cAAA,SAAS,QAAQ,QAAQ,CAAC;AAC1B,cAAA,KAAK,QAAQ,QAAQ,CAAC;AACtB,cAAA,QAAQ,QAAQ,QAAQ,CAAC;AAExB,eAAA;AAAA,wBACS,QAAQ,WAAW;AAAA,0BACjB,QAAQ,gBAAgB;AAAA;AAAA,0BAExB,QAAQ,WAAW,KAAK,KAAK;AAAA,0BAC7B,QAAQ,WAAW,YAAY,KAAK;AAAA,0BACpC,QAAQ,WAAW,SAAS,EAAE;AAAA,0BAC9B,QAAQ,WAAW,aAAa,MAAM;AAAA,0BACtC,QAAQ,WAAW,SAAS,EAAE;AAAA,0BAC9B,QAAQ,WAAW,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA,MAIxD;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,MAAM;AAAA,IAAA,CACP;AAED,UAAM,aAAa,SAAS;AAAA,MAC1B,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,MAC5D,aAAa;AAAA,MACb,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,eAAe,WAAW,EAAE,MAAM,SAAS,UAAU,SAAS;AAEpE,UAAM,cAAc,UAAU;AAAA,MAC5B,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,IAAA,CACD;AAGC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
2
|
import { useBoxplotData } from "./useBoxplotData.js";
|
|
3
|
-
const useBoxplot = ({
|
|
3
|
+
const useBoxplot = ({
|
|
4
|
+
data,
|
|
5
|
+
groupBy,
|
|
6
|
+
measures,
|
|
7
|
+
filters
|
|
8
|
+
}) => {
|
|
4
9
|
const measuresFields = useMemo(() => {
|
|
5
10
|
if (measures == null) {
|
|
6
11
|
return {};
|
|
@@ -30,7 +35,8 @@ const useBoxplot = ({ data, groupBy, measures }) => {
|
|
|
30
35
|
const chartData = useBoxplotData({
|
|
31
36
|
data,
|
|
32
37
|
groupBy,
|
|
33
|
-
measures: measuresFields
|
|
38
|
+
measures: measuresFields,
|
|
39
|
+
filters
|
|
34
40
|
});
|
|
35
41
|
const boxplotData = useMemo(() => {
|
|
36
42
|
const setData = {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useBoxplot.js","sources":["../../../src/Boxplot/useBoxplot.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBoxplotMeasure, HvChartData } from \"../types\";\nimport { useBoxplotData } from \"./useBoxplotData\";\n\ninterface HvDataHookProps {\n data: HvChartData;\n groupBy?: string;\n measures: Arrayable<HvBoxplotMeasure>;\n}\n\nexport const useBoxplot = ({
|
|
1
|
+
{"version":3,"file":"useBoxplot.js","sources":["../../../src/Boxplot/useBoxplot.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBoxplotMeasure, HvChartData, HvChartFilter } from \"../types\";\nimport { useBoxplotData } from \"./useBoxplotData\";\n\ninterface HvDataHookProps {\n data: HvChartData;\n groupBy?: string;\n measures: Arrayable<HvBoxplotMeasure>;\n filters?: Arrayable<HvChartFilter>;\n}\n\nexport const useBoxplot = ({\n data,\n groupBy,\n measures,\n filters,\n}: HvDataHookProps) => {\n const measuresFields = useMemo(() => {\n if (measures == null) {\n return {};\n }\n if (typeof measures === \"string\") {\n return { [measures]: undefined };\n }\n if (Array.isArray(measures)) {\n return measures.reduce<{ [key: string]: string | undefined }>(\n (acc, value) => {\n let field: string | undefined;\n if (typeof value === \"string\") {\n field = value;\n } else {\n field = value.field;\n }\n\n return {\n ...acc,\n [field]: typeof value === \"string\" ? undefined : value.yAxis,\n };\n },\n {},\n );\n }\n return { [measures.field]: measures.yAxis };\n }, [measures]);\n\n const chartData = useBoxplotData({\n data,\n groupBy,\n measures: measuresFields,\n filters,\n });\n\n const boxplotData = useMemo(() => {\n const setData = {};\n Object.keys(measuresFields).forEach((m) => {\n setData[m] = [];\n Object.keys(chartData).forEach((key) => {\n setData[m].push(chartData[key][m]);\n });\n });\n\n const sources: any[] = [];\n const transforms: any[] = [];\n const series: any[] = [];\n\n Object.keys(measuresFields).forEach((m, index) => {\n sources.push({\n source: setData[m],\n id: m,\n });\n transforms.push({\n fromDatasetId: m,\n transform: {\n type: \"boxplot\",\n config: {\n itemNameFormatter: (params) => Object.keys(chartData)[params.value],\n },\n },\n });\n series.push({\n name: m,\n type: \"boxplot\",\n datasetIndex: Object.keys(measuresFields).length + index,\n yAxisId: measuresFields[m],\n });\n });\n\n const datasets = {\n dataset: [...sources, ...transforms],\n series,\n };\n\n return datasets;\n }, [chartData, measuresFields]);\n\n return boxplotData;\n};\n"],"names":[],"mappings":";;AAaO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACf,QAAA,iBAAiB,QAAQ,MAAM;AACnC,QAAI,YAAY,MAAM;AACpB,aAAO;IACT;AACI,QAAA,OAAO,aAAa,UAAU;AAChC,aAAO,EAAE,CAAC,QAAQ,GAAG;IACvB;AACI,QAAA,MAAM,QAAQ,QAAQ,GAAG;AAC3B,aAAO,SAAS;AAAA,QACd,CAAC,KAAK,UAAU;AACV,cAAA;AACA,cAAA,OAAO,UAAU,UAAU;AACrB,oBAAA;AAAA,UAAA,OACH;AACL,oBAAQ,MAAM;AAAA,UAChB;AAEO,iBAAA;AAAA,YACL,GAAG;AAAA,YACH,CAAC,KAAK,GAAG,OAAO,UAAU,WAAW,SAAY,MAAM;AAAA,UAAA;AAAA,QAE3D;AAAA,QACA,CAAC;AAAA,MAAA;AAAA,IAEL;AACA,WAAO,EAAE,CAAC,SAAS,KAAK,GAAG,SAAS,MAAM;AAAA,EAAA,GACzC,CAAC,QAAQ,CAAC;AAEb,QAAM,YAAY,eAAe;AAAA,IAC/B;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EAAA,CACD;AAEK,QAAA,cAAc,QAAQ,MAAM;AAChC,UAAM,UAAU,CAAA;AAChB,WAAO,KAAK,cAAc,EAAE,QAAQ,CAAC,MAAM;AACjC,cAAA,CAAC,IAAI;AACb,aAAO,KAAK,SAAS,EAAE,QAAQ,CAAC,QAAQ;AACtC,gBAAQ,CAAC,EAAE,KAAK,UAAU,GAAG,EAAE,CAAC,CAAC;AAAA,MAAA,CAClC;AAAA,IAAA,CACF;AAED,UAAM,UAAiB,CAAA;AACvB,UAAM,aAAoB,CAAA;AAC1B,UAAM,SAAgB,CAAA;AAEtB,WAAO,KAAK,cAAc,EAAE,QAAQ,CAAC,GAAG,UAAU;AAChD,cAAQ,KAAK;AAAA,QACX,QAAQ,QAAQ,CAAC;AAAA,QACjB,IAAI;AAAA,MAAA,CACL;AACD,iBAAW,KAAK;AAAA,QACd,eAAe;AAAA,QACf,WAAW;AAAA,UACT,MAAM;AAAA,UACN,QAAQ;AAAA,YACN,mBAAmB,CAAC,WAAW,OAAO,KAAK,SAAS,EAAE,OAAO,KAAK;AAAA,UACpE;AAAA,QACF;AAAA,MAAA,CACD;AACD,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN,MAAM;AAAA,QACN,cAAc,OAAO,KAAK,cAAc,EAAE,SAAS;AAAA,QACnD,SAAS,eAAe,CAAC;AAAA,MAAA,CAC1B;AAAA,IAAA,CACF;AAED,UAAM,WAAW;AAAA,MACf,SAAS,CAAC,GAAG,SAAS,GAAG,UAAU;AAAA,MACnC;AAAA,IAAA;AAGK,WAAA;AAAA,EAAA,GACN,CAAC,WAAW,cAAc,CAAC;AAEvB,SAAA;AACT;"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
|
-
import { internal, from, table } from "arquero";
|
|
2
|
+
import { internal, from, table, escape } from "arquero";
|
|
3
|
+
import { getHvArqueroCombinedFilters } from "../utils/index.js";
|
|
3
4
|
const useBoxplotData = ({
|
|
4
5
|
data,
|
|
5
6
|
groupBy,
|
|
6
|
-
measures
|
|
7
|
+
measures,
|
|
8
|
+
filters
|
|
7
9
|
}) => {
|
|
8
10
|
const chartData = useMemo(() => {
|
|
9
11
|
let tableData;
|
|
@@ -14,6 +16,16 @@ const useBoxplotData = ({
|
|
|
14
16
|
} else {
|
|
15
17
|
tableData = table(data);
|
|
16
18
|
}
|
|
19
|
+
if (filters) {
|
|
20
|
+
tableData = tableData.filter(
|
|
21
|
+
escape(
|
|
22
|
+
(row) => getHvArqueroCombinedFilters(
|
|
23
|
+
row,
|
|
24
|
+
Array.isArray(filters) ? filters : [filters]
|
|
25
|
+
)
|
|
26
|
+
)
|
|
27
|
+
);
|
|
28
|
+
}
|
|
17
29
|
const uniqueGroupBy = new Set(tableData.array(groupBy || ""));
|
|
18
30
|
const results = {};
|
|
19
31
|
uniqueGroupBy.forEach((group) => {
|
|
@@ -23,7 +35,7 @@ const useBoxplotData = ({
|
|
|
23
35
|
});
|
|
24
36
|
});
|
|
25
37
|
return results;
|
|
26
|
-
}, [data, groupBy, measures]);
|
|
38
|
+
}, [data, filters, groupBy, measures]);
|
|
27
39
|
return chartData;
|
|
28
40
|
};
|
|
29
41
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useBoxplotData.js","sources":["../../../src/Boxplot/useBoxplotData.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { from, internal, table } from \"arquero\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { HvChartData } from \"../types\";\n\ninterface HvDataHookProps {\n data: HvChartData;\n groupBy?: string;\n measures: { [key: string]: string | undefined };\n}\n\nexport const useBoxplotData = ({\n data,\n groupBy,\n measures,\n}: HvDataHookProps) => {\n const chartData = useMemo(() => {\n let tableData: ColumnTable;\n if (data instanceof internal.ColumnTable) {\n tableData = data;\n } else if (Array.isArray(data)) {\n tableData = from(data);\n } else {\n tableData = table(data);\n }\n\n const uniqueGroupBy = new Set(tableData.array(groupBy || \"\") as string[]);\n\n const results = {};\n uniqueGroupBy.forEach((group) => {\n results[group] = {};\n Object.keys(measures).forEach((measure) => {\n results[group][measure] = tableData\n .params({ group, groupBy })\n .filter((d, $) => d[$.groupBy] === $.group)\n .array(measure);\n });\n });\n\n return results;\n }, [data, groupBy, measures]);\n\n return chartData;\n};\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useBoxplotData.js","sources":["../../../src/Boxplot/useBoxplotData.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { escape, from, internal, table } from \"arquero\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvChartData, HvChartFilter } from \"../types\";\nimport { getHvArqueroCombinedFilters } from \"../utils\";\n\ninterface HvDataHookProps {\n data: HvChartData;\n groupBy?: string;\n measures: { [key: string]: string | undefined };\n filters?: Arrayable<HvChartFilter>;\n}\n\nexport const useBoxplotData = ({\n data,\n groupBy,\n measures,\n filters,\n}: HvDataHookProps) => {\n const chartData = useMemo(() => {\n let tableData: ColumnTable;\n if (data instanceof internal.ColumnTable) {\n tableData = data;\n } else if (Array.isArray(data)) {\n tableData = from(data);\n } else {\n tableData = table(data);\n }\n\n // Filter data right away\n if (filters) {\n tableData = tableData.filter(\n escape((row) =>\n getHvArqueroCombinedFilters(\n row,\n Array.isArray(filters) ? filters : [filters],\n ),\n ),\n );\n }\n\n const uniqueGroupBy = new Set(tableData.array(groupBy || \"\") as string[]);\n\n const results = {};\n uniqueGroupBy.forEach((group) => {\n results[group] = {};\n Object.keys(measures).forEach((measure) => {\n results[group][measure] = tableData\n .params({ group, groupBy })\n .filter((d, $) => d[$.groupBy] === $.group)\n .array(measure);\n });\n });\n\n return results;\n }, [data, filters, groupBy, measures]);\n\n return chartData;\n};\n"],"names":[],"mappings":";;;AAeO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACf,QAAA,YAAY,QAAQ,MAAM;AAC1B,QAAA;AACA,QAAA,gBAAgB,SAAS,aAAa;AAC5B,kBAAA;AAAA,IACH,WAAA,MAAM,QAAQ,IAAI,GAAG;AAC9B,kBAAY,KAAK,IAAI;AAAA,IAAA,OAChB;AACL,kBAAY,MAAM,IAAI;AAAA,IACxB;AAGA,QAAI,SAAS;AACX,kBAAY,UAAU;AAAA,QACpB;AAAA,UAAO,CAAC,QACN;AAAA,YACE;AAAA,YACA,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO;AAAA,UAC7C;AAAA,QACF;AAAA,MAAA;AAAA,IAEJ;AAEA,UAAM,gBAAgB,IAAI,IAAI,UAAU,MAAM,WAAW,EAAE,CAAa;AAExE,UAAM,UAAU,CAAA;AACF,kBAAA,QAAQ,CAAC,UAAU;AACvB,cAAA,KAAK,IAAI;AACjB,aAAO,KAAK,QAAQ,EAAE,QAAQ,CAAC,YAAY;AACjC,gBAAA,KAAK,EAAE,OAAO,IAAI,UACvB,OAAO,EAAE,OAAO,QAAS,CAAA,EACzB,OAAO,CAAC,GAAG,MAAM,EAAE,EAAE,OAAO,MAAM,EAAE,KAAK,EACzC,MAAM,OAAO;AAAA,MAAA,CACjB;AAAA,IAAA,CACF;AAEM,WAAA;AAAA,KACN,CAAC,MAAM,SAAS,SAAS,QAAQ,CAAC;AAE9B,SAAA;AACT;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heatmap.js","sources":["../../../src/Heatmap/Heatmap.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { HeatmapChart } from \"echarts/charts\";\nimport { TooltipComponent, VisualMapComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { ExtractNames, useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n useOption,\n useTooltip,\n useVisualMap,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport { HvChartTooltip } from \"../types\";\nimport { HvChartCommonProps, XAxis, YAxis } from \"../types/common\";\nimport { useClasses } from \"./Heatmap.styles\";\n\n// Register chart components\necharts.use([HeatmapChart, TooltipComponent, VisualMapComponent]);\n\nexport type HvHeatmapClasses = ExtractNames<typeof useClasses>;\n\nexport type HvHeatmapItem = Array<number | string>;\n\nexport type HvHeatmapData = Array<HvHeatmapItem>;\n\nexport interface HvHeatmapProps\n extends Omit<\n HvChartCommonProps,\n \"data\" | \"groupBy\" | \"sortBy\" | \"grid\" | \"legend\" | \"tooltip\" | \"filters\"\n > {\n /** The name of the heatmap */\n name?: string;\n /** The data to use on the heatmap */\n data?: HvHeatmapData;\n /** The min value of the Heatmap */\n min: number;\n /** The max value of the Heatmap */\n max: number;\n /** The X axis
|
|
1
|
+
{"version":3,"file":"Heatmap.js","sources":["../../../src/Heatmap/Heatmap.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { HeatmapChart } from \"echarts/charts\";\nimport { TooltipComponent, VisualMapComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { ExtractNames, useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n useOption,\n useTooltip,\n useVisualMap,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport { HvChartTooltip } from \"../types\";\nimport { HvChartCommonProps, XAxis, YAxis } from \"../types/common\";\nimport { useClasses } from \"./Heatmap.styles\";\n\n// Register chart components\necharts.use([HeatmapChart, TooltipComponent, VisualMapComponent]);\n\nexport type HvHeatmapClasses = ExtractNames<typeof useClasses>;\n\nexport type HvHeatmapItem = Array<number | string>;\n\nexport type HvHeatmapData = Array<HvHeatmapItem>;\n\nexport interface HvHeatmapProps\n extends Omit<\n HvChartCommonProps,\n \"data\" | \"groupBy\" | \"sortBy\" | \"grid\" | \"legend\" | \"tooltip\" | \"filters\"\n > {\n /** The name of the heatmap */\n name?: string;\n /** The data to use on the heatmap */\n data?: HvHeatmapData;\n /** The min value of the Heatmap */\n min: number;\n /** The max value of the Heatmap */\n max: number;\n /** The X axis definition */\n xAxis?: XAxis;\n /** The Y axis definition. */\n yAxis?: YAxis;\n /** The tooltip options. */\n tooltip?: Omit<HvChartTooltip, \"type\">;\n /** Color scale of the confusion matrix. Accepts an array of strings spanning from the lower to the upper ends of the scale. */\n colorScale?: string[];\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvHeatmapClasses;\n}\n\n/**\n * A Heatmap uses color gradients to represent data intensity across a surface.\n */\nexport const HvHeatmap = forwardRef<ReactECharts, HvHeatmapProps>(\n (props, ref) => {\n const {\n name,\n data,\n min,\n max,\n colorScale,\n xAxis,\n yAxis,\n classes: classesProp,\n tooltip,\n width,\n height,\n onOptionChange,\n ...others\n } = props;\n\n const { classes } = useClasses(classesProp);\n const { colors } = useTheme();\n\n const chartTooltip = useTooltip({\n component: (params) => {\n const value = params?.value;\n const title = params?.title;\n\n const valueToShow = value\n ? `${yAxis?.data?.[value?.[1]]} - ${xAxis?.data?.[value?.[0]]}: ${params?.series?.[0]?.name}`\n : \"-\";\n\n return `\n <div class=\"${classes.tooltipRoot}\">\n <div class=\"${classes.tooltipContainer}\">\n <div>\n <p class=\"${classes.tooltipText}\">${title}</p>\n <p class=\"${classes.tooltipText}\">${valueToShow}</p>\n </div>\n </div>\n </div>`;\n },\n ...tooltip,\n });\n\n const chartXAxis = useXAxis({ type: \"categorical\", ...xAxis });\n const chartYAxis = useYAxis({\n defaultType: \"categorical\",\n axes: yAxis ? [yAxis] : [],\n });\n\n const chartVisualMap = useVisualMap({\n min,\n max,\n orient: \"horizontal\",\n left: \"center\",\n calculable: true,\n position: {\n y: \"bottom\",\n },\n colorScale: colorScale || [colors?.cat1_180 || \"\", colors?.cat1_20 || \"\"],\n });\n\n const option = useOption({\n option: {\n xAxis: chartXAxis.xAxis,\n yAxis: chartYAxis.yAxis,\n visualMap: chartVisualMap.visualMap,\n series: [\n {\n name,\n type: \"heatmap\",\n data,\n label: {\n show: true,\n },\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowColor: \"rgba(0, 0, 0, 0.5)\",\n },\n },\n },\n ],\n ...chartTooltip,\n },\n onOptionChange,\n });\n\n return (\n <HvBaseChart\n ref={ref}\n option={option}\n width={width}\n height={height}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;AAoBA,QAAQ,IAAI,CAAC,cAAc,kBAAkB,kBAAkB,CAAC;AAoCzD,MAAM,YAAY;AAAA,EACvB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AAEJ,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,UAAA,EAAE,WAAW;AAEnB,UAAM,eAAe,WAAW;AAAA,MAC9B,WAAW,CAAC,WAAW;AACrB,cAAM,QAAQ,QAAQ;AACtB,cAAM,QAAQ,QAAQ;AAEhB,cAAA,cAAc,QAChB,GAAG,OAAO,OAAO,QAAQ,CAAC,CAAC,CAAC,MAAM,OAAO,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAK,QAAQ,SAAS,CAAC,GAAG,IAAI,KACzF;AAEG,eAAA;AAAA,wBACS,QAAQ,WAAW;AAAA,0BACjB,QAAQ,gBAAgB;AAAA;AAAA,0BAExB,QAAQ,WAAW,KAAK,KAAK;AAAA,0BAC7B,QAAQ,WAAW,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,MAIvD;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,aAAa,SAAS,EAAE,MAAM,eAAe,GAAG,OAAO;AAC7D,UAAM,aAAa,SAAS;AAAA,MAC1B,aAAa;AAAA,MACb,MAAM,QAAQ,CAAC,KAAK,IAAI,CAAC;AAAA,IAAA,CAC1B;AAED,UAAM,iBAAiB,aAAa;AAAA,MAClC;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA,QACR,GAAG;AAAA,MACL;AAAA,MACA,YAAY,cAAc,CAAC,QAAQ,YAAY,IAAI,QAAQ,WAAW,EAAE;AAAA,IAAA,CACzE;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,OAAO,WAAW;AAAA,QAClB,OAAO,WAAW;AAAA,QAClB,WAAW,eAAe;AAAA,QAC1B,QAAQ;AAAA,UACN;AAAA,YACE;AAAA,YACA,MAAM;AAAA,YACN;AAAA,YACA,OAAO;AAAA,cACL,MAAM;AAAA,YACR;AAAA,YACA,UAAU;AAAA,cACR,WAAW;AAAA,gBACT,YAAY;AAAA,gBACZ,aAAa;AAAA,cACf;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACA;AAAA,IAAA,CACD;AAGC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
2
|
import { internal, from, table, escape, desc, not } from "arquero";
|
|
3
|
-
import { getGroupKey,
|
|
3
|
+
import { getGroupKey, getHvArqueroCombinedFilters } from "../utils/index.js";
|
|
4
4
|
const getAgFunc = (func, field) => func === "count" ? "count()" : `${func}(d["${field}"])`;
|
|
5
5
|
const useData = ({
|
|
6
6
|
data,
|
|
@@ -21,6 +21,16 @@ const useData = ({
|
|
|
21
21
|
} else {
|
|
22
22
|
tableData = table(data);
|
|
23
23
|
}
|
|
24
|
+
if (filters) {
|
|
25
|
+
tableData = tableData.filter(
|
|
26
|
+
escape(
|
|
27
|
+
(row) => getHvArqueroCombinedFilters(
|
|
28
|
+
row,
|
|
29
|
+
Array.isArray(filters) ? filters : [filters]
|
|
30
|
+
)
|
|
31
|
+
)
|
|
32
|
+
);
|
|
33
|
+
}
|
|
24
34
|
const groupByFields = groupBy ? Array.isArray(groupBy) ? groupBy : [groupBy] : [];
|
|
25
35
|
const splitByFields = Array.isArray(splitBy) ? splitBy : splitBy != null ? [splitBy] : [];
|
|
26
36
|
const measuresFields = measures == null ? {} : typeof measures === "string" ? { [measures]: getAgFunc("sum", measures) } : Array.isArray(measures) ? measures.reduce((acc, value) => {
|
|
@@ -91,17 +101,6 @@ const useData = ({
|
|
|
91
101
|
{ after: groupByFields[groupByFields.length - 1] }
|
|
92
102
|
);
|
|
93
103
|
}
|
|
94
|
-
if (filters) {
|
|
95
|
-
const filtersArray = Array.isArray(filters) ? filters : [filters];
|
|
96
|
-
const combinedFilterFunction = (row) => {
|
|
97
|
-
return filtersArray.every((filter) => {
|
|
98
|
-
const { field, operation, value } = filter;
|
|
99
|
-
const filterFunction = getFilterFunction(operation, field, value);
|
|
100
|
-
return filterFunction(row);
|
|
101
|
-
});
|
|
102
|
-
};
|
|
103
|
-
tableData = tableData.filter(escape(combinedFilterFunction));
|
|
104
|
-
}
|
|
105
104
|
if (Object.keys(sortByFields).length > 0) {
|
|
106
105
|
tableData = tableData.orderby(
|
|
107
106
|
...Object.keys(sortByFields).filter((key) => allFields.includes(key)).map((key) => sortByFields[key] === "desc" ? desc(key) : key)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useData.js","sources":["../../../src/hooks/useData.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { desc, escape, from, internal, not, table } from \"arquero\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvBarChartMeasures,\n HvChartAggregation,\n HvChartData,\n HvChartOrder,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n HvScatterPlotMeasure,\n} from \"../types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\nimport {
|
|
1
|
+
{"version":3,"file":"useData.js","sources":["../../../src/hooks/useData.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { desc, escape, from, internal, not, table } from \"arquero\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvBarChartMeasures,\n HvChartAggregation,\n HvChartData,\n HvChartOrder,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n HvScatterPlotMeasure,\n} from \"../types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\nimport { getGroupKey, getHvArqueroCombinedFilters } from \"../utils\";\n\nconst getAgFunc = (func: HvChartAggregation, field: string) =>\n func === \"count\" ? \"count()\" : `${func}(d[\"${field}\"])`;\n\ninterface HvDataHookProps {\n data: HvChartData;\n groupBy: HvChartCommonProps[\"groupBy\"];\n measures:\n | Arrayable<HvLineChartMeasures | HvBarChartMeasures | HvScatterPlotMeasure>\n | HvDonutChartMeasure;\n splitBy?: HvAxisChartCommonProps[\"splitBy\"];\n sortBy?: HvChartCommonProps[\"sortBy\"];\n filters?: HvChartCommonProps[\"filters\"];\n delta?: string;\n}\n\nexport const useData = ({\n data,\n groupBy,\n measures,\n sortBy,\n splitBy,\n filters,\n delta,\n}: HvDataHookProps): internal.ColumnTable => {\n const groupByKey = getGroupKey(groupBy);\n\n const chartData = useMemo<ColumnTable>(() => {\n let tableData: ColumnTable;\n if (data instanceof internal.ColumnTable) {\n tableData = data;\n } else if (Array.isArray(data)) {\n tableData = from(data);\n } else {\n tableData = table(data);\n }\n\n // Filter data right away\n if (filters) {\n tableData = tableData.filter(\n escape((row) =>\n getHvArqueroCombinedFilters(\n row,\n Array.isArray(filters) ? filters : [filters],\n ),\n ),\n );\n }\n\n const groupByFields = groupBy\n ? Array.isArray(groupBy)\n ? groupBy\n : [groupBy]\n : [];\n\n const splitByFields = Array.isArray(splitBy)\n ? splitBy\n : splitBy != null\n ? [splitBy]\n : [];\n\n const measuresFields: { [key: string]: string } =\n measures == null\n ? {}\n : typeof measures === \"string\"\n ? { [measures]: getAgFunc(\"sum\", measures) }\n : Array.isArray(measures)\n ? measures.reduce<{ [key: string]: string }>((acc, value) => {\n let field: string;\n let agFunction: HvChartAggregation;\n if (typeof value === \"string\") {\n field = value;\n agFunction = \"sum\";\n } else {\n field = value.field;\n agFunction = value.agg ?? \"sum\";\n }\n\n return {\n ...acc,\n [field]: getAgFunc(agFunction, field),\n };\n }, {})\n : {\n [measures.field]: getAgFunc(\n measures.agg ?? \"sum\",\n measures.field,\n ),\n };\n\n const sortByFields: { [key: string]: HvChartOrder } =\n sortBy == null\n ? {}\n : typeof sortBy === \"string\"\n ? { [sortBy]: \"asc\" }\n : Array.isArray(sortBy)\n ? sortBy.reduce<{ [key: string]: HvChartOrder }>((acc, value) => {\n let field: string;\n let orderFunction: HvChartOrder;\n if (typeof value === \"string\") {\n field = value;\n orderFunction = \"asc\";\n } else {\n field = value.field;\n orderFunction = value.order ?? \"asc\";\n }\n\n return {\n ...acc,\n [field]: orderFunction,\n };\n }, {})\n : { [sortBy.field]: sortBy.order ?? \"asc\" };\n\n const allFields = [\n ...groupByFields,\n ...splitByFields,\n ...Object.keys(measuresFields),\n ];\n\n // --- Confusion matrix ---\n // Recalculate the measures columns according to the delta column\n if (delta) {\n const deltaExpression = Object.keys(measuresFields).reduce(\n (acc, curr) => {\n return {\n ...acc,\n [curr]: `d => d.${curr} - d.${delta}`,\n };\n },\n {},\n );\n\n tableData = tableData.derive(deltaExpression);\n }\n\n // remove unneeded fields\n tableData = tableData.select(...allFields);\n\n // group by groupBy fields\n if (groupByFields.length > 0) {\n tableData = tableData.groupby(groupByFields);\n }\n\n if (splitByFields.length > 0) {\n // pivot by splitBy fields\n tableData = tableData.pivot(splitByFields, measuresFields);\n } else {\n // if there is no splitBy fields, just aggregate measures fields\n tableData = tableData.rollup(measuresFields);\n }\n\n // if grouped by multiple fields, create a new joint field\n // as the line chart doesn't implement hierarchical axis label grouping\n if (groupByFields.length > 1) {\n const expression = `d => ${groupByFields\n .map((field) => `d.${field}`)\n .join(\" + '_' + \")}`;\n\n tableData = tableData.derive(\n { [groupByKey]: expression },\n { after: groupByFields[groupByFields.length - 1] },\n );\n }\n\n // sort by sortBy fields\n if (Object.keys(sortByFields).length > 0) {\n tableData = tableData.orderby(\n ...Object.keys(sortByFields)\n // only sort by fields that are in the table, ignore the rest\n .filter((key) => allFields.includes(key))\n .map((key) => (sortByFields[key] === \"desc\" ? desc(key) : key)),\n );\n }\n\n // if a derived field was created, remove the original fields\n if (groupByFields.length > 1) {\n tableData = tableData.select(not(...groupByFields));\n }\n\n return tableData;\n }, [data, groupBy, splitBy, measures, sortBy, delta, filters, groupByKey]);\n\n return chartData;\n};\n"],"names":[],"mappings":"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"}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { HvVizContext, HvVizProvider } from "./providers/Provider.js";
|
|
2
|
+
import { getHvArqueroCombinedFilters } from "./utils/index.js";
|
|
2
3
|
import { HvLineChart } from "./LineChart/LineChart.js";
|
|
3
4
|
import { HvBarChart } from "./BarChart/BarChart.js";
|
|
4
5
|
import { HvDonutChart } from "./DonutChart/DonutChart.js";
|
|
@@ -17,5 +18,6 @@ export {
|
|
|
17
18
|
HvScatterPlot,
|
|
18
19
|
HvTreemapChart,
|
|
19
20
|
HvVizContext,
|
|
20
|
-
HvVizProvider
|
|
21
|
+
HvVizProvider,
|
|
22
|
+
getHvArqueroCombinedFilters
|
|
21
23
|
};
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
package/dist/esm/utils/index.js
CHANGED
|
@@ -33,35 +33,134 @@ const getMeasure = (name, msr) => {
|
|
|
33
33
|
}) ?? measuresArray[0];
|
|
34
34
|
};
|
|
35
35
|
const getFilterFunction = (operation, field, value) => {
|
|
36
|
+
const valueArray = Array.isArray(value) ? value : [value];
|
|
37
|
+
if (valueArray.length === 0)
|
|
38
|
+
return () => true;
|
|
36
39
|
switch (operation) {
|
|
37
40
|
case "is": {
|
|
38
|
-
const valueArray = Array.isArray(value) ? value : [value];
|
|
39
41
|
return (row) => valueArray.includes(row[field]);
|
|
40
42
|
}
|
|
41
43
|
case "isNot": {
|
|
42
|
-
const valueArray = Array.isArray(value) ? value : [value];
|
|
43
44
|
return (row) => !valueArray.includes(row[field]);
|
|
44
45
|
}
|
|
45
46
|
case "contains":
|
|
46
|
-
return (row) =>
|
|
47
|
+
return (row) => {
|
|
48
|
+
let include = false;
|
|
49
|
+
for (const val of valueArray) {
|
|
50
|
+
if (row[field].includes(val)) {
|
|
51
|
+
include = true;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
return include;
|
|
55
|
+
};
|
|
56
|
+
case "notContains":
|
|
57
|
+
return (row) => {
|
|
58
|
+
let include = true;
|
|
59
|
+
for (const val of valueArray) {
|
|
60
|
+
if (row[field].includes(val)) {
|
|
61
|
+
include = false;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
return include;
|
|
65
|
+
};
|
|
47
66
|
case "greaterThan":
|
|
48
|
-
return (row) =>
|
|
67
|
+
return (row) => {
|
|
68
|
+
let include = false;
|
|
69
|
+
for (const val of valueArray) {
|
|
70
|
+
if (row[field] > val) {
|
|
71
|
+
include = true;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
return include;
|
|
75
|
+
};
|
|
49
76
|
case "greaterThanOrEqual":
|
|
50
|
-
return (row) =>
|
|
77
|
+
return (row) => {
|
|
78
|
+
let include = false;
|
|
79
|
+
for (const val of valueArray) {
|
|
80
|
+
if (row[field] >= val) {
|
|
81
|
+
include = true;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
return include;
|
|
85
|
+
};
|
|
51
86
|
case "lessThan":
|
|
52
|
-
return (row) =>
|
|
87
|
+
return (row) => {
|
|
88
|
+
let include = false;
|
|
89
|
+
for (const val of valueArray) {
|
|
90
|
+
if (row[field] < val) {
|
|
91
|
+
include = true;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
return include;
|
|
95
|
+
};
|
|
53
96
|
case "lessThanOrEqual":
|
|
54
|
-
return (row) =>
|
|
97
|
+
return (row) => {
|
|
98
|
+
let include = false;
|
|
99
|
+
for (const val of valueArray) {
|
|
100
|
+
if (row[field] <= val) {
|
|
101
|
+
include = true;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
return include;
|
|
105
|
+
};
|
|
55
106
|
case "between":
|
|
56
107
|
return (row) => row[field] >= value[0] && row[field] <= value[1];
|
|
108
|
+
case "ends":
|
|
109
|
+
return (row) => {
|
|
110
|
+
let include = false;
|
|
111
|
+
for (const val of valueArray) {
|
|
112
|
+
if (String(row[field]).endsWith(String(val))) {
|
|
113
|
+
include = true;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
return include;
|
|
117
|
+
};
|
|
118
|
+
case "notEnds":
|
|
119
|
+
return (row) => {
|
|
120
|
+
let include = true;
|
|
121
|
+
for (const val of valueArray) {
|
|
122
|
+
if (String(row[field]).endsWith(String(val))) {
|
|
123
|
+
include = false;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
return include;
|
|
127
|
+
};
|
|
128
|
+
case "starts":
|
|
129
|
+
return (row) => {
|
|
130
|
+
let include = false;
|
|
131
|
+
for (const val of valueArray) {
|
|
132
|
+
if (String(row[field]).startsWith(String(val))) {
|
|
133
|
+
include = true;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
return include;
|
|
137
|
+
};
|
|
138
|
+
case "notStarts":
|
|
139
|
+
return (row) => {
|
|
140
|
+
let include = true;
|
|
141
|
+
for (const val of valueArray) {
|
|
142
|
+
if (String(row[field]).startsWith(String(val))) {
|
|
143
|
+
include = false;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
return include;
|
|
147
|
+
};
|
|
57
148
|
default:
|
|
58
149
|
throw new Error("Unsupported operation");
|
|
59
150
|
}
|
|
60
151
|
};
|
|
152
|
+
const getHvArqueroCombinedFilters = (row, filters) => {
|
|
153
|
+
return filters.every((filter) => {
|
|
154
|
+
const { field, operation, value } = filter;
|
|
155
|
+
const filterFunction = getFilterFunction(operation, field, value);
|
|
156
|
+
return filterFunction(row);
|
|
157
|
+
});
|
|
158
|
+
};
|
|
61
159
|
export {
|
|
62
160
|
getAxisType,
|
|
63
161
|
getFilterFunction,
|
|
64
162
|
getGroupKey,
|
|
163
|
+
getHvArqueroCombinedFilters,
|
|
65
164
|
getLegendIcon,
|
|
66
165
|
getMeasure
|
|
67
166
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["import { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport type {\n HvBarChartMeasures,\n HvChartAxisType,\n HvChartFilter,\n HvChartFilterOperation,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"..\";\nimport { HvChartCommonProps } from \"../types/common\";\nimport { HvChartLegendIcon } from \"../types/legend\";\nimport { HvScatterPlotMeasure } from \"../types/measures\";\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\nexport const getGroupKey = (groupBy: HvChartCommonProps[\"groupBy\"]) =>\n Array.isArray(groupBy) ? groupBy.join(\"_\") : groupBy;\n\nexport const getLegendIcon = (icon: HvChartLegendIcon) => {\n switch (icon) {\n case \"circle\":\n return \"circle\";\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\nexport const getMeasure = (\n name: string,\n msr:\n | Arrayable<HvLineChartMeasures | HvBarChartMeasures | HvScatterPlotMeasure>\n | HvDonutChartMeasure,\n):\n | HvLineChartMeasures\n | HvBarChartMeasures\n | HvDonutChartMeasure\n | HvScatterPlotMeasure => {\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\nexport const getFilterFunction = (\n operation: HvChartFilterOperation,\n field: HvChartFilter[\"field\"],\n value: HvChartFilter[\"value\"],\n): Function => {\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["import { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport type {\n HvBarChartMeasures,\n HvChartAxisType,\n HvChartFilter,\n HvChartFilterOperation,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"..\";\nimport { HvChartCommonProps } from \"../types/common\";\nimport { HvChartLegendIcon } from \"../types/legend\";\nimport { HvScatterPlotMeasure } from \"../types/measures\";\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\nexport const getGroupKey = (groupBy: HvChartCommonProps[\"groupBy\"]) =>\n Array.isArray(groupBy) ? groupBy.join(\"_\") : groupBy;\n\nexport const getLegendIcon = (icon: HvChartLegendIcon) => {\n switch (icon) {\n case \"circle\":\n return \"circle\";\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\nexport const getMeasure = (\n name: string,\n msr:\n | Arrayable<HvLineChartMeasures | HvBarChartMeasures | HvScatterPlotMeasure>\n | HvDonutChartMeasure,\n):\n | HvLineChartMeasures\n | HvBarChartMeasures\n | HvDonutChartMeasure\n | HvScatterPlotMeasure => {\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\nexport const getFilterFunction = (\n operation: HvChartFilterOperation,\n field: HvChartFilter[\"field\"],\n value: HvChartFilter[\"value\"],\n): Function => {\n const valueArray = Array.isArray(value) ? value : [value];\n if (valueArray.length === 0) return () => true;\n\n switch (operation) {\n case \"is\": {\n return (row: any) => valueArray.includes(row[field]);\n }\n case \"isNot\": {\n return (row: any) => !valueArray.includes(row[field]);\n }\n case \"contains\":\n return (row: any) => {\n let include = false;\n for (const val of valueArray) {\n if (row[field].includes(val)) {\n include = true;\n }\n }\n return include;\n };\n case \"notContains\":\n return (row: any) => {\n let include = true;\n for (const val of valueArray) {\n if (row[field].includes(val)) {\n include = false;\n }\n }\n return include;\n };\n case \"greaterThan\":\n return (row: any) => {\n let include = false;\n for (const val of valueArray) {\n if (row[field] > val) {\n include = true;\n }\n }\n return include;\n };\n case \"greaterThanOrEqual\":\n return (row: any) => {\n let include = false;\n for (const val of valueArray) {\n if (row[field] >= val) {\n include = true;\n }\n }\n return include;\n };\n case \"lessThan\":\n return (row: any) => {\n let include = false;\n for (const val of valueArray) {\n if (row[field] < val) {\n include = true;\n }\n }\n return include;\n };\n case \"lessThanOrEqual\":\n return (row: any) => {\n let include = false;\n for (const val of valueArray) {\n if (row[field] <= val) {\n include = true;\n }\n }\n return include;\n };\n case \"between\":\n return (row: any) => row[field] >= value[0] && row[field] <= value[1];\n case \"ends\":\n return (row: any) => {\n let include = false;\n for (const val of valueArray) {\n if (String(row[field]).endsWith(String(val))) {\n include = true;\n }\n }\n return include;\n };\n case \"notEnds\":\n return (row: any) => {\n let include = true;\n for (const val of valueArray) {\n if (String(row[field]).endsWith(String(val))) {\n include = false;\n }\n }\n return include;\n };\n case \"starts\":\n return (row: any) => {\n let include = false;\n for (const val of valueArray) {\n if (String(row[field]).startsWith(String(val))) {\n include = true;\n }\n }\n return include;\n };\n case \"notStarts\":\n return (row: any) => {\n let include = true;\n for (const val of valueArray) {\n if (String(row[field]).startsWith(String(val))) {\n include = false;\n }\n }\n return include;\n };\n\n default:\n throw new Error(\"Unsupported operation\");\n }\n};\n\n// Note: Exported to the users\n/**\n * Combine filter functions into a single function. Only rows that pass all filters will be included.\n * Should be used inside the `escape` function provided by Arquero.\n * */\nexport const getHvArqueroCombinedFilters = (\n row: any,\n filters: HvChartFilter[],\n) => {\n return filters.every((filter) => {\n const { field, operation, value } = filter;\n const filterFunction = getFilterFunction(operation, field, value);\n return filterFunction(row);\n });\n};\n"],"names":[],"mappings":"AAca,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;AAEa,MAAA,cAAc,CAAC,YAC1B,MAAM,QAAQ,OAAO,IAAI,QAAQ,KAAK,GAAG,IAAI;AAElC,MAAA,gBAAgB,CAAC,SAA4B;AACxD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AAAA,IACL;AACS,aAAA;AAAA,EACX;AACF;AAEa,MAAA,aAAa,CACxB,MACA,QAO0B;AAC1B,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;AAEO,MAAM,oBAAoB,CAC/B,WACA,OACA,UACa;AACb,QAAM,aAAa,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AACxD,MAAI,WAAW,WAAW;AAAG,WAAO,MAAM;AAE1C,UAAQ,WAAW;AAAA,IACjB,KAAK,MAAM;AACT,aAAO,CAAC,QAAa,WAAW,SAAS,IAAI,KAAK,CAAC;AAAA,IACrD;AAAA,IACA,KAAK,SAAS;AACZ,aAAO,CAAC,QAAa,CAAC,WAAW,SAAS,IAAI,KAAK,CAAC;AAAA,IACtD;AAAA,IACA,KAAK;AACH,aAAO,CAAC,QAAa;AACnB,YAAI,UAAU;AACd,mBAAW,OAAO,YAAY;AAC5B,cAAI,IAAI,KAAK,EAAE,SAAS,GAAG,GAAG;AAClB,sBAAA;AAAA,UACZ;AAAA,QACF;AACO,eAAA;AAAA,MAAA;AAAA,IAEX,KAAK;AACH,aAAO,CAAC,QAAa;AACnB,YAAI,UAAU;AACd,mBAAW,OAAO,YAAY;AAC5B,cAAI,IAAI,KAAK,EAAE,SAAS,GAAG,GAAG;AAClB,sBAAA;AAAA,UACZ;AAAA,QACF;AACO,eAAA;AAAA,MAAA;AAAA,IAEX,KAAK;AACH,aAAO,CAAC,QAAa;AACnB,YAAI,UAAU;AACd,mBAAW,OAAO,YAAY;AACxB,cAAA,IAAI,KAAK,IAAI,KAAK;AACV,sBAAA;AAAA,UACZ;AAAA,QACF;AACO,eAAA;AAAA,MAAA;AAAA,IAEX,KAAK;AACH,aAAO,CAAC,QAAa;AACnB,YAAI,UAAU;AACd,mBAAW,OAAO,YAAY;AACxB,cAAA,IAAI,KAAK,KAAK,KAAK;AACX,sBAAA;AAAA,UACZ;AAAA,QACF;AACO,eAAA;AAAA,MAAA;AAAA,IAEX,KAAK;AACH,aAAO,CAAC,QAAa;AACnB,YAAI,UAAU;AACd,mBAAW,OAAO,YAAY;AACxB,cAAA,IAAI,KAAK,IAAI,KAAK;AACV,sBAAA;AAAA,UACZ;AAAA,QACF;AACO,eAAA;AAAA,MAAA;AAAA,IAEX,KAAK;AACH,aAAO,CAAC,QAAa;AACnB,YAAI,UAAU;AACd,mBAAW,OAAO,YAAY;AACxB,cAAA,IAAI,KAAK,KAAK,KAAK;AACX,sBAAA;AAAA,UACZ;AAAA,QACF;AACO,eAAA;AAAA,MAAA;AAAA,IAEX,KAAK;AACH,aAAO,CAAC,QAAa,IAAI,KAAK,KAAK,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,MAAM,CAAC;AAAA,IACtE,KAAK;AACH,aAAO,CAAC,QAAa;AACnB,YAAI,UAAU;AACd,mBAAW,OAAO,YAAY;AACxB,cAAA,OAAO,IAAI,KAAK,CAAC,EAAE,SAAS,OAAO,GAAG,CAAC,GAAG;AAClC,sBAAA;AAAA,UACZ;AAAA,QACF;AACO,eAAA;AAAA,MAAA;AAAA,IAEX,KAAK;AACH,aAAO,CAAC,QAAa;AACnB,YAAI,UAAU;AACd,mBAAW,OAAO,YAAY;AACxB,cAAA,OAAO,IAAI,KAAK,CAAC,EAAE,SAAS,OAAO,GAAG,CAAC,GAAG;AAClC,sBAAA;AAAA,UACZ;AAAA,QACF;AACO,eAAA;AAAA,MAAA;AAAA,IAEX,KAAK;AACH,aAAO,CAAC,QAAa;AACnB,YAAI,UAAU;AACd,mBAAW,OAAO,YAAY;AACxB,cAAA,OAAO,IAAI,KAAK,CAAC,EAAE,WAAW,OAAO,GAAG,CAAC,GAAG;AACpC,sBAAA;AAAA,UACZ;AAAA,QACF;AACO,eAAA;AAAA,MAAA;AAAA,IAEX,KAAK;AACH,aAAO,CAAC,QAAa;AACnB,YAAI,UAAU;AACd,mBAAW,OAAO,YAAY;AACxB,cAAA,OAAO,IAAI,KAAK,CAAC,EAAE,WAAW,OAAO,GAAG,CAAC,GAAG;AACpC,sBAAA;AAAA,UACZ;AAAA,QACF;AACO,eAAA;AAAA,MAAA;AAAA,IAGX;AACQ,YAAA,IAAI,MAAM,uBAAuB;AAAA,EAC3C;AACF;AAOa,MAAA,8BAA8B,CACzC,KACA,YACG;AACI,SAAA,QAAQ,MAAM,CAAC,WAAW;AAC/B,UAAM,EAAE,OAAO,WAAW,MAAA,IAAU;AACpC,UAAM,iBAAiB,kBAAkB,WAAW,OAAO,KAAK;AAChE,WAAO,eAAe,GAAG;AAAA,EAAA,CAC1B;AACH;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -68,6 +68,12 @@ declare type FullSortBy = {
|
|
|
68
68
|
order?: HvChartOrder;
|
|
69
69
|
};
|
|
70
70
|
|
|
71
|
+
/**
|
|
72
|
+
* Combine filter functions into a single function. Only rows that pass all filters will be included.
|
|
73
|
+
* Should be used inside the `escape` function provided by Arquero.
|
|
74
|
+
* */
|
|
75
|
+
export declare const getHvArqueroCombinedFilters: (row: any, filters: HvChartFilter[]) => boolean;
|
|
76
|
+
|
|
71
77
|
/** Axis charts (line and bar) common props */
|
|
72
78
|
declare interface HvAxisChartCommonProps {
|
|
73
79
|
/** Columns to use to split the measures. */
|
|
@@ -217,7 +223,7 @@ export declare type HvChartFilter = {
|
|
|
217
223
|
value: string | string[] | number | number[];
|
|
218
224
|
};
|
|
219
225
|
|
|
220
|
-
export declare type HvChartFilterOperation = "is" | "isNot" | "contains" | "greaterThan" | "greaterThanOrEqual" | "lessThan" | "lessThanOrEqual" | "between";
|
|
226
|
+
export declare type HvChartFilterOperation = "is" | "isNot" | "contains" | "notContains" | "greaterThan" | "greaterThanOrEqual" | "lessThan" | "lessThanOrEqual" | "between" | "ends" | "notEnds" | "starts" | "notStarts";
|
|
221
227
|
|
|
222
228
|
export declare interface HvChartGrid {
|
|
223
229
|
/** Distance between the grid and the top of the container. */
|
|
@@ -403,7 +409,7 @@ export declare interface HvHeatmapProps extends Omit<HvChartCommonProps, "data"
|
|
|
403
409
|
min: number;
|
|
404
410
|
/** The max value of the Heatmap */
|
|
405
411
|
max: number;
|
|
406
|
-
/** The X axis
|
|
412
|
+
/** The X axis definition */
|
|
407
413
|
xAxis?: XAxis;
|
|
408
414
|
/** The Y axis definition. */
|
|
409
415
|
yAxis?: YAxis;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-viz",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.12.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Contributed React visualization components for the NEXT UI Kit.",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"access": "public",
|
|
43
43
|
"directory": "package"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "bd600357508eeb03d50157649965d7b091904eaf",
|
|
46
46
|
"exports": {
|
|
47
47
|
".": {
|
|
48
48
|
"require": "./dist/cjs/index.cjs",
|