feat(partition): enable grooves in all group layers (#666)

Enables grooves for proper groove label placement for all group ie. non-leaf layers

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({

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 = () => (
+  <Chart className="story-chart" /*size={{ width: 1200, height: 800 }}*/>
+    <Settings showLegend />
+    <Partition
+      id="spec_1"
+      data={mocks.sunburst}
+      valueAccessor={(d: Datum) => 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,
+      }}
+    />
+  </Chart>
+);

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';