intelicoreact 0.2.33 → 0.2.36

package/dist/Atomic/UI/Chart/Chart.js

@@ -41,7 +41,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var RC = 'chart';
 
-_chart.Chart.register(_chart.CategoryScale, _chart.LinearScale, _chart.BarElement, _chart.PointElement, _chart.LineElement);
+_chart.Chart.register(_chart.CategoryScale, _chart.LinearScale, _chart.BarElement, _chart.PointElement, _chart.LineElement, _chart.Filler);
 
 var Chart = function Chart(_ref) {
   var className = _ref.className,
@@ -77,8 +77,8 @@ var Chart = function Chart(_ref) {
 
   var isExcludeChartTypeSwitcher = _optionsConstructor.componentOptions.disableChartTypeSwitcherFor.includes(model);
 
-  var getChartOptions = function getChartOptions() {
-    return customOptions || (0, _utils.getOptions)(model);
+  var getChartOptions = function getChartOptions(currentModel) {
+    return customOptions || (0, _utils.getOptions)(currentModel);
   };
 
   var ChartComponent = (0, _react.useCallback)(function (props) {
@@ -88,16 +88,13 @@ var Chart = function Chart(_ref) {
     }, props));
   }, [model]);
   (0, _react.useLayoutEffect)(function () {
-    if (initialModel !== model) setModel(correctModelKey(initialModel));
+    setModel(correctModelKey(initialModel));
   }, [initialModel]);
   (0, _react.useLayoutEffect)(function () {
     if (setModelExternalValue) setModelExternalValue(correctModelKey(model));
   }, [model]);
   (0, _react.useEffect)(function () {
-    return setLocalData((0, _utils.prepareData)(model, data, chartRef.current));
-  }, [model, data, chartRef]);
-  (0, _react.useEffect)(function () {
-    var _getChartOptions = getChartOptions(),
+    var _getChartOptions = getChartOptions(model),
         _getChartOptions$notL = _getChartOptions.notLibraryOptions;
 
     _getChartOptions$notL = _getChartOptions$notL === void 0 ? {} : _getChartOptions$notL;
@@ -110,6 +107,9 @@ var Chart = function Chart(_ref) {
       chartRef.current.canvas.parentNode.style.height = (_setCanvasDimensions$2 = setCanvasDimensions === null || setCanvasDimensions === void 0 ? void 0 : setCanvasDimensions.height) !== null && _setCanvasDimensions$2 !== void 0 ? _setCanvasDimensions$2 : '';
     }
   }, [model]);
+  (0, _react.useEffect)(function () {
+    return setLocalData((0, _utils.prepareData)(model, data, chartRef.current));
+  }, [model, data, chartRef]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(RC, (0, _defineProperty2.default)({}, "".concat(RC, "_icon-mode"), _optionsConstructor.iconModels.includes(model)), className)
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -136,7 +136,7 @@ var Chart = function Chart(_ref) {
     }
   })) : null), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(RC, "__chart-wrapper"))
-  }, /*#__PURE__*/_react.default.createElement(ChartComponent, (0, _extends2.default)({}, getChartOptions(), {
+  }, /*#__PURE__*/_react.default.createElement(ChartComponent, (0, _extends2.default)({}, getChartOptions(model), {
     data: localData
   }))));
 };

package/dist/Atomic/UI/Chart/partial/Chart.constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GRADIENT_OBJECTS = exports.FINTURF_ADD_GRADIENT_COLORS_NEGATIVE = exports.FINTURF_ADD_GRADIENT_COLORS_POSITIVE = exports.DEFAULT_CHART_MODEL = exports.CHART_TYPES = void 0;
+exports.GRADIENTS_OBJECTS = exports.FINTURF_ADD_GRADIENT_COLORS_NEGATIVE = exports.FINTURF_ADD_GRADIENT_COLORS_POSITIVE = exports.DEFAULT_CHART_MODEL = exports.CHART_TYPES = void 0;
 var CHART_TYPES = ['Bar', 'Line'];
 exports.CHART_TYPES = CHART_TYPES;
 var DEFAULT_CHART_MODEL = 'barLayout';
@@ -12,19 +12,37 @@ var FINTURF_ADD_GRADIENT_COLORS_POSITIVE = ['#53D1AD', '#389AA3'];
 exports.FINTURF_ADD_GRADIENT_COLORS_POSITIVE = FINTURF_ADD_GRADIENT_COLORS_POSITIVE;
 var FINTURF_ADD_GRADIENT_COLORS_NEGATIVE = ['#FDB4DB', '#FA2E69'];
 exports.FINTURF_ADD_GRADIENT_COLORS_NEGATIVE = FINTURF_ADD_GRADIENT_COLORS_NEGATIVE;
