@evergis/react 4.0.153 → 4.0.154
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/Dashboard/componentTypes.d.ts +3 -3
- package/dist/components/Dashboard/components/Chart/ChartPlotContext.d.ts +24 -0
- package/dist/components/Dashboard/components/Chart/components/AxisTitles.d.ts +23 -0
- package/dist/components/Dashboard/components/Chart/styled.d.ts +33 -0
- package/dist/components/Dashboard/components/ChartLegend/index.d.ts +1 -0
- package/dist/components/Dashboard/components/ChartLegend/styled.d.ts +1 -0
- package/dist/components/Dashboard/constants.d.ts +37 -1
- package/dist/components/Dashboard/containers/ChartContainer/types.d.ts +3 -1
- package/dist/components/Dashboard/containers/FiltersContainer/constants.d.ts +1 -0
- package/dist/components/Dashboard/containers/styled.d.ts +38 -0
- package/dist/components/Dashboard/hooks/index.d.ts +3 -0
- package/dist/components/Dashboard/hooks/useChartAxisAttributes.d.ts +19 -0
- package/dist/components/Dashboard/hooks/useChartAxisTickFormat.d.ts +18 -0
- package/dist/components/Dashboard/hooks/useChartAxisTitles.d.ts +32 -0
- package/dist/components/Dashboard/types.d.ts +59 -1
- package/dist/components/Dashboard/utils/chartAxis.d.ts +29 -0
- package/dist/components/Dashboard/utils/index.d.ts +1 -0
- package/dist/index.js +617 -85
- package/dist/index.js.map +1 -1
- package/dist/react.esm.js +600 -86
- package/dist/react.esm.js.map +1 -1
- package/package.json +3 -3
|
@@ -16,7 +16,7 @@ export interface ElementCameraConfig extends Omit<ConfigContainerChild, "options
|
|
|
16
16
|
export interface ElementCameraProps extends Omit<ContainerProps, "elementConfig"> {
|
|
17
17
|
elementConfig?: ElementCameraConfig;
|
|
18
18
|
}
|
|
19
|
-
export type ElementChartOptions = Pick<ConfigOptions, "column" | "markers" | "showLabels" | "showMarkers" | "showTotal" | "totalWord" | "totalAttribute" | "expandable" | "expanded" | "chartType" | "relatedDataSources" | "defaultColor" | "dotSnapping" | "radius" | "padding" | "fontColor" | "angle" | "barWidth" | "cornerRadius" | "shownItems" | "otherItems"> & NumericSizeOptions;
|
|
19
|
+
export type ElementChartOptions = Pick<ConfigOptions, "column" | "markers" | "showLabels" | "showMarkers" | "showTotal" | "totalWord" | "totalAttribute" | "expandable" | "expanded" | "chartType" | "relatedDataSources" | "defaultColor" | "dotSnapping" | "radius" | "padding" | "fontColor" | "angle" | "barWidth" | "cornerRadius" | "shownItems" | "otherItems" | "axis"> & NumericSizeOptions;
|
|
20
20
|
export interface ElementChartConfig extends Omit<ConfigContainerChild, "options" | "type"> {
|
|
21
21
|
type?: "chart";
|
|
22
22
|
options?: ElementChartOptions;
|
|
@@ -57,7 +57,7 @@ export interface ElementImageConfig extends Omit<ConfigContainerChild, "options"
|
|
|
57
57
|
export interface ElementImageProps extends Omit<ContainerProps, "elementConfig"> {
|
|
58
58
|
elementConfig?: ElementImageConfig;
|
|
59
59
|
}
|
|
60
|
-
export type ElementLegendOptions = Pick<ConfigOptions, "twoColumns" | "chartId" | "relatedDataSources" | "fontSize" | "chartType">;
|
|
60
|
+
export type ElementLegendOptions = Pick<ConfigOptions, "twoColumns" | "chartId" | "relatedDataSources" | "fontSize" | "chartType" | "column">;
|
|
61
61
|
export interface ElementLegendConfig extends Omit<ConfigContainerChild, "options" | "type"> {
|
|
62
62
|
type?: "legend";
|
|
63
63
|
options?: ElementLegendOptions;
|
|
@@ -169,7 +169,7 @@ export interface CameraContainerConfig extends Omit<ConfigContainerChild, "optio
|
|
|
169
169
|
export interface CameraContainerProps extends Omit<ContainerProps, "elementConfig"> {
|
|
170
170
|
elementConfig?: CameraContainerConfig;
|
|
171
171
|
}
|
|
172
|
-
export type ChartContainerOptions = Pick<ConfigOptions, "twoColumns" | "hideEmpty" | "fill"> & ContainerBoxOptions;
|
|
172
|
+
export type ChartContainerOptions = Pick<ConfigOptions, "twoColumns" | "hideEmpty" | "fill" | "legendInline"> & ContainerBoxOptions;
|
|
173
173
|
export interface ChartAliasChild extends Omit<ConfigContainerChild, "id"> {
|
|
174
174
|
id: "alias";
|
|
175
175
|
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Положение поля графика (области линий и сетки) внутри тела элемента `chart`, в пикселях.
|
|
3
|
+
*
|
|
4
|
+
* `left` / `right` — отступы поля от левого и правого краёв тела: колонка подписи оси плюс значения
|
|
5
|
+
* шкалы. `width` — ширина всего тела.
|
|
6
|
+
*/
|
|
7
|
+
export interface ChartPlotInsets {
|
|
8
|
+
left: number;
|
|
9
|
+
right: number;
|
|
10
|
+
width: number;
|
|
11
|
+
}
|
|
12
|
+
export interface ChartPlotContextValue {
|
|
13
|
+
/** Сообщает контейнеру фактическое положение поля после отрисовки графика. */
|
|
14
|
+
reportPlotInsets?: (insets: ChartPlotInsets) => void;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Контекст, через который элемент `chart` сообщает контейнеру, где лежит поле графика.
|
|
18
|
+
*
|
|
19
|
+
* По макету подпись оси X и легенда выравниваются по полю графика, а не по краям контейнера.
|
|
20
|
+
* Ширину шкал d3 вычисляет только при отрисовке, а подвал с подписью и легендой рисует
|
|
21
|
+
* `ChartContainer` — снаружи элемента. Без контейнера (элемент сам по себе) провайдера нет,
|
|
22
|
+
* и отчёт просто не отправляется.
|
|
23
|
+
*/
|
|
24
|
+
export declare const ChartPlotContext: import('react').Context<ChartPlotContextValue>;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { ChartAxisTitle } from '../../../hooks/useChartAxisTitles';
|
|
3
|
+
import { ConfigAxisSide } from '../../../types';
|
|
4
|
+
type AxisTitlesTopProps = {
|
|
5
|
+
left?: ChartAxisTitle;
|
|
6
|
+
right?: ChartAxisTitle;
|
|
7
|
+
/** Цвет подписи, если у стороны нет своего (несколько серий на стороне). */
|
|
8
|
+
neutralColor: string;
|
|
9
|
+
};
|
|
10
|
+
/** Горизонтальные подписи осей над телом графика: левая прижата влево, правая — вправо. */
|
|
11
|
+
export declare const AxisTitlesTop: FC<AxisTitlesTopProps>;
|
|
12
|
+
type AxisTitleSideSlotProps = {
|
|
13
|
+
side: ConfigAxisSide;
|
|
14
|
+
axisTitle?: ChartAxisTitle;
|
|
15
|
+
neutralColor: string;
|
|
16
|
+
/** Верхнее поле SVG — колонка повторяет его, чтобы подпись центрировалась по полю графика. */
|
|
17
|
+
plotTop: number;
|
|
18
|
+
/** Нижнее поле SVG вместе с полосой подписей оси X. */
|
|
19
|
+
plotBottom: number;
|
|
20
|
+
};
|
|
21
|
+
/** Вертикальная подпись оси сбоку от тела графика. Без подписи ничего не рендерит. */
|
|
22
|
+
export declare const AxisTitleSideSlot: FC<AxisTitleSideSlotProps>;
|
|
23
|
+
export {};
|
|
@@ -1,4 +1,37 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
|
+
import { ConfigAxisSide } from '../../types';
|
|
3
|
+
/** Обёртка линейного графика: строка горизонтальных подписей над телом, вертикальные — по бокам. */
|
|
4
|
+
export declare const LineChartLayout: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
5
|
+
export declare const LineChartRow: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
6
|
+
/**
|
|
7
|
+
* Тело линейного графика между вертикальными подписями осей. Забирает всю оставшуюся ширину строки —
|
|
8
|
+
* её и измеряем, чтобы отдать d3 пиксельную ширину: подписи бывают в одну и в две строки.
|
|
9
|
+
*/
|
|
10
|
+
export declare const LineChartBody: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
11
|
+
export declare const AxisTitlesRow: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
12
|
+
export declare const AxisTitleTop: import('styled-components').StyledComponent<"div", any, {
|
|
13
|
+
$color?: string;
|
|
14
|
+
}, never>;
|
|
15
|
+
/**
|
|
16
|
+
* Колонка вертикальной подписи оси: ширина — по тексту (одна или две строки) плюс зазор до значений
|
|
17
|
+
* шкалы. Вертикальные отступы колонки повторяют поля SVG, поэтому подпись центрируется по полю
|
|
18
|
+
* графика, а не по всей высоте вместе с подписями оси X.
|
|
19
|
+
*/
|
|
20
|
+
export declare const AxisTitleSideColumn: import('styled-components').StyledComponent<"div", any, {
|
|
21
|
+
$side: ConfigAxisSide;
|
|
22
|
+
$plotTop: number;
|
|
23
|
+
$plotBottom: number;
|
|
24
|
+
}, never>;
|
|
25
|
+
/**
|
|
26
|
+
* Сам текст вертикальной подписи. Поворот вынесен на внутренний элемент: повёрнутая целиком колонка
|
|
27
|
+
* перенесла бы зазор до шкалы на внешнюю сторону. Левая подпись читается снизу вверх, правая — сверху
|
|
28
|
+
* вниз, как на макете.
|
|
29
|
+
*/
|
|
30
|
+
export declare const AxisTitleSide: import('styled-components').StyledComponent<"div", any, {
|
|
31
|
+
$color?: string;
|
|
32
|
+
} & {
|
|
33
|
+
$side: ConfigAxisSide;
|
|
34
|
+
}, never>;
|
|
2
35
|
export declare const ChartTooltipTable: import('styled-components').StyledComponent<"table", any, {}, never>;
|
|
3
36
|
export declare const ChartTooltip: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps, never>;
|
|
4
37
|
export declare const ChartTooltipLabel: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export declare const ChartLegendContainer: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
|
|
2
2
|
twoColumns?: boolean;
|
|
3
|
+
$column?: boolean;
|
|
3
4
|
}, never>;
|
|
4
5
|
export declare const ChartLegendItem: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
|
|
5
6
|
isFiltered?: boolean;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
import { CSSObject } from 'styled-components';
|
|
3
3
|
import { AttributeIconType, AttributeType, QueryLayerServiceInfoDc } from '@evergis/api';
|
|
4
|
-
import { ConfigContainer, ConfigContainerChild, ConfigElementType } from './types';
|
|
4
|
+
import { ConfigAxisAlign, ConfigContainer, ConfigContainerChild, ConfigElementType } from './types';
|
|
5
5
|
export declare const CONFIG_PAGES_ID = "pages";
|
|
6
6
|
export declare const CONFIG_PAGE_ID = "page";
|
|
7
7
|
/**
|
|
@@ -38,6 +38,42 @@ export declare const MAX_CHART_WIDTH = 300;
|
|
|
38
38
|
export declare const DEFAULT_CHART_ANGLE = 4;
|
|
39
39
|
export declare const DEFAULT_CHART_HEIGHT = 90;
|
|
40
40
|
export declare const STACK_BAR_TOTAL_HEIGHT = 20;
|
|
41
|
+
/** Высота строки текста подписи оси (шрифт 10px) — по макету. */
|
|
42
|
+
export declare const AXIS_TITLE_LINE_HEIGHT = 12;
|
|
43
|
+
/** Зазор между подписью оси и значениями шкалы — по макету. */
|
|
44
|
+
export declare const AXIS_TITLE_GAP = 4;
|
|
45
|
+
/**
|
|
46
|
+
* Поле SVG графика под выступ крайних делений шкалы значений.
|
|
47
|
+
*
|
|
48
|
+
* d3 центрирует подпись деления на его линии (`dy: 0.32em`), поэтому у крайнего деления половина подписи
|
|
49
|
+
* выходит за поле графика. Если поле вплотную к краю SVG, половина оказывается за SVG, и её срезает
|
|
50
|
+
* обёртка: у линейного графика в fill — `ChartFillMeasure` (`overflow: hidden`), у барчарта всегда —
|
|
51
|
+
* `BarChartContainer` (`overflow-x: hidden`, отчего и по вертикали содержимое не `visible`).
|
|
52
|
+
*/
|
|
53
|
+
export declare const Y_AXIS_LABEL_OVERHANG = 6;
|
|
54
|
+
/** Зазор от строки горизонтальных подписей осей до верхней линии сетки — по макету. */
|
|
55
|
+
export declare const AXIS_TITLE_TOP_GRID_GAP = 9;
|
|
56
|
+
/** Число делений шкал линейного графика; у левой и правой шкал оно общее, чтобы совпадала сетка. */
|
|
57
|
+
export declare const LINE_CHART_Y_TICKS = 4;
|
|
58
|
+
/**
|
|
59
|
+
* Высота строки горизонтальных подписей осей (`axis.titlePosition: "top"`). Вместе с верхним полем SVG
|
|
60
|
+
* (Y_AXIS_LABEL_OVERHANG) даёт строку текста и 9px до верхней линии сетки: деление центрировано на
|
|
61
|
+
* линии и выступает над ней на ~5px, так что между подписью и значением шкалы остаются те же 4px,
|
|
62
|
+
* что и у вертикальной подписи.
|
|
63
|
+
*/
|
|
64
|
+
export declare const AXIS_TITLE_TOP_HEIGHT: number;
|
|
65
|
+
/**
|
|
66
|
+
* Пустая полоса под подписями оси X внутри SVG линейного графика: под ось зарезервировано
|
|
67
|
+
* LINE_CHART_LABEL_MARGIN (20px), а подписи сдвинуты вниз на +16px, поэтому строка подписи
|
|
68
|
+
* (шрифт d3 10px) кончается примерно в 14px от низа SVG.
|
|
69
|
+
*/
|
|
70
|
+
export declare const LINE_CHART_X_LABELS_BLANK = 14;
|
|
71
|
+
/** Зазор между подписями оси X и подписью самой оси — по макету. */
|
|
72
|
+
export declare const X_AXIS_TITLE_GAP = 4;
|
|
73
|
+
/** Зазор между подписью оси X и легендой, идущей отдельной строкой, — по макету. */
|
|
74
|
+
export declare const X_AXIS_TITLE_LEGEND_GAP = 8;
|
|
75
|
+
/** Выравнивание подписи оси X → `justify-content` строки-подвала графика. */
|
|
76
|
+
export declare const CHART_AXIS_ALIGN_JUSTIFY: Record<ConfigAxisAlign, CSSProperties["justifyContent"]>;
|
|
41
77
|
export declare const FILTER_PREFIX = "%";
|
|
42
78
|
/** Имя системного геометрического фильтра — выделение, нарисованное пользователем на карте. */
|
|
43
79
|
export declare const GEOMETRY_FILTER_NAME = "geometry";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BarChartData, PieChartData } from '@evergis/charts';
|
|
2
2
|
import { QueryLayerServiceInfoDc } from '@evergis/api';
|
|
3
|
-
import { ConfigContainerChild, ContainerProps, FilterItem } from '../../types';
|
|
3
|
+
import { ConfigAxisSide, ConfigContainerChild, ContainerProps, FilterItem } from '../../types';
|
|
4
4
|
export type ChartProps = Pick<ContainerProps, "config" | "elementConfig" | "type" | "renderElement"> & {
|
|
5
5
|
element: ConfigContainerChild;
|
|
6
6
|
};
|
|
@@ -11,4 +11,6 @@ export type ChartDataProps = {
|
|
|
11
11
|
attributeUnits: string | null;
|
|
12
12
|
dataSourceName: string | null;
|
|
13
13
|
color: string | null;
|
|
14
|
+
/** Сторона шкалы, к которой привязана серия. */
|
|
15
|
+
axisSide: ConfigAxisSide;
|
|
14
16
|
};
|
|
@@ -7,6 +7,7 @@ export declare const DEFAULT_BAR_CHART_HEIGHT = 100;
|
|
|
7
7
|
export declare const BAR_CHART_HEADER_HEIGHT = 40;
|
|
8
8
|
export declare const BAR_CHART_FOOTER_MARGIN = 16;
|
|
9
9
|
export declare const LINE_CHART_LABEL_MARGIN = 20;
|
|
10
|
+
export declare const LINE_CHART_X_AXIS_PADDING = 15;
|
|
10
11
|
export declare const DEFAULT_BAR_CHART_MARGINS: {
|
|
11
12
|
top: number;
|
|
12
13
|
left: number;
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
import { ChartPlotInsets } from '../components/Chart/ChartPlotContext';
|
|
1
3
|
export declare const ContainerAlias: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
|
|
2
4
|
hasBottomMargin?: boolean;
|
|
3
5
|
}, never>;
|
|
@@ -6,6 +8,42 @@ export declare const ContainerChart: import('styled-components').StyledComponent
|
|
|
6
8
|
$fill?: boolean;
|
|
7
9
|
}, never>;
|
|
8
10
|
export declare const ContainerLegend: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps, never>;
|
|
11
|
+
/**
|
|
12
|
+
* Строка под телом графика: подпись оси X и, при `legendInline`, легенда справа от неё.
|
|
13
|
+
*
|
|
14
|
+
* `$offsetTop` подтягивает строку к подписям оси X: под ними внутри SVG остаётся пустая полоса,
|
|
15
|
+
* и без поправки зазор получился бы втрое больше макетного.
|
|
16
|
+
*/
|
|
17
|
+
export declare const ChartFooter: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
|
|
18
|
+
$align?: CSSProperties["justifyContent"];
|
|
19
|
+
$insets?: ChartPlotInsets | null;
|
|
20
|
+
$offsetTop?: number;
|
|
21
|
+
$awaitingPlot?: boolean;
|
|
22
|
+
}, never>;
|
|
23
|
+
export declare const ChartXAxisTitle: import('styled-components').StyledComponent<"div", any, {
|
|
24
|
+
$color?: string;
|
|
25
|
+
}, never>;
|
|
26
|
+
/**
|
|
27
|
+
* Строка легенды под графиком. `$gapTop` заменяет отступ сверху, который легенде задаёт `ContainerValue`;
|
|
28
|
+
* `$offsetTop` сдвигает саму строку — подтягивает её к подписям оси X, как строку с подписью оси.
|
|
29
|
+
*
|
|
30
|
+
* `$justify` выравнивает сами записи. Выравнивание строки (`justifyContent`) до них не доходит: обёртки
|
|
31
|
+
* легенды — Flex из uilib-gl с `width: 100%`, а записи внутри легенда всегда центрирует.
|
|
32
|
+
*/
|
|
33
|
+
export declare const ChartLegendRow: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
|
|
34
|
+
$insets?: ChartPlotInsets | null;
|
|
35
|
+
$gapTop?: number;
|
|
36
|
+
$offsetTop?: number;
|
|
37
|
+
$justify?: CSSProperties["justifyContent"];
|
|
38
|
+
$awaitingPlot?: boolean;
|
|
39
|
+
}, never>;
|
|
40
|
+
/**
|
|
41
|
+
* Колонка «график + подпись оси X» для легенды сбоку (`twoColumns`). Без неё подпись встала бы третьим
|
|
42
|
+
* элементом ряда рядом с легендой, а не под графиком.
|
|
43
|
+
*/
|
|
44
|
+
export declare const ChartWithFooter: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
|
|
45
|
+
$fill?: boolean;
|
|
46
|
+
}, never>;
|
|
9
47
|
export declare const ContainerUnits: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
10
48
|
export declare const ContainerValue: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
|
|
11
49
|
fontColor?: string;
|
|
@@ -9,6 +9,9 @@ export * from './useContainerRoot';
|
|
|
9
9
|
export * from './useEditGroupAttributes';
|
|
10
10
|
export * from './useFetchImageWithAuth';
|
|
11
11
|
export * from './useFetchWithAuth';
|
|
12
|
+
export * from './useChartAxisAttributes';
|
|
13
|
+
export * from './useChartAxisTickFormat';
|
|
14
|
+
export * from './useChartAxisTitles';
|
|
12
15
|
export * from './useChartChange';
|
|
13
16
|
export * from './useChartData';
|
|
14
17
|
export * from './useConfigDataSources';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ConfigDataSource, ConfigRelatedDataSource } from '../types';
|
|
2
|
+
type UseChartAxisAttributesProps = {
|
|
3
|
+
dataSources: ConfigDataSource[];
|
|
4
|
+
relatedAttributes: ConfigRelatedDataSource[];
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* Оси значений линейного графика и атрибуты, по `stringFormat` которых форматируются деления.
|
|
8
|
+
*
|
|
9
|
+
* У левой и правой осей это разные атрибуты, поэтому они резолвятся по отдельности: иначе на
|
|
10
|
+
* правой оси окажутся единицы измерения левой.
|
|
11
|
+
*/
|
|
12
|
+
export declare const useChartAxisAttributes: ({ dataSources, relatedAttributes }: UseChartAxisAttributesProps) => {
|
|
13
|
+
axes: ConfigRelatedDataSource[];
|
|
14
|
+
strokeColors: string[];
|
|
15
|
+
leftAxisAttribute: import('@evergis/api').AttributeConfigurationDc;
|
|
16
|
+
rightAxisAttribute: import('@evergis/api').AttributeConfigurationDc;
|
|
17
|
+
};
|
|
18
|
+
export type ChartAxisAttribute = ReturnType<typeof useChartAxisAttributes>["leftAxisAttribute"];
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ConfigDataSource, ConfigRelatedDataSource } from '../types';
|
|
2
|
+
import * as d3 from "d3";
|
|
3
|
+
type UseChartAxisTickFormatProps = {
|
|
4
|
+
dataSources: ConfigDataSource[];
|
|
5
|
+
relatedAttributes: ConfigRelatedDataSource[];
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Форматтеры делений левой и правой шкал линейного графика — по `stringFormat` своего атрибута.
|
|
9
|
+
*
|
|
10
|
+
* Отдаются в `tickFormat` генератора оси, а не подменяют текст после отрисовки: d3 измеряет ширину
|
|
11
|
+
* шкалы по уже нарисованным подписям и по ней сдвигает поле графика. Подмена текста задним числом
|
|
12
|
+
* (`30` → `30,0`) делала подпись шире замера, и она заезжала на подпись оси слева.
|
|
13
|
+
*/
|
|
14
|
+
export declare const useChartAxisTickFormat: ({ dataSources, relatedAttributes }: UseChartAxisTickFormatProps) => {
|
|
15
|
+
formatLeftTick: (value: d3.NumberValue) => string;
|
|
16
|
+
formatRightTick: (value: d3.NumberValue) => string;
|
|
17
|
+
};
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { ConfigOptions, ConfigRelatedDataSource } from '../types';
|
|
2
|
+
type UseChartAxisTitlesProps = {
|
|
3
|
+
options?: ConfigOptions;
|
|
4
|
+
axes: ConfigRelatedDataSource[];
|
|
5
|
+
isLineChart: boolean;
|
|
6
|
+
};
|
|
7
|
+
/** Подпись оси одной стороны графика. */
|
|
8
|
+
export type ChartAxisTitle = {
|
|
9
|
+
title: string;
|
|
10
|
+
/** Цвет серии, если она на стороне одна; иначе не задан — подпись берёт нейтральный цвет шкалы. */
|
|
11
|
+
color?: string;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Подписи осей линейного графика и место, которое они занимают над телом графика.
|
|
15
|
+
*
|
|
16
|
+
* Режим размещения общий для всех осей (`options.axis.titlePosition`), текст — у каждой оси свой.
|
|
17
|
+
* Цвет подписи отдельной опцией не задаётся: одна серия на стороне — подпись в её цвет, несколько —
|
|
18
|
+
* нейтральная, потому что тогда подпись описывает всю ось, а не одну из линий. Ширину вертикальных
|
|
19
|
+
* подписей здесь не считаем — она зависит от числа строк текста и измеряется по факту.
|
|
20
|
+
*/
|
|
21
|
+
export declare const useChartAxisTitles: ({ options, axes, isLineChart }: UseChartAxisTitlesProps) => {
|
|
22
|
+
axisTitles: {
|
|
23
|
+
left: ChartAxisTitle;
|
|
24
|
+
right: ChartAxisTitle;
|
|
25
|
+
};
|
|
26
|
+
hasTopTitles: boolean;
|
|
27
|
+
hasSideTitles: boolean;
|
|
28
|
+
axisTitlesHeight: number;
|
|
29
|
+
hideLeftAxis: boolean;
|
|
30
|
+
hideRightAxis: boolean;
|
|
31
|
+
};
|
|
32
|
+
export {};
|
|
@@ -71,17 +71,54 @@ export interface ConfigRelatedAttribute {
|
|
|
71
71
|
attributeTitle?: string;
|
|
72
72
|
condition?: string;
|
|
73
73
|
}
|
|
74
|
+
/** Роль источника: ось категорий или ось значений. */
|
|
75
|
+
export type ConfigAxisType = "x" | "y";
|
|
76
|
+
/** Сторона, на которой выводятся значения оси. */
|
|
77
|
+
export type ConfigAxisSide = "left" | "right";
|
|
78
|
+
/**
|
|
79
|
+
* Настройки оси и привязанной к ней серии.
|
|
80
|
+
*
|
|
81
|
+
* Заменяет прежние плоские поля `chartAxis` / `axisColor` / `hideAxis`
|
|
82
|
+
* у `ConfigRelatedDataSource`.
|
|
83
|
+
*/
|
|
84
|
+
export interface ConfigAxis {
|
|
85
|
+
/** Роль источника. По умолчанию `"y"`. */
|
|
86
|
+
type?: ConfigAxisType;
|
|
87
|
+
/** Сторона вывода значений; серия строится по шкале этой стороны. По умолчанию `"left"`. */
|
|
88
|
+
side?: ConfigAxisSide;
|
|
89
|
+
/** Цвет линии, заливки и метки в легенде. */
|
|
90
|
+
color?: string;
|
|
91
|
+
/**
|
|
92
|
+
* Подпись оси. Пусто — подписи нет.
|
|
93
|
+
*
|
|
94
|
+
* Цвет подписи отдельно не задаётся: если на стороне одна серия, подпись берёт её `color`,
|
|
95
|
+
* если несколько — нейтральный `options.fontColor` (подпись описывает ось, а не одну из линий).
|
|
96
|
+
*/
|
|
97
|
+
title?: string;
|
|
98
|
+
/** Скрыть ось целиком. */
|
|
99
|
+
hide?: boolean;
|
|
100
|
+
}
|
|
74
101
|
export interface ConfigRelatedDataSource {
|
|
75
102
|
dataSourceName: string;
|
|
76
103
|
attributeName: string;
|
|
77
104
|
attributeTitle: string;
|
|
78
105
|
attributeUnits?: string;
|
|
79
106
|
attributeColor?: string;
|
|
107
|
+
/** Имя серии в легенде. К оси не относится, поэтому лежит снаружи `axis`. */
|
|
80
108
|
alias?: string;
|
|
109
|
+
filterName?: string;
|
|
110
|
+
axis?: ConfigAxis;
|
|
111
|
+
/**
|
|
112
|
+
* @deprecated Устаревшая плоская форма настроек оси — используйте `axis`.
|
|
113
|
+
*
|
|
114
|
+
* Поля читаются только слоем совместимости (`resolveAxis`) ради конфигов, созданных до
|
|
115
|
+
* переезда на `axis`, и не должны появляться в новом коде. Заданный `axis` имеет приоритет.
|
|
116
|
+
*/
|
|
81
117
|
chartAxis?: string;
|
|
118
|
+
/** @deprecated Используйте `axis.color`. */
|
|
82
119
|
axisColor?: string;
|
|
120
|
+
/** @deprecated Используйте `axis.hide`. */
|
|
83
121
|
hideAxis?: boolean;
|
|
84
|
-
filterName?: string;
|
|
85
122
|
}
|
|
86
123
|
export interface ConfigRelatedResource {
|
|
87
124
|
resourceId: string;
|
|
@@ -258,6 +295,11 @@ export interface ConfigLayoutOptions {
|
|
|
258
295
|
*/
|
|
259
296
|
autoHeight?: boolean;
|
|
260
297
|
twoColumns?: boolean;
|
|
298
|
+
/**
|
|
299
|
+
* ChartContainer: легенда встаёт в одну строку справа от подписи оси X.
|
|
300
|
+
* Игнорируется при `twoColumns` (легенда справа) и при отсутствии подписи оси X.
|
|
301
|
+
*/
|
|
302
|
+
legendInline?: boolean;
|
|
261
303
|
/** Вписать график контейнера Chart в контейнер: по ширине всегда, по высоте — при заданной высоте (object-fit: contain). */
|
|
262
304
|
fill?: boolean;
|
|
263
305
|
/**
|
|
@@ -340,6 +382,20 @@ export interface ConfigDataSourceBindingOptions {
|
|
|
340
382
|
hideIfEmptyDataSource?: string;
|
|
341
383
|
}
|
|
342
384
|
/** Опции графика. */
|
|
385
|
+
/** Выравнивание подписи оси X. */
|
|
386
|
+
export type ConfigAxisAlign = "left" | "center" | "right";
|
|
387
|
+
/** Режим размещения подписей осей Y — общий для всех осей графика. */
|
|
388
|
+
export type ConfigAxisTitlePosition = "side" | "top";
|
|
389
|
+
/** Общие настройки осей графика. Настройки конкретной оси — в `ConfigRelatedDataSource.axis`. */
|
|
390
|
+
export interface ConfigChartAxisOptions {
|
|
391
|
+
/** `side` — вертикально снаружи от значений, `top` — горизонтально над осью. По умолчанию `"side"`. */
|
|
392
|
+
titlePosition?: ConfigAxisTitlePosition;
|
|
393
|
+
x?: {
|
|
394
|
+
title?: string;
|
|
395
|
+
/** По умолчанию `"center"`. */
|
|
396
|
+
align?: ConfigAxisAlign;
|
|
397
|
+
};
|
|
398
|
+
}
|
|
343
399
|
export interface ConfigChartOptions {
|
|
344
400
|
chartType?: ChartType;
|
|
345
401
|
/** ⚠️ entity-ref: ссылка на ChartContainer по id. */
|
|
@@ -353,6 +409,8 @@ export interface ConfigChartOptions {
|
|
|
353
409
|
dotSnapping?: boolean;
|
|
354
410
|
drawMinMax?: boolean;
|
|
355
411
|
angle?: number;
|
|
412
|
+
/** Подписи осей и подпись оси X. Работает только у линейного графика. */
|
|
413
|
+
axis?: ConfigChartAxisOptions;
|
|
356
414
|
}
|
|
357
415
|
/** Иконки/изображения. */
|
|
358
416
|
export interface ConfigVisualOptions {
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { ConfigAxis, ConfigAxisSide, ConfigRelatedDataSource } from '../types';
|
|
2
|
+
type AxisSource = Partial<ConfigRelatedDataSource>;
|
|
3
|
+
/**
|
|
4
|
+
* Настройки оси источника.
|
|
5
|
+
*
|
|
6
|
+
* Читает `axis`, а при его отсутствии собирает объект из устаревших плоских полей
|
|
7
|
+
* `chartAxis` / `axisColor` / `hideAxis`. Заданный `axis` имеет приоритет: узел, который уже
|
|
8
|
+
* правили в редакторе, не должен откатываться к старым значениям.
|
|
9
|
+
*/
|
|
10
|
+
export declare const resolveAxis: (source?: AxisSource) => ConfigAxis;
|
|
11
|
+
/**
|
|
12
|
+
* Источник питает ось значений.
|
|
13
|
+
*
|
|
14
|
+
* Отсутствие `axis.type` означает `"y"`: конфиг без явного типа — самый частый случай,
|
|
15
|
+
* и раньше такой источник молча выпадал из графика.
|
|
16
|
+
*/
|
|
17
|
+
export declare const isValueAxis: (source: AxisSource) => boolean;
|
|
18
|
+
/** Сторона оси; отсутствие `axis.side` означает `"left"`. */
|
|
19
|
+
export declare const getAxisSide: (source: AxisSource) => ConfigAxisSide;
|
|
20
|
+
/** Источник выводится на правой оси. */
|
|
21
|
+
export declare const isRightAxis: (source: AxisSource) => boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Запись описывает ось чарта, а не источник фильтра.
|
|
24
|
+
*
|
|
25
|
+
* `BarChartFilter` собирает `relatedConfig` вручную и осей не задаёт — ему нужна исходная палитра,
|
|
26
|
+
* а не растянутая под число элементов.
|
|
27
|
+
*/
|
|
28
|
+
export declare const hasAxisConfig: ({ axis, chartAxis }: AxisSource) => boolean;
|
|
29
|
+
export {};
|
|
@@ -20,6 +20,7 @@ export * from './getAttributeIconElement';
|
|
|
20
20
|
export * from './getAttributeIconUrl';
|
|
21
21
|
export * from './getAttributesConfiguration';
|
|
22
22
|
export * from './getAttributeValue';
|
|
23
|
+
export * from './chartAxis';
|
|
23
24
|
export * from './getChartAxes';
|
|
24
25
|
export * from './getChartFilterName';
|
|
25
26
|
export * from './getChartMarkers';
|