intelicoreact 2.0.7 → 2.0.9
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/charts/package.json +5 -0
- package/dist/Atomic/FormElements/Dropdown/components/DropdownLoader.d.ts +1 -1
- package/dist/Atomic/FormElements/FormattedRawSSN/FormattedRawSSN_old.d.ts +7 -7
- package/dist/Atomic/FormElements/Input/Input.d.ts +1 -1
- package/dist/Atomic/FormElements/Input/types.d.ts +0 -5
- package/dist/Atomic/FormElements/InputMask3/InputMask3.interface.d.ts +0 -3
- package/dist/Atomic/FormElements/NumericInput/NumericInput.d.ts +15 -15
- package/dist/Atomic/FormElements/RangeSlider/RangeSlider.d.ts +11 -11
- package/dist/Atomic/FormElements/TagListToDropdown/TagListToDropdown.interface.d.ts +1 -1
- package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.interface.d.ts +4 -4
- package/dist/Atomic/FormElements/VariantsListRadio/VariantsListRadio.d.ts +2 -2
- package/dist/Atomic/FormElements/VariantsListRadio/partials/VariantsListRadioItem.d.ts +4 -4
- package/dist/Atomic/UI/AccordionTable/AccordionTable.d.ts +1 -1
- package/dist/Atomic/UI/AccordionText/AccordionText.d.ts +4 -4
- package/dist/Atomic/UI/Alert/Alert.interface.d.ts +0 -2
- package/dist/Atomic/UI/CircleProgressBar/CircleProgressBar.d.ts +4 -4
- package/dist/Atomic/UI/ExampleChartIntegration/partial/utils.d.ts +1 -1
- package/dist/Atomic/UI/MonoAccordion/MonoAccordion.d.ts +2 -2
- package/dist/Atomic/UI/PieChart/PieChart.d.ts +3 -3
- package/dist/Atomic/UI/Table/Partials/TdHeader.d.ts +1 -1
- package/dist/Atomic/UI/Table/Partials/TdRow.d.ts +1 -1
- package/dist/Atomic/UI/Table/Table.d.ts +1 -1
- package/dist/Classes/AbortableFetch.d.ts +17 -17
- package/dist/Classes/RESTAPI/index.d.ts +1 -1
- package/dist/Classes/RESTAPI/partials/AbortableFetch.d.ts +17 -17
- package/dist/Classes/RESTAPI/partials/CredentialsProcessing.d.ts +4 -4
- package/dist/Functions/hooks/useFormFieldsChangesManager.d.ts +2 -2
- package/dist/Functions/sdk/runtime-sdk/transport.d.ts +2 -2
- package/dist/Functions/useFieldFocus.d.ts +2 -2
- package/dist/Functions/useFormTools/form-drivers/ArrayWithObjects.d.ts +1 -1
- package/dist/Functions/useFormTools/form-drivers/ObjectWithIterableObjects.d.ts +1 -1
- package/dist/Functions/useFormTools/form-drivers/ObjectWithNamedKeyObjects.d.ts +2 -2
- package/dist/Functions/useFormTools/functions/General.d.ts +3 -3
- package/dist/Functions/useFormTools/functions/RenderFields.d.ts +5 -5
- package/dist/Functions/useFormTools/index.d.ts +20 -20
- package/dist/Functions/useMetaInfo.d.ts +2 -2
- package/dist/Functions/usePasswordChecker.d.ts +1 -1
- package/dist/Functions/utils.d.ts +11 -11
- package/dist/charts.cjs +927 -0
- package/dist/charts.cjs.map +7 -0
- package/dist/charts.d.ts +7 -0
- package/dist/charts.js +911 -0
- package/dist/charts.js.map +7 -0
- package/dist/form.cjs +1498 -1933
- package/dist/form.cjs.map +4 -4
- package/dist/form.js +1114 -1549
- package/dist/form.js.map +4 -4
- package/dist/hooks.cjs +8 -324
- package/dist/hooks.cjs.map +4 -4
- package/dist/hooks.js +8 -324
- package/dist/hooks.js.map +4 -4
- package/dist/index.cjs +2507 -9293
- package/dist/index.cjs.map +4 -4
- package/dist/index.js +2059 -8861
- package/dist/index.js.map +4 -4
- package/dist/layout.cjs +207 -6308
- package/dist/layout.cjs.map +4 -4
- package/dist/layout.js +202 -6303
- package/dist/layout.js.map +4 -4
- package/dist/presets.cjs +0 -643
- package/dist/presets.cjs.map +4 -4
- package/dist/presets.js +0 -633
- package/dist/presets.js.map +4 -4
- package/dist/ui.cjs +711 -7854
- package/dist/ui.cjs.map +4 -4
- package/dist/ui.d.ts +0 -5
- package/dist/ui.js +722 -7881
- package/dist/ui.js.map +4 -4
- package/dist/utils.cjs +4 -51
- package/dist/utils.cjs.map +3 -3
- package/dist/utils.js +4 -51
- package/dist/utils.js.map +3 -3
- package/package.json +19 -3
- package/styles.css +1 -0
- package/dist/Atomic/UI/DynamicIcon/DynamicIcon.d.ts +0 -4
- package/dist/Atomic/UI/DynamicIcon/DynamicIcon.interface.d.ts +0 -6
- package/dist/Atomic/UI/DynamicIcon/index.d.ts +0 -3
package/dist/charts.cjs
ADDED
|
@@ -0,0 +1,927 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/charts.ts
|
|
30
|
+
var charts_exports = {};
|
|
31
|
+
__export(charts_exports, {
|
|
32
|
+
Chart: () => Chart_default2,
|
|
33
|
+
PieChart: () => PieChart_default
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(charts_exports);
|
|
36
|
+
|
|
37
|
+
// src/Atomic/UI/Chart/Chart.tsx
|
|
38
|
+
var import_chart = require("chart.js");
|
|
39
|
+
var import_classnames2 = __toESM(require("classnames"), 1);
|
|
40
|
+
var import_react2 = __toESM(require("react"), 1);
|
|
41
|
+
var ChartComponents = __toESM(require("react-chartjs-2"), 1);
|
|
42
|
+
|
|
43
|
+
// src/Functions/utils.js
|
|
44
|
+
var import_react = require("react");
|
|
45
|
+
var import_moment_timezone = __toESM(require("moment-timezone"), 1);
|
|
46
|
+
var clone = (input) => {
|
|
47
|
+
if (input === null || typeof input !== "object") return input;
|
|
48
|
+
const data = input instanceof Array ? [] : {};
|
|
49
|
+
for (const i in input) data[i] = clone(input[i]);
|
|
50
|
+
return data;
|
|
51
|
+
};
|
|
52
|
+
var omitKeys = (obj = {}, keys = []) => keys.reduce((acc, key) => {
|
|
53
|
+
const { [key]: omit, ...rest } = acc;
|
|
54
|
+
return rest;
|
|
55
|
+
}, obj);
|
|
56
|
+
String.prototype.longerThan = function(compareWith) {
|
|
57
|
+
return this?.length > compareWith?.length;
|
|
58
|
+
};
|
|
59
|
+
String.prototype.lastIndexEqualsTo = function(index) {
|
|
60
|
+
return this?.length - 1 === index;
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
// src/Atomic/UI/Chart/partial/Chart.constants.js
|
|
64
|
+
var CHART_TYPES = ["Bar", "Line"];
|
|
65
|
+
var DEFAULT_CHART_MODEL = "emptyLayout";
|
|
66
|
+
var FINTURF_ADD_GRADIENT_COLORS_POSITIVE = ["#53D1AD", "#389AA3"];
|
|
67
|
+
var FINTURF_ADD_GRADIENT_COLORS_NEGATIVE = ["#FDB4DB", "#FA2E69"];
|
|
68
|
+
var GRADIENTS_OBJECTS = {
|
|
69
|
+
finturf: {
|
|
70
|
+
bar: [
|
|
71
|
+
{
|
|
72
|
+
gradientTargetPropertyName: "backgroundColor",
|
|
73
|
+
colors: FINTURF_ADD_GRADIENT_COLORS_POSITIVE,
|
|
74
|
+
direction: "toBottom",
|
|
75
|
+
typeDistributionOfGradientPoints: "personalBase",
|
|
76
|
+
collorStopPoints: [0.2, 1]
|
|
77
|
+
}
|
|
78
|
+
],
|
|
79
|
+
line: [
|
|
80
|
+
{
|
|
81
|
+
gradientTargetPropertyName: "borderColor",
|
|
82
|
+
colors: FINTURF_ADD_GRADIENT_COLORS_POSITIVE,
|
|
83
|
+
direction: "toRight"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
gradientTargetPropertyName: "backgroundColor",
|
|
87
|
+
colors: [
|
|
88
|
+
"rgba(84, 210, 173, 0.2)",
|
|
89
|
+
"rgba(84, 210, 173, 0.1)",
|
|
90
|
+
"rgba(84, 210, 173, 0)"
|
|
91
|
+
],
|
|
92
|
+
direction: "toBottom",
|
|
93
|
+
collorStopPoints: [0.31, 0.72, 1],
|
|
94
|
+
isAddFill: true
|
|
95
|
+
}
|
|
96
|
+
],
|
|
97
|
+
positiveLineIcon: [
|
|
98
|
+
{
|
|
99
|
+
gradientTargetPropertyName: "borderColor",
|
|
100
|
+
colors: FINTURF_ADD_GRADIENT_COLORS_POSITIVE,
|
|
101
|
+
direction: "toRight"
|
|
102
|
+
}
|
|
103
|
+
],
|
|
104
|
+
negativeLineIcon: [
|
|
105
|
+
{
|
|
106
|
+
gradientTargetPropertyName: "borderColor",
|
|
107
|
+
colors: FINTURF_ADD_GRADIENT_COLORS_NEGATIVE,
|
|
108
|
+
direction: "toRight"
|
|
109
|
+
}
|
|
110
|
+
]
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
var FINTURF_TOOLTIP_OPTIONS = {
|
|
114
|
+
enabled: true,
|
|
115
|
+
mode: "index",
|
|
116
|
+
intersect: false,
|
|
117
|
+
padding: 8,
|
|
118
|
+
backgroundColor: "#FFFFFF",
|
|
119
|
+
titleColor: "#757F8C",
|
|
120
|
+
borderColor: "#D6D9E4",
|
|
121
|
+
titleFont: {
|
|
122
|
+
family: "Sarabun",
|
|
123
|
+
style: "normal",
|
|
124
|
+
weight: 500,
|
|
125
|
+
size: 12
|
|
126
|
+
// line-height: 18px;
|
|
127
|
+
},
|
|
128
|
+
titleAlign: "center",
|
|
129
|
+
bodyColor: "#1E1E2D",
|
|
130
|
+
bodyFont: {
|
|
131
|
+
family: "Sarabun",
|
|
132
|
+
style: "normal",
|
|
133
|
+
weight: 400,
|
|
134
|
+
size: 14
|
|
135
|
+
},
|
|
136
|
+
bodyAlign: "center",
|
|
137
|
+
caretSize: 0,
|
|
138
|
+
displayColors: false,
|
|
139
|
+
borderWidth: 1,
|
|
140
|
+
borderRadius: 6,
|
|
141
|
+
callbacks: {
|
|
142
|
+
label: (context) => context.raw || "0"
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
var ICON_MODELS = [
|
|
146
|
+
"lineIconLayout",
|
|
147
|
+
"finturfPositiveLineIcon",
|
|
148
|
+
"finturfNegativeLineIcon"
|
|
149
|
+
];
|
|
150
|
+
var COMPONENT_OPTIONS = {
|
|
151
|
+
disableDescriptionsFor: [...ICON_MODELS],
|
|
152
|
+
disableChartTypeSwitcherFor: [...ICON_MODELS, "barLayout", "lineLayout"]
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
// src/Atomic/UI/Chart/partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon.tsx
|
|
156
|
+
var import_classnames = __toESM(require("classnames"), 1);
|
|
157
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
158
|
+
var RC = "chart__type-switcher-icon";
|
|
159
|
+
function getIcon(type) {
|
|
160
|
+
switch (type) {
|
|
161
|
+
case "Bar":
|
|
162
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
163
|
+
"svg",
|
|
164
|
+
{
|
|
165
|
+
width: "24",
|
|
166
|
+
height: "24",
|
|
167
|
+
viewBox: "0 0 24 25",
|
|
168
|
+
fill: "none",
|
|
169
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
170
|
+
children: [
|
|
171
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { y: "0.5", width: "24", height: "24", rx: "4", fill: "#EAF2FF" }),
|
|
172
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
173
|
+
"path",
|
|
174
|
+
{
|
|
175
|
+
d: "M18 18V11",
|
|
176
|
+
stroke: "#1F7499",
|
|
177
|
+
strokeWidth: "2",
|
|
178
|
+
strokeLinecap: "round",
|
|
179
|
+
strokeLinejoin: "round"
|
|
180
|
+
}
|
|
181
|
+
),
|
|
182
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
183
|
+
"path",
|
|
184
|
+
{
|
|
185
|
+
d: "M12 18V6",
|
|
186
|
+
stroke: "#1F7499",
|
|
187
|
+
strokeWidth: "2",
|
|
188
|
+
strokeLinecap: "round",
|
|
189
|
+
strokeLinejoin: "round"
|
|
190
|
+
}
|
|
191
|
+
),
|
|
192
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
193
|
+
"path",
|
|
194
|
+
{
|
|
195
|
+
d: "M6 18V13",
|
|
196
|
+
stroke: "#1F7499",
|
|
197
|
+
strokeWidth: "2",
|
|
198
|
+
strokeLinecap: "round",
|
|
199
|
+
strokeLinejoin: "round"
|
|
200
|
+
}
|
|
201
|
+
)
|
|
202
|
+
]
|
|
203
|
+
}
|
|
204
|
+
);
|
|
205
|
+
case "Line":
|
|
206
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
207
|
+
"svg",
|
|
208
|
+
{
|
|
209
|
+
width: "24",
|
|
210
|
+
height: "24",
|
|
211
|
+
viewBox: "0 0 24 25",
|
|
212
|
+
fill: "none",
|
|
213
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
214
|
+
children: [
|
|
215
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { y: "0.5", width: "24", height: "24", rx: "4", fill: "#EAF2FF" }),
|
|
216
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
217
|
+
"path",
|
|
218
|
+
{
|
|
219
|
+
d: "M21 8L15.2544 13.2668C14.1075 14.3181 12.3288 14.3014 11.1818\n 13.25V13.25C10.0349 12.1986 8.25615 12.1819 7.10919 13.2332L3 17",
|
|
220
|
+
stroke: "#1F7499",
|
|
221
|
+
strokeWidth: "2",
|
|
222
|
+
strokeLinecap: "round",
|
|
223
|
+
strokeLinejoin: "round"
|
|
224
|
+
}
|
|
225
|
+
)
|
|
226
|
+
]
|
|
227
|
+
}
|
|
228
|
+
);
|
|
229
|
+
default:
|
|
230
|
+
return null;
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
var ChartTypeSwitcherIcon = ({
|
|
234
|
+
iconType,
|
|
235
|
+
isActive,
|
|
236
|
+
className,
|
|
237
|
+
onClick
|
|
238
|
+
}) => {
|
|
239
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
240
|
+
"div",
|
|
241
|
+
{
|
|
242
|
+
className: (0, import_classnames.default)(RC, { [`${RC}_active`]: isActive }, className),
|
|
243
|
+
onClick,
|
|
244
|
+
children: getIcon(iconType)
|
|
245
|
+
}
|
|
246
|
+
);
|
|
247
|
+
};
|
|
248
|
+
var ChartTypeSwitcherIcon_default = ChartTypeSwitcherIcon;
|
|
249
|
+
|
|
250
|
+
// src/Atomic/UI/Chart/partial/datasetSetters.js
|
|
251
|
+
var addDatasetsObjects = (currentData, mutation) => ({
|
|
252
|
+
...currentData,
|
|
253
|
+
datasets: currentData.datasets?.map?.((dataset) => ({
|
|
254
|
+
...dataset,
|
|
255
|
+
...typeof mutation === "function" ? mutation(dataset) : mutation
|
|
256
|
+
}))
|
|
257
|
+
});
|
|
258
|
+
var createGradient = ({
|
|
259
|
+
ctx,
|
|
260
|
+
area,
|
|
261
|
+
colors,
|
|
262
|
+
direction,
|
|
263
|
+
correctionFactors,
|
|
264
|
+
collorStopPoints
|
|
265
|
+
}) => {
|
|
266
|
+
const getStartGradient = () => {
|
|
267
|
+
switch (direction) {
|
|
268
|
+
case "toTop-toRight":
|
|
269
|
+
return ctx.createLinearGradient(
|
|
270
|
+
area.left,
|
|
271
|
+
area.bottom,
|
|
272
|
+
area.right,
|
|
273
|
+
area.top
|
|
274
|
+
);
|
|
275
|
+
case "toTop-toLeft":
|
|
276
|
+
return ctx.createLinearGradient(
|
|
277
|
+
area.right,
|
|
278
|
+
area.bottom,
|
|
279
|
+
area.left,
|
|
280
|
+
area.top
|
|
281
|
+
);
|
|
282
|
+
case "toBottom-toRight":
|
|
283
|
+
return ctx.createLinearGradient(
|
|
284
|
+
area.left,
|
|
285
|
+
area.top,
|
|
286
|
+
area.right,
|
|
287
|
+
area.bottom
|
|
288
|
+
);
|
|
289
|
+
case "toBottom-toLeft":
|
|
290
|
+
return ctx.createLinearGradient(
|
|
291
|
+
area.right,
|
|
292
|
+
area.top,
|
|
293
|
+
area.left,
|
|
294
|
+
area.bottom
|
|
295
|
+
);
|
|
296
|
+
case "toBottom":
|
|
297
|
+
return ctx.createLinearGradient(0, area.top, 0, area.bottom);
|
|
298
|
+
case "toTop":
|
|
299
|
+
return ctx.createLinearGradient(0, area.bottom, 0, area.top);
|
|
300
|
+
case "toLeft":
|
|
301
|
+
return ctx.createLinearGradient(area.right, 0, area.left, 0);
|
|
302
|
+
case "toRight":
|
|
303
|
+
default:
|
|
304
|
+
return ctx.createLinearGradient(area.left, 0, area.right, 0);
|
|
305
|
+
}
|
|
306
|
+
};
|
|
307
|
+
const getGradientWithPoints = (corection) => {
|
|
308
|
+
const newGradient = getStartGradient();
|
|
309
|
+
const staptPoint = corection ? 1 - corection : 0;
|
|
310
|
+
colors.forEach((color, idx) => {
|
|
311
|
+
const point = (() => {
|
|
312
|
+
if (idx === colors.length - 1) return 1;
|
|
313
|
+
return collorStopPoints && Array.isArray(collorStopPoints) ? staptPoint + collorStopPoints[idx] * (corection || 1) : staptPoint + 1 / colors.length * (corection || 1);
|
|
314
|
+
})();
|
|
315
|
+
newGradient.addColorStop(point.toFixed(2), color);
|
|
316
|
+
});
|
|
317
|
+
return newGradient;
|
|
318
|
+
};
|
|
319
|
+
return correctionFactors ? correctionFactors.map((corection) => getGradientWithPoints(corection)) : getGradientWithPoints();
|
|
320
|
+
};
|
|
321
|
+
var addGradientsObject = (currentData, gradientSettingsObj, chartInstance) => addDatasetsObjects(currentData, (dataset) => ({
|
|
322
|
+
[gradientSettingsObj.gradientTargetPropertyName]: createGradient({
|
|
323
|
+
ctx: chartInstance.ctx,
|
|
324
|
+
area: chartInstance.chartArea,
|
|
325
|
+
colors: gradientSettingsObj.colors,
|
|
326
|
+
direction: gradientSettingsObj.direction,
|
|
327
|
+
correctionFactors: gradientSettingsObj.typeDistributionOfGradientPoints === "personalBase" ? dataset.data.map(
|
|
328
|
+
(value) => value / Math.max.apply(null, dataset.data)
|
|
329
|
+
) : null,
|
|
330
|
+
collorStopPoints: gradientSettingsObj.collorStopPoints
|
|
331
|
+
}),
|
|
332
|
+
...gradientSettingsObj.isAddFill ? { fill: true } : {}
|
|
333
|
+
}));
|
|
334
|
+
var addNotLibraryAnimation = (currentData, animationObj, chartInstance) => {
|
|
335
|
+
const { type, ...restAnimationObj } = animationObj || {};
|
|
336
|
+
switch (type) {
|
|
337
|
+
case "runningColumns":
|
|
338
|
+
const runningColumnsDefaultFromValue = 25;
|
|
339
|
+
const runningColumnsDefaultToValue = 75;
|
|
340
|
+
const runningColumnsDefaultAverageValue = 50;
|
|
341
|
+
const runningColumnsDefaultColumnsDelayCoef = 50;
|
|
342
|
+
return addDatasetsObjects(currentData, (dataset) => ({
|
|
343
|
+
animations: dataset.data.map((item, idx) => ({
|
|
344
|
+
y: {
|
|
345
|
+
duration: animationObj.duration,
|
|
346
|
+
easing: animationObj.easing || "linear",
|
|
347
|
+
from: animationObj.isFixExtremeColumns && (!idx || idx === dataset.data.length - 1) ? runningColumnsDefaultAverageValue : animationObj.from || runningColumnsDefaultFromValue,
|
|
348
|
+
to: animationObj.isFixExtremeColumns && (!idx || idx === dataset.data.length - 1) ? runningColumnsDefaultAverageValue : animationObj.to || runningColumnsDefaultToValue,
|
|
349
|
+
loop: true,
|
|
350
|
+
delay: Math.random().toFixed(1) * (animationObj.columnsDelayCoef || runningColumnsDefaultColumnsDelayCoef)
|
|
351
|
+
}
|
|
352
|
+
}))
|
|
353
|
+
}));
|
|
354
|
+
default:
|
|
355
|
+
return currentData;
|
|
356
|
+
}
|
|
357
|
+
};
|
|
358
|
+
function changeData(currentData, iterationKey, settingsForChange, chartInstance) {
|
|
359
|
+
switch (iterationKey) {
|
|
360
|
+
case "setMaxBarThickness":
|
|
361
|
+
return addDatasetsObjects(currentData, {
|
|
362
|
+
maxBarThickness: settingsForChange
|
|
363
|
+
});
|
|
364
|
+
case "addGradientsObjects":
|
|
365
|
+
return settingsForChange.reduce(
|
|
366
|
+
(acc, gradientSettingsObj) => addGradientsObject(acc, gradientSettingsObj, chartInstance),
|
|
367
|
+
clone(currentData)
|
|
368
|
+
);
|
|
369
|
+
case "addNotLibraryAnimations":
|
|
370
|
+
return settingsForChange.reduce(
|
|
371
|
+
(acc, animationObj) => addNotLibraryAnimation(acc, animationObj, chartInstance),
|
|
372
|
+
currentData
|
|
373
|
+
);
|
|
374
|
+
default:
|
|
375
|
+
return currentData;
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
var datasetSetters_default = changeData;
|
|
379
|
+
|
|
380
|
+
// src/Atomic/UI/Chart/partial/optionsSetters.js
|
|
381
|
+
var addGradientsSettings = (currentOptions, gradientsSettings) => ({
|
|
382
|
+
...currentOptions,
|
|
383
|
+
notLibraryOptions: {
|
|
384
|
+
...currentOptions.notLibraryOptions,
|
|
385
|
+
changeData: {
|
|
386
|
+
...currentOptions.notLibraryOptions?.changeData,
|
|
387
|
+
addGradientsObjects: gradientsSettings
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
});
|
|
391
|
+
var addTooltipOptions = (currentOptions, tooltipOptions) => ({
|
|
392
|
+
...currentOptions,
|
|
393
|
+
options: {
|
|
394
|
+
...currentOptions.options,
|
|
395
|
+
plugins: {
|
|
396
|
+
...currentOptions.options.plugins,
|
|
397
|
+
tooltip: tooltipOptions
|
|
398
|
+
}
|
|
399
|
+
}
|
|
400
|
+
});
|
|
401
|
+
var addAdditionalOptions = (currentOptions, optionsToAdd) => {
|
|
402
|
+
const addOption = (currentOptions2, optionKey, optionData) => {
|
|
403
|
+
switch (optionKey) {
|
|
404
|
+
case "addGradientsSettings":
|
|
405
|
+
return addGradientsSettings(currentOptions2, optionData);
|
|
406
|
+
case "addTooltipOptions":
|
|
407
|
+
return addTooltipOptions(currentOptions2, optionData);
|
|
408
|
+
default:
|
|
409
|
+
return currentOptions2;
|
|
410
|
+
}
|
|
411
|
+
};
|
|
412
|
+
const iterator = Object.keys(optionsToAdd);
|
|
413
|
+
return iterator.reduce(
|
|
414
|
+
(acc, key) => addOption(acc, key, optionsToAdd[key]),
|
|
415
|
+
currentOptions
|
|
416
|
+
);
|
|
417
|
+
};
|
|
418
|
+
var optionsSetters_default = addAdditionalOptions;
|
|
419
|
+
|
|
420
|
+
// src/Atomic/UI/Chart/partial/optionsConstructor.js
|
|
421
|
+
var reactChartJsOptionsLayouts = {
|
|
422
|
+
lineIconLayout: {
|
|
423
|
+
options: {
|
|
424
|
+
responsive: true,
|
|
425
|
+
maintainAspectRatio: false,
|
|
426
|
+
scales: {
|
|
427
|
+
x: { display: false },
|
|
428
|
+
y: { display: false }
|
|
429
|
+
},
|
|
430
|
+
elements: {
|
|
431
|
+
point: { radius: 0 },
|
|
432
|
+
line: {
|
|
433
|
+
tension: 0.45,
|
|
434
|
+
borderJoinStyle: "round",
|
|
435
|
+
borderWidth: 2,
|
|
436
|
+
capBezierPoints: true
|
|
437
|
+
}
|
|
438
|
+
}
|
|
439
|
+
},
|
|
440
|
+
redraw: true,
|
|
441
|
+
notLibraryOptions: {
|
|
442
|
+
// Этот ключ должен быть в любой итоговой конфигурации для нормальной работы компонента именно в такой вложенности
|
|
443
|
+
// На основании этого ключа будет приниматься решение какой компонет будет использован (<Line />, <Bar /> и т.д.)
|
|
444
|
+
// => Файл Chart.js => определение ChartComponent
|
|
445
|
+
chartTypeKey: "Line",
|
|
446
|
+
setCanvasDimensions: {
|
|
447
|
+
width: "75px",
|
|
448
|
+
height: "35px"
|
|
449
|
+
}
|
|
450
|
+
}
|
|
451
|
+
},
|
|
452
|
+
lineLayout: {
|
|
453
|
+
options: {
|
|
454
|
+
responsive: true,
|
|
455
|
+
elements: {
|
|
456
|
+
point: {
|
|
457
|
+
radius: 4,
|
|
458
|
+
pointStyle: "circle",
|
|
459
|
+
backgroundColor: "#FFFFFF",
|
|
460
|
+
color: "#FFFFFF"
|
|
461
|
+
},
|
|
462
|
+
line: {
|
|
463
|
+
tension: 0.45,
|
|
464
|
+
borderJoinStyle: "round",
|
|
465
|
+
borderWidth: 2,
|
|
466
|
+
capBezierPoints: true
|
|
467
|
+
}
|
|
468
|
+
}
|
|
469
|
+
},
|
|
470
|
+
redraw: true,
|
|
471
|
+
notLibraryOptions: {
|
|
472
|
+
// Этот ключ должен быть в любой итоговой конфигурации для нормальной работы компонента именно в такой вложенности
|
|
473
|
+
// На основании этого ключа будет приниматься решение какой компонет будет использован (<Line />, <Bar /> и т.д.)
|
|
474
|
+
// => Файл Chart.js => определение ChartComponent
|
|
475
|
+
chartTypeKey: "Line"
|
|
476
|
+
}
|
|
477
|
+
},
|
|
478
|
+
barLayout: {
|
|
479
|
+
options: {
|
|
480
|
+
responsive: true,
|
|
481
|
+
elements: {
|
|
482
|
+
bar: {
|
|
483
|
+
borderRadius: 10
|
|
484
|
+
}
|
|
485
|
+
}
|
|
486
|
+
},
|
|
487
|
+
redraw: true,
|
|
488
|
+
notLibraryOptions: {
|
|
489
|
+
// Этот ключ должен быть в любой итоговой конфигурации для нормальной работы компонента именно в такой вложенности
|
|
490
|
+
// На основании этого ключа будет приниматься решение какой компонет будет использован (<Line />, <Bar /> и т.д.)
|
|
491
|
+
// => Файл Chart.js => определение ChartComponent
|
|
492
|
+
chartTypeKey: "Bar"
|
|
493
|
+
}
|
|
494
|
+
},
|
|
495
|
+
emptyLayout: {
|
|
496
|
+
options: {
|
|
497
|
+
responsive: true,
|
|
498
|
+
maintainAspectRatio: false,
|
|
499
|
+
scales: {
|
|
500
|
+
x: { display: false },
|
|
501
|
+
y: { display: false }
|
|
502
|
+
},
|
|
503
|
+
elements: {
|
|
504
|
+
point: { radius: 0 },
|
|
505
|
+
line: { borderWidth: 0 }
|
|
506
|
+
}
|
|
507
|
+
},
|
|
508
|
+
notLibraryOptions: {
|
|
509
|
+
// Этот ключ должен быть в любой итоговой конфигурации для нормальной работы компонента именно в такой вложенности
|
|
510
|
+
// На основании этого ключа будет приниматься решение какой компонет будет использован (<Line />, <Bar /> и т.д.)
|
|
511
|
+
// => Файл Chart.js => определение подкомпонента ChartComponent => строка const Component = ...
|
|
512
|
+
chartTypeKey: "Line"
|
|
513
|
+
}
|
|
514
|
+
}
|
|
515
|
+
};
|
|
516
|
+
var finturfChartLayouts = (() => {
|
|
517
|
+
return ["barLayout", "lineLayout"].reduce(
|
|
518
|
+
(acc, key) => ({
|
|
519
|
+
...acc,
|
|
520
|
+
[key]: {
|
|
521
|
+
...reactChartJsOptionsLayouts[key],
|
|
522
|
+
options: {
|
|
523
|
+
...reactChartJsOptionsLayouts[key].options,
|
|
524
|
+
scales: {
|
|
525
|
+
...reactChartJsOptionsLayouts[key].options?.scales,
|
|
526
|
+
x: {
|
|
527
|
+
...reactChartJsOptionsLayouts[key].options?.scales?.x,
|
|
528
|
+
grid: {
|
|
529
|
+
...reactChartJsOptionsLayouts[key].options?.scales?.x?.grid,
|
|
530
|
+
display: false,
|
|
531
|
+
offset: true
|
|
532
|
+
},
|
|
533
|
+
ticks: {
|
|
534
|
+
...reactChartJsOptionsLayouts[key].options?.scales?.y?.ticks,
|
|
535
|
+
autoSkipPadding: 10,
|
|
536
|
+
align: "center",
|
|
537
|
+
color: "#757F8C",
|
|
538
|
+
lineHeight: 18,
|
|
539
|
+
font: {
|
|
540
|
+
family: "Sarabun",
|
|
541
|
+
style: "normal",
|
|
542
|
+
weight: 400,
|
|
543
|
+
size: 8
|
|
544
|
+
}
|
|
545
|
+
// callback: (value, index, ticks) => {
|
|
546
|
+
// console.log(value);
|
|
547
|
+
// console.log(index);
|
|
548
|
+
// console.log(ticks);
|
|
549
|
+
// console.log('***********');
|
|
550
|
+
// return value;
|
|
551
|
+
// },
|
|
552
|
+
}
|
|
553
|
+
},
|
|
554
|
+
y: {
|
|
555
|
+
...reactChartJsOptionsLayouts[key].options?.scales?.y,
|
|
556
|
+
min: 0,
|
|
557
|
+
// grace: '5%',
|
|
558
|
+
bounds: "data",
|
|
559
|
+
grid: {
|
|
560
|
+
...reactChartJsOptionsLayouts[key].options?.scales?.y?.grid,
|
|
561
|
+
borderColor: "#E1E8F1",
|
|
562
|
+
color: "#E1E8F1",
|
|
563
|
+
borderDash: [5],
|
|
564
|
+
// borderDashOffset: 12,
|
|
565
|
+
drawTicks: false,
|
|
566
|
+
z: -1
|
|
567
|
+
},
|
|
568
|
+
ticks: {
|
|
569
|
+
...reactChartJsOptionsLayouts[key].options?.scales?.y?.ticks,
|
|
570
|
+
autoSkipPadding: 10,
|
|
571
|
+
align: "center",
|
|
572
|
+
color: "#A0A4B0",
|
|
573
|
+
lineHeight: 18,
|
|
574
|
+
padding: 6,
|
|
575
|
+
font: {
|
|
576
|
+
family: "Sarabun",
|
|
577
|
+
style: "normal",
|
|
578
|
+
weight: 400,
|
|
579
|
+
size: 10
|
|
580
|
+
}
|
|
581
|
+
}
|
|
582
|
+
}
|
|
583
|
+
}
|
|
584
|
+
},
|
|
585
|
+
notLibraryOptions: {
|
|
586
|
+
...reactChartJsOptionsLayouts[key].notLibraryOptions,
|
|
587
|
+
setCanvasDimensions: {
|
|
588
|
+
height: "194px"
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
}
|
|
592
|
+
}),
|
|
593
|
+
{}
|
|
594
|
+
);
|
|
595
|
+
})();
|
|
596
|
+
var finturfChartBar = {
|
|
597
|
+
...finturfChartLayouts.barLayout,
|
|
598
|
+
options: {
|
|
599
|
+
...finturfChartLayouts.barLayout?.options,
|
|
600
|
+
maintainAspectRatio: false,
|
|
601
|
+
elements: {
|
|
602
|
+
...finturfChartLayouts.barLayout?.options?.elements,
|
|
603
|
+
bar: {
|
|
604
|
+
...finturfChartLayouts.barLayout?.options?.elements?.bar,
|
|
605
|
+
borderRadius: 4
|
|
606
|
+
}
|
|
607
|
+
}
|
|
608
|
+
},
|
|
609
|
+
notLibraryOptions: {
|
|
610
|
+
...finturfChartLayouts.barLayout?.notLibraryOptions,
|
|
611
|
+
changeData: {
|
|
612
|
+
...finturfChartLayouts.barLayout?.notLibraryOptions?.changeData,
|
|
613
|
+
setMaxBarThickness: 16
|
|
614
|
+
}
|
|
615
|
+
}
|
|
616
|
+
};
|
|
617
|
+
var finturfChartLine = {
|
|
618
|
+
...finturfChartLayouts.lineLayout,
|
|
619
|
+
options: {
|
|
620
|
+
...finturfChartLayouts.lineLayout?.options,
|
|
621
|
+
maintainAspectRatio: false,
|
|
622
|
+
elements: {
|
|
623
|
+
...finturfChartLayouts.lineLayout.options?.elements,
|
|
624
|
+
point: {
|
|
625
|
+
...finturfChartLayouts.lineLayout.options?.elements?.point,
|
|
626
|
+
radius: 2,
|
|
627
|
+
borderColor: "#32A784",
|
|
628
|
+
borderWidth: 4
|
|
629
|
+
}
|
|
630
|
+
}
|
|
631
|
+
}
|
|
632
|
+
};
|
|
633
|
+
var finturfReactChartJsOptions = {
|
|
634
|
+
finturfChartBar: optionsSetters_default(finturfChartBar, {
|
|
635
|
+
addGradientsSettings: GRADIENTS_OBJECTS.finturf.bar,
|
|
636
|
+
addTooltipOptions: FINTURF_TOOLTIP_OPTIONS
|
|
637
|
+
}),
|
|
638
|
+
finturfLoadingModeBar: {
|
|
639
|
+
...finturfChartBar,
|
|
640
|
+
options: {
|
|
641
|
+
...finturfChartBar.options,
|
|
642
|
+
animations: {
|
|
643
|
+
...finturfChartBar.options?.animations,
|
|
644
|
+
y: {
|
|
645
|
+
...finturfChartBar.options?.animations?.y,
|
|
646
|
+
duration: 0
|
|
647
|
+
}
|
|
648
|
+
}
|
|
649
|
+
},
|
|
650
|
+
notLibraryOptions: {
|
|
651
|
+
...finturfChartBar.notLibraryOptions,
|
|
652
|
+
changeData: {
|
|
653
|
+
...finturfChartBar.notLibraryOptions?.changeData,
|
|
654
|
+
addNotLibraryAnimations: [
|
|
655
|
+
{
|
|
656
|
+
type: "runningColumns",
|
|
657
|
+
// duration - ms
|
|
658
|
+
duration: 600,
|
|
659
|
+
// default easing - 'linear',
|
|
660
|
+
// easing: 'easeInOutExpo',
|
|
661
|
+
// ToDo - предусмотреть 'auto' и default для from и to
|
|
662
|
+
from: 10,
|
|
663
|
+
to: 75,
|
|
664
|
+
columnsDelayCoef: 500
|
|
665
|
+
}
|
|
666
|
+
]
|
|
667
|
+
}
|
|
668
|
+
}
|
|
669
|
+
},
|
|
670
|
+
finturfChartLine: optionsSetters_default(finturfChartLine, {
|
|
671
|
+
addGradientsSettings: GRADIENTS_OBJECTS.finturf.line,
|
|
672
|
+
addTooltipOptions: FINTURF_TOOLTIP_OPTIONS
|
|
673
|
+
// consoleCurrentData: true,
|
|
674
|
+
}),
|
|
675
|
+
finturfLoadingModeLine: {
|
|
676
|
+
...finturfChartLine,
|
|
677
|
+
options: {
|
|
678
|
+
...finturfChartLine.options,
|
|
679
|
+
elements: {
|
|
680
|
+
...finturfChartLine.options?.elements,
|
|
681
|
+
point: {
|
|
682
|
+
...finturfChartLine.options?.elements?.point,
|
|
683
|
+
radius: 4,
|
|
684
|
+
borderWidth: 1,
|
|
685
|
+
borderColor: "#E1E8F1"
|
|
686
|
+
}
|
|
687
|
+
},
|
|
688
|
+
animations: {
|
|
689
|
+
...finturfChartLine.options?.animations,
|
|
690
|
+
y: {
|
|
691
|
+
...finturfChartLine.options?.animations?.y,
|
|
692
|
+
duration: 0
|
|
693
|
+
}
|
|
694
|
+
}
|
|
695
|
+
},
|
|
696
|
+
notLibraryOptions: {
|
|
697
|
+
...finturfChartLine.notLibraryOptions,
|
|
698
|
+
changeData: {
|
|
699
|
+
...finturfChartLine.notLibraryOptions?.changeData,
|
|
700
|
+
addNotLibraryAnimations: [
|
|
701
|
+
{
|
|
702
|
+
type: "runningColumns",
|
|
703
|
+
// duration - ms
|
|
704
|
+
duration: 600,
|
|
705
|
+
// default easing - 'linear',
|
|
706
|
+
// easing: 'easeInOutExpo',
|
|
707
|
+
columnsDelayCoef: 500,
|
|
708
|
+
isFixExtremeColumns: true
|
|
709
|
+
}
|
|
710
|
+
]
|
|
711
|
+
}
|
|
712
|
+
}
|
|
713
|
+
},
|
|
714
|
+
finturfPositiveLineIcon: optionsSetters_default(
|
|
715
|
+
reactChartJsOptionsLayouts.lineIconLayout,
|
|
716
|
+
{
|
|
717
|
+
addGradientsSettings: GRADIENTS_OBJECTS.finturf.positiveLineIcon
|
|
718
|
+
}
|
|
719
|
+
),
|
|
720
|
+
finturfNegativeLineIcon: optionsSetters_default(
|
|
721
|
+
reactChartJsOptionsLayouts.lineIconLayout,
|
|
722
|
+
{
|
|
723
|
+
addGradientsSettings: GRADIENTS_OBJECTS.finturf.negativeLineIcon
|
|
724
|
+
}
|
|
725
|
+
)
|
|
726
|
+
};
|
|
727
|
+
var optionsConstructor_default = {
|
|
728
|
+
...finturfReactChartJsOptions,
|
|
729
|
+
emptyLayout: reactChartJsOptionsLayouts.emptyLayout
|
|
730
|
+
};
|
|
731
|
+
|
|
732
|
+
// src/Atomic/UI/Chart/partial/utils.ts
|
|
733
|
+
function getChartTypeKey(model) {
|
|
734
|
+
return optionsConstructor_default[model]?.notLibraryOptions?.chartTypeKey;
|
|
735
|
+
}
|
|
736
|
+
function correctModelKey(model) {
|
|
737
|
+
if (!model) return DEFAULT_CHART_MODEL;
|
|
738
|
+
const options = optionsConstructor_default[model];
|
|
739
|
+
if (!options) return DEFAULT_CHART_MODEL;
|
|
740
|
+
const chartTypeKey = getChartTypeKey(model);
|
|
741
|
+
return chartTypeKey && CHART_TYPES.includes(chartTypeKey) ? model : DEFAULT_CHART_MODEL;
|
|
742
|
+
}
|
|
743
|
+
function getOptions(model) {
|
|
744
|
+
const modelOptions = optionsConstructor_default[model] || optionsConstructor_default[DEFAULT_CHART_MODEL];
|
|
745
|
+
return omitKeys(modelOptions, ["notLibraryOptions"]);
|
|
746
|
+
}
|
|
747
|
+
function getNotLibraryOptionsOptions(model) {
|
|
748
|
+
const modelOptions = optionsConstructor_default[model] || optionsConstructor_default[DEFAULT_CHART_MODEL];
|
|
749
|
+
const { notLibraryOptions } = modelOptions || {};
|
|
750
|
+
return notLibraryOptions ? clone(notLibraryOptions) : void 0;
|
|
751
|
+
}
|
|
752
|
+
function prepareData(model, data, chartInstance, addToDatasets) {
|
|
753
|
+
if (!chartInstance) return data;
|
|
754
|
+
const notLibraryOptions = getNotLibraryOptionsOptions(model);
|
|
755
|
+
const iterator = notLibraryOptions?.changeData ? Object.keys(notLibraryOptions.changeData) : [];
|
|
756
|
+
const changedData = iterator.reduce(
|
|
757
|
+
(acc, dataChangeKey) => datasetSetters_default(
|
|
758
|
+
acc,
|
|
759
|
+
dataChangeKey,
|
|
760
|
+
notLibraryOptions.changeData[dataChangeKey],
|
|
761
|
+
chartInstance
|
|
762
|
+
),
|
|
763
|
+
clone(data)
|
|
764
|
+
);
|
|
765
|
+
return addToDatasets && typeof addToDatasets === "object" && !Array.isArray(addToDatasets) ? {
|
|
766
|
+
...changedData,
|
|
767
|
+
datasets: changedData.datasets.map((dataset) => ({
|
|
768
|
+
...dataset,
|
|
769
|
+
...addToDatasets
|
|
770
|
+
}))
|
|
771
|
+
} : changedData;
|
|
772
|
+
}
|
|
773
|
+
|
|
774
|
+
// src/Atomic/UI/Chart/Chart.tsx
|
|
775
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
776
|
+
var RC2 = "chart";
|
|
777
|
+
import_chart.Chart.register(
|
|
778
|
+
import_chart.CategoryScale,
|
|
779
|
+
import_chart.LinearScale,
|
|
780
|
+
import_chart.BarElement,
|
|
781
|
+
import_chart.PointElement,
|
|
782
|
+
import_chart.LineElement,
|
|
783
|
+
import_chart.Filler,
|
|
784
|
+
import_chart.Tooltip
|
|
785
|
+
);
|
|
786
|
+
var Chart = ({
|
|
787
|
+
className,
|
|
788
|
+
initialModel,
|
|
789
|
+
modelsForSwitch,
|
|
790
|
+
setModelExternalValue,
|
|
791
|
+
description,
|
|
792
|
+
customOptions,
|
|
793
|
+
data,
|
|
794
|
+
addToDatasets,
|
|
795
|
+
modifyOptions
|
|
796
|
+
}) => {
|
|
797
|
+
const { label, value } = description || {};
|
|
798
|
+
const [model, setModel] = (0, import_react2.useState)(DEFAULT_CHART_MODEL);
|
|
799
|
+
const [localData, setLocalData] = (0, import_react2.useState)();
|
|
800
|
+
const chartRef = (0, import_react2.useRef)(null);
|
|
801
|
+
const charContainertRef = (0, import_react2.useRef)(null);
|
|
802
|
+
const options = (0, import_react2.useMemo)(
|
|
803
|
+
() => customOptions || (modifyOptions ? modifyOptions(getOptions(model)) : getOptions(model)),
|
|
804
|
+
[customOptions, model, modifyOptions?.toString?.(), data]
|
|
805
|
+
);
|
|
806
|
+
const notLibraryOptionsOptions = (0, import_react2.useMemo)(
|
|
807
|
+
() => customOptions ? customOptions?.notLibraryOptions : getNotLibraryOptionsOptions(model),
|
|
808
|
+
[customOptions, model, data]
|
|
809
|
+
);
|
|
810
|
+
const ChartComponent = (0, import_react2.useCallback)(
|
|
811
|
+
(props) => {
|
|
812
|
+
const chartType = getChartTypeKey(model);
|
|
813
|
+
const Component = ChartComponents[chartType];
|
|
814
|
+
return import_react2.default.createElement(Component, { ...props, ref: chartRef });
|
|
815
|
+
},
|
|
816
|
+
[model]
|
|
817
|
+
);
|
|
818
|
+
const isExcludeDescription = COMPONENT_OPTIONS.disableDescriptionsFor.includes(model);
|
|
819
|
+
const isExcludeChartTypeSwitcher = COMPONENT_OPTIONS.disableChartTypeSwitcherFor.includes(model);
|
|
820
|
+
(0, import_react2.useLayoutEffect)(() => {
|
|
821
|
+
if (setModelExternalValue && model !== "emptyLayout")
|
|
822
|
+
setModelExternalValue(model);
|
|
823
|
+
}, [model]);
|
|
824
|
+
(0, import_react2.useLayoutEffect)(() => {
|
|
825
|
+
const { setCanvasDimensions } = notLibraryOptionsOptions || {};
|
|
826
|
+
if (charContainertRef.current) {
|
|
827
|
+
charContainertRef.current.style.width = setCanvasDimensions?.width ?? "";
|
|
828
|
+
charContainertRef.current.style.height = setCanvasDimensions?.height ?? "";
|
|
829
|
+
}
|
|
830
|
+
}, [notLibraryOptionsOptions]);
|
|
831
|
+
(0, import_react2.useEffect)(() => {
|
|
832
|
+
setModel(correctModelKey(initialModel));
|
|
833
|
+
}, [initialModel]);
|
|
834
|
+
(0, import_react2.useEffect)(() => {
|
|
835
|
+
if (data) {
|
|
836
|
+
setLocalData(
|
|
837
|
+
prepareData(model, clone(data), chartRef.current, addToDatasets)
|
|
838
|
+
);
|
|
839
|
+
}
|
|
840
|
+
}, [model, data]);
|
|
841
|
+
if (!data || !localData) return null;
|
|
842
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
843
|
+
"div",
|
|
844
|
+
{
|
|
845
|
+
className: (0, import_classnames2.default)(
|
|
846
|
+
RC2,
|
|
847
|
+
{ [`${RC2}_icon-mode`]: ICON_MODELS.includes(model) },
|
|
848
|
+
className
|
|
849
|
+
),
|
|
850
|
+
children: [
|
|
851
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
852
|
+
"div",
|
|
853
|
+
{
|
|
854
|
+
className: (0, import_classnames2.default)(`${RC2}__header`, {
|
|
855
|
+
[`${RC2}__header_only-switcher`]: !description
|
|
856
|
+
}),
|
|
857
|
+
children: [
|
|
858
|
+
description && !isExcludeDescription ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_classnames2.default)(`${RC2}__description`), children: [
|
|
859
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: (0, import_classnames2.default)(`${RC2}__description-title`), children: label }) : null,
|
|
860
|
+
value ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_classnames2.default)(`${RC2}__description-value`), children: value }) : null
|
|
861
|
+
] }) : null,
|
|
862
|
+
!isExcludeChartTypeSwitcher ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_classnames2.default)(`${RC2}__type-switcher`), children: [
|
|
863
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
864
|
+
ChartTypeSwitcherIcon_default,
|
|
865
|
+
{
|
|
866
|
+
iconType: "Bar",
|
|
867
|
+
isActive: getChartTypeKey(model) === "Bar",
|
|
868
|
+
onClick: () => setModel(modelsForSwitch?.[0] || "barLayout")
|
|
869
|
+
}
|
|
870
|
+
),
|
|
871
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
872
|
+
ChartTypeSwitcherIcon_default,
|
|
873
|
+
{
|
|
874
|
+
iconType: "Line",
|
|
875
|
+
isActive: getChartTypeKey(model) === "Line",
|
|
876
|
+
onClick: () => setModel(modelsForSwitch?.[1] || "lineLayout")
|
|
877
|
+
}
|
|
878
|
+
)
|
|
879
|
+
] }) : null
|
|
880
|
+
]
|
|
881
|
+
}
|
|
882
|
+
),
|
|
883
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: charContainertRef, className: (0, import_classnames2.default)(`${RC2}__chart-wrapper`), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartComponent, { ...options, data: localData }) })
|
|
884
|
+
]
|
|
885
|
+
}
|
|
886
|
+
);
|
|
887
|
+
};
|
|
888
|
+
var Chart_default = Chart;
|
|
889
|
+
|
|
890
|
+
// src/Atomic/UI/Chart/index.ts
|
|
891
|
+
var Chart_default2 = Chart_default;
|
|
892
|
+
|
|
893
|
+
// src/Atomic/UI/PieChart/PieChart.js
|
|
894
|
+
var import_react3 = __toESM(require("react"), 1);
|
|
895
|
+
var import_chart2 = require("chart.js");
|
|
896
|
+
var import_react_chartjs_2 = require("react-chartjs-2");
|
|
897
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
898
|
+
import_chart2.Chart.register(import_chart2.ArcElement, import_chart2.Tooltip);
|
|
899
|
+
var PieChart = ({
|
|
900
|
+
data,
|
|
901
|
+
cutout = "80%",
|
|
902
|
+
resultLabel,
|
|
903
|
+
resultValue = 0,
|
|
904
|
+
withLegend = false
|
|
905
|
+
}) => {
|
|
906
|
+
const options = {
|
|
907
|
+
cutout,
|
|
908
|
+
plugins: {
|
|
909
|
+
legend: {
|
|
910
|
+
display: withLegend
|
|
911
|
+
}
|
|
912
|
+
}
|
|
913
|
+
};
|
|
914
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "pie-chart-box", style: { maxWidth: `320px` }, children: [
|
|
915
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_chartjs_2.Pie, { data, options }),
|
|
916
|
+
Boolean(resultLabel) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "pie-chart__result", children: [
|
|
917
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "pie-chart__result-value", children: [
|
|
918
|
+
resultValue,
|
|
919
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "pie-chart__result-percent", children: "%" }),
|
|
920
|
+
" "
|
|
921
|
+
] }),
|
|
922
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pie-chart__result-label", children: resultLabel })
|
|
923
|
+
] })
|
|
924
|
+
] });
|
|
925
|
+
};
|
|
926
|
+
var PieChart_default = PieChart;
|
|
927
|
+
//# sourceMappingURL=charts.cjs.map
|