-var GRADIENT_OBJECTS = {
+var GRADIENTS_OBJECTS = {
   finturf: {
-    bar: {
+    bar: [{
       gradientTargetPropertyName: 'backgroundColor',
       colors: FINTURF_ADD_GRADIENT_COLORS_POSITIVE,
       direction: 'toBottom',
-      typeDistributionOfGradientPoints: 'personalBase'
-    },
-    line: {
+      typeDistributionOfGradientPoints: 'personalBase',
+      collorStopPoints: [0.2, 1]
+    }],
+    line: [{
       gradientTargetPropertyName: 'borderColor',
       colors: FINTURF_ADD_GRADIENT_COLORS_POSITIVE,
       direction: 'toRight'
-    }
+    }, {
+      gradientTargetPropertyName: 'backgroundColor',
+      colors: ['rgba(84, 210, 173, 0.2)', 'rgba(84, 210, 173, 0.1)', 'rgba(84, 210, 173, 0)'],
+      direction: 'toBottom',
+      collorStopPoints: [0.31, 0.72, 1],
+      typeDistributionOfGradientPoints: 'personalBase',
+      isAddFill: true
+    }],
+    positiveLineIcon: [{
+      gradientTargetPropertyName: 'borderColor',
+      colors: FINTURF_ADD_GRADIENT_COLORS_POSITIVE,
+      direction: 'toRight'
+    }],
+    negativeLineIcon: [{
+      gradientTargetPropertyName: 'borderColor',
+      colors: FINTURF_ADD_GRADIENT_COLORS_NEGATIVE,
+      direction: 'toRight'
+    }]
   }
 };
-exports.GRADIENT_OBJECTS = GRADIENT_OBJECTS;
+exports.GRADIENTS_OBJECTS = GRADIENTS_OBJECTS;

package/dist/Atomic/UI/Chart/partial/datasetSetters.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addNotLibraryAnimation = exports.addGradientsObject = exports.createGradient = exports.addDatasetsObjects = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _excluded = ["type"];
+
+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; }
+
+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; }
+
+// auxiliary functions
+var addDatasetsObjects = function addDatasetsObjects(currentData, mutation) {
+  return _objectSpread(_objectSpread({}, currentData), {}, {
+    datasets: currentData.datasets.map(function (dataset) {
+      return _objectSpread(_objectSpread({}, dataset), typeof mutation === 'function' ? mutation(dataset) : mutation);
+    })
+  });
+};
+
+exports.addDatasetsObjects = addDatasetsObjects;
+
+var createGradient = function createGradient(_ref) {
+  var ctx = _ref.ctx,
+      area = _ref.area,
+      colors = _ref.colors,
+      direction = _ref.direction,
+      correctionFactors = _ref.correctionFactors,
+      collorStopPoints = _ref.collorStopPoints;
+
+  var getStartGradient = function getStartGradient() {
+    switch (direction) {
+      case 'toTop-toRight':
+        return ctx.createLinearGradient(area.left, area.bottom, area.right, area.top);
+
+      case 'toTop-toLeft':
+        return ctx.createLinearGradient(area.right, area.bottom, area.left, area.top);
+
+      case 'toBottom-toRight':
+        return ctx.createLinearGradient(area.left, area.top, area.right, area.bottom);
+
+      case 'toBottom-toLeft':
+        return ctx.createLinearGradient(area.right, area.top, area.left, area.bottom);
+
+      case 'toBottom':
+        return ctx.createLinearGradient(0, area.top, 0, area.bottom);
+
+      case 'toTop':
+        return ctx.createLinearGradient(0, area.bottom, 0, area.top);
+
+      case 'toLeft':
+        return ctx.createLinearGradient(area.right, 0, area.left, 0);
+
+      case 'toRight':
+      default:
+        return ctx.createLinearGradient(area.left, 0, area.right, 0);
+    }
+  };
+
+  var getGradientWithPoints = function getGradientWithPoints(corection) {
+    var newGradient = getStartGradient();
+    var staptPoint = corection ? 1 - corection : 0;
+    colors.forEach(function (color, idx) {
+      var point = function () {
+        if (idx === colors.length - 1) return 1;
+        return collorStopPoints && Array.isArray(collorStopPoints) ? staptPoint + collorStopPoints[idx] * (corection || 1) : staptPoint + 1 / colors.length * (corection || 1);
+      }();
+
+      newGradient.addColorStop(point.toFixed(2), color);
+    });
+    return newGradient;
+  };
+
+  return correctionFactors ? correctionFactors.map(function (corection) {
+    return getGradientWithPoints(corection);
+  }) : getGradientWithPoints();
+}; // target functions
+
+
+exports.createGradient = createGradient;
+
+var addGradientsObject = function addGradientsObject(currentData, gradientSettingsObj, chart) {
+  return addDatasetsObjects(currentData, function (dataset) {
+    return _objectSpread((0, _defineProperty2.default)({}, gradientSettingsObj.gradientTargetPropertyName, createGradient({
+      ctx: chart.ctx,
+      area: chart.chartArea,
+      colors: gradientSettingsObj.colors,
+      direction: gradientSettingsObj.direction,
+      correctionFactors: gradientSettingsObj.typeDistributionOfGradientPoints === 'personalBase' ? dataset.data.map(function (value) {
+        return value / Math.max.apply(null, dataset.data);
+      }) : null,
+      collorStopPoints: gradientSettingsObj.collorStopPoints
+    })), gradientSettingsObj.isAddFill ? {
+      fill: true
+    } : {});
+  });
+};
+
+exports.addGradientsObject = addGradientsObject;
+
+var addNotLibraryAnimation = function addNotLibraryAnimation(currentData, animationObj, chart) {
+  var _ref2 = animationObj || {},
+      type = _ref2.type,
+      restAnimationObj = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+
+  switch (type) {
+    case 'runningColumns':
+      var runningColumnsDefaultFromValue = 25;
+      var runningColumnsDefaultToValue = 75;
+      var runningColumnsDefaultAverageValue = 50;
+      var runningColumnsDefaultColumnsDelayCoef = 50;
+      return addDatasetsObjects(currentData, function (dataset) {
+        return {
+          animations: dataset.data.map(function (item, idx) {
+            return {
+              y: {
+                duration: animationObj.duration,
+                easing: animationObj.easing || 'linear',
+                from: animationObj.isFixExtremeColumns && (!idx || idx === dataset.data.length - 1) ? runningColumnsDefaultAverageValue : animationObj.from || runningColumnsDefaultFromValue,
+                to: animationObj.isFixExtremeColumns && (!idx || idx === dataset.data.length - 1) ? runningColumnsDefaultAverageValue : animationObj.to || runningColumnsDefaultToValue,
+                loop: true,
+                delay: Math.random().toFixed(1) * (animationObj.columnsDelayCoef || runningColumnsDefaultColumnsDelayCoef)
+              }
+            };
+          })
+        };
+      });
+
+    default:
+      return currentData;
+  }
+};
+
+exports.addNotLibraryAnimation = addNotLibraryAnimation;

