intelicoreact 2.0.7 → 2.0.8

package/dist/charts.js

@@ -0,0 +1,911 @@
+// src/Atomic/UI/Chart/Chart.tsx
+import {
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Filler,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Tooltip
+} from "chart.js";
+import cn2 from "classnames";
+import React, {
+  useCallback,
+  useEffect as useEffect2,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import * as ChartComponents from "react-chartjs-2";
+
+// src/Functions/utils.js
+import { useEffect } from "react";
+import moment from "moment-timezone";
+var clone = (input) => {
+  if (input === null || typeof input !== "object") return input;
+  const data = input instanceof Array ? [] : {};
+  for (const i in input) data[i] = clone(input[i]);
+  return data;
+};
+var omitKeys = (obj = {}, keys = []) => keys.reduce((acc, key) => {
+  const { [key]: omit, ...rest } = acc;
+  return rest;
+}, obj);
+String.prototype.longerThan = function(compareWith) {
+  return this?.length > compareWith?.length;
+};
+String.prototype.lastIndexEqualsTo = function(index) {
+  return this?.length - 1 === index;
+};
+
+// src/Atomic/UI/Chart/partial/Chart.constants.js
+var CHART_TYPES = ["Bar", "Line"];
+var DEFAULT_CHART_MODEL = "emptyLayout";
+var FINTURF_ADD_GRADIENT_COLORS_POSITIVE = ["#53D1AD", "#389AA3"];
+var FINTURF_ADD_GRADIENT_COLORS_NEGATIVE = ["#FDB4DB", "#FA2E69"];
+var 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"
+      }
+    ]
+  }
+};
+var 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"
+  }
+};
+var ICON_MODELS = [
+  "lineIconLayout",
+  "finturfPositiveLineIcon",
+  "finturfNegativeLineIcon"
+];
+var COMPONENT_OPTIONS = {
+  disableDescriptionsFor: [...ICON_MODELS],
+  disableChartTypeSwitcherFor: [...ICON_MODELS, "barLayout", "lineLayout"]
+};
+
+// src/Atomic/UI/Chart/partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon.tsx
+import cn from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+var RC = "chart__type-switcher-icon";
+function getIcon(type) {
+  switch (type) {
+    case "Bar":
+      return /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 25",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx("rect", { y: "0.5", width: "24", height: "24", rx: "4", fill: "#EAF2FF" }),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M18 18V11",
+                stroke: "#1F7499",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M12 18V6",
+                stroke: "#1F7499",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M6 18V13",
+                stroke: "#1F7499",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ]
+        }
+      );
+    case "Line":
+      return /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 25",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx("rect", { y: "0.5", width: "24", height: "24", rx: "4", fill: "#EAF2FF" }),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M21 8L15.2544 13.2668C14.1075 14.3181 12.3288 14.3014 11.1818\n            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;
+  }
+}
+var ChartTypeSwitcherIcon = ({
+  iconType,
+  isActive,
+  className,
+  onClick
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(RC, { [`${RC}_active`]: isActive }, className),
+      onClick,
+      children: getIcon(iconType)
+    }
+  );
+};
+var ChartTypeSwitcherIcon_default = ChartTypeSwitcherIcon;
+
+// src/Atomic/UI/Chart/partial/datasetSetters.js
+var addDatasetsObjects = (currentData, mutation) => ({
+  ...currentData,
+  datasets: currentData.datasets?.map?.((dataset) => ({
+    ...dataset,
+    ...typeof mutation === "function" ? mutation(dataset) : mutation
+  }))
+});
+var createGradient = ({
+  ctx,
+  area,
+  colors,
+  direction,
+  correctionFactors,
+  collorStopPoints
+}) => {
+  const 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);
+    }
+  };
+  const getGradientWithPoints = (corection) => {
+    const newGradient = getStartGradient();
+    const staptPoint = corection ? 1 - corection : 0;
+    colors.forEach((color, idx) => {
+      const point = (() => {
+        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((corection) => getGradientWithPoints(corection)) : getGradientWithPoints();
+};
+var addGradientsObject = (currentData, gradientSettingsObj, chartInstance) => addDatasetsObjects(currentData, (dataset) => ({
+  [gradientSettingsObj.gradientTargetPropertyName]: createGradient({
+    ctx: chartInstance.ctx,
+    area: chartInstance.chartArea,
+    colors: gradientSettingsObj.colors,
+    direction: gradientSettingsObj.direction,
+    correctionFactors: gradientSettingsObj.typeDistributionOfGradientPoints === "personalBase" ? dataset.data.map(
+      (value) => value / Math.max.apply(null, dataset.data)
+    ) : null,
+    collorStopPoints: gradientSettingsObj.collorStopPoints
+  }),
+  ...gradientSettingsObj.isAddFill ? { fill: true } : {}
+}));
+var addNotLibraryAnimation = (currentData, animationObj, chartInstance) => {
+  const { type, ...restAnimationObj } = animationObj || {};
+  switch (type) {
+    case "runningColumns":
+      const runningColumnsDefaultFromValue = 25;
+      const runningColumnsDefaultToValue = 75;
+      const runningColumnsDefaultAverageValue = 50;
+      const runningColumnsDefaultColumnsDelayCoef = 50;
+      return addDatasetsObjects(currentData, (dataset) => ({
+        animations: dataset.data.map((item, idx) => ({
+          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;
+  }
+};
+function changeData(currentData, iterationKey, settingsForChange, chartInstance) {
+  switch (iterationKey) {
+    case "setMaxBarThickness":
+      return addDatasetsObjects(currentData, {
+        maxBarThickness: settingsForChange
+      });
+    case "addGradientsObjects":
+      return settingsForChange.reduce(
+        (acc, gradientSettingsObj) => addGradientsObject(acc, gradientSettingsObj, chartInstance),
+        clone(currentData)
+      );
+    case "addNotLibraryAnimations":
+      return settingsForChange.reduce(
+        (acc, animationObj) => addNotLibraryAnimation(acc, animationObj, chartInstance),
+        currentData
+      );
+    default:
+      return currentData;
+  }
+}
+var datasetSetters_default = changeData;
+
+// src/Atomic/UI/Chart/partial/optionsSetters.js
+var addGradientsSettings = (currentOptions, gradientsSettings) => ({
+  ...currentOptions,
+  notLibraryOptions: {
+    ...currentOptions.notLibraryOptions,
+    changeData: {
+      ...currentOptions.notLibraryOptions?.changeData,
+      addGradientsObjects: gradientsSettings
+    }
+  }
+});
+var addTooltipOptions = (currentOptions, tooltipOptions) => ({
+  ...currentOptions,
+  options: {
+    ...currentOptions.options,
+    plugins: {
+      ...currentOptions.options.plugins,
+      tooltip: tooltipOptions
+    }
+  }
+});
+var addAdditionalOptions = (currentOptions, optionsToAdd) => {
+  const addOption = (currentOptions2, optionKey, optionData) => {
+    switch (optionKey) {
+      case "addGradientsSettings":
+        return addGradientsSettings(currentOptions2, optionData);
+      case "addTooltipOptions":
+        return addTooltipOptions(currentOptions2, optionData);
+      default:
+        return currentOptions2;
+    }
+  };
+  const iterator = Object.keys(optionsToAdd);
+  return iterator.reduce(
+    (acc, key) => addOption(acc, key, optionsToAdd[key]),
+    currentOptions
+  );
+};
+var optionsSetters_default = addAdditionalOptions;
+
+// src/Atomic/UI/Chart/partial/optionsConstructor.js
+var reactChartJsOptionsLayouts = {
+  lineIconLayout: {
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: { display: false },
+        y: { display: false }
+      },
+      elements: {
+        point: { radius: 0 },
+        line: {
+          tension: 0.45,
+          borderJoinStyle: "round",
+          borderWidth: 2,
+          capBezierPoints: true
+        }
+      }
+    },
+    redraw: true,
+    notLibraryOptions: {
+      // Этот ключ должен быть в любой итоговой конфигурации для нормальной работы компонента именно в такой вложенности
+      // На основании этого ключа будет приниматься решение какой компонет будет использован (<Line />, <Bar /> и т.д.)
+      // => Файл Chart.js => определение ChartComponent
+      chartTypeKey: "Line",
+      setCanvasDimensions: {
+        width: "75px",
+        height: "35px"
+      }
+    }
+  },
+  lineLayout: {
+    options: {
+      responsive: true,
+      elements: {
+        point: {
+          radius: 4,
+          pointStyle: "circle",
+          backgroundColor: "#FFFFFF",
+          color: "#FFFFFF"
+        },
+        line: {
+          tension: 0.45,
+          borderJoinStyle: "round",
+          borderWidth: 2,
+          capBezierPoints: true
+        }
+      }
+    },
+    redraw: true,
+    notLibraryOptions: {
+      // Этот ключ должен быть в любой итоговой конфигурации для нормальной работы компонента именно в такой вложенности
+      // На основании этого ключа будет приниматься решение какой компонет будет использован (<Line />, <Bar /> и т.д.)
+      // => Файл Chart.js => определение ChartComponent
+      chartTypeKey: "Line"
+    }
+  },
+  barLayout: {
+    options: {
+      responsive: true,
+      elements: {
+        bar: {
+          borderRadius: 10
+        }
+      }
+    },
+    redraw: true,
+    notLibraryOptions: {
+      // Этот ключ должен быть в любой итоговой конфигурации для нормальной работы компонента именно в такой вложенности
+      // На основании этого ключа будет приниматься решение какой компонет будет использован (<Line />, <Bar /> и т.д.)
+      // => Файл Chart.js => определение ChartComponent
+      chartTypeKey: "Bar"
+    }
+  },
+  emptyLayout: {
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: { display: false },
+        y: { display: false }
+      },
+      elements: {
+        point: { radius: 0 },
+        line: { borderWidth: 0 }
+      }
+    },
+    notLibraryOptions: {
+      // Этот ключ должен быть в любой итоговой конфигурации для нормальной работы компонента именно в такой вложенности
+      // На основании этого ключа будет приниматься решение какой компонет будет использован (<Line />, <Bar /> и т.д.)
+      // => Файл Chart.js => определение подкомпонента ChartComponent => строка const Component = ...
+      chartTypeKey: "Line"
+    }
+  }
+};
+var finturfChartLayouts = (() => {
+  return ["barLayout", "lineLayout"].reduce(
+    (acc, key) => ({
+      ...acc,
+      [key]: {
+        ...reactChartJsOptionsLayouts[key],
+        options: {
+          ...reactChartJsOptionsLayouts[key].options,
+          scales: {
+            ...reactChartJsOptionsLayouts[key].options?.scales,
+            x: {
+              ...reactChartJsOptionsLayouts[key].options?.scales?.x,
+              grid: {
+                ...reactChartJsOptionsLayouts[key].options?.scales?.x?.grid,
+                display: false,
+                offset: true
+              },
+              ticks: {
+                ...reactChartJsOptionsLayouts[key].options?.scales?.y?.ticks,
+                autoSkipPadding: 10,
+                align: "center",
+                color: "#757F8C",
+                lineHeight: 18,
+                font: {
+                  family: "Sarabun",
+                  style: "normal",
+                  weight: 400,
+                  size: 8
+                }
+                // callback: (value, index, ticks) => {
+                //   console.log(value);
+                //   console.log(index);
+                //   console.log(ticks);
+                //   console.log('***********');
+                //   return value;
+                // },
+              }
+            },
+            y: {
+              ...reactChartJsOptionsLayouts[key].options?.scales?.y,
+              min: 0,
+              // grace: '5%',
+              bounds: "data",
+              grid: {
+                ...reactChartJsOptionsLayouts[key].options?.scales?.y?.grid,
+                borderColor: "#E1E8F1",
+                color: "#E1E8F1",
+                borderDash: [5],
+                // borderDashOffset: 12,
+                drawTicks: false,
+                z: -1
+              },
+              ticks: {
+                ...reactChartJsOptionsLayouts[key].options?.scales?.y?.ticks,
+                autoSkipPadding: 10,
+                align: "center",
+                color: "#A0A4B0",
+                lineHeight: 18,
+                padding: 6,
+                font: {
+                  family: "Sarabun",
+                  style: "normal",
+                  weight: 400,
+                  size: 10
+                }
+              }
+            }
+          }
+        },
+        notLibraryOptions: {
+          ...reactChartJsOptionsLayouts[key].notLibraryOptions,
+          setCanvasDimensions: {
+            height: "194px"
+          }
+        }
+      }
+    }),
+    {}
+  );
+})();
+var finturfChartBar = {
+  ...finturfChartLayouts.barLayout,
+  options: {
+    ...finturfChartLayouts.barLayout?.options,
+    maintainAspectRatio: false,
+    elements: {
+      ...finturfChartLayouts.barLayout?.options?.elements,
+      bar: {
+        ...finturfChartLayouts.barLayout?.options?.elements?.bar,
+        borderRadius: 4
+      }
+    }
+  },
+  notLibraryOptions: {
+    ...finturfChartLayouts.barLayout?.notLibraryOptions,
+    changeData: {
+      ...finturfChartLayouts.barLayout?.notLibraryOptions?.changeData,
+      setMaxBarThickness: 16
+    }
+  }
+};
+var finturfChartLine = {
+  ...finturfChartLayouts.lineLayout,
+  options: {
+    ...finturfChartLayouts.lineLayout?.options,
+    maintainAspectRatio: false,
+    elements: {
+      ...finturfChartLayouts.lineLayout.options?.elements,
+      point: {
+        ...finturfChartLayouts.lineLayout.options?.elements?.point,
+        radius: 2,
+        borderColor: "#32A784",
+        borderWidth: 4
+      }
+    }
+  }
+};
+var finturfReactChartJsOptions = {
+  finturfChartBar: optionsSetters_default(finturfChartBar, {
+    addGradientsSettings: GRADIENTS_OBJECTS.finturf.bar,
+    addTooltipOptions: FINTURF_TOOLTIP_OPTIONS
+  }),
+  finturfLoadingModeBar: {
+    ...finturfChartBar,
+    options: {
+      ...finturfChartBar.options,
+      animations: {
+        ...finturfChartBar.options?.animations,
+        y: {
+          ...finturfChartBar.options?.animations?.y,
+          duration: 0
+        }
+      }
+    },
+    notLibraryOptions: {
+      ...finturfChartBar.notLibraryOptions,
+      changeData: {
+        ...finturfChartBar.notLibraryOptions?.changeData,
+        addNotLibraryAnimations: [
+          {
+            type: "runningColumns",
+            // duration - ms
+            duration: 600,
+            // default easing - 'linear',
+            // easing: 'easeInOutExpo',
+            // ToDo - предусмотреть 'auto' и default для from и to
+            from: 10,
+            to: 75,
+            columnsDelayCoef: 500
+          }
+        ]
+      }
+    }
+  },
+  finturfChartLine: optionsSetters_default(finturfChartLine, {
+    addGradientsSettings: GRADIENTS_OBJECTS.finturf.line,
+    addTooltipOptions: FINTURF_TOOLTIP_OPTIONS
+    // consoleCurrentData: true,
+  }),
+  finturfLoadingModeLine: {
+    ...finturfChartLine,
+    options: {
+      ...finturfChartLine.options,
+      elements: {
+        ...finturfChartLine.options?.elements,
+        point: {
+          ...finturfChartLine.options?.elements?.point,
+          radius: 4,
+          borderWidth: 1,
+          borderColor: "#E1E8F1"
+        }
+      },
+      animations: {
+        ...finturfChartLine.options?.animations,
+        y: {
+          ...finturfChartLine.options?.animations?.y,
+          duration: 0
+        }
+      }
+    },
+    notLibraryOptions: {
+      ...finturfChartLine.notLibraryOptions,
+      changeData: {
+        ...finturfChartLine.notLibraryOptions?.changeData,
+        addNotLibraryAnimations: [
+          {
+            type: "runningColumns",
+            // duration - ms
+            duration: 600,
+            // default easing - 'linear',
+            // easing: 'easeInOutExpo',
+            columnsDelayCoef: 500,
+            isFixExtremeColumns: true
+          }
+        ]
+      }
+    }
+  },
+  finturfPositiveLineIcon: optionsSetters_default(
+    reactChartJsOptionsLayouts.lineIconLayout,
+    {
+      addGradientsSettings: GRADIENTS_OBJECTS.finturf.positiveLineIcon
+    }
+  ),
+  finturfNegativeLineIcon: optionsSetters_default(
+    reactChartJsOptionsLayouts.lineIconLayout,
+    {
+      addGradientsSettings: GRADIENTS_OBJECTS.finturf.negativeLineIcon
+    }
+  )
+};
+var optionsConstructor_default = {
+  ...finturfReactChartJsOptions,
+  emptyLayout: reactChartJsOptionsLayouts.emptyLayout
+};
+
+// src/Atomic/UI/Chart/partial/utils.ts
+function getChartTypeKey(model) {
+  return optionsConstructor_default[model]?.notLibraryOptions?.chartTypeKey;
+}
+function correctModelKey(model) {
+  if (!model) return DEFAULT_CHART_MODEL;
+  const options = optionsConstructor_default[model];
+  if (!options) return DEFAULT_CHART_MODEL;
+  const chartTypeKey = getChartTypeKey(model);
+  return chartTypeKey && CHART_TYPES.includes(chartTypeKey) ? model : DEFAULT_CHART_MODEL;
+}
+function getOptions(model) {
+  const modelOptions = optionsConstructor_default[model] || optionsConstructor_default[DEFAULT_CHART_MODEL];
+  return omitKeys(modelOptions, ["notLibraryOptions"]);
+}
+function getNotLibraryOptionsOptions(model) {
+  const modelOptions = optionsConstructor_default[model] || optionsConstructor_default[DEFAULT_CHART_MODEL];
+  const { notLibraryOptions } = modelOptions || {};
+  return notLibraryOptions ? clone(notLibraryOptions) : void 0;
+}
+function prepareData(model, data, chartInstance, addToDatasets) {
+  if (!chartInstance) return data;
+  const notLibraryOptions = getNotLibraryOptionsOptions(model);
+  const iterator = notLibraryOptions?.changeData ? Object.keys(notLibraryOptions.changeData) : [];
+  const changedData = iterator.reduce(
+    (acc, dataChangeKey) => datasetSetters_default(
+      acc,
+      dataChangeKey,
+      notLibraryOptions.changeData[dataChangeKey],
+      chartInstance
+    ),
+    clone(data)
+  );
+  return addToDatasets && typeof addToDatasets === "object" && !Array.isArray(addToDatasets) ? {
+    ...changedData,
+    datasets: changedData.datasets.map((dataset) => ({
+      ...dataset,
+      ...addToDatasets
+    }))
+  } : changedData;
+}
+
+// src/Atomic/UI/Chart/Chart.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var RC2 = "chart";
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Filler,
+  Tooltip
+);
+var Chart = ({
+  className,
+  initialModel,
+  modelsForSwitch,
+  setModelExternalValue,
+  description,
+  customOptions,
+  data,
+  addToDatasets,
+  modifyOptions
+}) => {
+  const { label, value } = description || {};
+  const [model, setModel] = useState(DEFAULT_CHART_MODEL);
+  const [localData, setLocalData] = useState();
+  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 chartType = getChartTypeKey(model);
+      const Component = ChartComponents[chartType];
+      return React.createElement(Component, { ...props, ref: chartRef });
+    },
+    [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]);
+  useEffect2(() => {
+    setModel(correctModelKey(initialModel));
+  }, [initialModel]);
+  useEffect2(() => {
+    if (data) {
+      setLocalData(
+        prepareData(model, clone(data), chartRef.current, addToDatasets)
+      );
+    }
+  }, [model, data]);
+  if (!data || !localData) return null;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn2(
+        RC2,
+        { [`${RC2}_icon-mode`]: ICON_MODELS.includes(model) },
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: cn2(`${RC2}__header`, {
+              [`${RC2}__header_only-switcher`]: !description
+            }),
+            children: [
+              description && !isExcludeDescription ? /* @__PURE__ */ jsxs2("div", { className: cn2(`${RC2}__description`), children: [
+                label ? /* @__PURE__ */ jsx2("span", { className: cn2(`${RC2}__description-title`), children: label }) : null,
+                value ? /* @__PURE__ */ jsx2("div", { className: cn2(`${RC2}__description-value`), children: value }) : null
+              ] }) : null,
+              !isExcludeChartTypeSwitcher ? /* @__PURE__ */ jsxs2("div", { className: cn2(`${RC2}__type-switcher`), children: [
+                /* @__PURE__ */ jsx2(
+                  ChartTypeSwitcherIcon_default,
+                  {
+                    iconType: "Bar",
+                    isActive: getChartTypeKey(model) === "Bar",
+                    onClick: () => setModel(modelsForSwitch?.[0] || "barLayout")
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  ChartTypeSwitcherIcon_default,
+                  {
+                    iconType: "Line",
+                    isActive: getChartTypeKey(model) === "Line",
+                    onClick: () => setModel(modelsForSwitch?.[1] || "lineLayout")
+                  }
+                )
+              ] }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { ref: charContainertRef, className: cn2(`${RC2}__chart-wrapper`), children: /* @__PURE__ */ jsx2(ChartComponent, { ...options, data: localData }) })
+      ]
+    }
+  );
+};
+var Chart_default = Chart;
+
+// src/Atomic/UI/Chart/index.ts
+var Chart_default2 = Chart_default;
+
+// src/Atomic/UI/PieChart/PieChart.js
+import React2 from "react";
+import { ArcElement, Chart as ChartJS2, Tooltip as Tooltip2 } from "chart.js";
+import { Pie } from "react-chartjs-2";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+ChartJS2.register(ArcElement, Tooltip2);
+var PieChart = ({
+  data,
+  cutout = "80%",
+  resultLabel,
+  resultValue = 0,
+  withLegend = false
+}) => {
+  const options = {
+    cutout,
+    plugins: {
+      legend: {
+        display: withLegend
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "pie-chart-box", style: { maxWidth: `320px` }, children: [
+    /* @__PURE__ */ jsx3(Pie, { data, options }),
+    Boolean(resultLabel) && /* @__PURE__ */ jsxs3("div", { className: "pie-chart__result", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "pie-chart__result-value", children: [
+        resultValue,
+        /* @__PURE__ */ jsx3("span", { className: "pie-chart__result-percent", children: "%" }),
+        " "
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "pie-chart__result-label", children: resultLabel })
+    ] })
+  ] });
+};
+var PieChart_default = PieChart;
+export {
+  Chart_default2 as Chart,
+  PieChart_default as PieChart
+};
+//# sourceMappingURL=charts.js.map