intelicoreact 1.6.19 → 1.6.20

package/dist/Atomic/UI/Arrow/Arrow.js

@@ -1 +1,132 @@
-function t(t,r){(null==r||r>t.length)&&(r=t.length);for(var e=0,n=Array(r);e<r;e++)n[e]=t[e];return n}import{jsx as r,jsxs as e}from"react/jsx-runtime";import{useEffect as n,useRef as o,useState as i}from"react";import a from"classnames";import{getStyles as s}from"../../../Functions/utils";import"./Arrow.scss";export default function(l){var d,c=l.type,u=l.className,h=l.onClick,f=l.disabled,p=l.testId,w=l.isAlt;if(!c||"left"!==c&&"right"!==c)return null;var k=o(),m=(d=i("currentColor"),function(t){if(Array.isArray(t))return t}(d)||function(t,r){var e,n,o=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=o){var i=[],a=!0,s=!1;try{for(o=o.call(t);!(a=(e=o.next()).done)&&(i.push(e.value),i.length!==r);a=!0);}catch(t){s=!0,n=t}finally{try{a||null==o.return||o.return()}finally{if(s)throw n}}return i}}(d,2)||function(r,e){if(r){if("string"==typeof r)return t(r,2);var n=Object.prototype.toString.call(r).slice(8,-1);if("Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return t(r,e)}}(d,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),g=m[0],v=m[1];return n(function(){k.current&&v(s(k.current,"color"))},[k.current]),r("div",{"data-testid":"arrow--key-".concat(p,"--type-").concat(c),ref:k,className:a("arrow","arrow_".concat(c),u,{arrow_disabled:f}),onClick:h,children:"left"===c?w?e("svg",{"data-testid":p,version:"1.1",id:"Layer_1",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",children:[r("path",{d:"M12.7,8H3.3",stroke:g,fill:"none",strokeWidth:1.3333,strokeLinecap:"round",strokeLinejoin:"round"}),r("path",{d:"M8,3.3L3.3,8L8,12.7",stroke:g,fill:"none",strokeWidth:1.3333,strokeLinecap:"round",strokeLinejoin:"round"})]}):r("svg",{"data-testid":p,width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r("path",{d:"M15 18L9 12L15 6",stroke:g,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}):w?e("svg",{"data-testid":p,id:"Layer_1",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",children:[r("path",{d:"M3.3,8h9.3",stroke:g,fill:"none",strokeWidth:1.3333,strokeLinecap:"round",strokeLinejoin:"round"}),r("path",{d:"M8,3.3L12.7,8L8,12.7",stroke:g,fill:"none",strokeWidth:1.3333,strokeLinecap:"round",strokeLinejoin:"round"})]}):r("svg",{"data-testid":p,width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r("path",{d:"M9 18L15 12L9 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}
+import React, { useEffect, useRef, useState } from "react";
+
+import cn from "classnames";
+
+import { getStyles } from "../../../Functions/utils";
+
+import "./Arrow.scss";
+
+const Arrow = ({ type, className, onClick, disabled, testId, isAlt }) => {
+  if (!type || (type !== "left" && type !== "right")) return null;
+  const ref = useRef();
+  const [color, setColor] = useState("currentColor");
+
+  useEffect(() => {
+    if (ref.current) {
+      setColor(getStyles(ref.current, "color"));
+    }
+  }, [ref.current]);
+
+  function renderSVG() {
+    if (type === "left") {
+      if (isAlt)
+        return (
+          <svg
+            data-testid={testId}
+            version="1.1"
+            id="Layer_1"
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M12.7,8H3.3"
+              stroke={color}
+              fill="none"
+              strokeWidth={1.3333}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M8,3.3L3.3,8L8,12.7"
+              stroke={color}
+              fill="none"
+              strokeWidth={1.3333}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        );
+      return (
+        <svg
+          data-testid={testId}
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M15 18L9 12L15 6"
+            stroke={color}
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+    }
+    if (isAlt)
+      return (
+        <svg
+          data-testid={testId}
+          id="Layer_1"
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+        >
+          <path
+            d="M3.3,8h9.3"
+            stroke={color}
+            fill="none"
+            strokeWidth={1.3333}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M8,3.3L12.7,8L8,12.7"
+            stroke={color}
+            fill="none"
+            strokeWidth={1.3333}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+    return (
+      <svg
+        data-testid={testId}
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9 18L15 12L9 6"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <div
+      data-testid={`arrow--key-${testId}--type-${type}`}
+      ref={ref}
+      className={cn("arrow", `arrow_${type}`, className, {
+        arrow_disabled: disabled,
+      })}
+      onClick={onClick}
+    >
+      {renderSVG()}
+    </div>
+  );
+};
+
+export default Arrow;

package/dist/Atomic/UI/Box/Box.js

@@ -1 +1,52 @@
-import{jsx as o}from"react/jsx-runtime";import"react";import r from"classnames";import"./Box.scss";var i={column:"column",row:"row"},a={s:"s",m:"m"};export default function(c){var n=c.children,t=c.paddingVariant,m=void 0===t?a.m:t,s=c.radiiVariant,d=void 0===s?a.s:s,e=c.direction,l=void 0===e?i.column:e,u=c.className;return o("div",{style:{flexDirection:l},className:r("box","box--padding-".concat(m),"box--radii-".concat(d),u,{df:l===i.row,"dfc-jc":l===i.column}),children:n})}
+// global
+import React from "react";
+
+import cn from "classnames";
+
+// styles
+import "./Box.scss";
+
+const directionVariants = {
+  column: "column",
+  row: "row",
+};
+
+const sizes = {
+  none: "none",
+  xs: "xs",
+  s: "s",
+  m: "m",
+  l: "l",
+  xl: "xl",
+};
+
+const Box = function ({
+  children,
+  paddingVariant = sizes.m,
+  radiiVariant = sizes.s,
+  direction = directionVariants.column,
+  className,
+}) {
+  const styles = {
+    flexDirection: direction,
+  };
+  return (
+    <div
+      style={styles}
+      className={cn(
+        "box",
+        `box--padding-${paddingVariant}`,
+        `box--radii-${radiiVariant}`,
+        className,
+        {
+          df: direction === directionVariants.row,
+          "dfc-jc": direction === directionVariants.column,
+        },
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Box;

package/dist/Atomic/UI/Button/Button.js

@@ -1 +1,89 @@
-function e(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return i}});var t,r=require("react/jsx-runtime"),n=(t=require("classnames"))&&t.__esModule?t:{default:t};require("./Button.scss");var o="button",i=function(t){var i,l,c,s=t.label,a=t.onClick,u=t.disabled,b=t.icon,p=t.className,d=t.children,f=t.style,y=t.noIcon,O=t.isIconRight,j=t.testId,v=t.tabIndex,g=t.variant,m=void 0===g?"primary":g,P=t.isTextEllipsis,x=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],!(t.indexOf(r)>=0)&&Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(t,["label","onClick","disabled","icon","className","children","style","noIcon","isIconRight","testId","tabIndex","variant","isTextEllipsis"]),h=y||"ellipse-apply"===m||"ellipse-cancel"===m;return(0,r.jsxs)("button",(i=function(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),o.forEach(function(r){e(t,r,n[r])})}return t}({"data-testid":void 0===j?"button":j,tabIndex:void 0===v?0:v,style:f,className:(0,n.default)(o,(e(c={},"".concat(o,"_").concat(m),m),e(c,"button_icon-left",b&&!O),e(c,"button_icon-right",b&&O),c),p),onClick:a,disabled:u,type:"button"},x),l=l={children:[!h&&b,s&&(0,r.jsx)("div",{className:(0,n.default)("button__text",{"text-ellipsis":void 0!==P&&P}),children:s}),!s&&d?d:null]},Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(l)):(function(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r})(Object(l)).forEach(function(e){Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(l,e))}),i))};
+function e(e, t, r) {
+    return t in e ? Object.defineProperty(e, t, {
+        value: r,
+        enumerable: !0,
+        configurable: !0,
+        writable: !0
+    }) : e[t] = r, e;
+}
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), Object.defineProperty(exports, "default", {
+    enumerable: !0,
+    get: function() {
+        return i;
+    }
+});
+var t, r = require("react/jsx-runtime"), n = (t = require("classnames")) && t.__esModule ? t : {
+    default: t
+};
+require("./Button.scss");
+var o = 'button', i = function(t) {
+    var i, l, c, s = t.label, a = t.onClick, u = t.disabled, b = t.icon, p = t.className, d = t.children, f = t.style, y = t.noIcon, O = t.isIconRight, j = t.testId, v = t.tabIndex, g = t.variant, m = void 0 === g ? 'primary' : g, P = t.isTextEllipsis, x = function(e, t) {
+        if (null == e) return {};
+        var r, n, o = function(e, t) {
+            if (null == e) return {};
+            var r, n, o = {}, i = Object.keys(e);
+            for(n = 0; n < i.length; n++)r = i[n], t.indexOf(r) >= 0 || (o[r] = e[r]);
+            return o;
+        }(e, t);
+        if (Object.getOwnPropertySymbols) {
+            var i = Object.getOwnPropertySymbols(e);
+            for(n = 0; n < i.length; n++)r = i[n], !(t.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+        }
+        return o;
+    }(t, [
+        "label",
+        "onClick",
+        "disabled",
+        "icon",
+        "className",
+        "children",
+        "style",
+        "noIcon",
+        "isIconRight",
+        "testId",
+        "tabIndex",
+        "variant",
+        "isTextEllipsis"
+    ]), h = y || 'ellipse-apply' === m || 'ellipse-cancel' === m;
+    return (0, r.jsxs)("button", (i = function(t) {
+        for(var r = 1; r < arguments.length; r++){
+            var n = null != arguments[r] ? arguments[r] : {}, o = Object.keys(n);
+            "function" == typeof Object.getOwnPropertySymbols && (o = o.concat(Object.getOwnPropertySymbols(n).filter(function(e) {
+                return Object.getOwnPropertyDescriptor(n, e).enumerable;
+            }))), o.forEach(function(r) {
+                e(t, r, n[r]);
+            });
+        }
+        return t;
+    }({
+        "data-testid": void 0 === j ? 'button' : j,
+        tabIndex: void 0 === v ? 0 : v,
+        style: f,
+        className: (0, n.default)(o, (e(c = {}, "".concat(o, "_").concat(m), m), e(c, 'button_icon-left', b && !O), e(c, 'button_icon-right', b && O), c), p),
+        onClick: a,
+        disabled: u,
+        type: "button"
+    }, x), l = l = {
+        children: [
+            !h && b,
+            s && (0, r.jsx)("div", {
+                className: (0, n.default)('button__text', {
+                    'text-ellipsis': void 0 !== P && P
+                }),
+                children: s
+            }),
+            !s && d ? d : null
+        ]
+    }, Object.getOwnPropertyDescriptors ? Object.defineProperties(i, Object.getOwnPropertyDescriptors(l)) : (function(e, t) {
+        var r = Object.keys(e);
+        if (Object.getOwnPropertySymbols) {
+            var n = Object.getOwnPropertySymbols(e);
+            r.push.apply(r, n);
+        }
+        return r;
+    })(Object(l)).forEach(function(e) {
+        Object.defineProperty(i, e, Object.getOwnPropertyDescriptor(l, e));
+    }), i));
+};

package/dist/Atomic/UI/ButtonsBar/ButtonsBar.js

@@ -1 +1,72 @@
-import{jsx as t,jsxs as n}from"react/jsx-runtime";import"react";import e from"classnames";import{Link as i}from"react-router-dom";import a from"../Button/Button";import"./ButtonsBar.scss";export default function(o){var s=o.className,r=o.rejectBtnLabel,c=o.rejectBtnIcon,m=o.isRejectBtnIconRight,l=o.rejectBtnVariant,d=o.rejectBtnClass,B=o.isRejectBtnDisabled,b=o.rejectLink,f=o.onReject,j=o.confirmBtnLabel,u=o.confirmBtnIcon,I=o.isConfirmBtnIconRight,C=o.confirmBtnVariant,R=o.confirmBtnClass,h=o.isConfirmBtnDisabled,p=o.onConfirm,v=o.testIdFirstBtn,N=void 0===v?"button-bar-first-item":v,g=o.testIdSecondBtn;return n("div",{className:e("button-bar",s),children:[b?t(i,{className:"text-decoration-none",to:b,children:t(a,{testId:N,label:r,variant:l,onClick:f,disabled:B,icon:c,isIconRight:m,className:e(d,{mr5:j})})}):t(a,{"data-testid":N,label:r,variant:l,onClick:f,disabled:B,icon:c,isIconRight:m,className:e(d,{mr5:j})}),t(a,{testId:void 0===g?"button-bar-second-item":g,label:j,variant:C,onClick:p,disabled:h,icon:u,isIconRight:I,className:R})]})}
+import React from "react";
+
+import cn from "classnames";
+import { Link } from "react-router-dom";
+
+import Button from "../Button/Button";
+
+import "./ButtonsBar.scss";
+
+const ButtonsBar = ({
+  className,
+  rejectBtnLabel,
+  rejectBtnIcon,
+  isRejectBtnIconRight,
+  rejectBtnVariant,
+  rejectBtnClass,
+  isRejectBtnDisabled,
+  rejectLink,
+  onReject,
+  confirmBtnLabel,
+  confirmBtnIcon,
+  isConfirmBtnIconRight,
+  confirmBtnVariant,
+  confirmBtnClass,
+  isConfirmBtnDisabled,
+  onConfirm,
+  testIdFirstBtn = "button-bar-first-item",
+  testIdSecondBtn = "button-bar-second-item",
+}) => {
+  return (
+      <div className={cn("button-bar", className)}>
+      {rejectLink ? (
+        <Link className="text-decoration-none" to={rejectLink}>
+          <Button
+            testId={testIdFirstBtn}
+            label={rejectBtnLabel}
+            variant={rejectBtnVariant}
+            onClick={onReject}
+            disabled={isRejectBtnDisabled}
+            icon={rejectBtnIcon}
+            isIconRight={isRejectBtnIconRight}
+            className={cn(rejectBtnClass, { mr5: confirmBtnLabel })}
+          />
+        </Link>
+      ) : (
+        <Button
+          data-testid={testIdFirstBtn}
+          label={rejectBtnLabel}
+          variant={rejectBtnVariant}
+          onClick={onReject}
+          disabled={isRejectBtnDisabled}
+          icon={rejectBtnIcon}
+          isIconRight={isRejectBtnIconRight}
+          className={cn(rejectBtnClass, { mr5: confirmBtnLabel })}
+        />
+      )}
+
+      <Button
+        testId={testIdSecondBtn}
+        label={confirmBtnLabel}
+        variant={confirmBtnVariant}
+        onClick={onConfirm}
+        disabled={isConfirmBtnDisabled}
+        icon={confirmBtnIcon}
+        isIconRight={isConfirmBtnIconRight}
+        className={confirmBtnClass}
+      />
+    </div>
+  );
+};
+
+export default ButtonsBar;

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

@@ -1 +1,172 @@
-function t(t,r){(null==r||r>t.length)&&(r=t.length);for(var e=0,n=Array(r);e<r;e++)n[e]=t[e];return n}function r(t,r,e){return r in t?Object.defineProperty(t,r,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[r]=e,t}function e(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(e){r(t,e,n[e])})}return t}function n(r,e){return function(t){if(Array.isArray(t))return t}(r)||function(t,r){var e,n,i=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=i){var o=[],c=!0,a=!1;try{for(i=i.call(t);!(c=(e=i.next()).done)&&(o.push(e.value),!r||o.length!==r);c=!0);}catch(t){a=!0,n=t}finally{try{c||null==i.return||i.return()}finally{if(a)throw n}}return o}}(r,e)||function(r,e){if(r){if("string"==typeof r)return t(r,e);var n=Object.prototype.toString.call(r).slice(8,-1);if("Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return t(r,e)}}(r,e)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}import{jsx as i,jsxs as o}from"react/jsx-runtime";import{useCallback as c,useEffect as a,useLayoutEffect as l,useMemo as u,useRef as s,useState as f}from"react";import{BarElement as p,CategoryScale as d,Chart as m,Filler as y,LineElement as h,LinearScale as b,PointElement as v,Tooltip as O}from"chart.js";import"chart.js/helpers";import j from"classnames";import*as g from"react-chartjs-2";import{clone as w}from"../../../Functions/utils";import{COMPONENT_OPTIONS as _,DEFAULT_CHART_MODEL as S,ICON_MODELS as P}from"./partial/Chart.constants";import C from"./partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon";import{correctModelKey as A,getChartTypeKey as N,getNotLibraryOptionsOptions as D,getOptions as T,prepareData as x}from"./partial/utils";import"./Chart.scss";var L="chart";m.register(d,b,p,v,h,y,O);export default function(t){var p,d,m,y=t.className,h=t.initialModel,b=t.modelsForSwitch,v=t.setModelExternalValue,O=t.description,I=t.customOptions,k=t.data,E=t.addToDatasets,F=t.modifyOptions;if(!k)return null;var M=O||{},B=M.label,U=M.value,V=n(f(S),2),$=V[0],q=V[1],z=n(f(k),2),G=z[0],H=z[1],J=s(null),K=s(null),Q=u(function(){return I||(F?F(T($)):T($))},[I,$,null==F||null==(m=F.toString)?void 0:m.call(F),k]),R=u(function(){return I?null==I?void 0:I.notLibraryOptions:D($)},[I,$,k]),W=c(function(t){return i(g[N($)],e({ref:J},t))},[$]),X=_.disableDescriptionsFor.includes($),Y=_.disableChartTypeSwitcherFor.includes($);return l(function(){v&&"emptyLayout"!==$&&v($)},[$]),l(function(){var t,r,e=(R||{}).setCanvasDimensions;K.current&&(K.current.style.width=null!=(t=null==e?void 0:e.width)?t:"",K.current.style.height=null!=(r=null==e?void 0:e.height)?r:"")},[R]),a(function(){q(A(h))},[h]),a(function(){H(x($,w(k),J.current,E))},[$,k]),o("div",{className:j(L,r({},"".concat(L,"_icon-mode"),P.includes($)),y),children:[o("div",{className:j("".concat(L,"__header"),r({},"".concat(L,"__header_only-switcher"),!O)),children:[O&&!X?o("div",{className:j("".concat(L,"__description")),children:[B?i("span",{className:j("".concat(L,"__description-title")),children:B}):null,U?i("div",{className:j("".concat(L,"__description-value")),children:U}):null]}):null,Y?null:o("div",{className:j("".concat(L,"__type-switcher")),children:[i(C,{iconType:"Bar",isActive:"Bar"===N($),onClick:function(){return q((null==b?void 0:b[0])||"barLayout")}}),i(C,{iconType:"Line",isActive:"Line"===N($),onClick:function(){return q((null==b?void 0:b[1])||"lineLayout")}})]})]}),i("div",{ref:K,className:j("".concat(L,"__chart-wrapper")),children:i(W,(p=e({},Q),d=d={data:G},Object.getOwnPropertyDescriptors?Object.defineProperties(p,Object.getOwnPropertyDescriptors(d)):(function(t,r){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e.push.apply(e,n)}return e})(Object(d)).forEach(function(t){Object.defineProperty(p,t,Object.getOwnPropertyDescriptor(d,t))}),p))})]})}
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import {
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Filler,
+  LineElement,
+  LinearScale,
+  PointElement,
+  Tooltip,
+} from "chart.js";
+import { getRelativePosition } from "chart.js/helpers";
+import cn from "classnames";
+import * as ChartComponents from "react-chartjs-2";
+
+import { clone } from "../../../Functions/utils";
+
+import {
+  CHART_TYPES,
+  COMPONENT_OPTIONS,
+  DEFAULT_CHART_MODEL,
+  ICON_MODELS,
+} from "./partial/Chart.constants";
+import ChartTypeSwitcherIcon from "./partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon";
+import {
+  correctModelKey,
+  getChartTypeKey,
+  getNotLibraryOptionsOptions,
+  getOptions,
+  prepareData,
+} from "./partial/utils";
+
+import "./Chart.scss";
+
+const RC = "chart";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Filler,
+  Tooltip,
+);
+
+const Chart = ({
+  className,
+  initialModel,
+  modelsForSwitch,
+  setModelExternalValue,
+  description,
+  customOptions,
+  data,
+  addToDatasets,
+  modifyOptions,
+}) => {
+  if (!data) return null;
+
+  const { label, value } = description || {};
+
+  const [model, setModel] = useState(DEFAULT_CHART_MODEL);
+  const [localData, setLocalData] = useState(data);
+  const chartRef = useRef(null);
+  const charContainertRef = useRef(null);
+
+  const options = useMemo(
+    () =>
+      customOptions ||
+      (modifyOptions ? modifyOptions(getOptions(model)) : getOptions(model)),
+    [customOptions, model, modifyOptions?.toString?.(), data],
+  );
+
+  const notLibraryOptionsOptions = useMemo(
+    () =>
+      customOptions
+        ? customOptions?.notLibraryOptions
+        : getNotLibraryOptionsOptions(model),
+    [customOptions, model, data],
+  );
+
+  const ChartComponent = useCallback(
+    (props) => {
+      const Component = ChartComponents[getChartTypeKey(model)];
+      return <Component ref={chartRef} {...props} />;
+    },
+    [model],
+  );
+
+  const isExcludeDescription =
+    COMPONENT_OPTIONS.disableDescriptionsFor.includes(model);
+  const isExcludeChartTypeSwitcher =
+    COMPONENT_OPTIONS.disableChartTypeSwitcherFor.includes(model);
+
+  useLayoutEffect(() => {
+    if (setModelExternalValue && model !== "emptyLayout")
+      setModelExternalValue(model);
+  }, [model]);
+
+  useLayoutEffect(() => {
+    const { setCanvasDimensions } = notLibraryOptionsOptions || {};
+    if (charContainertRef.current) {
+      charContainertRef.current.style.width = setCanvasDimensions?.width ?? "";
+      charContainertRef.current.style.height =
+        setCanvasDimensions?.height ?? "";
+    }
+  }, [notLibraryOptionsOptions]);
+
+  useEffect(() => {
+    setModel(correctModelKey(initialModel));
+  }, [initialModel]);
+
+  useEffect(() => {
+    setLocalData(
+      prepareData(model, clone(data), chartRef.current, addToDatasets),
+    );
+  }, [model, data]);
+
+  return (
+    <div
+      className={cn(
+        RC,
+        { [`${RC}_icon-mode`]: ICON_MODELS.includes(model) },
+        className,
+      )}
+    >
+      <div
+        className={cn(`${RC}__header`, {
+          [`${RC}__header_only-switcher`]: !description,
+        })}
+      >
+        {description && !isExcludeDescription ? (
+          <div className={cn(`${RC}__description`)}>
+            {label ? (
+              <span className={cn(`${RC}__description-title`)}>{label}</span>
+            ) : null}
+            {value ? (
+              <div className={cn(`${RC}__description-value`)}>{value}</div>
+            ) : null}
+          </div>
+        ) : null}
+        {!isExcludeChartTypeSwitcher ? (
+          <div className={cn(`${RC}__type-switcher`)}>
+            <ChartTypeSwitcherIcon
+              iconType="Bar"
+              isActive={getChartTypeKey(model) === "Bar"}
+              onClick={() => setModel(modelsForSwitch?.[0] || "barLayout")}
+            />
+            <ChartTypeSwitcherIcon
+              iconType="Line"
+              isActive={getChartTypeKey(model) === "Line"}
+              onClick={() => setModel(modelsForSwitch?.[1] || "lineLayout")}
+            />
+          </div>
+        ) : null}
+      </div>
+      <div ref={charContainertRef} className={cn(`${RC}__chart-wrapper`)}>
+        <ChartComponent {...options} data={localData} />
+      </div>
+    </div>
+  );
+};
+
+export default Chart;

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

@@ -1 +1,95 @@
-function r(r,t){(null==t||t>r.length)&&(t=r.length);for(var o=0,e=Array(t);o<t;o++)e[o]=r[o];return e}function t(t){return function(t){if(Array.isArray(t))return r(t)}(t)||function(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}(t)||function(t,o){if(t){if("string"==typeof t)return r(t,void 0);var e=Object.prototype.toString.call(t).slice(8,-1);if("Object"===e&&t.constructor&&(e=t.constructor.name),"Map"===e||"Set"===e)return Array.from(e);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return r(t,o)}}(t)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}export var CHART_TYPES=["Bar","Line"];export var DEFAULT_CHART_MODEL="emptyLayout";export var FINTURF_ADD_GRADIENT_COLORS_POSITIVE=["#53D1AD","#389AA3"];export var FINTURF_ADD_GRADIENT_COLORS_NEGATIVE=["#FDB4DB","#FA2E69"];export var GRADIENTS_OBJECTS={finturf:{bar:[{gradientTargetPropertyName:"backgroundColor",colors:FINTURF_ADD_GRADIENT_COLORS_POSITIVE,direction:"toBottom",typeDistributionOfGradientPoints:"personalBase",collorStopPoints:[.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:[.31,.72,1],isAddFill:!0}],positiveLineIcon:[{gradientTargetPropertyName:"borderColor",colors:FINTURF_ADD_GRADIENT_COLORS_POSITIVE,direction:"toRight"}],negativeLineIcon:[{gradientTargetPropertyName:"borderColor",colors:FINTURF_ADD_GRADIENT_COLORS_NEGATIVE,direction:"toRight"}]}};export var FINTURF_TOOLTIP_OPTIONS={enabled:!0,mode:"index",intersect:!1,padding:8,backgroundColor:"#FFFFFF",titleColor:"#757F8C",borderColor:"#D6D9E4",titleFont:{family:"Sarabun",style:"normal",weight:500,size:12},titleAlign:"center",bodyColor:"#1E1E2D",bodyFont:{family:"Sarabun",style:"normal",weight:400,size:14},bodyAlign:"center",caretSize:0,displayColors:!1,borderWidth:1,borderRadius:6,callbacks:{label:function(r){return r.raw||"0"}}};export var ICON_MODELS=["lineIconLayout","finturfPositiveLineIcon","finturfNegativeLineIcon"];export var COMPONENT_OPTIONS={disableDescriptionsFor:t(ICON_MODELS),disableChartTypeSwitcherFor:t(ICON_MODELS).concat(["barLayout","lineLayout"])};
+export const CHART_TYPES = ["Bar", "Line"];
+export const DEFAULT_CHART_MODEL = "emptyLayout";
+
+export const FINTURF_ADD_GRADIENT_COLORS_POSITIVE = ["#53D1AD", "#389AA3"];
+export const FINTURF_ADD_GRADIENT_COLORS_NEGATIVE = ["#FDB4DB", "#FA2E69"];
+
+export const GRADIENTS_OBJECTS = {
+  finturf: {
+    bar: [
+      {
+        gradientTargetPropertyName: "backgroundColor",
+        colors: FINTURF_ADD_GRADIENT_COLORS_POSITIVE,
+        direction: "toBottom",
+        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],
+        isAddFill: true,
+      },
+    ],
+    positiveLineIcon: [
+      {
+        gradientTargetPropertyName: "borderColor",
+        colors: FINTURF_ADD_GRADIENT_COLORS_POSITIVE,
+        direction: "toRight",
+      },
+    ],
+    negativeLineIcon: [
+      {
+        gradientTargetPropertyName: "borderColor",
+        colors: FINTURF_ADD_GRADIENT_COLORS_NEGATIVE,
+        direction: "toRight",
+      },
+    ],
+  },
+};
+
+export const FINTURF_TOOLTIP_OPTIONS = {
+  enabled: true,
+  mode: "index",
+  intersect: false,
+  padding: 8,
+  backgroundColor: "#FFFFFF",
+  titleColor: "#757F8C",
+  borderColor: "#D6D9E4",
+  titleFont: {
+    family: "Sarabun",
+    style: "normal",
+    weight: 500,
+    size: 12,
+    // line-height: 18px;
+  },
+  titleAlign: "center",
+  bodyColor: "#1E1E2D",
+  bodyFont: {
+    family: "Sarabun",
+    style: "normal",
+    weight: 400,
+    size: 14,
+  },
+  bodyAlign: "center",
+  caretSize: 0,
+  displayColors: false,
+  borderWidth: 1,
+  borderRadius: 6,
+  callbacks: {
+    label: (context) => context.raw || "0",
+  },
+};
+
+export const ICON_MODELS = [
+  "lineIconLayout",
+  "finturfPositiveLineIcon",
+  "finturfNegativeLineIcon",
+];
+
+export const COMPONENT_OPTIONS = {
+  disableDescriptionsFor: [...ICON_MODELS],
+  disableChartTypeSwitcherFor: [...ICON_MODELS, "barLayout", "lineLayout"],
+};