@alfalab/core-components-chart 3.3.3 → 3.4.1

package/moderncssm/hooks/usePathBar/index.js

@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react';
+import { getRadius } from './utils/getRadius.js';
+
+const usePathBar = (props) => {
+    const [topRadius, setTopRadius] = useState(0);
+    const [bottomRadius, setBottomRadius] = useState(0);
+    const [initHeight, setInitHeight] = useState(0);
+    const [initY, setInitY] = useState(0);
+    useEffect(() => {
+        const { radius, height, background, y } = props;
+        const radiusTop = radius?.top ? getRadius(height, radius.top) : 0;
+        const radiusBottom = radius?.bottom ? getRadius(height, radius.bottom) : 0;
+        const heightCheck = (radius && height !== 0 && height / 2 < (radius?.top || 0)) ||
+            height / 2 < (radius?.bottom || 0);
+        // eslint-disable-next-line no-nested-ternary
+        const heightInit = heightCheck
+            ? (radiusTop || radiusBottom) && radiusTop + radiusBottom
+            : height > 0 && height < 2
+                ? 2
+                : height;
+        if (background && y) {
+            const yInit = heightCheck
+                ? background.height + background.y - (radiusTop + radiusBottom)
+                : y;
+            setInitY(yInit);
+        }
+        if (radiusTop !== 0)
+            setTopRadius(radiusTop);
+        if (radiusBottom !== 0)
+            setBottomRadius(radiusBottom);
+        if (heightInit !== 0)
+            setInitHeight(heightInit);
+    }, [props]);
+    return [initHeight, topRadius, bottomRadius, initY];
+};
+
+export { usePathBar };

package/moderncssm/hooks/usePathBar/utils/getRadius.d.ts

@@ -0,0 +1,2 @@
+declare const getRadius: (height: number, radius: number) => number;
+export { getRadius };

package/moderncssm/hooks/usePathBar/utils/getRadius.js

@@ -0,0 +1,6 @@
+const getRadius = (height, radius) => {
+    const result = radius && height / 2 < radius ? Math.ceil(height / 2) : radius || 0;
+    return result;
+};
+
+export { getRadius };

package/moderncssm/hooks/useSettings/index.d.ts

@@ -0,0 +1,19 @@
+import { Dispatch, SetStateAction } from 'react';
+import { OptionsProps } from "../../types/options.types";
+import { DataDynamicBooleanProps, DataDynamicProps } from "../../types/utils/data.types";
+type Settings = [
+    {
+        state: OptionsProps | null;
+        data: DataDynamicProps[];
+        charts: DataDynamicBooleanProps;
+        filterCount: number;
+    },
+    {
+        setState: Dispatch<SetStateAction<OptionsProps | null>>;
+        setData: Dispatch<SetStateAction<DataDynamicProps[]>>;
+        setCharts: Dispatch<SetStateAction<DataDynamicBooleanProps>>;
+        setFilterCount: Dispatch<SetStateAction<number>>;
+    }
+];
+declare const useSettings: (options: OptionsProps) => Settings;
+export { useSettings };

package/moderncssm/hooks/useSettings/index.js

@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react';
+import { setComposedChartsMargin } from './utils/setComposedChartsMargin.js';
+import { setDatas } from './utils/setDatas.js';
+import { setGradientCharts } from './utils/setGradientCharts.js';
+import { setLegendMargin } from './utils/setLegendMargin.js';
+import { sortByIndex } from './utils/sortByIndex.js';
+
+const useSettings = (options) => {
+    const [state, setState] = useState(null);
+    const [charts, setCharts] = useState({});
+    const [data, setData] = useState([]);
+    const [filterCount, setFilterCount] = useState(0);
+    useEffect(() => {
+        const settings = { ...options };
+        const { brush, legend, series, labels, composeChart, xAxis } = settings;
+        if (settings.legend?.margin && brush && legend)
+            settings.legend.margin.top = setLegendMargin(brush, legend);
+        settings.series = setGradientCharts(series);
+        const [initData, chartsNames, count] = setDatas(settings.series, labels);
+        settings.composeChart.margin = setComposedChartsMargin(composeChart, legend, brush, xAxis);
+        settings.series = sortByIndex(settings.series);
+        setState(settings);
+        setData(initData);
+        setCharts(chartsNames);
+        setFilterCount(count);
+    }, [options]);
+    return [
+        {
+            state,
+            data,
+            charts,
+            filterCount,
+        },
+        {
+            setState,
+            setData,
+            setCharts,
+            setFilterCount,
+        },
+    ];
+};
+
+export { useSettings };

