@gravity-ui/charts 1.6.0 → 1.6.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 (13) hide show
  1. package/dist/cjs/components/ChartInner/index.js +3 -5
  2. package/dist/cjs/hooks/useSeries/prepare-legend.js +1 -1
  3. package/dist/cjs/hooks/useShapes/HtmlLayer.js +2 -1
  4. package/dist/cjs/hooks/useShapes/pie/prepare-data.js +24 -6
  5. package/dist/cjs/types/chart-ui.d.ts +1 -1
  6. package/dist/cjs/utils/chart-ui/pie-center-text.js +5 -1
  7. package/dist/esm/components/ChartInner/index.js +3 -5
  8. package/dist/esm/hooks/useSeries/prepare-legend.js +1 -1
  9. package/dist/esm/hooks/useShapes/HtmlLayer.js +2 -1
  10. package/dist/esm/hooks/useShapes/pie/prepare-data.js +24 -6
  11. package/dist/esm/types/chart-ui.d.ts +1 -1
  12. package/dist/esm/utils/chart-ui/pie-center-text.js +5 -1
  13. package/package.json +1 -1
package/dist/cjs/components/ChartInner/index.js CHANGED
@@ -59,8 +59,8 @@ export const ChartInner = (props) => {
59
59
  unpinTooltip === null || unpinTooltip === void 0 ? void 0 : unpinTooltip();
60
60
  }
61
61
  }, [prevWidth, width, prevHeight, height, tooltipPinned, unpinTooltip]);
62
- return (React.createElement(React.Fragment, null,
63
- React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick },
62
+ return (React.createElement("div", { className: b() },
63
+ React.createElement("svg", { ref: svgRef, width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick },
64
64
  title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
65
65
  React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
66
66
  return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
@@ -72,8 +72,6 @@ export const ChartInner = (props) => {
72
72
  React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
73
73
  shapes),
74
74
  preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip }))),
