@gravity-ui/charts 1.38.4 → 1.38.5

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.
Files changed (67) hide show
  1. package/dist/cjs/components/ChartInner/index.js +7 -3
  2. package/dist/cjs/components/ChartInner/useLegend.js +4 -7
  3. package/dist/cjs/components/ChartInner/utils.d.ts +1 -1
  4. package/dist/cjs/components/ChartInner/utils.js +7 -5
  5. package/dist/cjs/hooks/useSeries/index.js +13 -3
  6. package/dist/cjs/hooks/useShapes/bar-x/prepare-data.js +0 -1
  7. package/dist/cjs/hooks/useShapes/pie/prepare-data.js +0 -1
  8. package/dist/cjs/hooks/useShapes/pie/utils.d.ts +0 -1
  9. package/dist/cjs/hooks/useShapes/pie/utils.js +0 -1
  10. package/dist/cjs/hooks/useShapes/sankey/prepare-data.js +1 -1
  11. package/dist/cjs/types/chart/area.d.ts +10 -12
  12. package/dist/cjs/types/chart/axis.d.ts +55 -37
  13. package/dist/cjs/types/chart/bar-x.d.ts +7 -10
  14. package/dist/cjs/types/chart/bar-y.d.ts +7 -10
  15. package/dist/cjs/types/chart/base.d.ts +6 -7
  16. package/dist/cjs/types/chart/heatmap.d.ts +0 -2
  17. package/dist/cjs/types/chart/legend.d.ts +14 -26
  18. package/dist/cjs/types/chart/line.d.ts +4 -4
  19. package/dist/cjs/types/chart/pie.d.ts +6 -12
  20. package/dist/cjs/types/chart/scatter.d.ts +0 -2
  21. package/dist/cjs/types/chart/series.d.ts +49 -56
  22. package/dist/cjs/types/chart/title.d.ts +4 -2
  23. package/dist/cjs/types/chart/tooltip.d.ts +8 -4
  24. package/dist/cjs/types/chart/treemap.d.ts +7 -5
  25. package/dist/cjs/types/chart/waterfall.d.ts +0 -1
  26. package/dist/cjs/types/chart/zoom.d.ts +0 -3
  27. package/dist/cjs/types/index.d.ts +3 -3
  28. package/dist/cjs/utils/chart/get-closest-data.d.ts +1 -0
  29. package/dist/cjs/utils/chart/get-closest-data.js +29 -7
  30. package/dist/cjs/utils/chart/math.d.ts +2 -3
  31. package/dist/cjs/utils/chart/math.js +2 -3
  32. package/dist/cjs/utils/chart/series-type-guards.d.ts +0 -1
  33. package/dist/cjs/utils/chart/series-type-guards.js +0 -1
  34. package/dist/esm/components/ChartInner/index.js +7 -3
  35. package/dist/esm/components/ChartInner/useLegend.js +4 -7
  36. package/dist/esm/components/ChartInner/utils.d.ts +1 -1
  37. package/dist/esm/components/ChartInner/utils.js +7 -5
  38. package/dist/esm/hooks/useSeries/index.js +13 -3
  39. package/dist/esm/hooks/useShapes/bar-x/prepare-data.js +0 -1
  40. package/dist/esm/hooks/useShapes/pie/prepare-data.js +0 -1
  41. package/dist/esm/hooks/useShapes/pie/utils.d.ts +0 -1
  42. package/dist/esm/hooks/useShapes/pie/utils.js +0 -1
  43. package/dist/esm/hooks/useShapes/sankey/prepare-data.js +1 -1
  44. package/dist/esm/types/chart/area.d.ts +10 -12
  45. package/dist/esm/types/chart/axis.d.ts +55 -37
  46. package/dist/esm/types/chart/bar-x.d.ts +7 -10
  47. package/dist/esm/types/chart/bar-y.d.ts +7 -10
  48. package/dist/esm/types/chart/base.d.ts +6 -7
  49. package/dist/esm/types/chart/heatmap.d.ts +0 -2
  50. package/dist/esm/types/chart/legend.d.ts +14 -26
  51. package/dist/esm/types/chart/line.d.ts +4 -4
  52. package/dist/esm/types/chart/pie.d.ts +6 -12
  53. package/dist/esm/types/chart/scatter.d.ts +0 -2
  54. package/dist/esm/types/chart/series.d.ts +49 -56
  55. package/dist/esm/types/chart/title.d.ts +4 -2
  56. package/dist/esm/types/chart/tooltip.d.ts +8 -4
  57. package/dist/esm/types/chart/treemap.d.ts +7 -5
  58. package/dist/esm/types/chart/waterfall.d.ts +0 -1
  59. package/dist/esm/types/chart/zoom.d.ts +0 -3
  60. package/dist/esm/types/index.d.ts +3 -3
  61. package/dist/esm/utils/chart/get-closest-data.d.ts +1 -0
  62. package/dist/esm/utils/chart/get-closest-data.js +29 -7
  63. package/dist/esm/utils/chart/math.d.ts +2 -3
  64. package/dist/esm/utils/chart/math.js +2 -3
  65. package/dist/esm/utils/chart/series-type-guards.d.ts +0 -1
  66. package/dist/esm/utils/chart/series-type-guards.js +0 -1
  67. package/package.json +17 -15