package/moderncssm/hooks/useSettings/utils/setComposedChartsMargin.d.ts

@@ -0,0 +1,12 @@
+import { BrushProps } from "../../../types/brush.types";
+import { ComposedChartProps } from "../../../types/composedChart.types";
+import { LegendProps } from "../../../types/legend.types";
+import { XAxisProps } from "../../../types/xAxis.types";
+type ComposedChartsMarginResultProps = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+declare const setComposedChartsMargin: (composeChart: ComposedChartProps, legend: LegendProps | undefined, brush: BrushProps | undefined, xAxis: XAxisProps) => ComposedChartsMarginResultProps;
+export { setComposedChartsMargin };

package/moderncssm/hooks/useSettings/utils/setComposedChartsMargin.js

@@ -0,0 +1,12 @@
+const setComposedChartsMargin = (composeChart, legend, brush, xAxis) => ({
+    top: (composeChart?.initMargin?.top || 0) +
+        (legend?.verticalAlign === 'top' && legend?.marginTop ? Math.abs(legend.marginTop) : 0),
+    bottom: (composeChart?.initMargin?.bottom || 0) +
+        (xAxis?.tickMargin || 0) +
+        (brush?.brushMargin || 0) +
+        (legend?.verticalAlign !== 'top' && legend?.marginTop ? legend.marginTop : 0),
+    left: composeChart?.initMargin?.left || 0,
+    right: composeChart?.initMargin?.right || 0,
+});
+
+export { setComposedChartsMargin };

package/moderncssm/hooks/useSettings/utils/setDatas.d.ts

@@ -0,0 +1,5 @@
+import { SeriaProps } from "../../../types/seria.types";
+import { DataDynamicBooleanProps, DataDynamicProps } from "../../../types/utils/data.types";
+type DatasResultProps = [DataDynamicProps[], DataDynamicBooleanProps, number];
+declare const setDatas: (series: SeriaProps[], labels: Array<string | number>) => DatasResultProps;
+export { setDatas };

package/moderncssm/hooks/useSettings/utils/setDatas.js

@@ -0,0 +1,32 @@
+const setDatas = (series, labels) => {
+    const initData = [];
+    const chartsNames = {};
+    let count = 0;
+    for (let i = 0; i < series.length; i++) {
+        const { properties: { dataKey = '' } = {}, data: seriaData = [], hideLegend, hide, } = series[i];
+        if (!hideLegend && !hide)
+            count += 1;
+        labels.map((label) => {
+            const item = seriaData.find((d) => d.label === label);
+            if (item) {
+                const obj = {
+                    label,
+                };
+                obj[`${dataKey}`] = item.value;
+                if (!chartsNames[`${dataKey}`])
+                    chartsNames[`${dataKey}`] = true;
+                const index = initData
+                    .map((dataItem) => dataItem.label)
+                    .indexOf(label);
+                if (index === -1)
+                    initData.push(obj);
+                else
+                    initData[index] = { ...initData[index], ...obj };
+            }
+            return null;
+        });
+    }
+    return [initData, chartsNames, count];
+};
+
+export { setDatas };

package/moderncssm/hooks/useSettings/utils/setGradientCharts.d.ts

@@ -0,0 +1,3 @@
+import { SeriaProps } from "../../../types/seria.types";
+declare const setGradientCharts: (series: SeriaProps[]) => SeriaProps[];
+export { setGradientCharts };

package/moderncssm/hooks/useSettings/utils/setGradientCharts.js

@@ -0,0 +1,35 @@
+const setGradientCharts = (series) => {
+    const filterSeries = series.filter((item) => item.chart !== 'gradient');
+    return filterSeries.reduce((accum, item) => {
+        const { chart, data: dataSeria, offset, fill } = item;
+        if (chart === 'area') {
+            let newData = null;
+            if (offset) {
+                newData = dataSeria.map((d) => {
+                    const { label, value } = d;
+                    return {
+                        label,
+                        value: Math.ceil(value - value * offset),
+                    };
+                });
+            }
+            accum.push({
+                ...item,
+                zIndex: -100,
+                chart: 'gradient',
+                hideLegend: true,
+                hideTooltip: true,
+                properties: {
+                    ...item.properties,
+                    dataKey: `${item.properties.dataKey}-gradient`,
+                    fill,
+                },
+                data: newData || item.data,
+            });
+        }
+        accum.push(item);
+        return accum;
+    }, []);
+};
+
+export { setGradientCharts };

