@alfalab/core-components 20.3.2 → 20.4.0

package/chart/esm/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 { DotSettingProps } from "./utils/dot.types";
+import { DataProps } from "./utils/data.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/chart/esm/types/chart.types.js

@@ -0,0 +1 @@
+

package/chart/esm/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/chart/esm/types/composedChart.types.js

@@ -0,0 +1 @@
+

package/chart/esm/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/chart/esm/types/legend.types.js

@@ -0,0 +1 @@
+

package/chart/esm/types/options.types.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import React from 'react';
+import { BrushProps } from "./brush.types";
+import { CartesianGridProps } from "./cartesianGrid.types";
+import { ComposedChartProps } from "./composedChart.types";
+import { LegendProps } from "./legend.types";
+import { TooltipProps } from "./tooltip.types";
+import { XAxisProps } from "./xAxis.types";
+import { YAxisProps } from "./yAxis.types";
+import { SeriaProps } from "./seria.types";
+import { ResponsiveContainerProps } from "./responsiveContainer.types";
+interface OptionsProps {
+    /**
+     * Индефикатор графика
+     */
+    id: string;
+    /**
+     * Компонент контейнера, позволяющий адаптировать диаграммы к размеру родительского контейнера
+     */
+    responsiveContainer?: ResponsiveContainerProps;
+    /**
+     * Диаграмма, состоящая из bar, linear и area диаграмм
+     */
+    composeChart: ComposedChartProps;
+    /**
+     * Отображение линий осей графика
+     */
+    cartesianGrid?: CartesianGridProps;
+    /**
+     * Настройки оси Х
+     */
+    xAxis: XAxisProps;
+    /**
+     * Настройки оси У
+     */
+    yAxis: YAxisProps;
+    /**
+     * Всплывающаяся подсказка
+     */
+    tooltip?: TooltipProps;
+    /**
+     * Компонент маштабирования графика
+     */
+    brush?: BrushProps;
+    /**
+     * Компонент подписи графиков
+     */
+    legend?: LegendProps;
+    /**
+     * Mассив объектов с параметрами грaфиков с обязательным полем
+     */
+    series: SeriaProps[];
+    /**
+     * Mассив меток
+     */
+    labels: Array<string | number>;
+    children?: React.ReactNode;
+}
+export { OptionsProps };

package/chart/esm/types/options.types.js

@@ -0,0 +1 @@
+

package/chart/esm/types/payload.types.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { DataDynamicBooleanProps } from "./utils/data.types";
+interface PayloadProps {
+    /**
+     * Цвет графика
+     */
+    color: string;
+    /**
+     * Ключ графика
+     */
+    dataKey: string;
+    /**
+     * Форматирование значения графика
+     */
+    formatter: (value: number | string) => React.ReactText;
+    /**
+     * Имя графика
+     */
+    name: string;
+    /**
+     * Полезная нагрузка
+     */
+    payload: DataDynamicBooleanProps;
+    /**
+     * Значение графика
+     */
+    value: number;
+}
+export { PayloadProps };

package/chart/esm/types/payload.types.js

@@ -0,0 +1 @@
+

package/chart/esm/types/responsiveContainer.types.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import React from 'react';
+interface ResponsiveContainerProps {
+    /**
+     * Debounce функция при ресайзе
+     */
+    debounce?: number;
+    children?: React.ReactNode;
+}
+export { ResponsiveContainerProps };

package/chart/esm/types/responsiveContainer.types.js

@@ -0,0 +1 @@
+

package/chart/esm/types/seria.types.d.ts

@@ -0,0 +1,59 @@
+import { ChartProps } from "./chart.types";
+import { DataProps } from "./utils/data.types";
+import { GradientProps } from "./utils/gradient.types";
+interface SeriaProps {
+    /**
+     * Скрыть график
+     */
+    hide?: boolean;
+    /**
+     * Скрыть график в легенде
+     */
+    hideLegend?: boolean;
+    /**
+     * Скрыть график в тултипe
+     */
+    hideTooltip?: boolean;
+    /**
+     * Z-index графика
+     */
+    zIndex?: number;
+    /**
+     * Тип графика
+     */
+    chart: 'line' | 'area' | 'bar' | 'gradient';
+    /**
+     * Тип иконки для графика
+     */
+    icon: 'circleLine' | 'filledCircle' | 'strokeCircle' | 'circle';
+    /**
+     * Оффсет для градиента (только для типа area)
+     */
+    offset: number;
+    /**
+     * Заливка графика
+     */
+    fill?: string;
+    /**
+     * Прозрачность
+     */
+    gradient: {
+        /**
+         * Индефикатор градиента
+         */
+        gid: string;
+        /**
+         * Параметра точек для градиента
+         */
+        points: GradientProps[];
+    };
+    /**
+     * Параметры графика
+     */
+    properties: ChartProps;
+    /**
+     * Данные для построения графика
+     */
+    data: DataProps[];
+}
+export { SeriaProps };