75
- React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {
76
- transform: `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
77
- } }),
75
+ React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef }),
78
76
  React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0], onOutsideClick: unpinTooltip, tooltipPinned: tooltipPinned })));
79
77
  };
package/dist/cjs/hooks/useSeries/prepare-legend.js CHANGED
@@ -133,7 +133,7 @@ export const getLegendComponents = (args) => {
133
133
  const limit = Math.floor(maxLegendHeight / preparedLegend.lineHeight) - 1;
134
134
  const maxPage = Math.ceil(items.length / limit);
135
135
  pagination = { limit, maxPage };
136
- legendHeight = maxLegendHeight;
136
+ legendHeight = preparedLegend.lineHeight * (limit + 1);
137
137
  }
138
138
  preparedLegend.height = legendHeight;
139
139
  }
package/dist/cjs/hooks/useShapes/HtmlLayer.js CHANGED
@@ -17,7 +17,8 @@ export const HtmlLayer = (props) => {
17
17
  return null;
18
18
  }
19
19
  return (React.createElement(Portal, { container: htmlLayout }, items.map((item, index) => {
20
- const style = Object.assign(Object.assign({}, item.style), { position: 'absolute', left: item.x, top: item.y });
20
+ var _a, _b, _c;
21
+ const style = Object.assign(Object.assign({}, item.style), { color: (_b = (_a = item.style) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : (_c = item.style) === null || _c === void 0 ? void 0 : _c.fontColor, position: 'absolute', left: item.x, top: item.y });
21
22
  return (React.createElement("div", { key: index, dangerouslySetInnerHTML: { __html: item.content }, style: style }));
22
23
  })));
23
24
  };
package/dist/cjs/hooks/useShapes/pie/prepare-data.js CHANGED
@@ -169,10 +169,14 @@ export function preparePieData(args) {
169
169
  angle: midAngle,
170
170
  };
171
171
  if (!allowOverlow) {
172
- const labelLeftPosition = getLeftPosition(label);
173
- const newMaxWidth = labelLeftPosition > 0
174
- ? Math.min(boundsWidth / 2 - labelLeftPosition, labelWidth)
175
- : Math.min(labelWidth - (-labelLeftPosition - boundsWidth / 2), labelWidth);
172
+ const labelLeftPosition = shouldUseHtml ? label.x : getLeftPosition(label);
173
+ let newMaxWidth;
174
+ if (label.x > 0) {
175
+ newMaxWidth = Math.min(boundsWidth - data.center[0] - labelLeftPosition, labelWidth);
176
+ }
177
+ else {
178
+ newMaxWidth = Math.min(data.center[0] + labelLeftPosition + label.size.width, labelWidth);
179
+ }
176
180
  if (newMaxWidth !== label.maxWidth) {
177
181
  label.maxWidth = Math.max(0, newMaxWidth);
178
182
  }
@@ -221,12 +225,15 @@ export function preparePieData(args) {
221
225
  if (!isLabelOverlapped && label.maxWidth > 0 && !shouldStopLabelPlacement) {
222
226
  labels.push(label);
223
227
  if (shouldUseHtml) {
228
+ const htmlLabelX = data.center[0] + label.x;
224
229
  htmlLabels.push({
225
- x: data.center[0] + label.x,
230
+ x: Math.max(0, htmlLabelX),
226
231
  y: Math.max(0, data.center[1] + label.y),
227
232
  content: label.text,
228
233
  size: label.size,
229
- style: label.style,
234
+ style: Object.assign(Object.assign({}, label.style), { overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', maxWidth: Math.min(label.x > 0
235
+ ? boundsWidth - htmlLabelX
236
+ : htmlLabelX + label.size.width, label.size.width) }),
230
237
  });
231
238
  }
232
239
  const connector = {
@@ -263,6 +270,17 @@ export function preparePieData(args) {
263
270
  maxLeftRightFreeSpace = Math.max(0, Math.min(maxLeftRightFreeSpace, freeSpace));
264
271
  labelsOverflow = freeSpace < 0 ? Math.max(labelsOverflow, -freeSpace) : labelsOverflow;
265
272
  });
273
+ preparedLabels.htmlLabels.forEach((label) => {
274
+ let freeSpace = 0;
275
+ if (label.x < data.center[0]) {
276
+ freeSpace = Math.max(label.x, 0);
277
+ }
278
+ else {
279
+ freeSpace = boundsWidth - label.x - label.size.width;
280
+ }
281
+ maxLeftRightFreeSpace = Math.max(0, Math.min(maxLeftRightFreeSpace, freeSpace));
282
+ labelsOverflow = freeSpace < 0 ? Math.max(labelsOverflow, -freeSpace) : labelsOverflow;
283
+ });
266
284
  const segmentMaxRadius = Math.max(...data.segments.map((s) => s.data.radius));
267
285
  if (labelsOverflow) {
268
286
  data.segments.forEach((s) => {
package/dist/cjs/types/chart-ui.d.ts CHANGED
@@ -22,7 +22,7 @@ export interface HtmlItem {
22
22
  width: number;
23
23
  height: number;
24
24
  };
25
- style?: BaseTextStyle;
25
+ style?: BaseTextStyle & React.CSSProperties;
26
26
  }
27
27
  export interface ShapeDataWithHtmlItems {
28
28
  htmlElements: HtmlItem[];
package/dist/cjs/utils/chart-ui/pie-center-text.js CHANGED
@@ -11,7 +11,11 @@ export function pieCenterText(text, options) {
11
11
  return function (args) {
12
12
  let fontSize = MAX_FONT_SIZE;
13
13
  const textSize = getLabelsSize({ labels: [text], style: { fontSize: `${fontSize}px` } });
14
- fontSize = (fontSize * (args.series.innerRadius - padding) * 2) / textSize.maxWidth;
14
+ let availableSpace = args.series.innerRadius * 2;
15
+ if (padding < args.series.innerRadius) {
16
+ availableSpace -= padding * 2;
17
+ }
18
+ fontSize = (fontSize * availableSpace) / textSize.maxWidth;
15
19
  const container = create('svg:g');
16
20
  container
17
21
  .append('text')
package/dist/esm/components/ChartInner/index.js CHANGED
@@ -59,8 +59,8 @@ export const ChartInner = (props) => {
59
59
  unpinTooltip === null || unpinTooltip === void 0 ? void 0 : unpinTooltip();
60
60
  }
61
61
  }, [prevWidth, width, prevHeight, height, tooltipPinned, unpinTooltip]);
62
- return (React.createElement(React.Fragment, null,
63
- React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick },
62
+ return (React.createElement("div", { className: b() },
63
+ React.createElement("svg", { ref: svgRef, width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick },
64
64
  title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
65
65
  React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
66
66
  return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
@@ -72,8 +72,6 @@ export const ChartInner = (props) => {
72
72
  React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
73
73
  shapes),
74
74
  preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip }))),
75
- React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {
76
- transform: `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
77
- } }),
75
+ React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef }),
78
76
  React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0], onOutsideClick: unpinTooltip, tooltipPinned: tooltipPinned })));
79
77
  };
package/dist/esm/hooks/useSeries/prepare-legend.js CHANGED
@@ -133,7 +133,7 @@ export const getLegendComponents = (args) => {
133
133
  const limit = Math.floor(maxLegendHeight / preparedLegend.lineHeight) - 1;
134
134
  const maxPage = Math.ceil(items.length / limit);
135
135
  pagination = { limit, maxPage };
136
- legendHeight = maxLegendHeight;
136
+ legendHeight = preparedLegend.lineHeight * (limit + 1);
137
137
  }
138
138
  preparedLegend.height = legendHeight;
139
139
  }
package/dist/esm/hooks/useShapes/HtmlLayer.js CHANGED
@@ -17,7 +17,8 @@ export const HtmlLayer = (props) => {
17
17
  return null;
18
18
  }
