@alfalab/core-components-chart 3.3.3 → 3.4.1

package/moderncssm/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 { ResponsiveContainerProps } from "./responsiveContainer.types";
+import { SeriaProps } from "./seria.types";
+import { TooltipProps } from "./tooltip.types";
+import { XAxisProps } from "./xAxis.types";
+import { YAxisProps } from "./yAxis.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/moderncssm/types/options.types.js

@@ -0,0 +1 @@
+

package/moderncssm/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/moderncssm/types/payload.types.js

@@ -0,0 +1 @@
+

package/moderncssm/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/moderncssm/types/responsiveContainer.types.js

@@ -0,0 +1 @@
+

package/moderncssm/types/seria.types.d.ts

@@ -0,0 +1,72 @@
+import { DataProps } from "./utils/data.types";
+import { GradientProps } from "./utils/gradient.types";
+import { ChartProps } from "./chart.types";
+import { LabelListProps } from "./labelList.types";
+type RadiusProp = {
+    top?: number;
+    bottom?: number;
+};
+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[];
+}
+export { RadiusProp, SeriaProps };

package/moderncssm/types/seria.types.js

@@ -0,0 +1 @@
+

package/moderncssm/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?: Record<string, unknown>;
+    /**
+     * Значение метки, которое сейчас активно, обычно рассчитывается внутри компании.
+     */
+    label?: string | number;
+    /**
+     * Контент для тултипа
+     */
+    content?: any;
+}
+export { TooltipProps };

package/moderncssm/types/tooltip.types.js

@@ -0,0 +1 @@
+

package/moderncssm/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/moderncssm/types/utils/axis.types.js

@@ -0,0 +1 @@
+

package/moderncssm/types/utils/coordinates.types.d.ts

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

package/moderncssm/types/utils/coordinates.types.js

@@ -0,0 +1 @@
+

package/moderncssm/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/moderncssm/types/utils/data.types.js

@@ -0,0 +1 @@
+

package/moderncssm/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/moderncssm/types/utils/dot.types.js

@@ -0,0 +1 @@
+

package/moderncssm/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/moderncssm/types/utils/gradient.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,7 @@
+export * from "./axis.types";
+export * from "./coordinates.types";
+export * from "./data.types";
+export * from "./dot.types";
+export * from "./gradient.types";
+export * from "./tick.types";
+export {};

package/moderncssm/types/utils/index.js

@@ -0,0 +1 @@
+

package/moderncssm/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/moderncssm/types/utils/tick.types.js

@@ -0,0 +1 @@
+

package/moderncssm/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/moderncssm/types/xAxis.types.js

@@ -0,0 +1 @@
+

package/moderncssm/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/moderncssm/types/yAxis.types.js

@@ -0,0 +1 @@
+

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-chart",
-    "version": "3.3.3",
+    "version": "3.4.1",
     "description": "Chart component",
     "keywords": [],
     "license": "MIT",
@@ -11,7 +11,7 @@
         "directory": "dist"
     },
     "dependencies": {
-        "@alfalab/core-components-typography": "^4.9.0",
+        "@alfalab/core-components-typography": "^4.10.1",
         "classnames": "^2.3.1",
         "recharts": "^2.1.2",
         "tslib": "^2.4.0"
@@ -22,6 +22,6 @@
     "peerDependencies": {
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
-    "themesVersion": "13.0.2",
-    "varsVersion": "9.11.1"
+    "themesVersion": "13.2.0",
+    "varsVersion": "9.13.0"
 }

package/src/components/Legends/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .legendContent {
     display: flex;
@@ -8,8 +8,8 @@
 
 .legendWrap {
     width: 100%;
-    margin: 0;
-    padding: 0;
+    margin: var(--gap-0);
+    padding: var(--gap-0);
 }
 
 .legendItem {
@@ -19,7 +19,7 @@
 }
 
 .legendItem:last-child {
-    margin-right: 0;
+    margin-right: var(--gap-0);
 }
 
 .legendUnactive {

package/src/components/Tick/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .tickText {
     fill: var(--color-light-text-primary);

package/src/components/TooltipContent/index.module.css

@@ -1,10 +1,10 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .tooltip {
     background-color: var(--color-light-base-bg-primary);
     border: 1px solid var(--color-light-neutral-400);
     box-shadow: var(--shadow-l);
-    border-radius: var(--border-radius-m);
+    border-radius: var(--border-radius-8);
     padding: var(--gap-12) var(--gap-16);
     pointer-events: none;
     position: relative;
@@ -14,8 +14,8 @@
     position: relative;
     z-index: 5;
     list-style-type: none;
-    padding: 0;
-    margin: 0;
+    padding: var(--gap-0);
+    margin: var(--gap-0);
 }
 
 .tooltipItem {
@@ -24,7 +24,7 @@
 
 .tooltipArrow {
     position: absolute;
-    left: 0;
+    left: var(--gap-0);
     top: 50%;
     transform: translate(-50%, -50%) scale(1, 1) rotate(45deg);
     width: 10px;
@@ -36,8 +36,8 @@
 .tooltipArrow:before {
     content: '';
     position: absolute;
-    left: -2px;
-    top: -2px;
+    left: var(--gap-2-neg);
+    top: var(--gap-2-neg);
     width: 0;
     height: 0;
     border-style: solid;

package/src/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .coreChart {
     & :global(.recharts-line path) {