@apia/charts 2.0.9 → 2.0.11
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 +274 -0
- package/dist/charts/chartJsRenderer/ChartComponent.js.map +1 -0
- package/dist/charts/types.d.ts +173 -0
- package/dist/charts/types.d.ts.map +1 -0
- package/dist/index.d.ts +4 -334
- package/dist/index.js +2 -1455
- 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 +117 -0
- package/dist/widgets/counter/Counter.js.map +1 -0
- package/dist/widgets/custom/useCustomWidget.js +64 -0
- package/dist/widgets/custom/useCustomWidget.js.map +1 -0
- package/dist/widgets/custom/util.js +9 -0
- package/dist/widgets/custom/util.js.map +1 -0
- package/dist/widgets/oxford/Oxford.js +248 -0
- package/dist/widgets/oxford/Oxford.js.map +1 -0
- package/dist/widgets/ring/Ring.js +133 -0
- package/dist/widgets/ring/Ring.js.map +1 -0
- package/dist/widgets/scale/Scale.js +150 -0
- package/dist/widgets/scale/Scale.js.map +1 -0
- package/dist/widgets/speedMeter/SpeedMeter.js +194 -0
- package/dist/widgets/speedMeter/SpeedMeter.js.map +1 -0
- package/dist/widgets/tLight/TLight.js +143 -0
- package/dist/widgets/tLight/TLight.js.map +1 -0
- package/dist/widgets/thermometer/Thermometer.js +151 -0
- package/dist/widgets/thermometer/Thermometer.js.map +1 -0
- package/dist/widgets/thermometer/util.js +38 -0
- package/dist/widgets/thermometer/util.js.map +1 -0
- package/dist/widgets/types.d.ts +108 -0
- package/dist/widgets/types.d.ts.map +1 -0
- package/package.json +6 -6
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ChartData } from 'chart.js';
|
|
3
|
+
|
|
4
|
+
type TChartData = {
|
|
5
|
+
chartData: ChartData;
|
|
6
|
+
showLegend?: boolean;
|
|
7
|
+
showValues?: boolean;
|
|
8
|
+
showXAxisValues?: boolean;
|
|
9
|
+
showYAxisValues?: boolean;
|
|
10
|
+
showTable?: boolean;
|
|
11
|
+
type: 'bar' | 'line' | 'scatter' | 'bubble' | 'pie' | 'doughnut' | 'polarArea' | 'radar' | 'waterfall';
|
|
12
|
+
indexAxis?: 'x' | 'y';
|
|
13
|
+
xAxisTitle?: string;
|
|
14
|
+
yAxisTitle?: string;
|
|
15
|
+
id?: string;
|
|
16
|
+
chartId?: string;
|
|
17
|
+
aspectRatio?: number;
|
|
18
|
+
};
|
|
19
|
+
declare const ChartComponent: (props: TChartData) => react.JSX.Element;
|
|
20
|
+
|
|
21
|
+
export { ChartComponent, type TChartData };
|
|
22
|
+
//# sourceMappingURL=ChartComponent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChartComponent.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,274 @@
|
|
|
1
|
+
import { jsx } from '@apia/theme/jsx-runtime';
|
|
2
|
+
import { arrayOrArray, getValueByPath } from '@apia/util';
|
|
3
|
+
import { Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, BarController, BarElement, PieController, ArcElement, LineController } from 'chart.js';
|
|
4
|
+
import { useRef, useMemo } from 'react';
|
|
5
|
+
import { Chart as Chart$1 } from 'react-chartjs-2';
|
|
6
|
+
import { useThemeUI } from '@apia/theme';
|
|
7
|
+
import tinycolor from 'tinycolor2';
|
|
8
|
+
|
|
9
|
+
Chart.register(
|
|
10
|
+
CategoryScale,
|
|
11
|
+
LinearScale,
|
|
12
|
+
PointElement,
|
|
13
|
+
LineElement,
|
|
14
|
+
Title,
|
|
15
|
+
Tooltip,
|
|
16
|
+
Legend,
|
|
17
|
+
BarController,
|
|
18
|
+
BarElement,
|
|
19
|
+
PieController,
|
|
20
|
+
ArcElement,
|
|
21
|
+
LineController
|
|
22
|
+
);
|
|
23
|
+
const ChartComponent = (props) => {
|
|
24
|
+
const actualProps = Object.assign(
|
|
25
|
+
{
|
|
26
|
+
chartData: { datasets: [{ data: [{ x: 0, y: 0 }] }] },
|
|
27
|
+
type: "bar",
|
|
28
|
+
indexAxis: "x",
|
|
29
|
+
showLegend: true,
|
|
30
|
+
showValues: true,
|
|
31
|
+
showXAxisValues: true,
|
|
32
|
+
showYAxisValues: true,
|
|
33
|
+
showTable: true,
|
|
34
|
+
xAxisTitle: "",
|
|
35
|
+
yAxisTitle: "",
|
|
36
|
+
aspectRatio: 2.5
|
|
37
|
+
},
|
|
38
|
+
props
|
|
39
|
+
);
|
|
40
|
+
const { theme } = useThemeUI();
|
|
41
|
+
const chartRef = useRef(null);
|
|
42
|
+
if (!theme.layout)
|
|
43
|
+
console.error("The layout property is missing in the current theme");
|
|
44
|
+
const data = useMemo(() => {
|
|
45
|
+
const charts = theme.layout?.charts ?? {};
|
|
46
|
+
return {
|
|
47
|
+
datasets: (actualProps.type === "waterfall" ? arrayOrArray(actualProps.chartData.datasets).map((dataset) => {
|
|
48
|
+
let sum = 0;
|
|
49
|
+
const newData = dataset.data.map((dataValue) => {
|
|
50
|
+
if (typeof dataValue === "number") {
|
|
51
|
+
const currentValue = sum;
|
|
52
|
+
sum += dataValue;
|
|
53
|
+
return [currentValue, sum];
|
|
54
|
+
} else {
|
|
55
|
+
return dataValue;
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
return {
|
|
59
|
+
...dataset,
|
|
60
|
+
data: newData
|
|
61
|
+
};
|
|
62
|
+
}) : actualProps.chartData.datasets).map((dataset, datasetIndex) => {
|
|
63
|
+
const isSingle = arrayOrArray(actualProps.chartData.datasets).every(
|
|
64
|
+
(dataset2) => arrayOrArray(dataset2.data).length === 1
|
|
65
|
+
) || actualProps.type === "pie";
|
|
66
|
+
const backgroundColor = dataset.backgroundColor.map((actualColor, i) => {
|
|
67
|
+
let schemaArray = [];
|
|
68
|
+
if (typeof actualColor === "string") {
|
|
69
|
+
const color = actualColor.toLowerCase();
|
|
70
|
+
if (color in charts) {
|
|
71
|
+
const currentBackgroundStylescheme = {
|
|
72
|
+
schema: getValueByPath(
|
|
73
|
+
theme.colors,
|
|
74
|
+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
|
|
75
|
+
charts[color.toLowerCase()]?.schema
|
|
76
|
+
)
|
|
77
|
+
};
|
|
78
|
+
if (typeof currentBackgroundStylescheme.schema === "object" && currentBackgroundStylescheme.schema) {
|
|
79
|
+
if (isSingle) {
|
|
80
|
+
if (actualProps.type === "pie") {
|
|
81
|
+
schemaArray = Object.values(
|
|
82
|
+
currentBackgroundStylescheme.schema
|
|
83
|
+
).map((varColor) => {
|
|
84
|
+
return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
|
|
85
|
+
});
|
|
86
|
+
} else {
|
|
87
|
+
schemaArray = new Array(6).fill(
|
|
88
|
+
Object.values(currentBackgroundStylescheme.schema)[datasetIndex % 6]
|
|
89
|
+
).map((varColor) => {
|
|
90
|
+
return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
} else {
|
|
94
|
+
schemaArray = new Array(6).fill(
|
|
95
|
+
Object.values(currentBackgroundStylescheme.schema).map(
|
|
96
|
+
(varColor) => {
|
|
97
|
+
return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
|
|
98
|
+
}
|
|
99
|
+
)[datasetIndex % 6]
|
|
100
|
+
);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
} else {
|
|
104
|
+
schemaArray = [color, color, color, color, color, color];
|
|
105
|
+
}
|
|
106
|
+
} else {
|
|
107
|
+
return actualColor[datasetIndex % actualColor.length];
|
|
108
|
+
}
|
|
109
|
+
return schemaArray[i % 6];
|
|
110
|
+
});
|
|
111
|
+
const hoverBackgroundColor = backgroundColor.map((c) => {
|
|
112
|
+
const color = tinycolor(c);
|
|
113
|
+
return (color.isDark() ? color.lighten(30) : color.darken(30)).toHexString();
|
|
114
|
+
});
|
|
115
|
+
return {
|
|
116
|
+
...dataset,
|
|
117
|
+
hoverBackgroundColor,
|
|
118
|
+
backgroundColor,
|
|
119
|
+
borderColor: dataset.borderColor.map(
|
|
120
|
+
(color, i) => {
|
|
121
|
+
let schemaBorderArray = [];
|
|
122
|
+
if (typeof color === "string") {
|
|
123
|
+
if (color in charts) {
|
|
124
|
+
const currentBorderStylescheme = {
|
|
125
|
+
schema: getValueByPath(
|
|
126
|
+
theme.colors,
|
|
127
|
+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
|
|
128
|
+
charts[color.toLowerCase()]?.schema
|
|
129
|
+
)
|
|
130
|
+
};
|
|
131
|
+
if (typeof currentBorderStylescheme.schema === "object" && currentBorderStylescheme.schema) {
|
|
132
|
+
schemaBorderArray = Object.values(
|
|
133
|
+
currentBorderStylescheme.schema
|
|
134
|
+
).map((varColor) => {
|
|
135
|
+
return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
} else {
|
|
139
|
+
schemaBorderArray = [
|
|
140
|
+
color,
|
|
141
|
+
color,
|
|
142
|
+
color,
|
|
143
|
+
color,
|
|
144
|
+
color,
|
|
145
|
+
color
|
|
146
|
+
];
|
|
147
|
+
}
|
|
148
|
+
} else {
|
|
149
|
+
return color[datasetIndex % color.length];
|
|
150
|
+
}
|
|
151
|
+
return schemaBorderArray[i % 6];
|
|
152
|
+
}
|
|
153
|
+
)
|
|
154
|
+
};
|
|
155
|
+
}),
|
|
156
|
+
labels: actualProps.chartData.labels
|
|
157
|
+
};
|
|
158
|
+
}, [
|
|
159
|
+
actualProps.chartData.datasets,
|
|
160
|
+
actualProps.chartData.labels,
|
|
161
|
+
actualProps.type,
|
|
162
|
+
theme.colors,
|
|
163
|
+
theme.layout
|
|
164
|
+
]);
|
|
165
|
+
const options = useMemo(() => {
|
|
166
|
+
return {
|
|
167
|
+
plugins: {
|
|
168
|
+
legend: {
|
|
169
|
+
position: "right",
|
|
170
|
+
display: actualProps.showLegend,
|
|
171
|
+
onHover: (ev, legendItem, legend) => {
|
|
172
|
+
const chart = chartRef.current;
|
|
173
|
+
if (chart) {
|
|
174
|
+
const activeElement = {
|
|
175
|
+
datasetIndex: actualProps.type === "pie" ? 0 : legendItem.datasetIndex,
|
|
176
|
+
index: actualProps.type === "pie" ? legendItem.index : 0
|
|
177
|
+
};
|
|
178
|
+
console.log(activeElement, legendItem, legend, ev);
|
|
179
|
+
chart.setActiveElements([activeElement]);
|
|
180
|
+
chart.tooltip?.setActiveElements([activeElement], { x: 0, y: 0 });
|
|
181
|
+
chart.update();
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
tooltip: {
|
|
186
|
+
callbacks: {
|
|
187
|
+
label(tooltipItem) {
|
|
188
|
+
const XLabel = tooltipItem.dataset.label ?? "";
|
|
189
|
+
let YValue = tooltipItem.formattedValue;
|
|
190
|
+
if (isNaN(parseFloat(YValue))) {
|
|
191
|
+
const arrayValue = tooltipItem.raw;
|
|
192
|
+
const realValue = arrayValue[1] - arrayValue[0];
|
|
193
|
+
YValue = `${realValue}`;
|
|
194
|
+
}
|
|
195
|
+
let finalString = "";
|
|
196
|
+
if (actualProps.showLegend || actualProps.type === "pie") {
|
|
197
|
+
finalString += XLabel;
|
|
198
|
+
if (actualProps.showValues) {
|
|
199
|
+
finalString += ": " + YValue;
|
|
200
|
+
}
|
|
201
|
+
} else if (actualProps.showValues) {
|
|
202
|
+
finalString += YValue;
|
|
203
|
+
}
|
|
204
|
+
return finalString;
|
|
205
|
+
},
|
|
206
|
+
title(tooltipItems) {
|
|
207
|
+
if (actualProps.type !== "pie" && !actualProps.showXAxisValues && actualProps.indexAxis === "x" || actualProps.type !== "pie" && !actualProps.showYAxisValues && actualProps.indexAxis === "y" || actualProps.type === "pie" && !actualProps.showLegend) {
|
|
208
|
+
return "";
|
|
209
|
+
}
|
|
210
|
+
return tooltipItems[0].label;
|
|
211
|
+
}
|
|
212
|
+
},
|
|
213
|
+
enabled: (actualProps.indexAxis === "y" ? actualProps.showYAxisValues : actualProps.showXAxisValues) || actualProps.showValues || actualProps.showLegend
|
|
214
|
+
}
|
|
215
|
+
},
|
|
216
|
+
aspectRatio: actualProps.aspectRatio,
|
|
217
|
+
indexAxis: actualProps.indexAxis,
|
|
218
|
+
scales: {
|
|
219
|
+
x: {
|
|
220
|
+
display: actualProps.type !== "pie",
|
|
221
|
+
title: {
|
|
222
|
+
display: actualProps.showXAxisValues,
|
|
223
|
+
text: actualProps.indexAxis === "y" ? actualProps.yAxisTitle : actualProps.xAxisTitle
|
|
224
|
+
},
|
|
225
|
+
ticks: {
|
|
226
|
+
display: !!actualProps.showXAxisValues
|
|
227
|
+
},
|
|
228
|
+
grid: {
|
|
229
|
+
display: actualProps.showTable
|
|
230
|
+
}
|
|
231
|
+
},
|
|
232
|
+
y: {
|
|
233
|
+
axis: actualProps.indexAxis === "y" ? "x" : "y",
|
|
234
|
+
display: actualProps.type !== "pie",
|
|
235
|
+
title: {
|
|
236
|
+
display: actualProps.showYAxisValues,
|
|
237
|
+
text: actualProps.indexAxis === "y" ? actualProps.xAxisTitle : actualProps.yAxisTitle
|
|
238
|
+
},
|
|
239
|
+
ticks: {
|
|
240
|
+
display: !!actualProps.showYAxisValues
|
|
241
|
+
},
|
|
242
|
+
grid: {
|
|
243
|
+
display: actualProps.showTable
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
};
|
|
248
|
+
}, [
|
|
249
|
+
actualProps.aspectRatio,
|
|
250
|
+
actualProps.indexAxis,
|
|
251
|
+
actualProps.showLegend,
|
|
252
|
+
actualProps.showTable,
|
|
253
|
+
actualProps.showValues,
|
|
254
|
+
actualProps.showXAxisValues,
|
|
255
|
+
actualProps.showYAxisValues,
|
|
256
|
+
actualProps.type,
|
|
257
|
+
actualProps.xAxisTitle,
|
|
258
|
+
actualProps.yAxisTitle
|
|
259
|
+
]);
|
|
260
|
+
return /* @__PURE__ */ jsx(
|
|
261
|
+
Chart$1,
|
|
262
|
+
{
|
|
263
|
+
id: actualProps.id ?? void 0,
|
|
264
|
+
className: actualProps.chartId ?? "",
|
|
265
|
+
type: actualProps.type === "waterfall" ? "bar" : actualProps.type,
|
|
266
|
+
options,
|
|
267
|
+
data,
|
|
268
|
+
ref: chartRef
|
|
269
|
+
}
|
|
270
|
+
);
|
|
271
|
+
};
|
|
272
|
+
|
|
273
|
+
export { ChartComponent };
|
|
274
|
+
//# sourceMappingURL=ChartComponent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChartComponent.js","sources":["../../../src/charts/chartJsRenderer/ChartComponent.tsx"],"sourcesContent":["import { arrayOrArray, getValueByPath } from '@apia/util';\r\nimport {\r\n ChartData,\r\n ChartOptions,\r\n Chart as ChartJS,\r\n CategoryScale,\r\n LinearScale,\r\n PointElement,\r\n LineElement,\r\n Title,\r\n Tooltip,\r\n Legend,\r\n BarController,\r\n BarElement,\r\n PieController,\r\n ArcElement,\r\n ChartTypeRegistry,\r\n TooltipItem,\r\n LineController,\r\n} from 'chart.js';\r\nimport { useMemo, useRef } from 'react';\r\nimport { Chart } from 'react-chartjs-2';\r\nimport { ColorModesScale, ThemeUIStyleObject, useThemeUI } from '@apia/theme';\r\nimport { IChartStylesSchemes } from '../types';\r\nimport tinycolor from 'tinycolor2';\r\n\r\nChartJS.register(\r\n CategoryScale,\r\n LinearScale,\r\n PointElement,\r\n LineElement,\r\n Title,\r\n Tooltip,\r\n Legend,\r\n BarController,\r\n BarElement,\r\n PieController,\r\n ArcElement,\r\n LineController,\r\n);\r\n\r\nexport type TChartData = {\r\n chartData: ChartData;\r\n showLegend?: boolean;\r\n showValues?: boolean;\r\n showXAxisValues?: boolean;\r\n showYAxisValues?: boolean;\r\n showTable?: boolean;\r\n type:\r\n | 'bar'\r\n | 'line'\r\n | 'scatter'\r\n | 'bubble'\r\n | 'pie'\r\n | 'doughnut'\r\n | 'polarArea'\r\n | 'radar'\r\n | 'waterfall';\r\n indexAxis?: 'x' | 'y';\r\n xAxisTitle?: string;\r\n yAxisTitle?: string;\r\n id?: string;\r\n chartId?: string;\r\n aspectRatio?: number;\r\n};\r\n\r\nexport type TDataset = {\r\n backgroundColor?: string | string[];\r\n borderColor?: string | string[];\r\n borderWidth?: number;\r\n label?: string;\r\n data: number[] | [number, number][];\r\n}[];\r\n\r\nexport const ChartComponent = (props: TChartData) => {\r\n const actualProps: TChartData = Object.assign(\r\n {\r\n chartData: { datasets: [{ data: [{ x: 0, y: 0 }] }] },\r\n type: 'bar',\r\n indexAxis: 'x',\r\n showLegend: true,\r\n showValues: true,\r\n showXAxisValues: true,\r\n showYAxisValues: true,\r\n showTable: true,\r\n xAxisTitle: '',\r\n yAxisTitle: '',\r\n aspectRatio: 2.5,\r\n },\r\n props,\r\n );\r\n const { theme } = useThemeUI();\r\n const chartRef = useRef<ChartJS>(null);\r\n\r\n if (!theme.layout)\r\n console.error('The layout property is missing in the current theme');\r\n\r\n const data: ChartData = useMemo(() => {\r\n const charts = ((theme.layout as Record<string, ThemeUIStyleObject>)\r\n ?.charts ?? {}) as IChartStylesSchemes;\r\n\r\n return {\r\n datasets: (actualProps.type === 'waterfall'\r\n ? arrayOrArray(actualProps.chartData.datasets).map((dataset) => {\r\n let sum = 0;\r\n const newData = dataset.data.map<[number, number]>((dataValue) => {\r\n if (typeof dataValue === 'number') {\r\n const currentValue = sum;\r\n sum += dataValue;\r\n return [currentValue, sum] as [number, number];\r\n } else {\r\n return dataValue as [number, number];\r\n }\r\n });\r\n\r\n return {\r\n ...dataset,\r\n data: newData,\r\n };\r\n })\r\n : actualProps.chartData.datasets\r\n ).map((dataset, datasetIndex) => {\r\n const isSingle =\r\n arrayOrArray(actualProps.chartData.datasets).every(\r\n (dataset) => arrayOrArray(dataset.data).length === 1,\r\n ) || actualProps.type === 'pie';\r\n\r\n const backgroundColor = (\r\n dataset.backgroundColor as string[] | string[][]\r\n ).map((actualColor, i) => {\r\n let schemaArray: string[] = [];\r\n if (typeof actualColor === 'string') {\r\n const color = actualColor.toLowerCase();\r\n if (color in charts) {\r\n const currentBackgroundStylescheme: {\r\n schema: Record<string, string>;\r\n } = {\r\n schema: getValueByPath(\r\n theme.colors as ColorModesScale,\r\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\r\n charts[color.toLowerCase()]?.schema as string,\r\n ) as Record<string, string>,\r\n };\r\n\r\n if (\r\n typeof currentBackgroundStylescheme.schema === 'object' &&\r\n currentBackgroundStylescheme.schema\r\n ) {\r\n if (isSingle) {\r\n if (actualProps.type === 'pie') {\r\n schemaArray = Object.values(\r\n currentBackgroundStylescheme.schema,\r\n ).map((varColor) => {\r\n return window\r\n .getComputedStyle(document.documentElement)\r\n .getPropertyValue(varColor.slice(4, -1));\r\n });\r\n } else {\r\n schemaArray = new Array<string>(6)\r\n .fill(\r\n Object.values(currentBackgroundStylescheme.schema)[\r\n datasetIndex % 6\r\n ],\r\n )\r\n .map((varColor) => {\r\n return window\r\n .getComputedStyle(document.documentElement)\r\n .getPropertyValue(varColor.slice(4, -1));\r\n });\r\n }\r\n } else {\r\n schemaArray = new Array<string>(6).fill(\r\n Object.values(currentBackgroundStylescheme.schema).map(\r\n (varColor) => {\r\n return window\r\n .getComputedStyle(document.documentElement)\r\n .getPropertyValue(varColor.slice(4, -1));\r\n },\r\n )[datasetIndex % 6],\r\n );\r\n }\r\n }\r\n } else {\r\n schemaArray = [color, color, color, color, color, color];\r\n }\r\n } else {\r\n return actualColor[datasetIndex % actualColor.length];\r\n }\r\n\r\n return schemaArray[i % 6];\r\n });\r\n\r\n const hoverBackgroundColor = backgroundColor.map((c) => {\r\n const color = tinycolor(c);\r\n\r\n return (\r\n color.isDark() ? color.lighten(30) : color.darken(30)\r\n ).toHexString();\r\n });\r\n\r\n return {\r\n ...dataset,\r\n hoverBackgroundColor,\r\n backgroundColor,\r\n borderColor: (dataset.borderColor as string[] | string[][]).map(\r\n (color, i) => {\r\n let schemaBorderArray: string[] = [];\r\n if (typeof color === 'string') {\r\n if (color in charts) {\r\n const currentBorderStylescheme: {\r\n schema: Record<string, string>;\r\n } = {\r\n schema: getValueByPath(\r\n theme.colors as ColorModesScale,\r\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\r\n charts[color.toLowerCase()]?.schema as string,\r\n ) as Record<string, string>,\r\n };\r\n\r\n if (\r\n typeof currentBorderStylescheme.schema === 'object' &&\r\n currentBorderStylescheme.schema\r\n ) {\r\n schemaBorderArray = Object.values(\r\n currentBorderStylescheme.schema,\r\n ).map((varColor) => {\r\n return window\r\n .getComputedStyle(document.documentElement)\r\n .getPropertyValue(varColor.slice(4, -1));\r\n });\r\n }\r\n } else {\r\n schemaBorderArray = [\r\n color,\r\n color,\r\n color,\r\n color,\r\n color,\r\n color,\r\n ];\r\n }\r\n } else {\r\n return color[datasetIndex % color.length];\r\n }\r\n return schemaBorderArray[i % 6];\r\n },\r\n ),\r\n };\r\n }),\r\n labels: actualProps.chartData.labels,\r\n };\r\n }, [\r\n actualProps.chartData.datasets,\r\n actualProps.chartData.labels,\r\n actualProps.type,\r\n theme.colors,\r\n theme.layout,\r\n ]);\r\n\r\n const options: ChartOptions = useMemo(() => {\r\n return {\r\n plugins: {\r\n legend: {\r\n position: 'right',\r\n display: actualProps.showLegend,\r\n onHover: (ev, legendItem, legend) => {\r\n const chart = chartRef.current;\r\n if (chart) {\r\n const activeElement = {\r\n datasetIndex:\r\n actualProps.type === 'pie' ? 0 : legendItem.datasetIndex!,\r\n index: actualProps.type === 'pie' ? legendItem.index! : 0,\r\n };\r\n console.log(activeElement, legendItem, legend, ev);\r\n\r\n chart.setActiveElements([activeElement]); // To show thick border\r\n chart.tooltip?.setActiveElements([activeElement], { x: 0, y: 0 });\r\n chart.update();\r\n }\r\n },\r\n },\r\n tooltip: {\r\n callbacks: {\r\n label(tooltipItem: TooltipItem<keyof ChartTypeRegistry>) {\r\n const XLabel = tooltipItem.dataset.label ?? '';\r\n let YValue = tooltipItem.formattedValue;\r\n if (isNaN(parseFloat(YValue))) {\r\n const arrayValue: [number, number] = tooltipItem.raw as [\r\n number,\r\n number,\r\n ];\r\n const realValue = arrayValue[1] - arrayValue[0];\r\n YValue = `${realValue}`;\r\n }\r\n let finalString = '';\r\n if (actualProps.showLegend || actualProps.type === 'pie') {\r\n finalString += XLabel;\r\n if (actualProps.showValues) {\r\n finalString += ': ' + YValue;\r\n }\r\n } else if (actualProps.showValues) {\r\n finalString += YValue;\r\n }\r\n return finalString;\r\n },\r\n title(tooltipItems: TooltipItem<keyof ChartTypeRegistry>[]) {\r\n if (\r\n (actualProps.type !== 'pie' &&\r\n !actualProps.showXAxisValues &&\r\n actualProps.indexAxis === 'x') ||\r\n (actualProps.type !== 'pie' &&\r\n !actualProps.showYAxisValues &&\r\n actualProps.indexAxis === 'y') ||\r\n (actualProps.type === 'pie' && !actualProps.showLegend)\r\n ) {\r\n return '';\r\n }\r\n return tooltipItems[0].label;\r\n },\r\n },\r\n enabled:\r\n (actualProps.indexAxis === 'y'\r\n ? actualProps.showYAxisValues\r\n : actualProps.showXAxisValues) ||\r\n actualProps.showValues ||\r\n actualProps.showLegend,\r\n },\r\n },\r\n aspectRatio: actualProps.aspectRatio,\r\n indexAxis: actualProps.indexAxis,\r\n scales: {\r\n x: {\r\n display: actualProps.type !== 'pie',\r\n title: {\r\n display: actualProps.showXAxisValues,\r\n text:\r\n actualProps.indexAxis === 'y'\r\n ? actualProps.yAxisTitle\r\n : actualProps.xAxisTitle,\r\n },\r\n ticks: {\r\n display: !!actualProps.showXAxisValues,\r\n },\r\n grid: {\r\n display: actualProps.showTable,\r\n },\r\n },\r\n y: {\r\n axis: (actualProps.indexAxis === 'y' ? 'x' : 'y') as 'x' | 'y' | 'r',\r\n display: actualProps.type !== 'pie',\r\n title: {\r\n display: actualProps.showYAxisValues,\r\n text:\r\n actualProps.indexAxis === 'y'\r\n ? actualProps.xAxisTitle\r\n : actualProps.yAxisTitle,\r\n },\r\n ticks: {\r\n display: !!actualProps.showYAxisValues,\r\n },\r\n grid: {\r\n display: actualProps.showTable,\r\n },\r\n },\r\n },\r\n };\r\n }, [\r\n actualProps.aspectRatio,\r\n actualProps.indexAxis,\r\n actualProps.showLegend,\r\n actualProps.showTable,\r\n actualProps.showValues,\r\n actualProps.showXAxisValues,\r\n actualProps.showYAxisValues,\r\n actualProps.type,\r\n actualProps.xAxisTitle,\r\n actualProps.yAxisTitle,\r\n ]);\r\n\r\n return (\r\n <Chart\r\n id={actualProps.id ?? undefined}\r\n className={actualProps.chartId ?? ''}\r\n type={actualProps.type === 'waterfall' ? 'bar' : actualProps.type}\r\n options={options}\r\n data={data}\r\n ref={chartRef}\r\n />\r\n );\r\n};\r\n"],"names":["ChartJS","dataset","Chart"],"mappings":"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"}
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
type TApiaChartCoordinate = {
|
|
2
|
+
/**
|
|
3
|
+
* Value shown in the X axis.
|
|
4
|
+
* In the case of pie charts, it defines the name of each slice.
|
|
5
|
+
*/
|
|
6
|
+
key: string;
|
|
7
|
+
/**
|
|
8
|
+
* Value shown in the Y axis, or to determine the size and value of slices of
|
|
9
|
+
* a pie chart.
|
|
10
|
+
*/
|
|
11
|
+
value: string;
|
|
12
|
+
/**
|
|
13
|
+
* Optional value shown only on the slices of pie charts
|
|
14
|
+
*/
|
|
15
|
+
percentage?: string;
|
|
16
|
+
color?: string;
|
|
17
|
+
};
|
|
18
|
+
type TApiaChartColumn = {
|
|
19
|
+
/**
|
|
20
|
+
* Specific color of a column, does not work on pie charts
|
|
21
|
+
*/
|
|
22
|
+
color: string;
|
|
23
|
+
/**
|
|
24
|
+
* Values of each element
|
|
25
|
+
*/
|
|
26
|
+
sets: TApiaChartCoordinate | TApiaChartCoordinate[];
|
|
27
|
+
/**
|
|
28
|
+
* Name of each column.
|
|
29
|
+
*
|
|
30
|
+
* On bars and line based charts, the legend will show this value.
|
|
31
|
+
*
|
|
32
|
+
* On the pie and waterfall charts, a chart will be created for each column.
|
|
33
|
+
*/
|
|
34
|
+
name: string;
|
|
35
|
+
};
|
|
36
|
+
type TApiaChartDefinition = {
|
|
37
|
+
chartType?: 'barH2D' | 'barV2D' | 'linear' | 'waterfall' | 'pie2D' | 'pie3D';
|
|
38
|
+
axisXTitle?: string;
|
|
39
|
+
axisYTitle?: string;
|
|
40
|
+
aspectRatio?: number;
|
|
41
|
+
hideSelector?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* The colors of the waterfall chart are defined by the bars with positive
|
|
44
|
+
* values and the bars with negative values. So in order to mantain cohesion
|
|
45
|
+
* in the color schema of the chart, this prop establishes the required colors
|
|
46
|
+
* for the chart
|
|
47
|
+
*/
|
|
48
|
+
waterfallColors?: {
|
|
49
|
+
positive: string;
|
|
50
|
+
negative: string;
|
|
51
|
+
total: string;
|
|
52
|
+
stepConnector: string;
|
|
53
|
+
};
|
|
54
|
+
/**
|
|
55
|
+
* Name of the schema of colors shown in the chart. Pie charts must always include a schema
|
|
56
|
+
*/
|
|
57
|
+
colorSchema?: string;
|
|
58
|
+
/**
|
|
59
|
+
* Main data to be parsed and shown in the chart.
|
|
60
|
+
* Depending on the ```chartType``` and the amount of ```column``` objects,
|
|
61
|
+
* the data can be considered differently.
|
|
62
|
+
*
|
|
63
|
+
* Examples:
|
|
64
|
+
* ```
|
|
65
|
+
* const columnsWithSingleColumnObject = columns: {
|
|
66
|
+
* column: {
|
|
67
|
+
* color: 'red',
|
|
68
|
+
* coordinate: [
|
|
69
|
+
* { xValue: '1', yValue: '1' },
|
|
70
|
+
* ...,
|
|
71
|
+
* ],
|
|
72
|
+
* name: 'col1',
|
|
73
|
+
* }
|
|
74
|
+
* };
|
|
75
|
+
* ```
|
|
76
|
+
* ```
|
|
77
|
+
* const columnsWithMultipleColumnObject = columns: {
|
|
78
|
+
* column: [
|
|
79
|
+
* {
|
|
80
|
+
* color: 'red',
|
|
81
|
+
* coordinate: [
|
|
82
|
+
* { xValue: '1', yValue: '1' },
|
|
83
|
+
* ...,
|
|
84
|
+
* ],
|
|
85
|
+
* name: 'col1',
|
|
86
|
+
* },
|
|
87
|
+
* ...,
|
|
88
|
+
* ]
|
|
89
|
+
* };
|
|
90
|
+
*```
|
|
91
|
+
*
|
|
92
|
+
*
|
|
93
|
+
* ***Horizontal and Vertical bars***:
|
|
94
|
+
*
|
|
95
|
+
* ```1 column object```:
|
|
96
|
+
*
|
|
97
|
+
* Each ```coordinate``` is considered an individual separate 'column bar',
|
|
98
|
+
* and the ```colorSchema``` is separated between each ```coordinate``` made
|
|
99
|
+
* 'column bar'.
|
|
100
|
+
*
|
|
101
|
+
*
|
|
102
|
+
* ```Multiple column objects```:
|
|
103
|
+
*
|
|
104
|
+
* Each ```column``` object should have the same amount of coordinates and
|
|
105
|
+
* the coordinates in the same index of the array should have the same
|
|
106
|
+
* ```xValue```
|
|
107
|
+
*
|
|
108
|
+
* Each ```coordinate``` is considered an individual separate 'column bar',
|
|
109
|
+
* but the coordinates of each column are re-accommodated based on their
|
|
110
|
+
* ```xValue``` in order to make groups of columns with the same value on the
|
|
111
|
+
* X axis.
|
|
112
|
+
*
|
|
113
|
+
* In this case there will be 6 groups of columns (based on the length of the
|
|
114
|
+
* coordinate array), each group containing 3 'column bars' (based on the
|
|
115
|
+
* amount of column objects) and the ```colorSchema``` will be distributed
|
|
116
|
+
* inside each group, meaning each column having one single color.
|
|
117
|
+
*
|
|
118
|
+
*
|
|
119
|
+
* ***Linear***:
|
|
120
|
+
*
|
|
121
|
+
* ```N column objects```:
|
|
122
|
+
|
|
123
|
+
*
|
|
124
|
+
* Each ```column``` object is considered a line path, the coordinates being
|
|
125
|
+
* the nodes of said line.
|
|
126
|
+
*
|
|
127
|
+
* ***Pie charts***:
|
|
128
|
+
*
|
|
129
|
+
* ```N column objects```:
|
|
130
|
+
*
|
|
131
|
+
* Each ```column``` object is considered a unique Pie chart, the coordinates
|
|
132
|
+
* being the slices of said pie.
|
|
133
|
+
*
|
|
134
|
+
* ***Waterfall***:
|
|
135
|
+
*
|
|
136
|
+
* ```N column objects```:
|
|
137
|
+
*
|
|
138
|
+
* Each ```column``` object is considered a unique Waterfall chart, the coordinates
|
|
139
|
+
* being bars with the ```yValue``` determining if it goes up or down. Only this
|
|
140
|
+
* type of chart admits negative values on its coordinates.
|
|
141
|
+
*
|
|
142
|
+
*/
|
|
143
|
+
dataSets: {
|
|
144
|
+
data: TApiaChartColumn | TApiaChartColumn[];
|
|
145
|
+
};
|
|
146
|
+
margin?: {
|
|
147
|
+
top: number;
|
|
148
|
+
left: number;
|
|
149
|
+
bottom: number;
|
|
150
|
+
right: number;
|
|
151
|
+
} | number;
|
|
152
|
+
pnl_id?: string;
|
|
153
|
+
showAxisXTitle?: boolean;
|
|
154
|
+
showAxisYTitle?: boolean;
|
|
155
|
+
showGrid?: boolean;
|
|
156
|
+
showLegend?: boolean;
|
|
157
|
+
showValues?: boolean;
|
|
158
|
+
/**
|
|
159
|
+
* Specific for waterfall charts to show the total sum of the values of the
|
|
160
|
+
* chart at the end while each column shows its value. Otherwise the values
|
|
161
|
+
* shown on each bar will represent the current sum of values
|
|
162
|
+
*/
|
|
163
|
+
showTotal?: boolean;
|
|
164
|
+
title: string;
|
|
165
|
+
ratio: {
|
|
166
|
+
height: number;
|
|
167
|
+
width: number;
|
|
168
|
+
maxWidth: number;
|
|
169
|
+
};
|
|
170
|
+
};
|
|
171
|
+
|
|
172
|
+
export type { TApiaChartColumn, TApiaChartCoordinate, TApiaChartDefinition };
|
|
173
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|