@pushwoosh/kit-charts 0.0.6 → 0.0.7

package/ai-documentation.md

@@ -94,8 +94,15 @@ never falls below 1.
 
 `labels.allowOverlap` defaults to false on both axes and on data labels. A label
 whose box would run into one already placed loses its text — Highcharts hides
-the label and keeps the tick, and so do we. A data-label formatter returning an
-element cannot be measured, so it is always drawn.
+the label and keeps the tick, and so do we.
+
+An axis or data-label `formatter` may return a `ReactNode` and not just text; the
+axis draws the node and measures the text inside it, so an edge label still turns
+inwards and the y gutter still widens. A node the walk cannot read text out of —
+a bare shape, a component — measures as a point: it is always drawn, and a text
+label too close to it is dropped as it would be beside any other label. Inside an
+axis label the node lands in an SVG `<text>`, so `<tspan>` and strings render and
+an HTML element does not.
 
 ## Plot bands and lines
 

package/core/Chart/Axes.js

@@ -14,6 +14,13 @@ const ANCHOR = {
   center: 'middle',
   right: 'end'
 };
+/** What a tick draws: its own node if a formatter made one, its text otherwise. */
+const tickContent = tick => {
+  if (tick.node !== undefined && tick.node !== null) {
+    return tick.node;
+  }
+  return tick.label === '' ? null : tick.label;
+};
 /** A tick label, wrapped in its explanation when the axis gave it one. */
 function TickLabel({
   hint,
@@ -125,23 +132,26 @@ export function XAxis({
       y2: crisp(baseline, options.lineWidth ?? 1),
       stroke: lineColor,
       strokeWidth: options.lineWidth ?? 1
-    }), axis.ticks.map(tick => _jsxs("g", {
-      children: [tickLength > 0 && tickWidth > 0 ? _jsx("line", {
-        x1: crisp(tick.position, tickWidth),
-        x2: crisp(tick.position, tickWidth),
-        y1: crisp(baseline, tickWidth),
-        y2: crisp(baseline + direction * tickLength, tickWidth),
-        stroke: options.tickColor ?? lineColor,
-        strokeWidth: tickWidth
-      }) : null, labelsEnabled && tick.label ? _jsx(TickLabel, {
-        hint: tick.hint,
-        x: tick.position + (options.labels?.x ?? 0),
-        y: labelY,
-        anchor: tick.anchor,
-        style: options.labels?.style,
-        children: tick.label
-      }) : null]
-    }, `x-${tick.value}`)), _jsx(AxisTitle, {
+    }), axis.ticks.map(tick => {
+      const content = tickContent(tick);
+      return _jsxs("g", {
+        children: [tickLength > 0 && tickWidth > 0 ? _jsx("line", {
+          x1: crisp(tick.position, tickWidth),
+          x2: crisp(tick.position, tickWidth),
+          y1: crisp(baseline, tickWidth),
+          y2: crisp(baseline + direction * tickLength, tickWidth),
+          stroke: options.tickColor ?? lineColor,
+          strokeWidth: tickWidth
+        }) : null, labelsEnabled && content !== null ? _jsx(TickLabel, {
+          hint: tick.hint,
+          x: tick.position + (options.labels?.x ?? 0),
+          y: labelY,
+          anchor: tick.anchor,
+          style: options.labels?.style,
+          children: content
+        }) : null]
+      }, `x-${tick.value}`);
+    }), _jsx(AxisTitle, {
       title: options.title,
       x: plot.x + plot.width / 2,
       y: labelY + direction * ((options.title?.offset ?? 0) + X_AXIS_TITLE_GAP),
@@ -173,14 +183,17 @@ export function YAxis({
   const titleShift = outwards ? Math.ceil(columnWidth * (anchor === 'middle' ? 0.5 : 1)) + AXIS_TITLE_GAP : 0;
   const titleX = onRight ? edge + titleShift + (options.title?.offset ?? 0) : edge - titleShift - (options.title?.offset ?? 0);
   return _jsxs("g", {
-    children: [labelsEnabled ? axis.ticks.map(tick => tick.label ? _jsx(TickLabel, {
-      x: edge + (options.labels?.x ?? 0),
-      y: tick.position + TEXT_BASELINE_SHIFT,
-      anchor: anchor,
-      hint: tick.hint,
-      style: options.labels?.style,
-      children: tick.label
-    }, `y-${tick.value}`) : null) : null, _jsx(AxisTitle, {
+    children: [labelsEnabled ? axis.ticks.map(tick => {
+      const content = tickContent(tick);
+      return content === null ? null : _jsx(TickLabel, {
+        x: edge + (options.labels?.x ?? 0),
+        y: tick.position + TEXT_BASELINE_SHIFT,
+        anchor: anchor,
+        hint: tick.hint,
+        style: options.labels?.style,
+        children: content
+      }, `y-${tick.value}`);
+    }) : null, _jsx(AxisTitle, {
       title: options.title,
       x: titleX,
       y: titleY(options, plot),

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

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+/** The text a node prints, for the layout that has to measure it. */
+export declare function nodeText(node: ReactNode): string;

package/core/layout/node-text.js

@@ -0,0 +1,14 @@
+import { isValidElement } from 'react';
+/** The text a node prints, for the layout that has to measure it. */
+export function nodeText(node) {
+  if (typeof node === 'string' || typeof node === 'number') {
+    return String(node);
+  }
+  if (Array.isArray(node)) {
+    return node.map(child => nodeText(child)).join('');
+  }
+  if (isValidElement(node)) {
+    return nodeText(node.props.children);
+  }
+  return '';
+}

package/core/model/build-model.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 import { type NormalizedPoint } from '../data/points';
 import { type TitleEntry } from '../layout/title-layout';
 import { type Rect, type Size, type SlotGeometry, type Spacing } from '../types/geometry';
@@ -24,6 +25,8 @@ export interface AxisTick {
     value: number | string;
     position: number;
     label: string;
+    /** What the axis draws where a formatter returned something other than text. */
+    node?: ReactNode;
     anchor: TickAnchor;
     /** Sentence this tick explains itself with, opened from the label on hover. */
     hint?: string;

package/core/model/build-model.js

@@ -4,6 +4,7 @@ import { applyValueFormat, formatTime } from '../format/time';
 import { measureLegend } from '../layout/legend-layout';
 import { measureText, textHeight } from '../layout/measure-text';
 import { AXIS_GUTTER_PADDING, AXIS_LABEL_GAP, AXIS_TITLE_GAP, MARKER_REACH, VALUE_LABEL_HEADROOM, X_AXIS_LABEL_DROP } from '../layout/metrics';
+import { nodeText } from '../layout/node-text';
 import { computeSlots } from '../layout/point-width';
 import { layoutTitles } from '../layout/title-layout';
 import { resolveAxes, resolveSeries, isSeriesVisible } from '../options/normalize';
@@ -17,6 +18,10 @@ export const hiddenKey = (seriesIndex, pointIndex) => pointIndex === undefined ?
 const DEFAULT_SPACING = [10, 10, 15, 10];
 const isBand = scale => scale.kind === 'band';
 const isContinuous = scale => scale.kind === 'linear' || scale.kind === 'time';
+const asText = label => ({
+  label,
+  node: undefined
+});
 function tickLabel(value, axis, timePattern, index, count, kind, numberFormat) {
   const formatter = axis.labels?.formatter;
   if (formatter) {
@@ -32,17 +37,20 @@ function tickLabel(value, axis, timePattern, index, count, kind, numberFormat) {
       }
     });
     if (typeof node === 'string' || typeof node === 'number') {
-      return String(node);
+      return asText(String(node));
     }
-    return '';
+    return {
+      label: nodeText(node),
+      node
+    };
   }
   if (axis.labels?.format) {
-    return applyValueFormat(axis.labels.format, value);
+    return asText(applyValueFormat(axis.labels.format, value));
   }
   if (typeof value === 'number') {
-    return timePattern ? formatTime(timePattern, value) : numberFormat(value);
+    return asText(timePattern ? formatTime(timePattern, value) : numberFormat(value));
   }
-  return String(value);
+  return asText(String(value));
 }
 function collectCategories(axis, series, numeric = false) {
   if (axis.categories?.length) {
@@ -177,14 +185,17 @@ function dropOverlapping(ticks, axis, along) {
   // rather than order keeps one rule for both directions.
   let kept = null;
   return ticks.map(tick => {
-    if (!tick.label) {
+    if (!tick.label && tick.node === undefined) {
       return tick;
     }
-    const half = (along === 'x' ? measureText(tick.label, style) : textHeight(style)) / 2;
-    if (kept && Math.abs(tick.position - kept.position) < half + kept.half + AXIS_LABEL_GAP) {
+    // A node with no text to read measures as a point rather than dropping out of
+    // the walk: it is always drawn, so a label after it still has to clear it.
+    const half = tick.label ? (along === 'x' ? measureText(tick.label, style) : textHeight(style)) / 2 : 0;
+    if (tick.label && kept && Math.abs(tick.position - kept.position) < half + kept.half + AXIS_LABEL_GAP) {
       return {
         ...tick,
-        label: ''
+        label: '',
+        node: undefined
       };
     }
     kept = {
@@ -212,11 +223,15 @@ function axisTicks(axis, scale, hint, timePattern, along, numberFormat, bounds)
   const offset = isBand(scale) ? scale.bandwidth() / 2 : 0;
   const built = values.map((value, index) => {
     const position = (isBand(scale) ? scale.map(String(value)) : scale.map(Number(value))) + offset;
-    const label = tickLabel(value, axis, timePattern, index, values.length, scale.kind, numberFormat);
+    const {
+      label,
+      node
+    } = tickLabel(value, axis, timePattern, index, values.length, scale.kind, numberFormat);
     return {
       value,
       position,
       label,
+      node,
       anchor: tickAnchor(label, position, axis, bounds),
       hint: axis.labels?.hint?.({
         value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-charts",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Small React chart library on SVG, with a Highcharts-shaped configuration model",
   "license": "MIT",
   "repository": {