diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-sunburst-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-sunburst-visually-looks-correct-1-snap.png index 65578ffc5d..36397904f9 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-sunburst-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-sunburst-visually-looks-correct-1-snap.png differ 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 index c56d111289..8f1811acbf 100644 --- 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 index 5c2fe94d49..d241571143 100644 --- 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);