19
19
  return (React.createElement(Portal, { container: htmlLayout }, items.map((item, index) => {
20
- const style = Object.assign(Object.assign({}, item.style), { position: 'absolute', left: item.x, top: item.y });
20
+ var _a, _b, _c;
21
+ const style = Object.assign(Object.assign({}, item.style), { color: (_b = (_a = item.style) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : (_c = item.style) === null || _c === void 0 ? void 0 : _c.fontColor, position: 'absolute', left: item.x, top: item.y });
21
22
  return (React.createElement("div", { key: index, dangerouslySetInnerHTML: { __html: item.content }, style: style }));
22
23
  })));
23
24
  };
package/dist/esm/hooks/useShapes/pie/prepare-data.js CHANGED
@@ -169,10 +169,14 @@ export function preparePieData(args) {
169
169
  angle: midAngle,
170
170
  };
171
171
  if (!allowOverlow) {
172
- const labelLeftPosition = getLeftPosition(label);
173
- const newMaxWidth = labelLeftPosition > 0
174
- ? Math.min(boundsWidth / 2 - labelLeftPosition, labelWidth)
175
- : Math.min(labelWidth - (-labelLeftPosition - boundsWidth / 2), labelWidth);
172
+ const labelLeftPosition = shouldUseHtml ? label.x : getLeftPosition(label);
173
+ let newMaxWidth;
174
+ if (label.x > 0) {
175
+ newMaxWidth = Math.min(boundsWidth - data.center[0] - labelLeftPosition, labelWidth);
176
+ }
177
+ else {
178
+ newMaxWidth = Math.min(data.center[0] + labelLeftPosition + label.size.width, labelWidth);
179
+ }
176
180
  if (newMaxWidth !== label.maxWidth) {
177
181
  label.maxWidth = Math.max(0, newMaxWidth);
178
182
  }
@@ -221,12 +225,15 @@ export function preparePieData(args) {
221
225
  if (!isLabelOverlapped && label.maxWidth > 0 && !shouldStopLabelPlacement) {
222
226
  labels.push(label);
223
227
  if (shouldUseHtml) {
228
+ const htmlLabelX = data.center[0] + label.x;
224
229
  htmlLabels.push({
225
- x: data.center[0] + label.x,
230
+ x: Math.max(0, htmlLabelX),
226
231
  y: Math.max(0, data.center[1] + label.y),
227
232
  content: label.text,
228
233
  size: label.size,
229
- style: label.style,
234
+ style: Object.assign(Object.assign({}, label.style), { overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', maxWidth: Math.min(label.x > 0
235
+ ? boundsWidth - htmlLabelX
236
+ : htmlLabelX + label.size.width, label.size.width) }),
230
237
  });
231
238
  }
232
239
  const connector = {
@@ -263,6 +270,17 @@ export function preparePieData(args) {
263
270
  maxLeftRightFreeSpace = Math.max(0, Math.min(maxLeftRightFreeSpace, freeSpace));
264
271
  labelsOverflow = freeSpace < 0 ? Math.max(labelsOverflow, -freeSpace) : labelsOverflow;
265
272
  });
273
+ preparedLabels.htmlLabels.forEach((label) => {
274
+ let freeSpace = 0;
275
+ if (label.x < data.center[0]) {
276
+ freeSpace = Math.max(label.x, 0);
277
+ }
278
+ else {
279
+ freeSpace = boundsWidth - label.x - label.size.width;
280
+ }
281
+ maxLeftRightFreeSpace = Math.max(0, Math.min(maxLeftRightFreeSpace, freeSpace));
282
+ labelsOverflow = freeSpace < 0 ? Math.max(labelsOverflow, -freeSpace) : labelsOverflow;
283
+ });
266
284
  const segmentMaxRadius = Math.max(...data.segments.map((s) => s.data.radius));
267
285
  if (labelsOverflow) {
268
286
  data.segments.forEach((s) => {
package/dist/esm/types/chart-ui.d.ts CHANGED
@@ -22,7 +22,7 @@ export interface HtmlItem {
22
22
  width: number;
23
23
  height: number;
24
24
  };
25
- style?: BaseTextStyle;
25
+ style?: BaseTextStyle & React.CSSProperties;
26
26
  }
27
27
  export interface ShapeDataWithHtmlItems {
28
28
  htmlElements: HtmlItem[];
package/dist/esm/utils/chart-ui/pie-center-text.js CHANGED
@@ -11,7 +11,11 @@ export function pieCenterText(text, options) {
11
11
  return function (args) {
12
12
  let fontSize = MAX_FONT_SIZE;
13
13
  const textSize = getLabelsSize({ labels: [text], style: { fontSize: `${fontSize}px` } });
14
- fontSize = (fontSize * (args.series.innerRadius - padding) * 2) / textSize.maxWidth;
14
+ let availableSpace = args.series.innerRadius * 2;
15
+ if (padding < args.series.innerRadius) {
16
+ availableSpace -= padding * 2;
17
+ }
18
+ fontSize = (fontSize * availableSpace) / textSize.maxWidth;
15
19
  const container = create('svg:g');
16
20
  container
17
21
  .append('text')
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/charts",
3
- "version": "1.6.0",
3
+ "version": "1.6.1",
4
4
  "description": "React component used to render charts",
5
5
  "license": "MIT",
6
6
  "main": "dist/cjs/index.js",