intelicoreact 1.8.8 → 1.8.10

package/dist/Atomic/UI/AccordionText/AccordionText.jsx

@@ -1 +1,68 @@
-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(r,e){return function(t){if(Array.isArray(t))return t}(r)||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,c=!1;try{for(o=o.call(t);!(a=(e=o.next()).done)&&(i.push(e.value),!r||i.length!==r);a=!0);}catch(t){c=!0,n=t}finally{try{a||null==o.return||o.return()}finally{if(c)throw n}}return i}}(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 e,jsxs as n}from"react/jsx-runtime";import o from"classnames";import{useEffect as i,useRef as a,useState as c}from"react";import{ChevronDown as u,ChevronUp as l}from"react-feather";import"./AccordionText.scss";export default function(t){var s=t.isDefaultOpen,d=t.isOuterOpen,m=void 0!==d&&d,f=t.className,p=t.text,v=void 0===p?"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.":p,y=t.shortText,b=void 0===y?null:y,h=a(null),x=r(c(void 0!==s&&s),2),g=x[0],A=x[1],j=r(c(!1),2),O=j[0],S=j[1];return i(function(){A(m)},[m]),i(function(){var t=function(){h.current&&S(h.current.scrollWidth>h.current.clientWidth)},r=new ResizeObserver(function(){t()});return h.current&&(r.observe(h.current),t()),function(){h.current&&r.unobserve(h.current)}},[v]),n("div",{className:o("accordion-text",f,{"accordion-text--open":g}),onClick:function(){return A(function(t){return!t})},children:[e("div",{className:o("accordion-text__body",{"accordion-text__body--trim-text":O&&!g}),ref:h,children:b?g?v:b:v}),e("div",{className:"accordion-text__toggle",children:g?e(l,{}):e(u,{})})]})}
+import cn from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import { ChevronDown, ChevronUp } from 'react-feather';
+import './AccordionText.scss';
+
+const defaultText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`;
+
+function AccordionText({
+  isDefaultOpen = false,
+  isOuterOpen = false,
+  className,
+  text = defaultText,
+  shortText = null,
+}) {
+  const bodyRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(isDefaultOpen);
+  const [isNeedTrimText, setIsNeedTrimText] = useState(false);
+
+  useEffect(() => {
+    setIsOpen(isOuterOpen);
+  }, [isOuterOpen]);
+
+  useEffect(() => {
+    const checkEllipsis = () => {
+      if (bodyRef.current) {
+        setIsNeedTrimText(bodyRef.current.scrollWidth > bodyRef.current.clientWidth);
+      }
+    };
+
+    const resizeObserver = new ResizeObserver(() => {
+      checkEllipsis();
+    });
+
+    if (bodyRef.current) {
+      resizeObserver.observe(bodyRef.current);
+      checkEllipsis();
+    }
+
+    return () => {
+      if (bodyRef.current) {
+        resizeObserver.unobserve(bodyRef.current);
+      }
+    };
+  }, [text]);
+
+  return (
+    <div
+      className={cn('accordion-text', className, {
+        'accordion-text--open': isOpen,
+      })}
+      onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}
+    >
+      <div
+        className={cn('accordion-text__body', {
+          'accordion-text__body--trim-text': isNeedTrimText && !isOpen,
+        })}
+        ref={bodyRef}
+      >
+        {shortText ? (isOpen ? text : shortText) : text}
+      </div>
+      <div className="accordion-text__toggle">
+        {isOpen ? <ChevronUp /> : <ChevronDown />}
+      </div>
+    </div>
+  );
+}
+
+export default AccordionText;

package/dist/Atomic/UI/Arrow/Arrow.jsx

@@ -1 +1,134 @@
-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 n from"classnames";import{useEffect as o,useRef as i,useState as a}from"react";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=i(),m=(d=a("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 o(function(){k.current&&v(s(k.current,"color"))},[k.current]),r("div",{"data-testid":"arrow--key-".concat(p,"--type-").concat(c),ref:k,className:n("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 cn from 'classnames';
+
+import { useEffect, useRef, useState } from 'react';
+
+import { getStyles } from '../../../Functions/utils';
+
+import './Arrow.scss';
+
+function 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.jsx

@@ -1 +1,53 @@
-import{jsx as e}from"react/jsx-runtime";import r from"classnames";import"./Box.scss";var t={column:"column",row:"row"},n={s:"s",m:"m"};export default function(o){var c,i,a=o.children,l=o.paddingVariant,s=void 0===l?n.m:l,b=o.radiiVariant,f=void 0===b?n.s:b,p=o.direction,u=void 0===p?t.column:p,O=o.className,d=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},c=Object.keys(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)t=c[n],!(r.indexOf(t)>=0)&&Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(o,["children","paddingVariant","radiiVariant","direction","className"]);return e("div",(c=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.forEach(function(r){var n;n=t[r],r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n})}return e}({style:{flexDirection:u},className:r("box","box--padding-".concat(s),"box--radii-".concat(f),O,{df:u===t.row,"dfc-jc":u===t.column})},d),i=i={children:a},Object.getOwnPropertyDescriptors?Object.defineProperties(c,Object.getOwnPropertyDescriptors(i)):(function(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t})(Object(i)).forEach(function(e){Object.defineProperty(c,e,Object.getOwnPropertyDescriptor(i,e))}),c))}
+import cn from 'classnames';
+
+// global
+
+// styles
+import './Box.scss';
+
+const directionVariants = {
+  column: 'column',
+  row: 'row',
+};
+
+const sizes = {
+  none: 'none',
+  xs: 'xs',
+  s: 's',
+  m: 'm',
+  l: 'l',
+  xl: 'xl',
+};
+
+function Box({
+  children,
+  paddingVariant = sizes.m,
+  radiiVariant = sizes.s,
+  direction = directionVariants.column,
+  className,
+  ...restProps
+}) {
+  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,
+        },
+      )}
+      {...restProps}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Box;

package/dist/Atomic/UI/Chart/Chart.jsx

@@ -1 +1,178 @@
-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{BarElement as c,CategoryScale as a,Chart as l,Filler as u,LinearScale as s,LineElement as f,PointElement as p,Tooltip as d}from"chart.js";import m from"classnames";import{useCallback as y,useEffect as h,useLayoutEffect as b,useMemo as v,useRef as O,useState as j}from"react";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";l.register(a,s,c,p,f,u,d);export default function(t){var c,a,l,u=t.className,s=t.initialModel,f=t.modelsForSwitch,p=t.setModelExternalValue,d=t.description,I=t.customOptions,k=t.data,E=t.addToDatasets,F=t.modifyOptions;if(!k)return null;var M=d||{},B=M.label,U=M.value,V=n(j(S),2),$=V[0],q=V[1],z=n(j(k),2),G=z[0],H=z[1],J=O(null),K=O(null),Q=v(function(){return I||(F?F(T($)):T($))},[I,$,null==F||null==(l=F.toString)?void 0:l.call(F),k]),R=v(function(){return I?null==I?void 0:I.notLibraryOptions:D($)},[I,$,k]),W=y(function(t){return i(g[N($)],e({ref:J},t))},[$]),X=_.disableDescriptionsFor.includes($),Y=_.disableChartTypeSwitcherFor.includes($);return b(function(){p&&"emptyLayout"!==$&&p($)},[$]),b(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]),h(function(){q(A(s))},[s]),h(function(){H(x($,w(k),J.current,E))},[$,k]),o("div",{className:m(L,r({},"".concat(L,"_icon-mode"),P.includes($)),u),children:[o("div",{className:m("".concat(L,"__header"),r({},"".concat(L,"__header_only-switcher"),!d)),children:[d&&!X?o("div",{className:m("".concat(L,"__description")),children:[B?i("span",{className:m("".concat(L,"__description-title")),children:B}):null,U?i("div",{className:m("".concat(L,"__description-value")),children:U}):null]}):null,Y?null:o("div",{className:m("".concat(L,"__type-switcher")),children:[i(C,{iconType:"Bar",isActive:"Bar"===N($),onClick:function(){return q((null==f?void 0:f[0])||"barLayout")}}),i(C,{iconType:"Line",isActive:"Line"===N($),onClick:function(){return q((null==f?void 0:f[1])||"lineLayout")}})]})]}),i("div",{ref:K,className:m("".concat(L,"__chart-wrapper")),children:i(W,(c=e({},Q),a=a={data:G},Object.getOwnPropertyDescriptors?Object.defineProperties(c,Object.getOwnPropertyDescriptors(a)):(function(t,r){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e.push.apply(e,n)}return e})(Object(a)).forEach(function(t){Object.defineProperty(c,t,Object.getOwnPropertyDescriptor(a,t))}),c))})]})}
+import {
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Filler,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Tooltip,
+} from 'chart.js';
+
+import cn from 'classnames';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import * as ChartComponents from 'react-chartjs-2';
+
+import { clone } from '../../../Functions/utils';
+
+import {
+  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,
+);
+
+function 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/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon.jsx

@@ -1 +1,78 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"classnames";import"./ChartTypeSwitcherIcon.scss";var i="chart__type-switcher-icon";export default function(n){var o,s,c=n.iconType,a=n.isActive,h=n.className,d=n.onClick;return e("div",{className:r(i,(o={},s="".concat(i,"_active"),s in o?Object.defineProperty(o,s,{value:a,enumerable:!0,configurable:!0,writable:!0}):o[s]=a,o),h),onClick:d,children:function(r){switch(r){case"Bar":return t("svg",{width:"24",height:"24",viewBox:"0 0 24 25",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e("rect",{y:"0.5",width:"24",height:"24",rx:"4",fill:"#EAF2FF"}),e("path",{d:"M18 18V11",stroke:"#1F7499",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M12 18V6",stroke:"#1F7499",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M6 18V13",stroke:"#1F7499",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]});case"Line":return t("svg",{width:"24",height:"24",viewBox:"0 0 24 25",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e("rect",{y:"0.5",width:"24",height:"24",rx:"4",fill:"#EAF2FF"}),e("path",{d:"M21 8L15.2544 13.2668C14.1075 14.3181 12.3288 14.3014 11.1818 13.25V13.25C10.0349 12.1986 8.25615 12.1819 7.10919 13.2332L3 17",stroke:"#1F7499",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]});default:return null}}(c)})}
+import cn from 'classnames';
+
+import './ChartTypeSwitcherIcon.scss';
+
+const RC = 'chart__type-switcher-icon';
+
+function getIcon(type) {
+  switch (type) {
+    case 'Bar':
+      return (
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 25"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect y="0.5" width="24" height="24" rx="4" fill="#EAF2FF" />
+          <path
+            d="M18 18V11"
+            stroke="#1F7499"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M12 18V6"
+            stroke="#1F7499"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M6 18V13"
+            stroke="#1F7499"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+    case 'Line':
+      return (
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 25"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect y="0.5" width="24" height="24" rx="4" fill="#EAF2FF" />
+          <path
+            d="M21 8L15.2544 13.2668C14.1075 14.3181 12.3288 14.3014 11.1818
+            13.25V13.25C10.0349 12.1986 8.25615 12.1819 7.10919 13.2332L3 17"
+            stroke="#1F7499"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+    default:
+      return null;
+  }
+}
+
+function ChartTypeSwitcherIcon({ iconType, isActive, className, onClick }) {
+  return (
+    <div
+      className={cn(RC, { [`${RC}_active`]: isActive }, className)}
+      onClick={onClick}
+    >
+      {getIcon(iconType)}
+    </div>
+  );
+}
+
+export default ChartTypeSwitcherIcon;