@apia/charts 2.0.7 → 2.0.8
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/charts/chartJsRenderer/ChartComponent.d.ts +22 -0
- package/dist/charts/chartJsRenderer/ChartComponent.d.ts.map +1 -0
- package/dist/charts/chartJsRenderer/ChartComponent.js +244 -0
- package/dist/charts/chartJsRenderer/ChartComponent.js.map +1 -0
- package/dist/charts/types.d.ts +2 -17
- package/dist/index.d.ts +3 -4
- package/dist/index.js +2 -3
- package/dist/index.js.map +1 -1
- package/dist/widgets/WidgetComponent.d.ts +10 -0
- package/dist/widgets/WidgetComponent.d.ts.map +1 -0
- package/dist/widgets/WidgetComponent.js +54 -0
- package/dist/widgets/WidgetComponent.js.map +1 -0
- package/dist/widgets/counter/Counter.js +8 -8
- package/dist/widgets/counter/Counter.js.map +1 -1
- package/dist/widgets/custom/useCustomWidget.js +3 -3
- package/dist/widgets/custom/useCustomWidget.js.map +1 -1
- package/dist/widgets/custom/util.js.map +1 -1
- package/dist/widgets/oxford/Oxford.js +3 -1
- package/dist/widgets/oxford/Oxford.js.map +1 -1
- package/dist/widgets/ring/Ring.js +4 -4
- package/dist/widgets/ring/Ring.js.map +1 -1
- package/dist/widgets/scale/Scale.js.map +1 -1
- package/dist/widgets/speedMeter/SpeedMeter.js +3 -1
- package/dist/widgets/speedMeter/SpeedMeter.js.map +1 -1
- package/dist/widgets/tLight/TLight.js +4 -4
- package/dist/widgets/tLight/TLight.js.map +1 -1
- package/dist/widgets/thermometer/Thermometer.js +7 -5
- package/dist/widgets/thermometer/Thermometer.js.map +1 -1
- package/dist/widgets/thermometer/util.js +4 -1
- package/dist/widgets/thermometer/util.js.map +1 -1
- package/dist/widgets/types.d.ts +66 -1
- package/package.json +8 -6
- package/dist/charts/ChartContext.js +0 -6
- package/dist/charts/ChartContext.js.map +0 -1
- package/dist/charts/ChartRenderer.d.ts +0 -17
- package/dist/charts/ChartRenderer.d.ts.map +0 -1
- package/dist/charts/ChartRenderer.js +0 -175
- package/dist/charts/ChartRenderer.js.map +0 -1
- package/dist/charts/horizontalBars/Bar.js +0 -228
- package/dist/charts/horizontalBars/Bar.js.map +0 -1
- package/dist/charts/horizontalBars/HorizontalBars.js +0 -374
- package/dist/charts/horizontalBars/HorizontalBars.js.map +0 -1
- package/dist/charts/linear/LineChart.js +0 -469
- package/dist/charts/linear/LineChart.js.map +0 -1
- package/dist/charts/linear/Node.js +0 -56
- package/dist/charts/linear/Node.js.map +0 -1
- package/dist/charts/pie/Pie.js +0 -183
- package/dist/charts/pie/Pie.js.map +0 -1
- package/dist/charts/pie/Slice.js +0 -96
- package/dist/charts/pie/Slice.js.map +0 -1
- package/dist/charts/pie/usePieAnimation.js +0 -123
- package/dist/charts/pie/usePieAnimation.js.map +0 -1
- package/dist/charts/util/ChartSelector.js +0 -36
- package/dist/charts/util/ChartSelector.js.map +0 -1
- package/dist/charts/util/ColoredLegendItem.js +0 -46
- package/dist/charts/util/ColoredLegendItem.js.map +0 -1
- package/dist/charts/util/EmptyGrid.d.ts +0 -8
- package/dist/charts/util/EmptyGrid.d.ts.map +0 -1
- package/dist/charts/util/EmptyGrid.js +0 -51
- package/dist/charts/util/EmptyGrid.js.map +0 -1
- package/dist/charts/util/LegendContainer.js +0 -54
- package/dist/charts/util/LegendContainer.js.map +0 -1
- package/dist/charts/util/NumberedLegendItem.js +0 -45
- package/dist/charts/util/NumberedLegendItem.js.map +0 -1
- package/dist/charts/util/getBarColor.js +0 -29
- package/dist/charts/util/getBarColor.js.map +0 -1
- package/dist/charts/util/parseMargin.js +0 -11
- package/dist/charts/util/parseMargin.js.map +0 -1
- package/dist/charts/util/useChartStyles.js +0 -35
- package/dist/charts/util/useChartStyles.js.map +0 -1
- package/dist/charts/verticalBars/Bar.js +0 -241
- package/dist/charts/verticalBars/Bar.js.map +0 -1
- package/dist/charts/verticalBars/VerticalBars.js +0 -394
- package/dist/charts/verticalBars/VerticalBars.js.map +0 -1
- package/dist/charts/waterfallBars/WaterfallBar.js +0 -84
- package/dist/charts/waterfallBars/WaterfallBar.js.map +0 -1
- package/dist/charts/waterfallBars/WaterfallBars.js +0 -247
- package/dist/charts/waterfallBars/WaterfallBars.js.map +0 -1
- package/dist/widgets/WidgetContainer.d.ts +0 -10
- package/dist/widgets/WidgetContainer.d.ts.map +0 -1
- package/dist/widgets/WidgetContainer.js +0 -68
- package/dist/widgets/WidgetContainer.js.map +0 -1
|
@@ -1,394 +0,0 @@
|
|
|
1
|
-
import { jsxs, Fragment, jsx } from '@apia/theme/jsx-runtime';
|
|
2
|
-
import uniqueId from 'lodash-es/uniqueId';
|
|
3
|
-
import { arrayOrArray, usePanAndZoom, getLabel } from '@apia/util';
|
|
4
|
-
import { parseMargin } from '../util/parseMargin.js';
|
|
5
|
-
import { scaleBand, scaleLog, scaleLinear, scaleOrdinal } from '@visx/scale';
|
|
6
|
-
import { useMemo, useLayoutEffect } from 'react';
|
|
7
|
-
import { Box, Heading } from '@apia/theme';
|
|
8
|
-
import { Grid } from '@visx/visx';
|
|
9
|
-
import { Group } from '@visx/group';
|
|
10
|
-
import { BarGroup } from '@visx/shape';
|
|
11
|
-
import { AxisLeft, AxisBottom } from '@visx/axis';
|
|
12
|
-
import { useChartStyles } from '../util/useChartStyles.js';
|
|
13
|
-
import { Bar } from './Bar.js';
|
|
14
|
-
import { getBarColor } from '../util/getBarColor.js';
|
|
15
|
-
import { LegendContainer } from '../util/LegendContainer.js';
|
|
16
|
-
|
|
17
|
-
function adjustDimensions({
|
|
18
|
-
width,
|
|
19
|
-
height,
|
|
20
|
-
maxWidth
|
|
21
|
-
}) {
|
|
22
|
-
if (width <= maxWidth) {
|
|
23
|
-
return { width, height };
|
|
24
|
-
}
|
|
25
|
-
const ratio = width / height;
|
|
26
|
-
const newWidth = maxWidth;
|
|
27
|
-
const newHeight = Math.floor(newWidth / ratio);
|
|
28
|
-
return { width: newWidth, height: newHeight };
|
|
29
|
-
}
|
|
30
|
-
const getXValue = (d) => d.columnName;
|
|
31
|
-
const VerticalBars = ({
|
|
32
|
-
margin = { top: 20, left: 100, bottom: 24, right: 0 },
|
|
33
|
-
chart,
|
|
34
|
-
className,
|
|
35
|
-
chartId,
|
|
36
|
-
allowZoom
|
|
37
|
-
}) => {
|
|
38
|
-
const effectiveMargin = parseMargin(margin);
|
|
39
|
-
if (!chart.showAxisYTitle && effectiveMargin.left > 50) {
|
|
40
|
-
effectiveMargin.left = 50;
|
|
41
|
-
}
|
|
42
|
-
let innerWidth = chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;
|
|
43
|
-
let innerHeight = chart.ratio.height + (chart.showAxisXTitle ? -effectiveMargin.top - effectiveMargin.bottom : (-effectiveMargin.top - effectiveMargin.bottom) / 2);
|
|
44
|
-
if (innerWidth > chart.ratio.maxWidth) {
|
|
45
|
-
const newValues = adjustDimensions({
|
|
46
|
-
height: innerHeight,
|
|
47
|
-
width: innerWidth,
|
|
48
|
-
maxWidth: chart.ratio.maxWidth
|
|
49
|
-
});
|
|
50
|
-
innerWidth = newValues.width;
|
|
51
|
-
innerHeight = newValues.height;
|
|
52
|
-
}
|
|
53
|
-
const styles = useChartStyles(chart.colorSchema);
|
|
54
|
-
const columnas = arrayOrArray(chart.dataSets?.data).filter((column) => !!column.sets).map((column) => {
|
|
55
|
-
return {
|
|
56
|
-
...column,
|
|
57
|
-
sets: column.sets
|
|
58
|
-
};
|
|
59
|
-
});
|
|
60
|
-
const xValues = arrayOrArray(columnas[0].sets).map(
|
|
61
|
-
(innerCoord) => innerCoord.key
|
|
62
|
-
);
|
|
63
|
-
const columnNames = columnas.map((col) => {
|
|
64
|
-
return col.name;
|
|
65
|
-
});
|
|
66
|
-
const parsedData = xValues.map((x) => {
|
|
67
|
-
const obj = columnas.reduce(
|
|
68
|
-
(acc, column) => {
|
|
69
|
-
return {
|
|
70
|
-
...acc,
|
|
71
|
-
[column.name]: arrayOrArray(column.sets).filter((coord) => {
|
|
72
|
-
return coord.key === x;
|
|
73
|
-
})[0].value
|
|
74
|
-
};
|
|
75
|
-
},
|
|
76
|
-
{ columnName: x }
|
|
77
|
-
);
|
|
78
|
-
return obj;
|
|
79
|
-
});
|
|
80
|
-
const xScale = scaleBand({
|
|
81
|
-
range: [
|
|
82
|
-
typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.left,
|
|
83
|
-
chart.ratio.width
|
|
84
|
-
],
|
|
85
|
-
domain: parsedData.map(getXValue),
|
|
86
|
-
padding: 0.2
|
|
87
|
-
});
|
|
88
|
-
const numericXScale = scaleBand({
|
|
89
|
-
range: [
|
|
90
|
-
typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.left,
|
|
91
|
-
chart.ratio.width
|
|
92
|
-
],
|
|
93
|
-
domain: parsedData.map((_, i) => `${i + 1}`),
|
|
94
|
-
padding: 0.2
|
|
95
|
-
});
|
|
96
|
-
const columnGroupScale = scaleBand({
|
|
97
|
-
domain: columnNames,
|
|
98
|
-
range: [0, xScale.bandwidth()]
|
|
99
|
-
});
|
|
100
|
-
const yScaleLog = scaleLog({
|
|
101
|
-
range: [
|
|
102
|
-
innerHeight,
|
|
103
|
-
typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
|
|
104
|
-
],
|
|
105
|
-
domain: [
|
|
106
|
-
1,
|
|
107
|
-
Math.max(
|
|
108
|
-
...parsedData.map(
|
|
109
|
-
(d) => Math.max(...columnNames.map((key) => Number(d[key])))
|
|
110
|
-
)
|
|
111
|
-
)
|
|
112
|
-
],
|
|
113
|
-
base: 10
|
|
114
|
-
});
|
|
115
|
-
const yScaleLine = scaleLinear({
|
|
116
|
-
range: [
|
|
117
|
-
innerHeight,
|
|
118
|
-
typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
|
|
119
|
-
],
|
|
120
|
-
domain: [
|
|
121
|
-
0,
|
|
122
|
-
Math.max(
|
|
123
|
-
...parsedData.map(
|
|
124
|
-
(d) => Math.max(...columnNames.map((key) => Number(d[key])))
|
|
125
|
-
)
|
|
126
|
-
)
|
|
127
|
-
]
|
|
128
|
-
});
|
|
129
|
-
const color = scaleOrdinal({
|
|
130
|
-
domain: columnNames,
|
|
131
|
-
range: columnas.map((col) => col.color)
|
|
132
|
-
});
|
|
133
|
-
const isLogScale = false;
|
|
134
|
-
const yScale = useMemo(() => {
|
|
135
|
-
{
|
|
136
|
-
return yScaleLine;
|
|
137
|
-
}
|
|
138
|
-
}, [isLogScale, yScaleLine, yScaleLog]);
|
|
139
|
-
const id = useMemo(() => `VerticalBars${uniqueId()}`, []);
|
|
140
|
-
useLayoutEffect(() => {
|
|
141
|
-
document.querySelectorAll(`#${id} .tickLabel`).forEach((current) => {
|
|
142
|
-
const box = current.getBoundingClientRect();
|
|
143
|
-
if (box.width > 125) {
|
|
144
|
-
current.style.width = "125px";
|
|
145
|
-
current.style.overflow = "hidden";
|
|
146
|
-
current.style.textOverflow = "ellipsis";
|
|
147
|
-
current.style.whiteSpace = "nowrap";
|
|
148
|
-
}
|
|
149
|
-
current.style.transformOrigin = current.getAttribute("x") + "px 14px";
|
|
150
|
-
current.style.transform = `rotate(25deg)`;
|
|
151
|
-
});
|
|
152
|
-
});
|
|
153
|
-
const { boxRef, elementRef } = usePanAndZoom(
|
|
154
|
-
void 0,
|
|
155
|
-
!allowZoom
|
|
156
|
-
);
|
|
157
|
-
const setsWithColor = arrayOrArray(chart.dataSets.data).map((data, index) => {
|
|
158
|
-
const isSingle = arrayOrArray(chart.dataSets.data).length === 1;
|
|
159
|
-
const dataColor = data.color !== "" && data.color !== void 0 ? data.color : arrayOrArray(
|
|
160
|
-
styles ? styles.schema : [
|
|
161
|
-
"#7ad6f4",
|
|
162
|
-
"#45bdee",
|
|
163
|
-
"#28a7ea",
|
|
164
|
-
"#006cbb",
|
|
165
|
-
"#034698",
|
|
166
|
-
"#032f64"
|
|
167
|
-
]
|
|
168
|
-
).length > 0 ? getBarColor(
|
|
169
|
-
arrayOrArray(
|
|
170
|
-
styles ? styles.schema : [
|
|
171
|
-
"#7ad6f4",
|
|
172
|
-
"#45bdee",
|
|
173
|
-
"#28a7ea",
|
|
174
|
-
"#006cbb",
|
|
175
|
-
"#034698",
|
|
176
|
-
"#032f64"
|
|
177
|
-
]
|
|
178
|
-
),
|
|
179
|
-
index,
|
|
180
|
-
isSingle
|
|
181
|
-
) : "";
|
|
182
|
-
const returnColumnsArray = [];
|
|
183
|
-
arrayOrArray(data.sets).forEach((set) => {
|
|
184
|
-
if (set.color !== "" && set.color !== void 0) {
|
|
185
|
-
returnColumnsArray.push({ ...set, columnName: data.name });
|
|
186
|
-
} else {
|
|
187
|
-
returnColumnsArray.push({
|
|
188
|
-
...set,
|
|
189
|
-
color: dataColor,
|
|
190
|
-
columnName: data.name
|
|
191
|
-
});
|
|
192
|
-
}
|
|
193
|
-
});
|
|
194
|
-
return returnColumnsArray;
|
|
195
|
-
});
|
|
196
|
-
const colorReference = arrayOrArray(chart.dataSets.data).map(
|
|
197
|
-
(data, index) => {
|
|
198
|
-
const isSingle = arrayOrArray(chart.dataSets.data).length === 1;
|
|
199
|
-
const dataColor = data.color !== "" && data.color !== void 0 ? data.color : arrayOrArray(
|
|
200
|
-
styles ? styles.schema : [
|
|
201
|
-
"#7ad6f4",
|
|
202
|
-
"#45bdee",
|
|
203
|
-
"#28a7ea",
|
|
204
|
-
"#006cbb",
|
|
205
|
-
"#034698",
|
|
206
|
-
"#032f64"
|
|
207
|
-
]
|
|
208
|
-
).length > 0 ? getBarColor(
|
|
209
|
-
arrayOrArray(
|
|
210
|
-
styles ? styles.schema : [
|
|
211
|
-
"#7ad6f4",
|
|
212
|
-
"#45bdee",
|
|
213
|
-
"#28a7ea",
|
|
214
|
-
"#006cbb",
|
|
215
|
-
"#034698",
|
|
216
|
-
"#032f64"
|
|
217
|
-
]
|
|
218
|
-
),
|
|
219
|
-
index,
|
|
220
|
-
isSingle
|
|
221
|
-
) : "";
|
|
222
|
-
return {
|
|
223
|
-
color: dataColor,
|
|
224
|
-
title: data.name
|
|
225
|
-
};
|
|
226
|
-
}
|
|
227
|
-
);
|
|
228
|
-
let numberReference = [];
|
|
229
|
-
if (colorReference.length === 1) {
|
|
230
|
-
numberReference = arrayOrArray(
|
|
231
|
-
arrayOrArray(chart.dataSets.data)[0].sets
|
|
232
|
-
).map((data, index) => {
|
|
233
|
-
return {
|
|
234
|
-
color: `${index + 1}`,
|
|
235
|
-
title: data.key
|
|
236
|
-
};
|
|
237
|
-
});
|
|
238
|
-
}
|
|
239
|
-
arrayOrArray(chart.dataSets.data).map((data) => {
|
|
240
|
-
const returnArray = [];
|
|
241
|
-
arrayOrArray(data.sets).forEach((set) => {
|
|
242
|
-
if (set.color !== "" && set.color !== void 0) {
|
|
243
|
-
returnArray.push({
|
|
244
|
-
color: set.color,
|
|
245
|
-
title: data.name + " - " + set.key
|
|
246
|
-
});
|
|
247
|
-
}
|
|
248
|
-
});
|
|
249
|
-
return returnArray;
|
|
250
|
-
}).flat().forEach((addRef) => colorReference.push(addRef));
|
|
251
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
252
|
-
/* @__PURE__ */ jsx(
|
|
253
|
-
Box,
|
|
254
|
-
{
|
|
255
|
-
ref: boxRef,
|
|
256
|
-
id,
|
|
257
|
-
className: `${className ?? ""} ${chart.title} chartBox chartContainer`,
|
|
258
|
-
sx: {
|
|
259
|
-
overflow: "hidden"
|
|
260
|
-
},
|
|
261
|
-
children: /* @__PURE__ */ jsxs(
|
|
262
|
-
"svg",
|
|
263
|
-
{
|
|
264
|
-
ref: elementRef,
|
|
265
|
-
className: `_${chartId} chart__svg`,
|
|
266
|
-
height: chart.ratio.height,
|
|
267
|
-
width: chart.ratio.width,
|
|
268
|
-
children: [
|
|
269
|
-
chart.showGrid && /* @__PURE__ */ jsx(
|
|
270
|
-
Grid.Grid,
|
|
271
|
-
{
|
|
272
|
-
xScale,
|
|
273
|
-
yScale,
|
|
274
|
-
left: 0,
|
|
275
|
-
width: chart.ratio.width,
|
|
276
|
-
height: innerHeight,
|
|
277
|
-
numTicksRows: 10,
|
|
278
|
-
numTicksColumns: 10,
|
|
279
|
-
top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20
|
|
280
|
-
}
|
|
281
|
-
),
|
|
282
|
-
/* @__PURE__ */ jsx(
|
|
283
|
-
Group,
|
|
284
|
-
{
|
|
285
|
-
top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20,
|
|
286
|
-
children: /* @__PURE__ */ jsx(
|
|
287
|
-
BarGroup,
|
|
288
|
-
{
|
|
289
|
-
data: parsedData,
|
|
290
|
-
keys: columnNames,
|
|
291
|
-
height: innerHeight,
|
|
292
|
-
x0: getXValue,
|
|
293
|
-
x0Scale: xScale,
|
|
294
|
-
x1Scale: columnGroupScale,
|
|
295
|
-
yScale,
|
|
296
|
-
color,
|
|
297
|
-
children: (barGroups) => barGroups.map((barGroup) => {
|
|
298
|
-
return /* @__PURE__ */ jsx(
|
|
299
|
-
Group,
|
|
300
|
-
{
|
|
301
|
-
left: barGroup.x0,
|
|
302
|
-
children: barGroup.bars.map((bar) => {
|
|
303
|
-
const key = `${barGroup.index}-${bar.index}-${bar.key}`;
|
|
304
|
-
return /* @__PURE__ */ jsx(
|
|
305
|
-
Bar,
|
|
306
|
-
{
|
|
307
|
-
isSingle: barGroup.bars.length === 1,
|
|
308
|
-
bar,
|
|
309
|
-
barGroup,
|
|
310
|
-
chart,
|
|
311
|
-
parsedData,
|
|
312
|
-
setsWithColor: setsWithColor.flat()
|
|
313
|
-
},
|
|
314
|
-
key
|
|
315
|
-
);
|
|
316
|
-
})
|
|
317
|
-
},
|
|
318
|
-
`bar-group-${barGroup.index}-${barGroup.x0}`
|
|
319
|
-
);
|
|
320
|
-
})
|
|
321
|
-
}
|
|
322
|
-
)
|
|
323
|
-
}
|
|
324
|
-
),
|
|
325
|
-
/* @__PURE__ */ jsx(
|
|
326
|
-
AxisLeft,
|
|
327
|
-
{
|
|
328
|
-
scale: yScale,
|
|
329
|
-
left: effectiveMargin.left,
|
|
330
|
-
label: chart.chartType !== "pie2D" && chart.showAxisYTitle ? chart.axisYTitle : "",
|
|
331
|
-
tickComponent: (props) => {
|
|
332
|
-
let value = Number(props.formattedValue?.replace(",", ""));
|
|
333
|
-
let counter = -1;
|
|
334
|
-
const units = ["k", "M", "G", "T", "P", "E", "Z", "Y", "R", "Q"];
|
|
335
|
-
while (value >= 1e3) {
|
|
336
|
-
value = value / 1e3;
|
|
337
|
-
counter++;
|
|
338
|
-
}
|
|
339
|
-
let stringValue = `${value}`;
|
|
340
|
-
if (stringValue.length > 3) {
|
|
341
|
-
stringValue = stringValue.slice(0, 3);
|
|
342
|
-
}
|
|
343
|
-
if (stringValue.endsWith(".")) {
|
|
344
|
-
stringValue = stringValue.replace(".", "");
|
|
345
|
-
}
|
|
346
|
-
const newValue = `${stringValue}${counter >= 0 ? units[counter] : ""}`;
|
|
347
|
-
return /* @__PURE__ */ jsx(Fragment, { children: chart.showAxisYTitle && /* @__PURE__ */ jsx(
|
|
348
|
-
"text",
|
|
349
|
-
{
|
|
350
|
-
dx: props.dx,
|
|
351
|
-
dy: props.dy,
|
|
352
|
-
fill: props.fill,
|
|
353
|
-
fontSize: props.fontSize,
|
|
354
|
-
textAnchor: props.textAnchor,
|
|
355
|
-
x: props.x,
|
|
356
|
-
y: props.y,
|
|
357
|
-
children: newValue
|
|
358
|
-
}
|
|
359
|
-
) });
|
|
360
|
-
}
|
|
361
|
-
}
|
|
362
|
-
),
|
|
363
|
-
/* @__PURE__ */ jsx(
|
|
364
|
-
AxisBottom,
|
|
365
|
-
{
|
|
366
|
-
top: innerHeight,
|
|
367
|
-
scale: colorReference.length === 1 && numberReference.length > 0 ? numericXScale : xScale,
|
|
368
|
-
label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : "",
|
|
369
|
-
tickLabelProps: { display: "none" },
|
|
370
|
-
tickLineProps: { display: "none" },
|
|
371
|
-
labelOffset: 0
|
|
372
|
-
}
|
|
373
|
-
)
|
|
374
|
-
]
|
|
375
|
-
}
|
|
376
|
-
)
|
|
377
|
-
}
|
|
378
|
-
),
|
|
379
|
-
/* @__PURE__ */ jsx(Box, { className: "chartLegend__Wrapper", children: chart.showLegend && colorReference.length !== 0 && /* @__PURE__ */ jsxs(Box, { className: "chart__legend__wrapper", children: [
|
|
380
|
-
/* @__PURE__ */ jsx(Heading, { as: "h6", children: getLabel("mnuLeyends").text }),
|
|
381
|
-
/* @__PURE__ */ jsx(
|
|
382
|
-
LegendContainer,
|
|
383
|
-
{
|
|
384
|
-
id: chartId,
|
|
385
|
-
references: colorReference.length === 1 && numberReference.length > 0 ? numberReference : colorReference,
|
|
386
|
-
useNumbered: colorReference.length === 1
|
|
387
|
-
}
|
|
388
|
-
)
|
|
389
|
-
] }) })
|
|
390
|
-
] });
|
|
391
|
-
};
|
|
392
|
-
|
|
393
|
-
export { VerticalBars };
|
|
394
|
-
//# sourceMappingURL=VerticalBars.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalBars.js","sources":["../../../src/charts/verticalBars/VerticalBars.tsx"],"sourcesContent":["import uniqueId from 'lodash-es/uniqueId';\nimport { TApiaChartColorDisposition, TChartRendererProps } from '../types';\nimport { arrayOrArray, getLabel, usePanAndZoom } from '@apia/util';\nimport { parseMargin } from '../util/parseMargin';\nimport { scaleLinear, scaleBand, scaleLog, scaleOrdinal } from '@visx/scale';\nimport { useLayoutEffect, useMemo } from 'react';\nimport { Box, Heading } from '@apia/theme';\nimport { Grid } from '@visx/visx';\nimport { Group } from '@visx/group';\nimport { BarGroup } from '@visx/shape';\nimport { AxisBottom, AxisLeft } from '@visx/axis';\nimport { useChartStyles } from '../util/useChartStyles';\nimport { Bar } from './Bar';\nimport { getBarColor } from '../util/getBarColor';\nimport { LegendContainer, TChartReference } from '../util/LegendContainer';\n\nexport interface IParsedColumn {\n columnName: string;\n [key: string]: string;\n}\n\nfunction adjustDimensions({\n width,\n height,\n maxWidth,\n}: {\n width: number;\n height: number;\n maxWidth: number;\n}) {\n if (width <= maxWidth) {\n return { width, height };\n }\n\n const ratio = width / height;\n const newWidth = maxWidth;\n const newHeight = Math.floor(newWidth / ratio);\n\n return { width: newWidth, height: newHeight };\n}\n\nconst getXValue = (d: IParsedColumn) => d.columnName;\n\nexport type TVerticalBarsEvents = { highlight: { barName: string } };\n\n/**\n * Acepta parámetro pieces que debe ser compuesto por...\n *\n * @example\n *\n * // Instanciar con solamente x\n * <Pie pieces={{x: 3}} />\n *\n * // Instanciar con x e y\n * <Pie pieces={{x: 3, y: 5}} />\n */\nconst VerticalBars = ({\n margin = { top: 20, left: 100, bottom: 24, right: 0 },\n chart,\n className,\n chartId,\n allowZoom,\n}: TChartRendererProps) => {\n const effectiveMargin = parseMargin(margin);\n if (!chart.showAxisYTitle && effectiveMargin.left > 50) {\n effectiveMargin.left = 50;\n }\n let innerWidth =\n chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;\n let innerHeight =\n chart.ratio.height +\n (chart.showAxisXTitle\n ? -effectiveMargin.top - effectiveMargin.bottom\n : (-effectiveMargin.top - effectiveMargin.bottom) / 2);\n if (innerWidth > chart.ratio.maxWidth) {\n const newValues = adjustDimensions({\n height: innerHeight,\n width: innerWidth,\n maxWidth: chart.ratio.maxWidth,\n });\n innerWidth = newValues.width;\n innerHeight = newValues.height;\n }\n\n const styles = useChartStyles(chart.colorSchema);\n\n const columnas = arrayOrArray(chart.dataSets?.data)\n .filter((column) => !!column.sets)\n .map((column) => {\n return {\n ...column,\n sets: column.sets,\n };\n });\n\n const xValues = arrayOrArray(columnas[0].sets).map(\n (innerCoord) => innerCoord.key,\n );\n const columnNames = columnas.map((col) => {\n return col.name;\n });\n\n const parsedData: IParsedColumn[] = xValues.map((x) => {\n const obj: IParsedColumn = columnas.reduce<IParsedColumn>(\n (acc, column) => {\n return {\n ...acc,\n [column.name]: arrayOrArray(column.sets).filter((coord) => {\n return coord.key === x;\n })[0].value,\n };\n },\n { columnName: x },\n );\n return obj;\n });\n\n const xScale = scaleBand<string>({\n range: [\n typeof effectiveMargin === 'number'\n ? effectiveMargin\n : effectiveMargin.left,\n chart.ratio.width,\n ],\n domain: parsedData.map(getXValue),\n padding: 0.2,\n });\n\n const numericXScale = scaleBand<string>({\n range: [\n typeof effectiveMargin === 'number'\n ? effectiveMargin\n : effectiveMargin.left,\n chart.ratio.width,\n ],\n domain: parsedData.map((_, i) => `${i + 1}`),\n padding: 0.2,\n });\n\n const columnGroupScale = scaleBand<string>({\n domain: columnNames,\n range: [0, xScale.bandwidth()],\n });\n\n const yScaleLog = scaleLog<number>({\n range: [\n innerHeight,\n typeof effectiveMargin === 'number'\n ? effectiveMargin\n : effectiveMargin.top,\n ],\n domain: [\n 1,\n Math.max(\n ...parsedData.map((d) =>\n Math.max(...columnNames.map((key) => Number(d[key]))),\n ),\n ),\n ],\n base: 10,\n });\n\n const yScaleLine = scaleLinear<number>({\n range: [\n innerHeight,\n typeof effectiveMargin === 'number'\n ? effectiveMargin\n : effectiveMargin.top,\n ],\n domain: [\n 0,\n Math.max(\n ...parsedData.map((d) =>\n Math.max(...columnNames.map((key) => Number(d[key]))),\n ),\n ),\n ],\n });\n\n const color = scaleOrdinal<string, string>({\n domain: columnNames,\n range: columnas.map((col) => col.color),\n });\n\n // const hideLegendsColors = arrayOrArray(chart.dataSets.data).some((data) => {\n // return arrayOrArray(data.sets).some(\n // (set) => set.color !== undefined && set.color !== '',\n // );\n // });\n\n const isLogScale = false;\n\n const yScale = useMemo(() => {\n if (!isLogScale) {\n return yScaleLine;\n }\n return yScaleLog;\n }, [isLogScale, yScaleLine, yScaleLog]);\n\n const id = useMemo(() => `VerticalBars${uniqueId()}`, []);\n useLayoutEffect(() => {\n document\n .querySelectorAll<HTMLElement>(`#${id} .tickLabel`)\n .forEach((current) => {\n const box = current.getBoundingClientRect();\n if (box.width > 125) {\n // eslint-disable-next-line no-param-reassign\n current.style.width = '125px';\n // eslint-disable-next-line no-param-reassign\n current.style.overflow = 'hidden';\n // eslint-disable-next-line no-param-reassign\n current.style.textOverflow = 'ellipsis';\n // eslint-disable-next-line no-param-reassign\n current.style.whiteSpace = 'nowrap';\n }\n // eslint-disable-next-line no-param-reassign\n current.style.transformOrigin =\n (current.getAttribute('x') as string) + 'px 14px';\n // eslint-disable-next-line no-param-reassign\n current.style.transform = `rotate(25deg)`;\n });\n });\n\n const { boxRef, elementRef } = usePanAndZoom<HTMLElement, SVGSVGElement>(\n undefined,\n !allowZoom ?? true,\n );\n\n const setsWithColor = arrayOrArray(chart.dataSets.data).map((data, index) => {\n const isSingle = arrayOrArray(chart.dataSets.data).length === 1;\n const dataColor =\n data.color !== '' && data.color !== undefined\n ? data.color\n : arrayOrArray(\n styles\n ? styles.schema\n : [\n '#7ad6f4',\n '#45bdee',\n '#28a7ea',\n '#006cbb',\n '#034698',\n '#032f64',\n ],\n ).length > 0\n ? getBarColor(\n arrayOrArray(\n styles\n ? styles.schema\n : [\n '#7ad6f4',\n '#45bdee',\n '#28a7ea',\n '#006cbb',\n '#034698',\n '#032f64',\n ],\n ),\n index,\n isSingle,\n )\n : '';\n const returnColumnsArray: TApiaChartColorDisposition[] = [];\n arrayOrArray(data.sets).forEach((set) => {\n if (set.color !== '' && set.color !== undefined) {\n returnColumnsArray.push({ ...set, columnName: data.name });\n } else {\n returnColumnsArray.push({\n ...set,\n color: dataColor,\n columnName: data.name,\n });\n }\n });\n return returnColumnsArray;\n });\n\n const colorReference: TChartReference = arrayOrArray(chart.dataSets.data).map(\n (data, index) => {\n const isSingle = arrayOrArray(chart.dataSets.data).length === 1;\n const dataColor =\n data.color !== '' && data.color !== undefined\n ? data.color\n : arrayOrArray(\n styles\n ? styles.schema\n : [\n '#7ad6f4',\n '#45bdee',\n '#28a7ea',\n '#006cbb',\n '#034698',\n '#032f64',\n ],\n ).length > 0\n ? getBarColor(\n arrayOrArray(\n styles\n ? styles.schema\n : [\n '#7ad6f4',\n '#45bdee',\n '#28a7ea',\n '#006cbb',\n '#034698',\n '#032f64',\n ],\n ),\n index,\n isSingle,\n )\n : '';\n return {\n color: dataColor,\n title: data.name,\n };\n },\n );\n let numberReference: TChartReference = [];\n if (colorReference.length === 1) {\n numberReference = arrayOrArray(\n arrayOrArray(chart.dataSets.data)[0].sets,\n ).map((data, index) => {\n return {\n color: `${index + 1}`,\n title: data.key,\n };\n });\n }\n\n arrayOrArray(chart.dataSets.data)\n .map((data) => {\n const returnArray: { color: string; title: string }[] = [];\n arrayOrArray(data.sets).forEach((set) => {\n if (set.color !== '' && set.color !== undefined) {\n returnArray.push({\n color: set.color,\n title: data.name + ' - ' + set.key,\n });\n }\n });\n return returnArray;\n })\n .flat()\n .forEach((addRef) => colorReference.push(addRef));\n\n return (\n <>\n <Box\n ref={boxRef}\n id={id}\n className={`${className ?? ''} ${chart.title} chartBox chartContainer`}\n sx={{\n overflow: 'hidden',\n }}\n >\n <svg\n ref={elementRef}\n className={`_${chartId} chart__svg`}\n height={chart.ratio.height}\n width={chart.ratio.width}\n >\n {chart.showGrid && (\n <Grid.Grid\n xScale={xScale}\n yScale={yScale}\n left={0}\n width={chart.ratio.width}\n height={innerHeight}\n numTicksRows={10}\n numTicksColumns={10}\n top={\n (typeof effectiveMargin === 'number'\n ? effectiveMargin\n : effectiveMargin.top) - 20\n }\n />\n )}\n <Group\n top={\n (typeof effectiveMargin === 'number'\n ? effectiveMargin\n : effectiveMargin.top) - 20\n }\n >\n <BarGroup\n data={parsedData}\n keys={columnNames}\n height={innerHeight}\n x0={getXValue}\n x0Scale={xScale}\n x1Scale={columnGroupScale}\n yScale={yScale}\n color={color}\n >\n {(barGroups) =>\n barGroups.map((barGroup) => {\n return (\n <Group\n key={`bar-group-${barGroup.index}-${barGroup.x0}`}\n left={barGroup.x0}\n >\n {barGroup.bars.map((bar) => {\n const key = `${barGroup.index}-${bar.index}-${bar.key}`;\n\n return (\n <Bar\n isSingle={barGroup.bars.length === 1}\n key={key}\n bar={bar}\n barGroup={barGroup}\n chart={chart}\n parsedData={parsedData}\n setsWithColor={setsWithColor.flat()}\n />\n );\n })}\n </Group>\n );\n })\n }\n </BarGroup>\n </Group>\n <AxisLeft\n scale={yScale}\n left={effectiveMargin.left}\n label={\n chart.chartType !== 'pie2D' && chart.showAxisYTitle\n ? chart.axisYTitle\n : ''\n }\n tickComponent={(props) => {\n let value = Number(props.formattedValue?.replace(',', ''));\n let counter = -1;\n const units = ['k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y', 'R', 'Q'];\n while (value >= 1000) {\n value = value / 1000;\n counter++;\n }\n let stringValue = `${value}`;\n if (stringValue.length > 3) {\n stringValue = stringValue.slice(0, 3);\n }\n if (stringValue.endsWith('.')) {\n stringValue = stringValue.replace('.', '');\n }\n const newValue = `${stringValue}${\n counter >= 0 ? units[counter] : ''\n }`;\n\n return (\n <>\n {chart.showAxisYTitle && (\n <text\n dx={props.dx}\n dy={props.dy}\n fill={props.fill}\n fontSize={props.fontSize}\n textAnchor={props.textAnchor}\n x={props.x}\n y={props.y}\n >\n {newValue}\n </text>\n )}\n </>\n );\n }}\n />\n <AxisBottom\n top={innerHeight}\n scale={\n colorReference.length === 1 && numberReference.length > 0\n ? numericXScale\n : xScale\n }\n label={\n chart.chartType !== 'pie2D' && chart.showAxisXTitle\n ? chart.axisXTitle\n : ''\n }\n tickLabelProps={{ display: 'none' }}\n tickLineProps={{ display: 'none' }}\n labelOffset={0}\n />\n </svg>\n </Box>\n <Box className=\"chartLegend__Wrapper\">\n {chart.showLegend && colorReference.length !== 0 && (\n <Box className=\"chart__legend__wrapper\">\n {/* TODO LABEL */}\n <Heading as={'h6'}>{getLabel('mnuLeyends').text}</Heading>\n <LegendContainer\n id={chartId}\n references={\n colorReference.length === 1 && numberReference.length > 0\n ? numberReference\n : colorReference\n }\n useNumbered={colorReference.length === 1}\n />\n </Box>\n )}\n </Box>\n </>\n );\n};\n\nexport { VerticalBars };\n"],"names":[],"mappings":"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"}
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
import { jsxs, Fragment, jsx } from '@apia/theme/jsx-runtime';
|
|
2
|
-
import { Line } from '@visx/shape';
|
|
3
|
-
import { useMemo } from 'react';
|
|
4
|
-
import tinycolor from 'tinycolor2';
|
|
5
|
-
import { Box } from '@apia/theme';
|
|
6
|
-
import { ApiaUtil } from '@apia/components';
|
|
7
|
-
|
|
8
|
-
const WaterfallBar = ({
|
|
9
|
-
width,
|
|
10
|
-
height,
|
|
11
|
-
x,
|
|
12
|
-
y,
|
|
13
|
-
fill,
|
|
14
|
-
x1,
|
|
15
|
-
lineY,
|
|
16
|
-
x2,
|
|
17
|
-
stroke,
|
|
18
|
-
strokeDashArray,
|
|
19
|
-
textX,
|
|
20
|
-
textY,
|
|
21
|
-
textContent,
|
|
22
|
-
isLast,
|
|
23
|
-
step,
|
|
24
|
-
columnName,
|
|
25
|
-
chart
|
|
26
|
-
}) => {
|
|
27
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
28
|
-
/* @__PURE__ */ jsx(
|
|
29
|
-
Box,
|
|
30
|
-
{
|
|
31
|
-
as: "rect",
|
|
32
|
-
sx: useMemo(() => {
|
|
33
|
-
return {
|
|
34
|
-
width: `${width}px`,
|
|
35
|
-
height: `${height}px`,
|
|
36
|
-
x: `${x}px`,
|
|
37
|
-
y: `${y}px`,
|
|
38
|
-
fill: `${fill}`,
|
|
39
|
-
"&:hover": {
|
|
40
|
-
fill: `#${tinycolor(fill).saturate(25).toHex()}`
|
|
41
|
-
},
|
|
42
|
-
transition: "fill 500ms"
|
|
43
|
-
};
|
|
44
|
-
}, [fill, height, width, x, y]),
|
|
45
|
-
onMouseEnter: (ev) => {
|
|
46
|
-
if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {
|
|
47
|
-
new ApiaUtil().tooltips.open({
|
|
48
|
-
children: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
49
|
-
/* @__PURE__ */ jsx(
|
|
50
|
-
"div",
|
|
51
|
-
{
|
|
52
|
-
style: {
|
|
53
|
-
color: step.color
|
|
54
|
-
},
|
|
55
|
-
children: /* @__PURE__ */ jsx("strong", { children: chart.showAxisXTitle ? columnName : chart.showLegend ? step.x : "" })
|
|
56
|
-
}
|
|
57
|
-
),
|
|
58
|
-
chart.showValues && /* @__PURE__ */ jsx("div", { children: step.y }),
|
|
59
|
-
/* @__PURE__ */ jsx("div", { children: chart.showAxisXTitle && chart.showLegend ? step.x : "" })
|
|
60
|
-
] }),
|
|
61
|
-
attachToElement: () => ev.target,
|
|
62
|
-
attachToElementAnchorPoint: "center"
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
),
|
|
68
|
-
!isLast && /* @__PURE__ */ jsx(
|
|
69
|
-
Line,
|
|
70
|
-
{
|
|
71
|
-
x1,
|
|
72
|
-
x2,
|
|
73
|
-
y1: lineY,
|
|
74
|
-
y2: lineY,
|
|
75
|
-
stroke,
|
|
76
|
-
strokeDasharray: strokeDashArray
|
|
77
|
-
}
|
|
78
|
-
),
|
|
79
|
-
chart.showValues && /* @__PURE__ */ jsx("text", { textAnchor: "middle", x: textX, y: textY, children: textContent })
|
|
80
|
-
] });
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
export { WaterfallBar };
|
|
84
|
-
//# sourceMappingURL=WaterfallBar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"WaterfallBar.js","sources":["../../../src/charts/waterfallBars/WaterfallBar.tsx"],"sourcesContent":["import { Line } from '@visx/shape';\nimport { useMemo } from 'react';\nimport { TApiaChartDefinition } from '../types';\nimport tinycolor from 'tinycolor2';\nimport { Box } from '@apia/theme';\nimport { ApiaUtil } from '@apia/components';\n\nconst WaterfallBar = ({\n width,\n height,\n x,\n y,\n fill,\n x1,\n lineY,\n x2,\n stroke,\n strokeDashArray,\n textX,\n textY,\n textContent,\n isLast,\n step,\n columnName,\n chart,\n}: {\n width: number;\n height: number;\n x: string | number;\n y: string | number;\n fill: string;\n x1: string | number;\n x2: string | number;\n lineY: string | number;\n stroke: string;\n strokeDashArray: string | number;\n textX: string | number;\n textY: string | number;\n textContent: string;\n isLast: boolean;\n step: {\n x: string;\n y: string;\n start: number;\n end: number;\n color: string;\n };\n columnName: string;\n chart: TApiaChartDefinition;\n}) => {\n return (\n <>\n <Box\n as={'rect'}\n sx={useMemo(() => {\n return {\n width: `${width}px`,\n height: `${height}px`,\n x: `${x}px`,\n y: `${y}px`,\n fill: `${fill}`,\n '&:hover': {\n fill: `#${tinycolor(fill).saturate(25).toHex()}`,\n },\n transition: 'fill 500ms',\n };\n }, [fill, height, width, x, y])}\n onMouseEnter={(ev) => {\n if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {\n new ApiaUtil().tooltips.open({\n children: (\n <>\n <div\n style={{\n color: step.color,\n }}\n >\n <strong>\n {chart.showAxisXTitle\n ? columnName\n : chart.showLegend\n ? step.x\n : ''}\n </strong>\n </div>\n {chart.showValues && <div>{step.y}</div>}\n <div>\n {chart.showAxisXTitle && chart.showLegend ? step.x : ''}\n </div>\n </>\n ),\n attachToElement: () => ev.target as HTMLElement,\n attachToElementAnchorPoint: 'center',\n });\n }\n }}\n />\n\n {!isLast && (\n <Line\n x1={x1}\n x2={x2}\n y1={lineY}\n y2={lineY}\n stroke={stroke}\n strokeDasharray={strokeDashArray}\n />\n )}\n {chart.showValues && (\n <text textAnchor=\"middle\" x={textX} y={textY}>\n {textContent}\n </text>\n )}\n </>\n );\n};\n\nexport { WaterfallBar };\n"],"names":[],"mappings":"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"}
|