feat(partition): treemap group text in grooves

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

@@ -34,6 +34,7 @@ interface LabelConfig extends Font {
   textOpacity: Ratio;
   valueFormatter: ValueFormatter;
   valueFont: PartialFont;
+  padding: number;
 }
 
 export type FillLabelConfig = LabelConfig;
@@ -51,8 +52,16 @@ export interface LinkLabelConfig extends LabelConfig {
   maxCount: number;
 }
 
+/** @internal */
+export interface FillFontSizeRange {
+  minFontSize: Pixels;
+  maxFontSize: Pixels;
+  idealFontSizeJump: Ratio;
+}
+
 // todo switch to `io-ts` style, generic way of combining static and runtime type info
-export interface StaticConfig {
+/** @internal */
+export interface StaticConfig extends FillFontSizeRange {
   // shape geometry
   width: number;
   height: number;
@@ -66,11 +75,6 @@ export interface StaticConfig {
   // general text config
   fontFamily: FontFamily;
 
-  // fill text config
-  minFontSize: Pixels;
-  maxFontSize: Pixels;
-  idealFontSizeJump: Ratio;
-
   // fill text layout config
   circlePadding: Distance;
   radialPadding: Distance;
@@ -92,8 +96,10 @@ export interface StaticConfig {
   sectorLineStroke: StrokeStyle;
 }
 
+/** @internal */
 export type EasingFunction = (x: Ratio) => Ratio;
 
+/** @internal */
 export interface AnimKeyframe {
   time: number;
   easingFunction: EasingFunction;
@@ -120,6 +126,7 @@ class Type<A> {
   }
 }
 
+/** @internal */
 export class Numeric extends Type<number> {
   min: number;
   max: number;

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

@@ -22,6 +22,7 @@ import { Font } from './types';
 import { config, ValueGetterName } from '../config/config';
 import { ArrayNode, HierarchyOfArrays } from '../utils/group_by_rollup';
 import { Color } from '../../../../utils/commons';
+import { VerticalAlignment } from '../viewmodel/viewmodel';
 
 export type LinkLabelVM = {
   link: [PointTuple, ...PointTuple[]]; // at least one point
@@ -64,6 +65,9 @@ export interface RowSet {
   fillTextColor: string;
   fontSize: number;
   rotation: Radian;
+  verticalAlignment: VerticalAlignment;
+  leftAlign: boolean; // might be generalized into horizontalAlign - if needed
+  container?: any;
 }
 
 export interface QuadViewModel extends ShapeTreeNode {

src/chart_types/partition_chart/layout/utils/treemap.ts

@@ -19,8 +19,10 @@
 import { ArrayEntry, CHILDREN_KEY, entryValue, HierarchyOfArrays } from './group_by_rollup';
 import { Part } from '../types/types';
 import { GOLDEN_RATIO } from './math';
+import { Pixels } from '../types/geometry_types';
 
-const MAX_PADDING_RATIO = 0.0256197; // this limits area distortion to <10% (which occurs due to pixel padding) with very small rectangles
+const MAX_U_PADDING_RATIO = 0.0256197; // this limits area distortion to <10% (which occurs due to pixel padding) with very small rectangles
+const MAX_TOP_PADDING_RATIO = 0.33; // this limits further area distortion to ~33%
 
 interface LayoutElement {
   nodes: HierarchyOfArrays;
@@ -88,10 +90,15 @@ function vectorNodeCoordinates(vectorLayout: LayoutElement, x0Base: number, y0Ba
   });
 }
 
+/** @internal */
+export const getTopPadding = (requestedTopPadding: number, fullHeight: Pixels) =>
+  Math.min(requestedTopPadding, fullHeight * MAX_TOP_PADDING_RATIO);
+
 /** @internal */
 export function treemap(
   nodes: HierarchyOfArrays,
   areaAccessor: (e: ArrayEntry) => number,
+  topPaddingAccessor: (e: ArrayEntry) => number,
   paddingAccessor: (e: ArrayEntry) => number,
   { x0, y0, width, height }: { x0: number; y0: number; width: number; height: number },
 ): Array<Part> {
@@ -111,20 +118,22 @@ export function treemap(
         }
         const fullWidth = x1 - x0;
         const fullHeight = y1 - y0;
-        const padding = Math.min(
+        const uPadding = Math.min(
           paddingAccessor(node),
-          fullWidth * MAX_PADDING_RATIO * 2,
-          fullHeight * MAX_PADDING_RATIO * 2,
+          fullWidth * MAX_U_PADDING_RATIO * 2,
+          fullHeight * MAX_U_PADDING_RATIO * 2,
         );
-        const width = fullWidth - 2 * padding;
-        const height = fullHeight - 2 * padding;
+        const topPadding = getTopPadding(topPaddingAccessor(node), fullHeight);
+        const width = fullWidth - 2 * uPadding;
+        const height = fullHeight - uPadding - topPadding;
         return treemap(
           childrenNodes,
           (d) => ((width * height) / (fullWidth * fullHeight)) * areaAccessor(d),
+          topPaddingAccessor,
           paddingAccessor,
           {
-            x0: x0 + padding,
-            y0: y0 + padding,
+            x0: x0 + uPadding,
+            y0: y0 + topPadding,
             width,
             height,
           },
@@ -135,6 +144,7 @@ export function treemap(
       treemap(
         nodes.slice(vector.length),
         areaAccessor,
+        topPaddingAccessor,
         paddingAccessor,
         vertical
           ? { x0, y0: y0 + dependentSize, width, height: height - dependentSize }

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

@@ -35,6 +35,7 @@ import { Layer } from '../../specs/index';
 import { stringToRGB } from '../utils/d3_utils';
 import { colorIsDark } from '../utils/calcs';
 import { ValueFormatter } from '../../../../utils/commons';
+import { RectangleConstruction, VerticalAlignment, VerticalAlignments } from './viewmodel';
 
 const INFINITY_RADIUS = 1e4; // far enough for a sub-2px precision on a 4k screen, good enough for text bounds; 64 bit floats still work well with it
 
@@ -73,16 +74,6 @@ export function nodeId(node: ShapeTreeNode): string {
   return `${node.x0}|${node.y0}`;
 }
 
-/** @internal */
-export function rectangleConstruction(node: ShapeTreeNode) {
-  return {
-    x0: node.x0,
-    y0: node.y0px,
-    x1: node.x1,
-    y1: node.y1px,
-  };
-}
-
 /** @internal */
 export function ringSectorConstruction(config: Config, innerRadius: Radius, ringThickness: Distance) {
   return (ringSector: ShapeTreeNode): RingSector => {
@@ -183,32 +174,35 @@ export function getSectorRowGeometry(
 
 /** @internal */
 export function getRectangleRowGeometry(
-  container: any,
+  container: RectangleConstruction,
   cx: number,
   cy: number,
   totalRowCount: number,
   linePitch: Pixels,
   rowIndex: number,
   fontSize: Pixels,
+  _rotation: Radian,
+  verticalAlignment: VerticalAlignment,
 ): RowSpace {
-  const wordSpacing = getWordSpacing(fontSize);
-  const x0 = container.x0 + wordSpacing;
-  const y0 = container.y0 + linePitch / 2;
-  const x1 = container.x1 - wordSpacing;
-  const y1 = container.y1 - linePitch / 2;
-
-  // prettier-ignore
-  const offset =
-      (totalRowCount / 2) * fontSize
-    + fontSize / 2
-    - linePitch * rowIndex
-
-  const rowCentroidX = cx;
-  const rowCentroidY = cy - offset;
+  const overhang = 0.05;
+  const padding = fontSize < 6 ? 0 : Math.max(1, Math.min(2, fontSize / 16)); // taper out padding with small fonts
+  if ((container.y1 - container.y0 - 2 * padding) / totalRowCount < linePitch) {
+    return {
+      rowCentroidX: NaN,
+      rowCentroidY: NaN,
+      maximumRowLength: 0,
+    };
+  }
+  const rowCentroidY =
+    verticalAlignment === VerticalAlignments.top
+      ? -(container.y0 + linePitch * rowIndex + padding + fontSize * overhang)
+      : verticalAlignment === VerticalAlignments.bottom
+      ? -(container.y1 - linePitch * (totalRowCount - 1 - rowIndex) - fontSize * overhang)
+      : -((container.y0 + container.y1) / 2 + (linePitch * (rowIndex - totalRowCount)) / 2);
   return {
-    rowCentroidX,
-    rowCentroidY: -rowCentroidY,
-    maximumRowLength: rowCentroidY - linePitch / 2 < y0 || rowCentroidY + linePitch / 2 > y1 ? 0 : x1 - x0,
+    rowCentroidX: cx,
+    rowCentroidY,
+    maximumRowLength: container.x1 - container.x0 - 2 * padding,
   };
 }
 
@@ -223,6 +217,8 @@ function identityRowSet(): RowSet {
     fontSize: NaN,
     fillTextColor: '',
     rotation: NaN,
+    verticalAlignment: VerticalAlignments.middle,
+    leftAlign: false,
   };
 }
 
@@ -251,7 +247,7 @@ function getWordSpacing(fontSize: number) {
 function fill(
   config: Config,
   layers: Layer[],
-  fontSizes: string | any[],
+  allFontSizes: string | any[],
   measure: TextMeasure,
   rawTextGetter: RawTextGetter,
   valueGetter: ValueGetterFunction,
@@ -260,11 +256,19 @@ function fill(
   shapeConstructor: (n: ShapeTreeNode) => any,
   getShapeRowGeometry: (...args: any[]) => RowSpace,
   getRotation: Function,
+  leftAlign: boolean,
+  middleAlign: boolean,
 ) {
   return (node: QuadViewModel, index: number) => {
     const { maxRowCount, fillLabel } = config;
 
     const layer = layers[node.depth - 1] || {};
+    const verticalAlignment = middleAlign
+      ? VerticalAlignments.middle
+      : node.depth < layers.length
+      ? VerticalAlignments.bottom
+      : VerticalAlignments.top;
+    const fontSizes = allFontSizes[Math.min(node.depth, allFontSizes.length) - 1];
     const { textColor, textInvertible, fontStyle, fontVariant, fontFamily, fontWeight, valueFormatter } = Object.assign(
       { fontFamily: config.fontFamily, fontWeight: 'normal' },
       fillLabel,
@@ -337,13 +341,16 @@ function fill(
               : `rgba(${255 - tr}, ${255 - tg}, ${255 - tb}, ${to})`
             : textColor,
           rotation,
+          verticalAlignment,
+          leftAlign: leftAlign,
           rows: [...Array(targetRowCount)].map(() => ({
             rowWords: [],
             rowCentroidX: NaN,
             rowCentroidY: NaN,
             maximumLength: NaN,
             length: NaN,
           })),
+          container,
         };
 
         let currentRowIndex = 0;
@@ -361,6 +368,7 @@ function fill(
             currentRowIndex,
             fontSize,
             rotation,
+            verticalAlignment,
           );
 
           currentRow.rowCentroidX = rowCentroidX;
@@ -430,24 +438,34 @@ export function fillTextLayout(
   shapeConstructor: (n: ShapeTreeNode) => any,
   getShapeRowGeometry: (...args: any[]) => RowSpace,
   getRotation: Function,
+  leftAlign: boolean,
+  middleAlign: boolean,
 ) {
-  const { minFontSize, maxFontSize, idealFontSizeJump } = config;
-  const fontSizeMagnification = maxFontSize / minFontSize;
-  const fontSizeJumpCount = Math.round(logarithm(idealFontSizeJump, fontSizeMagnification));
-  const realFontSizeJump = Math.pow(fontSizeMagnification, 1 / fontSizeJumpCount);
-  const fontSizes: Pixels[] = [];
-  for (let i = 0; i <= fontSizeJumpCount; i++) {
-    const fontSize = Math.round(minFontSize * Math.pow(realFontSizeJump, i));
-    if (fontSizes.indexOf(fontSize) === -1) {
-      fontSizes.push(fontSize);
+  const allFontSizes: Pixels[][] = [];
+  for (let l = 0; l <= layers.length; l++) {
+    // get font size spec from config, which layer.fillLabel properties can override
+    const { minFontSize, maxFontSize, idealFontSizeJump } = {
+      ...config,
+      ...(l < layers.length && layers[l].fillLabel),
+    };
+    const fontSizeMagnification = maxFontSize / minFontSize;
+    const fontSizeJumpCount = Math.round(logarithm(idealFontSizeJump, fontSizeMagnification));
+    const realFontSizeJump = Math.pow(fontSizeMagnification, 1 / fontSizeJumpCount);
+    const fontSizes: Pixels[] = [];
+    for (let i = 0; i <= fontSizeJumpCount; i++) {
+      const fontSize = Math.round(minFontSize * Math.pow(realFontSizeJump, i));
+      if (fontSizes.indexOf(fontSize) === -1) {
+        fontSizes.push(fontSize);
+      }
     }
+    allFontSizes.push(fontSizes);
   }
 
   return childNodes.map(
     fill(
       config,
       layers,
-      fontSizes,
+      allFontSizes,
       measure,
       rawTextGetter,
       valueGetter,
@@ -456,6 +474,8 @@ export function fillTextLayout(
       shapeConstructor,
       getShapeRowGeometry,
       getRotation,
+      leftAlign,
+      middleAlign,
     ),
   );
 }