@gravity-ui/charts 1.27.4 → 1.28.0

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 (11) hide show
  1. package/dist/cjs/components/AxisX/AxisX.js +13 -5
  2. package/dist/cjs/components/AxisY/AxisY.js +13 -5
  3. package/dist/cjs/hooks/useAxis/x-axis.js +10 -9
  4. package/dist/cjs/types/chart/axis.d.ts +4 -0
  5. package/dist/cjs/utils/chart/axis/common.js +3 -2
  6. package/dist/esm/components/AxisX/AxisX.js +13 -5
  7. package/dist/esm/components/AxisY/AxisY.js +13 -5
  8. package/dist/esm/hooks/useAxis/x-axis.js +10 -9
  9. package/dist/esm/types/chart/axis.d.ts +4 -0
  10. package/dist/esm/utils/chart/axis/common.js +3 -2
  11. package/package.json +1 -1
package/dist/cjs/components/AxisX/AxisX.js CHANGED
@@ -11,20 +11,20 @@ export const AxisX = (props) => {
11
11
  const htmlLabels = preparedAxisData.ticks.map((d) => d.htmlLabel).filter(Boolean);
12
12
  React.useEffect(() => {
13
13
  if (!ref.current) {
14
- return;
14
+ return () => { };
15
15
  }
16
16
  const svgElement = select(ref.current);
17
17
  svgElement.selectAll('*').remove();
18
18
  let plotBeforeContainer = null;
19
19
  let plotAfterContainer = null;
20
20
  const plotDataAttr = 'data-plot-x';
21
+ const plotBandDataAttr = `data-plot-x-band-${preparedAxisData.id}`;
22
+ const plotLineDataAttr = `data-plot-x-line-${preparedAxisData.id}`;
21
23
  if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
22
24
  plotBeforeContainer = select(plotBeforeRef.current);
23
- plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
24
25
  }
25
26
  if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
26
27
  plotAfterContainer = select(plotAfterRef.current);
27
- plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
28
28
  }
29
29
  if (preparedAxisData.title) {
30
30
  svgElement
@@ -93,7 +93,6 @@ export const AxisX = (props) => {
93
93
  }
94
94
  });
