@pushwoosh/kit-charts 0.0.8 → 0.0.9

package/ai-documentation.md

@@ -349,10 +349,20 @@ a delta needs no extra lookup. `shared: true` collects every series at the hover
 `headerFormat`, `pointFormat` and `pointFormatter` are taken under their Highcharts
 names, so a config that already carries them needs no rewrite: `headerFormat: ''`
 drops the header and `pointFormat` writes the row after the swatch. Both templates
-fill `{point.key}`, `{point.x}`, `{point.y}`, `{point.value}` and `{series.name}`,
-date an x through `{point.x:%b %d}` (a padded pattern is trimmed) and pass numbers
-through the chart's `numberFormat`; markup in them is dropped, because the chrome
-around a tooltip is the library's. `pointFormatter` is handed the point and returns
+fill `{point.key}`, `{point.x}`, `{point.y}`, `{point.value}`, `{series.name}` and
+`{point.color}`, date an x through `{point.x:%b %d}` (a padded pattern is trimmed)
+and pass numbers through the chart's `numberFormat`.
+
+Inline markup in a template is rendered rather than stripped, so the default
+Highcharts `pointFormat` arrives looking like itself. The whitelist is `<br>`,
+`<b>`/`<strong>`, `<i>`/`<em>` and `<span>` carrying a `style` of `color`,
+`font-size`, `font-weight` or `font-style`; anything else is dropped and its text
+kept. Nothing is parsed as HTML — the tags become React elements and a filled token
+is always a text child, so a series name out of the API cannot carry markup in.
+A token may sit inside the `style` attribute, as `{point.color}` does, and the
+filled value is checked against a plain-CSS pattern before it is used.
+
+`pointFormatter` is handed the point and returns
 a `ReactNode`, and outranks `pointFormat`; `formatter` and `table` outrank all
 three. Golden cases: `area/header-format`, `line/point-format-template`.
 

package/core/Chart/Chart.js

@@ -13,6 +13,7 @@ import { MOTION_MS } from '../animation/motion';
 import { applyTooltipTemplate } from '../format/template';
 import { formatTime } from '../format/time';
 import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE } from '../layout/measure-text';
+import { nodeText } from '../layout/node-text';
 import { buildChartModel, hiddenKey, isContinuous } from '../model/build-model';
 import { DEFAULT_GRID_COLOR, DEFAULT_SURFACE_COLOR, DEFAULT_TEXT_COLOR } from '../model/palette';
 import { resolveRenderers } from '../registry/registry';