package/moderncssm/hooks/useSettings/utils/setLegendMargin.d.ts

@@ -0,0 +1,4 @@
+import { BrushProps } from "../../../types/brush.types";
+import { LegendProps } from "../../../types/legend.types";
+declare const setLegendMargin: (brush: BrushProps, legend: LegendProps) => number;
+export { setLegendMargin };

package/moderncssm/hooks/useSettings/utils/setLegendMargin.js

@@ -0,0 +1,14 @@
+const setLegendMargin = (brush, legend) => {
+    let top = 0;
+    if (typeof brush?.brushMargin !== 'number' || !legend?.verticalAlign)
+        return top;
+    if (legend.verticalAlign === 'top') {
+        top = legend.marginTop ? Number(legend.marginTop * -1) : 0;
+    }
+    else {
+        top = legend?.marginTop ? legend.marginTop + (brush?.brushMargin || 0) : brush?.brushMargin;
+    }
+    return top;
+};
+
+export { setLegendMargin };

package/moderncssm/hooks/useSettings/utils/sortByIndex.d.ts

@@ -0,0 +1,3 @@
+import { SeriaProps } from "../../../types/seria.types";
+declare const sortByIndex: (series: SeriaProps[]) => SeriaProps[];
+export { sortByIndex };

package/moderncssm/hooks/useSettings/utils/sortByIndex.js

@@ -0,0 +1,8 @@
+const sortByIndex = (series) => series.sort((a, b) => {
+    if (a?.zIndex && b?.zIndex && a?.zIndex > b?.zIndex) {
+        return 1;
+    }
+    return -1;
+});
+
+export { sortByIndex };

package/moderncssm/icons/Circle.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from 'react';
+type Props = {
+    fill?: string;
+    height?: number;
+};
+declare const CircleIcon: ({ fill, height }: Props) => React.JSX.Element;
+export { CircleIcon };

package/moderncssm/icons/Circle.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const CircleIcon = ({ fill = '#FF5C5C', height = 16 }) => (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', height: height, viewBox: '0 0 16 16', fill: 'none' },
+    React.createElement("circle", { cx: '8', cy: '8', r: '8', fill: fill })));
+
+export { CircleIcon };

package/moderncssm/icons/CircleLine.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from 'react';
+type Props = {
+    fill?: string;
+    height?: number;
+};
+declare const CircleLineIcon: ({ fill, height }: Props) => React.ReactElement;
+export { CircleLineIcon };

package/moderncssm/icons/CircleLine.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const CircleLineIcon = ({ fill = '#FF5C5C', height = 16 }) => (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', height: height, viewBox: '0 0 22 12', fill: 'none' },
+    React.createElement("circle", { cx: '11', cy: '6', r: '6', fill: fill }),
+    React.createElement("rect", { y: '5', width: '22', height: '2', fill: fill })));
+
+export { CircleLineIcon };

package/moderncssm/icons/FilledCircle.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from 'react';
+type Props = {
+    fill?: string;
+    height?: number;
+};
+declare const FilledCircleIcon: ({ fill, height }: Props) => React.JSX.Element;
+export { FilledCircleIcon };

package/moderncssm/icons/FilledCircle.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const FilledCircleIcon = ({ fill = '#5A8ECF', height = 16 }) => (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', height: height, viewBox: '0 0 22 22', fill: 'none' },
+    React.createElement("circle", { cx: '11', cy: '11', r: '10', fill: 'url(#paint0_linear)', stroke: fill, strokeWidth: '2' }),
+    React.createElement("defs", null,
+        React.createElement("linearGradient", { id: 'paint0_linear', x1: '11', y1: '1', x2: '11', y2: '21', gradientUnits: 'userSpaceOnUse' },
+            React.createElement("stop", { stopColor: fill, stopOpacity: '0.2' }),
+            React.createElement("stop", { offset: '1', stopColor: fill, stopOpacity: '0' })))));
+
+export { FilledCircleIcon };