package/chart/esm/types/seria.types.js

@@ -0,0 +1 @@
+

package/chart/esm/types/tooltip.types.d.ts

@@ -0,0 +1,70 @@
+import { ReactElement, ReactText, SVGProps } from 'react';
+import { AnimationTiming } from 'recharts/types/util/types';
+interface TooltipProps {
+    /**
+     * Разделитель между именем и значением.
+     */
+    separator?: string;
+    /**
+     * Размер смещения между положением всплывающей подсказки и активной позицией.
+     */
+    offset?: number;
+    /**
+     * Когда элемент полезной нагрузки имеет значение null или undefined, этот элемент не отображается.
+     */
+    filterNull?: boolean;
+    /**
+     * Если установлено false, курсор не будет отображаться, когда всплывающая подсказка активна.
+     * Если установлен объект, опция - это конфигурация курсора.
+     * Если установлен элемент React, опция является настраиваемым элементом реакции курсора рисования.
+     */
+    cursor?: boolean | ReactElement | SVGProps<SVGElement>;
+    /**
+     * Если это поле установлено, положение всплывающей подсказки будет фиксированным и больше не будет перемещаться.
+     */
+    position?: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Если установлено false, анимация всплывающей подсказки будет отключена.
+     */
+    isAnimationActive?: boolean;
+    /**
+     * Указывает, когда должна начинаться анимация, единица измерения этого параметра - мс.
+     */
+    animationBegin?: number;
+    /**
+     * Определяет продолжительность анимации, единица измерения этого параметра - мс.
+     */
+    animationDuration?: number;
+    /**
+     * Тип функции плавности.
+     */
+    animationEasing?: AnimationTiming;
+    /**
+     * Отображение стрелки тултипа
+     */
+    arrow: boolean;
+    /**
+     * Высчитывается автоматичекси, направление стрелки
+     */
+    tooltipArrowSide?: boolean;
+    /**
+     * Функция форматирования метки во всплывающей подсказке.
+     */
+    labelFormatter?: (value: any) => ReactText;
+    /**
+     * Стиль метки всплывающей подсказки по умолчанию, которая является элементом p.
+     */
+    labelStyle?: {};
+    /**
+     * Значение метки, которое сейчас активно, обычно рассчитывается внутри компании.
+     */
+    label?: string | number;
+    /**
+     * Контент для тултипа
+     */
+    content?: any;
+}
+export { TooltipProps };

package/chart/esm/types/tooltip.types.js

@@ -0,0 +1 @@
+

package/chart/esm/types/utils/axis.types.d.ts

@@ -0,0 +1,68 @@
+import { ReactElement, SVGProps } from 'react';
+interface AxisProps {
+    /**
+     * Скрыть ось
+     */
+    hide?: boolean;
+    /**
+     * Отображение линии оси.
+     */
+    axisLine: boolean;
+    /**
+     * Тип оси.
+     */
+    type: 'number' | 'category';
+    /**
+     * Разрешить значениям оси быть десятичными или нет.
+     */
+    allowDecimals?: boolean;
+    /**
+     * Разрешить или нет на оси дублировать категории, если "type" оси - "category".
+     */
+    allowDuplicatedCategory?: boolean;
+    /**
+     * Угол наклона значений оси.
+     */
+    angle?: number;
+    /**
+     * Количество делений оси. Не используется, если "тип" - "категория".
+     */
+    tickCount?: number;
+    /**
+     * Интревал линий деления оси
+     */
+    interval?: 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' | number;
+    /**
+     * Минимальный зазор между двумя соседними делениями оси.
+     */
+    minTickGap?: number;
+    /**
+     * Отображение линий деления оси
+     */
+    tickLine?: boolean;
+    /**
+     * Размер линий деления оси
+     */
+    tickSize?: number;
+    /**
+     * Если установлено значение true, галочки переворачиваются вокруг оси, отображая метки внутри диаграммы, а не снаружи.
+     */
+    mirror?: boolean;
+    /**
+     * Отображение горизонтальной сетки
+     */
+    reversed?: boolean;
+    /**
+     * Реверсировать ось или нет
+     */
+    tickMargin?: number;
+    /**
+     * Функция форматирования значения деления оси.
+     */
+    tickFormatter?: (value: any, index: number) => string;
+    /**
+     * Присваивается автоматически в зависимости от переданных данных
+     */
+    tick?: SVGProps<SVGTextElement> | ReactElement<SVGElement> | ((props: any) => ReactElement<SVGElement>) | boolean;
+}
+export { AxisProps };

package/chart/esm/types/utils/axis.types.js

@@ -0,0 +1 @@
+

package/chart/esm/types/utils/coordinates.types.d.ts

