intelicoreact 0.2.31 → 0.2.34
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/Atomic/FormElements/RangeSlider/RangeSlider.js +57 -38
- package/dist/Atomic/FormElements/RangeSlider/RangeSlider.scss +27 -18
- package/dist/Atomic/FormElements/SwitcherRadio/SwitcherRadio.js +4 -6
- package/dist/Atomic/UI/Chart/Chart.js +9 -9
- package/dist/Atomic/UI/Chart/partial/Chart.constants.js +26 -8
- package/dist/Atomic/UI/Chart/partial/datasetSetters.js +142 -0
- package/dist/Atomic/UI/Chart/partial/optionsConstructor.js +118 -82
- package/dist/Atomic/UI/Chart/partial/utils.js +35 -95
- package/dist/Atomic/UI/ExampleChartIntegration/ExampleChartIntegration.js +2 -9
- package/package.json +1 -1
|
@@ -134,21 +134,25 @@ function RangeSlider(_ref) {
|
|
|
134
134
|
};
|
|
135
135
|
|
|
136
136
|
var getRangeWidth = function getRangeWidth() {
|
|
137
|
-
return (to - from)
|
|
137
|
+
return getTrackXByPoints(to) - getTrackXByPoints(from);
|
|
138
138
|
};
|
|
139
139
|
|
|
140
140
|
var getRangeOffset = function getRangeOffset() {
|
|
141
|
-
return (from
|
|
141
|
+
return getTrackXByPoints(from);
|
|
142
142
|
};
|
|
143
143
|
|
|
144
144
|
var getXByPoints = function getXByPoints(pts) {
|
|
145
|
-
return pts / pointsPerPx + trackPosition;
|
|
145
|
+
return (pts - min) / pointsPerPx + trackPosition;
|
|
146
146
|
};
|
|
147
147
|
|
|
148
148
|
var getPointsByX = function getPointsByX(x) {
|
|
149
149
|
return (x - trackPosition) * pointsPerPx + min;
|
|
150
150
|
};
|
|
151
151
|
|
|
152
|
+
var getTrackXByPoints = function getTrackXByPoints(pts) {
|
|
153
|
+
return (pts - min) / pointsPerPx;
|
|
154
|
+
};
|
|
155
|
+
|
|
152
156
|
var prepareValue = function prepareValue(value) {
|
|
153
157
|
return parseInt(parseFloat(value) * Math.pow(10, precision)) / Math.pow(10, precision);
|
|
154
158
|
};
|
|
@@ -160,15 +164,35 @@ function RangeSlider(_ref) {
|
|
|
160
164
|
|
|
161
165
|
switch (type) {
|
|
162
166
|
case 'from':
|
|
163
|
-
if (
|
|
164
|
-
|
|
165
|
-
|
|
167
|
+
if (validate) {
|
|
168
|
+
if (value < min) {
|
|
169
|
+
setFrom(min);
|
|
170
|
+
return;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
if (value > to - minRange) {
|
|
174
|
+
setFrom(to - minRange);
|
|
175
|
+
return;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
setFrom(value);
|
|
166
180
|
break;
|
|
167
181
|
|
|
168
182
|
case 'to':
|
|
169
|
-
if (
|
|
170
|
-
|
|
171
|
-
|
|
183
|
+
if (validate) {
|
|
184
|
+
if (value > max) {
|
|
185
|
+
setTo(max);
|
|
186
|
+
return;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
if (value < from + minRange) {
|
|
190
|
+
setTo(from + minRange);
|
|
191
|
+
return;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
setTo(value);
|
|
172
196
|
break;
|
|
173
197
|
}
|
|
174
198
|
};
|
|
@@ -184,13 +208,13 @@ function RangeSlider(_ref) {
|
|
|
184
208
|
if (!isTriggerMoved) setIsTriggerMoved(true);
|
|
185
209
|
if (!movingTrigger) return false;
|
|
186
210
|
var x = e.clientX;
|
|
187
|
-
if (x < trackPosition || x > trackPosition + trackWidth) return false;
|
|
188
211
|
|
|
189
212
|
var _movingTrigger$getBou = movingTrigger === null || movingTrigger === void 0 ? void 0 : movingTrigger.getBoundingClientRect(),
|
|
190
213
|
_movingTrigger$getBou2 = _movingTrigger$getBou.width,
|
|
191
214
|
triggerWidth = _movingTrigger$getBou2 === void 0 ? 16 : _movingTrigger$getBou2;
|
|
192
215
|
|
|
193
|
-
x
|
|
216
|
+
if (x < trackPosition || x > trackPosition + trackWidth + triggerWidth) return false;
|
|
217
|
+
x -= triggerWidth / 2;
|
|
194
218
|
onRangeChange(movingTriggerType, getPointsByX(x));
|
|
195
219
|
};
|
|
196
220
|
|
|
@@ -206,35 +230,23 @@ function RangeSlider(_ref) {
|
|
|
206
230
|
};
|
|
207
231
|
|
|
208
232
|
(0, _react.useLayoutEffect)(function () {
|
|
209
|
-
var _trackRef$current;
|
|
233
|
+
var _trackRef$current, _fromTriggerRef$curre, _fromTriggerRef$curre2, _toTriggerRef$current, _toTriggerRef$current2;
|
|
210
234
|
|
|
211
235
|
var _trackRef$current$get = trackRef === null || trackRef === void 0 ? void 0 : (_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.getBoundingClientRect(),
|
|
212
236
|
width = _trackRef$current$get.width,
|
|
213
237
|
x = _trackRef$current$get.x;
|
|
214
238
|
|
|
239
|
+
width -= (fromTriggerRef === null || fromTriggerRef === void 0 ? void 0 : (_fromTriggerRef$curre = fromTriggerRef.current) === null || _fromTriggerRef$curre === void 0 ? void 0 : (_fromTriggerRef$curre2 = _fromTriggerRef$curre.getBoundingClientRect()) === null || _fromTriggerRef$curre2 === void 0 ? void 0 : _fromTriggerRef$curre2.width) || (toTriggerRef === null || toTriggerRef === void 0 ? void 0 : (_toTriggerRef$current = toTriggerRef.current) === null || _toTriggerRef$current === void 0 ? void 0 : (_toTriggerRef$current2 = _toTriggerRef$current.getBoundingClientRect()) === null || _toTriggerRef$current2 === void 0 ? void 0 : _toTriggerRef$current2.width);
|
|
215
240
|
setPointsPerPx(countPointsPerPx(width));
|
|
216
241
|
setTrackWidth(width);
|
|
217
242
|
setTrackPosition(x);
|
|
218
243
|
}, [trackRef]);
|
|
219
|
-
(0, _react.useLayoutEffect)(function () {
|
|
220
|
-
var _fromTriggerRef$curre, _toTriggerRef$current;
|
|
221
|
-
|
|
222
|
-
var _ref2 = (fromTriggerRef === null || fromTriggerRef === void 0 ? void 0 : (_fromTriggerRef$curre = fromTriggerRef.current) === null || _fromTriggerRef$curre === void 0 ? void 0 : _fromTriggerRef$curre.getBoundingClientRect()) || {},
|
|
223
|
-
fromTriggerWidth = _ref2.width;
|
|
224
|
-
|
|
225
|
-
var _ref3 = (toTriggerRef === null || toTriggerRef === void 0 ? void 0 : (_toTriggerRef$current = toTriggerRef.current) === null || _toTriggerRef$current === void 0 ? void 0 : _toTriggerRef$current.getBoundingClientRect()) || {},
|
|
226
|
-
toTriggerWidth = _ref3.width;
|
|
227
|
-
|
|
228
|
-
setExtremumRange((fromTriggerWidth + toTriggerWidth) * pointsPerPx);
|
|
229
|
-
setExtremumWidth(fromTriggerWidth + toTriggerWidth);
|
|
230
|
-
}, [fromTriggerRef, toTriggerRef, pointsPerPx]);
|
|
231
244
|
(0, _react.useEffect)(function () {
|
|
232
245
|
var _value$from2, _value$to2;
|
|
233
246
|
|
|
234
|
-
if (extremumRange === 0) return null;
|
|
235
247
|
onRangeChange('from', (_value$from2 = value === null || value === void 0 ? void 0 : value.from) !== null && _value$from2 !== void 0 ? _value$from2 : max);
|
|
236
248
|
onRangeChange('to', (_value$to2 = value === null || value === void 0 ? void 0 : value.to) !== null && _value$to2 !== void 0 ? _value$to2 : min);
|
|
237
|
-
}, [
|
|
249
|
+
}, []); // MouseUp Event Controller
|
|
238
250
|
|
|
239
251
|
(0, _react.useEffect)(function () {
|
|
240
252
|
var resetMovingTrigger = function resetMovingTrigger() {
|
|
@@ -329,28 +341,35 @@ function RangeSlider(_ref) {
|
|
|
329
341
|
|
|
330
342
|
var renderTrackRange = function renderTrackRange() {
|
|
331
343
|
var style = {
|
|
332
|
-
width: getRangeWidth().toString().concat('
|
|
333
|
-
left: getRangeOffset().toString().concat('
|
|
334
|
-
minWidth: extremumWidth.toString().concat('px')
|
|
344
|
+
width: getRangeWidth().toString().concat('px'),
|
|
345
|
+
left: getRangeOffset().toString().concat('px')
|
|
335
346
|
};
|
|
336
|
-
var extremumWidthPercent = extremumWidth * 100 / trackWidth;
|
|
337
|
-
|
|
338
|
-
if (getRangeOffset() + extremumWidthPercent >= 100) {
|
|
339
|
-
style.left = (100 - extremumWidthPercent).toString().concat('%');
|
|
340
|
-
}
|
|
341
|
-
|
|
342
347
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
343
348
|
className: "range-slider__track__range",
|
|
344
349
|
style: style
|
|
350
|
+
});
|
|
351
|
+
};
|
|
352
|
+
|
|
353
|
+
var renderTrackTriggers = function renderTrackTriggers() {
|
|
354
|
+
var fromStyle = {
|
|
355
|
+
left: getTrackXByPoints(from).toString().concat('px')
|
|
356
|
+
};
|
|
357
|
+
var toStyle = {
|
|
358
|
+
left: getTrackXByPoints(to).toString().concat('px')
|
|
359
|
+
};
|
|
360
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
361
|
+
className: "range-slider__track__range-triggers"
|
|
345
362
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
346
363
|
ref: fromTriggerRef,
|
|
347
|
-
|
|
364
|
+
style: fromStyle,
|
|
365
|
+
className: "range-slider__track__range-triggers--trigger range-slider__track__range-triggers--trigger-left",
|
|
348
366
|
onMouseDown: function onMouseDown(e) {
|
|
349
367
|
return onTriggerMouseDown(e, 'from');
|
|
350
368
|
}
|
|
351
369
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
352
370
|
ref: toTriggerRef,
|
|
353
|
-
|
|
371
|
+
style: toStyle,
|
|
372
|
+
className: "range-slider__track__range-triggers--trigger range-slider__track__range-triggers--trigger-right",
|
|
354
373
|
onMouseDown: function onMouseDown(e) {
|
|
355
374
|
return onTriggerMouseDown(e, 'to');
|
|
356
375
|
}
|
|
@@ -363,7 +382,7 @@ function RangeSlider(_ref) {
|
|
|
363
382
|
ref: trackRef
|
|
364
383
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
365
384
|
className: "range-slider__track__line"
|
|
366
|
-
}), renderTrackRange());
|
|
385
|
+
}), renderTrackRange(), renderTrackTriggers());
|
|
367
386
|
};
|
|
368
387
|
|
|
369
388
|
var render = function render() {
|
|
@@ -100,6 +100,7 @@
|
|
|
100
100
|
height: 16px;
|
|
101
101
|
margin-top: 2px;
|
|
102
102
|
position: relative;
|
|
103
|
+
padding: 0 8px;
|
|
103
104
|
|
|
104
105
|
&__line {
|
|
105
106
|
position: absolute;
|
|
@@ -107,6 +108,8 @@
|
|
|
107
108
|
height: 4px;
|
|
108
109
|
background: #d6d9e4;
|
|
109
110
|
border-radius: 4px;
|
|
111
|
+
box-sizing: border-box;
|
|
112
|
+
left: 0;
|
|
110
113
|
}
|
|
111
114
|
&__range {
|
|
112
115
|
position: relative;
|
|
@@ -117,24 +120,30 @@
|
|
|
117
120
|
border-radius: 4px;
|
|
118
121
|
justify-content: space-between;
|
|
119
122
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
height: 16px;
|
|
124
|
-
background: #ffffff;
|
|
125
|
-
border: 1px solid #1f7499;
|
|
126
|
-
box-shadow: 0px 4px 26px rgba(0, 67, 96, 0.1);
|
|
127
|
-
border-radius: 50%;
|
|
128
|
-
transform: translateY(-50%);
|
|
129
|
-
top: 50%;
|
|
130
|
-
box-sizing: border-box;
|
|
131
|
-
cursor: move;
|
|
132
|
-
|
|
133
|
-
&-left {
|
|
134
|
-
transform: translate(-50%, 0);
|
|
135
|
-
}
|
|
123
|
+
&-triggers {
|
|
124
|
+
width: 100%;
|
|
125
|
+
position: absolute;
|
|
136
126
|
|
|
137
|
-
|
|
127
|
+
&--trigger {
|
|
128
|
+
z-index: 3;
|
|
129
|
+
position: absolute;
|
|
130
|
+
width: 16px;
|
|
131
|
+
height: 16px;
|
|
132
|
+
background: #ffffff;
|
|
133
|
+
border: 1px solid #1f7499;
|
|
134
|
+
box-shadow: 0px 4px 26px rgba(0, 67, 96, 0.1);
|
|
135
|
+
border-radius: 50%;
|
|
136
|
+
top: 50%;
|
|
137
|
+
box-sizing: border-box;
|
|
138
|
+
cursor: move;
|
|
139
|
+
|
|
140
|
+
&-left {
|
|
141
|
+
transform: translate(-50%, -50%);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
&-right {
|
|
145
|
+
transform: translate(-50%, -50%);
|
|
146
|
+
}
|
|
138
147
|
}
|
|
139
148
|
}
|
|
140
149
|
}
|
|
@@ -142,5 +151,5 @@
|
|
|
142
151
|
}
|
|
143
152
|
|
|
144
153
|
.moving-cursor {
|
|
145
|
-
cursor: move!important;
|
|
154
|
+
cursor: move !important;
|
|
146
155
|
}
|
|
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
10
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
13
|
|
|
12
14
|
var _react = _interopRequireDefault(require("react"));
|
|
@@ -48,17 +50,13 @@ var SwitcherRadio = function SwitcherRadio(_ref) {
|
|
|
48
50
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
49
51
|
className: (0, _classnames.default)("".concat(RC, "__wrap"), (0, _defineProperty2.default)({}, "switcher-radio_".concat(direction), direction))
|
|
50
52
|
}, options === null || options === void 0 ? void 0 : options.map(function (option) {
|
|
51
|
-
return /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
|
|
52
|
-
key: option.id,
|
|
53
|
+
return /*#__PURE__*/_react.default.createElement(_RadioInput.default, (0, _extends2.default)({}, option, {
|
|
53
54
|
className: "switcher-radio__radio",
|
|
54
|
-
value: option.value,
|
|
55
|
-
name: option.name,
|
|
56
55
|
checked: safelyValue,
|
|
57
|
-
label: option.label,
|
|
58
56
|
onChange: function onChange(val) {
|
|
59
57
|
return _onChange(val);
|
|
60
58
|
}
|
|
61
|
-
});
|
|
59
|
+
}));
|
|
62
60
|
}));
|
|
63
61
|
};
|
|
64
62
|
|
|
@@ -41,7 +41,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
41
41
|
|
|
42
42
|
var RC = 'chart';
|
|
43
43
|
|
|
44
|
-
_chart.Chart.register(_chart.CategoryScale, _chart.LinearScale, _chart.BarElement, _chart.PointElement, _chart.LineElement);
|
|
44
|
+
_chart.Chart.register(_chart.CategoryScale, _chart.LinearScale, _chart.BarElement, _chart.PointElement, _chart.LineElement, _chart.Filler);
|
|
45
45
|
|
|
46
46
|
var Chart = function Chart(_ref) {
|
|
47
47
|
var className = _ref.className,
|
|
@@ -77,8 +77,8 @@ var Chart = function Chart(_ref) {
|
|
|
77
77
|
|
|
78
78
|
var isExcludeChartTypeSwitcher = _optionsConstructor.componentOptions.disableChartTypeSwitcherFor.includes(model);
|
|
79
79
|
|
|
80
|
-
var getChartOptions = function getChartOptions() {
|
|
81
|
-
return customOptions || (0, _utils.getOptions)(
|
|
80
|
+
var getChartOptions = function getChartOptions(currentModel) {
|
|
81
|
+
return customOptions || (0, _utils.getOptions)(currentModel);
|
|
82
82
|
};
|
|
83
83
|
|
|
84
84
|
var ChartComponent = (0, _react.useCallback)(function (props) {
|
|
@@ -88,16 +88,13 @@ var Chart = function Chart(_ref) {
|
|
|
88
88
|
}, props));
|
|
89
89
|
}, [model]);
|
|
90
90
|
(0, _react.useLayoutEffect)(function () {
|
|
91
|
-
|
|
91
|
+
setModel(correctModelKey(initialModel));
|
|
92
92
|
}, [initialModel]);
|
|
93
93
|
(0, _react.useLayoutEffect)(function () {
|
|
94
94
|
if (setModelExternalValue) setModelExternalValue(correctModelKey(model));
|
|
95
95
|
}, [model]);
|
|
96
96
|
(0, _react.useEffect)(function () {
|
|
97
|
-
|
|
98
|
-
}, [model, data, chartRef]);
|
|
99
|
-
(0, _react.useEffect)(function () {
|
|
100
|
-
var _getChartOptions = getChartOptions(),
|
|
97
|
+
var _getChartOptions = getChartOptions(model),
|
|
101
98
|
_getChartOptions$notL = _getChartOptions.notLibraryOptions;
|
|
102
99
|
|
|
103
100
|
_getChartOptions$notL = _getChartOptions$notL === void 0 ? {} : _getChartOptions$notL;
|
|
@@ -110,6 +107,9 @@ var Chart = function Chart(_ref) {
|
|
|
110
107
|
chartRef.current.canvas.parentNode.style.height = (_setCanvasDimensions$2 = setCanvasDimensions === null || setCanvasDimensions === void 0 ? void 0 : setCanvasDimensions.height) !== null && _setCanvasDimensions$2 !== void 0 ? _setCanvasDimensions$2 : '';
|
|
111
108
|
}
|
|
112
109
|
}, [model]);
|
|
110
|
+
(0, _react.useEffect)(function () {
|
|
111
|
+
return setLocalData((0, _utils.prepareData)(model, data, chartRef.current));
|
|
112
|
+
}, [model, data, chartRef]);
|
|
113
113
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
114
114
|
className: (0, _classnames.default)(RC, (0, _defineProperty2.default)({}, "".concat(RC, "_icon-mode"), _optionsConstructor.iconModels.includes(model)), className)
|
|
115
115
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -136,7 +136,7 @@ var Chart = function Chart(_ref) {
|
|
|
136
136
|
}
|
|
137
137
|
})) : null), /*#__PURE__*/_react.default.createElement("div", {
|
|
138
138
|
className: (0, _classnames.default)("".concat(RC, "__chart-wrapper"))
|
|
139
|
-
}, /*#__PURE__*/_react.default.createElement(ChartComponent, (0, _extends2.default)({}, getChartOptions(), {
|
|
139
|
+
}, /*#__PURE__*/_react.default.createElement(ChartComponent, (0, _extends2.default)({}, getChartOptions(model), {
|
|
140
140
|
data: localData
|
|
141
141
|
}))));
|
|
142
142
|
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.GRADIENTS_OBJECTS = exports.FINTURF_ADD_GRADIENT_COLORS_NEGATIVE = exports.FINTURF_ADD_GRADIENT_COLORS_POSITIVE = exports.DEFAULT_CHART_MODEL = exports.CHART_TYPES = void 0;
|
|
7
7
|
var CHART_TYPES = ['Bar', 'Line'];
|
|
8
8
|
exports.CHART_TYPES = CHART_TYPES;
|
|
9
9
|
var DEFAULT_CHART_MODEL = 'barLayout';
|
|
@@ -12,19 +12,37 @@ var FINTURF_ADD_GRADIENT_COLORS_POSITIVE = ['#53D1AD', '#389AA3'];
|
|
|
12
12
|
exports.FINTURF_ADD_GRADIENT_COLORS_POSITIVE = FINTURF_ADD_GRADIENT_COLORS_POSITIVE;
|
|
13
13
|
var FINTURF_ADD_GRADIENT_COLORS_NEGATIVE = ['#FDB4DB', '#FA2E69'];
|
|
14
14
|
exports.FINTURF_ADD_GRADIENT_COLORS_NEGATIVE = FINTURF_ADD_GRADIENT_COLORS_NEGATIVE;
|
|
15
|
-
var
|
|
15
|
+
var GRADIENTS_OBJECTS = {
|
|
16
16
|
finturf: {
|
|
17
|
-
bar: {
|
|
17
|
+
bar: [{
|
|
18
18
|
gradientTargetPropertyName: 'backgroundColor',
|
|
19
19
|
colors: FINTURF_ADD_GRADIENT_COLORS_POSITIVE,
|
|
20
20
|
direction: 'toBottom',
|
|
21
|
-
typeDistributionOfGradientPoints: 'personalBase'
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
typeDistributionOfGradientPoints: 'personalBase',
|
|
22
|
+
collorStopPoints: [0.2, 1]
|
|
23
|
+
}],
|
|
24
|
+
line: [{
|
|
24
25
|
gradientTargetPropertyName: 'borderColor',
|
|
25
26
|
colors: FINTURF_ADD_GRADIENT_COLORS_POSITIVE,
|
|
26
27
|
direction: 'toRight'
|
|
27
|
-
}
|
|
28
|
+
}, {
|
|
29
|
+
gradientTargetPropertyName: 'backgroundColor',
|
|
30
|
+
colors: ['rgba(84, 210, 173, 0.2)', 'rgba(84, 210, 173, 0.1)', 'rgba(84, 210, 173, 0)'],
|
|
31
|
+
direction: 'toBottom',
|
|
32
|
+
collorStopPoints: [0.31, 0.72, 1],
|
|
33
|
+
typeDistributionOfGradientPoints: 'personalBase',
|
|
34
|
+
isAddFill: true
|
|
35
|
+
}],
|
|
36
|
+
positiveLineIcon: [{
|
|
37
|
+
gradientTargetPropertyName: 'borderColor',
|
|
38
|
+
colors: FINTURF_ADD_GRADIENT_COLORS_POSITIVE,
|
|
39
|
+
direction: 'toRight'
|
|
40
|
+
}],
|
|
41
|
+
negativeLineIcon: [{
|
|
42
|
+
gradientTargetPropertyName: 'borderColor',
|
|
43
|
+
colors: FINTURF_ADD_GRADIENT_COLORS_NEGATIVE,
|
|
44
|
+
direction: 'toRight'
|
|
45
|
+
}]
|
|
28
46
|
}
|
|
29
47
|
};
|
|
30
|
-
exports.
|
|
48
|
+
exports.GRADIENTS_OBJECTS = GRADIENTS_OBJECTS;
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.addNotLibraryAnimation = exports.addGradientsObject = exports.createGradient = exports.addDatasetsObjects = void 0;
|
|
9
|
+
|
|
10
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
|
+
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
+
|
|
14
|
+
var _excluded = ["type"];
|
|
15
|
+
|
|
16
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
17
|
+
|
|
18
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
19
|
+
|
|
20
|
+
// auxiliary functions
|
|
21
|
+
var addDatasetsObjects = function addDatasetsObjects(currentData, mutation) {
|
|
22
|
+
return _objectSpread(_objectSpread({}, currentData), {}, {
|
|
23
|
+
datasets: currentData.datasets.map(function (dataset) {
|
|
24
|
+
return _objectSpread(_objectSpread({}, dataset), typeof mutation === 'function' ? mutation(dataset) : mutation);
|
|
25
|
+
})
|
|
26
|
+
});
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
exports.addDatasetsObjects = addDatasetsObjects;
|
|
30
|
+
|
|
31
|
+
var createGradient = function createGradient(_ref) {
|
|
32
|
+
var ctx = _ref.ctx,
|
|
33
|
+
area = _ref.area,
|
|
34
|
+
colors = _ref.colors,
|
|
35
|
+
direction = _ref.direction,
|
|
36
|
+
correctionFactors = _ref.correctionFactors,
|
|
37
|
+
collorStopPoints = _ref.collorStopPoints;
|
|
38
|
+
|
|
39
|
+
var getStartGradient = function getStartGradient() {
|
|
40
|
+
switch (direction) {
|
|
41
|
+
case 'toTop-toRight':
|
|
42
|
+
return ctx.createLinearGradient(area.left, area.bottom, area.right, area.top);
|
|
43
|
+
|
|
44
|
+
case 'toTop-toLeft':
|
|
45
|
+
return ctx.createLinearGradient(area.right, area.bottom, area.left, area.top);
|
|
46
|
+
|
|
47
|
+
case 'toBottom-toRight':
|
|
48
|
+
return ctx.createLinearGradient(area.left, area.top, area.right, area.bottom);
|
|
49
|
+
|
|
50
|
+
case 'toBottom-toLeft':
|
|
51
|
+
return ctx.createLinearGradient(area.right, area.top, area.left, area.bottom);
|
|
52
|
+
|
|
53
|
+
case 'toBottom':
|
|
54
|
+
return ctx.createLinearGradient(0, area.top, 0, area.bottom);
|
|
55
|
+
|
|
56
|
+
case 'toTop':
|
|
57
|
+
return ctx.createLinearGradient(0, area.bottom, 0, area.top);
|
|
58
|
+
|
|
59
|
+
case 'toLeft':
|
|
60
|
+
return ctx.createLinearGradient(area.right, 0, area.left, 0);
|
|
61
|
+
|
|
62
|
+
case 'toRight':
|
|
63
|
+
default:
|
|
64
|
+
return ctx.createLinearGradient(area.left, 0, area.right, 0);
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
var getGradientWithPoints = function getGradientWithPoints(corection) {
|
|
69
|
+
var newGradient = getStartGradient();
|
|
70
|
+
var staptPoint = corection ? 1 - corection : 0;
|
|
71
|
+
colors.forEach(function (color, idx) {
|
|
72
|
+
var point = function () {
|
|
73
|
+
if (idx === colors.length - 1) return 1;
|
|
74
|
+
return collorStopPoints && Array.isArray(collorStopPoints) ? staptPoint + collorStopPoints[idx] * (corection || 1) : staptPoint + 1 / colors.length * (corection || 1);
|
|
75
|
+
}();
|
|
76
|
+
|
|
77
|
+
newGradient.addColorStop(point.toFixed(2), color);
|
|
78
|
+
});
|
|
79
|
+
return newGradient;
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
return correctionFactors ? correctionFactors.map(function (corection) {
|
|
83
|
+
return getGradientWithPoints(corection);
|
|
84
|
+
}) : getGradientWithPoints();
|
|
85
|
+
}; // target functions
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
exports.createGradient = createGradient;
|
|
89
|
+
|
|
90
|
+
var addGradientsObject = function addGradientsObject(currentData, gradientSettingsObj, chart) {
|
|
91
|
+
return addDatasetsObjects(currentData, function (dataset) {
|
|
92
|
+
return _objectSpread((0, _defineProperty2.default)({}, gradientSettingsObj.gradientTargetPropertyName, createGradient({
|
|
93
|
+
ctx: chart.ctx,
|
|
94
|
+
area: chart.chartArea,
|
|
95
|
+
colors: gradientSettingsObj.colors,
|
|
96
|
+
direction: gradientSettingsObj.direction,
|
|
97
|
+
correctionFactors: gradientSettingsObj.typeDistributionOfGradientPoints === 'personalBase' ? dataset.data.map(function (value) {
|
|
98
|
+
return value / Math.max.apply(null, dataset.data);
|
|
99
|
+
}) : null,
|
|
100
|
+
collorStopPoints: gradientSettingsObj.collorStopPoints
|
|
101
|
+
})), gradientSettingsObj.isAddFill ? {
|
|
102
|
+
fill: true
|
|
103
|
+
} : {});
|
|
104
|
+
});
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
exports.addGradientsObject = addGradientsObject;
|
|
108
|
+
|
|
109
|
+
var addNotLibraryAnimation = function addNotLibraryAnimation(currentData, animationObj, chart) {
|
|
110
|
+
var _ref2 = animationObj || {},
|
|
111
|
+
type = _ref2.type,
|
|
112
|
+
restAnimationObj = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
|
|
113
|
+
|
|
114
|
+
switch (type) {
|
|
115
|
+
case 'runningColumns':
|
|
116
|
+
var runningColumnsDefaultFromValue = 25;
|
|
117
|
+
var runningColumnsDefaultToValue = 75;
|
|
118
|
+
var runningColumnsDefaultAverageValue = 50;
|
|
119
|
+
var runningColumnsDefaultColumnsDelayCoef = 50;
|
|
120
|
+
return addDatasetsObjects(currentData, function (dataset) {
|
|
121
|
+
return {
|
|
122
|
+
animations: dataset.data.map(function (item, idx) {
|
|
123
|
+
return {
|
|
124
|
+
y: {
|
|
125
|
+
duration: animationObj.duration,
|
|
126
|
+
easing: animationObj.easing || 'linear',
|
|
127
|
+
from: animationObj.isFixExtremeColumns && (!idx || idx === dataset.data.length - 1) ? runningColumnsDefaultAverageValue : animationObj.from || runningColumnsDefaultFromValue,
|
|
128
|
+
to: animationObj.isFixExtremeColumns && (!idx || idx === dataset.data.length - 1) ? runningColumnsDefaultAverageValue : animationObj.to || runningColumnsDefaultToValue,
|
|
129
|
+
loop: true,
|
|
130
|
+
delay: Math.random().toFixed(1) * (animationObj.columnsDelayCoef || runningColumnsDefaultColumnsDelayCoef)
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
})
|
|
134
|
+
};
|
|
135
|
+
});
|
|
136
|
+
|
|
137
|
+
default:
|
|
138
|
+
return currentData;
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
exports.addNotLibraryAnimation = addNotLibraryAnimation;
|
|
@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
11
11
|
|
|
12
12
|
var _Chart = require("./Chart.constants");
|
|
13
13
|
|
|
14
|
-
var _reactChartJsOptionsL, _reactChartJsOptionsL2, _reactChartJsOptionsL3, _reactChartJsOptionsL4, _reactChartJsOptionsL5, _reactChartJsOptionsL6, _reactChartJsOptionsL7, _reactChartJsOptionsL8, _reactChartJsOptionsL9, _reactChartJsOptionsL10,
|
|
14
|
+
var _reactChartJsOptionsL, _reactChartJsOptionsL2, _reactChartJsOptionsL3, _reactChartJsOptionsL4, _reactChartJsOptionsL5, _reactChartJsOptionsL6, _reactChartJsOptionsL7, _reactChartJsOptionsL8, _reactChartJsOptionsL9, _reactChartJsOptionsL10, _finturfChartBar$opti, _finturfChartBar$opti2, _finturfChartBar$opti3, _finturfChartBar$notL, _finturfChartLine$opt, _finturfChartLine$opt2, _finturfChartLine$opt3, _finturfChartLine$opt4, _finturfChartLine$opt5, _finturfChartLine$opt6, _finturfChartLine$not;
|
|
15
15
|
|
|
16
16
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
17
17
|
|
|
@@ -97,8 +97,8 @@ var reactChartJsOptionsLayouts = {
|
|
|
97
97
|
},
|
|
98
98
|
line: {
|
|
99
99
|
tension: 0.45,
|
|
100
|
-
borderWidth: 2,
|
|
101
100
|
borderJoinStyle: 'round',
|
|
101
|
+
borderWidth: 2,
|
|
102
102
|
capBezierPoints: true
|
|
103
103
|
}
|
|
104
104
|
}
|
|
@@ -144,7 +144,7 @@ var reactChartJsOptionsLayouts = {
|
|
|
144
144
|
},
|
|
145
145
|
elements: {
|
|
146
146
|
bar: {
|
|
147
|
-
borderRadius:
|
|
147
|
+
borderRadius: 10
|
|
148
148
|
}
|
|
149
149
|
}
|
|
150
150
|
},
|
|
@@ -160,33 +160,13 @@ var reactChartJsOptionsLayouts = {
|
|
|
160
160
|
};
|
|
161
161
|
exports.reactChartJsOptionsLayouts = reactChartJsOptionsLayouts;
|
|
162
162
|
|
|
163
|
-
var addGradient = function addGradient(currentOptions, gradientObj) {
|
|
164
|
-
var _currentOptions$notLi;
|
|
165
|
-
|
|
166
|
-
return _objectSpread(_objectSpread({}, currentOptions), {}, {
|
|
167
|
-
notLibraryOptions: _objectSpread(_objectSpread({}, currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.notLibraryOptions), {}, {
|
|
168
|
-
changeData: _objectSpread(_objectSpread({}, currentOptions === null || currentOptions === void 0 ? void 0 : (_currentOptions$notLi = currentOptions.notLibraryOptions) === null || _currentOptions$notLi === void 0 ? void 0 : _currentOptions$notLi.changeData), {}, {
|
|
169
|
-
addGradient: gradientObj
|
|
170
|
-
})
|
|
171
|
-
})
|
|
172
|
-
});
|
|
173
|
-
};
|
|
174
|
-
|
|
175
|
-
var getLineIconLayoutOptionsAlongWithGradient = function getLineIconLayoutOptionsAlongWithGradient(gradientObj) {
|
|
176
|
-
return _objectSpread({}, addGradient(reactChartJsOptionsLayouts.lineIconLayout, gradientObj));
|
|
177
|
-
};
|
|
178
|
-
|
|
179
163
|
var finturfChartBar = _objectSpread(_objectSpread({}, reactChartJsOptionsLayouts.barLayout), {}, {
|
|
180
164
|
options: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL = reactChartJsOptionsLayouts.barLayout) === null || _reactChartJsOptionsL === void 0 ? void 0 : _reactChartJsOptionsL.options), {}, {
|
|
181
165
|
maintainAspectRatio: false,
|
|
182
|
-
elements: _objectSpread(
|
|
183
|
-
bar: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL4 = reactChartJsOptionsLayouts.barLayout) === null || _reactChartJsOptionsL4 === void 0 ? void 0 : (_reactChartJsOptionsL5 = _reactChartJsOptionsL4.options) === null || _reactChartJsOptionsL5 === void 0 ? void 0 : (_reactChartJsOptionsL6 = _reactChartJsOptionsL5.elements) === null || _reactChartJsOptionsL6 === void 0 ? void 0 : _reactChartJsOptionsL6.bar), {}, {
|
|
184
|
-
borderRadius: 10
|
|
185
|
-
})
|
|
186
|
-
})
|
|
166
|
+
elements: _objectSpread({}, (_reactChartJsOptionsL2 = reactChartJsOptionsLayouts.barLayout) === null || _reactChartJsOptionsL2 === void 0 ? void 0 : (_reactChartJsOptionsL3 = _reactChartJsOptionsL2.options) === null || _reactChartJsOptionsL3 === void 0 ? void 0 : _reactChartJsOptionsL3.elements)
|
|
187
167
|
}),
|
|
188
|
-
notLibraryOptions: _objectSpread(_objectSpread({}, (
|
|
189
|
-
changeData: _objectSpread(_objectSpread({}, (
|
|
168
|
+
notLibraryOptions: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL4 = reactChartJsOptionsLayouts.barLayout) === null || _reactChartJsOptionsL4 === void 0 ? void 0 : _reactChartJsOptionsL4.notLibraryOptions), {}, {
|
|
169
|
+
changeData: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL5 = reactChartJsOptionsLayouts.barLayout) === null || _reactChartJsOptionsL5 === void 0 ? void 0 : (_reactChartJsOptionsL6 = _reactChartJsOptionsL5.notLibraryOptions) === null || _reactChartJsOptionsL6 === void 0 ? void 0 : _reactChartJsOptionsL6.changeData), {}, {
|
|
190
170
|
setMaxBarThickness: 20
|
|
191
171
|
}),
|
|
192
172
|
setCanvasDimensions: {
|
|
@@ -196,77 +176,133 @@ var finturfChartBar = _objectSpread(_objectSpread({}, reactChartJsOptionsLayouts
|
|
|
196
176
|
});
|
|
197
177
|
|
|
198
178
|
var finturfChartLine = _objectSpread(_objectSpread({}, reactChartJsOptionsLayouts.lineLayout), {}, {
|
|
199
|
-
options: _objectSpread(_objectSpread({}, (
|
|
179
|
+
options: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL7 = reactChartJsOptionsLayouts.lineLayout) === null || _reactChartJsOptionsL7 === void 0 ? void 0 : _reactChartJsOptionsL7.options), {}, {
|
|
200
180
|
maintainAspectRatio: false,
|
|
201
|
-
scales:
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
181
|
+
// scales: {
|
|
182
|
+
// ...reactChartJsOptionsLayouts.lineLayout?.options?.scales,
|
|
183
|
+
// y: {
|
|
184
|
+
// ...reactChartJsOptionsLayouts.lineLayout?.options?.scales.y,
|
|
185
|
+
// title: {
|
|
186
|
+
// ...reactChartJsOptionsLayouts.lineLayout?.options?.scales?.y?.title,
|
|
187
|
+
// },
|
|
188
|
+
// grid: {
|
|
189
|
+
// ...reactChartJsOptionsLayouts.lineLayout?.options?.scales?.y?.grid,
|
|
190
|
+
// },
|
|
191
|
+
// },
|
|
192
|
+
// },
|
|
193
|
+
elements: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL8 = reactChartJsOptionsLayouts.lineLayout.options) === null || _reactChartJsOptionsL8 === void 0 ? void 0 : _reactChartJsOptionsL8.elements), {}, {
|
|
194
|
+
point: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL9 = reactChartJsOptionsLayouts.lineLayout.options) === null || _reactChartJsOptionsL9 === void 0 ? void 0 : (_reactChartJsOptionsL10 = _reactChartJsOptionsL9.elements) === null || _reactChartJsOptionsL10 === void 0 ? void 0 : _reactChartJsOptionsL10.point), {}, {
|
|
195
|
+
radius: 2,
|
|
196
|
+
borderColor: '#32A784',
|
|
197
|
+
borderWidth: 4
|
|
210
198
|
})
|
|
211
199
|
})
|
|
212
200
|
}),
|
|
213
201
|
notLibraryOptions: _objectSpread(_objectSpread({}, reactChartJsOptionsLayouts.lineLayout.notLibraryOptions), {}, {
|
|
214
202
|
setCanvasDimensions: {
|
|
215
203
|
height: '194px'
|
|
216
|
-
}
|
|
204
|
+
},
|
|
205
|
+
changeData: {}
|
|
217
206
|
})
|
|
218
|
-
});
|
|
207
|
+
}); // gradientsSettings is Array of objects
|
|
219
208
|
|
|
220
|
-
var finturfLoadingModeBar = _objectSpread(_objectSpread({}, finturfChartBar), {}, {
|
|
221
|
-
options: _objectSpread(_objectSpread({}, finturfChartBar.options), {}, {
|
|
222
|
-
animation: false
|
|
223
|
-
})
|
|
224
|
-
});
|
|
225
209
|
|
|
226
|
-
var
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
210
|
+
var addGradientsSettings = function addGradientsSettings(currentOptions, gradientsSettings) {
|
|
211
|
+
var _currentOptions$notLi;
|
|
212
|
+
|
|
213
|
+
return _objectSpread(_objectSpread({}, currentOptions), {}, {
|
|
214
|
+
notLibraryOptions: _objectSpread(_objectSpread({}, currentOptions.notLibraryOptions), {}, {
|
|
215
|
+
changeData: _objectSpread(_objectSpread({}, (_currentOptions$notLi = currentOptions.notLibraryOptions) === null || _currentOptions$notLi === void 0 ? void 0 : _currentOptions$notLi.changeData), {}, {
|
|
216
|
+
addGradientsObjects: gradientsSettings
|
|
217
|
+
})
|
|
218
|
+
})
|
|
219
|
+
});
|
|
220
|
+
};
|
|
221
|
+
|
|
222
|
+
var reactChartJsOptions = {
|
|
223
|
+
finturfChartBar: _objectSpread({}, addGradientsSettings(finturfChartBar, _Chart.GRADIENTS_OBJECTS.finturf.bar)),
|
|
224
|
+
finturfLoadingModeBar: _objectSpread(_objectSpread({}, finturfChartBar), {}, {
|
|
225
|
+
options: _objectSpread(_objectSpread({}, finturfChartBar.options), {}, {
|
|
226
|
+
animations: _objectSpread(_objectSpread({}, (_finturfChartBar$opti = finturfChartBar.options) === null || _finturfChartBar$opti === void 0 ? void 0 : _finturfChartBar$opti.animations), {}, {
|
|
227
|
+
y: _objectSpread(_objectSpread({}, (_finturfChartBar$opti2 = finturfChartBar.options) === null || _finturfChartBar$opti2 === void 0 ? void 0 : (_finturfChartBar$opti3 = _finturfChartBar$opti2.animations) === null || _finturfChartBar$opti3 === void 0 ? void 0 : _finturfChartBar$opti3.y), {}, {
|
|
228
|
+
duration: 0
|
|
229
|
+
})
|
|
231
230
|
})
|
|
232
231
|
}),
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
232
|
+
notLibraryOptions: _objectSpread(_objectSpread({}, finturfChartBar.notLibraryOptions), {}, {
|
|
233
|
+
changeData: _objectSpread(_objectSpread({}, (_finturfChartBar$notL = finturfChartBar.notLibraryOptions) === null || _finturfChartBar$notL === void 0 ? void 0 : _finturfChartBar$notL.changeData), {}, {
|
|
234
|
+
addNotLibraryAnimations: [{
|
|
235
|
+
type: 'runningColumns',
|
|
236
|
+
// duration - ms
|
|
237
|
+
duration: 600,
|
|
238
|
+
// default easing - 'linear',
|
|
239
|
+
// easing: 'easeInOutExpo',
|
|
240
|
+
// ToDo - предусмотреть 'auto' и default для from и to
|
|
241
|
+
from: 10,
|
|
242
|
+
to: 90,
|
|
243
|
+
columnsDelayCoef: 500
|
|
244
|
+
}]
|
|
245
|
+
})
|
|
246
|
+
})
|
|
247
|
+
}),
|
|
248
|
+
finturfChartLine: _objectSpread({}, addGradientsSettings(finturfChartLine, _Chart.GRADIENTS_OBJECTS.finturf.line)),
|
|
249
|
+
finturfLoadingModeLine: _objectSpread(_objectSpread({}, finturfChartLine), {}, {
|
|
250
|
+
options: _objectSpread(_objectSpread({}, finturfChartLine.options), {}, {
|
|
251
|
+
elements: _objectSpread(_objectSpread({}, (_finturfChartLine$opt = finturfChartLine.options) === null || _finturfChartLine$opt === void 0 ? void 0 : _finturfChartLine$opt.elements), {}, {
|
|
252
|
+
point: _objectSpread(_objectSpread({}, (_finturfChartLine$opt2 = finturfChartLine.options) === null || _finturfChartLine$opt2 === void 0 ? void 0 : (_finturfChartLine$opt3 = _finturfChartLine$opt2.elements) === null || _finturfChartLine$opt3 === void 0 ? void 0 : _finturfChartLine$opt3.point), {}, {
|
|
253
|
+
radius: 4,
|
|
254
|
+
borderWidth: 1,
|
|
255
|
+
borderColor: '#E1E8F1'
|
|
256
|
+
})
|
|
257
|
+
}),
|
|
258
|
+
animations: _objectSpread(_objectSpread({}, (_finturfChartLine$opt4 = finturfChartLine.options) === null || _finturfChartLine$opt4 === void 0 ? void 0 : _finturfChartLine$opt4.animations), {}, {
|
|
259
|
+
y: _objectSpread(_objectSpread({}, (_finturfChartLine$opt5 = finturfChartLine.options) === null || _finturfChartLine$opt5 === void 0 ? void 0 : (_finturfChartLine$opt6 = _finturfChartLine$opt5.animations) === null || _finturfChartLine$opt6 === void 0 ? void 0 : _finturfChartLine$opt6.y), {}, {
|
|
260
|
+
duration: 0
|
|
261
|
+
}) // tension: {
|
|
262
|
+
// duration: 1000,
|
|
263
|
+
// easing: 'linear',
|
|
264
|
+
// from: 0.45,
|
|
265
|
+
// to: 1,
|
|
266
|
+
// loop: true
|
|
267
|
+
// }
|
|
268
|
+
|
|
269
|
+
})
|
|
270
|
+
}),
|
|
271
|
+
notLibraryOptions: _objectSpread(_objectSpread({}, finturfChartLine.notLibraryOptions), {}, {
|
|
272
|
+
changeData: _objectSpread(_objectSpread({}, (_finturfChartLine$not = finturfChartLine.notLibraryOptions) === null || _finturfChartLine$not === void 0 ? void 0 : _finturfChartLine$not.changeData), {}, {
|
|
273
|
+
addNotLibraryAnimations: [{
|
|
274
|
+
type: 'runningColumns',
|
|
275
|
+
// duration - ms
|
|
276
|
+
duration: 600,
|
|
277
|
+
// default easing - 'linear',
|
|
278
|
+
// easing: 'easeInOutExpo',
|
|
279
|
+
// ToDo - предусмотреть 'auto' и default для from и to
|
|
280
|
+
columnsDelayCoef: 500,
|
|
281
|
+
isFixExtremeColumns: true
|
|
282
|
+
}]
|
|
283
|
+
})
|
|
284
|
+
}) // notLibraryOptions: {
|
|
285
|
+
// ...finturfChartLine.notLibraryOptions,
|
|
286
|
+
// changeData: {
|
|
287
|
+
// ...finturfChartLine.notLibraryOptions?.changeData,
|
|
288
|
+
// addNotLibraryAnimations: [{
|
|
289
|
+
// type: 'LineTensionChange',
|
|
290
|
+
// // duration - ms
|
|
291
|
+
// duration: 1000,
|
|
292
|
+
// // default easing - 'linear',
|
|
293
|
+
// // easing: 'easeInOutExpo',
|
|
294
|
+
// // ToDo - предусмотреть 'auto' и default для from и to
|
|
295
|
+
// from: 0.2,
|
|
296
|
+
// to: 0.6,
|
|
297
|
+
// // columnsDelayCoef: 500
|
|
298
|
+
// }],
|
|
247
299
|
// },
|
|
248
300
|
// },
|
|
249
301
|
|
|
250
|
-
})
|
|
251
|
-
})
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
finturfChartBar: _objectSpread({}, addGradient(finturfChartBar, _Chart.GRADIENT_OBJECTS.finturf.bar)),
|
|
255
|
-
finturfChartBarLoadingMode: _objectSpread({}, finturfChartBar),
|
|
256
|
-
finturfChartLine: _objectSpread({}, addGradient(finturfChartLine, _Chart.GRADIENT_OBJECTS.finturf.line)),
|
|
257
|
-
finturfChartLineLoadingMode: _objectSpread({}, finturfChartLine),
|
|
258
|
-
finturfPositiveLineIcon: _objectSpread({}, addGradient(reactChartJsOptionsLayouts.lineIconLayout, _Chart.GRADIENT_OBJECTS.finturf.line))
|
|
259
|
-
}, (0, _defineProperty2.default)(_reactChartJsOptions, "finturfPositiveLineIcon", _objectSpread({}, addGradient(reactChartJsOptionsLayouts.lineIconLayout, _objectSpread(_objectSpread({}, _Chart.GRADIENT_OBJECTS.finturf.line), {}, {
|
|
260
|
-
colors: _Chart.FINTURF_ADD_GRADIENT_COLORS_NEGATIVE
|
|
261
|
-
})))), (0, _defineProperty2.default)(_reactChartJsOptions, "finturfPositiveLineIcon", getLineIconLayoutOptionsAlongWithGradient({
|
|
262
|
-
gradientTargetPropertyName: 'borderColor',
|
|
263
|
-
colors: ['#53D1AD', '#389AA3'],
|
|
264
|
-
direction: 'toRight'
|
|
265
|
-
})), (0, _defineProperty2.default)(_reactChartJsOptions, "finturfNegativeLineIcon", getLineIconLayoutOptionsAlongWithGradient({
|
|
266
|
-
gradientTargetPropertyName: 'borderColor',
|
|
267
|
-
colors: ['#FDB4DB', '#FA2E69'],
|
|
268
|
-
direction: 'toRight'
|
|
269
|
-
})), (0, _defineProperty2.default)(_reactChartJsOptions, "finturfLoadingModeBar", finturfLoadingModeBar), (0, _defineProperty2.default)(_reactChartJsOptions, "finturfLoadingModeLine", finturfLoadingModeLine), _reactChartJsOptions);
|
|
302
|
+
}),
|
|
303
|
+
finturfPositiveLineIcon: _objectSpread({}, addGradientsSettings(reactChartJsOptionsLayouts.lineIconLayout, _Chart.GRADIENTS_OBJECTS.finturf.positiveLineIcon)),
|
|
304
|
+
finturfNegativeLineIcon: _objectSpread({}, addGradientsSettings(reactChartJsOptionsLayouts.lineIconLayout, _Chart.GRADIENTS_OBJECTS.finturf.negativeLineIcon))
|
|
305
|
+
};
|
|
270
306
|
var _default = reactChartJsOptions; // Chart component constructors
|
|
271
307
|
|
|
272
308
|
exports.default = _default;
|
|
@@ -5,9 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.prepareData = exports.
|
|
9
|
-
|
|
10
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
8
|
+
exports.prepareData = exports.getChartTypeKey = exports.getOptions = void 0;
|
|
11
9
|
|
|
12
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
11
|
|
|
@@ -17,11 +15,9 @@ var _Chart = require("./Chart.constants");
|
|
|
17
15
|
|
|
18
16
|
var _utils = require("../../../../../../JS/Functions/utils");
|
|
19
17
|
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
18
|
+
var _datasetSetters = require("./datasetSetters");
|
|
23
19
|
|
|
24
|
-
|
|
20
|
+
var _excluded = ["notLibraryOptions"];
|
|
25
21
|
|
|
26
22
|
var getOptions = function getOptions(model) {
|
|
27
23
|
return _optionsConstructor.default[model] || {};
|
|
@@ -37,66 +33,6 @@ var getChartTypeKey = function getChartTypeKey(model) {
|
|
|
37
33
|
|
|
38
34
|
exports.getChartTypeKey = getChartTypeKey;
|
|
39
35
|
|
|
40
|
-
var createGradient = function createGradient(_ref) {
|
|
41
|
-
var ctx = _ref.ctx,
|
|
42
|
-
area = _ref.area,
|
|
43
|
-
colors = _ref.colors,
|
|
44
|
-
direction = _ref.direction,
|
|
45
|
-
correctionFactors = _ref.correctionFactors;
|
|
46
|
-
|
|
47
|
-
var getStartGradient = function getStartGradient() {
|
|
48
|
-
switch (direction) {
|
|
49
|
-
case 'toTop-toRight':
|
|
50
|
-
return ctx.createLinearGradient(area.left, area.bottom, area.right, area.top);
|
|
51
|
-
|
|
52
|
-
case 'toTop-toLeft':
|
|
53
|
-
return ctx.createLinearGradient(area.right, area.bottom, area.left, area.top);
|
|
54
|
-
|
|
55
|
-
case 'toBottom-toRight':
|
|
56
|
-
return ctx.createLinearGradient(area.left, area.top, area.right, area.bottom);
|
|
57
|
-
|
|
58
|
-
case 'toBottom-toLeft':
|
|
59
|
-
return ctx.createLinearGradient(area.right, area.top, area.left, area.bottom);
|
|
60
|
-
|
|
61
|
-
case 'toBottom':
|
|
62
|
-
return ctx.createLinearGradient(0, area.top, 0, area.bottom);
|
|
63
|
-
|
|
64
|
-
case 'toTop':
|
|
65
|
-
return ctx.createLinearGradient(0, area.bottom, 0, area.top);
|
|
66
|
-
|
|
67
|
-
case 'toLeft':
|
|
68
|
-
return ctx.createLinearGradient(area.right, 0, area.left, 0);
|
|
69
|
-
|
|
70
|
-
case 'toRight':
|
|
71
|
-
default:
|
|
72
|
-
return ctx.createLinearGradient(area.left, 0, area.right, 0);
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
var getGradientWithPoints = function getGradientWithPoints(corection) {
|
|
77
|
-
var newGradient = getStartGradient();
|
|
78
|
-
var INACCURACY = 0.01;
|
|
79
|
-
var staptPoint = corection && corection + INACCURACY < 1 ? 1 - corection - INACCURACY : 0;
|
|
80
|
-
if (corection) newGradient.addColorStop(0, colors[0]);
|
|
81
|
-
colors.forEach(function (color, idx) {
|
|
82
|
-
var point = function () {
|
|
83
|
-
if (!idx) return staptPoint;
|
|
84
|
-
if (idx === colors.length - 1) return 1;
|
|
85
|
-
return (corection || 1) / (colors.length - 1) * idx + staptPoint;
|
|
86
|
-
}();
|
|
87
|
-
|
|
88
|
-
newGradient.addColorStop(point.toFixed(2), color);
|
|
89
|
-
});
|
|
90
|
-
return newGradient;
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
return correctionFactors ? correctionFactors.map(function (fraction) {
|
|
94
|
-
return getGradientWithPoints(fraction);
|
|
95
|
-
}) : getGradientWithPoints();
|
|
96
|
-
};
|
|
97
|
-
|
|
98
|
-
exports.createGradient = createGradient;
|
|
99
|
-
|
|
100
36
|
var prepareData = function prepareData(model, data, chart) {
|
|
101
37
|
if (!chart) return data;
|
|
102
38
|
|
|
@@ -105,43 +41,47 @@ var prepareData = function prepareData(model, data, chart) {
|
|
|
105
41
|
libraryOptions = (0, _objectWithoutProperties2.default)(_getOptions, _excluded);
|
|
106
42
|
|
|
107
43
|
var dataPreparationIterationsKeys = notLibraryOptions !== null && notLibraryOptions !== void 0 && notLibraryOptions.changeData ? Object.keys(notLibraryOptions.changeData) : [];
|
|
44
|
+
return dataPreparationIterationsKeys.reduce(function (acc, iterationKey) {
|
|
45
|
+
return changeData(acc, iterationKey);
|
|
46
|
+
}, (0, _utils.clone)(data));
|
|
108
47
|
|
|
109
|
-
|
|
48
|
+
function changeData(currentData, iterationKey) {
|
|
110
49
|
switch (iterationKey) {
|
|
111
|
-
case 'addGradient':
|
|
112
|
-
var addGradient = notLibraryOptions.changeData.addGradient;
|
|
113
|
-
return _objectSpread(_objectSpread({}, currentData), {}, {
|
|
114
|
-
datasets: currentData.datasets.map(function (dataset) {
|
|
115
|
-
return _objectSpread(_objectSpread({}, dataset), {}, (0, _defineProperty2.default)({}, addGradient.gradientTargetPropertyName, createGradient({
|
|
116
|
-
ctx: chart.ctx,
|
|
117
|
-
area: chart.chartArea,
|
|
118
|
-
colors: addGradient.colors,
|
|
119
|
-
direction: addGradient.direction,
|
|
120
|
-
correctionFactors: addGradient.typeDistributionOfGradientPoints === 'personalBase' ? dataset.data.map(function (value) {
|
|
121
|
-
return value / Math.max.apply(null, dataset.data);
|
|
122
|
-
}) : null
|
|
123
|
-
})));
|
|
124
|
-
})
|
|
125
|
-
});
|
|
126
|
-
|
|
127
50
|
case 'setMaxBarThickness':
|
|
128
|
-
var
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
});
|
|
134
|
-
})
|
|
51
|
+
var _ref = notLibraryOptions.changeData || {},
|
|
52
|
+
setMaxBarThickness = _ref.setMaxBarThickness;
|
|
53
|
+
|
|
54
|
+
return (0, _datasetSetters.addDatasetsObjects)(currentData, {
|
|
55
|
+
maxBarThickness: setMaxBarThickness
|
|
135
56
|
});
|
|
136
57
|
|
|
58
|
+
case 'addGradientsObjects':
|
|
59
|
+
var _ref2 = notLibraryOptions.changeData || {},
|
|
60
|
+
addGradientsObjects = _ref2.addGradientsObjects;
|
|
61
|
+
|
|
62
|
+
return addGradientsObjects.reduce(function (acc, gradientSettingsObj) {
|
|
63
|
+
return (0, _datasetSetters.addGradientsObject)(acc, gradientSettingsObj, chart);
|
|
64
|
+
}, (0, _utils.clone)(currentData));
|
|
65
|
+
|
|
66
|
+
case 'addNotLibraryAnimations':
|
|
67
|
+
var _ref3 = (notLibraryOptions === null || notLibraryOptions === void 0 ? void 0 : notLibraryOptions.changeData) || {},
|
|
68
|
+
addNotLibraryAnimations = _ref3.addNotLibraryAnimations;
|
|
69
|
+
|
|
70
|
+
return addNotLibraryAnimations.reduce(function (acc, animationObj) {
|
|
71
|
+
return (0, _datasetSetters.addNotLibraryAnimation)(acc, animationObj, chart);
|
|
72
|
+
}, currentData);
|
|
73
|
+
// ToDo - после выпилить кейс
|
|
74
|
+
|
|
75
|
+
case 'consoleCurrentData':
|
|
76
|
+
console.log(currentData);
|
|
77
|
+
return currentData;
|
|
78
|
+
|
|
137
79
|
default:
|
|
138
80
|
return currentData;
|
|
139
81
|
}
|
|
140
|
-
}
|
|
82
|
+
}
|
|
141
83
|
|
|
142
|
-
|
|
143
|
-
return changeData(acc, iterationKey);
|
|
144
|
-
}, (0, _utils.clone)(data));
|
|
84
|
+
;
|
|
145
85
|
};
|
|
146
86
|
|
|
147
87
|
exports.prepareData = prepareData;
|
|
@@ -80,8 +80,6 @@ var ExampleChartIntegration = function ExampleChartIntegration(props) {
|
|
|
80
80
|
tab4 = _useState16[0],
|
|
81
81
|
setTab4 = _useState16[1];
|
|
82
82
|
|
|
83
|
-
var stateChangesRef = (0, _react.useRef)([]);
|
|
84
|
-
|
|
85
83
|
var getMockData = function getMockData() {
|
|
86
84
|
var labels = (0, _utils.getLabels)(range);
|
|
87
85
|
|
|
@@ -172,8 +170,7 @@ var ExampleChartIntegration = function ExampleChartIntegration(props) {
|
|
|
172
170
|
setTab1(null);
|
|
173
171
|
setTab2(null);
|
|
174
172
|
setTab3(null);
|
|
175
|
-
setTab4(null);
|
|
176
|
-
stateChangesRef.current = []; // эмуляция запросов
|
|
173
|
+
setTab4(null); // эмуляция запросов
|
|
177
174
|
// вся логика происходит в самих входящих промисах
|
|
178
175
|
// Promise.all добавлен для расширения на случай надобности описания эффектов по завершении всех запросов
|
|
179
176
|
|
|
@@ -182,11 +179,7 @@ var ExampleChartIntegration = function ExampleChartIntegration(props) {
|
|
|
182
179
|
(0, _react.useLayoutEffect)(function () {
|
|
183
180
|
setInitialModel(getModel());
|
|
184
181
|
setDataForRender(selectData());
|
|
185
|
-
}, [!!getTabData(tab), tab]);
|
|
186
|
-
(0, _react.useEffect)(function () {
|
|
187
|
-
var data = getTabData(tab);
|
|
188
|
-
setDataForRender(selectData());
|
|
189
|
-
}, [tab, chartType]);
|
|
182
|
+
}, [!!getTabData(tab), tab, chartType]);
|
|
190
183
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
191
184
|
className: "example-wrapper"
|
|
192
185
|
}, /*#__PURE__*/_react.default.createElement(_InputDateRange.default, (0, _extends2.default)({}, dateRange, {
|