@gravity-ui/charts 1.10.0 → 1.10.2

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 (9) hide show
  1. package/dist/cjs/components/Axis/AxisX.js +3 -1
  2. package/dist/cjs/components/Legend/index.js +10 -2
  3. package/dist/cjs/utils/chart/axis-generators/bottom.js +5 -4
  4. package/dist/cjs/utils/chart/text.js +8 -1
  5. package/dist/esm/components/Axis/AxisX.js +3 -1
  6. package/dist/esm/components/Legend/index.js +10 -2
  7. package/dist/esm/utils/chart/axis-generators/bottom.js +5 -4
  8. package/dist/esm/utils/chart/text.js +8 -1
  9. package/package.json +1 -1
package/dist/cjs/components/Axis/AxisX.js CHANGED
@@ -99,9 +99,11 @@ export const AxisX = React.memo(function AxisX(props) {
99
99
  // add an axis header if necessary
100
100
  if (axis.title.text) {
101
101
  const titleRows = await getAxisTitleRows({ axis, textMaxWidth: width });
102
+ const titleClassName = b('title');
103
+ svgElement.selectAll(`.${titleClassName}`).remove();
102
104
  svgElement
103
105
  .append('text')
104
- .attr('class', b('title'))
106
+ .attr('class', titleClassName)
105
107
  .attr('transform', () => {
106
108
  const { x, y } = getTitlePosition({ axis, width, rowCount: titleRows.length });
107
109
  return `translate(${x}, ${y})`;
package/dist/cjs/components/Legend/index.js CHANGED
@@ -149,6 +149,7 @@ export const Legend = (props) => {
149
149
  }
150
150
  const svgElement = select(ref.current);
151
151
  svgElement.selectAll('*').remove();
152
+ svgElement.style('opacity', 0);
152
153
  const htmlElement = select(htmlLayout);
153
154
  htmlElement.selectAll('[data-legend]').remove();
154
155
  const htmlContainer = legend.html
@@ -311,8 +312,11 @@ export const Legend = (props) => {
311
312
  },
312
313
  });
313
314
  const tickTop = legend.title.height + legend.title.margin + rectHeight;
315
+ const legendAxisClassname = b('axis');
316
+ svgElement.selectAll(`.${legendAxisClassname}`).remove();
314
317
  svgElement
315
318
  .append('g')
319
+ .attr('class', legendAxisClassname)
316
320
  .attr('transform', `translate(0, ${tickTop})`)
317
321
  .call(xAxisGenerator);
318
322
  legendWidth = legend.width;
@@ -338,9 +342,11 @@ export const Legend = (props) => {
338
342
  break;
339
343
  }
340
344
  }
345
+ const legendTitleClassname = b('title');
346
+ svgElement.selectAll(`.${legendTitleClassname}`).remove();
341
347
  svgElement
342
348
  .append('g')
343
- .attr('class', b('title'))
349
+ .attr('class', legendTitleClassname)
344
350
  .append('text')
345
351
  .attr('dx', dx)
346
352
  .attr('font-weight', (_f = legend.title.style.fontWeight) !== null && _f !== void 0 ? _f : null)
@@ -355,7 +361,9 @@ export const Legend = (props) => {
355
361
  offsetWidth: config.offset.left,
356
362
  contentWidth: legendWidth,
357
363
  });
358
- svgElement.attr('transform', `translate(${[left, config.offset.top].join(',')})`);
364
+ svgElement
365
+ .attr('transform', `translate(${[left, config.offset.top].join(',')})`)
366
+ .style('opacity', 1);
359
367
  htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${left}px, ${config.offset.top}px)`);
360
368
  }
361
369
  prepareLegend();
package/dist/cjs/utils/chart/axis-generators/bottom.js CHANGED
@@ -26,11 +26,13 @@ export async function axisBottom(args) {
26
26
  })).maxHeight;
27
27
  return function (selection) {
28
28
  var _a, _b, _c;
29
+ selection.selectAll('.tick, .domain').remove();
29
30
  const rect = (_a = selection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
30
31
  const x = (rect === null || rect === void 0 ? void 0 : rect.x) || 0;
31
32
  const right = x + domain.size;
32
33
  const top = -((_c = (_b = tickItems === null || tickItems === void 0 ? void 0 : tickItems[0]) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : 0);
33
- let transform = `translate(0, ${labelHeight + labelsMargin - top}px)`;
34
+ const translateY = labelHeight + labelsMargin - top;
35
+ let transform = `translate(0, ${translateY}px)`;
34
36
  if (rotation) {
35
37
  const labelsOffsetTop = labelHeight * calculateCos(rotation) + labelsMargin - top;
36
38
  let labelsOffsetLeft = calculateSin(rotation) * labelHeight;
@@ -44,7 +46,6 @@ export async function axisBottom(args) {
44
46
  tickPath.moveTo(0, start);
45
47
  tickPath.lineTo(0, end);
46
48
  });
47
- selection.selectAll('.tick').remove();
48
49
  const ticks = selection
49
50
  .selectAll('.tick')
50
51
  .data(values)
@@ -129,8 +130,8 @@ export async function axisBottom(args) {
129
130
  const lackingSpace = Math.max(0, currentElementPosition.right - right);
130
131
  if (lackingSpace) {
131
132
  const remainSpace = right - ((prevElementPosition === null || prevElementPosition === void 0 ? void 0 : prevElementPosition.right) || 0) - labelsPaddings;
132
- const translateX = currentElementPosition.width / 2 - lackingSpace;
133
- text.attr('text-anchor', 'end').attr('transform', `translate(${translateX},0)`);
133
+ const translateX = -lackingSpace;
134
+ text.style('transform', `translate(${translateX}px,${translateY}px)`);
134
135
  setEllipsisForOverflowText(text, remainSpace);
135
136
  }
136
137
  }
package/dist/cjs/utils/chart/text.js CHANGED
@@ -92,7 +92,14 @@ export async function getLabelsSize({ labels, style, rotation, html, }) {
92
92
  if (!labels.filter(Boolean).length) {
93
93
  return { maxHeight: 0, maxWidth: 0 };
94
94
  }
95
- const container = select(document.body).append('div');
95
+ const container = select(document.body)
96
+ .append('div')
97
+ .style('visibility', 'hidden')
98
+ .style('position', 'absolute')
99
+ .style('top', '-200vw')
100
+ .style('left', '-200vwx')
101
+ .style('width', '100vw')
102
+ .style('height', '100vh');
96
103
  const result = { maxHeight: 0, maxWidth: 0 };
97
104
  let labelWrapper;
98
105
  if (html) {
package/dist/esm/components/Axis/AxisX.js CHANGED
@@ -99,9 +99,11 @@ export const AxisX = React.memo(function AxisX(props) {
99
99
  // add an axis header if necessary
100
100
  if (axis.title.text) {
101
101
  const titleRows = await getAxisTitleRows({ axis, textMaxWidth: width });
102
+ const titleClassName = b('title');
103
+ svgElement.selectAll(`.${titleClassName}`).remove();
102
104
  svgElement
103
105
  .append('text')
104
- .attr('class', b('title'))
106
+ .attr('class', titleClassName)
105
107
  .attr('transform', () => {
106
108
  const { x, y } = getTitlePosition({ axis, width, rowCount: titleRows.length });
107
109
  return `translate(${x}, ${y})`;
package/dist/esm/components/Legend/index.js CHANGED
@@ -149,6 +149,7 @@ export const Legend = (props) => {
149
149
  }
150
150
  const svgElement = select(ref.current);
151
151
  svgElement.selectAll('*').remove();
152
+ svgElement.style('opacity', 0);
152
153
  const htmlElement = select(htmlLayout);
153
154
  htmlElement.selectAll('[data-legend]').remove();
154
155
  const htmlContainer = legend.html
@@ -311,8 +312,11 @@ export const Legend = (props) => {
311
312
  },
312
313
  });
313
314
  const tickTop = legend.title.height + legend.title.margin + rectHeight;
315
+ const legendAxisClassname = b('axis');
316
+ svgElement.selectAll(`.${legendAxisClassname}`).remove();
314
317
  svgElement
315
318
  .append('g')
319
+ .attr('class', legendAxisClassname)
316
320
  .attr('transform', `translate(0, ${tickTop})`)
317
321
  .call(xAxisGenerator);
318
322
  legendWidth = legend.width;
@@ -338,9 +342,11 @@ export const Legend = (props) => {
338
342
  break;
339
343
  }
340
344
  }
345
+ const legendTitleClassname = b('title');
346
+ svgElement.selectAll(`.${legendTitleClassname}`).remove();
341
347
  svgElement
342
348
  .append('g')
343
- .attr('class', b('title'))
349
+ .attr('class', legendTitleClassname)
344
350
  .append('text')
345
351
  .attr('dx', dx)
346
352
  .attr('font-weight', (_f = legend.title.style.fontWeight) !== null && _f !== void 0 ? _f : null)
@@ -355,7 +361,9 @@ export const Legend = (props) => {
355
361
  offsetWidth: config.offset.left,
356
362
  contentWidth: legendWidth,
357
363
  });
358
- svgElement.attr('transform', `translate(${[left, config.offset.top].join(',')})`);
364
+ svgElement
365
+ .attr('transform', `translate(${[left, config.offset.top].join(',')})`)
366
+ .style('opacity', 1);
359
367
  htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${left}px, ${config.offset.top}px)`);