package/moderncssm/icons/Point.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from 'react';
+type Props = {
+    fill?: string;
+    height?: number;
+};
+declare const PointIcon: ({ fill, height }: Props) => React.JSX.Element;
+export { PointIcon };

package/moderncssm/icons/Point.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const PointIcon = ({ fill = '#5A8ECF', height = 16 }) => (React.createElement("svg", { height: height, viewBox: '0 0 18 18' },
+    React.createElement("circle", { cx: '9', cy: '9', r: '9', strokeWidth: '1', fill: fill, fillOpacity: '0.4' }),
+    React.createElement("circle", { cx: '9', cy: '9', r: '3', strokeWidth: '2', stroke: '#fff', fill: fill })));
+
+export { PointIcon };

package/moderncssm/icons/StrokeCircle.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from 'react';
+type Props = {
+    fill?: string;
+    height?: number;
+};
+declare const StrokeCircleIcon: ({ fill, height }: Props) => React.JSX.Element;
+export { StrokeCircleIcon };

package/moderncssm/icons/StrokeCircle.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const StrokeCircleIcon = ({ fill = '#5A8ECF', height = 16 }) => (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', height: height, viewBox: '0 0 22 22', fill: 'none' },
+    React.createElement("circle", { cx: '11', cy: '11', r: '10', stroke: fill, strokeWidth: '2', strokeDasharray: '8 8' })));
+
+export { StrokeCircleIcon };

package/moderncssm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export * from "./types/index";

package/moderncssm/index.js

@@ -0,0 +1 @@
+export { Chart } from './Component.js';

package/moderncssm/index.module.css

@@ -0,0 +1,19 @@
+/* */
+
+.coreChart :global(.recharts-line path) {
+        transition: d 0.2s ease-out;
+    }
+
+.coreChart :global(.recharts-text tspan) {
+        fill: var(--color-light-text-primary);
+        font-size: 16px;
+        line-height: 22px;
+    }
+
+.bar {
+    transition: opacity 0.2s ease-out, d 0.2s ease-out;
+}
+
+.unfocused {
+    opacity: 0.3;
+}

package/moderncssm/types/brush.types.d.ts

@@ -0,0 +1,41 @@
+import { ReactText } from 'react';
+import { DataKey } from 'recharts/types/util/types';
+interface BrushProps {
+    /**
+     * Ключ данных
+     */
+    dataKey?: DataKey<string>;
+    /**
+     * Ширина ползунков
+     */
+    travallerWidth?: number;
+    /**
+     * Начальный индекс интервала показа
+     */
+    startIndex?: number;
+    /**
+     * Конечный индекс интервала показа
+     */
+    endIndex?: number;
+    /**
+     * Отступ
+     */
+    brushMargin?: number;
+    /**
+     * Высота
+     */
+    height: number;
+    /**
+     * Форматирование значений
+     */
+    tickFormatter?: (value: any, index: number) => ReactText;
+    /**
+     * Всегда показывать значение текущего интервала
+     */
+    alwaysShowText?: boolean;
+    /**
+     * Цвет
+     */
+    stroke?: string;
+}
+export { BrushProps };

package/moderncssm/types/brush.types.js

@@ -0,0 +1 @@
+

package/moderncssm/types/cartesianGrid.types.d.ts

@@ -0,0 +1,23 @@
+interface CartesianGridProps {
+    /**
+     * Отображение горизонтальной сетки
+     */
+    horizontal?: boolean;
+    /**
+     * Отображение вертикальной сетки
+     */
+    vertical?: boolean;
+    /**
+     * Штрихи для осей
+     */
+    strokeDasharray?: string;
+    /**
+     * Цвет разметки сетки
+     */
+    stroke?: string;
+    /**
+     * Цвет заливки графика
+     */
+    fill?: string;
+}
+export { CartesianGridProps };

package/moderncssm/types/cartesianGrid.types.js

@@ -0,0 +1 @@
+

package/moderncssm/types/chart.types.d.ts