95
95
  if (preparedAxisData.plotBands.length > 0) {
96
- const plotBandDataAttr = `data-plot-x-band-${preparedAxisData.id}`;
97
96
  const setPlotBands = (plotContainer, plotBands) => {
98
97
  if (!plotContainer || !plotBands.length) {
99
98
  return;
@@ -134,7 +133,6 @@ export const AxisX = (props) => {
134
133
  setPlotBands(plotAfterContainer, preparedAxisData.plotBands.filter((item) => item.layerPlacement === 'after'));
135
134
  }
136
135
  if (preparedAxisData.plotLines.length > 0) {
137
- const plotLineDataAttr = `data-plot-x-line-${preparedAxisData.id}`;
138
136
  const setPlotLines = (plotContainer, plotLines) => {
139
137
  if (!plotContainer || !plotLines.length) {
140
138
  return;
@@ -175,6 +173,16 @@ export const AxisX = (props) => {
175
173
  setPlotLines(plotBeforeContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'before'));
176
174
  setPlotLines(plotAfterContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'after'));
177
175
  }
176
+ return () => {
177
+ if (plotBeforeContainer) {
178
+ plotBeforeContainer.selectAll(`[${plotBandDataAttr}]`).remove();
179
+ plotBeforeContainer.selectAll(`[${plotLineDataAttr}]`).remove();
180
+ }
181
+ if (plotAfterContainer) {
182
+ plotAfterContainer.selectAll(`[${plotBandDataAttr}]`).remove();
183
+ plotAfterContainer.selectAll(`[${plotLineDataAttr}]`).remove();
184
+ }
185
+ };
178
186
  }, [lineGenerator, plotAfterRef, plotBeforeRef, preparedAxisData]);
179
187
  return (React.createElement(React.Fragment, null,
180
188
  React.createElement(HtmlLayer, { preparedData: { htmlElements: htmlLabels }, htmlLayout: htmlLayout }),
package/dist/cjs/components/AxisY/AxisY.js CHANGED
@@ -17,20 +17,20 @@ export const AxisY = (props) => {
17
17
  React.useEffect(() => {
18
18
  var _a;
19
19
  if (!ref.current) {
20
- return;
20
+ return () => { };
21
21
  }
22
22
  const svgElement = select(ref.current);
23
23
  svgElement.selectAll('*').remove();
24
24
  let plotBeforeContainer = null;
25
25
  let plotAfterContainer = null;
26
26
  const plotDataAttr = 'data-plot-y';
27
+ const plotBandDataAttr = `data-plot-y-band-${preparedAxisData.id}`;
28
+ const plotLineDataAttr = `data-plot-y-line-${preparedAxisData.id}`;
27
29
  if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
28
30
  plotBeforeContainer = select(plotBeforeRef.current);
29
- plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
30
31
  }
31
32
  if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
32
33
  plotAfterContainer = select(plotAfterRef.current);
33
- plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
34
34
  }
35
35
  if (((_a = preparedAxisData.title) === null || _a === void 0 ? void 0 : _a.html) === false) {
36
36
  svgElement
@@ -99,7 +99,6 @@ export const AxisY = (props) => {
99
99
  }
100
100
  });
101
101
  if (preparedAxisData.plotBands.length > 0) {
102
- const plotBandDataAttr = `data-plot-y-band-${preparedAxisData.id}`;
103
102
  const setPlotBands = (plotContainer, plotBands) => {
104
103
  if (!plotContainer || !plotBands.length) {
105
104
  return;
@@ -140,7 +139,6 @@ export const AxisY = (props) => {
140
139
  setPlotBands(plotAfterContainer, preparedAxisData.plotBands.filter((item) => item.layerPlacement === 'after'));
141
140
  }
142
141
  if (preparedAxisData.plotLines.length > 0) {
143
- const plotLineDataAttr = `data-plot-y-line-${preparedAxisData.id}`;
144
142
  const setPlotLines = (plotContainer, plotLines) => {
145
143
  if (!plotContainer || !plotLines.length) {
146
144
  return;
@@ -181,6 +179,16 @@ export const AxisY = (props) => {
181
179
  setPlotLines(plotBeforeContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'before'));
182
180
  setPlotLines(plotAfterContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'after'));
183
181
  }
182
+ return () => {
183
+ if (plotBeforeContainer) {
184
+ plotBeforeContainer.selectAll(`[${plotBandDataAttr}]`).remove();
185
+ plotBeforeContainer.selectAll(`[${plotLineDataAttr}]`).remove();
186
+ }
187
+ if (plotAfterContainer) {
188
+ plotAfterContainer.selectAll(`[${plotBandDataAttr}]`).remove();
189
+ plotAfterContainer.selectAll(`[${plotLineDataAttr}]`).remove();
190
+ }
191
+ };
184
192
  }, [lineGenerator, plotAfterRef, plotBeforeRef, preparedAxisData]);
185
193
  return (React.createElement(React.Fragment, null,
186
194
  React.createElement(HtmlLayer, { preparedData: { htmlElements }, htmlLayout: htmlLayout }),
package/dist/cjs/hooks/useAxis/x-axis.js CHANGED
@@ -60,12 +60,13 @@ function getMaxPaddingBySeries({ series }) {
60
60
  return 0.01;
61
61
  }
62
62
  export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth, }) => {
63
- var _a, _b, _c, _d, _e, _f, _g, _h;
63
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
64
64
  const hasAxisRelatedSeries = seriesData.some(isAxisRelatedSeries);
65
65
  if (!hasAxisRelatedSeries) {
66
66
  return Promise.resolve(null);
67
67
  }
68
- const titleText = get(xAxis, 'title.text', '');
68
+ const isAxisVisible = (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.visible) !== null && _a !== void 0 ? _a : true;
69
+ const titleText = isAxisVisible ? get(xAxis, 'title.text', '') : '';
69
70
  const titleStyle = Object.assign(Object.assign({}, xAxisTitleDefaults.style), get(xAxis, 'title.style'));
70
71
  const titleMaxRowsCount = get(xAxis, 'title.maxRowCount', xAxisTitleDefaults.maxRowCount);
71
72
  const estimatedTitleRows = (await wrapText({
@@ -77,18 +78,18 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
77
78
  labels: [titleText],
78
79
  style: titleStyle,
79
80
  });
80
- const isLabelsEnabled = (_b = (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : true;
81
+ const isLabelsEnabled = isAxisVisible && ((_c = (_b = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _b === void 0 ? void 0 : _b.enabled) !== null && _c !== void 0 ? _c : true);
81
82
  const labelsStyle = {
82
83
  fontSize: get(xAxis, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
83
84
  };
84
- const labelsHtml = (_d = (_c = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _c === void 0 ? void 0 : _c.html) !== null && _d !== void 0 ? _d : false;
85
+ const labelsHtml = (_e = (_d = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _d === void 0 ? void 0 : _d.html) !== null && _e !== void 0 ? _e : false;
85
86
  let labelsLineHeight = 0;
86
87
  if (isLabelsEnabled) {
87
88
  labelsLineHeight = labelsHtml
88
89
  ? getHorizontalHtmlTextHeight({ text: 'Tmp', style: labelsStyle })
89
90
  : getHorizontalSvgTextHeight({ text: 'Tmp', style: labelsStyle });
90
91
  }
91
- const shouldHideGrid = seriesData.some((s) => s.type === SERIES_TYPE.Heatmap);
92
+ const shouldHideGrid = isAxisVisible === false || seriesData.some((s) => s.type === SERIES_TYPE.Heatmap);
92
93
  const preparedRangeSlider = getPreparedRangeSlider({ xAxis });
93
94
  const maxPadding = preparedRangeSlider.enabled
94
95
  ? 0
@@ -106,7 +107,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
106
107
  width: 0,
107
108
  height: 0,
108
109
  lineHeight: labelsLineHeight,
109
- maxWidth: (_f = calculateNumericProperty({ base: width, value: (_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _e === void 0 ? void 0 : _e.maxWidth })) !== null && _f !== void 0 ? _f : axisLabelsDefaults.maxWidth,
110
+ maxWidth: (_g = calculateNumericProperty({ base: width, value: (_f = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _f === void 0 ? void 0 : _f.maxWidth })) !== null && _g !== void 0 ? _g : axisLabelsDefaults.maxWidth,
110
111
  html: labelsHtml,
111
112
  },
112
113
  lineColor: get(xAxis, 'lineColor'),
@@ -131,12 +132,12 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
131
132
  enabled: shouldHideGrid ? false : get(xAxis, 'grid.enabled', true),
132
133
  },
133
134
  ticks: {
134
- pixelInterval: ((_g = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _g === void 0 ? void 0 : _g.interval)
135
+ pixelInterval: ((_h = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _h === void 0 ? void 0 : _h.interval)
135
136
  ? calculateNumericProperty({
136
137
  base: width,
137
138
  value: xAxis.ticks.interval,
138
139
  })
139
- : (_h = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _h === void 0 ? void 0 : _h.pixelInterval,
140
+ : (_j = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _j === void 0 ? void 0 : _j.pixelInterval,
140
141
  },
141
142
  position: 'bottom',
142
143
  plotIndex: 0,
@@ -166,7 +167,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
166
167
  width: get(xAxis, 'crosshair.width', axisCrosshairDefaults.width),
167
168
  opacity: get(xAxis, 'crosshair.opacity', axisCrosshairDefaults.opacity),
168
169
  },
169
- visible: get(xAxis, 'visible', true),
170
+ visible: isAxisVisible,
170
171
  order: xAxis === null || xAxis === void 0 ? void 0 : xAxis.order,
171
172
  rangeSlider: preparedRangeSlider,
172
173
  };
package/dist/cjs/types/chart/axis.d.ts CHANGED
@@ -214,6 +214,8 @@ export interface AxisPlotBand extends AxisPlot {
214
214
  *
215
215
  * Can be a number, a string (e.g., a category), or a timestamp if representing a date.
216
216
  * When representing a date, the value **must be a timestamp** (number of milliseconds since Unix epoch).
217
+ *
218
+ * If the value is `-Infinity`, it will be treated as the start of the axis.
217
219
  */
218
220
  from: number | string;
219
221
  /**
@@ -221,6 +223,8 @@ export interface AxisPlotBand extends AxisPlot {
221
223
  *
222
224
  * Can be a number, a string (e.g., a category), or a timestamp if representing a date.
223
225
  * When representing a date, the value **must be a timestamp** (number of milliseconds since Unix epoch).
226
+ *
227
+ * If the value is `Infinity`, it will be treated as the end of the axis.
224
228
  */
225
229
  to: number | string;
226
230
  }
package/dist/cjs/utils/chart/axis/common.js CHANGED
@@ -67,8 +67,9 @@ export const getAxisPlotsPosition = (axis, split, width = 0) => {
67
67
  export function getBandsPosition(args) {
68
68
  var _a, _b, _c;
69
69
  const { band, axisScale } = args;
70
- const scalePosTo = axisScale(band.to);
71
- const scalePosFrom = axisScale(band.from);
70
+ const range = axisScale.range();
71
+ const scalePosFrom = band.from === -Infinity ? range[0] : axisScale(band.from);
72
+ const scalePosTo = band.to === Infinity ? range[1] : axisScale(band.to);
72
73
  const isX = args.axis === 'x';
73
74
  if (scalePosTo !== undefined && scalePosFrom !== undefined) {
74
75
  return {
package/dist/esm/components/AxisX/AxisX.js CHANGED
@@ -11,20 +11,20 @@ export const AxisX = (props) => {
11
11
  const htmlLabels = preparedAxisData.ticks.map((d) => d.htmlLabel).filter(Boolean);
12
12
  React.useEffect(() => {
13
13
  if (!ref.current) {
14
- return;
14
+ return () => { };
15
15
  }
16
16
  const svgElement = select(ref.current);
17
17
  svgElement.selectAll('*').remove();
18
18
  let plotBeforeContainer = null;
19
19
  let plotAfterContainer = null;
20
20
  const plotDataAttr = 'data-plot-x';
21
+ const plotBandDataAttr = `data-plot-x-band-${preparedAxisData.id}`;
22
+ const plotLineDataAttr = `data-plot-x-line-${preparedAxisData.id}`;
21
23
  if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
22
24
  plotBeforeContainer = select(plotBeforeRef.current);
23
- plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
24
25
  }
25
26
  if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
26
27
  plotAfterContainer = select(plotAfterRef.current);
27
- plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
28
28
  }
29
29
  if (preparedAxisData.title) {
30
30
  svgElement
@@ -93,7 +93,6 @@ export const AxisX = (props) => {
93
93
  }
94
94
  });
95
95
  if (preparedAxisData.plotBands.length > 0) {
96
- const plotBandDataAttr = `data-plot-x-band-${preparedAxisData.id}`;
97
96
  const setPlotBands = (plotContainer, plotBands) => {
98
97
  if (!plotContainer || !plotBands.length) {
99
98
  return;
@@ -134,7 +133,6 @@ export const AxisX = (props) => {
134
133
  setPlotBands(plotAfterContainer, preparedAxisData.plotBands.filter((item) => item.layerPlacement === 'after'));
135
134
  }
136
135
  if (preparedAxisData.plotLines.length > 0) {
137
- const plotLineDataAttr = `data-plot-x-line-${preparedAxisData.id}`;
138
136
  const setPlotLines = (plotContainer, plotLines) => {
139
137
  if (!plotContainer || !plotLines.length) {
140
138
  return;
@@ -175,6 +173,16 @@ export const AxisX = (props) => {
175
173
  setPlotLines(plotBeforeContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'before'));
176
174
  setPlotLines(plotAfterContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'after'));
177
175
  }
176
+ return () => {
177
+ if (plotBeforeContainer) {
178
+ plotBeforeContainer.selectAll(`[${plotBandDataAttr}]`).remove();
179
+ plotBeforeContainer.selectAll(`[${plotLineDataAttr}]`).remove();
180
+ }
181
+ if (plotAfterContainer) {
182
+ plotAfterContainer.selectAll(`[${plotBandDataAttr}]`).remove();
183
+ plotAfterContainer.selectAll(`[${plotLineDataAttr}]`).remove();
184
+ }
185
+ };
178
186
  }, [lineGenerator, plotAfterRef, plotBeforeRef, preparedAxisData]);
179
187
  return (React.createElement(React.Fragment, null,
180
188
  React.createElement(HtmlLayer, { preparedData: { htmlElements: htmlLabels }, htmlLayout: htmlLayout }),
package/dist/esm/components/AxisY/AxisY.js CHANGED
@@ -17,20 +17,20 @@ export const AxisY = (props) => {
17
17
  React.useEffect(() => {
18
18
  var _a;
19
19
  if (!ref.current) {
20
- return;
20
+ return () => { };
21
21
  }
22
22
  const svgElement = select(ref.current);
23
23
  svgElement.selectAll('*').remove();
24
24
  let plotBeforeContainer = null;
25
25
  let plotAfterContainer = null;
26
26
  const plotDataAttr = 'data-plot-y';
27
+ const plotBandDataAttr = `data-plot-y-band-${preparedAxisData.id}`;
28
+ const plotLineDataAttr = `data-plot-y-line-${preparedAxisData.id}`;
27
29
  if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
28
30
  plotBeforeContainer = select(plotBeforeRef.current);
29
- plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
30
31
  }
31
32
  if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
32
33
  plotAfterContainer = select(plotAfterRef.current);
33
- plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
34
34
  }
35
35
  if (((_a = preparedAxisData.title) === null || _a === void 0 ? void 0 : _a.html) === false) {
36
36
  svgElement
@@ -99,7 +99,6 @@ export const AxisY = (props) => {
99
99
  }
100
100
  });
101
101
  if (preparedAxisData.plotBands.length > 0) {
102
- const plotBandDataAttr = `data-plot-y-band-${preparedAxisData.id}`;
103
102
  const setPlotBands = (plotContainer, plotBands) => {
104
103
  if (!plotContainer || !plotBands.length) {
105
104
  return;
@@ -140,7 +139,6 @@ export const AxisY = (props) => {
140
139
  setPlotBands(plotAfterContainer, preparedAxisData.plotBands.filter((item) => item.layerPlacement === 'after'));
141
140
  }
142
141
  if (preparedAxisData.plotLines.length > 0) {
143
- const plotLineDataAttr = `data-plot-y-line-${preparedAxisData.id}`;
144
142
  const setPlotLines = (plotContainer, plotLines) => {
145
143
  if (!plotContainer || !plotLines.length) {
146
144
  return;
@@ -181,6 +179,16 @@ export const AxisY = (props) => {
181
179
  setPlotLines(plotBeforeContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'before'));
182
180
  setPlotLines(plotAfterContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'after'));
183
181
  }
182
+ return () => {
183
+ if (plotBeforeContainer) {
184
+ plotBeforeContainer.selectAll(`[${plotBandDataAttr}]`).remove();
185
+ plotBeforeContainer.selectAll(`[${plotLineDataAttr}]`).remove();
186
+ }
187
+ if (plotAfterContainer) {
188
+ plotAfterContainer.selectAll(`[${plotBandDataAttr}]`).remove();
189
+ plotAfterContainer.selectAll(`[${plotLineDataAttr}]`).remove();
190
+ }
191
+ };
184
192
  }, [lineGenerator, plotAfterRef, plotBeforeRef, preparedAxisData]);
185
193
  return (React.createElement(React.Fragment, null,
186
194
  React.createElement(HtmlLayer, { preparedData: { htmlElements }, htmlLayout: htmlLayout }),
package/dist/esm/hooks/useAxis/x-axis.js CHANGED
@@ -60,12 +60,13 @@ function getMaxPaddingBySeries({ series }) {
60
60
  return 0.01;
61
61
  }
62
62
  export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth, }) => {
63
- var _a, _b, _c, _d, _e, _f, _g, _h;
63
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
64
64
  const hasAxisRelatedSeries = seriesData.some(isAxisRelatedSeries);
65
65
  if (!hasAxisRelatedSeries) {
66
66
  return Promise.resolve(null);
67
67
  }
68
- const titleText = get(xAxis, 'title.text', '');
68
+ const isAxisVisible = (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.visible) !== null && _a !== void 0 ? _a : true;
69
+ const titleText = isAxisVisible ? get(xAxis, 'title.text', '') : '';
69
70
  const titleStyle = Object.assign(Object.assign({}, xAxisTitleDefaults.style), get(xAxis, 'title.style'));
70
71
  const titleMaxRowsCount = get(xAxis, 'title.maxRowCount', xAxisTitleDefaults.maxRowCount);
71
72
  const estimatedTitleRows = (await wrapText({
@@ -77,18 +78,18 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
77
78
  labels: [titleText],
78
79
  style: titleStyle,
79
80
  });
80
- const isLabelsEnabled = (_b = (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : true;
81
+ const isLabelsEnabled = isAxisVisible && ((_c = (_b = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _b === void 0 ? void 0 : _b.enabled) !== null && _c !== void 0 ? _c : true);
81
82
  const labelsStyle = {
82
83
  fontSize: get(xAxis, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
83
84
  };
84
- const labelsHtml = (_d = (_c = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _c === void 0 ? void 0 : _c.html) !== null && _d !== void 0 ? _d : false;
85
+ const labelsHtml = (_e = (_d = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _d === void 0 ? void 0 : _d.html) !== null && _e !== void 0 ? _e : false;
85
86
  let labelsLineHeight = 0;
86
87
  if (isLabelsEnabled) {
87
88
  labelsLineHeight = labelsHtml
88
89
  ? getHorizontalHtmlTextHeight({ text: 'Tmp', style: labelsStyle })
89
90
  : getHorizontalSvgTextHeight({ text: 'Tmp', style: labelsStyle });
90
91
  }
91
- const shouldHideGrid = seriesData.some((s) => s.type === SERIES_TYPE.Heatmap);
92
+ const shouldHideGrid = isAxisVisible === false || seriesData.some((s) => s.type === SERIES_TYPE.Heatmap);
92
93
  const preparedRangeSlider = getPreparedRangeSlider({ xAxis });
93
94
  const maxPadding = preparedRangeSlider.enabled
94
95
  ? 0
@@ -106,7 +107,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
106
107
  width: 0,
107
108
  height: 0,
108
109
  lineHeight: labelsLineHeight,
109
- maxWidth: (_f = calculateNumericProperty({ base: width, value: (_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _e === void 0 ? void 0 : _e.maxWidth })) !== null && _f !== void 0 ? _f : axisLabelsDefaults.maxWidth,
110
+ maxWidth: (_g = calculateNumericProperty({ base: width, value: (_f = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _f === void 0 ? void 0 : _f.maxWidth })) !== null && _g !== void 0 ? _g : axisLabelsDefaults.maxWidth,
110
111
  html: labelsHtml,
111
112
  },
112
113
  lineColor: get(xAxis, 'lineColor'),
@@ -131,12 +132,12 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
131
132
  enabled: shouldHideGrid ? false : get(xAxis, 'grid.enabled', true),
132
133
  },
133
134
  ticks: {
134
- pixelInterval: ((_g = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _g === void 0 ? void 0 : _g.interval)
135
+ pixelInterval: ((_h = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _h === void 0 ? void 0 : _h.interval)
135
136
  ? calculateNumericProperty({
136
137
  base: width,
137
138
  value: xAxis.ticks.interval,
138
139
  })
139
- : (_h = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _h === void 0 ? void 0 : _h.pixelInterval,
140
+ : (_j = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _j === void 0 ? void 0 : _j.pixelInterval,
140
141
  },
141
142
  position: 'bottom',
142
143
  plotIndex: 0,
@@ -166,7 +167,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
166
167
  width: get(xAxis, 'crosshair.width', axisCrosshairDefaults.width),
167
168
  opacity: get(xAxis, 'crosshair.opacity', axisCrosshairDefaults.opacity),
168
169
  },
169
- visible: get(xAxis, 'visible', true),
170
+ visible: isAxisVisible,
170
171
  order: xAxis === null || xAxis === void 0 ? void 0 : xAxis.order,
171
172
  rangeSlider: preparedRangeSlider,
172
173
  };
package/dist/esm/types/chart/axis.d.ts CHANGED
@@ -214,6 +214,8 @@ export interface AxisPlotBand extends AxisPlot {
214
214
  *
215
215
  * Can be a number, a string (e.g., a category), or a timestamp if representing a date.
216
216
  * When representing a date, the value **must be a timestamp** (number of milliseconds since Unix epoch).
217
+ *
218
+ * If the value is `-Infinity`, it will be treated as the start of the axis.
217
219
  */
218
220
  from: number | string;
219
221
  /**
@@ -221,6 +223,8 @@ export interface AxisPlotBand extends AxisPlot {
221
223
  *
222
224
  * Can be a number, a string (e.g., a category), or a timestamp if representing a date.
223
225
  * When representing a date, the value **must be a timestamp** (number of milliseconds since Unix epoch).
226
+ *
227
+ * If the value is `Infinity`, it will be treated as the end of the axis.
224
228
  */
225
229
  to: number | string;
226
230
  }
package/dist/esm/utils/chart/axis/common.js CHANGED
@@ -67,8 +67,9 @@ export const getAxisPlotsPosition = (axis, split, width = 0) => {
67
67
  export function getBandsPosition(args) {
68
68
  var _a, _b, _c;
69
69
  const { band, axisScale } = args;
70
- const scalePosTo = axisScale(band.to);
71
- const scalePosFrom = axisScale(band.from);
70
+ const range = axisScale.range();
71
+ const scalePosFrom = band.from === -Infinity ? range[0] : axisScale(band.from);
72
+ const scalePosTo = band.to === Infinity ? range[1] : axisScale(band.to);
72
73
  const isX = args.axis === 'x';
73
74
  if (scalePosTo !== undefined && scalePosFrom !== undefined) {
74
75
  return {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/charts",
3
- "version": "1.27.4",
3
+ "version": "1.28.0",
4
4
  "description": "React component used to render charts",
5
5
  "license": "MIT",
6
6
  "main": "dist/cjs/index.js",