@gravity-ui/charts 1.34.3 → 1.34.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.
@@ -22,7 +22,7 @@ async function prepareDataLabels(series) {
22
22
  const style = Object.assign({}, DEFAULT_DATALABELS_STYLE, (_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.style);
23
23
  const html = get(series, 'dataLabels.html', false);
24
24
  const labels = enabled
25
- ? series.data.map((d) => getFormattedValue(Object.assign({ value: d.label || d.x }, series.dataLabels)))
25
+ ? series.data.map((d) => { var _a; return getFormattedValue(Object.assign({ value: (_a = d.label) !== null && _a !== void 0 ? _a : d.x }, series.dataLabels)); })
26
26
  : [];
27
27
  const { maxHeight = 0, maxWidth = 0 } = await getLabelsSize({
28
28
  labels,
@@ -28,6 +28,7 @@ function getXValues(series, xAxis, xScale) {
28
28
  return Array.from(xValues);
29
29
  }
30
30
  async function prepareDataLabels({ series, points, xMax, yAxisTop, }) {
31
+ var _a;
31
32
  const svgLabels = [];
32
33
  const htmlLabels = [];
33
34
  const getTextSize = getTextSizeFn({ style: series.dataLabels.style });
@@ -36,7 +37,7 @@ async function prepareDataLabels({ series, points, xMax, yAxisTop, }) {
36
37
  if (point.y === null) {
37
38
  continue;
38
39
  }
39
- const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, series.dataLabels));
40
+ const text = getFormattedValue(Object.assign({ value: (_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y }, series.dataLabels));
40
41
  if (series.dataLabels.html) {
41
42
  const size = await getLabelsSize({
42
43
  labels: [text],
@@ -73,7 +74,7 @@ async function prepareDataLabels({ series, points, xMax, yAxisTop, }) {
73
74
  return { svgLabels, htmlLabels };
74
75
  }
75
76
  export const prepareAreaData = async (args) => {
76
- var _a, _b;
77
+ var _a, _b, _c;
77
78
  const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isOutsideBounds, isRangeSlider, } = args;
78
79
  const [_xMin, xRangeMax] = xScale.range();
79
80
  const xMax = xRangeMax;
@@ -218,13 +219,6 @@ export const prepareAreaData = async (args) => {
218
219
  }
219
220
  return pointsAcc;
220
221
  }, []);
221
- const labels = [];
222
- const htmlElements = [];
223
- if (s.dataLabels.enabled && !isRangeSlider) {
224
- const labelsData = await prepareDataLabels({ series: s, points, xMax, yAxisTop });
225
- labels.push(...labelsData.svgLabels);
226
- htmlElements.push(...labelsData.htmlLabels);
227
- }
228
222
  let markers = [];
229
223
  if (s.marker.states.normal.enabled || s.marker.states.hover.enabled) {
230
224
  markers = points.reduce((markersAcc, p) => {
@@ -243,7 +237,7 @@ export const prepareAreaData = async (args) => {
243
237
  seriesStackData.push({
244
238
  points,
245
239
  markers,
246
- labels,
240
+ labels: [],
247
241
  color: s.color,
248
242
  opacity: s.opacity,
249
243
  width: s.lineWidth,
@@ -251,10 +245,10 @@ export const prepareAreaData = async (args) => {
251
245
  hovered: false,
252
246
  active: true,
253
247
  id: s.id,
254
- htmlElements,
248
+ htmlElements: [],
255
249
  });
256
250
  }
257
- if (series.some((s) => s.stacking === 'percent')) {
251
+ if (seriesStack.some((s) => s.stacking === 'percent')) {
258
252
  xValues.forEach(([x], index) => {
259
253
  var _a;
260
254
  const stackHeight = ((_a = positiveStackValues.get(x)) === null || _a === void 0 ? void 0 : _a.prev) || 0;
@@ -264,12 +258,33 @@ export const prepareAreaData = async (args) => {
264
258
  const point = item.points[index];
265
259
  if (point.y !== null && point.y !== undefined) {
266
260
  const height = (point.y0 - point.y) * ratio;
267
- point.y0 = plotHeight - height - acc;
268
- point.y = point.y0 + height;
269
- acc += height;
261
+ const nextAcc = acc + height;
262
+ point.y0 = plotHeight - acc;
263
+ point.y = plotHeight - nextAcc;
264
+ acc = nextAcc;
270
265
  }
271
266
  });
272
267
  });
268
+ seriesStackData.forEach((item) => {
269
+ item.markers.forEach((marker) => {
270
+ marker.clipped = isOutsideBounds(marker.point.x, marker.point.y);
271
+ });
272
+ });
273
+ }
274
+ for (let itemIndex = 0; itemIndex < seriesStackData.length; itemIndex++) {
275
+ const item = seriesStackData[itemIndex];
276
+ const currentYAxis = yAxis[item.series.yAxis];
277
+ const itemYAxisTop = ((_c = split.plots[currentYAxis.plotIndex]) === null || _c === void 0 ? void 0 : _c.top) || 0;
278
+ if (item.series.dataLabels.enabled && !isRangeSlider) {
279
+ const labelsData = await prepareDataLabels({
280
+ series: item.series,
281
+ points: item.points,
282
+ xMax,
283
+ yAxisTop: itemYAxisTop,
284
+ });
285
+ item.labels.push(...labelsData.svgLabels);
286
+ item.htmlElements.push(...labelsData.htmlLabels);
287
+ }
273
288
  }
274
289
  result.push(...seriesStackData);
275
290
  }
@@ -6,10 +6,11 @@ import { getSeriesStackId } from '../../useSeries/utils';
6
6
  import { getBarXLayout } from '../../utils/bar-x';
7
7
  const isSeriesDataValid = (d) => d.y !== null;
8
8
  async function getLabelData(d) {
9
+ var _a;
9
10
  if (!d.series.dataLabels.enabled) {
10
11
  return undefined;
11
12
  }
12
- const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.y }, d.series.dataLabels));
13
+ const text = getFormattedValue(Object.assign({ value: (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.y }, d.series.dataLabels));
13
14
  const style = d.series.dataLabels.style;
14
15
  const html = d.series.dataLabels.html;
15
16
  const { maxHeight: height, maxWidth: width } = await getLabelsSize({
@@ -4,7 +4,7 @@ import { filterOverlappingLabels, getHtmlLabelConstraintedPosition, getLabelsSiz
4
4
  import { getFormattedValue } from '../../../utils/chart/format';
5
5
  import { getBarYLayout, groupBarYDataByYValue } from '../../utils';
6
6
  export async function prepareBarYData(args) {
7
- var _a;
7
+ var _a, _b;
8
8
  const { boundsHeight, boundsWidth, series, seriesOptions, xAxis, yAxis, xScale, yScale: [yScale], } = args;
9
9
  const stackGap = seriesOptions['bar-y'].stackGap;
10
10
  const xLinearScale = xScale;
@@ -139,7 +139,7 @@ export async function prepareBarYData(args) {
139
139
  const dataLabels = prepared.series.dataLabels;
140
140
  if (dataLabels.enabled) {
141
141
  const data = prepared.data;
142
- const content = getFormattedValue(Object.assign({ value: data.label || data.x }, dataLabels));
142
+ const content = getFormattedValue(Object.assign({ value: (_a = data.label) !== null && _a !== void 0 ? _a : data.x }, dataLabels));
143
143
  const y = prepared.y + prepared.height / 2;
144
144
  if (dataLabels.html) {
145
145
  const { maxHeight: height, maxWidth: width } = await getLabelsSize({
@@ -195,7 +195,7 @@ export async function prepareBarYData(args) {
195
195
  }
196
196
  }
197
197
  }
198
- const allowOverlap = (_a = result[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap;
198
+ const allowOverlap = (_b = result[0]) === null || _b === void 0 ? void 0 : _b.series.dataLabels.allowOverlap;
199
199
  if (labels.length && !allowOverlap) {
200
200
  labels = filterOverlappingLabels(labels);
201
201
  }
@@ -2,7 +2,8 @@ import { getLabelsSize, getTextSizeFn } from '../../../utils';
2
2
  import { getFormattedValue } from '../../../utils/chart/format';
3
3
  import { getXValue, getYValue } from '../utils';
4
4
  async function getHtmlLabel(point, series, xMax) {
5
- const content = String(point.data.label || point.data.y);
5
+ var _a;
6
+ const content = String((_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y);
6
7
  const size = await getLabelsSize({ labels: [content], html: true });
7
8
  return {
8
9
  x: Math.min(xMax - size.maxWidth, Math.max(0, point.x)),
@@ -13,7 +14,7 @@ async function getHtmlLabel(point, series, xMax) {
13
14
  };
14
15
  }
15
16
  export const prepareLineData = async (args) => {
16
- var _a, _b, _c;
17
+ var _a, _b, _c, _d;
17
18
  const { series, xAxis, yAxis, xScale, yScale, split, isOutsideBounds, isRangeSlider } = args;
18
19
  const [_xMin, xRangeMax] = xScale.range();
19
20
  const xMax = xRangeMax;
@@ -60,7 +61,7 @@ export const prepareLineData = async (args) => {
60
61
  for (let index = 0; index < points.length; index++) {
61
62
  const point = points[index];
62
63
  if (point.y !== null && point.x !== null) {
63
- const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, s.dataLabels));
64
+ const text = getFormattedValue(Object.assign({ value: (_b = point.data.label) !== null && _b !== void 0 ? _b : point.data.y }, s.dataLabels));
64
65
  const labelSize = await getTextSize(text);
65
66
  const style = s.dataLabels.style;
66
67
  const y = Math.max(yAxisTop, point.y - s.dataLabels.padding - labelSize.height);
@@ -105,11 +106,11 @@ export const prepareLineData = async (args) => {
105
106
  id: s.id,
106
107
  htmlElements,
107
108
  color: s.color,
108
- lineWidth: (_b = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _b !== void 0 ? _b : s.lineWidth,
109
+ lineWidth: (_c = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _c !== void 0 ? _c : s.lineWidth,
109
110
  dashStyle: s.dashStyle,
110
111
  linecap: s.linecap,
111
112
  linejoin: s.linejoin,
112
- opacity: (_c = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _c !== void 0 ? _c : s.opacity,
113
+ opacity: (_d = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _d !== void 0 ? _d : s.opacity,
113
114
  };
114
115
  acc.push(result);
115
116
  }
@@ -82,6 +82,7 @@ export function preparePieData(args) {
82
82
  return data;
83
83
  };
84
84
  const getLabels = async ({ series }) => {
85
+ var _a;
85
86
  const { dataLabels } = series[0];
86
87
  if (!dataLabels.enabled) {
87
88
  return {};
@@ -90,7 +91,7 @@ export function preparePieData(args) {
90
91
  const acc = {};
91
92
  for (let i = 0; i < series.length; i++) {
92
93
  const d = series[i];
93
- const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.value }, d.dataLabels));
94
+ const text = getFormattedValue(Object.assign({ value: (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.value }, d.dataLabels));
94
95
  let labelWidth = 0;
95
96
  let labelHeight = 0;
96
97
  if (dataLabels.html) {
@@ -22,7 +22,7 @@ async function prepareDataLabels(series) {
22
22
  const style = Object.assign({}, DEFAULT_DATALABELS_STYLE, (_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.style);
23
23
  const html = get(series, 'dataLabels.html', false);
24
24
  const labels = enabled
25
- ? series.data.map((d) => getFormattedValue(Object.assign({ value: d.label || d.x }, series.dataLabels)))
25
+ ? series.data.map((d) => { var _a; return getFormattedValue(Object.assign({ value: (_a = d.label) !== null && _a !== void 0 ? _a : d.x }, series.dataLabels)); })
26
26
  : [];
27
27
  const { maxHeight = 0, maxWidth = 0 } = await getLabelsSize({
28
28
  labels,
@@ -28,6 +28,7 @@ function getXValues(series, xAxis, xScale) {
28
28
  return Array.from(xValues);
29
29
  }
30
30
  async function prepareDataLabels({ series, points, xMax, yAxisTop, }) {
31
+ var _a;
31
32
  const svgLabels = [];
32
33
  const htmlLabels = [];
33
34
  const getTextSize = getTextSizeFn({ style: series.dataLabels.style });
@@ -36,7 +37,7 @@ async function prepareDataLabels({ series, points, xMax, yAxisTop, }) {
36
37
  if (point.y === null) {
37
38
  continue;
38
39
  }
39
- const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, series.dataLabels));
40
+ const text = getFormattedValue(Object.assign({ value: (_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y }, series.dataLabels));
40
41
  if (series.dataLabels.html) {
41
42
  const size = await getLabelsSize({
42
43
  labels: [text],
@@ -73,7 +74,7 @@ async function prepareDataLabels({ series, points, xMax, yAxisTop, }) {
73
74
  return { svgLabels, htmlLabels };
74
75
  }
75
76
  export const prepareAreaData = async (args) => {
76
- var _a, _b;
77
+ var _a, _b, _c;
77
78
  const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isOutsideBounds, isRangeSlider, } = args;
78
79
  const [_xMin, xRangeMax] = xScale.range();
79
80
  const xMax = xRangeMax;
@@ -218,13 +219,6 @@ export const prepareAreaData = async (args) => {
218
219
  }
219
220
  return pointsAcc;
220
221
  }, []);
221
- const labels = [];
222
- const htmlElements = [];
223
- if (s.dataLabels.enabled && !isRangeSlider) {
224
- const labelsData = await prepareDataLabels({ series: s, points, xMax, yAxisTop });
225
- labels.push(...labelsData.svgLabels);
226
- htmlElements.push(...labelsData.htmlLabels);
227
- }
228
222
  let markers = [];
229
223
  if (s.marker.states.normal.enabled || s.marker.states.hover.enabled) {
230
224
  markers = points.reduce((markersAcc, p) => {
@@ -243,7 +237,7 @@ export const prepareAreaData = async (args) => {
243
237
  seriesStackData.push({
244
238
  points,
245
239
  markers,
246
- labels,
240
+ labels: [],
247
241
  color: s.color,
248
242
  opacity: s.opacity,
249
243
  width: s.lineWidth,
@@ -251,10 +245,10 @@ export const prepareAreaData = async (args) => {
251
245
  hovered: false,
252
246
  active: true,
253
247
  id: s.id,
254
- htmlElements,
248
+ htmlElements: [],
255
249
  });
256
250
  }
257
- if (series.some((s) => s.stacking === 'percent')) {
251
+ if (seriesStack.some((s) => s.stacking === 'percent')) {
258
252
  xValues.forEach(([x], index) => {
259
253
  var _a;
260
254
  const stackHeight = ((_a = positiveStackValues.get(x)) === null || _a === void 0 ? void 0 : _a.prev) || 0;
@@ -264,12 +258,33 @@ export const prepareAreaData = async (args) => {
264
258
  const point = item.points[index];
265
259
  if (point.y !== null && point.y !== undefined) {
266
260
  const height = (point.y0 - point.y) * ratio;
267
- point.y0 = plotHeight - height - acc;
268
- point.y = point.y0 + height;
269
- acc += height;
261
+ const nextAcc = acc + height;
262
+ point.y0 = plotHeight - acc;
263
+ point.y = plotHeight - nextAcc;
264
+ acc = nextAcc;
270
265
  }
271
266
  });
272
267
  });
268
+ seriesStackData.forEach((item) => {
269
+ item.markers.forEach((marker) => {
270
+ marker.clipped = isOutsideBounds(marker.point.x, marker.point.y);
271
+ });
272
+ });
273
+ }
274
+ for (let itemIndex = 0; itemIndex < seriesStackData.length; itemIndex++) {
275
+ const item = seriesStackData[itemIndex];
276
+ const currentYAxis = yAxis[item.series.yAxis];
277
+ const itemYAxisTop = ((_c = split.plots[currentYAxis.plotIndex]) === null || _c === void 0 ? void 0 : _c.top) || 0;
278
+ if (item.series.dataLabels.enabled && !isRangeSlider) {
279
+ const labelsData = await prepareDataLabels({
280
+ series: item.series,
281
+ points: item.points,
282
+ xMax,
283
+ yAxisTop: itemYAxisTop,
284
+ });
285
+ item.labels.push(...labelsData.svgLabels);
286
+ item.htmlElements.push(...labelsData.htmlLabels);
287
+ }
273
288
  }
274
289
  result.push(...seriesStackData);
275
290
  }
@@ -6,10 +6,11 @@ import { getSeriesStackId } from '../../useSeries/utils';
6
6
  import { getBarXLayout } from '../../utils/bar-x';
7
7
  const isSeriesDataValid = (d) => d.y !== null;
8
8
  async function getLabelData(d) {
9
+ var _a;
9
10
  if (!d.series.dataLabels.enabled) {
10
11
  return undefined;
11
12
  }
12
- const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.y }, d.series.dataLabels));
13
+ const text = getFormattedValue(Object.assign({ value: (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.y }, d.series.dataLabels));
13
14
  const style = d.series.dataLabels.style;
14
15
  const html = d.series.dataLabels.html;
15
16
  const { maxHeight: height, maxWidth: width } = await getLabelsSize({
@@ -4,7 +4,7 @@ import { filterOverlappingLabels, getHtmlLabelConstraintedPosition, getLabelsSiz
4
4
  import { getFormattedValue } from '../../../utils/chart/format';
5
5
  import { getBarYLayout, groupBarYDataByYValue } from '../../utils';
6
6
  export async function prepareBarYData(args) {
7
- var _a;
7
+ var _a, _b;
8
8
  const { boundsHeight, boundsWidth, series, seriesOptions, xAxis, yAxis, xScale, yScale: [yScale], } = args;
9
9
  const stackGap = seriesOptions['bar-y'].stackGap;
10
10
  const xLinearScale = xScale;
@@ -139,7 +139,7 @@ export async function prepareBarYData(args) {
139
139
  const dataLabels = prepared.series.dataLabels;
140
140
  if (dataLabels.enabled) {
141
141
  const data = prepared.data;
142
- const content = getFormattedValue(Object.assign({ value: data.label || data.x }, dataLabels));
142
+ const content = getFormattedValue(Object.assign({ value: (_a = data.label) !== null && _a !== void 0 ? _a : data.x }, dataLabels));
143
143
  const y = prepared.y + prepared.height / 2;
144
144
  if (dataLabels.html) {
145
145
  const { maxHeight: height, maxWidth: width } = await getLabelsSize({
@@ -195,7 +195,7 @@ export async function prepareBarYData(args) {
195
195
  }
196
196
  }
197
197
  }
198
- const allowOverlap = (_a = result[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap;
198
+ const allowOverlap = (_b = result[0]) === null || _b === void 0 ? void 0 : _b.series.dataLabels.allowOverlap;
199
199
  if (labels.length && !allowOverlap) {
200
200
  labels = filterOverlappingLabels(labels);
201
201
  }
@@ -2,7 +2,8 @@ import { getLabelsSize, getTextSizeFn } from '../../../utils';
2
2
  import { getFormattedValue } from '../../../utils/chart/format';
3
3
  import { getXValue, getYValue } from '../utils';
4
4
  async function getHtmlLabel(point, series, xMax) {
5
- const content = String(point.data.label || point.data.y);
5
+ var _a;
6
+ const content = String((_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y);
6
7
  const size = await getLabelsSize({ labels: [content], html: true });
7
8
  return {
8
9
  x: Math.min(xMax - size.maxWidth, Math.max(0, point.x)),
@@ -13,7 +14,7 @@ async function getHtmlLabel(point, series, xMax) {
13
14
  };
14
15
  }
15
16
  export const prepareLineData = async (args) => {
16
- var _a, _b, _c;
17
+ var _a, _b, _c, _d;
17
18
  const { series, xAxis, yAxis, xScale, yScale, split, isOutsideBounds, isRangeSlider } = args;
18
19
  const [_xMin, xRangeMax] = xScale.range();
19
20
  const xMax = xRangeMax;
@@ -60,7 +61,7 @@ export const prepareLineData = async (args) => {
60
61
  for (let index = 0; index < points.length; index++) {
61
62
  const point = points[index];
62
63
  if (point.y !== null && point.x !== null) {
63
- const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, s.dataLabels));
64
+ const text = getFormattedValue(Object.assign({ value: (_b = point.data.label) !== null && _b !== void 0 ? _b : point.data.y }, s.dataLabels));
64
65
  const labelSize = await getTextSize(text);
65
66
  const style = s.dataLabels.style;
66
67
  const y = Math.max(yAxisTop, point.y - s.dataLabels.padding - labelSize.height);
@@ -105,11 +106,11 @@ export const prepareLineData = async (args) => {
105
106
  id: s.id,
106
107
  htmlElements,
107
108
  color: s.color,
108
- lineWidth: (_b = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _b !== void 0 ? _b : s.lineWidth,
109
+ lineWidth: (_c = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _c !== void 0 ? _c : s.lineWidth,
109
110
  dashStyle: s.dashStyle,
110
111
  linecap: s.linecap,
111
112
  linejoin: s.linejoin,
112
- opacity: (_c = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _c !== void 0 ? _c : s.opacity,
113
+ opacity: (_d = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _d !== void 0 ? _d : s.opacity,
113
114
  };
114
115
  acc.push(result);
115
116
  }
@@ -82,6 +82,7 @@ export function preparePieData(args) {
82
82
  return data;
83
83
  };
84
84
  const getLabels = async ({ series }) => {
85
+ var _a;
85
86
  const { dataLabels } = series[0];
86
87
  if (!dataLabels.enabled) {
87
88
  return {};
@@ -90,7 +91,7 @@ export function preparePieData(args) {
90
91
  const acc = {};
91
92
  for (let i = 0; i < series.length; i++) {
92
93
  const d = series[i];
93
- const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.value }, d.dataLabels));
94
+ const text = getFormattedValue(Object.assign({ value: (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.value }, d.dataLabels));
94
95
  let labelWidth = 0;
95
96
  let labelHeight = 0;
96
97
  if (dataLabels.html) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/charts",
3
- "version": "1.34.3",
3
+ "version": "1.34.5",
4
4
  "description": "A flexible JavaScript library for data visualization and chart rendering using React",
5
5
  "license": "MIT",
6
6
  "main": "dist/cjs/index.js",