@@ -37,7 +38,8 @@ const templateContext = (point, x) => ({
   x,
   y: point?.y ?? null,
   value: point?.value ?? null,
-  seriesName: point?.seriesName ?? ''
+  seriesName: point?.seriesName ?? '',
+  color: point?.color ?? DEFAULT_TEXT_COLOR
 });
 function tooltipHeader(ctx, headerFormat, formatX, numberFormat) {
   if (headerFormat === undefined) {
@@ -70,7 +72,7 @@ function pointRow(point, tooltip, formatValue, numberFormat) {
 function defaultTooltip(ctx, tooltip, formatX, formatValue, numberFormat) {
   const header = tooltipHeader(ctx, tooltip?.headerFormat, formatX, numberFormat);
   return _jsxs("div", {
-    children: [header ? _jsx(TooltipTitle, {
+    children: [nodeText(header).trim() ? _jsx(TooltipTitle, {
       children: header
     }) : null, ctx.points.map(point => _jsx(TooltipRow, {
       children: pointRow(point, tooltip, formatValue, numberFormat)

package/core/format/markup.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+/** Renders the inline markup a Highcharts template carries. */
+export declare function parseMarkup(source: string, fillText: (text: string) => string): ReactNode;

package/core/format/markup.js

@@ -0,0 +1,112 @@
+import { createElement, Fragment } from 'react';
+const TAG = /<\s*(\/?)\s*([a-z]+)([^>]*)>/gi;
+const VOID_TAGS = new Set(['br']);
+const INLINE_TAGS = new Set(['b', 'strong', 'i', 'em', 'span']);
+/** CSS properties a template may set, mapped to their React names. */
+const STYLE_PROPS = {
+  color: 'color',
+  'font-size': 'fontSize',
+  'font-weight': 'fontWeight',
+  'font-style': 'fontStyle'
+};
+// A token can land inside the attribute — Highcharts' own default writes
+// `style="color:{point.color}"` — so the filled value is checked, not trusted.
+const SAFE_VALUE = /^[#\w][\w\s.,%()#-]*$/;
+const styleValue = raw => {
+  const value = raw.trim();
+  if (!SAFE_VALUE.test(value) || /url/i.test(value)) {
+    return undefined;
+  }
+  return value;
+};
+const parseStyle = (declarations, fillText) => {
+  const style = {};
+  declarations.split(';').forEach(declaration => {
+    const colon = declaration.indexOf(':');
+    if (colon === -1) {
+      return;
+    }
+    const property = STYLE_PROPS[declaration.slice(0, colon).trim().toLowerCase()];
+    const value = property && styleValue(fillText(declaration.slice(colon + 1)));
+    if (property && value) {
+      style[property] = value;
+    }
+  });
+  return Object.keys(style).length ? style : undefined;
+};
+const styleOf = (tag, attributes, fillText) => {
+  if (tag !== 'span') {
+    return undefined;
+  }
+  const match = /\bstyle\s*=\s*("([^"]*)"|'([^']*)')/i.exec(attributes);
+  return match ? parseStyle(match[2] ?? match[3] ?? '', fillText) : undefined;
+};
+const element = (frame, key) => createElement(frame.tag, {
+  key,
+  style: frame.style
+}, ...frame.children);
+/** Renders the inline markup a Highcharts template carries. */
+export function parseMarkup(source, fillText) {
+  const root = {
+    tag: '',
+    style: undefined,
+    children: []
+  };
+  const stack = [root];
+  const top = () => stack[stack.length - 1];
+  let cursor = 0;
+  let key = 0;
+  const closeTo = depth => {
+    while (stack.length > depth) {
+      const frame = stack.pop();
+      key += 1;
+      top().children.push(element(frame, key));
+    }
+  };
+  const pushText = text => {
+    const filled = fillText(text);
+    if (filled) {
+      top().children.push(filled);
+    }
+  };
+  TAG.lastIndex = 0;
+  for (let match = TAG.exec(source); match; match = TAG.exec(source)) {
+    pushText(source.slice(cursor, match.index));
+    cursor = TAG.lastIndex;
+    const [, closing, name, attributes] = match;
+    const tag = name.toLowerCase();
+    if (VOID_TAGS.has(tag)) {
+      key += 1;
+      top().children.push(createElement(tag, {
+        key
+      }));
+    } else if (!INLINE_TAGS.has(tag)) {
+      // Unknown tag: dropped, its text left where it stood.
+    } else if (closing) {
+      let open = stack.length - 1;
+      while (open > 0 && stack[open].tag !== tag) {
+        open -= 1;
+      }
+      if (open > 0) {
+        closeTo(open);
+      }
+    } else {
+      stack.push({
+        tag,
+        style: styleOf(tag, attributes, fillText),
+        children: []
+      });
+      // `<span … />` by analogy with the `<br/>` in the Highcharts docs: closed
+      // where it stands, or it would adopt every sibling after it.
+      if (/\/\s*$/.test(attributes)) {
+        closeTo(stack.length - 1);
+      }
+    }
+  }
+  pushText(source.slice(cursor));
+  closeTo(1);
+  if (root.children.length === 1 && typeof root.children[0] === 'string') {
+    return root.children[0];
+  }
+  return root.children.length ? createElement(Fragment, null, ...root.children) : '';
+}

package/core/format/template.d.ts

@@ -1,12 +1,11 @@
+import { type ReactNode } from 'react';
 import { type NumberFormatter } from '../types/renderer';
 export interface TemplateContext {
     x: number | string;
     y: number | null;
     value: number | null;
     seriesName: string;
+    color: string;
 }
-/**
- * Fills a Highcharts header or point template. Markup in it is dropped rather than
- * rendered: the chrome around a tooltip is the library's, and a `<span>` is styling.
- */
-export declare function applyTooltipTemplate(format: string, ctx: TemplateContext, numberFormat?: NumberFormatter): string;
+/** Fills a Highcharts header or point template, rendering the inline markup in it. */
+export declare function applyTooltipTemplate(format: string, ctx: TemplateContext, numberFormat?: NumberFormatter): ReactNode;

package/core/format/template.js

@@ -1,3 +1,4 @@
+import { parseMarkup } from './markup';
 import { formatTime } from './time';
 import { fillTokens } from './tokens';
 const substitute = (name, ctx, numberFormat) => {
@@ -11,22 +12,22 @@ const substitute = (name, ctx, numberFormat) => {
       return ctx.value === null ? '' : numberFormat(ctx.value);
     case 'series.name':
       return ctx.seriesName;
+    case 'point.color':
+      return ctx.color;
     default:
       return undefined;
   }
 };
-/**
- * Fills a Highcharts header or point template. Markup in it is dropped rather than
- * rendered: the chrome around a tooltip is the library's, and a `<span>` is styling.
- */
+/** Fills a Highcharts header or point template, rendering the inline markup in it. */
 export function applyTooltipTemplate(format, ctx, numberFormat = String) {
-  const stripped = format.replace(/<br\s*\/?>/gi, ' ').replace(/<[^>]*>/g, '');
-  return fillTokens(stripped, (name, pattern) => {
+  const fill = text => fillTokens(text, (name, pattern) => {
     const value = substitute(name, ctx, numberFormat);
     if (value === undefined) {
       return undefined;
     }
     const dates = name === 'point.key' || name === 'point.x';
     return pattern && dates && typeof ctx.x === 'number' ? formatTime(pattern, ctx.x) : value;
-  }).trim();
+  });
+  const node = parseMarkup(format, fill);
+  return typeof node === 'string' ? node.trim() : node;
 }

package/package.json

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