package/dist/Atomic/UI/Chart/partial/optionsConstructor.js

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _Chart = require("./Chart.constants");
 
-var _reactChartJsOptionsL, _reactChartJsOptionsL2, _reactChartJsOptionsL3, _reactChartJsOptionsL4, _reactChartJsOptionsL5, _reactChartJsOptionsL6, _reactChartJsOptionsL7, _reactChartJsOptionsL8, _reactChartJsOptionsL9, _reactChartJsOptionsL10, _reactChartJsOptionsL11, _reactChartJsOptionsL12, _reactChartJsOptionsL13, _reactChartJsOptionsL14, _reactChartJsOptionsL15, _reactChartJsOptionsL16, _reactChartJsOptionsL17, _reactChartJsOptionsL18, _reactChartJsOptionsL19, _reactChartJsOptionsL20, _reactChartJsOptionsL21, _reactChartJsOptionsL22, _reactChartJsOptionsL23, _reactChartJsOptionsL24, _reactChartJsOptionsL25, _finturfChartLine$opt, _finturfChartLine$opt2, _finturfChartLine$opt3, _reactChartJsOptions;
+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;
 
 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; }
 
@@ -97,8 +97,8 @@ var reactChartJsOptionsLayouts = {
         },
         line: {
           tension: 0.45,
-          borderWidth: 2,
           borderJoinStyle: 'round',
+          borderWidth: 2,
           capBezierPoints: true
         }
       }
@@ -144,7 +144,7 @@ var reactChartJsOptionsLayouts = {
       },
       elements: {
         bar: {
-          borderRadius: 5
+          borderRadius: 10
         }
       }
     },
@@ -160,33 +160,13 @@ var reactChartJsOptionsLayouts = {
 };
 exports.reactChartJsOptionsLayouts = reactChartJsOptionsLayouts;
 
-var addGradient = function addGradient(currentOptions, gradientObj) {
-  var _currentOptions$notLi;
-
-  return _objectSpread(_objectSpread({}, currentOptions), {}, {
-    notLibraryOptions: _objectSpread(_objectSpread({}, currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.notLibraryOptions), {}, {
-      changeData: _objectSpread(_objectSpread({}, currentOptions === null || currentOptions === void 0 ? void 0 : (_currentOptions$notLi = currentOptions.notLibraryOptions) === null || _currentOptions$notLi === void 0 ? void 0 : _currentOptions$notLi.changeData), {}, {
-        addGradient: gradientObj
-      })
-    })
-  });
-};
-
-var getLineIconLayoutOptionsAlongWithGradient = function getLineIconLayoutOptionsAlongWithGradient(gradientObj) {
-  return _objectSpread({}, addGradient(reactChartJsOptionsLayouts.lineIconLayout, gradientObj));
-};
-
 var finturfChartBar = _objectSpread(_objectSpread({}, reactChartJsOptionsLayouts.barLayout), {}, {
   options: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL = reactChartJsOptionsLayouts.barLayout) === null || _reactChartJsOptionsL === void 0 ? void 0 : _reactChartJsOptionsL.options), {}, {
     maintainAspectRatio: false,
-    elements: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL2 = reactChartJsOptionsLayouts.barLayout) === null || _reactChartJsOptionsL2 === void 0 ? void 0 : (_reactChartJsOptionsL3 = _reactChartJsOptionsL2.options) === null || _reactChartJsOptionsL3 === void 0 ? void 0 : _reactChartJsOptionsL3.elements), {}, {
-      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), {}, {
-        borderRadius: 10
-      })
-    })
+    elements: _objectSpread({}, (_reactChartJsOptionsL2 = reactChartJsOptionsLayouts.barLayout) === null || _reactChartJsOptionsL2 === void 0 ? void 0 : (_reactChartJsOptionsL3 = _reactChartJsOptionsL2.options) === null || _reactChartJsOptionsL3 === void 0 ? void 0 : _reactChartJsOptionsL3.elements)
   }),
