@hitachivantara/uikit-react-viz 5.1.0 → 5.2.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/components/BarChart/BarChart.cjs +16 -0
- package/dist/cjs/components/BarChart/BarChart.cjs.map +1 -0
- package/dist/cjs/components/BaseChart/BaseChart.cjs +423 -0
- package/dist/cjs/components/BaseChart/BaseChart.cjs.map +1 -0
- package/dist/cjs/components/{LineChart/LineChart.styles.cjs → BaseChart/BaseChart.styles.cjs} +2 -2
- package/dist/cjs/components/{LineChart/LineChart.styles.cjs.map → BaseChart/BaseChart.styles.cjs.map} +1 -1
- package/dist/cjs/components/LineChart/LineChart.cjs +8 -386
- package/dist/cjs/components/LineChart/LineChart.cjs.map +1 -1
- package/dist/cjs/index.cjs +2 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/providers/Provider.cjs +2 -103
- package/dist/cjs/providers/Provider.cjs.map +1 -1
- package/dist/cjs/utils/registerThemes.cjs +106 -0
- package/dist/cjs/utils/registerThemes.cjs.map +1 -0
- package/dist/esm/components/BarChart/BarChart.js +16 -0
- package/dist/esm/components/BarChart/BarChart.js.map +1 -0
- package/dist/esm/components/BaseChart/BaseChart.js +402 -0
- package/dist/esm/components/BaseChart/BaseChart.js.map +1 -0
- package/dist/esm/components/{LineChart/LineChart.styles.js → BaseChart/BaseChart.styles.js} +2 -2
- package/dist/esm/components/{LineChart/LineChart.styles.js.map → BaseChart/BaseChart.styles.js.map} +1 -1
- package/dist/esm/components/LineChart/LineChart.js +8 -365
- package/dist/esm/components/LineChart/LineChart.js.map +1 -1
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/providers/Provider.js +1 -83
- package/dist/esm/providers/Provider.js.map +1 -1
- package/dist/esm/utils/registerThemes.js +87 -0
- package/dist/esm/utils/registerThemes.js.map +1 -0
- package/dist/types/index.d.ts +133 -81
- package/package.json +3 -3
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
4
|
+
const BaseChart = require("../BaseChart/BaseChart.cjs");
|
|
5
|
+
const HvBarChart = ({
|
|
6
|
+
horizontal = false,
|
|
7
|
+
...others
|
|
8
|
+
}) => {
|
|
9
|
+
return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, {
|
|
10
|
+
type: "bar",
|
|
11
|
+
horizontal,
|
|
12
|
+
...others
|
|
13
|
+
});
|
|
14
|
+
};
|
|
15
|
+
exports.HvBarChart = HvBarChart;
|
|
16
|
+
//# sourceMappingURL=BarChart.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BarChart.cjs","sources":["../../../../src/components/BarChart/BarChart.tsx"],"sourcesContent":["import {\n HvBaseChart,\n HvBaseChartBarProps,\n HvBaseChartClasses,\n HvBaseChartCommonProps,\n} from \"../BaseChart\";\n\nexport interface HvBarChartClasses extends HvBaseChartClasses {}\n\nexport interface HvBarChartProps\n extends HvBaseChartCommonProps,\n HvBaseChartBarProps {\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvBarChartClasses;\n}\n\n/**\n * A bar chart is a chart or graph that presents categorical data with rectangular bars.\n */\nexport const HvBarChart = ({\n horizontal = false,\n ...others\n}: HvBarChartProps) => {\n return <HvBaseChart type=\"bar\" horizontal={horizontal} {...others} />;\n};\n"],"names":["HvBarChart","horizontal","others","HvBaseChart","type"],"mappings":";;;;AAmBO,MAAMA,aAAaA,CAAC;AAAA,EACzBC,aAAa;AAAA,EACb,GAAGC;AACY,MAAM;AACrB,wCAAQC,UAAAA,aAAW;AAAA,IAACC,MAAK;AAAA,IAAMH;AAAAA,IAAuB,GAAKC;AAAAA,EAAAA,CAAS;AACtE;;"}
|
|
@@ -0,0 +1,423 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const react = require("react");
|
|
4
|
+
const components = require("echarts/components");
|
|
5
|
+
const renderers = require("echarts/renderers");
|
|
6
|
+
const echarts = require("echarts/core");
|
|
7
|
+
const charts = require("echarts/charts");
|
|
8
|
+
const ReactECharts = require("echarts-for-react/lib/core");
|
|
9
|
+
const arquero = require("arquero");
|
|
10
|
+
const getAxisType = require("../../utils/getAxisType.cjs");
|
|
11
|
+
const getAgFunc = require("../../utils/getAgFunc.cjs");
|
|
12
|
+
const getLegendIcon = require("../../utils/getLegendIcon.cjs");
|
|
13
|
+
const useVizTheme = require("../../hooks/useVizTheme.cjs");
|
|
14
|
+
const BaseChart_styles = require("./BaseChart.styles.cjs");
|
|
15
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
16
|
+
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
17
|
+
function _interopNamespace(e) {
|
|
18
|
+
if (e && e.__esModule)
|
|
19
|
+
return e;
|
|
20
|
+
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
21
|
+
if (e) {
|
|
22
|
+
for (const k in e) {
|
|
23
|
+
if (k !== "default") {
|
|
24
|
+
const d = Object.getOwnPropertyDescriptor(e, k);
|
|
25
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: () => e[k]
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
n.default = e;
|
|
33
|
+
return Object.freeze(n);
|
|
34
|
+
}
|
|
35
|
+
const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
|
|
36
|
+
const ReactECharts__default = /* @__PURE__ */ _interopDefault(ReactECharts);
|
|
37
|
+
echarts__namespace.use([charts.BarChart, charts.LineChart, renderers.CanvasRenderer, components.DatasetComponent, components.GridComponent, components.AriaComponent, components.TooltipComponent, components.LegendComponent, components.DataZoomSliderComponent, components.DataZoomInsideComponent]);
|
|
38
|
+
const HvBaseChart = ({
|
|
39
|
+
type,
|
|
40
|
+
data,
|
|
41
|
+
groupBy,
|
|
42
|
+
splitBy,
|
|
43
|
+
measures,
|
|
44
|
+
sortBy,
|
|
45
|
+
xAxis,
|
|
46
|
+
yAxis,
|
|
47
|
+
legend,
|
|
48
|
+
tooltip,
|
|
49
|
+
seriesNameFormatter,
|
|
50
|
+
area = false,
|
|
51
|
+
stack,
|
|
52
|
+
emptyCellMode = "void",
|
|
53
|
+
horizontalRangeSlider,
|
|
54
|
+
areaOpacity = 0.5,
|
|
55
|
+
classes: classesProp = {},
|
|
56
|
+
grid,
|
|
57
|
+
horizontal = false
|
|
58
|
+
}) => {
|
|
59
|
+
const {
|
|
60
|
+
theme
|
|
61
|
+
} = useVizTheme.useVizTheme();
|
|
62
|
+
const {
|
|
63
|
+
classes
|
|
64
|
+
} = BaseChart_styles.useClasses(classesProp);
|
|
65
|
+
const currentTheme = react.useRef(theme);
|
|
66
|
+
const chartRef = react.useRef(null);
|
|
67
|
+
const isMounted = react.useRef(false);
|
|
68
|
+
const groupByKey = Array.isArray(groupBy) ? groupBy.join("_") : groupBy;
|
|
69
|
+
const chartData = react.useMemo(() => {
|
|
70
|
+
let tableData;
|
|
71
|
+
if (data instanceof arquero.internal.ColumnTable) {
|
|
72
|
+
tableData = data;
|
|
73
|
+
} else if (Array.isArray(data)) {
|
|
74
|
+
tableData = arquero.from(data);
|
|
75
|
+
} else {
|
|
76
|
+
tableData = arquero.table(data);
|
|
77
|
+
}
|
|
78
|
+
const groupByFields = groupBy ? Array.isArray(groupBy) ? groupBy : [groupBy] : [];
|
|
79
|
+
const splitByFields = Array.isArray(splitBy) ? splitBy : splitBy != null ? [splitBy] : [];
|
|
80
|
+
const measuresFields = measures == null ? {} : typeof measures === "string" ? {
|
|
81
|
+
[measures]: getAgFunc.getAgFunc("sum", measures)
|
|
82
|
+
} : Array.isArray(measures) ? measures.reduce((acc, value) => {
|
|
83
|
+
let field;
|
|
84
|
+
let agFunction;
|
|
85
|
+
if (typeof value === "string") {
|
|
86
|
+
field = value;
|
|
87
|
+
agFunction = "sum";
|
|
88
|
+
} else {
|
|
89
|
+
field = value.field;
|
|
90
|
+
agFunction = value.agg ?? "sum";
|
|
91
|
+
}
|
|
92
|
+
return {
|
|
93
|
+
...acc,
|
|
94
|
+
[field]: getAgFunc.getAgFunc(agFunction, field)
|
|
95
|
+
};
|
|
96
|
+
}, {}) : {
|
|
97
|
+
[measures.field]: getAgFunc.getAgFunc(measures.agg ?? "sum", measures.field)
|
|
98
|
+
};
|
|
99
|
+
const sortByFields = sortBy == null ? {} : typeof sortBy === "string" ? {
|
|
100
|
+
[sortBy]: "asc"
|
|
101
|
+
} : Array.isArray(sortBy) ? sortBy.reduce((acc, value) => {
|
|
102
|
+
let field;
|
|
103
|
+
let orderFunction;
|
|
104
|
+
if (typeof value === "string") {
|
|
105
|
+
field = value;
|
|
106
|
+
orderFunction = "asc";
|
|
107
|
+
} else {
|
|
108
|
+
field = value.field;
|
|
109
|
+
orderFunction = value.order ?? "asc";
|
|
110
|
+
}
|
|
111
|
+
return {
|
|
112
|
+
...acc,
|
|
113
|
+
[field]: orderFunction
|
|
114
|
+
};
|
|
115
|
+
}, {}) : {
|
|
116
|
+
[sortBy.field]: sortBy.order ?? "asc"
|
|
117
|
+
};
|
|
118
|
+
const allFields = [...groupByFields, ...splitByFields, ...Object.keys(measuresFields)];
|
|
119
|
+
tableData = tableData.select(...allFields);
|
|
120
|
+
if (groupByFields.length > 0) {
|
|
121
|
+
tableData = tableData.groupby(groupByFields);
|
|
122
|
+
}
|
|
123
|
+
if (splitByFields.length > 0) {
|
|
124
|
+
tableData = tableData.pivot(splitByFields, measuresFields);
|
|
125
|
+
} else {
|
|
126
|
+
tableData = tableData.rollup(measuresFields);
|
|
127
|
+
}
|
|
128
|
+
if (groupByFields.length > 1) {
|
|
129
|
+
const expression = `d => ${groupByFields.map((field) => `d.${field}`).join(" + '_' + ")}`;
|
|
130
|
+
tableData = tableData.derive({
|
|
131
|
+
[groupByKey]: expression
|
|
132
|
+
}, {
|
|
133
|
+
after: groupByFields[groupByFields.length - 1]
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
if (Object.keys(sortByFields).length > 0) {
|
|
137
|
+
tableData = tableData.orderby(...Object.keys(sortByFields).filter((key) => allFields.includes(key)).map((key) => sortByFields[key] === "desc" ? arquero.desc(key) : key));
|
|
138
|
+
}
|
|
139
|
+
if (groupByFields.length > 1) {
|
|
140
|
+
tableData = tableData.select(arquero.not(...groupByFields));
|
|
141
|
+
}
|
|
142
|
+
return tableData;
|
|
143
|
+
}, [data, groupBy, groupByKey, splitBy, measures, sortBy]);
|
|
144
|
+
const chartDataset = react.useMemo(() => {
|
|
145
|
+
return {
|
|
146
|
+
dataset: {
|
|
147
|
+
source: chartData.columnNames().reduce((acc, c) => ({
|
|
148
|
+
...acc,
|
|
149
|
+
[c]: chartData.array(c)
|
|
150
|
+
}), {})
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
}, [chartData]);
|
|
154
|
+
const chartXAxis = react.useMemo(() => {
|
|
155
|
+
return {
|
|
156
|
+
xAxis: {
|
|
157
|
+
id: xAxis == null ? void 0 : xAxis.id,
|
|
158
|
+
type: getAxisType.getAxisType(xAxis == null ? void 0 : xAxis.type) ?? (horizontal ? "value" : "category"),
|
|
159
|
+
name: xAxis == null ? void 0 : xAxis.name,
|
|
160
|
+
scale: !(type === "bar"),
|
|
161
|
+
axisLabel: {
|
|
162
|
+
rotate: (xAxis == null ? void 0 : xAxis.labelRotation) ?? 0,
|
|
163
|
+
formatter: xAxis == null ? void 0 : xAxis.labelFormatter
|
|
164
|
+
},
|
|
165
|
+
max: (xAxis == null ? void 0 : xAxis.maxValue) === "max" ? "dataMax" : xAxis == null ? void 0 : xAxis.maxValue,
|
|
166
|
+
min: (xAxis == null ? void 0 : xAxis.minValue) === "min" ? "dataMin" : xAxis == null ? void 0 : xAxis.minValue
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
}, [xAxis, type, horizontal]);
|
|
170
|
+
const chartYAxis = react.useMemo(() => {
|
|
171
|
+
if (!yAxis || !Array.isArray(yAxis)) {
|
|
172
|
+
return {
|
|
173
|
+
yAxis: {
|
|
174
|
+
id: yAxis == null ? void 0 : yAxis.id,
|
|
175
|
+
type: getAxisType.getAxisType(yAxis == null ? void 0 : yAxis.type) ?? (horizontal ? "category" : "value"),
|
|
176
|
+
name: yAxis == null ? void 0 : yAxis.name,
|
|
177
|
+
axisLabel: {
|
|
178
|
+
rotate: (yAxis == null ? void 0 : yAxis.labelRotation) ?? 0,
|
|
179
|
+
formatter: yAxis == null ? void 0 : yAxis.labelFormatter
|
|
180
|
+
},
|
|
181
|
+
max: (yAxis == null ? void 0 : yAxis.maxValue) === "max" ? "dataMax" : yAxis == null ? void 0 : yAxis.maxValue,
|
|
182
|
+
min: (yAxis == null ? void 0 : yAxis.minValue) === "min" ? "dataMin" : yAxis == null ? void 0 : yAxis.minValue
|
|
183
|
+
}
|
|
184
|
+
};
|
|
185
|
+
}
|
|
186
|
+
return {
|
|
187
|
+
yAxis: yAxis.map((axis) => ({
|
|
188
|
+
id: axis == null ? void 0 : axis.id,
|
|
189
|
+
type: getAxisType.getAxisType(axis == null ? void 0 : axis.type) ?? "value",
|
|
190
|
+
name: axis == null ? void 0 : axis.name,
|
|
191
|
+
axisLabel: {
|
|
192
|
+
rotate: (axis == null ? void 0 : axis.labelRotation) ?? 0,
|
|
193
|
+
formatter: axis == null ? void 0 : axis.labelFormatter
|
|
194
|
+
},
|
|
195
|
+
max: (axis == null ? void 0 : axis.maxValue) === "max" ? "dataMax" : axis == null ? void 0 : axis.maxValue,
|
|
196
|
+
min: (axis == null ? void 0 : axis.minValue) === "min" ? "dataMin" : axis == null ? void 0 : axis.minValue
|
|
197
|
+
}))
|
|
198
|
+
};
|
|
199
|
+
}, [yAxis, horizontal]);
|
|
200
|
+
const getMeasure = (name, msr) => {
|
|
201
|
+
const measureName = name.split("_")[0];
|
|
202
|
+
const measuresArray = Array.isArray(msr) ? msr : [msr];
|
|
203
|
+
return measuresArray.find((m) => {
|
|
204
|
+
if (typeof m === "string") {
|
|
205
|
+
return m === measureName;
|
|
206
|
+
}
|
|
207
|
+
return m.field === measureName;
|
|
208
|
+
}) ?? measuresArray[0];
|
|
209
|
+
};
|
|
210
|
+
const chartSeries = react.useMemo(() => {
|
|
211
|
+
return {
|
|
212
|
+
series: chartData.columnNames().filter((c) => c !== groupByKey).map((c) => {
|
|
213
|
+
const measure = getMeasure(c, measures);
|
|
214
|
+
const showSymbol = typeof measure !== "string" ? !measure.hideSymbol : true;
|
|
215
|
+
const sampling = typeof measure !== "string" ? measure.sampling : void 0;
|
|
216
|
+
const yAxisId = typeof measure !== "string" ? measure.yAxis : void 0;
|
|
217
|
+
const isArea = typeof measure !== "string" ? measure.area ?? area : area;
|
|
218
|
+
const aOpacity = typeof measure !== "string" ? measure.areaOpacity ?? areaOpacity : areaOpacity;
|
|
219
|
+
const stackName = typeof measure !== "string" ? measure.stack ?? stack ?? void 0 : stack ?? void 0;
|
|
220
|
+
const connectNulls = typeof measure !== "string" && measure.emptyCellMode ? measure.emptyCellMode === "connect" : emptyCellMode === "connect";
|
|
221
|
+
return {
|
|
222
|
+
id: `series~${groupByKey}~${c}`,
|
|
223
|
+
name: seriesNameFormatter ? seriesNameFormatter(c) : c,
|
|
224
|
+
encode: horizontal ? {
|
|
225
|
+
x: c,
|
|
226
|
+
y: groupByKey
|
|
227
|
+
} : {
|
|
228
|
+
x: groupByKey,
|
|
229
|
+
y: c
|
|
230
|
+
},
|
|
231
|
+
type,
|
|
232
|
+
showSymbol,
|
|
233
|
+
sampling,
|
|
234
|
+
areaStyle: isArea ? {
|
|
235
|
+
opacity: aOpacity
|
|
236
|
+
} : void 0,
|
|
237
|
+
connectNulls,
|
|
238
|
+
stack: stackName,
|
|
239
|
+
yAxisId,
|
|
240
|
+
barMaxWidth: 90,
|
|
241
|
+
barMinWidth: 3
|
|
242
|
+
};
|
|
243
|
+
})
|
|
244
|
+
};
|
|
245
|
+
}, [chartData, groupByKey, area, stack, seriesNameFormatter, emptyCellMode, areaOpacity, measures, type, horizontal]);
|
|
246
|
+
const renderTooltip = (params, single, msr, reverse, cls, valueFormatter, titleFormatter) => {
|
|
247
|
+
const title = reverse ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]];
|
|
248
|
+
const formattedTitle = titleFormatter ? titleFormatter(title) : title;
|
|
249
|
+
if (single) {
|
|
250
|
+
const measure = getMeasure(reverse ? params[0].dimensionNames[params[0].encode.x[0]] : params[0].dimensionNames[params[0].encode.y[0]], msr);
|
|
251
|
+
const value = reverse ? params[0].value[params[0].encode.x[0]] : params[0].value[params[0].encode.y[0]];
|
|
252
|
+
const formattedValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
|
|
253
|
+
return `
|
|
254
|
+
<div class="${cls == null ? void 0 : cls.singleTooltipRoot}">
|
|
255
|
+
<p class="${cls == null ? void 0 : cls.singleTooltipTitle}">${formattedTitle}</p>
|
|
256
|
+
<p class="${cls == null ? void 0 : cls.singleTooltipValue}">${formattedValue}</p>
|
|
257
|
+
</div>
|
|
258
|
+
`;
|
|
259
|
+
}
|
|
260
|
+
return `
|
|
261
|
+
<div class="${cls == null ? void 0 : cls.multipleTooltipRoot}">
|
|
262
|
+
<div class="${cls == null ? void 0 : cls.multipleTooltipTitleContainer}">
|
|
263
|
+
<div>
|
|
264
|
+
<p class="${cls == null ? void 0 : cls.multipleTooltipTitle}">${formattedTitle}</p>
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
<div class="${cls == null ? void 0 : cls.multipleTooltipValuesContainer}">
|
|
268
|
+
${params.map((s) => {
|
|
269
|
+
const measure = getMeasure(reverse ? s.dimensionNames[s.encode.x[0]] : s.dimensionNames[s.encode.y[0]], msr);
|
|
270
|
+
const value = reverse ? s.value[s.encode.x[0]] : s.value[s.encode.y[0]];
|
|
271
|
+
const formattedValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
|
|
272
|
+
return `
|
|
273
|
+
<div key="${s.seriesName}" class="${cls == null ? void 0 : cls.multipleTooltipSeriesContainer}">
|
|
274
|
+
<div class="${cls == null ? void 0 : cls.multipleTooltipSeriesNameContainer}">
|
|
275
|
+
<p style="background-color: ${s.color};" class="${cls == null ? void 0 : cls.multipleTooltipSeriesColor}" />
|
|
276
|
+
<p class="${cls == null ? void 0 : cls.multipleTooltipSeriesName}">${s.seriesName}</p>
|
|
277
|
+
</div>
|
|
278
|
+
<p class="${cls == null ? void 0 : cls.multipleTooltipSeriesValue}">${formattedValue}</p>
|
|
279
|
+
</div>
|
|
280
|
+
`;
|
|
281
|
+
}).join(" ")}
|
|
282
|
+
</div>
|
|
283
|
+
</div>
|
|
284
|
+
`;
|
|
285
|
+
};
|
|
286
|
+
const renderCustomTooltip = (params, reverse, customTooltip) => {
|
|
287
|
+
if (typeof customTooltip === "function") {
|
|
288
|
+
const values = {
|
|
289
|
+
title: reverse ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]],
|
|
290
|
+
series: params.map((p) => {
|
|
291
|
+
return {
|
|
292
|
+
color: p.color,
|
|
293
|
+
name: p.seriesName,
|
|
294
|
+
value: reverse ? p.value[p.encode.x[0]] : p.value[p.encode.y[0]]
|
|
295
|
+
};
|
|
296
|
+
})
|
|
297
|
+
};
|
|
298
|
+
return customTooltip(values);
|
|
299
|
+
}
|
|
300
|
+
return customTooltip;
|
|
301
|
+
};
|
|
302
|
+
const chartTooltip = react.useMemo(() => {
|
|
303
|
+
return {
|
|
304
|
+
tooltip: {
|
|
305
|
+
confine: false,
|
|
306
|
+
show: (tooltip == null ? void 0 : tooltip.show) ?? true,
|
|
307
|
+
trigger: "axis",
|
|
308
|
+
position: (point, params, dom, rect, size) => {
|
|
309
|
+
return [point[0], point[1] - size.contentSize[1]];
|
|
310
|
+
},
|
|
311
|
+
formatter: (params) => (tooltip == null ? void 0 : tooltip.component) ? renderCustomTooltip(params, horizontal, tooltip.component) : renderTooltip(params, (tooltip == null ? void 0 : tooltip.type) === "single", measures, horizontal, classes, tooltip == null ? void 0 : tooltip.valueFormatter, tooltip == null ? void 0 : tooltip.titleFormatter)
|
|
312
|
+
}
|
|
313
|
+
};
|
|
314
|
+
}, [tooltip, classes, measures, horizontal]);
|
|
315
|
+
const chartLegend = react.useMemo(() => {
|
|
316
|
+
return {
|
|
317
|
+
legend: {
|
|
318
|
+
show: (legend == null ? void 0 : legend.show) ?? (Array.isArray(chartSeries.series) && chartSeries.series.length > 1),
|
|
319
|
+
itemGap: 20,
|
|
320
|
+
data: (legend == null ? void 0 : legend.show) !== false && Array.isArray(chartSeries.series) ? chartSeries.series.map((s) => {
|
|
321
|
+
return {
|
|
322
|
+
name: s.name,
|
|
323
|
+
icon: getLegendIcon.getLegendIcon(s.areaStyle != null || s.type === "bar")
|
|
324
|
+
};
|
|
325
|
+
}) : void 0
|
|
326
|
+
}
|
|
327
|
+
};
|
|
328
|
+
}, [chartSeries, legend]);
|
|
329
|
+
const chartHorizontalRangerSlider = react.useMemo(() => {
|
|
330
|
+
return {
|
|
331
|
+
dataZoom: [{
|
|
332
|
+
show: (horizontalRangeSlider == null ? void 0 : horizontalRangeSlider.show) ?? false,
|
|
333
|
+
type: "slider",
|
|
334
|
+
orient: "horizontal"
|
|
335
|
+
}, {
|
|
336
|
+
show: (horizontalRangeSlider == null ? void 0 : horizontalRangeSlider.show) ?? false,
|
|
337
|
+
type: "inside",
|
|
338
|
+
orient: "horizontal",
|
|
339
|
+
zoomOnMouseWheel: "shift",
|
|
340
|
+
moveOnMouseWheel: true
|
|
341
|
+
}]
|
|
342
|
+
};
|
|
343
|
+
}, [horizontalRangeSlider]);
|
|
344
|
+
const chartGrid = react.useMemo(() => {
|
|
345
|
+
return {
|
|
346
|
+
// if no value is defined we shouldn't pass anything because echarts doesn't behave well otherwise
|
|
347
|
+
grid: {
|
|
348
|
+
...(grid == null ? void 0 : grid.top) != null && {
|
|
349
|
+
top: grid.top
|
|
350
|
+
},
|
|
351
|
+
...(grid == null ? void 0 : grid.bottom) != null && {
|
|
352
|
+
bottom: grid.bottom
|
|
353
|
+
},
|
|
354
|
+
...(grid == null ? void 0 : grid.left) != null && {
|
|
355
|
+
left: grid.left
|
|
356
|
+
},
|
|
357
|
+
...(grid == null ? void 0 : grid.right) != null && {
|
|
358
|
+
right: grid.right
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
};
|
|
362
|
+
}, [grid]);
|
|
363
|
+
const [initialOption, setInitialOption] = react.useState({
|
|
364
|
+
aria: {
|
|
365
|
+
enabled: true
|
|
366
|
+
},
|
|
367
|
+
animation: false,
|
|
368
|
+
...chartDataset,
|
|
369
|
+
...chartXAxis,
|
|
370
|
+
...chartYAxis,
|
|
371
|
+
...chartSeries,
|
|
372
|
+
...chartTooltip,
|
|
373
|
+
...chartLegend,
|
|
374
|
+
...chartHorizontalRangerSlider,
|
|
375
|
+
...chartGrid
|
|
376
|
+
});
|
|
377
|
+
react.useEffect(() => {
|
|
378
|
+
var _a;
|
|
379
|
+
if (!isMounted.current) {
|
|
380
|
+
isMounted.current = true;
|
|
381
|
+
return;
|
|
382
|
+
}
|
|
383
|
+
if (theme !== currentTheme.current) {
|
|
384
|
+
setInitialOption({
|
|
385
|
+
aria: {
|
|
386
|
+
enabled: true
|
|
387
|
+
},
|
|
388
|
+
animation: false,
|
|
389
|
+
...chartDataset,
|
|
390
|
+
...chartXAxis,
|
|
391
|
+
...chartYAxis,
|
|
392
|
+
...chartSeries,
|
|
393
|
+
...chartTooltip,
|
|
394
|
+
...chartLegend,
|
|
395
|
+
...chartHorizontalRangerSlider,
|
|
396
|
+
...chartGrid
|
|
397
|
+
});
|
|
398
|
+
currentTheme.current = theme;
|
|
399
|
+
return;
|
|
400
|
+
}
|
|
401
|
+
(_a = chartRef.current) == null ? void 0 : _a.getEchartsInstance().setOption({
|
|
402
|
+
...chartDataset,
|
|
403
|
+
...chartXAxis,
|
|
404
|
+
...chartYAxis,
|
|
405
|
+
...chartSeries,
|
|
406
|
+
...chartLegend,
|
|
407
|
+
...chartTooltip,
|
|
408
|
+
...chartHorizontalRangerSlider,
|
|
409
|
+
...chartGrid
|
|
410
|
+
}, {
|
|
411
|
+
replaceMerge: ["xAxis", "yAxis", "series", "dataset"]
|
|
412
|
+
});
|
|
413
|
+
}, [theme, chartDataset, chartXAxis, chartYAxis, chartSeries, chartLegend, chartTooltip, chartHorizontalRangerSlider, chartGrid]);
|
|
414
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ReactECharts__default.default, {
|
|
415
|
+
ref: chartRef,
|
|
416
|
+
echarts: echarts__namespace,
|
|
417
|
+
option: initialOption,
|
|
418
|
+
theme,
|
|
419
|
+
notMerge: true
|
|
420
|
+
});
|
|
421
|
+
};
|
|
422
|
+
exports.HvBaseChart = HvBaseChart;
|
|
423
|
+
//# sourceMappingURL=BaseChart.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BaseChart.cjs","sources":["../../../../src/components/BaseChart/BaseChart.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport {\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n AriaComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n} from \"echarts/components\";\nimport { CanvasRenderer } from \"echarts/renderers\";\nimport * as echarts from \"echarts/core\";\nimport {\n BarChart,\n BarSeriesOption,\n LineChart,\n LineSeriesOption,\n} from \"echarts/charts\";\nimport type { YAXisComponentOption } from \"echarts/types/dist/echarts\";\n\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { from, internal, not, table, desc } from \"arquero\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { ExtractNames, Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvChartAggregation,\n HvChartOrder,\n HvChartAxis,\n HvChartEmptyCellMode,\n HvChartSampling,\n HvChartTooltip,\n HvChartTooltipParams,\n HvChartGrid,\n} from \"@viz/types\";\nimport { getAgFunc, getAxisType, getLegendIcon } from \"@viz/utils\";\nimport { useVizTheme } from \"@viz/hooks\";\nimport { useClasses } from \"./BaseChart.styles\";\n\n// Register chart components\necharts.use([\n BarChart,\n LineChart,\n CanvasRenderer,\n DatasetComponent,\n GridComponent,\n AriaComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n]);\n\nexport type HvBaseChartClasses = Partial<ExtractNames<typeof useClasses>>;\n\ntype GroupByField = string;\ntype SplitByField = string;\n\ntype FullSortByField = {\n /** Column name. */\n field: string;\n /** Order function to use. If no `order` is defined, it will default to `asc`. */\n order?: HvChartOrder;\n};\ntype SortByField = string | FullSortByField;\n\ninterface BaseFullMeasuresField {\n /** Column name. */\n field: string;\n /** Sampling function to use. */\n sampling?: HvChartSampling;\n /** Id of the yAxis. */\n yAxis?: string;\n /** Aggregation function to use. If no `agg` is defined, it will default to `sum`. */\n agg?: HvChartAggregation;\n /**\n * Stack name to use when the measure should be stacked.\n *\n * Measures stacked together have the same name.\n *\n * If not specified, it defaults to the global `stacked` prop.\n */\n stack?: string;\n /** Strategy to use when there are empty cells. If not specified, it defaults to the global `emptyCellMode` prop. */\n valueFormatter?: (value?: string | number) => string;\n}\n\ninterface LineFullMeasuresField extends BaseFullMeasuresField {\n /** Whether to hide the symbol for data points. Defaults to `false`. */\n hideSymbol?: boolean;\n /** Whether the area under the lines should be filled. If not specified, it defaults to the global `area` prop. */\n area?: boolean;\n /** Sets opacity of the filled area if `area` is true. If not specified, it defaults to the global `areaOpacity` prop. */\n areaOpacity?: number;\n /** Strategy to use when there are empty cells. If not specified, it defaults to the global `emptyCellMode` prop. */\n emptyCellMode?: HvChartEmptyCellMode;\n}\n\ntype LineMeasuresField = string | LineFullMeasuresField;\n\ntype BarMeasuresField = string | BaseFullMeasuresField;\n\n/** Line and bar chart common props */\nexport interface HvBaseChartCommonProps {\n /** Chart data. */\n data:\n | Map<string | number, (string | number)[]>\n | Record<string | number, (string | number)[]>\n | Record<string | number, string | number>[]\n | ColumnTable;\n /** Columns to use to group the data. */\n groupBy: Arrayable<GroupByField>;\n /** Columns to use to split the measures. */\n splitBy?: Arrayable<SplitByField>;\n /** Columns to use to sort the data points. */\n sortBy?: Arrayable<SortByField>;\n /** Options for the xAxis, i.e. the horizontal axis. */\n xAxis?: HvChartAxis;\n /** Options for the yAxis, i.e. the vertical axis. */\n yAxis?: HvChartAxis | [HvChartAxis, HvChartAxis];\n /** Tooltip options. */\n tooltip?: HvChartTooltip;\n /** Legend options. */\n legend?: {\n /** Whether to show the legend or not. The legend will appear by default for multiple series. Otherwise, the legend will not be shown. */\n show?: boolean;\n };\n /** Formatter for the series names used on the tooltips and legend. */\n seriesNameFormatter?: (value?: string) => string;\n /** Stack name to use when all the series should be stacked together. If not provided, the series are not stacked. */\n stack?: string;\n /** Ranger slider options for the horizontal axis. */\n horizontalRangeSlider?: {\n /** Whether to show the ranger slider or not. Defaults to `false`. */\n show?: boolean;\n };\n /** Grid options. */\n grid?: HvChartGrid;\n}\n\n/** Line chart props only */\nexport interface HvBaseChartLineProps {\n /** Columns to measure on the chart. */\n measures: Arrayable<LineMeasuresField>;\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}\n\n/** Bar chart props only */\nexport interface HvBaseChartBarProps {\n /** Columns to measure on the chart. */\n measures: Arrayable<BarMeasuresField>;\n /** Whether the bar chart should be horizontal. Defaults to `false`. */\n horizontal?: boolean;\n}\n\n/** Base chart only props */\ninterface HvBaseChartOnlyProps {\n /** Chart type. */\n type: \"line\" | \"bar\";\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvBaseChartClasses;\n}\n\nexport interface HvBaseChartProps\n extends HvBaseChartCommonProps,\n Omit<HvBaseChartLineProps, \"measures\">,\n Omit<HvBaseChartBarProps, \"measures\">,\n HvBaseChartOnlyProps {\n /** Columns to measure on the chart. */\n measures: Arrayable<string | (BaseFullMeasuresField & LineFullMeasuresField)>;\n}\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}\n\n/**\n * Base chart for the line and bar chart.\n */\nexport const HvBaseChart = ({\n type,\n data,\n groupBy,\n splitBy,\n measures,\n sortBy,\n xAxis,\n yAxis,\n legend,\n tooltip,\n seriesNameFormatter,\n area = false,\n stack,\n emptyCellMode = \"void\",\n horizontalRangeSlider,\n areaOpacity = 0.5,\n classes: classesProp = {},\n grid,\n horizontal = false,\n}: HvBaseChartProps) => {\n const { theme } = useVizTheme();\n const { classes } = useClasses(classesProp);\n\n const currentTheme = useRef<string | undefined>(theme);\n const chartRef = useRef<ReactECharts>(null);\n const isMounted = useRef<boolean>(false);\n\n const groupByKey = Array.isArray(groupBy) ? groupBy.join(\"_\") : 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(measures.agg ?? \"sum\", measures.field),\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 // 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, groupByKey, splitBy, measures, sortBy]);\n\n const chartDataset = useMemo<Pick<EChartsOption, \"dataset\">>(() => {\n return {\n dataset: {\n source: chartData.columnNames().reduce(\n (acc, c) => ({\n ...acc,\n [c]: chartData.array(c),\n }),\n {}\n ),\n },\n };\n }, [chartData]);\n\n const chartXAxis = useMemo<Pick<EChartsOption, \"xAxis\">>(() => {\n return {\n xAxis: {\n id: xAxis?.id,\n type: getAxisType(xAxis?.type) ?? (horizontal ? \"value\" : \"category\"),\n name: xAxis?.name,\n scale: !(type === \"bar\"),\n axisLabel: {\n rotate: xAxis?.labelRotation ?? 0,\n formatter: xAxis?.labelFormatter,\n },\n max: xAxis?.maxValue === \"max\" ? \"dataMax\" : xAxis?.maxValue,\n min: xAxis?.minValue === \"min\" ? \"dataMin\" : xAxis?.minValue,\n },\n };\n }, [xAxis, type, horizontal]);\n\n const chartYAxis = useMemo<Pick<EChartsOption, \"yAxis\">>(() => {\n if (!yAxis || !Array.isArray(yAxis)) {\n return {\n yAxis: {\n id: yAxis?.id,\n type: getAxisType(yAxis?.type) ?? (horizontal ? \"category\" : \"value\"),\n name: yAxis?.name,\n axisLabel: {\n rotate: yAxis?.labelRotation ?? 0,\n formatter: yAxis?.labelFormatter,\n },\n max: yAxis?.maxValue === \"max\" ? \"dataMax\" : yAxis?.maxValue,\n min: yAxis?.minValue === \"min\" ? \"dataMin\" : yAxis?.minValue,\n },\n };\n }\n\n return {\n yAxis: yAxis.map<YAXisComponentOption>((axis) => ({\n id: axis?.id,\n type: getAxisType(axis?.type) ?? \"value\",\n name: axis?.name,\n axisLabel: {\n rotate: axis?.labelRotation ?? 0,\n formatter: axis?.labelFormatter,\n },\n max: axis?.maxValue === \"max\" ? \"dataMax\" : axis?.maxValue,\n min: axis?.minValue === \"min\" ? \"dataMin\" : axis?.minValue,\n })),\n };\n }, [yAxis, horizontal]);\n\n const getMeasure = (name: string, msr: HvBaseChartProps[\"measures\"]) => {\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\n const chartSeries = useMemo<Pick<EChartsOption, \"series\">>(() => {\n return {\n series: chartData\n .columnNames()\n .filter((c) => c !== groupByKey)\n .map<LineSeriesOption | BarSeriesOption>((c) => {\n const measure = getMeasure(c, measures);\n\n const showSymbol =\n typeof measure !== \"string\" ? !measure.hideSymbol : true;\n const sampling =\n typeof measure !== \"string\" ? measure.sampling : undefined;\n const yAxisId =\n typeof measure !== \"string\" ? measure.yAxis : undefined;\n const isArea =\n typeof measure !== \"string\" ? measure.area ?? area : area;\n const aOpacity =\n typeof measure !== \"string\"\n ? measure.areaOpacity ?? areaOpacity\n : areaOpacity;\n const stackName =\n typeof measure !== \"string\"\n ? measure.stack ?? stack ?? undefined\n : stack ?? undefined;\n const connectNulls =\n typeof measure !== \"string\" && measure.emptyCellMode\n ? measure.emptyCellMode === \"connect\"\n : emptyCellMode === \"connect\";\n\n return {\n id: `series~${groupByKey}~${c}`,\n name: seriesNameFormatter ? seriesNameFormatter(c) : c,\n encode: horizontal\n ? {\n x: c,\n y: groupByKey,\n }\n : {\n x: groupByKey,\n y: c,\n },\n type,\n showSymbol,\n sampling,\n areaStyle: isArea ? { opacity: aOpacity } : undefined,\n connectNulls,\n stack: stackName,\n yAxisId,\n barMaxWidth: 90,\n barMinWidth: 3,\n };\n }),\n };\n }, [\n chartData,\n groupByKey,\n area,\n stack,\n seriesNameFormatter,\n emptyCellMode,\n areaOpacity,\n measures,\n type,\n horizontal,\n ]);\n\n const renderTooltip = (\n params: EChartsTooltipParams[],\n single: boolean,\n msr: HvBaseChartProps[\"measures\"],\n reverse: boolean,\n cls?: typeof classes,\n valueFormatter?: (value?: string | number) => string,\n titleFormatter?: (value?: string | number) => string\n ) => {\n const title = reverse\n ? params[0].value[params[0].encode.y[0]]\n : params[0].value[params[0].encode.x[0]];\n const formattedTitle = titleFormatter ? titleFormatter(title) : title;\n\n if (single) {\n const measure = getMeasure(\n reverse\n ? params[0].dimensionNames[params[0].encode.x[0]]\n : params[0].dimensionNames[params[0].encode.y[0]],\n msr\n );\n const value = reverse\n ? params[0].value[params[0].encode.x[0]]\n : params[0].value[params[0].encode.y[0]];\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=\"${cls?.singleTooltipRoot}\">\n <p class=\"${cls?.singleTooltipTitle}\">${formattedTitle}</p>\n <p class=\"${cls?.singleTooltipValue}\">${formattedValue}</p>\n </div>\n `;\n }\n\n return `\n <div class=\"${cls?.multipleTooltipRoot}\">\n <div class=\"${cls?.multipleTooltipTitleContainer}\">\n <div>\n <p class=\"${cls?.multipleTooltipTitle}\">${formattedTitle}</p>\n </div>\n </div>\n <div class=\"${cls?.multipleTooltipValuesContainer}\">\n ${params\n .map((s) => {\n const measure = getMeasure(\n reverse\n ? s.dimensionNames[s.encode.x[0]]\n : s.dimensionNames[s.encode.y[0]],\n msr\n );\n const value = reverse\n ? s.value[s.encode.x[0]]\n : s.value[s.encode.y[0]];\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 key=\"${s.seriesName}\" class=\"${cls?.multipleTooltipSeriesContainer}\">\n <div class=\"${cls?.multipleTooltipSeriesNameContainer}\">\n <p style=\"background-color: ${s.color};\" class=\"${cls?.multipleTooltipSeriesColor}\" />\n <p class=\"${cls?.multipleTooltipSeriesName}\">${s.seriesName}</p>\n </div>\n <p class=\"${cls?.multipleTooltipSeriesValue}\">${formattedValue}</p>\n </div>\n `;\n })\n .join(\" \")}\n </div>\n </div>\n `;\n };\n\n const renderCustomTooltip = (\n params: EChartsTooltipParams[],\n reverse: boolean,\n customTooltip: Required<HvChartTooltip[\"component\"]>\n ) => {\n if (typeof customTooltip === \"function\") {\n const values: HvChartTooltipParams = {\n title: reverse\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: p.seriesName,\n value: reverse ? p.value[p.encode.x[0]] : p.value[p.encode.y[0]],\n };\n }),\n };\n\n return customTooltip(values);\n }\n\n return customTooltip;\n };\n\n const chartTooltip = useMemo<Pick<EChartsOption, \"tooltip\">>(() => {\n return {\n tooltip: {\n confine: false,\n show: tooltip?.show ?? true,\n trigger: \"axis\",\n position: (point, params, dom, rect, size) => {\n return [point[0], point[1] - size.contentSize[1]];\n },\n formatter: (params) =>\n tooltip?.component\n ? renderCustomTooltip(params, horizontal, tooltip.component)\n : renderTooltip(\n params,\n tooltip?.type === \"single\",\n measures,\n horizontal,\n classes,\n tooltip?.valueFormatter,\n tooltip?.titleFormatter\n ),\n },\n };\n }, [tooltip, classes, measures, horizontal]);\n\n const chartLegend = useMemo<Pick<EChartsOption, \"legend\">>(() => {\n return {\n legend: {\n show:\n legend?.show ??\n (Array.isArray(chartSeries.series) && chartSeries.series.length > 1),\n itemGap: 20,\n data:\n legend?.show !== false && Array.isArray(chartSeries.series)\n ? chartSeries.series.map((s) => {\n return {\n name: s.name as string,\n icon: getLegendIcon(\n (s as any).areaStyle != null || s.type === \"bar\"\n ),\n };\n })\n : undefined,\n },\n };\n }, [chartSeries, legend]);\n\n const chartHorizontalRangerSlider = useMemo<\n Pick<EChartsOption, \"dataZoom\">\n >(() => {\n return {\n dataZoom: [\n {\n show: horizontalRangeSlider?.show ?? false,\n type: \"slider\",\n orient: \"horizontal\",\n },\n {\n show: horizontalRangeSlider?.show ?? false,\n type: \"inside\",\n orient: \"horizontal\",\n zoomOnMouseWheel: \"shift\",\n moveOnMouseWheel: true,\n },\n ],\n };\n }, [horizontalRangeSlider]);\n\n const chartGrid = useMemo(() => {\n return {\n // if no value is defined we shouldn't pass anything because echarts doesn't behave well otherwise\n grid: {\n ...(grid?.top != null && {\n top: grid.top,\n }),\n ...(grid?.bottom != null && {\n bottom: grid.bottom,\n }),\n ...(grid?.left != null && {\n left: grid.left,\n }),\n ...(grid?.right != null && {\n right: grid.right,\n }),\n },\n };\n }, [grid]);\n\n const [initialOption, setInitialOption] = useState<EChartsOption>({\n aria: {\n enabled: true,\n },\n animation: false,\n ...chartDataset,\n ...chartXAxis,\n ...chartYAxis,\n ...chartSeries,\n ...chartTooltip,\n ...chartLegend,\n ...chartHorizontalRangerSlider,\n ...chartGrid,\n });\n\n useEffect(() => {\n if (!isMounted.current) {\n isMounted.current = true;\n return;\n }\n\n // when the theme changes echarts destroys the chart and mounts it again\n // thus we need to reset the initial option\n if (theme !== currentTheme.current) {\n setInitialOption({\n aria: {\n enabled: true,\n },\n animation: false,\n ...chartDataset,\n ...chartXAxis,\n ...chartYAxis,\n ...chartSeries,\n ...chartTooltip,\n ...chartLegend,\n ...chartHorizontalRangerSlider,\n ...chartGrid,\n });\n currentTheme.current = theme;\n return;\n }\n\n chartRef.current?.getEchartsInstance().setOption(\n {\n ...chartDataset,\n ...chartXAxis,\n ...chartYAxis,\n ...chartSeries,\n ...chartLegend,\n ...chartTooltip,\n ...chartHorizontalRangerSlider,\n ...chartGrid,\n },\n {\n replaceMerge: [\"xAxis\", \"yAxis\", \"series\", \"dataset\"],\n }\n );\n }, [\n theme,\n chartDataset,\n chartXAxis,\n chartYAxis,\n chartSeries,\n chartLegend,\n chartTooltip,\n chartHorizontalRangerSlider,\n chartGrid,\n ]);\n\n return (\n <ReactECharts\n ref={chartRef}\n echarts={echarts}\n option={initialOption}\n theme={theme}\n notMerge\n />\n );\n};\n"],"names":["echarts","use","BarChart","LineChart","CanvasRenderer","DatasetComponent","GridComponent","AriaComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","HvBaseChart","type","data","groupBy","splitBy","measures","sortBy","xAxis","yAxis","legend","tooltip","seriesNameFormatter","area","stack","emptyCellMode","horizontalRangeSlider","areaOpacity","classes","classesProp","grid","horizontal","theme","useVizTheme","useClasses","currentTheme","useRef","chartRef","isMounted","groupByKey","Array","isArray","join","chartData","useMemo","tableData","internal","ColumnTable","from","table","groupByFields","splitByFields","measuresFields","getAgFunc","reduce","acc","value","field","agFunction","agg","sortByFields","orderFunction","order","allFields","Object","keys","select","length","groupby","pivot","rollup","expression","map","derive","after","orderby","filter","key","includes","desc","not","chartDataset","dataset","source","columnNames","c","array","chartXAxis","id","getAxisType","name","scale","axisLabel","rotate","labelRotation","formatter","labelFormatter","max","maxValue","min","minValue","chartYAxis","axis","getMeasure","msr","measureName","split","measuresArray","find","m","chartSeries","series","measure","showSymbol","hideSymbol","sampling","undefined","yAxisId","isArea","aOpacity","stackName","connectNulls","encode","x","y","areaStyle","opacity","barMaxWidth","barMinWidth","renderTooltip","params","single","reverse","cls","valueFormatter","titleFormatter","title","formattedTitle","dimensionNames","formattedValue","singleTooltipRoot","singleTooltipTitle","singleTooltipValue","multipleTooltipRoot","multipleTooltipTitleContainer","multipleTooltipTitle","multipleTooltipValuesContainer","s","seriesName","multipleTooltipSeriesContainer","multipleTooltipSeriesNameContainer","color","multipleTooltipSeriesColor","multipleTooltipSeriesName","multipleTooltipSeriesValue","renderCustomTooltip","customTooltip","values","p","chartTooltip","confine","show","trigger","position","point","dom","rect","size","contentSize","component","chartLegend","itemGap","icon","getLegendIcon","chartHorizontalRangerSlider","dataZoom","orient","zoomOnMouseWheel","moveOnMouseWheel","chartGrid","top","bottom","left","right","initialOption","setInitialOption","useState","aria","enabled","animation","useEffect","current","getEchartsInstance","setOption","replaceMerge","ReactECharts","ref","option","notMerge"],"mappings":"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"}
|
package/dist/cjs/components/{LineChart/LineChart.styles.cjs → BaseChart/BaseChart.styles.cjs}
RENAMED
|
@@ -4,7 +4,7 @@ const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
|
4
4
|
const {
|
|
5
5
|
useClasses,
|
|
6
6
|
staticClasses
|
|
7
|
-
} = uikitReactCore.createClasses("
|
|
7
|
+
} = uikitReactCore.createClasses("HvBaseChart", {
|
|
8
8
|
/** Single tooltip styles */
|
|
9
9
|
singleTooltipRoot: {
|
|
10
10
|
width: "fit-content",
|
|
@@ -82,4 +82,4 @@ const {
|
|
|
82
82
|
});
|
|
83
83
|
exports.staticClasses = staticClasses;
|
|
84
84
|
exports.useClasses = useClasses;
|
|
85
|
-
//# sourceMappingURL=
|
|
85
|
+
//# sourceMappingURL=BaseChart.styles.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"BaseChart.styles.cjs","sources":["../../../../src/components/BaseChart/BaseChart.styles.tsx"],"sourcesContent":["import { theme, createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBaseChart\", {\n /** Single tooltip styles */\n singleTooltipRoot: {\n width: \"fit-content\",\n boxShadow: theme.colors.shadow,\n backgroundColor: theme.colors.atmo1,\n padding: theme.space.sm,\n display: \"flex\",\n },\n singleTooltipTitle: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.semibold,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n singleTooltipValue: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.normal,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n marginLeft: theme.space.xs,\n },\n /** Multiple tooltip styles */\n multipleTooltipRoot: {\n width: \"fit-content\",\n boxShadow: theme.colors.shadow,\n backgroundColor: theme.colors.atmo1,\n },\n multipleTooltipTitleContainer: {\n padding: `15px ${theme.space.sm}`,\n borderBottom: `3px solid ${theme.colors.atmo2}`,\n },\n multipleTooltipTitle: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.semibold,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n multipleTooltipValuesContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n\n \"& > *:not(:last-child)\": { paddingBottom: theme.space.sm },\n },\n multipleTooltipSeriesContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n multipleTooltipSeriesNameContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n marginRight: theme.space.sm,\n },\n multipleTooltipSeriesColor: {\n width: \"10px\",\n height: \"10px\",\n marginRight: \"5px\",\n },\n multipleTooltipSeriesName: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.semibold,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n multipleTooltipSeriesValue: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.normal,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n});\n"],"names":["useClasses","staticClasses","createClasses","singleTooltipRoot","width","boxShadow","theme","colors","shadow","backgroundColor","atmo1","padding","space","sm","display","singleTooltipTitle","fontFamily","body","fontWeight","fontWeights","semibold","fontSize","fontSizes","color","secondary","singleTooltipValue","normal","marginLeft","xs","multipleTooltipRoot","multipleTooltipTitleContainer","borderBottom","atmo2","multipleTooltipTitle","multipleTooltipValuesContainer","flexDirection","paddingBottom","multipleTooltipSeriesContainer","justifyContent","alignItems","multipleTooltipSeriesNameContainer","marginRight","multipleTooltipSeriesColor","height","multipleTooltipSeriesName","multipleTooltipSeriesValue"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,eAAAA,cAAc,eAAe;AAAA;AAAA,EAExEC,mBAAmB;AAAA,IACjBC,OAAO;AAAA,IACPC,WAAWC,eAAAA,MAAMC,OAAOC;AAAAA,IACxBC,iBAAiBH,eAAAA,MAAMC,OAAOG;AAAAA,IAC9BC,SAASL,eAAAA,MAAMM,MAAMC;AAAAA,IACrBC,SAAS;AAAA,EACX;AAAA,EACAC,oBAAoB;AAAA,IAClBC,YAAYV,eAAAA,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,eAAAA,MAAMa,YAAYC;AAAAA,IAC9BC,UAAUf,eAAAA,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,eAAAA,MAAMC,OAAOiB;AAAAA,EACtB;AAAA,EACAC,oBAAoB;AAAA,IAClBT,YAAYV,eAAAA,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,eAAAA,MAAMa,YAAYO;AAAAA,IAC9BL,UAAUf,eAAAA,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,eAAAA,MAAMC,OAAOiB;AAAAA,IACpBG,YAAYrB,eAAAA,MAAMM,MAAMgB;AAAAA,EAC1B;AAAA;AAAA,EAEAC,qBAAqB;AAAA,IACnBzB,OAAO;AAAA,IACPC,WAAWC,eAAAA,MAAMC,OAAOC;AAAAA,IACxBC,iBAAiBH,eAAAA,MAAMC,OAAOG;AAAAA,EAChC;AAAA,EACAoB,+BAA+B;AAAA,IAC7BnB,SAAU,QAAOL,eAAAA,MAAMM,MAAMC;AAAAA,IAC7BkB,cAAe,aAAYzB,eAAAA,MAAMC,OAAOyB;AAAAA,EAC1C;AAAA,EACAC,sBAAsB;AAAA,IACpBjB,YAAYV,eAAAA,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,eAAAA,MAAMa,YAAYC;AAAAA,IAC9BC,UAAUf,eAAAA,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,eAAAA,MAAMC,OAAOiB;AAAAA,EACtB;AAAA,EACAU,gCAAgC;AAAA,IAC9BpB,SAAS;AAAA,IACTqB,eAAe;AAAA,IACfxB,SAASL,eAAAA,MAAMM,MAAMC;AAAAA,IAErB,0BAA0B;AAAA,MAAEuB,eAAe9B,eAAAA,MAAMM,MAAMC;AAAAA,IAAG;AAAA,EAC5D;AAAA,EACAwB,gCAAgC;AAAA,IAC9BvB,SAAS;AAAA,IACTqB,eAAe;AAAA,IACfG,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,oCAAoC;AAAA,IAClC1B,SAAS;AAAA,IACTqB,eAAe;AAAA,IACfI,YAAY;AAAA,IACZE,aAAanC,eAAAA,MAAMM,MAAMC;AAAAA,EAC3B;AAAA,EACA6B,4BAA4B;AAAA,IAC1BtC,OAAO;AAAA,IACPuC,QAAQ;AAAA,IACRF,aAAa;AAAA,EACf;AAAA,EACAG,2BAA2B;AAAA,IACzB5B,YAAYV,eAAAA,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,eAAAA,MAAMa,YAAYC;AAAAA,IAC9BC,UAAUf,eAAAA,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,eAAAA,MAAMC,OAAOiB;AAAAA,EACtB;AAAA,EACAqB,4BAA4B;AAAA,IAC1B7B,YAAYV,eAAAA,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,eAAAA,MAAMa,YAAYO;AAAAA,IAC9BL,UAAUf,eAAAA,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,eAAAA,MAAMC,OAAOiB;AAAAA,EACtB;AACF,CAAC;;;"}
|