360
368
  }
361
369
  prepareLegend();
package/dist/esm/utils/chart/axis-generators/bottom.js CHANGED
@@ -26,11 +26,13 @@ export async function axisBottom(args) {
26
26
  })).maxHeight;
27
27
  return function (selection) {
28
28
  var _a, _b, _c;
29
+ selection.selectAll('.tick, .domain').remove();
29
30
  const rect = (_a = selection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
30
31
  const x = (rect === null || rect === void 0 ? void 0 : rect.x) || 0;
31
32
  const right = x + domain.size;
32
33
  const top = -((_c = (_b = tickItems === null || tickItems === void 0 ? void 0 : tickItems[0]) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : 0);
33
- let transform = `translate(0, ${labelHeight + labelsMargin - top}px)`;
34
+ const translateY = labelHeight + labelsMargin - top;
35
+ let transform = `translate(0, ${translateY}px)`;
34
36
  if (rotation) {
35
37
  const labelsOffsetTop = labelHeight * calculateCos(rotation) + labelsMargin - top;
36
38
  let labelsOffsetLeft = calculateSin(rotation) * labelHeight;
@@ -44,7 +46,6 @@ export async function axisBottom(args) {
44
46
  tickPath.moveTo(0, start);
45
47
  tickPath.lineTo(0, end);
46
48
  });
47
- selection.selectAll('.tick').remove();
48
49
  const ticks = selection
49
50
  .selectAll('.tick')
50
51
  .data(values)
@@ -129,8 +130,8 @@ export async function axisBottom(args) {
129
130
  const lackingSpace = Math.max(0, currentElementPosition.right - right);
130
131
  if (lackingSpace) {
131
132
  const remainSpace = right - ((prevElementPosition === null || prevElementPosition === void 0 ? void 0 : prevElementPosition.right) || 0) - labelsPaddings;
132
- const translateX = currentElementPosition.width / 2 - lackingSpace;
133
- text.attr('text-anchor', 'end').attr('transform', `translate(${translateX},0)`);
133
+ const translateX = -lackingSpace;
134
+ text.style('transform', `translate(${translateX}px,${translateY}px)`);
134
135
  setEllipsisForOverflowText(text, remainSpace);
135
136
  }
136
137
  }
package/dist/esm/utils/chart/text.js CHANGED
@@ -92,7 +92,14 @@ export async function getLabelsSize({ labels, style, rotation, html, }) {
92
92
  if (!labels.filter(Boolean).length) {
93
93
  return { maxHeight: 0, maxWidth: 0 };
94
94
  }
95
- const container = select(document.body).append('div');
95
+ const container = select(document.body)
96
+ .append('div')
97
+ .style('visibility', 'hidden')
98
+ .style('position', 'absolute')
99
+ .style('top', '-200vw')
100
+ .style('left', '-200vwx')
101
+ .style('width', '100vw')
102
+ .style('height', '100vh');
96
103
  const result = { maxHeight: 0, maxWidth: 0 };
97
104
  let labelWrapper;
98
105
  if (html) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/charts",
3
- "version": "1.10.0",
3
+ "version": "1.10.2",
4
4
  "description": "React component used to render charts",
5
5
  "license": "MIT",
6
6
  "main": "dist/cjs/index.js",