-  notLibraryOptions: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL7 = reactChartJsOptionsLayouts.barLayout) === null || _reactChartJsOptionsL7 === void 0 ? void 0 : _reactChartJsOptionsL7.notLibraryOptions), {}, {
-    changeData: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL8 = reactChartJsOptionsLayouts.barLayout) === null || _reactChartJsOptionsL8 === void 0 ? void 0 : (_reactChartJsOptionsL9 = _reactChartJsOptionsL8.notLibraryOptions) === null || _reactChartJsOptionsL9 === void 0 ? void 0 : _reactChartJsOptionsL9.changeData), {}, {
+  notLibraryOptions: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL4 = reactChartJsOptionsLayouts.barLayout) === null || _reactChartJsOptionsL4 === void 0 ? void 0 : _reactChartJsOptionsL4.notLibraryOptions), {}, {
+    changeData: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL5 = reactChartJsOptionsLayouts.barLayout) === null || _reactChartJsOptionsL5 === void 0 ? void 0 : (_reactChartJsOptionsL6 = _reactChartJsOptionsL5.notLibraryOptions) === null || _reactChartJsOptionsL6 === void 0 ? void 0 : _reactChartJsOptionsL6.changeData), {}, {
       setMaxBarThickness: 20
     }),
     setCanvasDimensions: {
@@ -196,77 +176,133 @@ var finturfChartBar = _objectSpread(_objectSpread({}, reactChartJsOptionsLayouts
 });
 
 var finturfChartLine = _objectSpread(_objectSpread({}, reactChartJsOptionsLayouts.lineLayout), {}, {
-  options: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL10 = reactChartJsOptionsLayouts.lineLayout) === null || _reactChartJsOptionsL10 === void 0 ? void 0 : _reactChartJsOptionsL10.options), {}, {
+  options: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL7 = reactChartJsOptionsLayouts.lineLayout) === null || _reactChartJsOptionsL7 === void 0 ? void 0 : _reactChartJsOptionsL7.options), {}, {
     maintainAspectRatio: false,
-    scales: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL11 = reactChartJsOptionsLayouts.lineLayout) === null || _reactChartJsOptionsL11 === void 0 ? void 0 : (_reactChartJsOptionsL12 = _reactChartJsOptionsL11.options) === null || _reactChartJsOptionsL12 === void 0 ? void 0 : _reactChartJsOptionsL12.scales), {}, {
-      y: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL13 = reactChartJsOptionsLayouts.lineLayout) === null || _reactChartJsOptionsL13 === void 0 ? void 0 : (_reactChartJsOptionsL14 = _reactChartJsOptionsL13.options) === null || _reactChartJsOptionsL14 === void 0 ? void 0 : _reactChartJsOptionsL14.scales.y), {}, {
-        title: _objectSpread({}, (_reactChartJsOptionsL15 = reactChartJsOptionsLayouts.lineLayout) === null || _reactChartJsOptionsL15 === void 0 ? void 0 : (_reactChartJsOptionsL16 = _reactChartJsOptionsL15.options) === null || _reactChartJsOptionsL16 === void 0 ? void 0 : (_reactChartJsOptionsL17 = _reactChartJsOptionsL16.scales) === null || _reactChartJsOptionsL17 === void 0 ? void 0 : (_reactChartJsOptionsL18 = _reactChartJsOptionsL17.y) === null || _reactChartJsOptionsL18 === void 0 ? void 0 : _reactChartJsOptionsL18.title),
-        grid: _objectSpread({}, (_reactChartJsOptionsL19 = reactChartJsOptionsLayouts.lineLayout) === null || _reactChartJsOptionsL19 === void 0 ? void 0 : (_reactChartJsOptionsL20 = _reactChartJsOptionsL19.options) === null || _reactChartJsOptionsL20 === void 0 ? void 0 : (_reactChartJsOptionsL21 = _reactChartJsOptionsL20.scales) === null || _reactChartJsOptionsL21 === void 0 ? void 0 : (_reactChartJsOptionsL22 = _reactChartJsOptionsL21.y) === null || _reactChartJsOptionsL22 === void 0 ? void 0 : _reactChartJsOptionsL22.grid)
-      })
-    }),
-    elements: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL23 = reactChartJsOptionsLayouts.lineLayout.options) === null || _reactChartJsOptionsL23 === void 0 ? void 0 : _reactChartJsOptionsL23.elements), {}, {
-      point: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL24 = reactChartJsOptionsLayouts.lineLayout.options) === null || _reactChartJsOptionsL24 === void 0 ? void 0 : (_reactChartJsOptionsL25 = _reactChartJsOptionsL24.elements) === null || _reactChartJsOptionsL25 === void 0 ? void 0 : _reactChartJsOptionsL25.point), {}, {
-        borderColor: '#32A784'
+    // scales: {
+    //   ...reactChartJsOptionsLayouts.lineLayout?.options?.scales,
+    //   y: {
+    //     ...reactChartJsOptionsLayouts.lineLayout?.options?.scales.y,
+    //     title: {
+    //       ...reactChartJsOptionsLayouts.lineLayout?.options?.scales?.y?.title,
+    //     },
+    //     grid: {
+    //       ...reactChartJsOptionsLayouts.lineLayout?.options?.scales?.y?.grid,
+    //     },
+    //   },
+    // },
+    elements: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL8 = reactChartJsOptionsLayouts.lineLayout.options) === null || _reactChartJsOptionsL8 === void 0 ? void 0 : _reactChartJsOptionsL8.elements), {}, {
+      point: _objectSpread(_objectSpread({}, (_reactChartJsOptionsL9 = reactChartJsOptionsLayouts.lineLayout.options) === null || _reactChartJsOptionsL9 === void 0 ? void 0 : (_reactChartJsOptionsL10 = _reactChartJsOptionsL9.elements) === null || _reactChartJsOptionsL10 === void 0 ? void 0 : _reactChartJsOptionsL10.point), {}, {
+        radius: 2,
+        borderColor: '#32A784',
+        borderWidth: 4
       })
     })
   }),
   notLibraryOptions: _objectSpread(_objectSpread({}, reactChartJsOptionsLayouts.lineLayout.notLibraryOptions), {}, {
     setCanvasDimensions: {
       height: '194px'
-    }
+    },
+    changeData: {}
   })
