fix: make labels take up less pie chart space

gravity-ui · Jan 9, 2025 · 83b92b9 · 83b92b9
1 parent c9667fc
commit 83b92b9
Show file tree

Hide file tree

Showing 9 changed files with 204 additions and 133 deletions.
diff --git a/src/hooks/useShapes/area/prepare-data.ts b/src/hooks/useShapes/area/prepare-data.ts
@@ -137,10 +137,14 @@ export const prepareAreaData = (args: {
                     const labelItems = points.map<LabelData>((p) => getLabelData(p, s, xMax));
                     if (s.dataLabels.html) {
                         const htmlLabels = labelItems.map((l) => {
+                            const style = l.style ?? s.dataLabels.style;
+                            const labelSize = getLabelsSize({labels: [l.text], style, html: true});
+
                             return {
                                 x: l.x - l.size.width / 2,
                                 y: l.y,
                                 content: l.text,
+                                size: {width: labelSize.maxWidth, height: labelSize.maxHeight},
                             };
                         });
                         htmlElements.push(...htmlLabels);

diff --git a/src/hooks/useShapes/bar-x/prepare-data.ts b/src/hooks/useShapes/bar-x/prepare-data.ts
@@ -179,6 +179,7 @@ export const prepareBarXData = (args: {
                         x: label.x,
                         y: label.y,
                         content: label.text,
+                        size: label.size,
                     });
                 } else {
                     barData.label = getLabelData(barData);

diff --git a/src/hooks/useShapes/bar-y/prepare-data.ts b/src/hooks/useShapes/bar-y/prepare-data.ts
@@ -93,6 +93,7 @@ function setLabel(prepared: PreparedBarYData) {
             x,
             y: y - height / 2,
             content,
+            size: {width, height},
         });
     } else {
         prepared.label = {

diff --git a/src/hooks/useShapes/line/prepare-data.ts b/src/hooks/useShapes/line/prepare-data.ts
@@ -45,6 +45,7 @@ function getHtmlLabel(point: PointData, series: PreparedLineSeries, xMax: number
         x: Math.min(xMax - size.maxWidth, Math.max(0, point.x)),
         y: Math.max(0, point.y - series.dataLabels.padding - size.maxHeight),
         content,
+        size: {width: size.maxWidth, height: size.maxHeight},
     };
 }
 

diff --git a/src/hooks/useShapes/pie/index.tsx b/src/hooks/useShapes/pie/index.tsx
@@ -217,10 +217,12 @@ export function PieSeriesShapes(args: PreparePieSeriesArgs) {
         };
     }, [dispatcher, preparedData, seriesOptions]);
 
+    const htmlElements = preparedData.map((d) => d.htmlLabels).flat();
+
     return (
         <React.Fragment>
             <g ref={ref} className={b()} style={{zIndex: 9}} />
-            <HtmlLayer preparedData={preparedData} htmlLayout={htmlLayout} />
+            <HtmlLayer preparedData={{htmlElements}} htmlLayout={htmlLayout} />
         </React.Fragment>
     );
 }