intelicoreact 1.8.3 → 1.8.5

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

@@ -0,0 +1,178 @@
+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

@@ -0,0 +1,78 @@
+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;

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

@@ -0,0 +1,334 @@
+import {
+  FINTURF_TOOLTIP_OPTIONS,
+  GRADIENTS_OBJECTS,
+} from './Chart.constants';
+import addAdditionalOptions from './optionsSetters';
+
+// options constructors for ChartJS
+
+export const 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',
+    },
+  },
+};
+
+const 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',
+          },
+        },
+      },
+    }),
+    {},
+  );
+})();
+
+const 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,
+    },
+  },
+};
+
+const 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,
+      },
+    },
+  },
+};
+
+export const finturfReactChartJsOptions = {
+  finturfChartBar: addAdditionalOptions(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: addAdditionalOptions(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: addAdditionalOptions(
+    reactChartJsOptionsLayouts.lineIconLayout,
+    {
+      addGradientsSettings: GRADIENTS_OBJECTS.finturf.positiveLineIcon,
+    },
+  ),
+
+  finturfNegativeLineIcon: addAdditionalOptions(
+    reactChartJsOptionsLayouts.lineIconLayout,
+    {
+      addGradientsSettings: GRADIENTS_OBJECTS.finturf.negativeLineIcon,
+    },
+  ),
+};
+
+export default {
+  ...finturfReactChartJsOptions,
+  emptyLayout: reactChartJsOptionsLayouts.emptyLayout,
+};

package/dist/Atomic/UI/CircleProgressBar/CircleProgressBar.jsx

@@ -0,0 +1,111 @@
+import cn from 'classnames';
+
+import { useEffect, useState } from 'react';
+
+import './CircleProgressBar.scss';
+
+function CircleProgressBar({
+  amount,
+  totalAmount,
+  isReverseType,
+  children,
+  className,
+  colors,
+  isInnerLine,
+  radius = 59,
+  strokeWidth = 2,
+  innerLineStrokeWidth = 2,
+  testId = 'circle-progress-bar',
+}) {
+  const circumference = Math.round(2 * Math.PI * radius);
+  const amountProgress
+    = amount < totalAmount ? Math.round((amount / totalAmount) * 100) : 100; // %
+  const defaultColors = {
+    start: '#6b81dd',
+    finish: '#f06d8d',
+    meter: '#ffcad6',
+  };
+
+  const [strokeDashoffset, setStrokeDashoffset] = useState(isReverseType ? String(0) : circumference);
+
+  useEffect(() => {
+    setStrokeDashoffset(circumference - (circumference * amountProgress) / 100);
+  }, [amountProgress]);
+
+  return (
+    <div
+      data-testid={testId}
+      className={cn('limit-progress-bar', { 'limit-progress-bar--reverse': isReverseType }, className)}
+    >
+      <svg
+        className="limit-progress-bar__progress"
+        width="124"
+        height="124"
+        viewBox="0 0 124 124"
+      >
+        <defs>
+          {isReverseType
+            ? (
+                <linearGradient
+                  id="limit-progress-bar-linear-gradient-reverse"
+                  x1="0"
+                  y1="1"
+                  x2="0"
+                  y2="0"
+                >
+                  <stop
+                    offset="0"
+                    stopColor={colors.finish || defaultColors.finish}
+                  />
+                  <stop
+                    offset="1"
+                    stopColor={colors.start || defaultColors.start}
+                  />
+                </linearGradient>
+              )
+            : (
+                <linearGradient
+                  id="limit-progress-bar-linear-gradient"
+                  x1="0"
+                  y1="1"
+                  x2="0"
+                  y2="0"
+                >
+                  <stop
+                    offset="0"
+                    stopColor={colors.start || defaultColors.start}
+                  />
+                  <stop
+                    offset="1"
+                    stopColor={colors.finish || defaultColors.finish}
+                  />
+                </linearGradient>
+              )}
+        </defs>
+        <circle
+          className="limit-progress-bar__meter"
+          cx={radius}
+          cy={radius}
+          r={radius}
+          stroke={!isInnerLine ? '' : colors.meter || defaultColors.meter}
+          strokeWidth={String(innerLineStrokeWidth)}
+        />
+        <circle
+          className="limit-progress-bar__value"
+          cx={radius}
+          cy={radius}
+          r={radius}
+          strokeWidth={String(strokeWidth)}
+          stroke={`url(#limit-progress-bar-linear-gradient${isReverseType ? '-reverse' : ''})`}
+          style={{
+            strokeDasharray: circumference,
+            strokeDashoffset,
+          }}
+        />
+      </svg>
+      <div className="limit-progress-bar__content">{children}</div>
+    </div>
+  );
+}
+
+export default CircleProgressBar;