@@ -0,0 +1,11 @@
+interface CoordinatesProps {
+    /**
+     * Значение координаты х.
+     */
+    x: number;
+    /**
+     * Значение координаты у.
+     */
+    y: number;
+}
+export { CoordinatesProps };

package/chart/esm/types/utils/coordinates.types.js

@@ -0,0 +1 @@
+

package/chart/esm/types/utils/data.types.d.ts

@@ -0,0 +1,17 @@
+interface DataProps {
+    /**
+     * Метка
+     */
+    label: string | number;
+    /**
+     * Значение
+     */
+    value: number;
+}
+interface DataDynamicProps {
+    [key: string]: number | string;
+}
+interface DataDynamicBooleanProps {
+    [key: string]: boolean;
+}
+export { DataProps, DataDynamicProps, DataDynamicBooleanProps };

package/chart/esm/types/utils/data.types.js

@@ -0,0 +1 @@
+

package/chart/esm/types/utils/dot.types.d.ts

@@ -0,0 +1,73 @@
+import { CoordinatesProps } from "./coordinates.types";
+import { DataProps } from "./data.types";
+interface DotSettingProps {
+    /**
+     * Значение media query.
+     */
+    media?: number;
+    /**
+     * Значение маштаба при ховере.
+     */
+    scale: number;
+    /**
+     * Начальный значения маштаба.
+     */
+    initScale: number;
+    /**
+     * Ширина точки.
+     */
+    width: number;
+    /**
+     * Высота точки.
+     */
+    height: number;
+}
+interface ActiveDotProps {
+    /**
+     * Индекс предыдущей точки.
+     */
+    prev: number | null;
+    /**
+     * Индекс активной точки.
+     */
+    active: number | null;
+}
+interface PointProps extends CoordinatesProps {
+    value: string | number;
+    payload: DataProps;
+}
+interface DotProps {
+    /**
+     * Индекс активной точки на графике.
+     */
+    activeDot: null | number;
+    /**
+     * Координата Х.
+     */
+    cx: number;
+    /**
+     * Координата У.
+     */
+    cy: number;
+    /**
+     * Ключ данных.
+     */
+    dataKey: string;
+    /**
+     * Параметры точки.
+     */
+    dotSettings?: DotSettingProps;
+    /**
+     * Индекс.
+     */
+    index: number;
+    /**
+     * Цвет линии.
+     */
+    stroke: string;
+    /**
+     * Значения по этим координатам.
+     */
+    value: number;
+}
+export { DotSettingProps, ActiveDotProps, PointProps, DotProps };

package/chart/esm/types/utils/dot.types.js

@@ -0,0 +1 @@
+

package/chart/esm/types/utils/gradient.types.d.ts

@@ -0,0 +1,29 @@
+interface GradientProps {
+    /**
+     * Отступ.
+     */
+    offset: number;
+    /**
+     * Цвет.
+     */
+    stopColor: string;
+    /**
+     * Значение празрачности.
+     */
+    stopOpacity: number;
+}
+interface LinearGradientProps {
+    /**
+     * Индефикатор графика.
+     */
+    id: string;
+    /**
+     * Индефикатор градиента.
+     */
+    gid: string;
+    /**
+     * Массив настроек градинта.
+     */
+    points: GradientProps[];
+}
+export { GradientProps, LinearGradientProps };

package/chart/esm/types/utils/gradient.types.js

@@ -0,0 +1 @@
+

package/chart/esm/types/utils/tick.types.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { XAxisProps } from "../xAxis.types";
+interface TickProps {
+    payload: {
+        coordinate: number;
+        value: number;
+    };
+    /**
+     * Функция форматирования
+     */
+    tickFormatter: (value: number | string) => React.ReactText;
+    x: number;
+    y: number;
+    /**
+     * Настройки оси Х
+     */
+    xAxis: XAxisProps;
+}
+export { TickProps };

package/chart/esm/types/utils/tick.types.js

@@ -0,0 +1 @@
+

package/chart/esm/types/xAxis.types.d.ts

@@ -0,0 +1,16 @@
+import { AxisProps } from "./utils/axis.types";
+interface XAxisProps extends AxisProps {
+    /**
+     * Ключ данных, отображаемых на оси.
+     */
+    dataKey: string | number;
+    /**
+     * Ориентация оси
+     */
+    orientation?: 'top' | 'bottom';
+    /**
+     * Тип деления оси
+     */
+    tickType?: 'point';
+}
+export { XAxisProps };

package/chart/esm/types/xAxis.types.js

@@ -0,0 +1 @@
+

package/chart/esm/types/yAxis.types.d.ts

@@ -0,0 +1,8 @@
+import { AxisProps } from "./utils/axis.types";
+interface YAxisProps extends AxisProps {
+    /**
+     * Ориентация оси
+     */
+    orientation?: 'left' | 'right';
+}
+export { YAxisProps };

package/chart/esm/types/yAxis.types.js

@@ -0,0 +1 @@
+

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

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