fix(partition): single slice wrong text positioning (#643)

This commit fix the partition chart avoiding filling a single slice if the inner radius is nonzero. fix #637
elastic · Apr 22, 2020 · 6298d36 · 6298d36
1 parent 3aa235e
commit 6298d36
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/...ests-for-all-stories-sunburst-single-sunburst-visually-looks-correct-1-snap.png b/...ests-for-all-stories-sunburst-single-sunburst-visually-looks-correct-1-snap.png
diff --git a/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.ts b/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.ts
@@ -94,9 +94,9 @@ export function ringSectorConstruction(config: Config, innerRadius: Radius, ring
       fillRectangleWidth,
       fillRectangleHeight,
     } = config;
-    const innerR =
-      (fillOutside ? ringSectorOuterRadius : ringSectorInnerRadius)(innerRadius, ringThickness)(ringSector) +
-      circlePadding * 2;
+    const radiusGetter = fillOutside ? ringSectorOuterRadius : ringSectorInnerRadius;
+    const geometricInnerRadius = radiusGetter(innerRadius, ringThickness)(ringSector);
+    const innerR = geometricInnerRadius + circlePadding * 2;
     const outerR = Math.max(
       innerR,
       ringSectorOuterRadius(innerRadius, ringThickness)(ringSector) - circlePadding + (fillOutside ? radiusOutside : 0),
@@ -110,7 +110,7 @@ export function ringSectorConstruction(config: Config, innerRadius: Radius, ring
     const sectorEndCircle = angleToCircline(midRadius, endAngle + radialPadding, 1);
     const outerRadiusFromRectangleWidth = fillRectangleWidth / 2;
     const outerRadiusFromRectanglHeight = fillRectangleHeight / 2;
-    const fullCircle = ringSector.x0 === 0 && ringSector.x1 === TAU;
+    const fullCircle = ringSector.x0 === 0 && ringSector.x1 === TAU && geometricInnerRadius === 0;
     const sectorCirclines = [
       ...(fullCircle && innerRadius === 0 ? [] : [innerCircline]),
       outerCircline,

diff --git a/stories/sunburst/15_single_sunburst.tsx b/stories/sunburst/15_single_sunburst.tsx
@@ -49,7 +49,7 @@ export const example = () => (
         },
         {
           groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.substr(0, 2),
-          nodeLabel: (d: any) => regionLookup[d].regionName,
+          nodeLabel: (d: any) => regionLookup[d].regionName.replace(/\s/g, '\u00A0'),
           shape: {
             fillColor: (d: ShapeTreeNode) => {
               return categoricalFillColor(colorBrewerCategoricalStark9, 0.5)(d.parent.sortIndex);
@@ -58,7 +58,7 @@ export const example = () => (
         },
         {
           groupByRollup: (d: Datum) => d.dest,
-          nodeLabel: (d: any) => countryLookup[d].name,
+          nodeLabel: (d: any) => countryLookup[d].name.replace(/\s/g, '\u00A0'),
           shape: {
             fillColor: (d: ShapeTreeNode) => {
               return categoricalFillColor(colorBrewerCategoricalStark9, 0.3)(d.parent.parent.sortIndex);