intelicoreact 0.2.26 → 0.2.27

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

@@ -0,0 +1,235 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _uuid = require("uuid");
+
+var _Chart = _interopRequireDefault(require("../Chart/Chart"));
+
+var _InputDateRange = _interopRequireDefault(require("../../FormElements/InputDateRange/InputDateRange"));
+
+var _utils = require("./partial/utils");
+
+var _utils2 = require("../../../Functions/utils");
+
+require("./partial/AnyOuterClass.scss");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ExampleChartIntegration = function ExampleChartIntegration(props) {
+  var _ref = props || {},
+      dateRange = _ref.dateRange,
+      chart = _ref.chart;
+
+  var _useState = (0, _react.useState)({
+    intervalKey: 'thisMonth'
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      range = _useState2[0],
+      setRange = _useState2[1];
+
+  var _useState3 = (0, _react.useState)('Bar'),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      chartType = _useState4[0],
+      setChartType = _useState4[1];
+
+  var _useState5 = (0, _react.useState)('tab1'),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      tab = _useState6[0],
+      setTab = _useState6[1];
+
+  var _useState7 = (0, _react.useState)('finturfChartBar'),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      initialModel = _useState8[0],
+      setInitialModel = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(null),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      tab1 = _useState10[0],
+      setTab1 = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(null),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      tab2 = _useState12[0],
+      setTab2 = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(null),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      tab3 = _useState14[0],
+      setTab3 = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(null),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      tab4 = _useState16[0],
+      setTab4 = _useState16[1];
+
+  var stateChangesRef = (0, _react.useRef)([]);
+
+  var getMockData = function getMockData() {
+    var labels = (0, _utils.getLabels)(range);
+
+    var mock = function mock() {
+      return chartType === 'Bar' ? labels.map(function (label) {
+        return 50;
+      }) : labels.map(function (label) {
+        return (0, _utils.getMockValue)();
+      });
+    };
+
+    return {
+      labels: labels,
+      datasets: [{
+        data: mock()
+      }]
+    };
+  };
+
+  var _useState17 = (0, _react.useState)(getMockData()),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      dataForRender = _useState18[0],
+      setDataForRender = _useState18[1];
+
+  var getTabData = function getTabData(tabId) {
+    switch (tabId) {
+      case 'tab1':
+        return !tab1 ? null : (0, _utils2.clone)(tab1);
+
+      case 'tab2':
+        return !tab2 ? null : (0, _utils2.clone)(tab2);
+
+      case 'tab3':
+        return !tab3 ? null : (0, _utils2.clone)(tab3);
+
+      case 'tab4':
+        return !tab4 ? null : (0, _utils2.clone)(tab4);
+
+      default:
+        return null;
+    }
+  };
+
+  var selectData = function selectData() {
+    return getTabData(tab) ? getTabData(tab) : getMockData();
+  };
+
+  var modelsForSwitch = (0, _react.useMemo)(function () {
+    return !!getTabData(tab) ? ['finturfChartBar', 'finturfChartLine'] : ['finturfLoadingModeBar', 'finturfLoadingModeLine'];
+  }, [!!getTabData(tab)]);
+
+  var handleChangeChartType = function handleChangeChartType(model) {
+    setChartType(model.includes('Line') ? 'Line' : 'Bar');
+    setInitialModel(model);
+  };
+
+  var getModel = function getModel() {
+    if (!getTabData(tab)) return chartType === 'Bar' ? 'finturfLoadingModeBar' : 'finturfLoadingModeLine';else return chartType === 'Bar' ? 'finturfChartBar' : 'finturfChartLine';
+  };
+
+  var processResponse = function processResponse(res, tabId) {
+    switch (tabId) {
+      case 'tab1':
+        setTab1(res);
+        break;
+
+      case 'tab2':
+        setTab2(res);
+        break;
+
+      case 'tab3':
+        setTab3(res);
+        break;
+
+      case 'tab4':
+        setTab4(res);
+        break;
+
+      default:
+        break;
+    }
+
+    return res;
+  };
+
+  (0, _react.useLayoutEffect)(function () {
+    setDataForRender(getMockData());
+    setTab1(null);
+    setTab2(null);
+    setTab3(null);
+    setTab4(null);
+    stateChangesRef.current = []; // эмуляция запросов
+    // вся логика происходит в самих входящих промисах
+    // Promise.all добавлен для расширения на случай надобности описания эффектов по завершении всех запросов
+
+    Promise.all([(0, _utils.getTab)('tab1', range, processResponse), (0, _utils.getTab)('tab2', range, processResponse), (0, _utils.getTab)('tab3', range, processResponse), (0, _utils.getTab)('tab4', range, processResponse)]);
+  }, [range]);
+  (0, _react.useLayoutEffect)(function () {
+    setInitialModel(getModel());
+    setDataForRender(selectData());
+  }, [!!getTabData(tab), tab]);
+  (0, _react.useEffect)(function () {
+    var data = getTabData(tab);
+    setDataForRender(selectData());
+  }, [tab, chartType]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "example-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_InputDateRange.default, (0, _extends2.default)({}, dateRange, {
+    value: range,
+    onChange: setRange
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "buttons-block"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: (0, _classnames.default)('tab-button', {
+      'tab-button_active': tab === 'tab1'
+    }),
+    onClick: function onClick() {
+      return setTab('tab1');
+    }
+  }, "Tab 1"), /*#__PURE__*/_react.default.createElement("button", {
+    className: (0, _classnames.default)('tab-button', {
+      'tab-button_active': tab === 'tab2'
+    }),
+    onClick: function onClick() {
+      return setTab('tab2');
+    }
+  }, "Tab 2"), /*#__PURE__*/_react.default.createElement("button", {
+    className: (0, _classnames.default)('tab-button', {
+      'tab-button_active': tab === 'tab3'
+    }),
+    onClick: function onClick() {
+      return setTab('tab3');
+    }
+  }, "Tab 3"), /*#__PURE__*/_react.default.createElement("button", {
+    className: (0, _classnames.default)('tab-button', {
+      'tab-button_active': tab === 'tab4'
+    }),
+    onClick: function onClick() {
+      return setTab('tab4');
+    }
+  }, "Tab 4")), /*#__PURE__*/_react.default.createElement(_Chart.default, (0, _extends2.default)({}, chart, {
+    key: JSON.stringify(dataForRender),
+    data: dataForRender,
+    setModelExternalValue: handleChangeChartType,
+    initialModel: initialModel,
+    modelsForSwitch: modelsForSwitch
+  })));
+};
+
+var _default = ExampleChartIntegration;
+exports.default = _default;

