@alfalab/core-components-chart 3.1.12 → 3.2.1

package/src/types/brush.types.ts

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ReactText } from 'react';
+import { DataKey } from 'recharts/types/util/types';
+
+export 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;
+}

package/src/types/cartesianGrid.types.ts

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

package/src/types/chart.types.ts

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

package/src/types/composedChart.types.ts

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

package/src/types/index.ts

@@ -0,0 +1,14 @@
+export * from './utils';
+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/src/types/labelList.types.ts

@@ -0,0 +1,5 @@
+export interface LabelListProps {
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    formatter: Function;
+    ofsset: number;
+}

package/src/types/legend.types.ts

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

package/src/types/options.types.ts

@@ -0,0 +1,69 @@
+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 { ResponsiveContainerProps } from './responsiveContainer.types';
+import { SeriaProps } from './seria.types';
+import { TooltipProps } from './tooltip.types';
+import { XAxisProps } from './xAxis.types';
+import { YAxisProps } from './yAxis.types';
+
+export 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;
+}

package/src/types/payload.types.ts

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

package/src/types/responsiveContainer.types.ts

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

package/src/types/seria.types.ts

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

package/src/types/tooltip.types.ts

@@ -0,0 +1,85 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ReactElement, ReactText, SVGProps } from 'react';
+import { AnimationTiming } from 'recharts/types/util/types';
+
+export 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?: Record<string, unknown>;
+
+    /**
+     * Значение метки, которое сейчас активно, обычно рассчитывается внутри компании.
+     */
+    label?: string | number;
+
+    /**
+     * Контент для тултипа
+     */
+    content?: any;
+}

package/src/types/utils/axis.types.ts

@@ -0,0 +1,88 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ReactElement, SVGProps } from 'react';
+
+export 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;
+}

package/src/types/utils/coordinates.types.ts

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

package/src/types/utils/data.types.ts

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