@hitachivantara/uikit-react-viz 5.7.1 → 5.8.0
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/ScatterPlot/ScatterPlot.cjs +121 -0
- package/dist/cjs/hooks/useLegend.cjs +8 -3
- package/dist/cjs/hooks/useSeries.cjs +13 -1
- package/dist/cjs/index.cjs +2 -0
- package/dist/cjs/utils/index.cjs +2 -0
- package/dist/esm/LineChart/LineChart.js.map +1 -1
- package/dist/esm/ScatterPlot/ScatterPlot.js +102 -0
- package/dist/esm/ScatterPlot/ScatterPlot.js.map +1 -0
- package/dist/esm/hooks/tooltip/useTooltip.js.map +1 -1
- package/dist/esm/hooks/useData.js.map +1 -1
- package/dist/esm/hooks/useLegend.js +8 -3
- package/dist/esm/hooks/useLegend.js.map +1 -1
- package/dist/esm/hooks/useSeries.js +13 -1
- package/dist/esm/hooks/useSeries.js.map +1 -1
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/index.js +2 -0
- package/dist/esm/utils/index.js.map +1 -1
- package/dist/types/index.d.ts +31 -10
- package/package.json +2 -2
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
4
|
+
const react = require("react");
|
|
5
|
+
const charts = require("echarts/charts");
|
|
6
|
+
const components = require("echarts/components");
|
|
7
|
+
const echarts = require("echarts/core");
|
|
8
|
+
const useData = require("../hooks/useData.cjs");
|
|
9
|
+
const useDataset = require("../hooks/useDataset.cjs");
|
|
10
|
+
const useYAxis = require("../hooks/useYAxis.cjs");
|
|
11
|
+
const useXAxis = require("../hooks/useXAxis.cjs");
|
|
12
|
+
const useDataZoom = require("../hooks/useDataZoom.cjs");
|
|
13
|
+
const useGrid = require("../hooks/useGrid.cjs");
|
|
14
|
+
const useSeries = require("../hooks/useSeries.cjs");
|
|
15
|
+
const useLegend = require("../hooks/useLegend.cjs");
|
|
16
|
+
const useTooltip = require("../hooks/tooltip/useTooltip.cjs");
|
|
17
|
+
const useOption = require("../hooks/useOption.cjs");
|
|
18
|
+
const BaseChart = require("../BaseChart/BaseChart.cjs");
|
|
19
|
+
function _interopNamespace(e) {
|
|
20
|
+
if (e && e.__esModule)
|
|
21
|
+
return e;
|
|
22
|
+
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
23
|
+
if (e) {
|
|
24
|
+
for (const k in e) {
|
|
25
|
+
if (k !== "default") {
|
|
26
|
+
const d = Object.getOwnPropertyDescriptor(e, k);
|
|
27
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
28
|
+
enumerable: true,
|
|
29
|
+
get: () => e[k]
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
n.default = e;
|
|
35
|
+
return Object.freeze(n);
|
|
36
|
+
}
|
|
37
|
+
const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
|
|
38
|
+
echarts__namespace.use([
|
|
39
|
+
charts.ScatterChart,
|
|
40
|
+
components.DatasetComponent,
|
|
41
|
+
components.GridComponent,
|
|
42
|
+
components.TooltipComponent,
|
|
43
|
+
components.LegendComponent,
|
|
44
|
+
components.DataZoomSliderComponent,
|
|
45
|
+
components.DataZoomInsideComponent,
|
|
46
|
+
components.MarkLineComponent
|
|
47
|
+
]);
|
|
48
|
+
const HvScatterPlot = react.forwardRef(
|
|
49
|
+
(props, ref) => {
|
|
50
|
+
const {
|
|
51
|
+
yAxis,
|
|
52
|
+
xAxis,
|
|
53
|
+
horizontalRangeSlider,
|
|
54
|
+
grid,
|
|
55
|
+
data,
|
|
56
|
+
groupBy,
|
|
57
|
+
splitBy,
|
|
58
|
+
sortBy,
|
|
59
|
+
measures,
|
|
60
|
+
seriesNameFormatter,
|
|
61
|
+
legend,
|
|
62
|
+
classes,
|
|
63
|
+
tooltip,
|
|
64
|
+
width,
|
|
65
|
+
height,
|
|
66
|
+
onOptionChange,
|
|
67
|
+
...others
|
|
68
|
+
} = props;
|
|
69
|
+
const chartData = useData.useData({ data, groupBy, measures, splitBy, sortBy });
|
|
70
|
+
const chartDataset = useDataset.useDataset(chartData);
|
|
71
|
+
const chartYAxis = useYAxis.useYAxis({
|
|
72
|
+
axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis]
|
|
73
|
+
});
|
|
74
|
+
const chartXAxis = useXAxis.useXAxis({ type: "continuous", ...xAxis });
|
|
75
|
+
const chartSlider = useDataZoom.useDataZoom({
|
|
76
|
+
showHorizontal: horizontalRangeSlider?.show
|
|
77
|
+
});
|
|
78
|
+
const chartGrid = useGrid.useGrid({ ...grid });
|
|
79
|
+
const chartSeries = useSeries.useSeries({
|
|
80
|
+
type: "scatter",
|
|
81
|
+
data: chartData,
|
|
82
|
+
groupBy,
|
|
83
|
+
measures,
|
|
84
|
+
nameFormatter: seriesNameFormatter
|
|
85
|
+
});
|
|
86
|
+
const chartLegend = useLegend.useLegend({
|
|
87
|
+
...legend,
|
|
88
|
+
series: chartSeries.series
|
|
89
|
+
});
|
|
90
|
+
const chartTooltip = useTooltip.useTooltip({
|
|
91
|
+
...tooltip,
|
|
92
|
+
trigger: "axis",
|
|
93
|
+
measures,
|
|
94
|
+
classes
|
|
95
|
+
});
|
|
96
|
+
const option = useOption.useOption({
|
|
97
|
+
option: {
|
|
98
|
+
...chartYAxis,
|
|
99
|
+
...chartXAxis,
|
|
100
|
+
...chartSlider,
|
|
101
|
+
...chartGrid,
|
|
102
|
+
...chartDataset,
|
|
103
|
+
...chartSeries,
|
|
104
|
+
...chartLegend,
|
|
105
|
+
...chartTooltip
|
|
106
|
+
},
|
|
107
|
+
onOptionChange
|
|
108
|
+
});
|
|
109
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
110
|
+
BaseChart.HvBaseChart,
|
|
111
|
+
{
|
|
112
|
+
ref,
|
|
113
|
+
option,
|
|
114
|
+
width,
|
|
115
|
+
height,
|
|
116
|
+
...others
|
|
117
|
+
}
|
|
118
|
+
);
|
|
119
|
+
}
|
|
120
|
+
);
|
|
121
|
+
exports.HvScatterPlot = HvScatterPlot;
|
|
@@ -27,11 +27,16 @@ const useLegend = ({
|
|
|
27
27
|
...icon && { icon: index.getLegendIcon(icon) },
|
|
28
28
|
...!icon && {
|
|
29
29
|
data: show !== false && Array.isArray(series) ? series.map((s) => {
|
|
30
|
+
let iconType = "line";
|
|
31
|
+
if (s.areaStyle != null) {
|
|
32
|
+
iconType = "square";
|
|
33
|
+
}
|
|
34
|
+
if (s.type === "scatter") {
|
|
35
|
+
iconType = "circle";
|
|
36
|
+
}
|
|
30
37
|
return {
|
|
31
38
|
name: s.name,
|
|
32
|
-
icon: index.getLegendIcon(
|
|
33
|
-
s.areaStyle != null ? "square" : "line"
|
|
34
|
-
)
|
|
39
|
+
icon: index.getLegendIcon(iconType)
|
|
35
40
|
};
|
|
36
41
|
}) : void 0
|
|
37
42
|
}
|
|
@@ -23,6 +23,17 @@ const useSeries = ({
|
|
|
23
23
|
let pieOps = {};
|
|
24
24
|
let lineOps = {};
|
|
25
25
|
let barOps = {};
|
|
26
|
+
let scatterOps = {};
|
|
27
|
+
if (type === "scatter") {
|
|
28
|
+
const yAxisId = typeof measure !== "string" ? measure.yAxis : void 0;
|
|
29
|
+
scatterOps = {
|
|
30
|
+
yAxisId,
|
|
31
|
+
encode: {
|
|
32
|
+
x: groupByKey,
|
|
33
|
+
y: c
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
}
|
|
26
37
|
if (type === "pie") {
|
|
27
38
|
pieOps = {
|
|
28
39
|
encode: {
|
|
@@ -85,7 +96,8 @@ const useSeries = ({
|
|
|
85
96
|
name: nameFormatter ? nameFormatter(c) : c,
|
|
86
97
|
...pieOps,
|
|
87
98
|
...barOps,
|
|
88
|
-
...lineOps
|
|
99
|
+
...lineOps,
|
|
100
|
+
...scatterOps
|
|
89
101
|
};
|
|
90
102
|
})
|
|
91
103
|
};
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -5,9 +5,11 @@ const LineChart = require("./LineChart/LineChart.cjs");
|
|
|
5
5
|
const BarChart = require("./BarChart/BarChart.cjs");
|
|
6
6
|
const DonutChart = require("./DonutChart/DonutChart.cjs");
|
|
7
7
|
const ConfusionMatrix = require("./ConfusionMatrix/ConfusionMatrix.cjs");
|
|
8
|
+
const ScatterPlot = require("./ScatterPlot/ScatterPlot.cjs");
|
|
8
9
|
exports.HvVizContext = Provider.HvVizContext;
|
|
9
10
|
exports.HvVizProvider = Provider.HvVizProvider;
|
|
10
11
|
exports.HvLineChart = LineChart.HvLineChart;
|
|
11
12
|
exports.HvBarChart = BarChart.HvBarChart;
|
|
12
13
|
exports.HvDonutChart = DonutChart.HvDonutChart;
|
|
13
14
|
exports.HvConfusionMatrix = ConfusionMatrix.HvConfusionMatrix;
|
|
15
|
+
exports.HvScatterPlot = ScatterPlot.HvScatterPlot;
|
package/dist/cjs/utils/index.cjs
CHANGED
|
@@ -15,6 +15,8 @@ const getAxisType = (type) => {
|
|
|
15
15
|
const getGroupKey = (groupBy) => Array.isArray(groupBy) ? groupBy.join("_") : groupBy;
|
|
16
16
|
const getLegendIcon = (icon) => {
|
|
17
17
|
switch (icon) {
|
|
18
|
+
case "circle":
|
|
19
|
+
return "circle";
|
|
18
20
|
case "square":
|
|
19
21
|
return "path://M0,0L16,0L16,16L0,16L0,0Z";
|
|
20
22
|
case "line":
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LineChart.js","sources":["../../../src/LineChart/LineChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { LineChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n DataZoomInsideComponent,\n DataZoomSliderComponent,\n GridComponent,\n LegendComponent,\n MarkLineComponent,\n TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n HvChartTooltipClasses,\n useData,\n useDataset,\n useDataZoom,\n useGrid,\n useLegend,\n useOption,\n useSeries,\n useTooltip,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport { HvChartEmptyCellMode, HvLineChartMeasures } from \"../types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\n\n// Register chart components\necharts.use([\n LineChart,\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n MarkLineComponent,\n]);\n\nexport interface HvLineChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvLineChartProps\n extends HvAxisChartCommonProps,\n HvChartCommonProps {\n /**
|
|
1
|
+
{"version":3,"file":"LineChart.js","sources":["../../../src/LineChart/LineChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { LineChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n DataZoomInsideComponent,\n DataZoomSliderComponent,\n GridComponent,\n LegendComponent,\n MarkLineComponent,\n TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n HvChartTooltipClasses,\n useData,\n useDataset,\n useDataZoom,\n useGrid,\n useLegend,\n useOption,\n useSeries,\n useTooltip,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport { HvChartEmptyCellMode, HvLineChartMeasures } from \"../types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\n\n// Register chart components\necharts.use([\n LineChart,\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n MarkLineComponent,\n]);\n\nexport interface HvLineChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvLineChartProps\n extends HvAxisChartCommonProps,\n HvChartCommonProps {\n /** Columns to measure on the chart. */\n measures: Arrayable<HvLineChartMeasures>;\n /** Strategy to use when there are empty cells. Defaults to `void`. */\n emptyCellMode?: HvChartEmptyCellMode;\n /** Whether the area under the lines should be filled. Defaults to `false`. */\n area?: boolean;\n /** Sets opacity of the filled area if `area` is true. Defaults to `0.5`. */\n areaOpacity?: number;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvLineChartClasses;\n}\n\n/**\n * A line chart or line plot or line graph is a type of chart which displays information as a series of data points\n * connected by straight line segments. It is a basic type of chart common in many fields.\n */\nexport const HvLineChart = forwardRef<ReactECharts, HvLineChartProps>(\n (props, ref) => {\n const {\n area = false,\n emptyCellMode = \"void\",\n areaOpacity = 0.5,\n yAxis,\n xAxis,\n horizontalRangeSlider,\n grid,\n data,\n groupBy,\n splitBy,\n sortBy,\n measures,\n stack,\n seriesNameFormatter,\n legend,\n classes,\n tooltip,\n width,\n height,\n onOptionChange,\n ...others\n } = props;\n\n const chartData = useData({ data, groupBy, measures, splitBy, sortBy });\n\n const chartDataset = useDataset(chartData);\n\n const chartYAxis = useYAxis({\n axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n });\n\n const chartXAxis = useXAxis({ ...xAxis, scale: true });\n\n const chartSlider = useDataZoom({\n showHorizontal: horizontalRangeSlider?.show,\n });\n\n const chartGrid = useGrid({ ...grid });\n\n const chartSeries = useSeries({\n type: \"line\",\n data: chartData,\n groupBy,\n measures,\n area,\n areaOpacity,\n emptyCellMode,\n stack,\n nameFormatter: seriesNameFormatter,\n });\n\n const chartLegend = useLegend({\n ...legend,\n series: chartSeries.series,\n });\n\n const chartTooltip = useTooltip({\n ...tooltip,\n trigger: \"axis\",\n measures,\n classes,\n });\n\n const option = useOption({\n option: {\n ...chartYAxis,\n ...chartXAxis,\n ...chartSlider,\n ...chartGrid,\n ...chartDataset,\n ...chartSeries,\n ...chartLegend,\n ...chartTooltip,\n },\n onOptionChange,\n });\n\n return (\n <HvBaseChart\n ref={ref}\n option={option}\n width={width}\n height={height}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAuBM,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AAEE,UAAA,YAAY,QAAQ,EAAE,MAAM,SAAS,UAAU,SAAS,QAAQ;AAEhE,UAAA,eAAe,WAAW,SAAS;AAEzC,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,IAAA,CAC7D;AAED,UAAM,aAAa,SAAS,EAAE,GAAG,OAAO,OAAO,MAAM;AAErD,UAAM,cAAc,YAAY;AAAA,MAC9B,gBAAgB,uBAAuB;AAAA,IAAA,CACxC;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IAAA,CAChB;AAED,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,QAAQ,YAAY;AAAA,IAAA,CACrB;AAED,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,IAAA,CACD;AAGC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { ScatterChart } from "echarts/charts";
|
|
4
|
+
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, DataZoomSliderComponent, DataZoomInsideComponent, MarkLineComponent } from "echarts/components";
|
|
5
|
+
import * as echarts from "echarts/core";
|
|
6
|
+
import { useData } from "../hooks/useData.js";
|
|
7
|
+
import { useDataset } from "../hooks/useDataset.js";
|
|
8
|
+
import { useYAxis } from "../hooks/useYAxis.js";
|
|
9
|
+
import { useXAxis } from "../hooks/useXAxis.js";
|
|
10
|
+
import { useDataZoom } from "../hooks/useDataZoom.js";
|
|
11
|
+
import { useGrid } from "../hooks/useGrid.js";
|
|
12
|
+
import { useSeries } from "../hooks/useSeries.js";
|
|
13
|
+
import { useLegend } from "../hooks/useLegend.js";
|
|
14
|
+
import { useTooltip } from "../hooks/tooltip/useTooltip.js";
|
|
15
|
+
import { useOption } from "../hooks/useOption.js";
|
|
16
|
+
import { HvBaseChart } from "../BaseChart/BaseChart.js";
|
|
17
|
+
echarts.use([
|
|
18
|
+
ScatterChart,
|
|
19
|
+
DatasetComponent,
|
|
20
|
+
GridComponent,
|
|
21
|
+
TooltipComponent,
|
|
22
|
+
LegendComponent,
|
|
23
|
+
DataZoomSliderComponent,
|
|
24
|
+
DataZoomInsideComponent,
|
|
25
|
+
MarkLineComponent
|
|
26
|
+
]);
|
|
27
|
+
const HvScatterPlot = forwardRef(
|
|
28
|
+
(props, ref) => {
|
|
29
|
+
const {
|
|
30
|
+
yAxis,
|
|
31
|
+
xAxis,
|
|
32
|
+
horizontalRangeSlider,
|
|
33
|
+
grid,
|
|
34
|
+
data,
|
|
35
|
+
groupBy,
|
|
36
|
+
splitBy,
|
|
37
|
+
sortBy,
|
|
38
|
+
measures,
|
|
39
|
+
seriesNameFormatter,
|
|
40
|
+
legend,
|
|
41
|
+
classes,
|
|
42
|
+
tooltip,
|
|
43
|
+
width,
|
|
44
|
+
height,
|
|
45
|
+
onOptionChange,
|
|
46
|
+
...others
|
|
47
|
+
} = props;
|
|
48
|
+
const chartData = useData({ data, groupBy, measures, splitBy, sortBy });
|
|
49
|
+
const chartDataset = useDataset(chartData);
|
|
50
|
+
const chartYAxis = useYAxis({
|
|
51
|
+
axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis]
|
|
52
|
+
});
|
|
53
|
+
const chartXAxis = useXAxis({ type: "continuous", ...xAxis });
|
|
54
|
+
const chartSlider = useDataZoom({
|
|
55
|
+
showHorizontal: horizontalRangeSlider?.show
|
|
56
|
+
});
|
|
57
|
+
const chartGrid = useGrid({ ...grid });
|
|
58
|
+
const chartSeries = useSeries({
|
|
59
|
+
type: "scatter",
|
|
60
|
+
data: chartData,
|
|
61
|
+
groupBy,
|
|
62
|
+
measures,
|
|
63
|
+
nameFormatter: seriesNameFormatter
|
|
64
|
+
});
|
|
65
|
+
const chartLegend = useLegend({
|
|
66
|
+
...legend,
|
|
67
|
+
series: chartSeries.series
|
|
68
|
+
});
|
|
69
|
+
const chartTooltip = useTooltip({
|
|
70
|
+
...tooltip,
|
|
71
|
+
trigger: "axis",
|
|
72
|
+
measures,
|
|
73
|
+
classes
|
|
74
|
+
});
|
|
75
|
+
const option = useOption({
|
|
76
|
+
option: {
|
|
77
|
+
...chartYAxis,
|
|
78
|
+
...chartXAxis,
|
|
79
|
+
...chartSlider,
|
|
80
|
+
...chartGrid,
|
|
81
|
+
...chartDataset,
|
|
82
|
+
...chartSeries,
|
|
83
|
+
...chartLegend,
|
|
84
|
+
...chartTooltip
|
|
85
|
+
},
|
|
86
|
+
onOptionChange
|
|
87
|
+
});
|
|
88
|
+
return /* @__PURE__ */ jsx(
|
|
89
|
+
HvBaseChart,
|
|
90
|
+
{
|
|
91
|
+
ref,
|
|
92
|
+
option,
|
|
93
|
+
width,
|
|
94
|
+
height,
|
|
95
|
+
...others
|
|
96
|
+
}
|
|
97
|
+
);
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
export {
|
|
101
|
+
HvScatterPlot
|
|
102
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScatterPlot.js","sources":["../../../src/ScatterPlot/ScatterPlot.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { ScatterChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n DataZoomInsideComponent,\n DataZoomSliderComponent,\n GridComponent,\n LegendComponent,\n MarkLineComponent,\n TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n HvChartTooltipClasses,\n useData,\n useDataset,\n useDataZoom,\n useGrid,\n useLegend,\n useOption,\n useSeries,\n useTooltip,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\nimport { HvScatterPlotMeasure } from \"../types/measures\";\n\n// Register chart components\necharts.use([\n ScatterChart,\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n MarkLineComponent,\n]);\n\nexport interface HvScatterPlotClasses extends HvChartTooltipClasses {}\n\nexport interface HvScatterPlotProps\n extends HvChartCommonProps,\n Omit<HvAxisChartCommonProps, \"stack\"> {\n /** Columns to measure on the plot. */\n measures: Arrayable<HvScatterPlotMeasure>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvScatterPlotClasses;\n}\n\n/**\n * A scatter plot is a type of chart which displays dots to represent two numeric variables.\n * This type of chart is used to determine the relationship between two variables.\n */\nexport const HvScatterPlot = forwardRef<ReactECharts, HvScatterPlotProps>(\n (props, ref) => {\n const {\n yAxis,\n xAxis,\n horizontalRangeSlider,\n grid,\n data,\n groupBy,\n splitBy,\n sortBy,\n measures,\n seriesNameFormatter,\n legend,\n classes,\n tooltip,\n width,\n height,\n onOptionChange,\n ...others\n } = props;\n\n const chartData = useData({ data, groupBy, measures, splitBy, sortBy });\n\n const chartDataset = useDataset(chartData);\n\n const chartYAxis = useYAxis({\n axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n });\n\n const chartXAxis = useXAxis({ type: \"continuous\", ...xAxis });\n\n const chartSlider = useDataZoom({\n showHorizontal: horizontalRangeSlider?.show,\n });\n\n const chartGrid = useGrid({ ...grid });\n\n const chartSeries = useSeries({\n type: \"scatter\",\n data: chartData,\n groupBy,\n measures,\n nameFormatter: seriesNameFormatter,\n });\n\n const chartLegend = useLegend({\n ...legend,\n series: chartSeries.series,\n });\n\n const chartTooltip = useTooltip({\n ...tooltip,\n trigger: \"axis\",\n measures,\n classes,\n });\n\n const option = useOption({\n option: {\n ...chartYAxis,\n ...chartXAxis,\n ...chartSlider,\n ...chartGrid,\n ...chartDataset,\n ...chartSeries,\n ...chartLegend,\n ...chartTooltip,\n },\n onOptionChange,\n });\n\n return (\n <HvBaseChart\n ref={ref}\n option={option}\n width={width}\n height={height}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAiBM,MAAM,gBAAgB;AAAA,EAC3B,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;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AAEE,UAAA,YAAY,QAAQ,EAAE,MAAM,SAAS,UAAU,SAAS,QAAQ;AAEhE,UAAA,eAAe,WAAW,SAAS;AAEzC,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,IAAA,CAC7D;AAED,UAAM,aAAa,SAAS,EAAE,MAAM,cAAc,GAAG,OAAO;AAE5D,UAAM,cAAc,YAAY;AAAA,MAC9B,gBAAgB,uBAAuB;AAAA,IAAA,CACxC;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IAAA,CAChB;AAED,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,QAAQ,YAAY;AAAA,IAAA,CACrB;AAED,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,IAAA,CACD;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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTooltip.js","sources":["../../../../src/hooks/tooltip/useTooltip.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvBarChartMeasures,\n HvChartTooltip,\n HvChartTooltipParams,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"../../types\";\nimport { HvEChartsOption } from \"../../types/common\";\nimport { getMeasure } from \"../../utils\";\nimport { useClasses } from \"./styles\";\n\nexport type HvChartTooltipClasses = ExtractNames<typeof useClasses>;\n\n/** Echarts doesn't seem to have the type for the tooltip params */\ninterface EChartsTooltipParams {\n seriesName: string;\n value: (string | number)[];\n encode: { [key: string]: number[] };\n color: string;\n dimensionNames: string[];\n name: string;\n seriesType: string;\n}\n\ninterface HvTooltipHookProps {\n measures?:\n | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n | HvDonutChartMeasure;\n trigger?: \"item\" | \"axis\";\n classes?: HvChartTooltipClasses;\n horizontal?: boolean;\n show?: HvChartTooltip[\"show\"];\n type?: HvChartTooltip[\"type\"];\n component?: HvChartTooltip[\"component\"];\n valueFormatter?: HvChartTooltip[\"valueFormatter\"];\n titleFormatter?: HvChartTooltip[\"titleFormatter\"];\n nameFormatter?: (value?: string) => string;\n}\n\nexport const useTooltip = ({\n measures = [],\n classes,\n component,\n show = true,\n horizontal = false,\n trigger = \"item\",\n type = \"multiple\",\n valueFormatter,\n titleFormatter,\n nameFormatter,\n}: HvTooltipHookProps) => {\n const { classes: hvClasses } = useClasses(classes);\n\n const renderTooltip = useCallback(\n (params: EChartsTooltipParams[]) => {\n const title =\n params[0].seriesType === \"pie\"\n ? params[0].seriesName\n : horizontal\n ? params[0].value[params[0].encode.y[0]]\n : params[0].value[params[0].encode.x[0]];\n\n const formattedTitle = titleFormatter ? titleFormatter(title) : title;\n\n if (type === \"single\") {\n const measure = getMeasure(\n params[0].seriesType === \"pie\"\n ? params[0].name\n : horizontal\n ? params[0].dimensionNames[params[0].encode.x[0]]\n : params[0].dimensionNames[params[0].encode.y[0]],\n measures,\n );\n\n const value =\n params[0].seriesType === \"pie\"\n ? params[0].value[params[0].encode.value[0]]\n : horizontal\n ? params[0].value[params[0].encode.x[0]]\n : params[0].value[params[0].encode.y[0]];\n\n const formattedValue =\n typeof measure !== \"string\" && measure.valueFormatter\n ? measure.valueFormatter(value)\n : valueFormatter\n ? valueFormatter(value)\n : value;\n\n return `\n <div class=\"${hvClasses?.singleTooltipRoot}\">\n <p class=\"${hvClasses?.singleTooltipTitle}\">${formattedTitle}</p>\n <p class=\"${hvClasses?.singleTooltipValue}\">${formattedValue}</p>\n </div>\n `;\n }\n\n return `\n <div class=\"${hvClasses?.multipleTooltipRoot}\">\n <div class=\"${hvClasses?.multipleTooltipTitleContainer}\">\n <div>\n <p class=\"${\n hvClasses?.multipleTooltipTitle\n }\">${formattedTitle}</p>\n </div>\n </div>\n <div class=\"${hvClasses?.multipleTooltipValuesContainer}\">\n ${params\n .map((s) => {\n const measure = getMeasure(\n s.seriesType === \"pie\"\n ? s.name\n : horizontal\n ? s.dimensionNames[s.encode.x[0]]\n : s.dimensionNames[s.encode.y[0]],\n measures,\n );\n\n const value =\n s.seriesType === \"pie\"\n ? s.value[s.encode.value[0]]\n : horizontal\n ? s.value[s.encode.x[0]]\n : s.value[s.encode.y[0]];\n\n const formattedValue =\n typeof measure !== \"string\" && measure.valueFormatter\n ? measure.valueFormatter(value)\n : valueFormatter\n ? valueFormatter(value)\n : value;\n\n const name = s.seriesType === \"pie\" ? s.name : s.seriesName;\n\n const formattedName = nameFormatter\n ? nameFormatter(name)\n : name;\n\n return `\n <div key=\"${s.seriesName}\" class=\"${hvClasses?.multipleTooltipSeriesContainer}\">\n <div class=\"${hvClasses?.multipleTooltipSeriesNameContainer}\">\n <p style=\"background-color: ${s.color};\" class=\"${hvClasses?.multipleTooltipSeriesColor}\" />\n <p class=\"${hvClasses?.multipleTooltipSeriesName}\">${formattedName}</p>\n </div>\n <p class=\"${hvClasses?.multipleTooltipSeriesValue}\">${formattedValue}</p>\n </div>\n `;\n })\n .join(\" \")}\n </div>\n </div>\n `;\n },\n [\n hvClasses,\n horizontal,\n type,\n measures,\n nameFormatter,\n titleFormatter,\n valueFormatter,\n ],\n );\n\n const renderCustomTooltip = useCallback(\n (params: EChartsTooltipParams[]) => {\n if (typeof component === \"function\") {\n const values: HvChartTooltipParams = {\n title:\n params[0].seriesType === \"pie\"\n ? params[0].seriesName\n : horizontal\n ? params[0].value[params[0].encode.y[0]]\n : params[0].value[params[0].encode.x[0]],\n series: params.map((p) => {\n return {\n color: p.color,\n name:\n p.seriesType === \"heatmap\"\n ? String(p.value[p.encode.y[0]])\n : p.seriesType === \"pie\"\n ? p.name\n : p.seriesName,\n value:\n p.seriesType === \"pie\" || p.seriesType === \"heatmap\"\n ? p.value[p.encode.value[0]]\n : horizontal\n ? p.value[p.encode.x[0]]\n : p.value[p.encode.y[0]],\n };\n }),\n };\n\n return component(values);\n }\n\n return component;\n },\n [component, horizontal],\n );\n\n const option = useMemo<Pick<HvEChartsOption, \"tooltip\">>(() => {\n return {\n tooltip: {\n confine: false,\n show,\n trigger,\n position: (point, params, dom, rect, size) => {\n return [point[0], point[1] - size.contentSize[1]];\n },\n formatter: (params) => {\n const tooltipParams = Array.isArray(params) ? params : [params];\n\n return component\n ? renderCustomTooltip(tooltipParams)\n : renderTooltip(tooltipParams);\n },\n },\n };\n }, [trigger, component, show, renderTooltip, renderCustomTooltip]);\n\n return option;\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useTooltip.js","sources":["../../../../src/hooks/tooltip/useTooltip.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvBarChartMeasures,\n HvChartTooltip,\n HvChartTooltipParams,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n HvScatterPlotMeasure,\n} from \"../../types\";\nimport { HvEChartsOption } from \"../../types/common\";\nimport { getMeasure } from \"../../utils\";\nimport { useClasses } from \"./styles\";\n\nexport type HvChartTooltipClasses = ExtractNames<typeof useClasses>;\n\n/** Echarts doesn't seem to have the type for the tooltip params */\ninterface EChartsTooltipParams {\n seriesName: string;\n value: (string | number)[];\n encode: { [key: string]: number[] };\n color: string;\n dimensionNames: string[];\n name: string;\n seriesType: string;\n}\n\ninterface HvTooltipHookProps {\n measures?:\n | Arrayable<HvLineChartMeasures | HvBarChartMeasures | HvScatterPlotMeasure>\n | HvDonutChartMeasure;\n trigger?: \"item\" | \"axis\";\n classes?: HvChartTooltipClasses;\n horizontal?: boolean;\n show?: HvChartTooltip[\"show\"];\n type?: HvChartTooltip[\"type\"];\n component?: HvChartTooltip[\"component\"];\n valueFormatter?: HvChartTooltip[\"valueFormatter\"];\n titleFormatter?: HvChartTooltip[\"titleFormatter\"];\n nameFormatter?: (value?: string) => string;\n}\n\nexport const useTooltip = ({\n measures = [],\n classes,\n component,\n show = true,\n horizontal = false,\n trigger = \"item\",\n type = \"multiple\",\n valueFormatter,\n titleFormatter,\n nameFormatter,\n}: HvTooltipHookProps) => {\n const { classes: hvClasses } = useClasses(classes);\n\n const renderTooltip = useCallback(\n (params: EChartsTooltipParams[]) => {\n const title =\n params[0].seriesType === \"pie\"\n ? params[0].seriesName\n : horizontal\n ? params[0].value[params[0].encode.y[0]]\n : params[0].value[params[0].encode.x[0]];\n\n const formattedTitle = titleFormatter ? titleFormatter(title) : title;\n\n if (type === \"single\") {\n const measure = getMeasure(\n params[0].seriesType === \"pie\"\n ? params[0].name\n : horizontal\n ? params[0].dimensionNames[params[0].encode.x[0]]\n : params[0].dimensionNames[params[0].encode.y[0]],\n measures,\n );\n\n const value =\n params[0].seriesType === \"pie\"\n ? params[0].value[params[0].encode.value[0]]\n : horizontal\n ? params[0].value[params[0].encode.x[0]]\n : params[0].value[params[0].encode.y[0]];\n\n const formattedValue =\n typeof measure !== \"string\" && measure.valueFormatter\n ? measure.valueFormatter(value)\n : valueFormatter\n ? valueFormatter(value)\n : value;\n\n return `\n <div class=\"${hvClasses?.singleTooltipRoot}\">\n <p class=\"${hvClasses?.singleTooltipTitle}\">${formattedTitle}</p>\n <p class=\"${hvClasses?.singleTooltipValue}\">${formattedValue}</p>\n </div>\n `;\n }\n\n return `\n <div class=\"${hvClasses?.multipleTooltipRoot}\">\n <div class=\"${hvClasses?.multipleTooltipTitleContainer}\">\n <div>\n <p class=\"${\n hvClasses?.multipleTooltipTitle\n }\">${formattedTitle}</p>\n </div>\n </div>\n <div class=\"${hvClasses?.multipleTooltipValuesContainer}\">\n ${params\n .map((s) => {\n const measure = getMeasure(\n s.seriesType === \"pie\"\n ? s.name\n : horizontal\n ? s.dimensionNames[s.encode.x[0]]\n : s.dimensionNames[s.encode.y[0]],\n measures,\n );\n\n const value =\n s.seriesType === \"pie\"\n ? s.value[s.encode.value[0]]\n : horizontal\n ? s.value[s.encode.x[0]]\n : s.value[s.encode.y[0]];\n\n const formattedValue =\n typeof measure !== \"string\" && measure.valueFormatter\n ? measure.valueFormatter(value)\n : valueFormatter\n ? valueFormatter(value)\n : value;\n\n const name = s.seriesType === \"pie\" ? s.name : s.seriesName;\n\n const formattedName = nameFormatter\n ? nameFormatter(name)\n : name;\n\n return `\n <div key=\"${s.seriesName}\" class=\"${hvClasses?.multipleTooltipSeriesContainer}\">\n <div class=\"${hvClasses?.multipleTooltipSeriesNameContainer}\">\n <p style=\"background-color: ${s.color};\" class=\"${hvClasses?.multipleTooltipSeriesColor}\" />\n <p class=\"${hvClasses?.multipleTooltipSeriesName}\">${formattedName}</p>\n </div>\n <p class=\"${hvClasses?.multipleTooltipSeriesValue}\">${formattedValue}</p>\n </div>\n `;\n })\n .join(\" \")}\n </div>\n </div>\n `;\n },\n [\n hvClasses,\n horizontal,\n type,\n measures,\n nameFormatter,\n titleFormatter,\n valueFormatter,\n ],\n );\n\n const renderCustomTooltip = useCallback(\n (params: EChartsTooltipParams[]) => {\n if (typeof component === \"function\") {\n const values: HvChartTooltipParams = {\n title:\n params[0].seriesType === \"pie\"\n ? params[0].seriesName\n : horizontal\n ? params[0].value[params[0].encode.y[0]]\n : params[0].value[params[0].encode.x[0]],\n series: params.map((p) => {\n return {\n color: p.color,\n name:\n p.seriesType === \"heatmap\"\n ? String(p.value[p.encode.y[0]])\n : p.seriesType === \"pie\"\n ? p.name\n : p.seriesName,\n value:\n p.seriesType === \"pie\" || p.seriesType === \"heatmap\"\n ? p.value[p.encode.value[0]]\n : horizontal\n ? p.value[p.encode.x[0]]\n : p.value[p.encode.y[0]],\n };\n }),\n };\n\n return component(values);\n }\n\n return component;\n },\n [component, horizontal],\n );\n\n const option = useMemo<Pick<HvEChartsOption, \"tooltip\">>(() => {\n return {\n tooltip: {\n confine: false,\n show,\n trigger,\n position: (point, params, dom, rect, size) => {\n return [point[0], point[1] - size.contentSize[1]];\n },\n formatter: (params) => {\n const tooltipParams = Array.isArray(params) ? params : [params];\n\n return component\n ? renderCustomTooltip(tooltipParams)\n : renderTooltip(tooltipParams);\n },\n },\n };\n }, [trigger, component, show, renderTooltip, renderCustomTooltip]);\n\n return option;\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useData.js","sources":["../../../src/hooks/useData.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { desc, 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} from \"../types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\nimport { getGroupKey } 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>\n | HvDonutChartMeasure;\n splitBy?: HvAxisChartCommonProps[\"splitBy\"];\n sortBy?: HvChartCommonProps[\"sortBy\"];\n delta?: string;\n}\n\nexport const useData = ({\n data,\n groupBy,\n measures,\n sortBy,\n splitBy,\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 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, groupByKey]);\n\n return chartData;\n};\n"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"useData.js","sources":["../../../src/hooks/useData.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { desc, 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 } 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 delta?: string;\n}\n\nexport const useData = ({\n data,\n groupBy,\n measures,\n sortBy,\n splitBy,\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 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, groupByKey]);\n\n return chartData;\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -25,11 +25,16 @@ const useLegend = ({
|
|
|
25
25
|
...icon && { icon: getLegendIcon(icon) },
|
|
26
26
|
...!icon && {
|
|
27
27
|
data: show !== false && Array.isArray(series) ? series.map((s) => {
|
|
28
|
+
let iconType = "line";
|
|
29
|
+
if (s.areaStyle != null) {
|
|
30
|
+
iconType = "square";
|
|
31
|
+
}
|
|
32
|
+
if (s.type === "scatter") {
|
|
33
|
+
iconType = "circle";
|
|
34
|
+
}
|
|
28
35
|
return {
|
|
29
36
|
name: s.name,
|
|
30
|
-
icon: getLegendIcon(
|
|
31
|
-
s.areaStyle != null ? "square" : "line"
|
|
32
|
-
)
|
|
37
|
+
icon: getLegendIcon(iconType)
|
|
33
38
|
};
|
|
34
39
|
}) : void 0
|
|
35
40
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLegend.js","sources":["../../../src/hooks/useLegend.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvEChartsOption } from \"../types/common\";\nimport { HvChartLegend, HvChartLegendIcon } from \"../types/legend\";\nimport { getLegendIcon } from \"../utils\";\n\ninterface HvLegendHookProps {\n show?: HvChartLegend[\"show\"];\n direction?: HvChartLegend[\"direction\"];\n position?: HvChartLegend[\"position\"];\n series?: Pick<HvEChartsOption, \"series.series\">;\n icon?: HvChartLegendIcon;\n formatter?: string | ((value?: string) => string);\n}\n\nexport const useLegend = ({\n series,\n show,\n icon,\n formatter,\n position: positionProp,\n direction = \"horizontal\",\n}: HvLegendHookProps) => {\n const option = useMemo<Pick<HvEChartsOption, \"legend\">>(() => {\n const position: Record<string, string> = { y: positionProp?.y ?? \"top\" };\n if (positionProp?.x != null && positionProp?.x !== \"center\") {\n position[positionProp.x] = positionProp.x;\n } else {\n position.x = \"center\";\n }\n\n return {\n legend: {\n show: show ?? (Array.isArray(series) && series.length > 1),\n itemGap: 20,\n formatter,\n orient: direction,\n ...position,\n ...(icon && { icon: getLegendIcon(icon) }),\n ...(!icon && {\n data:\n show !== false && Array.isArray(series)\n ? series.map((s) => {\n
|
|
1
|
+
{"version":3,"file":"useLegend.js","sources":["../../../src/hooks/useLegend.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvEChartsOption } from \"../types/common\";\nimport { HvChartLegend, HvChartLegendIcon } from \"../types/legend\";\nimport { getLegendIcon } from \"../utils\";\n\ninterface HvLegendHookProps {\n show?: HvChartLegend[\"show\"];\n direction?: HvChartLegend[\"direction\"];\n position?: HvChartLegend[\"position\"];\n series?: Pick<HvEChartsOption, \"series.series\">;\n icon?: HvChartLegendIcon;\n formatter?: string | ((value?: string) => string);\n}\n\nexport const useLegend = ({\n series,\n show,\n icon,\n formatter,\n position: positionProp,\n direction = \"horizontal\",\n}: HvLegendHookProps) => {\n const option = useMemo<Pick<HvEChartsOption, \"legend\">>(() => {\n const position: Record<string, string> = { y: positionProp?.y ?? \"top\" };\n if (positionProp?.x != null && positionProp?.x !== \"center\") {\n position[positionProp.x] = positionProp.x;\n } else {\n position.x = \"center\";\n }\n\n return {\n legend: {\n show: show ?? (Array.isArray(series) && series.length > 1),\n itemGap: 20,\n formatter,\n orient: direction,\n ...position,\n ...(icon && { icon: getLegendIcon(icon) }),\n ...(!icon && {\n data:\n show !== false && Array.isArray(series)\n ? series.map((s) => {\n let iconType: HvChartLegendIcon = \"line\";\n if (s.areaStyle != null) {\n iconType = \"square\";\n }\n if (s.type === \"scatter\") {\n iconType = \"circle\";\n }\n return {\n name: s.name as string,\n icon: getLegendIcon(iconType),\n };\n })\n : undefined,\n }),\n },\n };\n }, [series, show, icon, formatter, positionProp, direction]);\n\n return option;\n};\n"],"names":[],"mappings":";;AAeO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AACd,MAAyB;AACjB,QAAA,SAAS,QAAyC,MAAM;AAC5D,UAAM,WAAmC,EAAE,GAAG,cAAc,KAAK,MAAM;AACvE,QAAI,cAAc,KAAK,QAAQ,cAAc,MAAM,UAAU;AAClD,eAAA,aAAa,CAAC,IAAI,aAAa;AAAA,IAAA,OACnC;AACL,eAAS,IAAI;AAAA,IACf;AAEO,WAAA;AAAA,MACL,QAAQ;AAAA,QACN,MAAM,SAAS,MAAM,QAAQ,MAAM,KAAK,OAAO,SAAS;AAAA,QACxD,SAAS;AAAA,QACT;AAAA,QACA,QAAQ;AAAA,QACR,GAAG;AAAA,QACH,GAAI,QAAQ,EAAE,MAAM,cAAc,IAAI,EAAE;AAAA,QACxC,GAAI,CAAC,QAAQ;AAAA,UACX,MACE,SAAS,SAAS,MAAM,QAAQ,MAAM,IAClC,OAAO,IAAI,CAAC,MAAM;AAChB,gBAAI,WAA8B;AAC9B,gBAAA,EAAE,aAAa,MAAM;AACZ,yBAAA;AAAA,YACb;AACI,gBAAA,EAAE,SAAS,WAAW;AACb,yBAAA;AAAA,YACb;AACO,mBAAA;AAAA,cACL,MAAM,EAAE;AAAA,cACR,MAAM,cAAc,QAAQ;AAAA,YAAA;AAAA,UAE/B,CAAA,IACD;AAAA,QACR;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAAC,QAAQ,MAAM,MAAM,WAAW,cAAc,SAAS,CAAC;AAEpD,SAAA;AACT;"}
|
|
@@ -21,6 +21,17 @@ const useSeries = ({
|
|
|
21
21
|
let pieOps = {};
|
|
22
22
|
let lineOps = {};
|
|
23
23
|
let barOps = {};
|
|
24
|
+
let scatterOps = {};
|
|
25
|
+
if (type === "scatter") {
|
|
26
|
+
const yAxisId = typeof measure !== "string" ? measure.yAxis : void 0;
|
|
27
|
+
scatterOps = {
|
|
28
|
+
yAxisId,
|
|
29
|
+
encode: {
|
|
30
|
+
x: groupByKey,
|
|
31
|
+
y: c
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
}
|
|
24
35
|
if (type === "pie") {
|
|
25
36
|
pieOps = {
|
|
26
37
|
encode: {
|
|
@@ -83,7 +94,8 @@ const useSeries = ({
|
|
|
83
94
|
name: nameFormatter ? nameFormatter(c) : c,
|
|
84
95
|
...pieOps,
|
|
85
96
|
...barOps,
|
|
86
|
-
...lineOps
|
|
97
|
+
...lineOps,
|
|
98
|
+
...scatterOps
|
|
87
99
|
};
|
|
88
100
|
})
|
|
89
101
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSeries.js","sources":["../../../src/hooks/useSeries.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { internal } from \"arquero\";\nimport {\n BarSeriesOption,\n LineSeriesOption,\n PieSeriesOption,\n} from \"echarts/charts\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvBarChartMeasures,\n HvChartEmptyCellMode,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"../types\";\nimport {\n HvAxisChartCommonProps,\n HvChartCommonProps,\n HvEChartsOption,\n} from \"../types/common\";\nimport {
|
|
1
|
+
{"version":3,"file":"useSeries.js","sources":["../../../src/hooks/useSeries.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { internal } from \"arquero\";\nimport {\n BarSeriesOption,\n LineSeriesOption,\n PieSeriesOption,\n ScatterSeriesOption,\n} from \"echarts/charts\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvBarChartMeasures,\n HvChartEmptyCellMode,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"../types\";\nimport {\n HvAxisChartCommonProps,\n HvChartCommonProps,\n HvEChartsOption,\n} from \"../types/common\";\nimport {\n BarFullMeasure,\n HvScatterPlotMeasure,\n LineFullMeasure,\n ScatterPlotMeasure,\n} from \"../types/measures\";\nimport { getGroupKey, getMeasure } from \"../utils\";\n\ninterface HvSeriesHookProps {\n type: \"line\" | \"bar\" | \"pie\" | \"scatter\";\n data: internal.ColumnTable;\n groupBy: HvChartCommonProps[\"groupBy\"];\n measures:\n | Arrayable<HvLineChartMeasures | HvBarChartMeasures | HvScatterPlotMeasure>\n | HvDonutChartMeasure;\n area?: boolean;\n areaOpacity?: number;\n emptyCellMode?: HvChartEmptyCellMode;\n stack?: HvAxisChartCommonProps[\"stack\"];\n nameFormatter?: HvAxisChartCommonProps[\"seriesNameFormatter\"];\n horizontal?: boolean;\n radius?: number | string | (number | string)[];\n}\n\nexport const useSeries = ({\n groupBy,\n type,\n data,\n measures,\n nameFormatter,\n stack,\n horizontal = false,\n area = false,\n areaOpacity = 0.5,\n emptyCellMode,\n radius,\n}: HvSeriesHookProps) => {\n const groupByKey = getGroupKey(groupBy);\n\n const option: Pick<HvEChartsOption, \"series\"> = useMemo<\n Pick<HvEChartsOption, \"series\">\n >(() => {\n return {\n series: data\n .columnNames()\n .filter((c) => c !== groupByKey)\n .map<\n | LineSeriesOption\n | BarSeriesOption\n | PieSeriesOption\n | ScatterSeriesOption\n >((c) => {\n const measure = getMeasure(c, measures);\n\n let pieOps: PieSeriesOption = {};\n let lineOps: LineSeriesOption = {};\n let barOps: BarSeriesOption = {};\n let scatterOps: ScatterSeriesOption = {};\n\n // scatter\n if (type === \"scatter\") {\n const yAxisId =\n typeof measure !== \"string\"\n ? (measure as ScatterPlotMeasure).yAxis\n : undefined;\n scatterOps = {\n yAxisId,\n encode: {\n x: groupByKey,\n y: c,\n },\n };\n }\n\n // pie\n if (type === \"pie\") {\n pieOps = {\n encode: {\n value: c,\n itemName: groupByKey,\n },\n labelLine: {\n show: false,\n },\n label: {\n show: false,\n },\n emphasis: {\n label: {\n show: false,\n },\n },\n radius,\n };\n }\n\n // line or bar\n if (type === \"line\" || type === \"bar\") {\n const sampling =\n typeof measure !== \"string\"\n ? (measure as LineFullMeasure | BarFullMeasure).sampling\n : undefined;\n const yAxisId =\n typeof measure !== \"string\"\n ? (measure as LineFullMeasure | BarFullMeasure).yAxis\n : undefined;\n const stackName =\n typeof measure !== \"string\"\n ? (measure as LineFullMeasure | BarFullMeasure).stack ??\n stack ??\n undefined\n : stack ?? undefined;\n\n const axisOps = {\n sampling,\n yAxisId,\n stack: stackName,\n encode: horizontal\n ? {\n x: c,\n y: groupByKey,\n }\n : {\n x: groupByKey,\n y: c,\n },\n };\n\n // bar\n if (type === \"bar\") {\n barOps = {\n ...axisOps,\n barMaxWidth: 90,\n barMinWidth: 3,\n };\n }\n\n // line\n if (type === \"line\") {\n const showSymbol =\n typeof measure !== \"string\"\n ? !(measure as LineFullMeasure).hideSymbol\n : true;\n const connectNulls =\n typeof measure !== \"string\" &&\n (measure as LineFullMeasure).emptyCellMode\n ? (measure as LineFullMeasure).emptyCellMode === \"connect\"\n : emptyCellMode === \"connect\";\n const isArea =\n typeof measure !== \"string\"\n ? (measure as LineFullMeasure).area ?? area\n : area;\n const aOpacity =\n typeof measure !== \"string\"\n ? (measure as LineFullMeasure).areaOpacity ?? areaOpacity\n : areaOpacity;\n\n lineOps = {\n ...axisOps,\n connectNulls,\n showSymbol,\n areaStyle: isArea ? { opacity: aOpacity } : undefined,\n };\n }\n }\n\n return {\n id: `series~${groupByKey}~${c}`,\n type,\n name: nameFormatter ? nameFormatter(c) : c,\n ...pieOps,\n ...barOps,\n ...lineOps,\n ...scatterOps,\n } as\n | LineSeriesOption\n | BarSeriesOption\n | PieSeriesOption\n | ScatterSeriesOption;\n }),\n };\n }, [\n data,\n groupByKey,\n measures,\n type,\n nameFormatter,\n radius,\n stack,\n horizontal,\n emptyCellMode,\n area,\n areaOpacity,\n ]);\n\n return option;\n};\n"],"names":[],"mappings":";;AA6CO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AAAA,EACA;AACF,MAAyB;AACjB,QAAA,aAAa,YAAY,OAAO;AAEhC,QAAA,SAA0C,QAE9C,MAAM;AACC,WAAA;AAAA,MACL,QAAQ,KACL,YAAY,EACZ,OAAO,CAAC,MAAM,MAAM,UAAU,EAC9B,IAKC,CAAC,MAAM;AACD,cAAA,UAAU,WAAW,GAAG,QAAQ;AAEtC,YAAI,SAA0B,CAAA;AAC9B,YAAI,UAA4B,CAAA;AAChC,YAAI,SAA0B,CAAA;AAC9B,YAAI,aAAkC,CAAA;AAGtC,YAAI,SAAS,WAAW;AACtB,gBAAM,UACJ,OAAO,YAAY,WACd,QAA+B,QAChC;AACO,uBAAA;AAAA,YACX;AAAA,YACA,QAAQ;AAAA,cACN,GAAG;AAAA,cACH,GAAG;AAAA,YACL;AAAA,UAAA;AAAA,QAEJ;AAGA,YAAI,SAAS,OAAO;AACT,mBAAA;AAAA,YACP,QAAQ;AAAA,cACN,OAAO;AAAA,cACP,UAAU;AAAA,YACZ;AAAA,YACA,WAAW;AAAA,cACT,MAAM;AAAA,YACR;AAAA,YACA,OAAO;AAAA,cACL,MAAM;AAAA,YACR;AAAA,YACA,UAAU;AAAA,cACR,OAAO;AAAA,gBACL,MAAM;AAAA,cACR;AAAA,YACF;AAAA,YACA;AAAA,UAAA;AAAA,QAEJ;AAGI,YAAA,SAAS,UAAU,SAAS,OAAO;AACrC,gBAAM,WACJ,OAAO,YAAY,WACd,QAA6C,WAC9C;AACN,gBAAM,UACJ,OAAO,YAAY,WACd,QAA6C,QAC9C;AACA,gBAAA,YACJ,OAAO,YAAY,WACd,QAA6C,SAC9C,SACA,SACA,SAAS;AAEf,gBAAM,UAAU;AAAA,YACd;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP,QAAQ,aACJ;AAAA,cACE,GAAG;AAAA,cACH,GAAG;AAAA,YAAA,IAEL;AAAA,cACE,GAAG;AAAA,cACH,GAAG;AAAA,YACL;AAAA,UAAA;AAIN,cAAI,SAAS,OAAO;AACT,qBAAA;AAAA,cACP,GAAG;AAAA,cACH,aAAa;AAAA,cACb,aAAa;AAAA,YAAA;AAAA,UAEjB;AAGA,cAAI,SAAS,QAAQ;AACnB,kBAAM,aACJ,OAAO,YAAY,WACf,CAAE,QAA4B,aAC9B;AACA,kBAAA,eACJ,OAAO,YAAY,YAClB,QAA4B,gBACxB,QAA4B,kBAAkB,YAC/C,kBAAkB;AACxB,kBAAM,SACJ,OAAO,YAAY,WACd,QAA4B,QAAQ,OACrC;AACN,kBAAM,WACJ,OAAO,YAAY,WACd,QAA4B,eAAe,cAC5C;AAEI,sBAAA;AAAA,cACR,GAAG;AAAA,cACH;AAAA,cACA;AAAA,cACA,WAAW,SAAS,EAAE,SAAS,aAAa;AAAA,YAAA;AAAA,UAEhD;AAAA,QACF;AAEO,eAAA;AAAA,UACL,IAAI,UAAU,UAAU,IAAI,CAAC;AAAA,UAC7B;AAAA,UACA,MAAM,gBAAgB,cAAc,CAAC,IAAI;AAAA,UACzC,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,QAAA;AAAA,MACL,CAKD;AAAA,IAAA;AAAA,EACL,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA;AACT;"}
|
package/dist/esm/index.js
CHANGED
|
@@ -3,11 +3,13 @@ import { HvLineChart } from "./LineChart/LineChart.js";
|
|
|
3
3
|
import { HvBarChart } from "./BarChart/BarChart.js";
|
|
4
4
|
import { HvDonutChart } from "./DonutChart/DonutChart.js";
|
|
5
5
|
import { HvConfusionMatrix } from "./ConfusionMatrix/ConfusionMatrix.js";
|
|
6
|
+
import { HvScatterPlot } from "./ScatterPlot/ScatterPlot.js";
|
|
6
7
|
export {
|
|
7
8
|
HvBarChart,
|
|
8
9
|
HvConfusionMatrix,
|
|
9
10
|
HvDonutChart,
|
|
10
11
|
HvLineChart,
|
|
12
|
+
HvScatterPlot,
|
|
11
13
|
HvVizContext,
|
|
12
14
|
HvVizProvider
|
|
13
15
|
};
|
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
|
@@ -13,6 +13,8 @@ const getAxisType = (type) => {
|
|
|
13
13
|
const getGroupKey = (groupBy) => Array.isArray(groupBy) ? groupBy.join("_") : groupBy;
|
|
14
14
|
const getLegendIcon = (icon) => {
|
|
15
15
|
switch (icon) {
|
|
16
|
+
case "circle":
|
|
17
|
+
return "circle";
|
|
16
18
|
case "square":
|
|
17
19
|
return "path://M0,0L16,0L16,16L0,16L0,0Z";
|
|
18
20
|
case "line":
|
|
@@ -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 HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"..\";\nimport { HvChartCommonProps } from \"../types/common\";\nimport { HvChartLegendIcon } from \"../types/legend\";\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 \"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>\n | HvDonutChartMeasure,\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 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"],"names":[],"mappings":"AAYa,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;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ import { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
|
|
|
12
12
|
import ReactECharts from 'echarts-for-react/lib/core';
|
|
13
13
|
import { RefAttributes } from 'react';
|
|
14
14
|
|
|
15
|
-
declare interface
|
|
15
|
+
declare interface AxisMeasure {
|
|
16
16
|
/** Id of the yAxis. */
|
|
17
17
|
yAxis?: string;
|
|
18
18
|
/**
|
|
@@ -27,10 +27,10 @@ declare interface AxisMeasures {
|
|
|
27
27
|
sampling?: HvChartSampling;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
declare interface
|
|
30
|
+
declare interface BarFullMeasure extends BaseMeasure, AxisMeasure {
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
declare interface
|
|
33
|
+
declare interface BaseMeasure {
|
|
34
34
|
/** Column name. */
|
|
35
35
|
field: string;
|
|
36
36
|
/** Aggregation function to use. If no `agg` is defined, it will default to `sum`. */
|
|
@@ -39,10 +39,10 @@ declare interface BaseMeasures {
|
|
|
39
39
|
valueFormatter?: (value?: string | number) => string;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
declare interface ConfusionMatrixMeasure extends
|
|
42
|
+
declare interface ConfusionMatrixMeasure extends BaseMeasure {
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
declare interface
|
|
45
|
+
declare interface DonutFullMeasure extends BaseMeasure {
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
/** Empty cell mode */
|
|
@@ -89,7 +89,7 @@ export declare const HvBarChart: ForwardRefExoticComponent<HvBarChartProps & Ref
|
|
|
89
89
|
export declare interface HvBarChartClasses extends HvChartTooltipClasses {
|
|
90
90
|
}
|
|
91
91
|
|
|
92
|
-
export declare type HvBarChartMeasures = string |
|
|
92
|
+
export declare type HvBarChartMeasures = string | BarFullMeasure;
|
|
93
93
|
|
|
94
94
|
export declare interface HvBarChartProps extends HvAxisChartCommonProps, HvChartCommonProps {
|
|
95
95
|
/** Columns to measure on the chart. */
|
|
@@ -332,7 +332,7 @@ export declare const HvDonutChart: ForwardRefExoticComponent<HvDonutChartProps &
|
|
|
332
332
|
export declare interface HvDonutChartClasses extends HvChartTooltipClasses {
|
|
333
333
|
}
|
|
334
334
|
|
|
335
|
-
export declare type HvDonutChartMeasure = string |
|
|
335
|
+
export declare type HvDonutChartMeasure = string | DonutFullMeasure;
|
|
336
336
|
|
|
337
337
|
export declare interface HvDonutChartProps extends HvChartCommonProps {
|
|
338
338
|
/** Column to measure. */
|
|
@@ -356,10 +356,10 @@ export declare const HvLineChart: ForwardRefExoticComponent<HvLineChartProps & R
|
|
|
356
356
|
export declare interface HvLineChartClasses extends HvChartTooltipClasses {
|
|
357
357
|
}
|
|
358
358
|
|
|
359
|
-
export declare type HvLineChartMeasures = string |
|
|
359
|
+
export declare type HvLineChartMeasures = string | LineFullMeasure;
|
|
360
360
|
|
|
361
361
|
export declare interface HvLineChartProps extends HvAxisChartCommonProps, HvChartCommonProps {
|
|
362
|
-
/**
|
|
362
|
+
/** Columns to measure on the chart. */
|
|
363
363
|
measures: Arrayable<HvLineChartMeasures>;
|
|
364
364
|
/** Strategy to use when there are empty cells. Defaults to `void`. */
|
|
365
365
|
emptyCellMode?: HvChartEmptyCellMode;
|
|
@@ -371,6 +371,24 @@ export declare interface HvLineChartProps extends HvAxisChartCommonProps, HvChar
|
|
|
371
371
|
classes?: HvLineChartClasses;
|
|
372
372
|
}
|
|
373
373
|
|
|
374
|
+
/**
|
|
375
|
+
* A scatter plot is a type of chart which displays dots to represent two numeric variables.
|
|
376
|
+
* This type of chart is used to determine the relationship between two variables.
|
|
377
|
+
*/
|
|
378
|
+
export declare const HvScatterPlot: ForwardRefExoticComponent<HvScatterPlotProps & RefAttributes<ReactECharts>>;
|
|
379
|
+
|
|
380
|
+
export declare interface HvScatterPlotClasses extends HvChartTooltipClasses {
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
export declare type HvScatterPlotMeasure = string | ScatterPlotMeasure;
|
|
384
|
+
|
|
385
|
+
export declare interface HvScatterPlotProps extends HvChartCommonProps, Omit<HvAxisChartCommonProps, "stack"> {
|
|
386
|
+
/** Columns to measure on the plot. */
|
|
387
|
+
measures: Arrayable<HvScatterPlotMeasure>;
|
|
388
|
+
/** A Jss Object used to override or extend the styles applied to the component. */
|
|
389
|
+
classes?: HvScatterPlotClasses;
|
|
390
|
+
}
|
|
391
|
+
|
|
374
392
|
export declare const HvVizContext: Context<HvVizContextValue>;
|
|
375
393
|
|
|
376
394
|
export declare interface HvVizContextValue {
|
|
@@ -411,7 +429,7 @@ export declare interface HvVizProviderProps {
|
|
|
411
429
|
children?: React.ReactNode;
|
|
412
430
|
}
|
|
413
431
|
|
|
414
|
-
declare interface
|
|
432
|
+
declare interface LineFullMeasure extends BaseMeasure, AxisMeasure {
|
|
415
433
|
/** Whether to hide the symbol for data points. Defaults to `false`. */
|
|
416
434
|
hideSymbol?: boolean;
|
|
417
435
|
/** Whether the area under the lines should be filled. If not specified, it defaults to the global `area` prop. */
|
|
@@ -422,6 +440,9 @@ declare interface LineFullMeasures extends BaseMeasures, AxisMeasures {
|
|
|
422
440
|
emptyCellMode?: HvChartEmptyCellMode;
|
|
423
441
|
}
|
|
424
442
|
|
|
443
|
+
declare interface ScatterPlotMeasure extends BaseMeasure, Pick<AxisMeasure, "yAxis"> {
|
|
444
|
+
}
|
|
445
|
+
|
|
425
446
|
/** Tooltip type */
|
|
426
447
|
declare const tooltipType: readonly ["single", "multiple"];
|
|
427
448
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-viz",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.8.0",
|
|
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": "ce608ffb66a649dba8171cecc942dc60e416d8ad",
|
|
46
46
|
"main": "dist/cjs/index.cjs",
|
|
47
47
|
"exports": {
|
|
48
48
|
".": {
|