@alfalab/core-components-chart 3.4.11 → 3.4.12-snapshot-1393ffa

package/src/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';
+declare type CurveType = 'linear' | 'monotone' | 'step';
+export declare 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;
+    /**
+     * Форматирование значения графика для тултипа
+     */
+    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;
+}
+export {};

package/src/types/composedChart.types.d.ts

@@ -0,0 +1,32 @@
+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.d.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.d.ts

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

package/src/types/legend.types.d.ts

@@ -0,0 +1,29 @@
+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.d.ts

@@ -0,0 +1,57 @@
+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.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+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.d.ts

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

package/src/types/seria.types.d.ts

@@ -0,0 +1,71 @@
+import { DataProps } from './utils/data.types';
+import { GradientProps } from './utils/gradient.types';
+import { ChartProps } from './chart.types';
+import { LabelListProps } from './labelList.types';
+export declare 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.d.ts

@@ -0,0 +1,69 @@
+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.d.ts

@@ -0,0 +1,67 @@
+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.d.ts

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

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

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

package/src/types/utils/dot.types.d.ts

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

package/src/types/utils/gradient.types.d.ts

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

package/src/types/utils/index.d.ts

@@ -0,0 +1,6 @@
+export * from './axis.types';
+export * from './coordinates.types';
+export * from './data.types';
+export * from './dot.types';
+export * from './gradient.types';
+export * from './tick.types';

package/src/types/utils/tick.types.d.ts

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

package/src/types/xAxis.types.d.ts

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

package/src/types/yAxis.types.d.ts

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

package/types/brush.types.js

@@ -1,2 +1,3 @@
 'use strict';
 
+//# sourceMappingURL=brush.types.js.map

package/types/brush.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brush.types.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/types/cartesianGrid.types.js

@@ -1,2 +1,3 @@
 'use strict';
 
+//# sourceMappingURL=cartesianGrid.types.js.map

package/types/cartesianGrid.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cartesianGrid.types.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/types/chart.types.js

@@ -1,2 +1,3 @@
 'use strict';
 
+//# sourceMappingURL=chart.types.js.map

package/types/chart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.types.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/types/composedChart.types.js

@@ -1,2 +1,3 @@
 'use strict';
 
+//# sourceMappingURL=composedChart.types.js.map

package/types/composedChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composedChart.types.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/types/index.js

@@ -1,2 +1,3 @@
 'use strict';
 
+//# sourceMappingURL=index.js.map

package/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}