-});
+}); // gradientsSettings is Array of objects
 
-var finturfLoadingModeBar = _objectSpread(_objectSpread({}, finturfChartBar), {}, {
-  options: _objectSpread(_objectSpread({}, finturfChartBar.options), {}, {
-    animation: false
-  })
-});
 
-var finturfLoadingModeLine = _objectSpread(_objectSpread({}, finturfChartLine), {}, {
-  options: _objectSpread(_objectSpread({}, finturfChartLine.options), {}, {
-    elements: _objectSpread(_objectSpread({}, (_finturfChartLine$opt = finturfChartLine.options) === null || _finturfChartLine$opt === void 0 ? void 0 : _finturfChartLine$opt.elements), {}, {
-      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), {}, {
-        borderColor: '#E1E8F1'
+var addGradientsSettings = function addGradientsSettings(currentOptions, gradientsSettings) {
+  var _currentOptions$notLi;
+
+  return _objectSpread(_objectSpread({}, currentOptions), {}, {
+    notLibraryOptions: _objectSpread(_objectSpread({}, currentOptions.notLibraryOptions), {}, {
+      changeData: _objectSpread(_objectSpread({}, (_currentOptions$notLi = currentOptions.notLibraryOptions) === null || _currentOptions$notLi === void 0 ? void 0 : _currentOptions$notLi.changeData), {}, {
+        addGradientsObjects: gradientsSettings
+      })
+    })
+  });
+};
+
+var reactChartJsOptions = {
+  finturfChartBar: _objectSpread({}, addGradientsSettings(finturfChartBar, _Chart.GRADIENTS_OBJECTS.finturf.bar)),
+  finturfLoadingModeBar: _objectSpread(_objectSpread({}, finturfChartBar), {}, {
+    options: _objectSpread(_objectSpread({}, finturfChartBar.options), {}, {
+      animations: _objectSpread(_objectSpread({}, (_finturfChartBar$opti = finturfChartBar.options) === null || _finturfChartBar$opti === void 0 ? void 0 : _finturfChartBar$opti.animations), {}, {
+        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), {}, {
+          duration: 0
+        })
       })
     }),
-    animations: {
-      y: false
-    } // transitions: {
-    //   show: {
-    //     animations: {
-    //       x: false,
-    //       y: false,
-    //     }
-    //   },
-    //   hide: {
-    //     animations: {
-    //       x: false,
-    //       y: false,
-    //     }
+    notLibraryOptions: _objectSpread(_objectSpread({}, finturfChartBar.notLibraryOptions), {}, {
+      changeData: _objectSpread(_objectSpread({}, (_finturfChartBar$notL = finturfChartBar.notLibraryOptions) === null || _finturfChartBar$notL === void 0 ? void 0 : _finturfChartBar$notL.changeData), {}, {
+        addNotLibraryAnimations: [{
+          type: 'runningColumns',
+          // duration - ms
+          duration: 600,
+          // default easing - 'linear',
+          // easing: 'easeInOutExpo',
+          // ToDo - предусмотреть 'auto' и default для from и to
+          from: 10,
+          to: 90,
+          columnsDelayCoef: 500
+        }]
+      })
+    })
+  }),
+  finturfChartLine: _objectSpread({}, addGradientsSettings(finturfChartLine, _Chart.GRADIENTS_OBJECTS.finturf.line)),
+  finturfLoadingModeLine: _objectSpread(_objectSpread({}, finturfChartLine), {}, {
+    options: _objectSpread(_objectSpread({}, finturfChartLine.options), {}, {
+      elements: _objectSpread(_objectSpread({}, (_finturfChartLine$opt = finturfChartLine.options) === null || _finturfChartLine$opt === void 0 ? void 0 : _finturfChartLine$opt.elements), {}, {
+        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), {}, {
+          radius: 4,
+          borderWidth: 1,
+          borderColor: '#E1E8F1'
+        })
+      }),
+      animations: _objectSpread(_objectSpread({}, (_finturfChartLine$opt4 = finturfChartLine.options) === null || _finturfChartLine$opt4 === void 0 ? void 0 : _finturfChartLine$opt4.animations), {}, {
+        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), {}, {
+          duration: 0
+        }) // tension: {
+        //   duration: 1000,
+        //   easing: 'linear',
+        //   from: 0.45,
+        //   to: 1,
+        //   loop: true
+        // }
+
+      })
+    }),
+    notLibraryOptions: _objectSpread(_objectSpread({}, finturfChartLine.notLibraryOptions), {}, {
+      changeData: _objectSpread(_objectSpread({}, (_finturfChartLine$not = finturfChartLine.notLibraryOptions) === null || _finturfChartLine$not === void 0 ? void 0 : _finturfChartLine$not.changeData), {}, {
+        addNotLibraryAnimations: [{
+          type: 'runningColumns',
+          // duration - ms
+          duration: 600,
+          // default easing - 'linear',
+          // easing: 'easeInOutExpo',
+          // ToDo - предусмотреть 'auto' и default для from и to
+          columnsDelayCoef: 500,
+          isFixExtremeColumns: true
+        }]
+      })
+    }) // notLibraryOptions: {
+    //   ...finturfChartLine.notLibraryOptions,
+    //   changeData: {
+    //     ...finturfChartLine.notLibraryOptions?.changeData,
+    //     addNotLibraryAnimations: [{
+    //       type: 'LineTensionChange',
+    //       // duration - ms
+    //       duration: 1000,
+    //       // default easing - 'linear',
+    //       // easing: 'easeInOutExpo',
+    //       // ToDo - предусмотреть 'auto' и default для from и to
+    //       from: 0.2,
+    //       to: 0.6,
+    //       // columnsDelayCoef: 500
+    //     }],
     //   },
     // },
 
-  })
-});
-
-var reactChartJsOptions = (_reactChartJsOptions = {
-  finturfChartBar: _objectSpread({}, addGradient(finturfChartBar, _Chart.GRADIENT_OBJECTS.finturf.bar)),
-  finturfChartBarLoadingMode: _objectSpread({}, finturfChartBar),
-  finturfChartLine: _objectSpread({}, addGradient(finturfChartLine, _Chart.GRADIENT_OBJECTS.finturf.line)),
-  finturfChartLineLoadingMode: _objectSpread({}, finturfChartLine),
-  finturfPositiveLineIcon: _objectSpread({}, addGradient(reactChartJsOptionsLayouts.lineIconLayout, _Chart.GRADIENT_OBJECTS.finturf.line))
-}, (0, _defineProperty2.default)(_reactChartJsOptions, "finturfPositiveLineIcon", _objectSpread({}, addGradient(reactChartJsOptionsLayouts.lineIconLayout, _objectSpread(_objectSpread({}, _Chart.GRADIENT_OBJECTS.finturf.line), {}, {
-  colors: _Chart.FINTURF_ADD_GRADIENT_COLORS_NEGATIVE
-})))), (0, _defineProperty2.default)(_reactChartJsOptions, "finturfPositiveLineIcon", getLineIconLayoutOptionsAlongWithGradient({
-  gradientTargetPropertyName: 'borderColor',
-  colors: ['#53D1AD', '#389AA3'],
-  direction: 'toRight'
-})), (0, _defineProperty2.default)(_reactChartJsOptions, "finturfNegativeLineIcon", getLineIconLayoutOptionsAlongWithGradient({
-  gradientTargetPropertyName: 'borderColor',
-  colors: ['#FDB4DB', '#FA2E69'],
-  direction: 'toRight'
-})), (0, _defineProperty2.default)(_reactChartJsOptions, "finturfLoadingModeBar", finturfLoadingModeBar), (0, _defineProperty2.default)(_reactChartJsOptions, "finturfLoadingModeLine", finturfLoadingModeLine), _reactChartJsOptions);
+  }),
+  finturfPositiveLineIcon: _objectSpread({}, addGradientsSettings(reactChartJsOptionsLayouts.lineIconLayout, _Chart.GRADIENTS_OBJECTS.finturf.positiveLineIcon)),
+  finturfNegativeLineIcon: _objectSpread({}, addGradientsSettings(reactChartJsOptionsLayouts.lineIconLayout, _Chart.GRADIENTS_OBJECTS.finturf.negativeLineIcon))
+};
 var _default = reactChartJsOptions; // Chart component constructors
 
 exports.default = _default;