@@ -155,7 +155,11 @@ export const ChartInner = (props) => {
155
155
  }
156
156
  return items;
157
157
  }, [boundsHeight, boundsOffsetTop, boundsWidth, preparedSeries, preparedSplit, yAxis, yScale]);
158
- const yAxisDataItems = useAsyncState([], setYAxisDataItems);
158
+ // Gate axis data computation until the legend has been computed at least once.
159
+ // Using legendConfig (undefined → value, never reverts) avoids false→true toggling
160
+ // on every zoom/range-slider interaction that would otherwise stall axis rendering.
161
+ const axisDataReady = !(preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) || Boolean(legendConfig);
162
+ const yAxisDataItems = useAsyncState([], setYAxisDataItems, axisDataReady);
159
163
  const setXAxisDataItems = React.useCallback(async () => {
160
164
  const items = [];
161
165
  const axis = xAxis;
@@ -186,7 +190,7 @@ export const ChartInner = (props) => {
186
190
  xScale,
187
191
  yAxis,
188
192
  ]);
189
- const xAxisDataItems = useAsyncState([], setXAxisDataItems);
193
+ const xAxisDataItems = useAsyncState([], setXAxisDataItems, axisDataReady);
190
194
  React.useEffect(() => {
191
195
  if (!initialized && xScale) {
192
196
  if (!preparedRangeSlider.enabled || isBandScale(xScale)) {
@@ -237,7 +241,7 @@ export const ChartInner = (props) => {
237
241
  return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
238
242
  })),
239
243
  React.createElement("g", { className: b('content'), width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
240
- xScale && xAxisDataItems.length && (React.createElement(React.Fragment, null, xAxisDataItems.map((axisData) => {
244
+ Boolean(xScale && xAxisDataItems.length) && (React.createElement(React.Fragment, null, xAxisDataItems.map((axisData) => {
241
245
  return (React.createElement(AxisX, { key: axisData.id, htmlLayout: htmlLayout, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, preparedAxisData: axisData }));
242
246
  }))),
243
247
  Boolean(yAxisDataItems.length) && (React.createElement(React.Fragment, null, yAxisDataItems.map((axisData, index) => {
@@ -8,15 +8,13 @@ export function useLegend({ preparedLegend, preparedChart, preparedSeries, width
8
8
  });
9
9
  const legendStateRunRef = React.useRef(0);
10
10
  const prevLegendStateValue = React.useRef(legendState);
11
- const legendStateReady = React.useRef(false);
12
11
  React.useEffect(() => {
13
12
  legendStateRunRef.current++;
14
- legendStateReady.current = false;
13
+ const currentRun = legendStateRunRef.current;
14
+ if (!preparedLegend) {
15
+ return;
16
+ }
15
17
  (async function () {
16
- const currentRun = legendStateRunRef.current;
17
- if (!preparedLegend) {
18
- return;
19
- }
20
18
  const newStateValue = await getLegendComponents({
21
19
  chartWidth: width,
22
20
  chartHeight: height,
@@ -29,7 +27,6 @@ export function useLegend({ preparedLegend, preparedChart, preparedSeries, width
29
27
  setLegend(newStateValue);
30
28
  prevLegendStateValue.current = newStateValue;
31
29
  }
32
- legendStateReady.current = true;
33
30
  }
34
31
  })();
35
32
  }, [height, preparedChart.margin, preparedLegend, preparedSeries, width]);
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import type { PreparedAxis, PreparedSeries, PreparedZoom } from '../../hooks';
3
3
  export declare function hasAtLeastOneSeriesDataPerPlot(seriesData: PreparedSeries[], yAxes?: PreparedAxis[]): boolean;
4
- export declare function useAsyncState<T>(value: T, setState: () => Promise<T>): T;
4
+ export declare function useAsyncState<T>(value: T, setState: () => Promise<T>, isReady?: boolean): T;
5
5
  export declare function getResetZoomButtonStyle(args: {
6
6
  boundsHeight: number;
7
7
  boundsOffsetLeft: number;
@@ -29,23 +29,25 @@ export function hasAtLeastOneSeriesDataPerPlot(seriesData, yAxes = []) {
29
29
  });
30
30
  return [...hasDataMap.values()].every((hasData) => hasData);
31
31
  }
32
- export function useAsyncState(value, setState) {
32
+ export function useAsyncState(value, setState, isReady = true) {
33
33
  const [stateValue, setValue] = React.useState(value);
34
34
  const countedRef = React.useRef(0);
35
35
  const prevValue = React.useRef(value);
36
- const ready = React.useRef(false);
37
36
  React.useEffect(() => {
37
+ // Always increment to invalidate any in-flight run from the previous cycle.
38
38
  countedRef.current++;
39
+ if (!isReady) {
40
+ return;
41
+ }
42
+ const currentRun = countedRef.current;
39
43
  (async function () {
40
- const currentRun = countedRef.current;
41
44
  const newValue = await setState();
42
- ready.current = true;
43
45
  if (countedRef.current === currentRun && !isEqual(prevValue.current, newValue)) {
44
46
  setValue(newValue);
45
47
  prevValue.current = newValue;
46
48
  }
47
49
  })();
48
- }, [setState]);
50
+ }, [setState, isReady]);
49
51
  return stateValue;
50
52
  }
51
53
  export function getResetZoomButtonStyle(args) {
@@ -40,14 +40,22 @@ const getPreparedSeries = async ({ seriesData, seriesOptions, colors, preparedLe
40
40
  export const useSeries = (args) => {
41
41
  const { legend, originalSeriesData, seriesData, seriesOptions, colors, preparedLegend: preparedLegendProps = null, } = args;
42
42
  const [preparedLegend, setPreparedLegend] = React.useState(preparedLegendProps);
43
+ const legendRunRef = React.useRef(0);
43
44
  React.useEffect(() => {
44
45
  if (!preparedLegendProps) {
45
- getPreparedLegend({ legend, series: seriesData }).then((value) => setPreparedLegend(value));
46
+ const currentRun = ++legendRunRef.current;
47
+ getPreparedLegend({ legend, series: seriesData }).then((value) => {
48
+ if (legendRunRef.current === currentRun) {
49
+ setPreparedLegend(value);
50
+ }
51
+ });
46
52
  }
47
53
  }, [legend, preparedLegendProps, seriesData]);
48
54
  const [preparedSeries, setPreparedSeries] = React.useState([]);
49
55
  const [activeLegendItems, setActiveLegendItems] = React.useState(getActiveLegendItems(preparedSeries));
56
+ const seriesRunRef = React.useRef(0);
50
57
  React.useEffect(() => {
58
+ const currentRun = ++seriesRunRef.current;
51
59
  (async () => {
52
60
  const items = await getPreparedSeries({
53
61
  seriesData,
@@ -55,8 +63,10 @@ export const useSeries = (args) => {
55
63
  preparedLegend,
56
64
  colors,
57
65
  });
58
- setPreparedSeries(items);
59
- setActiveLegendItems(getActiveLegendItems(items));
66
+ if (seriesRunRef.current === currentRun) {
67
+ setPreparedSeries(items);
68
+ setActiveLegendItems(getActiveLegendItems(items));
69
+ }
60
70
  })();
61
71
  }, [seriesData, seriesOptions, preparedLegend, colors]);
62
72
  const prevOriginalSeriesData = usePrevious(originalSeriesData);
@@ -34,7 +34,6 @@ async function getLabelData(d, xMax) {
34
34
  series: d.series,
35
35
  };
36
36
  }
37
- // eslint-disable-next-line complexity
38
37
  export const prepareBarXData = async (args) => {
39
38
  var _a, _b, _c, _d, _e;
40
39
  const { series, seriesOptions, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isRangeSlider, } = args;
@@ -161,7 +161,6 @@ export function preparePieData(args) {
161
161
  * on the left side (x < 0) and shifts up by the label height when above the
162
162
  * horizontal center (y < 0). For SVG text, only the vertical shift is applied
163
163
  * to compensate for text baseline.
164
- *
165
164
  * @param {number} angle - Angle in radians at which the label should be placed.
166
165
  * @returns {[number, number]} A tuple [x, y] relative to the pie center.
167
166
  */
@@ -7,7 +7,6 @@ export declare function getCurveFactory(data: PreparedPieData): CurveFactory | u
7
7
  * Inscribed angle at vertex A (opposite side/chord BC): the angle between rays AB and AC.
8
8
  *
9
9
  * The order of B and C does not affect the result.
10
- *
11
10
  * @see: https://en.wikipedia.org/wiki/Inscribed_angle
12
11
  * @returns The angle in degrees, in the range [0, 180].
13
12
  */
@@ -18,7 +18,6 @@ export function getCurveFactory(data) {
18
18
  * Inscribed angle at vertex A (opposite side/chord BC): the angle between rays AB and AC.
19
19
  *
20
20
  * The order of B and C does not affect the result.
21
- *
22
21
  * @see: https://en.wikipedia.org/wiki/Inscribed_angle
23
22
  * @returns The angle in degrees, in the range [0, 180].
24
23
  */
@@ -5,7 +5,7 @@ export function prepareSankeyData(args) {
5
5
  const htmlElements = [];
6
6
  const sankeyGenerator = sankey()
7
7
  .nodeId((d) => d.name)
8
- .nodeSort((d) => d.index)
8
+ .nodeSort((a, b) => { var _a, _b; return ((_a = a.index) !== null && _a !== void 0 ? _a : 0) - ((_b = b.index) !== null && _b !== void 0 ? _b : 0); })
9
9
  .nodeWidth(15)
10
10
  .nodePadding(10)
11
11
  .extent([
@@ -29,9 +29,8 @@ export interface AreaSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
29
29
  normal?: {
30
30
  /**
31
31
  * Enable or disable the point marker.
32
- *
33
32
  * @default false
34
- * */
33
+ */
35
34
  enabled: boolean;
36
35
  };
37
36
  };
@@ -46,25 +45,25 @@ export interface AreaSeries<T = MeaningfulAny> extends BaseSeries {
46
45
  data: AreaSeriesData<T>[];
47
46
  /** The name of the series (used in legend, tooltip etc) */
48
47
  name: string;
49
- /** Whether to stack the values of each series on top of each other.
48
+ /**
49
+ * Whether to stack the values of each series on top of each other.
50
50
  * Possible values are undefined to disable, "normal" to stack by value or "percent"
51
- *
52
51
  * @default undefined
53
- * */
52
+ */
54
53
  stacking?: 'normal' | 'percent';
55
54
  /** This option allows grouping series in a stacked chart */
56
55
  stackId?: string;
57
56
  /** The main color of the series (hex, rgba) */
58
57
  color?: string;
59
- /** Fill opacity for the area
60
- *
58
+ /**
59
+ * Fill opacity for the area
61
60
  * @default 0.75
62
- * */
61
+ */
63
62
  opacity?: number;
64
- /** Pixel width of the graph line.
65
- *
63
+ /**
64
+ * Pixel width of the graph line.
66
65
  * @default 1
67
- * */
66
+ */
68
67
  lineWidth?: number;
69
68
  /** Individual series legend options. Has higher priority than legend options in widget data */
70
69
  legend?: BaseSeriesLegend & {
@@ -80,7 +79,6 @@ export interface AreaSeries<T = MeaningfulAny> extends BaseSeries {
80
79
  * - `'connect'`: Connect points across null values (skip nulls in rendering)
81
80
  * - `'zero'`: Treat null values as zero
82
81
  * - `'skip'`: Omit the data point (creates gap in area)
83
- *
84
82
  * @default 'skip'
85
83
  */
86
84
  nullMode?: 'connect' | 'zero' | 'skip';
@@ -9,11 +9,13 @@ export type ChartAxisTitleAlignment = 'left' | 'center' | 'right';
9
9
  export interface ChartAxisLabels {
10
10
  /** Enable or disable the axis labels. */
11
11
  enabled?: boolean;
12
- /** The label's pixel distance from the perimeter of the plot area.
12
+ /**
13
+ * The label's pixel distance from the perimeter of the plot area.
13
14
  * @default 10
14
15
  */
15
16
  margin?: number;
16
- /** The pixel padding for axis labels, to ensure white space between them.
17
+ /**
18
+ * The pixel padding for axis labels, to ensure white space between them.
17
19
  * @default 4
18
20
  */
19
21
  padding?: number;
@@ -26,11 +28,11 @@ export interface ChartAxisLabels {
26
28
  * As the chart gets narrower, it will start rotating the labels -45 degrees.
27
29
  *
28
30
  * Does not apply to html labels.
29
- *
30
31
  * @default true for all axis types except `datetime` (defaults to false)
31
32
  */
32
33
  autoRotation?: boolean;
33
- /** Rotation of the labels in degrees.
34
+ /**
35
+ * Rotation of the labels in degrees.
34
36
  *
35
37
  * Does not apply to html labels.
36
38
  * @default 0
@@ -39,11 +41,12 @@ export interface ChartAxisLabels {
39
41
  /**
40
42
  * Allows to use any html-tags to display labels content. Supports only for axis with type "category".
41
43
  * @default false
42
- * */
44
+ */
43
45
  html?: boolean;
44
- /** The maximum width of the axis labels(absolute or relative to the chart area).
46
+ /**
47
+ * The maximum width of the axis labels(absolute or relative to the chart area).
45
48
  * If more than that, it collapses into three points.
46
- * */
49
+ */
47
50
  maxWidth?: number | string;
48
51
  }
49
52
  export interface ChartAxisRangeSlider {
@@ -84,26 +87,29 @@ export interface ChartAxisTitle {
84
87
  text?: string;
85
88
  /** CSS styles for the title */
86
89
  style?: Partial<BaseTextStyle>;
87
- /** The pixel distance between the axis labels or line and the title.
90
+ /**
91
+ * The pixel distance between the axis labels or line and the title.
88
92
  * @default 4 for horizontal axes, 8 for vertical
89
93
  */
90
94
  margin?: number;
91
95
  /** Alignment of the title. */
92
96
  align?: ChartAxisTitleAlignment;
93
- /** Allows limiting of the contents of a title block to the specified number of lines.
97
+ /**
98
+ * Allows limiting of the contents of a title block to the specified number of lines.
94
99
  * @default 1
95
100
  */
96
101
  maxRowCount?: number;
97
102
  }
98
103
  export interface ChartAxisTickMarks {
99
- /** Enable or disable the tick marks on the axis.
104
+ /**
105
+ * Enable or disable the tick marks on the axis.
100
106
  *
101
107
  * Note: tick marks are always hidden when the axis `visible` is set to `false`.
102
- *
103
108
  * @default false
104
109
  */
105
110
  enabled?: boolean;
106
- /** The length of the tick marks in pixels (perpendicular to the axis).
111
+ /**
112
+ * The length of the tick marks in pixels (perpendicular to the axis).
107
113
  * @default 6
108
114
  */
109
115
  length?: number;
@@ -141,33 +147,38 @@ export interface ChartAxis {
141
147
  * Note: min/max is not supported for category axes in waterfall and heatmap visualizations.
142
148
  */
143
149
  max?: number;
144
- /** The grid lines settings.
150
+ /**
151
+ * The grid lines settings.
145
152
  * Unavailable for some visualizations, such as a heatmap.
146
153
  */
147
154
  grid?: {
148
- /** Enable or disable the grid lines.
155
+ /**
156
+ * Enable or disable the grid lines.
149
157
  * @default true
150
158
  */
151
159
  enabled?: boolean;
152
160
  };
153
161
  ticks?: {
154
- /** Pixel interval of the tick marks. Not applicable to categorized axis.
162
+ /**
163
+ * Pixel interval of the tick marks. Not applicable to categorized axis.
155
164
  * The specified value is only a hint; the interval between ticks can be greater or less depending on the data.
156
- *
157
165
  * @deprecated use `interval` instead
158
- * */
166
+ */
159
167
  pixelInterval?: number;
160
- /** Interval of the tick marks(absolute or relative to the chart area). Not applicable to categorized axis.
161
- * The specified value is only a hint; the interval between ticks can be greater or less depending on the data. */
168
+ /**
169
+ * Interval of the tick marks(absolute or relative to the chart area). Not applicable to categorized axis.
170
+ * The specified value is only a hint; the interval between ticks can be greater or less depending on the data.
171
+ */
162
172
  interval?: number | string;
163
173
  };
164
- /** Padding of the max value relative to the length of the axis.
174
+ /**
175
+ * Padding of the max value relative to the length of the axis.
165
176
  * A padding of 0.05 will make a 100px axis 5px longer.
166
177
  *
178
+ *
167
179
  * Does not apply:
168
180
  * - for series with data normalization along on a specific axis (stacking: 'percent')
169
181
  * - to the X axis when rangeSlider is used
170
- *
171
182
  * @default 0.05 for Y axis, 0.01 for X axis
172
183
  */
173
184
  maxPadding?: number;
@@ -175,14 +186,16 @@ export interface ChartAxis {
175
186
  plotLines?: AxisPlotLine[];
176
187
  /** An array of colored bands stretching across the plot area marking an interval on the axis. */
177
188
  plotBands?: AxisPlotBand[];
178
- /** Small perpendicular marks on the axis line at each tick position.
189
+ /**
190
+ * Small perpendicular marks on the axis line at each tick position.
179
191
  *
180
192
  * Hidden when the axis `visible` is set to `false`.
181
193
  */
182
194
  tickMarks?: ChartAxisTickMarks;
183
195
  /** Whether axis, including axis title, line, tick marks, and labels, should be visible. */
184
196
  visible?: boolean;
185
- /** Setting the order of the axis values. It is not applied by default.
197
+ /**
198
+ * Setting the order of the axis values. It is not applied by default.
186
199
  * the "reverse" value is needed to use the reverse order without sorting
187
200
  */
188
201
  order?: 'sortAsc' | 'sortDesc' | 'reverse';
@@ -195,7 +208,6 @@ export interface ChartAxis {
195
208
  *
196
209
  * Use `startOnTick: false` to make the chart start exactly at the data minimum,
197
210
  * preventing gaps at the chart start.
198
- *
199
211
  * @default true for X axis and datetime Y axis, false for linear/logarithmic Y axis
200
212
  */
201
213
  startOnTick?: boolean;
@@ -207,7 +219,6 @@ export interface ChartAxis {
207
219
  * if the data maximum doesn't align with the tick.
208
220
  *
209
221
  * Use `endOnTick: false` to make the chart end closer to the data maximum.
210
- *
211
222
  * @default true for X axis and datetime Y axis, false for linear/logarithmic Y axis
212
223
  */
213
224
  endOnTick?: boolean;
@@ -232,17 +243,20 @@ export interface AxisPlot {
232
243
  /**
233
244
  * Individual opacity for the line.
234
245
  * @default 1
235
- * */
246
+ */
236
247
  opacity?: number;
237
248
  label?: {
238
249
  text: string;
239
250
  style?: Partial<BaseTextStyle>;
240
- /** The pixel padding for label.
251
+ /**
252
+ * The pixel padding for label.
241
253
  * @default 5
242
254
  */
243
255
  padding?: number;
244
- /** Can be used for the UI automated test.
245
- * It is assigned as a data-qa attribute to an element. */
256
+ /**
257
+ * Can be used for the UI automated test.
258
+ * It is assigned as a data-qa attribute to an element.
259
+ */
246
260
  qa?: string;
247
261
  };
248
262
  /** Custom data associated with the plot line/band, accessible in tooltip renderer args. */
@@ -253,9 +267,10 @@ export interface AxisPlotLine extends AxisPlot {
253
267
  value?: number;
254
268
  /** The color of the plot line (hex, rgba). */
255
269
  color?: string;
256
- /** Pixel width of the plot line.
270
+ /**
271
+ * Pixel width of the plot line.
257
272
  * @default 1
258
- * */
273
+ */
259
274
  width?: number;
260
275
  /** Option for line stroke style. */
261
276
  dashStyle?: DashStyle;
@@ -281,23 +296,27 @@ export interface AxisPlotBand extends AxisPlot {
281
296
  to: number | string | null;
282
297
  }
283
298
  export interface AxisCrosshair extends Omit<AxisPlotLine, 'value' | 'label' | 'custom'> {
284
- /** Whether the crosshair should snap to the point or follow the pointer independent of points.
299
+ /**
300
+ * Whether the crosshair should snap to the point or follow the pointer independent of points.
285
301
  * @default true
286
302
  */
287
303
  snap?: boolean;
288
- /** Enable or disable the axis crosshair.
304
+ /**
305
+ * Enable or disable the axis crosshair.
289
306
  * @default false
290
307
  */
291
308
  enabled?: boolean;
292
309
  }
293
310
  export interface ChartYAxisTitle extends ChartAxisTitle {
294
- /** Rotation of the title in degrees.
311
+ /**
312
+ * Rotation of the title in degrees.
295
313
  * Currently, the available values are only for rotation in multiples of 90 degrees.
296
314
  *
297
315
  * The default values are -90 for the left axis and 90 for the right.
298
316
  */
299
317
  rotation?: 0 | 90 | -90;
300
- /** Interval of the tick marks(absolute or relative to the chart area).
318
+ /**
319
+ * Interval of the tick marks(absolute or relative to the chart area).
301
320
  *
302
321
  * For a title with rotation = 0, the relative value is calculated based on the chart width, otherwise on the chart height.
303
322
  * The default value for the title with rotation: 0 is 20%, for the rest - not defined.
@@ -306,9 +325,8 @@ export interface ChartYAxisTitle extends ChartAxisTitle {
306
325
  /**
307
326
  * Allows to use any html-tags to display the content.
308
327
  * The element will be displayed outside the box of the SVG element.
309
- *
310
328
  * @default false
311
- * */
329
+ */
312
330
  html?: boolean;
313
331
  }
314
332
  export interface ChartYAxis extends ChartAxis {
@@ -20,7 +20,6 @@ export interface BarXSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
20
20
  y?: string | number | null;
21
21
  /**
22
22
  * Corresponding value of axis category.
23
- *
24
23
  * @deprecated use `x` or `y` instead
25
24
  */
26
25
  category?: string;
@@ -41,26 +40,25 @@ export interface BarXSeries<T = MeaningfulAny> extends BaseSeries {
41
40
  * @default 0
42
41
  */
43
42
  borderRadius?: number;
44
- /** Whether to stack the values of each series on top of each other.
43
+ /**
44
+ * Whether to stack the values of each series on top of each other.
45
45
  * Possible values are undefined to disable, "normal" to stack by value or "percent"
46
- *
47
46
  * @default undefined
48
- * */
47
+ */
49
48
  stacking?: 'normal' | 'percent';
50
49
  /** This option allows grouping series in a stacked chart */
51
50
  stackId?: string;
52
- /** Whether to group non-stacked columns or to let them render independent of each other.
51
+ /**
52
+ * Whether to group non-stacked columns or to let them render independent of each other.
53
53
  * When false columns will be laid out individually and overlap each other.
54
- *
55
54
  * @default true
56
- * */
55
+ */
57
56
  grouping?: boolean;
58
57
  dataLabels?: BaseSeries['dataLabels'] & ChartSeriesOptions['dataLabels'] & {
59
58
  /**
60
59
  * Whether to align the data label inside or outside the box
61
- *
62
60
  * @default false
63
- * */
61
+ */
64
62
  inside?: boolean;
65
63
  };
66
64
  /** Individual series legend options. Has higher priority than legend options in widget data */
@@ -74,7 +72,6 @@ export interface BarXSeries<T = MeaningfulAny> extends BaseSeries {
74
72
  *
75
73
  * - `'skip'`: Omit data points with null values (no bar shown)
76
74
  * - `'zero'`: Treat null values as zero
77
- *
78
75
  * @default 'skip'
79
76
  */
80
77
  nullMode?: 'zero' | 'skip';
@@ -31,7 +31,6 @@ export interface BarYSeries<T = MeaningfulAny> extends BaseSeries {
31
31
  color?: string;
32
32
  /**
33
33
  * The width of the border surrounding each bar.
34
- *
35
34
  * @default 0
36
35
  */
37
36
  borderWidth?: number;
@@ -44,27 +43,26 @@ export interface BarYSeries<T = MeaningfulAny> extends BaseSeries {
44
43
  * @default 0
45
44
  */
46
45
  borderRadius?: number;
47
- /** Whether to stack the values of each series on top of each other.
46
+ /**
47
+ * Whether to stack the values of each series on top of each other.
48
48
  * Possible values are undefined to disable, "normal" to stack by value or "percent"
49
- *
50
49
  * @default undefined
51
- * */
50
+ */
52
51
  stacking?: 'normal' | 'percent';
53
52
  /** This option allows grouping series in a stacked chart */
54
53
  stackId?: string;
55
- /** Whether to group non-stacked columns or to let them render independent of each other.
54
+ /**
55
+ * Whether to group non-stacked columns or to let them render independent of each other.
56
56
  * When false columns will be laid out individually and overlap each other.
57
- *
58
57
  * @default true
59
- * */
58
+ */
60
59
  grouping?: boolean;
61
60
  dataLabels?: BaseSeries['dataLabels'] & {
62
61
  /**
63
62
  * Whether to align the data label inside or outside the box.
64
63
  * For charts with a percentage stack, it is always true.
65
- *
66
64
  * @default false
67
- * */
65
+ */
68
66
  inside?: boolean;
69
67
  };
70
68
  /** Individual series legend options. Has higher priority than legend options in widget data */
@@ -76,7 +74,6 @@ export interface BarYSeries<T = MeaningfulAny> extends BaseSeries {
76
74
  *
77
75
  * - `'skip'`: Omit data points with null values (no bar shown)
78
76
  * - `'zero'`: Treat null values as zero
79
- *
80
77
  * @default 'skip'
81
78
  */
82
79
  nullMode?: 'zero' | 'skip';
@@ -25,18 +25,17 @@ export interface BaseDataLabels {
25
25
  style?: Partial<BaseTextStyle>;
26
26
  /**
27
27
  * @default 5
28
- * */
28
+ */
29
29
  padding?: number;
30
30
  /**
31
31
  * @default false
32
- * */
32
+ */
33
33
  allowOverlap?: boolean;
34
34
  /**
35
35
  * Allows to use any html-tags to display the content.
36
36
  * The element will be displayed outside the box of the SVG element.
37
- *
38
37
  * @default false
39
- * */
38
+ */
40
39
  html?: boolean;
41
40
  /** Formatting settings for labels. */
42
41
  format?: ValueFormat;
@@ -46,7 +45,7 @@ export interface BaseSeries {
46
45
  visible?: boolean;
47
46
  /**
48
47
  * Options for the series data labels, appearing next to each data point.
49
- * */
48
+ */
50
49
  dataLabels?: BaseDataLabels;
51
50
  /** You can set the cursor to "pointer" if you have click events attached to the series, to signal to the user that the points and lines can be clicked. */
52
51
  cursor?: string;
@@ -58,7 +57,6 @@ export interface BaseSeries {
58
57
  valueFormat?: ValueFormat;
59
58
  /**
60
59
  * Enable or disable the visibility of this series in the tooltip.
61
- *
62
60
  * @default true
63
61
  */
64
62
  enabled?: boolean;
@@ -75,7 +73,8 @@ export interface BaseSeriesData<T = MeaningfulAny> {
75
73
  color?: string;
76
74
  }
77
75
  export interface BaseSeriesLegend extends ChartLegendItem {
78
- /** For multiple series with the same groupId, only one label in the legend will be displayed.
76
+ /**
77
+ * For multiple series with the same groupId, only one label in the legend will be displayed.
79
78
  * The legend element uses the name and symbol from the first series of the group.
80
79
  */
81
80
  groupId?: string;
@@ -36,7 +36,6 @@ export interface HeatmapSeries<T = MeaningfulAny> extends BaseSeries {
36
36
  };
37
37
  /**
38
38
  * The width of the border surrounding each cell.
39
- *
40
39
  * @default 0
41
40
  */
42
41
  borderWidth?: number;
@@ -49,7 +48,6 @@ export interface HeatmapSeries<T = MeaningfulAny> extends BaseSeries {
49
48
  *
50
49
  * - `'zero'`: Treat null values as zero
51
50
  * - `'skip'`: Omit data points with null values (show gaps)
52
- *
53
51
  * @default 'skip'
54
52
  */
55
53
  nullMode?: 'zero' | 'skip';