@pushwoosh/kit-charts 0.0.1 → 0.0.3

package/core/Chart/PlotDecorations.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DEFAULT_FONT_SIZE, textHeight } from '../layout/measure-text';
-import { crisp, PLOT_LABEL_GAP } from '../layout/metrics';
-import { DEFAULT_AXIS_COLOR, DEFAULT_MUTED_TEXT_COLOR, DEFAULT_SURFACE_COLOR } from '../model/palette';
+import { DEFAULT_FONT_SIZE, measureText, textAscent, textHeight } from '../layout/measure-text';
+import { crisp, PLOT_BADGE_PADDING_X, PLOT_BADGE_PADDING_Y, PLOT_BADGE_RADIUS, PLOT_LABEL_GAP } from '../layout/metrics';
+import { DEFAULT_AXIS_COLOR, DEFAULT_MUTED_TEXT_COLOR, DEFAULT_SURFACE_COLOR, textColorOn } from '../model/palette';
 import { ABOVE_SERIES_Z_INDEX } from '../types/options';
 const DASH = {
   solid: undefined,
@@ -28,51 +28,70 @@ function project(scale, value, edge) {
   const at = scale.map(numeric);
   return typeof at === 'number' ? at : null;
 }
-const textProps = style => ({
-  fill: (style === null || style === void 0 ? void 0 : style.color) ?? DEFAULT_MUTED_TEXT_COLOR,
-  fontFamily: style === null || style === void 0 ? void 0 : style.fontFamily,
-  fontSize: (style === null || style === void 0 ? void 0 : style.fontSize) ?? DEFAULT_FONT_SIZE,
-  fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight
+const textProps = (style, onFill) => ({
+  fill: style?.color ?? (onFill ? textColorOn(onFill) : DEFAULT_MUTED_TEXT_COLOR),
+  fontFamily: style?.fontFamily,
+  fontSize: style?.fontSize ?? DEFAULT_FONT_SIZE,
+  fontWeight: style?.fontWeight
 });
 const ANCHOR = {
   left: 'start',
   center: 'middle',
   right: 'end'
 };
+/**
+ * `align` is horizontal and `verticalAlign` vertical whichever way the
+ * decoration runs, as in Highcharts — a horizontal line takes its label to the
+ * left edge of the plot and sits it on the rule.
+ */
 function PlotLabel({
   label,
-  plot,
-  span,
+  box,
   along
 }) {
-  if (!(label !== null && label !== void 0 && label.text)) {
+  if (!label?.text) {
     return null;
   }
-  const [low, high] = span[0] <= span[1] ? span : [span[1], span[0]];
   const align = label.align ?? (along === 'x' ? 'center' : 'left');
   const verticalAlign = label.verticalAlign ?? (along === 'x' ? 'top' : 'middle');
-  const acrossLow = along === 'x' ? plot.y : plot.x;
-  const acrossHigh = along === 'x' ? plot.y + plot.height : plot.x + plot.width;
-  const alongAt = {
-    left: low,
-    center: (low + high) / 2,
-    right: high
-  }[align];
-  const acrossAt = {
-    top: acrossLow + PLOT_LABEL_GAP + textHeight(label.style),
-    middle: (acrossLow + acrossHigh) / 2,
-    bottom: acrossHigh - PLOT_LABEL_GAP
-  }[verticalAlign];
-  const x = (along === 'x' ? alongAt : acrossAt) + (label.x ?? 0);
-  const y = (along === 'x' ? acrossAt : alongAt) + (label.y ?? 0);
+  const line = textHeight(label.style);
+  const ascent = textAscent(label.style);
+  const x = {
+    left: box.x + PLOT_LABEL_GAP,
+    center: box.x + box.width / 2,
+    right: box.x + box.width - PLOT_LABEL_GAP
+  }[align] + (label.x ?? 0);
+  const y = {
+    top: box.y + PLOT_LABEL_GAP + ascent,
+    middle: box.y + box.height / 2 + ascent - line / 2,
+    bottom: box.y + box.height - PLOT_LABEL_GAP - (line - ascent)
+  }[verticalAlign] + (label.y ?? 0);
   const rotation = label.rotation ?? 0;
-  return _jsx("text", {
-    x: x,
-    y: y,
-    textAnchor: along === 'x' ? ANCHOR[align] : 'start',
+  const fill = label.backgroundColor;
+  const padX = label.padding ?? PLOT_BADGE_PADDING_X;
+  const padY = label.padding ?? PLOT_BADGE_PADDING_Y;
+  const width = measureText(label.text, label.style) + padX * 2;
+  const height = line + padY * 2;
+  return _jsxs("g", {
     transform: rotation === 0 ? undefined : `rotate(${rotation} ${x} ${y})`,
-    ...textProps(label.style),
-    children: label.text
+    children: [fill && _jsx("rect", {
+      x: {
+        left: x - padX,
+        center: x - width / 2,
+        right: x - width + padX
+      }[align],
+      y: y - ascent - padY,
+      width: width,
+      height: height,
+      rx: label.borderRadius ?? PLOT_BADGE_RADIUS,
+      fill: fill
+    }), _jsx("text", {
+      x: x,
+      y: y,
+      textAnchor: ANCHOR[align],
+      ...textProps(label.style, fill),
+      children: label.text
+    })]
   });
 }
 /**
@@ -124,8 +143,7 @@ export function PlotDecorations({
         strokeWidth: options_.borderWidth ?? 0
       }), _jsx(PlotLabel, {
         label: options_.label,
-        plot: plot,
-        span: [low, high],
+        box: box,
         along: along
       })]
     }, `band-${index}`);
@@ -159,8 +177,17 @@ export function PlotDecorations({
         strokeDasharray: DASH[options_.dashStyle ?? 'solid']
       }), _jsx(PlotLabel, {
         label: options_.label,
-        plot: plot,
-        span: [at, at],
+        box: along === 'x' ? {
+          x: on,
+          y: plot.y,
+          width: 0,
+          height: plot.height
+        } : {
+          x: plot.x,
+          y: on,
+          width: plot.width,
+          height: 0
+        },
         along: along
       })]
     }, `line-${index}`);

package/core/Chart/StackLabels.js

@@ -6,7 +6,6 @@ import { DEFAULT_TEXT_COLOR } from '../model/palette';
 function collectTotals(model, axisIndex) {
   const totals = new Map();
   model.series.forEach(series => {
-    var _model$yAxes$axisInde;
     if ((series.options.yAxis ?? 0) !== axisIndex) {
       return;
     }
@@ -14,7 +13,7 @@ function collectTotals(model, axisIndex) {
     if (!stacked) {
       return;
     }
-    const yScale = (_model$yAxes$axisInde = model.yAxes[axisIndex]) === null || _model$yAxes$axisInde === void 0 ? void 0 : _model$yAxes$axisInde.scale;
+    const yScale = model.yAxes[axisIndex]?.scale;
     if (!yScale || yScale.kind === 'band' || yScale.kind === 'color') {
       return;
     }
@@ -47,7 +46,7 @@ export function StackLabels({
 }) {
   const labels = model.yAxes.flatMap((axis, axisIndex) => {
     const options = axis.options.stackLabels;
-    if (!(options !== null && options !== void 0 && options.enabled)) {
+    if (!options?.enabled) {
       return [];
     }
     const style = options.style;
@@ -68,10 +67,10 @@ export function StackLabels({
         x: total.px,
         y: total.py - VALUE_LABEL_GAP,
         textAnchor: "middle",
-        fill: (style === null || style === void 0 ? void 0 : style.color) ?? DEFAULT_TEXT_COLOR,
-        fontFamily: style === null || style === void 0 ? void 0 : style.fontFamily,
-        fontSize: (style === null || style === void 0 ? void 0 : style.fontSize) ?? DEFAULT_FONT_SIZE,
-        fontWeight: (style === null || style === void 0 ? void 0 : style.fontWeight) ?? '600',
+        fill: style?.color ?? DEFAULT_TEXT_COLOR,
+        fontFamily: style?.fontFamily,
+        fontSize: style?.fontSize ?? DEFAULT_FONT_SIZE,
+        fontWeight: style?.fontWeight ?? '600',
         children: content
       }, `sl-${axis.id}-${total.key}`);
     });

package/core/Chart/Titles.js

@@ -46,22 +46,19 @@ export function Titles({
     return null;
   }
   return _jsx("g", {
-    children: entries.map(entry => {
-      var _entry$style, _entry$style2, _entry$style3;
-      return _jsxs("g", {
-        children: [_jsx("text", {
-          x: entry.x,
-          y: entry.y,
-          textAnchor: entry.anchor,
-          fill: ((_entry$style = entry.style) === null || _entry$style === void 0 ? void 0 : _entry$style.color) ?? COLOR[entry.key],
-          fontFamily: (_entry$style2 = entry.style) === null || _entry$style2 === void 0 ? void 0 : _entry$style2.fontFamily,
-          fontSize: entry.fontSize ?? DEFAULT_FONT_SIZE,
-          fontWeight: ((_entry$style3 = entry.style) === null || _entry$style3 === void 0 ? void 0 : _entry$style3.fontWeight) ?? WEIGHT[entry.key],
-          children: entry.text
-        }), entry.hint ? _jsx(Hint, {
-          hint: entry.hint
-        }) : null]
-      }, entry.key);
-    })
+    children: entries.map(entry => _jsxs("g", {
+      children: [_jsx("text", {
+        x: entry.x,
+        y: entry.y,
+        textAnchor: entry.anchor,
+        fill: entry.style?.color ?? COLOR[entry.key],
+        fontFamily: entry.style?.fontFamily,
+        fontSize: entry.fontSize ?? DEFAULT_FONT_SIZE,
+        fontWeight: entry.style?.fontWeight ?? WEIGHT[entry.key],
+        children: entry.text
+      }), entry.hint ? _jsx(Hint, {
+        hint: entry.hint
+      }) : null]
+    }, entry.key))
   });
 }

package/core/Chart/Tooltip.js

@@ -11,10 +11,9 @@ export function Tooltip({
   pointer,
   children
 }) {
-  var _options$style, _options$style2, _options$style3, _options$style4;
   const ref = useRef(null);
-  const callout = ((options === null || options === void 0 ? void 0 : options.shape) ?? 'callout') === 'callout' && !(options !== null && options !== void 0 && options.followPointer);
-  const target = options !== null && options !== void 0 && options.followPointer ? pointer : at;
+  const callout = (options?.shape ?? 'callout') === 'callout' && !options?.followPointer;
+  const target = options?.followPointer ? pointer : at;
   const [placement, setPlacement] = useState({
     x: target.x + TOOLTIP_CURSOR_OFFSET,
     y: target.y + TOOLTIP_CURSOR_OFFSET,
@@ -57,25 +56,25 @@ export function Tooltip({
   if (typeof document === 'undefined') {
     return null;
   }
-  const shadow = options === null || options === void 0 ? void 0 : options.shadow;
+  const shadow = options?.shadow;
   // A table needs room and columns; the dark hint chrome reads badly at that size,
   // so the tabular tooltip is a light card unless the caller says otherwise.
-  const tabular = Boolean(options === null || options === void 0 ? void 0 : options.table);
-  const background = (options === null || options === void 0 ? void 0 : options.backgroundColor) ?? (tabular ? DEFAULTS.surface : DEFAULTS.tooltipSurface);
-  const color = (options === null || options === void 0 || (_options$style = options.style) === null || _options$style === void 0 ? void 0 : _options$style.color) ?? (tabular ? DEFAULTS.text : DEFAULTS.tooltipText);
+  const tabular = Boolean(options?.table);
+  const background = options?.backgroundColor ?? (tabular ? DEFAULTS.surface : DEFAULTS.tooltipSurface);
+  const color = options?.style?.color ?? (tabular ? DEFAULTS.text : DEFAULTS.tooltipText);
   return createPortal(_jsxs(TooltipBox, {
     ref: ref,
     role: "tooltip",
     "$x": placement.x,
     "$y": placement.y,
-    "$padding": (options === null || options === void 0 ? void 0 : options.padding) ?? TOOLTIP_PADDING,
-    "$radius": (options === null || options === void 0 ? void 0 : options.borderRadius) ?? TOOLTIP_RADIUS,
-    "$borderColor": (options === null || options === void 0 ? void 0 : options.borderColor) ?? (tabular ? DEFAULTS.border : 'transparent'),
+    "$padding": options?.padding ?? TOOLTIP_PADDING,
+    "$radius": options?.borderRadius ?? TOOLTIP_RADIUS,
+    "$borderColor": options?.borderColor ?? (tabular ? DEFAULTS.border : 'transparent'),
     "$background": background,
     "$color": color,
-    "$fontFamily": (options === null || options === void 0 || (_options$style2 = options.style) === null || _options$style2 === void 0 ? void 0 : _options$style2.fontFamily) ?? DEFAULTS.fontFamily,
-    "$fontSize": (options === null || options === void 0 || (_options$style3 = options.style) === null || _options$style3 === void 0 ? void 0 : _options$style3.fontSize) ?? DEFAULTS.fontSize,
-    "$whiteSpace": (options === null || options === void 0 || (_options$style4 = options.style) === null || _options$style4 === void 0 ? void 0 : _options$style4.whiteSpace) ?? 'nowrap',
+    "$fontFamily": options?.style?.fontFamily ?? DEFAULTS.fontFamily,
+    "$fontSize": options?.style?.fontSize ?? DEFAULTS.fontSize,
+    "$whiteSpace": options?.style?.whiteSpace ?? 'nowrap',
     "$shadow": shadow ? `${shadow.offsetX ?? 0}px ${shadow.offsetY ?? 2}px ${shadow.width ?? 8}px ` + `${shadow.color ?? SHADOW_COLOR}` : DEFAULT_SHADOW,
     children: [children, placement.tailX === null ? null : _jsx(Tail, {
       "$left": placement.tailX,

package/core/data/points.js

@@ -15,7 +15,7 @@ const isPointObject = point => typeof point === 'object' && point !== null && !A
 /** What a hit or a tooltip should show for the point's x: its category, else its x. */
 export const pointKey = point => point.band ?? point.name ?? point.x;
 export function normalizePoints(data, seriesName = 'series') {
-  if (!(data !== null && data !== void 0 && data.length)) {
+  if (!data?.length) {
     return [];
   }
   return data.map((point, index) => {

package/core/geometry/path.js

@@ -24,8 +24,7 @@ export function projectSeries(ctx) {
     return [];
   }
   return ctx.points.map((point, index) => {
-    var _ctx$stacked;
-    const stacked = (_ctx$stacked = ctx.stacked) === null || _ctx$stacked === void 0 ? void 0 : _ctx$stacked[index];
+    const stacked = ctx.stacked?.[index];
     if (point.y === null || ctx.hiddenPoints.has(point.index) || ctx.stacked && !stacked) {
       return null;
     }

package/core/layout/legend-layout.js

@@ -1,16 +1,16 @@
 import { measureText, textHeight } from './measure-text';
 import { LEGEND_BLOCK_GAP, LEGEND_ROW_GAP } from './metrics';
 const itemWidth = (item, options) => {
-  const symbolSize = (options === null || options === void 0 ? void 0 : options.symbolHeight) ?? 8;
-  return symbolSize + ((options === null || options === void 0 ? void 0 : options.symbolPadding) ?? 6) + measureText(item.label, options === null || options === void 0 ? void 0 : options.itemStyle);
+  const symbolSize = options?.symbolHeight ?? 8;
+  return symbolSize + (options?.symbolPadding ?? 6) + measureText(item.label, options?.itemStyle);
 };
 export function measureLegend(items, options) {
-  const rowHeight = textHeight(options === null || options === void 0 ? void 0 : options.itemStyle);
-  const vertical = ((options === null || options === void 0 ? void 0 : options.layout) ?? 'horizontal') === 'vertical';
+  const rowHeight = textHeight(options?.itemStyle);
+  const vertical = (options?.layout ?? 'horizontal') === 'vertical';
   // A middle-aligned legend has nowhere to go above or below the plot, so it
   // takes a column at the side instead — the same trade Highcharts makes.
-  const beside = ((options === null || options === void 0 ? void 0 : options.verticalAlign) ?? 'bottom') === 'middle';
-  if (!items.length || (options === null || options === void 0 ? void 0 : options.enabled) === false) {
+  const beside = (options?.verticalAlign ?? 'bottom') === 'middle';
+  if (!items.length || options?.enabled === false) {
     return {
       width: 0,
       height: 0,
@@ -43,10 +43,10 @@ export function measureLegend(items, options) {
  */
 export function layoutLegend(items, options, plot, size, spacing) {
   const metrics = measureLegend(items, options);
-  const distance = (options === null || options === void 0 ? void 0 : options.itemDistance) ?? 16;
-  const align = (options === null || options === void 0 ? void 0 : options.align) ?? 'left';
-  const shiftX = (options === null || options === void 0 ? void 0 : options.x) ?? 0;
-  const shiftY = (options === null || options === void 0 ? void 0 : options.y) ?? 0;
+  const distance = options?.itemDistance ?? 16;
+  const align = options?.align ?? 'left';
+  const shiftX = options?.x ?? 0;
+  const shiftY = options?.y ?? 0;
   const widths = items.map(item => itemWidth(item, options));
   const rowStep = metrics.rowHeight + LEGEND_ROW_GAP;
   if (metrics.vertical || metrics.beside) {
@@ -65,7 +65,7 @@ export function layoutLegend(items, options, plot, size, spacing) {
       if (metrics.beside) {
         return plot.y + (plot.height - block) / 2 + metrics.rowHeight / 2;
       }
-      return ((options === null || options === void 0 ? void 0 : options.verticalAlign) ?? 'bottom') === 'top' ? plot.y - metrics.height + metrics.rowHeight : plot.y + plot.height + metrics.rowHeight + LEGEND_ROW_GAP;
+      return (options?.verticalAlign ?? 'bottom') === 'top' ? plot.y - metrics.height + metrics.rowHeight : plot.y + plot.height + metrics.rowHeight + LEGEND_ROW_GAP;
     })();
     return {
       metrics,
@@ -88,7 +88,7 @@ export function layoutLegend(items, options, plot, size, spacing) {
   // Sit on the last row inside the chart's bottom spacing, not on the canvas
   // edge: flush with the edge, the row's own descenders and its focus ring are
   // cut off by the viewport.
-  const y = ((options === null || options === void 0 ? void 0 : options.verticalAlign) ?? 'bottom') === 'top' ? plot.y - metrics.height + metrics.rowHeight : size.height - spacing[2] - metrics.rowHeight / 2;
+  const y = (options?.verticalAlign ?? 'bottom') === 'top' ? plot.y - metrics.height + metrics.rowHeight : size.height - spacing[2] - metrics.rowHeight / 2;
   const offsets = widths.reduce((acc, _width, index) => {
     acc.push(index === 0 ? startX : acc[index - 1] + widths[index - 1] + distance);
     return acc;

package/core/layout/measure-text.d.ts

@@ -6,4 +6,9 @@ export declare const DEFAULT_SUBTITLE_FONT_SIZE: string;
 export declare const toCssFont: (style?: TextStyle) => string;
 export declare function measureText(text: string, style?: TextStyle): number;
 export declare const textHeight: (style?: TextStyle) => number;
+/**
+ * How much of a line box stands above the baseline. Drawing a box around text
+ * needs the split, not just the height: SVG places text by its baseline.
+ */
+export declare const textAscent: (style?: TextStyle) => number;
 export declare function clearTextMeasurementCache(): void;

package/core/layout/measure-text.js

@@ -17,9 +17,9 @@ export const DEFAULT_FONT_FAMILY = FontFamily.MAIN;
 export const DEFAULT_TITLE_FONT_SIZE = FontSize.HEADING2;
 export const DEFAULT_SUBTITLE_FONT_SIZE = FontSize.SMALL;
 export const toCssFont = style => {
-  const weight = (style === null || style === void 0 ? void 0 : style.fontWeight) ?? 'normal';
-  const size = (style === null || style === void 0 ? void 0 : style.fontSize) ?? DEFAULT_FONT_SIZE;
-  const family = (style === null || style === void 0 ? void 0 : style.fontFamily) ?? DEFAULT_FONT_FAMILY;
+  const weight = style?.fontWeight ?? 'normal';
+  const size = style?.fontSize ?? DEFAULT_FONT_SIZE;
+  const family = style?.fontFamily ?? DEFAULT_FONT_FAMILY;
   return `${weight} ${size} ${family}`;
 };
 const parseFontSize = font => {
@@ -51,6 +51,11 @@ export function measureText(text, style) {
   return width;
 }
 export const textHeight = style => Math.ceil(parseFontSize(toCssFont(style)) * 1.2);
+/**
+ * How much of a line box stands above the baseline. Drawing a box around text
+ * needs the split, not just the height: SVG places text by its baseline.
+ */
+export const textAscent = style => Math.round(textHeight(style) * 0.8);
 export function clearTextMeasurementCache() {
   cache.clear();
   context = undefined;

package/core/layout/metrics.d.ts

@@ -48,6 +48,13 @@ export declare const TOOLTIP_PADDING = 8;
 export declare const TOOLTIP_RADIUS = 6;
 /** Distance from a plot band or plot line to its own label. */
 export declare const PLOT_LABEL_GAP = 6;
+/**
+ * A plot label drawn on a fill: its padding and corner radius. Wider than it is
+ * tall, because a pill reads as a pill only when the text has room either side.
+ */
+export declare const PLOT_BADGE_PADDING_X = 6;
+export declare const PLOT_BADGE_PADDING_Y = 2;
+export declare const PLOT_BADGE_RADIUS = 4;
 /**
  * Puts a stroke where the device can draw it in one row of pixels: half a stroke
  * either side of the position has to land on a pixel boundary, so an odd stroke

package/core/layout/metrics.js

@@ -48,6 +48,13 @@ export const TOOLTIP_PADDING = 8;
 export const TOOLTIP_RADIUS = 6;
 /** Distance from a plot band or plot line to its own label. */
 export const PLOT_LABEL_GAP = 6;
+/**
+ * A plot label drawn on a fill: its padding and corner radius. Wider than it is
+ * tall, because a pill reads as a pill only when the text has room either side.
+ */
+export const PLOT_BADGE_PADDING_X = 6;
+export const PLOT_BADGE_PADDING_Y = 2;
+export const PLOT_BADGE_RADIUS = 4;
 /**
  * Puts a stroke where the device can draw it in one row of pixels: half a stroke
  * either side of the position has to land on a pixel boundary, so an odd stroke

package/core/layout/title-layout.js

@@ -5,14 +5,8 @@ const ANCHOR = {
   center: 'middle',
   right: 'end'
 };
-const shown = title => {
-  var _title$style;
-  return Boolean(title === null || title === void 0 ? void 0 : title.text) && (title === null || title === void 0 || (_title$style = title.style) === null || _title$style === void 0 ? void 0 : _title$style.display) !== 'none';
-};
-const sizeOf = (title, fallback) => {
-  var _title$style2;
-  return (title === null || title === void 0 || (_title$style2 = title.style) === null || _title$style2 === void 0 ? void 0 : _title$style2.fontSize) ?? fallback;
-};
+const shown = title => Boolean(title?.text) && title?.style?.display !== 'none';
+const sizeOf = (title, fallback) => title?.style?.fontSize ?? fallback;
 export function layoutTitles(options, size, spacing) {
   const [spaceTop, spaceRight,, spaceLeft] = spacing;
   const {
@@ -22,13 +16,13 @@ export function layoutTitles(options, size, spacing) {
   const entries = [];
   const push = (key, source, fontSize, top) => {
     const height = textHeight({
-      ...(source === null || source === void 0 ? void 0 : source.style),
+      ...source?.style,
       fontSize
     });
     if (!shown(source)) {
       return 0;
     }
-    const align = (source === null || source === void 0 ? void 0 : source.align) ?? 'left';
+    const align = source?.align ?? 'left';
     const x = (() => {
       if (align === 'center') {
         return size.width / 2;
@@ -38,10 +32,10 @@ export function layoutTitles(options, size, spacing) {
       }
       return spaceLeft;
     })();
-    const text = (source === null || source === void 0 ? void 0 : source.text) ?? '';
+    const text = source?.text ?? '';
     const baseline = top + height;
     const width = measureText(text, {
-      ...(source === null || source === void 0 ? void 0 : source.style),
+      ...source?.style,
       fontSize
     });
     // The icon follows the text, wherever the anchor put it.
@@ -61,9 +55,9 @@ export function layoutTitles(options, size, spacing) {
       // `y` is a baseline, so the first line starts one line height down.
       y: baseline,
       anchor: ANCHOR[align],
-      style: source === null || source === void 0 ? void 0 : source.style,
+      style: source?.style,
       fontSize,
-      hint: source !== null && source !== void 0 && source.hint ? {
+      hint: source?.hint ? {
         text: source.hint,
         x: textEnd + HINT_ICON_GAP + HINT_ICON_SIZE / 2,
         y: baseline - textHeight({
@@ -76,7 +70,7 @@ export function layoutTitles(options, size, spacing) {
   const titleHeight = push('title', title, sizeOf(title, DEFAULT_TITLE_FONT_SIZE), spaceTop);
   // The caption shares the title's row, pushed to the far edge: the note about
   // what the figures cover belongs beside the name, not under it.
-  if (title !== null && title !== void 0 && title.caption) {
+  if (title?.caption) {
     push('caption', {
       text: title.caption,
       align: 'right',