@hitachivantara/uikit-react-viz 5.12.0 → 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/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/types/index.d.ts +1 -1
- 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;
|
|
@@ -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;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -409,7 +409,7 @@ export declare interface HvHeatmapProps extends Omit<HvChartCommonProps, "data"
|
|
|
409
409
|
min: number;
|
|
410
410
|
/** The max value of the Heatmap */
|
|
411
411
|
max: number;
|
|
412
|
-
/** The X axis
|
|
412
|
+
/** The X axis definition */
|
|
413
413
|
xAxis?: XAxis;
|
|
414
414
|
/** The Y axis definition. */
|
|
415
415
|
yAxis?: YAxis;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-viz",
|
|
3
|
-
"version": "5.12.
|
|
3
|
+
"version": "5.12.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",
|