fix: render nodeLabel formatted text into the nodes (#1173)

elastic · May 27, 2021 · b44bdff · b44bdff
1 parent ff9fe70
commit b44bdff
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/...l-stories-flame-alpha-cpu-profile-flame-chart-visually-looks-correct-1-snap.png b/...l-stories-flame-alpha-cpu-profile-flame-chart-visually-looks-correct-1-snap.png
diff --git a/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts b/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts
@@ -38,6 +38,7 @@ export function renderLinearPartitionCanvas2d(
     diskCenter,
     width: panelWidth,
     height: panelHeight,
+    layers,
   }: ShapeViewModel,
   { currentFocusX0, currentFocusX1, prevFocusX0, prevFocusX1 }: ContinuousDomainFocus,
   chartId: ChartId,
@@ -88,14 +89,16 @@ export function renderLinearPartitionCanvas2d(
     ctx.translate(diskCenter.x, diskCenter.y);
     ctx.clearRect(0, 0, width, height);
 
-    quadViewModel.forEach(({ fillColor, x0, x1, y0px: y0, y1px: y1, dataName: label, textColor }) => {
+    quadViewModel.forEach(({ fillColor, x0, x1, y0px: y0, y1px: y1, dataName, textColor, depth }) => {
       if (y1 - y0 <= padding) return;
 
       const fx0 = Math.max((x0 - focusX0) * scale, 0);
       const fx1 = Math.min((x1 - focusX0) * scale, width);
 
       if (fx1 < 0 || fx0 > width) return;
 
+      const formatter = layers[depth]?.nodeLabel ?? String;
+      const label = formatter(dataName);
       const fWidth = fx1 - fx0;
       const fPadding = Math.min(padding, MAX_PADDING_RATIO * fWidth);
 

diff --git a/stories/icicle/03_cpu_profile_flame.tsx b/stories/icicle/03_cpu_profile_flame.tsx
@@ -31,7 +31,7 @@ const color = palette.slice().reverse();
 const getLayerSpec = (maxDepth: number = 30) =>
   [...new Array(maxDepth + 1)].map((_, depth) => ({
     groupByRollup: (d: Datum) => data.dictionary[d.layers[depth]],
-    nodeLabel: (d: PrimitiveValue) => String(d),
+    nodeLabel: (d: PrimitiveValue) => `${String(d)}/`,
     showAccessor: (d: PrimitiveValue) => d !== undefined,
     shape: {
       fillColor: () => discreteColor(color, 0.8)(depth),