feat(partition): stroke configuration and linked label value font format

src/chart_types/partition_chart/layout/config/config.ts

@@ -233,6 +233,7 @@ export const configMetadata = {
   // other
   backgroundColor: { dflt: '#ffffff', type: 'color' },
   sectorLineWidth: { dflt: 1, min: 0, max: 4, type: 'number' },
+  sectorLineStroke: { dflt: 'white', type: 'string' },
   colors: { dflt: 'turbo', type: 'palette', values: Object.keys(palettes) },
   palettes: { dflt: palettes, type: 'palettes', reconfigurable: false },
 };

src/chart_types/partition_chart/layout/types/config_types.ts

@@ -19,7 +19,7 @@
 import { Distance, Pixels, Radian, Radius, Ratio, SizeRatio, TimeMs } from './geometry_types';
 import { Font, FontFamily, PartialFont } from './types';
 import { $Values as Values } from 'utility-types';
-import { Color, ValueFormatter } from '../../../../utils/commons';
+import { Color, StrokeStyle, ValueFormatter } from '../../../../utils/commons';
 
 export const PartitionLayout = Object.freeze({
   sunburst: 'sunburst' as 'sunburst',
@@ -86,9 +86,10 @@ export interface StaticConfig {
   // linked labels (primarily: single-line)
   linkLabel: LinkLabelConfig;
 
-  // other
+  // global
   backgroundColor: Color;
   sectorLineWidth: Pixels;
+  sectorLineStroke: StrokeStyle;
 }
 
 export type EasingFunction = (x: Ratio) => Ratio;

src/chart_types/partition_chart/layout/types/viewmodel_types.ts

@@ -65,6 +65,7 @@ export interface RowSet {
 
 export interface QuadViewModel extends ShapeTreeNode {
   strokeWidth: number;
+  strokeStyle: string;
   fillColor: string;
 }
 

src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts

@@ -62,7 +62,7 @@ import {
   parentAccessor,
   sortIndexAccessor,
 } from '../utils/group_by_rollup';
-import { ValueAccessor, ValueFormatter } from '../../../../utils/commons';
+import { StrokeStyle, ValueAccessor, ValueFormatter } from '../../../../utils/commons';
 import { percentValueGetter } from '../config/config';
 
 function paddingAccessor(n: ArrayEntry) {
@@ -99,6 +99,7 @@ export function makeQuadViewModel(
   childNodes: ShapeTreeNode[],
   layers: Layer[],
   sectorLineWidth: Pixels,
+  sectorLineStroke: StrokeStyle,
 ): Array<QuadViewModel> {
   return childNodes.map((node) => {
     const opacityMultiplier = 1; // could alter in the future, eg. in response to interactions
@@ -109,7 +110,8 @@ export function makeQuadViewModel(
     const { r, g, b, opacity } = stringToRGB(shapeFillColor);
     const fillColor = argsToRGBString(r, g, b, opacity * opacityMultiplier);
     const strokeWidth = sectorLineWidth;
-    return { strokeWidth, fillColor, ...node };
+    const strokeStyle = sectorLineStroke;
+    return { strokeWidth, strokeStyle, fillColor, ...node };
   });
 }
 
@@ -249,6 +251,7 @@ export function shapeViewModel(
     ),
     layers,
     config.sectorLineWidth,
+    config.sectorLineStroke,
   );
 
   // fill text

src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts

@@ -29,7 +29,7 @@ import {
 import { TAU } from '../../layout/utils/math';
 import { PartitionLayout } from '../../layout/types/config_types';
 import { cssFontShorthand } from '../../layout/utils/measure';
-import { withContext, renderLayers, clearCanvas } from '../../../../renderers/canvas';
+import { clearCanvas, renderLayers, withContext } from '../../../../renderers/canvas';
 
 // the burnout avoidance in the center of the pie
 const LINE_WIDTH_MULT = 10; // border can be a maximum 1/LINE_WIDTH_MULT - th of the sector angle, otherwise the border would dominate
@@ -62,7 +62,7 @@ function renderRowSets(ctx: CanvasRenderingContext2D, rowSets: RowSet[]) {
 
 function renderTaperedBorder(
   ctx: CanvasRenderingContext2D,
-  { strokeWidth, fillColor, x0, x1, y0px, y1px }: QuadViewModel,
+  { strokeWidth, strokeStyle, fillColor, x0, x1, y0px, y1px }: QuadViewModel,
 ) {
   const X0 = x0 - TAU / 4;
   const X1 = x1 - TAU / 4;
@@ -89,18 +89,19 @@ function renderTaperedBorder(
       ctx.arc(0, 0, y0px, X1, X0, true);
       ctx.stroke();
 
-      ctx.fillStyle = 'white';
+      ctx.fillStyle = strokeStyle;
 
       // each side (radial 'line') is modeled as a pentagon (some lines can be short arcs though)
       ctx.beginPath();
       const yThreshold = Math.max(TAPER_OFF_LIMIT, (LINE_WIDTH_MULT * strokeWidth) / (X1 - X0));
       const beta = strokeWidth / yThreshold; // angle where strokeWidth equals the lineWidthMult limit at a radius of yThreshold
       ctx.arc(0, 0, y0px, X0, X0 + beta * (yThreshold / y0px));
-      ctx.arc(0, 0, yThreshold, X0 + beta, X0 + beta);
+      ctx.arc(0, 0, Math.min(yThreshold, y1px), X0 + beta, X0 + beta);
       ctx.arc(0, 0, y1px, X0 + beta * (yThreshold / y1px), X0, true);
       ctx.arc(0, 0, y0px, X0, X0);
       ctx.fill();
     } else {
+      ctx.strokeStyle = strokeStyle;
       ctx.stroke();
     }
   }
@@ -195,7 +196,7 @@ export function renderPartitionCanvas2d(
   dpr: number,
   { config, quadViewModel, rowSets, outsideLinksViewModel, linkLabelViewModels, diskCenter }: ShapeViewModel,
 ) {
-  const { sectorLineWidth, linkLabel, fontFamily /*, backgroundColor*/ } = config;
+  const { sectorLineWidth, sectorLineStroke, linkLabel, fontFamily /*, backgroundColor*/ } = config;
 
   const linkLabelTextColor = addOpacity(linkLabel.textColor, linkLabel.textOpacity);
 
@@ -219,7 +220,7 @@ export function renderPartitionCanvas2d(
     ctx.scale(1, -1);
 
     ctx.lineJoin = 'round';
-    ctx.strokeStyle = 'white'; // todo make it configurable just like sectorLineWidth
+    ctx.strokeStyle = sectorLineStroke;
     ctx.lineWidth = sectorLineWidth;
 
     // painter's algorithm, like that of SVG: the sequence determines what overdraws what; first element of the array is drawn first

src/utils/commons.ts

@@ -24,6 +24,7 @@ export type Datum = any; // unknown;
 export type Rotation = 0 | 90 | -90 | 180;
 export type Rendering = 'canvas' | 'svg';
 export type Color = string;
+export type StrokeStyle = Color; // now narrower than string | CanvasGradient | CanvasPattern
 
 export const Position = Object.freeze({
   Top: 'top' as 'top',

stories/sunburst/29_custom_stroke.tsx

@@ -0,0 +1,50 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License. */
+
+import { Chart, Datum, Partition, PartitionLayout } from '../../src';
+import { mocks } from '../../src/mocks/hierarchical/index';
+import { config } from '../../src/chart_types/partition_chart/layout/config/config';
+import React from 'react';
+import { countryLookup, indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils';
+
+export const example = () => (
+  <Chart className="story-chart">
+    <Partition
+      id="spec_1"
+      data={mocks.manyPie}
+      valueAccessor={(d: Datum) => d.exportVal as number}
+      valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`}
+      layers={[
+        {
+          groupByRollup: (d: Datum) => d.origin,
+          nodeLabel: (d: Datum) => countryLookup[d].name,
+          fillLabel: { textInvertible: true },
+          shape: {
+            fillColor: indexInterpolatedFillColor(interpolatorCET2s),
+          },
+        },
+      ]}
+      config={{
+        partitionLayout: PartitionLayout.sunburst,
+        linkLabel: { maxCount: 15 },
+        sectorLineStroke: 'blanchedalmond',
+        sectorLineWidth: 1.2,
+      }}
+    />
+  </Chart>
+);

stories/sunburst/sunburst.stories.tsx

@@ -55,3 +55,4 @@ export { example as noLabels } from './25_no_labels';
 export { example as percentage } from './26_percentage';
 export { example as heterogeneous } from './27_heterogeneous_depth';
 export { example as notANumber } from './28_not_a_number';
+export { example as customStroke } from './29_custom_stroke';