@dss-kit/ui-kit 0.2.13 → 0.2.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/charts/LineChart/LineChart.d.ts +4 -0
- package/dist/components/charts/LineChart/LineChart.d.ts.map +1 -0
- package/dist/components/charts/LineChart/LineChart.stories.d.ts +53 -0
- package/dist/components/charts/LineChart/LineChart.stories.d.ts.map +1 -0
- package/dist/components/charts/LineChart/constants.d.ts +15 -0
- package/dist/components/charts/LineChart/constants.d.ts.map +1 -0
- package/dist/components/charts/LineChart/index.d.ts +3 -0
- package/dist/components/charts/LineChart/index.d.ts.map +1 -0
- package/dist/components/charts/LineChart/types.d.ts +258 -0
- package/dist/components/charts/LineChart/types.d.ts.map +1 -0
- package/dist/components/charts/LineChart/utils.d.ts +4 -0
- package/dist/components/charts/LineChart/utils.d.ts.map +1 -0
- package/dist/components/charts/PieProgressChart/PieProgressChart.d.ts +4 -0
- package/dist/components/charts/PieProgressChart/PieProgressChart.d.ts.map +1 -0
- package/dist/components/charts/PieProgressChart/PieProgressChart.stories.d.ts +13 -0
- package/dist/components/charts/PieProgressChart/PieProgressChart.stories.d.ts.map +1 -0
- package/dist/components/charts/PieProgressChart/constants.d.ts +6 -0
- package/dist/components/charts/PieProgressChart/constants.d.ts.map +1 -0
- package/dist/components/charts/PieProgressChart/index.d.ts +3 -0
- package/dist/components/charts/PieProgressChart/index.d.ts.map +1 -0
- package/dist/components/charts/PieProgressChart/types.d.ts +176 -0
- package/dist/components/charts/PieProgressChart/types.d.ts.map +1 -0
- package/dist/components/charts/PieProgressChart/utils.d.ts +4 -0
- package/dist/components/charts/PieProgressChart/utils.d.ts.map +1 -0
- package/dist/components/charts/index.d.ts +5 -0
- package/dist/components/charts/index.d.ts.map +1 -0
- package/dist/components/controls/Input/Input.d.ts.map +1 -1
- package/dist/components/controls/Tabs/TabItem/TabItem.d.ts +10 -0
- package/dist/components/controls/Tabs/TabItem/TabItem.d.ts.map +1 -0
- package/dist/components/controls/Tabs/TabItem/index.d.ts +2 -0
- package/dist/components/controls/Tabs/TabItem/index.d.ts.map +1 -0
- package/dist/components/controls/Tabs/Tabs.d.ts +40 -0
- package/dist/components/controls/Tabs/Tabs.d.ts.map +1 -0
- package/dist/components/controls/Tabs/Tabs.stories.d.ts +9 -0
- package/dist/components/controls/Tabs/Tabs.stories.d.ts.map +1 -0
- package/dist/components/controls/Tabs/index.d.ts +2 -0
- package/dist/components/controls/Tabs/index.d.ts.map +1 -0
- package/dist/components/controls/index.d.ts +1 -0
- package/dist/components/controls/index.d.ts.map +1 -1
- package/dist/components/shared/Badge/Badge.d.ts +2 -2
- package/dist/components/shared/Badge/Badge.d.ts.map +1 -1
- package/dist/components/shared/index.d.ts +1 -0
- package/dist/components/shared/index.d.ts.map +1 -1
- package/dist/root.css +1 -1
- package/dist/ui-kit.cjs.js +13 -13
- package/dist/ui-kit.cjs.js.map +1 -1
- package/dist/ui-kit.css +1 -1
- package/dist/ui-kit.es.js +5450 -5214
- package/dist/ui-kit.es.js.map +1 -1
- package/package.json +2 -1
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { HighchartsReactRefObject } from '@highcharts/react';
|
|
2
|
+
import { LineChartProps } from './types';
|
|
3
|
+
export declare const LineChart: import('react').ForwardRefExoticComponent<LineChartProps & import('react').RefAttributes<HighchartsReactRefObject>>;
|
|
4
|
+
//# sourceMappingURL=LineChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/LineChart/LineChart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAE9B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C,eAAO,MAAM,SAAS,qHAmDrB,CAAC"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { LineChart } from './LineChart';
|
|
3
|
+
declare const meta: Meta<typeof LineChart>;
|
|
4
|
+
type Story = StoryObj<typeof LineChart>;
|
|
5
|
+
/**
|
|
6
|
+
* График оборотов (положительный тренд)
|
|
7
|
+
* Показывает рост оборота с небольшими колебаниями
|
|
8
|
+
*/
|
|
9
|
+
export declare const Positive: Story;
|
|
10
|
+
/**
|
|
11
|
+
* График расходов/споров (отрицательный тренд)
|
|
12
|
+
* Показывает колебания расходов
|
|
13
|
+
*/
|
|
14
|
+
export declare const Negative: Story;
|
|
15
|
+
/**
|
|
16
|
+
* График транзакций (акцентный цвет)
|
|
17
|
+
* Показывает стабильные транзакции с небольшими колебаниями
|
|
18
|
+
*/
|
|
19
|
+
export declare const Accent: Story;
|
|
20
|
+
/**
|
|
21
|
+
* График активных споров (предупреждение)
|
|
22
|
+
* Показывает количество активных споров с волатильностью
|
|
23
|
+
*/
|
|
24
|
+
export declare const Warning: Story;
|
|
25
|
+
/**
|
|
26
|
+
* График с координатами [x, y]
|
|
27
|
+
* Использует формат данных в виде массива пар координат
|
|
28
|
+
*/
|
|
29
|
+
export declare const WithCoordinates: Story;
|
|
30
|
+
/**
|
|
31
|
+
* График с расширенными опциями точек и разрывами
|
|
32
|
+
* Использует Highcharts.PointOptionsObject для кастомизации отдельных точек
|
|
33
|
+
*/
|
|
34
|
+
export declare const WithPointOptions: Story;
|
|
35
|
+
/**
|
|
36
|
+
* График с именованными точками
|
|
37
|
+
* Использует объекты с name для отображения в tooltip
|
|
38
|
+
*/
|
|
39
|
+
export declare const WithNamedPoints: Story;
|
|
40
|
+
/**
|
|
41
|
+
* График с кастомным tooltip (выплаты по дням)
|
|
42
|
+
*
|
|
43
|
+
* Пример кастомного tooltip с использованием переменных шаблонов Highcharts.
|
|
44
|
+
*
|
|
45
|
+
* В этом примере используются:
|
|
46
|
+
* - `{point.y}` - для отображения значения точки (сумма выплат)
|
|
47
|
+
* - `{point.key}` - для отображения категории (даты)
|
|
48
|
+
*
|
|
49
|
+
* Переменные шаблонов автоматически заменяются на актуальные значения при наведении на точку графика.
|
|
50
|
+
*/
|
|
51
|
+
export declare const WithCustomTooltip: Story;
|
|
52
|
+
export default meta;
|
|
53
|
+
//# sourceMappingURL=LineChart.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LineChart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/LineChart/LineChart.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAoGhC,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KA8BtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KA8BtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,KA6BpB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KA2BrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KA6C7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAqE9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAkC7B,CAAC;AAMF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,EAAE,KA2E/B,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { LineChartColorType } from './types';
|
|
2
|
+
export declare const lineChartPreset: Partial<Highcharts.Options>;
|
|
3
|
+
export declare const lineChartColorPreset: Record<LineChartColorType, {
|
|
4
|
+
color: string;
|
|
5
|
+
fillColor: {
|
|
6
|
+
linearGradient: {
|
|
7
|
+
x1: number;
|
|
8
|
+
y1: number;
|
|
9
|
+
x2: number;
|
|
10
|
+
y2: number;
|
|
11
|
+
};
|
|
12
|
+
stops: [number, string][];
|
|
13
|
+
};
|
|
14
|
+
}>;
|
|
15
|
+
//# sourceMappingURL=constants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/LineChart/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,CA0CvD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CACvC,kBAAkB,EAClB;IACE,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE;QACT,cAAc,EAAE;YAAE,EAAE,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC;QACnE,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;KAC3B,CAAC;CACH,CA0CF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/LineChart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
import { Highcharts, HighchartsOptionsType } from '@highcharts/react';
|
|
2
|
+
import { AccentType, NegativeType, PositiveType, WarningType } from '../../../types';
|
|
3
|
+
export type LineChartColorType = PositiveType | NegativeType | AccentType | WarningType;
|
|
4
|
+
export type LineChartDataType = (number | Highcharts.PointOptionsObject | [string | number, number | null] | null)[] | undefined;
|
|
5
|
+
export type LineChartXAxisType = HighchartsOptionsType["xAxis"];
|
|
6
|
+
export type LineChartYAxisType = HighchartsOptionsType["yAxis"];
|
|
7
|
+
/**
|
|
8
|
+
* Пропсы компонента LineChart
|
|
9
|
+
*/
|
|
10
|
+
export interface LineChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ref"> {
|
|
11
|
+
/**
|
|
12
|
+
* Цветовая схема графика, определяющая цвет линии и точек.
|
|
13
|
+
*
|
|
14
|
+
* Доступные варианты:
|
|
15
|
+
* - `positive`
|
|
16
|
+
* - `negative`
|
|
17
|
+
* - `accent`
|
|
18
|
+
* - `warning`
|
|
19
|
+
*
|
|
20
|
+
* @default "positive"
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```tsx
|
|
24
|
+
* <LineChart color="positive" data={[1, 2, 3]} yAxis={{}} />
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
27
|
+
color?: LineChartColorType;
|
|
28
|
+
/**
|
|
29
|
+
* Экземпляр библиотеки Highcharts для использования после инициализации дополнительных модулей.
|
|
30
|
+
*
|
|
31
|
+
* Этот проп необходим, если вы используете дополнительные модули Highcharts (например, highcharts-more,
|
|
32
|
+
* highcharts-3d, accessibility и т.д.), которые требуют явной инициализации. Если вы используете только
|
|
33
|
+
* базовый функционал Highcharts, этот проп можно не указывать.
|
|
34
|
+
*
|
|
35
|
+
* Начиная с @highcharts/react v4, этот проп является опциональным, так как базовый Highcharts
|
|
36
|
+
* импортируется автоматически.
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* ```tsx
|
|
40
|
+
* import Highcharts from "highcharts";
|
|
41
|
+
* import HighchartsMore from "highcharts/highcharts-more";
|
|
42
|
+
*
|
|
43
|
+
* // Инициализация дополнительных модулей
|
|
44
|
+
* HighchartsMore(Highcharts);
|
|
45
|
+
*
|
|
46
|
+
* <LineChart highcharts={Highcharts} data={[1, 2, 3]} yAxis={{}} />
|
|
47
|
+
* ```
|
|
48
|
+
*/
|
|
49
|
+
highcharts?: typeof Highcharts;
|
|
50
|
+
/**
|
|
51
|
+
* Конфигурация горизонтальной оси X графика.
|
|
52
|
+
*
|
|
53
|
+
* Определяет настройки для горизонтальной оси, включая:
|
|
54
|
+
* - `categories` - массив меток для оси X (например, названия месяцев, даты)
|
|
55
|
+
* - `type` - тип оси ('linear', 'logarithmic', 'datetime', 'category')
|
|
56
|
+
* - `title` - заголовок оси
|
|
57
|
+
* - `labels` - настройки отображения меток
|
|
58
|
+
* - `gridLineWidth` - толщина линий сетки
|
|
59
|
+
* - и другие опции Highcharts для оси X
|
|
60
|
+
*
|
|
61
|
+
* **Преднастроенные значения по умолчанию:**
|
|
62
|
+
* - `gridLineWidth: 0` - линии сетки отключены
|
|
63
|
+
* - `lineWidth: 0` - линия оси отключена
|
|
64
|
+
* - `tickWidth: 0` - деления оси отключены
|
|
65
|
+
* - `labels: { enabled: false }` - метки отключены
|
|
66
|
+
* - `title: { text: "" }` - заголовок пустой
|
|
67
|
+
*
|
|
68
|
+
* Все преднастроенные значения можно переопределить, передав свои параметры в этот проп.
|
|
69
|
+
* Переданные настройки будут объединены с преднастройками (ваши значения имеют приоритет).
|
|
70
|
+
*
|
|
71
|
+
* Этот проп опциональный. Если не указан, ось X будет использовать только преднастройки.
|
|
72
|
+
*
|
|
73
|
+
* @example
|
|
74
|
+
* ```tsx
|
|
75
|
+
* // Ось с категориями и включенными метками
|
|
76
|
+
* <LineChart
|
|
77
|
+
* xAxis={{
|
|
78
|
+
* categories: ["Янв", "Фев", "Мар", "Апр", "Май", "Июн"],
|
|
79
|
+
* labels: { enabled: true } // переопределяем преднастройку
|
|
80
|
+
* }}
|
|
81
|
+
* yAxis={{}}
|
|
82
|
+
* data={[1, 2, 3, 4, 5, 6]}
|
|
83
|
+
* />
|
|
84
|
+
*
|
|
85
|
+
* // Ось с типом datetime и линиями сетки
|
|
86
|
+
* <LineChart
|
|
87
|
+
* xAxis={{
|
|
88
|
+
* type: "datetime",
|
|
89
|
+
* title: { text: "Дата" },
|
|
90
|
+
* gridLineWidth: 1 // переопределяем преднастройку
|
|
91
|
+
* }}
|
|
92
|
+
* yAxis={{}}
|
|
93
|
+
* data={[[Date.UTC(2024, 0, 1), 100], [Date.UTC(2024, 1, 1), 200]]}
|
|
94
|
+
* />
|
|
95
|
+
* ```
|
|
96
|
+
*/
|
|
97
|
+
xAxis?: LineChartXAxisType;
|
|
98
|
+
/**
|
|
99
|
+
* Конфигурация вертикальной оси Y графика (обязательный проп).
|
|
100
|
+
*
|
|
101
|
+
* Определяет настройки для вертикальной оси, включая:
|
|
102
|
+
* - `categories` - массив меток для оси Y (для категориальных графиков)
|
|
103
|
+
* - `title` - заголовок оси
|
|
104
|
+
* - `min` / `max` - минимальное и максимальное значения оси
|
|
105
|
+
* - `labels` - настройки отображения меток (форматирование, стиль)
|
|
106
|
+
* - `gridLineWidth` - толщина линий сетки
|
|
107
|
+
* - `tickInterval` - интервал между делениями
|
|
108
|
+
* - и другие опции Highcharts для оси Y
|
|
109
|
+
*
|
|
110
|
+
* **Преднастроенные значения по умолчанию:**
|
|
111
|
+
* - `gridLineWidth: 0` - линии сетки отключены
|
|
112
|
+
* - `lineWidth: 0` - линия оси отключена
|
|
113
|
+
* - `tickWidth: 0` - деления оси отключены
|
|
114
|
+
* - `labels: { enabled: false }` - метки отключены
|
|
115
|
+
* - `title: { text: "" }` - заголовок пустой
|
|
116
|
+
*
|
|
117
|
+
* Все преднастроенные значения можно переопределить, передав свои параметры в этот проп.
|
|
118
|
+
* Переданные настройки будут объединены с преднастройками (ваши значения имеют приоритет).
|
|
119
|
+
*
|
|
120
|
+
* Этот проп является обязательным, так как определяет масштаб и способ отображения значений данных.
|
|
121
|
+
*
|
|
122
|
+
* @example
|
|
123
|
+
* ```tsx
|
|
124
|
+
* // Ось с категориями и включенными метками
|
|
125
|
+
* <LineChart
|
|
126
|
+
* yAxis={{
|
|
127
|
+
* categories: ["0", "1000", "2000", "3000", "4000", "5000"],
|
|
128
|
+
* labels: { enabled: true } // переопределяем преднастройку
|
|
129
|
+
* }}
|
|
130
|
+
* data={[1000, 2500, 3200]}
|
|
131
|
+
* />
|
|
132
|
+
*
|
|
133
|
+
* // Ось с диапазоном значений и линиями сетки
|
|
134
|
+
* <LineChart
|
|
135
|
+
* yAxis={{
|
|
136
|
+
* min: 0,
|
|
137
|
+
* max: 100,
|
|
138
|
+
* title: { text: "Процент выполнения" },
|
|
139
|
+
* labels: { enabled: true, format: "{value}%" },
|
|
140
|
+
* gridLineWidth: 1 // переопределяем преднастройку
|
|
141
|
+
* }}
|
|
142
|
+
* data={[10, 25, 50, 75, 90]}
|
|
143
|
+
* />
|
|
144
|
+
* ```
|
|
145
|
+
*/
|
|
146
|
+
yAxis: LineChartYAxisType;
|
|
147
|
+
/**
|
|
148
|
+
* Массив данных для отображения на графике.
|
|
149
|
+
*
|
|
150
|
+
* Поддерживает несколько форматов данных:
|
|
151
|
+
* - `number[]` - простой массив чисел (для последовательных значений)
|
|
152
|
+
* - `[number | string, number | null][]` - массив пар [x, y] координат
|
|
153
|
+
* - `Highcharts.PointOptionsObject[]` - массив объектов с расширенными опциями точек
|
|
154
|
+
* - `null` - отсутствие данных для конкретной точки (создаст разрыв на графике)
|
|
155
|
+
*
|
|
156
|
+
* Если не указан или пустой массив, график будет отображен без данных.
|
|
157
|
+
*
|
|
158
|
+
* @default []
|
|
159
|
+
*
|
|
160
|
+
* @example
|
|
161
|
+
* ```tsx
|
|
162
|
+
* // Простой массив чисел
|
|
163
|
+
* <LineChart data={[1, 3, 2, 4, 5]} yAxis={{}} />
|
|
164
|
+
*
|
|
165
|
+
* // Массив координат [x, y]
|
|
166
|
+
* <LineChart
|
|
167
|
+
* data={[
|
|
168
|
+
* [Date.UTC(2024, 0, 1), 100],
|
|
169
|
+
* [Date.UTC(2024, 1, 1), 150],
|
|
170
|
+
* [Date.UTC(2024, 2, 1), 200]
|
|
171
|
+
* ]}
|
|
172
|
+
* xAxis={{ type: "datetime" }}
|
|
173
|
+
* yAxis={{}}
|
|
174
|
+
* />
|
|
175
|
+
*
|
|
176
|
+
* // Расширенные опции точек с разрывом графика
|
|
177
|
+
* <LineChart
|
|
178
|
+
* data={[
|
|
179
|
+
* { y: 10, marker: { enabled: true } },
|
|
180
|
+
* null, // разрыв графика
|
|
181
|
+
* { y: 30, color: "#ff0000" }
|
|
182
|
+
* ]}
|
|
183
|
+
* yAxis={{}}
|
|
184
|
+
* />
|
|
185
|
+
* ```
|
|
186
|
+
*/
|
|
187
|
+
data?: LineChartDataType;
|
|
188
|
+
/**
|
|
189
|
+
* Дополнительные HTML-атрибуты для контейнера графика.
|
|
190
|
+
*
|
|
191
|
+
* Позволяет передать любые стандартные HTML-атрибуты контейнеру div, в котором отрисовывается график.
|
|
192
|
+
* Наиболее часто используется для:
|
|
193
|
+
* - Установки размеров графика через `style` ({ width, height })
|
|
194
|
+
* - Добавления CSS-классов через `className`
|
|
195
|
+
* - Установки data-атрибутов для тестирования или аналитики
|
|
196
|
+
* - Добавления event handlers
|
|
197
|
+
*
|
|
198
|
+
* @example
|
|
199
|
+
* ```tsx
|
|
200
|
+
* // Установка размеров графика
|
|
201
|
+
* <LineChart
|
|
202
|
+
* containerProps={{
|
|
203
|
+
* style: { width: "500px", height: "300px" }
|
|
204
|
+
* }}
|
|
205
|
+
* data={[1, 2, 3]}
|
|
206
|
+
* yAxis={{}}
|
|
207
|
+
* />
|
|
208
|
+
*
|
|
209
|
+
* // Добавление CSS-класса и data-атрибута
|
|
210
|
+
* <LineChart
|
|
211
|
+
* containerProps={{
|
|
212
|
+
* className: "my-chart",
|
|
213
|
+
* "data-testid": "analytics-chart"
|
|
214
|
+
* }}
|
|
215
|
+
* data={[1, 2, 3]}
|
|
216
|
+
* yAxis={{}}
|
|
217
|
+
* />
|
|
218
|
+
* ```
|
|
219
|
+
*/
|
|
220
|
+
containerProps?: React.HTMLAttributes<HTMLDivElement>;
|
|
221
|
+
/**
|
|
222
|
+
* Кастомный React-элемент для отображения всплывающей подсказки (tooltip) при наведении на точки графика.
|
|
223
|
+
*
|
|
224
|
+
* Позволяет создать полностью настраиваемый tooltip с использованием React-компонентов и переменных
|
|
225
|
+
* шаблонов Highcharts. Переменные шаблонов автоматически заменяются на актуальные значения точки.
|
|
226
|
+
*
|
|
227
|
+
* Основные переменные шаблонов:
|
|
228
|
+
* - `{point.x}` - значение X координаты точки
|
|
229
|
+
* - `{point.y}` - значение Y координаты точки
|
|
230
|
+
* - `{point.key}` - ключ точки (обычно для категорий или дат)
|
|
231
|
+
* - `{point.name}` - имя точки
|
|
232
|
+
* - `{series.name}` - название серии данных
|
|
233
|
+
*
|
|
234
|
+
* Форматирование чисел:
|
|
235
|
+
* - `{point.y:.2f}` - два знака после запятой
|
|
236
|
+
* - `{point.y:,.0f}` - с разделителем тысяч, без десятичных
|
|
237
|
+
*
|
|
238
|
+
* Для правильной работы tooltip должен содержать атрибут `data-hc-option="pointFormat"`.
|
|
239
|
+
*
|
|
240
|
+
* @example
|
|
241
|
+
* ```tsx
|
|
242
|
+
* <LineChart
|
|
243
|
+
* data={[1000, 2500, 3200]}
|
|
244
|
+
* yAxis={{}}
|
|
245
|
+
* tooltip={
|
|
246
|
+
* <div data-hc-option="pointFormat">
|
|
247
|
+
* <p>{"{point.y} USDT"}</p>
|
|
248
|
+
* <span>{"{point.key}"}</span>
|
|
249
|
+
* </div>
|
|
250
|
+
* }
|
|
251
|
+
* />
|
|
252
|
+
* ```
|
|
253
|
+
*
|
|
254
|
+
* @see Подробнее о переменных шаблонов в stories компонента
|
|
255
|
+
*/
|
|
256
|
+
tooltip?: React.ReactElement;
|
|
257
|
+
}
|
|
258
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/LineChart/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,KAAK,EACV,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,WAAW,EACZ,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,kBAAkB,GAC1B,YAAY,GACZ,YAAY,GACZ,UAAU,GACV,WAAW,CAAC;AAEhB,MAAM,MAAM,iBAAiB,GACzB,CACI,MAAM,GACN,UAAU,CAAC,kBAAkB,GAC7B,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,GAChC,IAAI,CACP,EAAE,GACH,SAAS,CAAC;AAEd,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;AAChE,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;AAEhE;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC;IACzD;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,UAAU,CAAC,EAAE,OAAO,UAAU,CAAC;IAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8CG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+CG;IACH,KAAK,EAAE,kBAAkB,CAAC;IAE1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAuCG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+BG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkCG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC9B"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { HighchartsOptionsType } from '@highcharts/react';
|
|
2
|
+
import { LineChartColorType, LineChartDataType, LineChartXAxisType, LineChartYAxisType } from './types';
|
|
3
|
+
export declare const buildLineChartOptions: (color: LineChartColorType, data: LineChartDataType, xAxis: LineChartXAxisType, yAxis: LineChartYAxisType) => HighchartsOptionsType;
|
|
4
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/LineChart/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,KAAK,EACV,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,qBAAqB,GAChC,OAAO,kBAAkB,EACzB,MAAM,iBAAiB,EACvB,OAAO,kBAAkB,EACzB,OAAO,kBAAkB,KACxB,qBAmBF,CAAC"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { HighchartsReactRefObject } from '@highcharts/react';
|
|
2
|
+
import { PieProgressChartProps } from './types';
|
|
3
|
+
export declare const PieProgressChart: import('react').ForwardRefExoticComponent<PieProgressChartProps & import('react').RefAttributes<HighchartsReactRefObject>>;
|
|
4
|
+
//# sourceMappingURL=PieProgressChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PieProgressChart.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/PieProgressChart/PieProgressChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAGlE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAGrD,eAAO,MAAM,gBAAgB,4HAwC5B,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { PieProgressChart } from './PieProgressChart';
|
|
3
|
+
declare const meta: Meta<typeof PieProgressChart>;
|
|
4
|
+
type Story = StoryObj<typeof PieProgressChart>;
|
|
5
|
+
/**
|
|
6
|
+
* Круговой график
|
|
7
|
+
*/
|
|
8
|
+
export declare const Positive: Story;
|
|
9
|
+
export declare const Negative: Story;
|
|
10
|
+
export declare const Accent: Story;
|
|
11
|
+
export declare const Warning: Story;
|
|
12
|
+
export default meta;
|
|
13
|
+
//# sourceMappingURL=PieProgressChart.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PieProgressChart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/PieProgressChart/PieProgressChart.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAgBvC,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { PieProgressChartColorType } from './types';
|
|
2
|
+
export declare const pieProgressChartPreset: Partial<Highcharts.Options>;
|
|
3
|
+
export declare const pieProgressChartColorPreset: Record<PieProgressChartColorType, {
|
|
4
|
+
colors: [string, string];
|
|
5
|
+
}>;
|
|
6
|
+
//# sourceMappingURL=constants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/PieProgressChart/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEzD,eAAO,MAAM,sBAAsB,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,CAsD9D,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAC9C,yBAAyB,EACzB;IAAE,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,CAc7B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/PieProgressChart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
import { Highcharts } from '@highcharts/react';
|
|
2
|
+
import { AccentType, NegativeType, PositiveType, WarningType } from '../../../types';
|
|
3
|
+
export type PieProgressChartColorType = PositiveType | NegativeType | AccentType | WarningType;
|
|
4
|
+
/**
|
|
5
|
+
* Пропсы компонента PieProgressChart
|
|
6
|
+
*
|
|
7
|
+
* Круговая диаграмма прогресса с предустановленной конфигурацией для отображения процента выполнения.
|
|
8
|
+
*
|
|
9
|
+
* **Основные преднастройки компонента:**
|
|
10
|
+
* - Тип диаграммы: круговая (pie) с внутренним отверстием 90% (donut-стиль)
|
|
11
|
+
* - Углы отображения: от 90° до -90° (полукруг снизу)
|
|
12
|
+
* - Прозрачный фон
|
|
13
|
+
* - Отключены: tooltip, legend, dataLabels, credits, интерактивность (hover/select)
|
|
14
|
+
* - Центральный текстовый лейбл с настроенными стилями
|
|
15
|
+
*
|
|
16
|
+
* Компонент автоматически создает две части диаграммы:
|
|
17
|
+
* 1. Заполненная часть (процент выполнения) - основной цвет
|
|
18
|
+
* 2. Незаполненная часть (остаток до 100%) - светлый оттенок
|
|
19
|
+
*/
|
|
20
|
+
export interface PieProgressChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ref"> {
|
|
21
|
+
/**
|
|
22
|
+
* Цветовая схема круговой диаграммы прогресса, определяющая цвет заполненной и незаполненной частей.
|
|
23
|
+
*
|
|
24
|
+
* Доступные варианты:
|
|
25
|
+
* - `positive`
|
|
26
|
+
* - `negative`
|
|
27
|
+
* - `accent`
|
|
28
|
+
* - `warning`
|
|
29
|
+
*
|
|
30
|
+
* Каждый цвет использует два оттенка:
|
|
31
|
+
* - Основной цвет (primary) для заполненной части
|
|
32
|
+
* - Светлый оттенок (tint-high) для незаполненной части
|
|
33
|
+
*
|
|
34
|
+
* @default "positive"
|
|
35
|
+
*
|
|
36
|
+
* @example
|
|
37
|
+
* ```tsx
|
|
38
|
+
* <PieProgressChart color="positive" percentage={75} />
|
|
39
|
+
* ```
|
|
40
|
+
*/
|
|
41
|
+
color?: PieProgressChartColorType;
|
|
42
|
+
/**
|
|
43
|
+
* Экземпляр библиотеки Highcharts для использования после инициализации дополнительных модулей.
|
|
44
|
+
*
|
|
45
|
+
* Этот проп необходим, если вы используете дополнительные модули Highcharts (например, highcharts-more,
|
|
46
|
+
* highcharts-3d, accessibility и т.д.), которые требуют явной инициализации. Если вы используете только
|
|
47
|
+
* базовый функционал Highcharts, этот проп можно не указывать.
|
|
48
|
+
*
|
|
49
|
+
* Начиная с @highcharts/react v4, этот проп является опциональным, так как базовый Highcharts
|
|
50
|
+
* импортируется автоматически.
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* ```tsx
|
|
54
|
+
* import Highcharts from "highcharts";
|
|
55
|
+
* import HighchartsMore from "highcharts/highcharts-more";
|
|
56
|
+
*
|
|
57
|
+
* // Инициализация дополнительных модулей
|
|
58
|
+
* HighchartsMore(Highcharts);
|
|
59
|
+
*
|
|
60
|
+
* <PieProgressChart highcharts={Highcharts} percentage={50} />
|
|
61
|
+
* ```
|
|
62
|
+
*/
|
|
63
|
+
highcharts?: typeof Highcharts;
|
|
64
|
+
/**
|
|
65
|
+
* Процент заполнения круговой диаграммы (обязательный проп).
|
|
66
|
+
*
|
|
67
|
+
* Определяет, какая часть диаграммы будет заполнена основным цветом.
|
|
68
|
+
* Значение автоматически ограничивается диапазоном от 0 до 100:
|
|
69
|
+
* - Если передано значение > 100, будет использовано 100
|
|
70
|
+
* - Если передано значение < 0, будет использовано 0
|
|
71
|
+
*
|
|
72
|
+
* Незаполненная часть (100 - percentage) отображается светлым оттенком цвета.
|
|
73
|
+
*
|
|
74
|
+
* @example
|
|
75
|
+
* ```tsx
|
|
76
|
+
* // 75% заполнения
|
|
77
|
+
* <PieProgressChart percentage={75} />
|
|
78
|
+
*
|
|
79
|
+
* // Полностью заполненная диаграмма
|
|
80
|
+
* <PieProgressChart percentage={100} />
|
|
81
|
+
*
|
|
82
|
+
* // Пустая диаграмма
|
|
83
|
+
* <PieProgressChart percentage={0} />
|
|
84
|
+
*
|
|
85
|
+
* // Значение автоматически ограничится до 100
|
|
86
|
+
* <PieProgressChart percentage={150} />
|
|
87
|
+
* ```
|
|
88
|
+
*/
|
|
89
|
+
percentage: number;
|
|
90
|
+
/**
|
|
91
|
+
* Функция для генерации центрального текстового лейбла диаграммы.
|
|
92
|
+
*
|
|
93
|
+
* Принимает процент заполнения и возвращает контент для отображения в центре диаграммы.
|
|
94
|
+
* Может возвращать:
|
|
95
|
+
* - Строку - простой текст
|
|
96
|
+
* - Массив строк/чисел - для многострочного текста
|
|
97
|
+
* - React-элемент - для кастомного JSX с полным контролем над стилями
|
|
98
|
+
* - Массив React-элементов - для сложных многострочных макетов
|
|
99
|
+
*
|
|
100
|
+
* **Преднастроенные стили для текстового лейбла:**
|
|
101
|
+
* - `fontSize: "24px"` - размер шрифта
|
|
102
|
+
* - `fontWeight: "600"` - полужирное начертание
|
|
103
|
+
* - `color: "var(--text-primary)"` - основной цвет текста
|
|
104
|
+
* - `align: "center"` - центрирование по горизонтали
|
|
105
|
+
* - `verticalAlign: "middle"` - центрирование по вертикали
|
|
106
|
+
*
|
|
107
|
+
* Если этот проп не указан, по умолчанию отображается процент с символом "%".
|
|
108
|
+
*
|
|
109
|
+
* @default (percentage) => `${percentage}%`
|
|
110
|
+
*
|
|
111
|
+
* @example
|
|
112
|
+
* ```tsx
|
|
113
|
+
* // Дефолтное поведение (процент с %)
|
|
114
|
+
* <PieProgressChart percentage={75} />
|
|
115
|
+
*
|
|
116
|
+
* // Кастомный текст
|
|
117
|
+
* <PieProgressChart
|
|
118
|
+
* percentage={75}
|
|
119
|
+
* label={(p) => `${p} из 100`}
|
|
120
|
+
* />
|
|
121
|
+
*
|
|
122
|
+
* // Многострочный текст
|
|
123
|
+
* <PieProgressChart
|
|
124
|
+
* percentage={75}
|
|
125
|
+
* label={(p) => [p, 'завершено']}
|
|
126
|
+
* />
|
|
127
|
+
*
|
|
128
|
+
* // Кастомный React-элемент
|
|
129
|
+
* <PieProgressChart
|
|
130
|
+
* percentage={75}
|
|
131
|
+
* label={(p) => (
|
|
132
|
+
* <div>
|
|
133
|
+
* <div style={{ fontSize: '32px' }}>{p}%</div>
|
|
134
|
+
* <div style={{ fontSize: '14px' }}>выполнено</div>
|
|
135
|
+
* </div>
|
|
136
|
+
* )}
|
|
137
|
+
* />
|
|
138
|
+
* ```
|
|
139
|
+
*/
|
|
140
|
+
label?: (percentage: number) => string | (string | number)[] | React.ReactElement | React.ReactElement[];
|
|
141
|
+
/**
|
|
142
|
+
* Дополнительные HTML-атрибуты для контейнера диаграммы.
|
|
143
|
+
*
|
|
144
|
+
* Позволяет передать любые стандартные HTML-атрибуты контейнеру div, в котором отрисовывается диаграмма.
|
|
145
|
+
* Наиболее часто используется для:
|
|
146
|
+
* - Установки размеров диаграммы через `style` ({ width, height })
|
|
147
|
+
* - Добавления CSS-классов через `className`
|
|
148
|
+
* - Установки data-атрибутов для тестирования или аналитики
|
|
149
|
+
* - Добавления event handlers
|
|
150
|
+
*
|
|
151
|
+
* **Рекомендуемые размеры:** Для круговой диаграммы прогресса обычно используются квадратные размеры
|
|
152
|
+
* (например, 128x128px, 256x256px) для сохранения правильных пропорций.
|
|
153
|
+
*
|
|
154
|
+
* @example
|
|
155
|
+
* ```tsx
|
|
156
|
+
* // Установка размеров диаграммы
|
|
157
|
+
* <PieProgressChart
|
|
158
|
+
* percentage={75}
|
|
159
|
+
* containerProps={{
|
|
160
|
+
* style: { width: "128px", height: "128px" }
|
|
161
|
+
* }}
|
|
162
|
+
* />
|
|
163
|
+
*
|
|
164
|
+
* // Добавление CSS-класса и data-атрибута
|
|
165
|
+
* <PieProgressChart
|
|
166
|
+
* percentage={75}
|
|
167
|
+
* containerProps={{
|
|
168
|
+
* className: "progress-chart",
|
|
169
|
+
* "data-testid": "progress-indicator"
|
|
170
|
+
* }}
|
|
171
|
+
* />
|
|
172
|
+
* ```
|
|
173
|
+
*/
|
|
174
|
+
containerProps?: React.HTMLAttributes<HTMLDivElement>;
|
|
175
|
+
}
|
|
176
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/PieProgressChart/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EACV,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,WAAW,EACZ,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,yBAAyB,GACjC,YAAY,GACZ,YAAY,GACZ,UAAU,GACV,WAAW,CAAC;AAEhB;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC;IACzD;;;;;;;;;;;;;;;;;;;OAmBG;IACH,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAElC;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,UAAU,CAAC,EAAE,OAAO,UAAU,CAAC;IAE/B;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiDG;IACH,KAAK,CAAC,EAAE,CACN,UAAU,EAAE,MAAM,KACf,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IAE9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgCG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;CACvD"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { HighchartsOptionsType } from '@highcharts/react';
|
|
2
|
+
import { PieProgressChartColorType } from './types';
|
|
3
|
+
export declare const buildPieProgressChartOptions: (percentage: number, color: PieProgressChartColorType) => HighchartsOptionsType;
|
|
4
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/PieProgressChart/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAK/D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEzD,eAAO,MAAM,4BAA4B,GACvC,YAAY,MAAM,EAClB,OAAO,yBAAyB,KAC/B,qBAcF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/charts/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/controls/Input/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA+B/B;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,oBAAoB;IACpB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,oBAAoB;IACpB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,KAAK,WAAW,GAAG;IACjB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mCAAmC;IACnC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gBAAgB;IAChB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,8BAA8B;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,KAAK,iBAAiB,GAAG,WAAW,GAClC,IAAI,CACF,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,CAC1D,GAAG;IACF,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;CACrC,CAAC;AAEJ;;GAEG;AACH,KAAK,oBAAoB,GAAG,WAAW,GACrC,IAAI,CACF,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,CAC1D,GAAG;IACF,SAAS,EAAE,IAAI,CAAC;IAChB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAChE,CAAC;AAEJ,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG,oBAAoB,CAAC;AAElE;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/controls/Input/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA+B/B;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,oBAAoB;IACpB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,oBAAoB;IACpB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,KAAK,WAAW,GAAG;IACjB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mCAAmC;IACnC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gBAAgB;IAChB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,8BAA8B;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,KAAK,iBAAiB,GAAG,WAAW,GAClC,IAAI,CACF,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,CAC1D,GAAG;IACF,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;CACrC,CAAC;AAEJ;;GAEG;AACH,KAAK,oBAAoB,GAAG,WAAW,GACrC,IAAI,CACF,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,CAC1D,GAAG;IACF,SAAS,EAAE,IAAI,CAAC;IAChB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAChE,CAAC;AAEJ,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG,oBAAoB,CAAC;AAElE;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,6EAoPhB,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
interface TabItemProps {
|
|
2
|
+
label: string;
|
|
3
|
+
selected: boolean;
|
|
4
|
+
fullWidth?: boolean;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
onClick: React.MouseEventHandler<HTMLDivElement>;
|
|
7
|
+
}
|
|
8
|
+
export declare const TabItem: import('react').ForwardRefExoticComponent<TabItemProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=TabItem.d.ts.map
|