diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-three-layer-visually-looks-correct-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-three-layer-visually-looks-correct-1-snap.png
new file mode 100644
index 000000000000..4277073914ae
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-three-layer-visually-looks-correct-1-snap.png differ
diff --git a/packages/osd-charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts b/packages/osd-charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts
index 69928a2886fe..5d9ceba4a1ef 100644
--- a/packages/osd-charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts
+++ b/packages/osd-charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts
@@ -65,7 +65,7 @@ function grooveAccessor(n: ArrayEntry) {
}
function topGrooveAccessor(topGroovePx: Pixels) {
- return (n: ArrayEntry) => (entryValue(n).depth === 1 ? topGroovePx : grooveAccessor(n));
+ return (n: ArrayEntry) => (entryValue(n).depth > 0 ? topGroovePx : grooveAccessor(n));
}
export const VerticalAlignments = Object.freeze({
diff --git a/packages/osd-charts/stories/treemap/10_three_layers.tsx b/packages/osd-charts/stories/treemap/10_three_layers.tsx
new file mode 100644
index 000000000000..8cf3e59067ed
--- /dev/null
+++ b/packages/osd-charts/stories/treemap/10_three_layers.tsx
@@ -0,0 +1,102 @@
+/*
+ * 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, Settings } from '../../src/index';
+import { mocks } from '../../src/mocks/hierarchical/index';
+import { config } from '../../src/chart_types/partition_chart/layout/config/config';
+import React from 'react';
+import { ShapeTreeNode } from '../../src/chart_types/partition_chart/layout/types/viewmodel_types';
+import { countryLookup, productLookup, regionLookup } from '../utils/utils';
+import { hueInterpolator } from '../../src/chart_types/partition_chart/layout/utils/calcs';
+import { palettes } from '../../src/mocks/hierarchical/palettes';
+
+const interpolator = hueInterpolator(palettes.CET2s.map(([r, g, b]) => [r, g, b, 0.5]));
+
+const countries = mocks.sunburst
+ .map((d: any) => d.dest)
+ .filter((d: any, i: number, a: any[]) => a.indexOf(d) === i)
+ .sort()
+ .reverse();
+
+const countryCount = countries.length;
+
+export const example = () => (
+
+
+ d.exportVal as number}
+ valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`}
+ layers={[
+ {
+ groupByRollup: (d: Datum) => d.sitc1,
+ nodeLabel: (d: any) => productLookup[d].name.toUpperCase(),
+ fillLabel: {
+ valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`,
+ fontFamily: 'Helvetica',
+ textColor: 'black',
+ textInvertible: false,
+ fontWeight: 900,
+ minFontSize: 2,
+ maxFontSize: 20,
+ idealFontSizeJump: 1.01,
+ },
+ shape: { fillColor: 'rgba(0,0,0,0)' },
+ },
+ {
+ groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.substr(0, 2),
+ nodeLabel: (d: any) => regionLookup[d].regionName,
+ fillLabel: {
+ valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`,
+ textColor: 'black',
+ textInvertible: false,
+ fontWeight: 200,
+ fontStyle: 'normal',
+ fontFamily: 'Helvetica',
+ valueFont: { fontWeight: 400, fontStyle: 'italic' },
+ minFontSize: 2,
+ maxFontSize: 10,
+ idealFontSizeJump: 1.01,
+ },
+ shape: {
+ fillColor: 'rgba(0, 0, 0, 0.07)',
+ },
+ },
+ {
+ groupByRollup: (d: Datum) => d.dest,
+ nodeLabel: (d: any) => countryLookup[d].name,
+ shape: {
+ fillColor: (d: ShapeTreeNode) => {
+ // pick color by country
+ return interpolator(countries.indexOf(d.dataName) / countryCount);
+ },
+ },
+ },
+ ]}
+ config={{
+ partitionLayout: PartitionLayout.treemap,
+ margin: { top: 0, bottom: 0, left: 0, right: 0 },
+ minFontSize: 4,
+ maxFontSize: 12,
+ idealFontSizeJump: 1.01,
+ outerSizeRatio: 1,
+ }}
+ />
+
+);
diff --git a/packages/osd-charts/stories/treemap/treemap.stories.tsx b/packages/osd-charts/stories/treemap/treemap.stories.tsx
index e94f01cd4974..cd81152c3c50 100644
--- a/packages/osd-charts/stories/treemap/treemap.stories.tsx
+++ b/packages/osd-charts/stories/treemap/treemap.stories.tsx
@@ -34,3 +34,4 @@ export { example as customStyle } from './6_custom_style';
export { example as percentage } from './7_percentage';
export { example as grooveText } from './8_groove_text';
export { example as zeroValues } from './9_zero_values';
+export { example as threeLayer } from './10_three_layers';