diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-flame-alpha-cpu-profile-flame-chart-visually-looks-correct-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-flame-alpha-cpu-profile-flame-chart-visually-looks-correct-1-snap.png index 56c44f5b1b9a..2cd9188fa7da 100644 Binary files a/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-flame-alpha-cpu-profile-flame-chart-visually-looks-correct-1-snap.png and b/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-flame-alpha-cpu-profile-flame-chart-visually-looks-correct-1-snap.png differ diff --git a/packages/osd-charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts b/packages/osd-charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts index fdc68fd6e237..a7e976d718d6 100644 --- a/packages/osd-charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts +++ b/packages/osd-charts/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,7 +89,7 @@ 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); @@ -96,6 +97,8 @@ export function renderLinearPartitionCanvas2d( 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/packages/osd-charts/stories/icicle/03_cpu_profile_flame.tsx b/packages/osd-charts/stories/icicle/03_cpu_profile_flame.tsx index b292ee131b60..10553c21f964 100644 --- a/packages/osd-charts/stories/icicle/03_cpu_profile_flame.tsx +++ b/packages/osd-charts/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),