feat(bullet): improve header layout and positioning (#2243)

packages/charts/src/chart_types/bullet_graph/renderer/canvas/bullet_graph.ts

@@ -18,17 +18,19 @@ import { BulletDimensions } from '../../selectors/get_panel_dimensions';
 import { BulletGraphSpec, BulletGraphSubtype } from '../../spec';
 import {
   BulletGraphStyle,
+  FONT_PADDING,
   HEADER_PADDING,
   SUBTITLE_FONT,
   SUBTITLE_FONT_SIZE,
-  SUBTITLE_LINE_HEIGHT,
   TARGET_FONT,
   TARGET_FONT_SIZE,
   TITLE_FONT,
   TITLE_FONT_SIZE,
-  TITLE_LINE_HEIGHT,
+  TITLE_LINE_SPACING,
   VALUE_FONT,
   VALUE_FONT_SIZE,
+  getMaxTargetValueAssent,
+  getTextAscentHeight,
 } from '../../theme';
 
 /** @internal */
@@ -71,7 +73,7 @@ export function renderBulletGraph(
             renderDebugRect(ctx, panel);
           }
 
-          // move into the panel position
+          // move to panel origin
           ctx.translate(panel.x, panel.y);
 
           // paint right border
@@ -94,45 +96,57 @@ export function renderBulletGraph(
           // this helps render the header without considering paddings
           ctx.translate(HEADER_PADDING.left, HEADER_PADDING.top);
 
+          ctx.textBaseline = 'alphabetic';
+
+          const MAX_TARGET_VALUE_ASCENT = getMaxTargetValueAssent(bulletGraph.target);
+          const commonYBaseline = // to share baseline with value and target
+            Math.max(
+              getTextAscentHeight(TITLE_FONT_SIZE, verticalAlignment.maxTitleRows, TITLE_LINE_SPACING) +
+                (verticalAlignment.maxSubtitleRows > 0 ? FONT_PADDING : 0) +
+                getTextAscentHeight(SUBTITLE_FONT_SIZE, verticalAlignment.maxSubtitleRows),
+              verticalAlignment.multiline ? 0 : MAX_TARGET_VALUE_ASCENT,
+            );
+
           // Title
           ctx.fillStyle = props.style.textColor;
-          ctx.textBaseline = 'top';
           ctx.textAlign = 'start';
           ctx.font = cssFontShorthand(TITLE_FONT, TITLE_FONT_SIZE);
-          bulletGraph.title.forEach((titleLine, lineIndex) => {
-            const y = lineIndex * TITLE_LINE_HEIGHT;
-            ctx.fillText(titleLine, 0, y);
-          });
+
+          const titleYBaseline =
+            commonYBaseline -
+            getTextAscentHeight(SUBTITLE_FONT_SIZE, verticalAlignment.maxSubtitleRows) -
+            (verticalAlignment.maxSubtitleRows > 0 ? FONT_PADDING : 0);
+
+          bulletGraph.title
+            .slice()
+            .reverse()
+            .forEach((titleLine, lineIndex) => {
+              const y = titleYBaseline - lineIndex * (getTextAscentHeight(TITLE_FONT_SIZE) + TITLE_LINE_SPACING);
+              ctx.fillText(titleLine, 0, y);
+            });
 
           // Subtitle
           if (bulletGraph.subtitle) {
-            const y = verticalAlignment.maxTitleRows * TITLE_LINE_HEIGHT;
             ctx.font = cssFontShorthand(SUBTITLE_FONT, SUBTITLE_FONT_SIZE);
-            ctx.fillText(bulletGraph.subtitle, 0, y);
+            ctx.fillText(bulletGraph.subtitle, 0, commonYBaseline);
           }
 
           // Value
-          ctx.textBaseline = 'alphabetic';
           ctx.font = cssFontShorthand(VALUE_FONT, VALUE_FONT_SIZE);
           if (!multiline) ctx.textAlign = 'end';
           {
-            const y =
-              verticalAlignment.maxTitleRows * TITLE_LINE_HEIGHT +
-              verticalAlignment.maxSubtitleRows * SUBTITLE_LINE_HEIGHT +
-              (multiline ? TARGET_FONT_SIZE : 0);
+            const y = commonYBaseline + (multiline ? MAX_TARGET_VALUE_ASCENT + FONT_PADDING : 0);
             const x = multiline ? 0 : bulletGraph.header.width - bulletGraph.targetWidth;
+
             ctx.fillText(bulletGraph.value, x, y);
           }
 
           // Target
-          ctx.font = cssFontShorthand(TARGET_FONT, TARGET_FONT_SIZE);
-          if (!multiline) ctx.textAlign = 'end';
-          {
+          if (bulletGraph.target) {
+            ctx.font = cssFontShorthand(TARGET_FONT, TARGET_FONT_SIZE);
+            if (!multiline) ctx.textAlign = 'end';
             const x = multiline ? bulletGraph.valueWidth : bulletGraph.header.width;
-            const y =
-              verticalAlignment.maxTitleRows * TITLE_LINE_HEIGHT +
-              verticalAlignment.maxSubtitleRows * SUBTITLE_LINE_HEIGHT +
-              (multiline ? TARGET_FONT_SIZE : 0);
+            const y = commonYBaseline + (multiline ? MAX_TARGET_VALUE_ASCENT + FONT_PADDING : 0);
             ctx.fillText(bulletGraph.target, x, y);
           }
 

packages/charts/src/chart_types/bullet_graph/renderer/canvas/index.tsx

@@ -140,6 +140,8 @@ class Component extends React.Component<Props> {
       return null;
     }
 
+    const valueLabels = mergeValueLabels(spec.valueLabels);
+
     return (
       <figure
         aria-labelledby={a11y.labelId}
@@ -176,10 +178,11 @@ class Component extends React.Component<Props> {
                   subtitle: datum.subtitle,
                   domain: datum.domain,
                   niceDomain: datum.niceDomain,
-                  valueLabels: mergeValueLabels(spec.valueLabels),
+                  valueLabels,
                   extra: datum.target ? (
                     <span>
-                      target: <strong>{(datum.targetFormatter ?? datum.valueFormatter)(datum.target)}</strong>
+                      {valueLabels.target}:{' '}
+                      <strong>{(datum.targetFormatter ?? datum.valueFormatter)(datum.target)}</strong>
                     </span>
                   ) : undefined,
                 };

packages/charts/src/chart_types/bullet_graph/selectors/get_layout.ts

@@ -15,18 +15,19 @@ import { withTextMeasure } from '../../../utils/bbox/canvas_text_bbox_calculator
 import { Size } from '../../../utils/dimensions';
 import { wrapText } from '../../../utils/text/wrap';
 import {
+  FONT_PADDING,
   HEADER_PADDING,
   SUBTITLE_FONT,
   SUBTITLE_FONT_SIZE,
-  SUBTITLE_LINE_HEIGHT,
   TARGET_FONT,
   TARGET_FONT_SIZE,
   TITLE_FONT,
   TITLE_FONT_SIZE,
-  TITLE_LINE_HEIGHT,
+  TITLE_LINE_SPACING,
   VALUE_FONT,
   VALUE_FONT_SIZE,
-  VALUE_LINE_HEIGHT,
+  getMaxTargetValueAssent,
+  getTextAscentHeight,
 } from '../theme';
 
 /** @internal */
@@ -49,6 +50,7 @@ export interface BulletLayoutAlignment {
   maxTitleRows: number;
   maxSubtitleRows: number;
   multiline: boolean;
+  headerHeight: number;
   minHeight: number;
   minWidth: number;
 }
@@ -107,32 +109,62 @@ export const getLayout = createCustomCachedSelector(
             target: cell.target ? `/ ${(cell.targetFormatter ?? cell.valueFormatter)(cell.target)}` : '',
             datum: cell,
           };
-          const size = {
+          const widths = {
             title: textMeasurer(content.title.trim(), TITLE_FONT, TITLE_FONT_SIZE).width,
             subtitle: content.subtitle ? textMeasurer(content.subtitle, TITLE_FONT, TITLE_FONT_SIZE).width : 0,
             value: textMeasurer(content.value, VALUE_FONT, VALUE_FONT_SIZE).width,
             target: textMeasurer(content.target, TARGET_FONT, TARGET_FONT_SIZE).width,
           };
-          return { content, size };
+          return { content, widths };
         }),
       );
 
-      const goesToMultiline = header.some((row) => {
-        const valueAlignedWithSubtitle = row.some((cell) => cell?.content.subtitle);
+      const valueIsBelowTitles = header.some((row) => {
         return row.some((cell) => {
           if (!cell) return false;
-          const valuesWidth = cell.size.value + cell.size.target;
-          return valueAlignedWithSubtitle
-            ? cell.size.subtitle + valuesWidth > headerSize.width || cell.size.title > headerSize.width
-            : cell.size.title + valuesWidth > headerSize.width;
+          const valuesWidth = cell.widths.value + cell.widths.target;
+          const availableWidth = 0.95 * (headerSize.width - valuesWidth);
+
+          if (
+            availableWidth < 0.5 * headerSize.width &&
+            (cell.widths.title > availableWidth || cell.widths.subtitle > availableWidth)
+          ) {
+            return true;
+          }
+
+          const titleTruncated = wrapText(
+            cell.content.title,
+            TITLE_FONT,
+            TITLE_FONT_SIZE,
+            availableWidth,
+            2,
+            textMeasurer,
+            locale,
+          ).meta.truncated;
+          const subtitleTruncated = cell.content.subtitle
+            ? wrapText(
+                cell.content.subtitle,
+                SUBTITLE_FONT,
+                SUBTITLE_FONT_SIZE,
+                availableWidth,
+                1,
+                textMeasurer,
+                locale,
+              ).meta.truncated
+            : false;
+
+          return titleTruncated || subtitleTruncated;
         });
       });
 
       const headerLayout = header.map((row) => {
         return row.map((cell) => {
           if (!cell) return null;
 
-          if (goesToMultiline) {
+          const valuesWidth = cell.widths.value + cell.widths.target;
+          const availableWidth = 0.95 * (headerSize.width - valuesWidth);
+
+          if (valueIsBelowTitles) {
             return {
               panel,
               header: headerSize,
@@ -160,48 +192,64 @@ export const getLayout = createCustomCachedSelector(
               value: cell.content.value,
               target: cell.content.target,
               multiline: true,
-              valueWidth: cell.size.value,
-              targetWidth: cell.size.target,
-              sizes: cell.size,
+              valueWidth: cell.widths.value,
+              targetWidth: cell.widths.target,
+              sizes: cell.widths,
               datum: cell.content.datum,
             };
           }
 
           return {
             panel,
             header: headerSize,
-            title: [cell.content.title],
-            subtitle: cell.content.subtitle ? cell.content.subtitle : undefined,
+            title: wrapText(cell.content.title, TITLE_FONT, TITLE_FONT_SIZE, availableWidth, 2, textMeasurer, locale),
+            subtitle: cell.content.subtitle
+              ? wrapText(
+                  cell.content.subtitle,
+                  SUBTITLE_FONT,
+                  SUBTITLE_FONT_SIZE,
+                  availableWidth,
+                  1,
+                  textMeasurer,
+                  locale,
+                )[0]
+              : undefined,
             value: cell.content.value,
             target: cell.content.target,
             multiline: false,
-            valueWidth: cell.size.value,
-            targetWidth: cell.size.target,
-            sizes: cell.size,
+            valueWidth: cell.widths.value,
+            targetWidth: cell.widths.target,
+            sizes: cell.widths,
             datum: cell.content.datum,
           };
         });
       });
       const layoutAlignment = headerLayout.map((curr) => {
-        return curr.reduce(
+        return curr.reduce<BulletLayoutAlignment>(
           (rowStats, cell) => {
+            const MAX_TARGET_VALUE_ASCENT = getMaxTargetValueAssent(cell?.target);
+            const multiline = cell?.multiline ?? false;
             const maxTitleRows = Math.max(rowStats.maxTitleRows, cell?.title.length ?? 0);
             const maxSubtitleRows = Math.max(rowStats.maxSubtitleRows, cell?.subtitle ? 1 : 0);
+            const leftHeaderHeight =
+              getTextAscentHeight(TITLE_FONT_SIZE, maxTitleRows, TITLE_LINE_SPACING) +
+              (maxSubtitleRows > 0 ? FONT_PADDING : 0) +
+              getTextAscentHeight(SUBTITLE_FONT_SIZE, maxSubtitleRows) +
+              (cell?.multiline ? MAX_TARGET_VALUE_ASCENT + FONT_PADDING : 0);
+            const rightHeaderHeight = cell?.multiline ? 0 : MAX_TARGET_VALUE_ASCENT;
+            const headerHeight =
+              Math.max(leftHeaderHeight, rightHeaderHeight) + HEADER_PADDING.top + HEADER_PADDING.bottom;
+
             return {
+              multiline,
               maxTitleRows,
               maxSubtitleRows,
-              multiline: cell?.multiline ?? false,
-              minHeight:
-                maxTitleRows * TITLE_LINE_HEIGHT +
-                maxSubtitleRows * SUBTITLE_LINE_HEIGHT +
-                (cell?.multiline ? VALUE_LINE_HEIGHT : 0) +
-                HEADER_PADDING.top +
-                HEADER_PADDING.bottom +
-                minChartHeights[spec.subtype],
+              headerHeight,
+              minHeight: headerHeight + minChartHeights[spec.subtype],
               minWidth: minChartWidths[spec.subtype],
             };
           },
-          { maxTitleRows: 0, maxSubtitleRows: 0, multiline: false, minHeight: 0, minWidth: 0 },
+          { maxTitleRows: 0, maxSubtitleRows: 0, multiline: false, headerHeight: 0, minHeight: 0, minWidth: 0 },
         );
       });
 

packages/charts/src/chart_types/bullet_graph/selectors/get_panel_dimensions.ts

@@ -21,14 +21,7 @@ import { GenericDomain, Range } from '../../../utils/domain';
 import { Point } from '../../../utils/point';
 import { ANGULAR_TICK_INTERVAL, TICK_INTERVAL } from '../renderer/canvas/constants';
 import { BulletDatum, BulletGraphSpec, BulletGraphSubtype } from '../spec';
-import {
-  BulletGraphStyle,
-  GRAPH_PADDING,
-  HEADER_PADDING,
-  SUBTITLE_LINE_HEIGHT,
-  TITLE_LINE_HEIGHT,
-  VALUE_LINE_HEIGHT,
-} from '../theme';
+import { BulletGraphStyle, GRAPH_PADDING } from '../theme';
 import { getAngledChartSizing, getAnglesBySize } from '../utils/angular';
 import { ColorTick, getColorBands } from '../utils/color';
 import { TickOptions, getTicks } from '../utils/ticks';
@@ -78,13 +71,7 @@ export const getPanelDimensions = createCustomCachedSelector(
 
         const graphSize = {
           width: panel.width,
-          height:
-            panel.height -
-            HEADER_PADDING.top -
-            verticalAlignment.maxTitleRows * TITLE_LINE_HEIGHT -
-            verticalAlignment.maxSubtitleRows * SUBTITLE_LINE_HEIGHT -
-            (multiline ? VALUE_LINE_HEIGHT : 0) -
-            HEADER_PADDING.bottom,
+          height: panel.height - verticalAlignment.headerHeight,
         };
 
         return {