@gravity-ui/charts 1.10.0 → 1.10.1

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 +7 -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 +7 -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
@@ -338,9 +339,11 @@ export const Legend = (props) => {
338
339
  break;
339
340
  }
340
341
  }
342
+ const legendTitleClassname = b('title');
343
+ svgElement.selectAll(`.${legendTitleClassname}`).remove();
341
344
  svgElement
342
345
  .append('g')
343
- .attr('class', b('title'))
346
+ .attr('class', legendTitleClassname)
344
347
  .append('text')
345
348
  .attr('dx', dx)
346
349
  .attr('font-weight', (_f = legend.title.style.fontWeight) !== null && _f !== void 0 ? _f : null)
@@ -355,7 +358,9 @@ export const Legend = (props) => {
355
358
  offsetWidth: config.offset.left,
356
359
  contentWidth: legendWidth,
357
360
  });
358
- svgElement.attr('transform', `translate(${[left, config.offset.top].join(',')})`);
361
+ svgElement
362
+ .attr('transform', `translate(${[left, config.offset.top].join(',')})`)
363
+ .style('opacity', 1);
359
364
  htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${left}px, ${config.offset.top}px)`);
360
365
  }
361
366
  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
@@ -338,9 +339,11 @@ export const Legend = (props) => {
338
339
  break;
339
340
  }
340
341
  }
342
+ const legendTitleClassname = b('title');
343
+ svgElement.selectAll(`.${legendTitleClassname}`).remove();
341
344
  svgElement
342
345
  .append('g')
343
- .attr('class', b('title'))
346
+ .attr('class', legendTitleClassname)
344
347
  .append('text')
345
348
  .attr('dx', dx)
346
349
  .attr('font-weight', (_f = legend.title.style.fontWeight) !== null && _f !== void 0 ? _f : null)
@@ -355,7 +358,9 @@ export const Legend = (props) => {
355
358
  offsetWidth: config.offset.left,
356
359
  contentWidth: legendWidth,
357
360
  });
358
- svgElement.attr('transform', `translate(${[left, config.offset.top].join(',')})`);
361
+ svgElement
362
+ .attr('transform', `translate(${[left, config.offset.top].join(',')})`)
363
+ .style('opacity', 1);
359
364
  htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${left}px, ${config.offset.top}px)`);
360
365
  }
361
366
  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.1",
4
4
  "description": "React component used to render charts",
5
5
  "license": "MIT",
6
6
  "main": "dist/cjs/index.js",