package/dist/Atomic/UI/Chart/partial/utils.js

@@ -5,9 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.prepareData = exports.createGradient = exports.getChartTypeKey = exports.getOptions = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.prepareData = exports.getChartTypeKey = exports.getOptions = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -15,13 +13,11 @@ var _optionsConstructor = _interopRequireDefault(require("./optionsConstructor")
 
 var _Chart = require("./Chart.constants");
 
-var _utils = require("../../../../../../JS/Functions/utils");
-
-var _excluded = ["notLibraryOptions"];
+var _utils = require("../../../../Functions/utils");
 
-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; }
+var _datasetSetters = require("./datasetSetters");
 
-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; }
+var _excluded = ["notLibraryOptions"];
 
 var getOptions = function getOptions(model) {
   return _optionsConstructor.default[model] || {};
@@ -37,66 +33,6 @@ var getChartTypeKey = function getChartTypeKey(model) {
 
 exports.getChartTypeKey = getChartTypeKey;
 
-var createGradient = function createGradient(_ref) {
-  var ctx = _ref.ctx,
-      area = _ref.area,
-      colors = _ref.colors,
-      direction = _ref.direction,
-      correctionFactors = _ref.correctionFactors;
-
-  var getStartGradient = function getStartGradient() {
-    switch (direction) {
-      case 'toTop-toRight':
-        return ctx.createLinearGradient(area.left, area.bottom, area.right, area.top);
-
-      case 'toTop-toLeft':
-        return ctx.createLinearGradient(area.right, area.bottom, area.left, area.top);
-
-      case 'toBottom-toRight':
-        return ctx.createLinearGradient(area.left, area.top, area.right, area.bottom);
-
-      case 'toBottom-toLeft':
-        return ctx.createLinearGradient(area.right, area.top, area.left, area.bottom);
-
-      case 'toBottom':
-        return ctx.createLinearGradient(0, area.top, 0, area.bottom);
-
-      case 'toTop':
-        return ctx.createLinearGradient(0, area.bottom, 0, area.top);
-
-      case 'toLeft':
-        return ctx.createLinearGradient(area.right, 0, area.left, 0);
-
-      case 'toRight':
-      default:
-        return ctx.createLinearGradient(area.left, 0, area.right, 0);
-    }
-  };
-
-  var getGradientWithPoints = function getGradientWithPoints(corection) {
-    var newGradient = getStartGradient();
-    var INACCURACY = 0.01;
-    var staptPoint = corection && corection + INACCURACY < 1 ? 1 - corection - INACCURACY : 0;
-    if (corection) newGradient.addColorStop(0, colors[0]);
-    colors.forEach(function (color, idx) {
-      var point = function () {
-        if (!idx) return staptPoint;
-        if (idx === colors.length - 1) return 1;
-        return (corection || 1) / (colors.length - 1) * idx + staptPoint;
-      }();
-
-      newGradient.addColorStop(point.toFixed(2), color);
-    });
-    return newGradient;
-  };
-
-  return correctionFactors ? correctionFactors.map(function (fraction) {
-    return getGradientWithPoints(fraction);
-  }) : getGradientWithPoints();
-};
-
-exports.createGradient = createGradient;
-
 var prepareData = function prepareData(model, data, chart) {
   if (!chart) return data;
 
@@ -105,43 +41,47 @@ var prepareData = function prepareData(model, data, chart) {
       libraryOptions = (0, _objectWithoutProperties2.default)(_getOptions, _excluded);
 
   var dataPreparationIterationsKeys = notLibraryOptions !== null && notLibraryOptions !== void 0 && notLibraryOptions.changeData ? Object.keys(notLibraryOptions.changeData) : [];
+  return dataPreparationIterationsKeys.reduce(function (acc, iterationKey) {
+    return changeData(acc, iterationKey);
+  }, (0, _utils.clone)(data));
 
-  var changeData = function changeData(currentData, iterationKey) {
+  function changeData(currentData, iterationKey) {
     switch (iterationKey) {
-      case 'addGradient':
-        var addGradient = notLibraryOptions.changeData.addGradient;
-        return _objectSpread(_objectSpread({}, currentData), {}, {
-          datasets: currentData.datasets.map(function (dataset) {
-            return _objectSpread(_objectSpread({}, dataset), {}, (0, _defineProperty2.default)({}, addGradient.gradientTargetPropertyName, createGradient({
-              ctx: chart.ctx,
-              area: chart.chartArea,
-              colors: addGradient.colors,
-              direction: addGradient.direction,
-              correctionFactors: addGradient.typeDistributionOfGradientPoints === 'personalBase' ? dataset.data.map(function (value) {
-                return value / Math.max.apply(null, dataset.data);
-              }) : null
-            })));
-          })
-        });
-
       case 'setMaxBarThickness':
-        var setMaxBarThickness = notLibraryOptions.changeData.setMaxBarThickness;
-        return _objectSpread(_objectSpread({}, currentData), {}, {
-          datasets: currentData.datasets.map(function (dataset) {
-            return _objectSpread(_objectSpread({}, dataset), {}, {
-              maxBarThickness: setMaxBarThickness
-            });
-          })
+        var _ref = notLibraryOptions.changeData || {},
+            setMaxBarThickness = _ref.setMaxBarThickness;
+
+        return (0, _datasetSetters.addDatasetsObjects)(currentData, {
+          maxBarThickness: setMaxBarThickness
         });
 
+      case 'addGradientsObjects':
+        var _ref2 = notLibraryOptions.changeData || {},
+            addGradientsObjects = _ref2.addGradientsObjects;
+
+        return addGradientsObjects.reduce(function (acc, gradientSettingsObj) {
+          return (0, _datasetSetters.addGradientsObject)(acc, gradientSettingsObj, chart);
+        }, (0, _utils.clone)(currentData));
+
+      case 'addNotLibraryAnimations':
+        var _ref3 = (notLibraryOptions === null || notLibraryOptions === void 0 ? void 0 : notLibraryOptions.changeData) || {},
+            addNotLibraryAnimations = _ref3.addNotLibraryAnimations;
+
+        return addNotLibraryAnimations.reduce(function (acc, animationObj) {
+          return (0, _datasetSetters.addNotLibraryAnimation)(acc, animationObj, chart);
+        }, currentData);
+      // ToDo - после выпилить кейс
+
+      case 'consoleCurrentData':
+        console.log(currentData);
+        return currentData;
+
       default:
         return currentData;
     }
-  };
+  }
 
-  return dataPreparationIterationsKeys.reduce(function (acc, iterationKey) {
-    return changeData(acc, iterationKey);
-  }, (0, _utils.clone)(data));
+  ;
 };
 
 exports.prepareData = prepareData;

package/dist/Atomic/UI/ExampleChartIntegration/ExampleChartIntegration.js

@@ -80,8 +80,6 @@ var ExampleChartIntegration = function ExampleChartIntegration(props) {
       tab4 = _useState16[0],
       setTab4 = _useState16[1];
 
-  var stateChangesRef = (0, _react.useRef)([]);
-
   var getMockData = function getMockData() {
     var labels = (0, _utils.getLabels)(range);
 
@@ -172,8 +170,7 @@ var ExampleChartIntegration = function ExampleChartIntegration(props) {
     setTab1(null);
     setTab2(null);
     setTab3(null);
-    setTab4(null);
-    stateChangesRef.current = []; // эмуляция запросов
+    setTab4(null); // эмуляция запросов
     // вся логика происходит в самих входящих промисах
     // Promise.all добавлен для расширения на случай надобности описания эффектов по завершении всех запросов
 
@@ -182,11 +179,7 @@ var ExampleChartIntegration = function ExampleChartIntegration(props) {
   (0, _react.useLayoutEffect)(function () {
     setInitialModel(getModel());
     setDataForRender(selectData());
-  }, [!!getTabData(tab), tab]);
-  (0, _react.useEffect)(function () {
-    var data = getTabData(tab);
-    setDataForRender(selectData());
-  }, [tab, chartType]);
+  }, [!!getTabData(tab), tab, chartType]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "example-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_InputDateRange.default, (0, _extends2.default)({}, dateRange, {

package/dist/Atomic/UI/Hint/Hint.js

@@ -31,7 +31,9 @@ var Hint = function Hint(_ref) {
       _ref$label = _ref.label,
       label = _ref$label === void 0 ? '' : _ref$label,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'filled' : _ref$variant;
+      variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
+      _ref$handleOpenType = _ref.handleOpenType,
+      handleOpenType = _ref$handleOpenType === void 0 ? 'click' : _ref$handleOpenType;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -58,7 +60,13 @@ var Hint = function Hint(_ref) {
   }, /*#__PURE__*/_react.default.createElement("button", {
     "data-testid": 'test-hint',
     onClick: function onClick() {
-      return setIsOpen(!isOpen);
+      return handleOpenType === 'click' && setIsOpen(!isOpen);
+    },
+    onMouseEnter: function onMouseEnter() {
+      return handleOpenType === 'hover' && setIsOpen(!isOpen);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleOpenType === 'hover' && handleClickOutside();
     },
     className: (0, _classnames.default)('hint__button', {
       hint__button_active: isOpen

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.2.33",
+  "version": "0.2.36",
   "description": "",
   "main": "dist/index.js",
   "files": [