package/dist/Atomic/UI/ExampleChartIntegration/partial/AnyOuterClass.scss

@@ -0,0 +1,61 @@
+.example-wrapper {
+  max-width: 850px;
+  
+  .buttons-block {
+    width: 100%;
+    margin-top: 50px;
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  .tab-button {
+    width: 100px;
+    height: 40px;
+
+    margin-right: 20px;
+    border: 1px solid black;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &_active {
+      text-decoration: underline;
+    }
+  }
+
+  .chart:not(.chart_icon-mode) {
+    max-width: 806px;
+
+    background: #FFFFFF;
+    box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.05);
+    border-radius: 16px;
+  }
+
+  .chart__description-title {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0.1px;
+    color: #3B414B;
+  }
+
+  .chart__description-value {
+    span {
+      font-style: normal;
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 30px;
+      letter-spacing: 0.359794px;
+      color: #3B414B;
+
+      &:last-child {
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0.2px;
+        color: #757F8C;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTab = exports.getMockValue = exports.getLabels = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+
+var _dependencies = require("../../../FormElements/InputDateRange/dependencies");
+
+var getLabels = function getLabels(range) {
+  // safely Range must have 'start' and 'end' properties
+  var safelyRange = (0, _dependencies.getActualDateRange)(range);
+  var NO_MORE_THAN_TWO_DAYS = 48;
+  var NO_MORE_THAN_TWO_MONTHS = 2;
+  var NO_MORE_THAN_THREE_YEARS = 36;
+
+  var getValues = function getValues(intervalStepKey) {
+    var format;
+
+    switch (intervalStepKey) {
+      case 'hours':
+        format = 'MM.DD.YYYY - HH:00';
+        break;
+
+      case 'days':
+        format = 'MM.DD.YYYY';
+        break;
+
+      case 'months':
+        format = 'MM.YYYY';
+        break;
+
+      default:
+        format = 'YYYY';
+        break;
+    }
+
+    var process = (0, _toConsumableArray2.default)(Array((0, _momentTimezone.default)(safelyRange === null || safelyRange === void 0 ? void 0 : safelyRange.end).diff(safelyRange === null || safelyRange === void 0 ? void 0 : safelyRange.start, intervalStepKey)).keys()).reduce(function (acc, iteration) {
+      acc.values.push(acc.point.format(format));
+      acc.point = acc.point.add(1, intervalStepKey);
+      return acc;
+    }, {
+      point: (0, _momentTimezone.default)(safelyRange.start),
+      values: []
+    });
+    return process.values;
+  };
+
+  if ((0, _momentTimezone.default)(safelyRange === null || safelyRange === void 0 ? void 0 : safelyRange.end).diff(safelyRange === null || safelyRange === void 0 ? void 0 : safelyRange.start, 'hours') <= NO_MORE_THAN_TWO_DAYS) return getValues('hours');else if ((0, _momentTimezone.default)(safelyRange === null || safelyRange === void 0 ? void 0 : safelyRange.end).diff(safelyRange === null || safelyRange === void 0 ? void 0 : safelyRange.start, 'month') <= NO_MORE_THAN_TWO_MONTHS) return getValues('days');else if ((0, _momentTimezone.default)(safelyRange === null || safelyRange === void 0 ? void 0 : safelyRange.end).diff(safelyRange === null || safelyRange === void 0 ? void 0 : safelyRange.start, 'month') <= NO_MORE_THAN_THREE_YEARS) return getValues('months');else return getValues('years');
+};
+
+exports.getLabels = getLabels;
+
+var getMockValue = function getMockValue() {
+  return Math.trunc(Math.random() * 1000);
+};
+
+exports.getMockValue = getMockValue;
+
+var getTab = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(tabId, range, callback) {
+    var requestDelay;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.t0 = tabId;
+            _context.next = _context.t0 === 'tab1' ? 3 : _context.t0 === 'tab2' ? 5 : _context.t0 === 'tab3' ? 7 : _context.t0 === 'tab4' ? 9 : 11;
+            break;
+
+          case 3:
+            requestDelay = 2000;
+            return _context.abrupt("break", 13);
+
+          case 5:
+            requestDelay = 1500;
+            return _context.abrupt("break", 13);
+
+          case 7:
+            requestDelay = 3000;
+            return _context.abrupt("break", 13);
+
+          case 9:
+            requestDelay = 500;
+            return _context.abrupt("break", 13);
+
+          case 11:
+            requestDelay = 1000;
+            return _context.abrupt("break", 13);
+
+          case 13:
+            return _context.abrupt("return", new Promise(function (res) {
+              return setTimeout(function () {
+                var labels = getLabels(range);
+                res({
+                  labels: labels,
+                  datasets: [{
+                    data: labels.map(function () {
+                      return getMockValue();
+                    })
+                  }]
+                });
+              }, requestDelay);
+            }).then(function (res) {
+              return callback ? callback(res, tabId) : res;
+            }));
+
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function getTab(_x, _x2, _x3) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+exports.getTab = getTab;

package/dist/Functions/utils.js

@@ -5,10 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.checkedRef = exports.firstLetterCapital = exports.changeMeta = exports.addBitDepthPoints = exports.throttle = exports.debounce = exports.getColorById = exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
+exports.checkedRef = exports.firstLetterCapital = exports.changeMeta = exports.addBitDepthPoints = exports.throttle = exports.debounce = exports.getColorById = exports.getStyles = exports.logout = exports.clone = exports.useOutsideToggle = exports.handleObjectChange = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _react = require("react");
 
 var _index = require("../Constants/index.constants");
@@ -55,6 +57,18 @@ var useOutsideToggle = function useOutsideToggle(ref, setOut, open) {
 
 exports.useOutsideToggle = useOutsideToggle;
 
+var clone = function clone(obj) {
+  var data = obj instanceof Array ? [] : {};
+
+  for (var i in obj) {
+    data[i] = (0, _typeof2.default)(obj[i]) === 'object' && obj[i] != null ? clone(obj[i]) : obj[i];
+  }
+
+  return data;
+};
+
+exports.clone = clone;
+
 var logout = function logout() {
   window.localStorage.removeItem('accessToken');
   window.localStorage.removeItem('tokenExpires');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.2.26",
+  "version": "0.2.27",
   "description": "",
   "main": "dist/index.js",
   "files": [
@@ -18,10 +18,12 @@
   "license": "ISC",
   "dependencies": {
     "anme": "^1.0.1",
+    "chart.js": "^3.8.0",
     "classnames": "^2.3.1",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.34",
     "react": "^17.0.2",
+    "react-chartjs-2": "^4.1.0",
     "react-feather": "^2.0.9",
     "react-input-mask": "^2.0.4"
   },