@@ -0,0 +1,61 @@
+import { ReactElement } from 'react';
+import { RectangleProps } from 'recharts';
+import { DataKey } from 'recharts/types/util/types';
+import { DataProps } from "./utils/data.types";
+import { DotSettingProps } from "./utils/dot.types";
+type CurveType = 'linear' | 'monotone' | 'step';
+type RectangleShapeType = ReactElement<SVGElement> | ((props: any) => ReactElement<SVGElement>) | RectangleProps | boolean;
+interface ChartProps {
+    /**
+     * Название графика (отображается в легендах и тултипе)
+     */
+    name?: string;
+    /**
+     * Ключ данных
+     */
+    dataKey: DataKey<number | string>;
+    /**
+     * Цвет заливки графика
+     */
+    fill?: string;
+    /**
+     * Цвет линии графика
+     */
+    stroke?: string;
+    /**
+     * Отображение точек на графике
+     */
+    dot?: boolean;
+    /**
+     * Параметры для точек грфика (если dot: true)
+     */
+    dotSettings?: DotSettingProps[] | DotSettingProps;
+    /**
+     * Наследование цвета
+     */
+    inheritStroke?: boolean;
+    /**
+     * Форматирование значения графика для тултипа
+     */
+    formatter?: Function;
+    /**
+     * Тип линии
+     */
+    type?: CurveType;
+    /**
+     * Толщина линии
+     */
+    strokeWidth?: number;
+    /**
+     * Прерывистость линии
+     */
+    strokeDasharray?: string | number;
+}
+interface ToggleChartProps {
+    chart?: 'line' | 'area' | 'bar' | 'gradient';
+    data?: DataProps[];
+    icon?: 'circleLine' | 'filledCircle' | 'strokeCircle' | 'circle';
+    order?: number;
+    properties: ChartProps;
+}
+export { RectangleShapeType, ChartProps, ToggleChartProps };

package/moderncssm/types/chart.types.js

@@ -0,0 +1 @@
+

package/moderncssm/types/composedChart.types.d.ts

@@ -0,0 +1,33 @@
+interface ComposedChartProps {
+    /**
+     * Отступы графика на момент инициализации компонента
+     */
+    initMargin?: {
+        top?: number;
+        bottom?: number;
+        left?: number;
+        right?: number;
+    };
+    /**
+     * Отступы которые высчитываются автоматически, основаны на initMargin и отступах разных елементов
+     */
+    margin?: {
+        top?: number;
+        right?: number;
+        left?: number;
+        bottom?: number;
+    };
+    /**
+     * Максимальная ширина графиков типа bar
+     */
+    maxBarSize?: number;
+    /**
+     * Разрыв между двумя категориями столбцов, который может быть процентным или фиксированным значением
+     */
+    barCategoryGap?: string | number;
+    /**
+     * Разрыв между двумя столбцами одной категории
+     */
+    barGap?: number;
+}
+export { ComposedChartProps };

package/moderncssm/types/composedChart.types.js

@@ -0,0 +1 @@
+

package/moderncssm/types/index.d.ts

@@ -0,0 +1,14 @@
+export * from "./utils/index";
+export * from "./brush.types";
+export * from "./cartesianGrid.types";
+export * from "./chart.types";
+export * from "./composedChart.types";
+export * from "./labelList.types";
+export * from "./legend.types";
+export * from "./options.types";
+export * from "./payload.types";
+export * from "./responsiveContainer.types";
+export * from "./seria.types";
+export * from "./tooltip.types";
+export * from "./xAxis.types";
+export * from "./yAxis.types";

package/moderncssm/types/index.js

@@ -0,0 +1 @@
+

package/moderncssm/types/labelList.types.d.ts

@@ -0,0 +1,5 @@
+interface LabelListProps {
+    formatter: Function;
+    ofsset: number;
+}
+export { LabelListProps };

package/moderncssm/types/labelList.types.js

@@ -0,0 +1 @@
+

package/moderncssm/types/legend.types.d.ts

@@ -0,0 +1,30 @@
+import { Formatter } from 'recharts/types/component/DefaultLegendContent';
+interface LegendProps {
+    /**
+     * Выравнивание элементов легенды в вертикальном направлении.
+     */
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    /**
+     * Функция форматирования каждого текста в легенде.
+     */
+    formatter?: Formatter;
+    /**
+     * Выравнивание элементов легенды в горизонтальном направлении.
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Вертикальный отступ
+     */
+    marginTop?: number;
+    /**
+     * Выщитывается автоматически
+     */
+    margin?: {
+        top?: number;
+    };
+    /**
+     * Высота иконок
+     */
+    iconHeight?: number;
+}
+export { LegendProps };

package/moderncssm/types/legend.types.js

@@ -0,0 +1 @@
+