@pushwoosh/kit-charts 0.0.5 → 0.0.6

package/ai-documentation.md

@@ -339,12 +339,15 @@ the value wrapped in `valuePrefix`/`valueSuffix`. `formatter` replaces the body
 returns a `ReactNode`; `ctx.points[].prev`/`.next` carry the neighbouring points, so
 a delta needs no extra lookup. `shared: true` collects every series at the hovered x.
 
-`headerFormat` and `pointFormatter` are taken under their Highcharts names, so a
-config that already carries them needs no rewrite: `headerFormat: ''` drops the
-header, a template fills `{point.key}`, `{point.x}`, `{point.y}` and
-`{series.name}` (markup in it is dropped — the chrome is the library's), and
-`pointFormatter` is handed the point and returns a `ReactNode`. `formatter` and
-`table` both outrank them. Golden case: `area/header-format`.
+`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
+a `ReactNode`, and outranks `pointFormat`; `formatter` and `table` outrank all
+three. Golden cases: `area/header-format`, `line/point-format-template`.
 
 `ctx.points[].pointMeta` is the hovered point's own `meta` — the third type
 parameter of `ChartOptions<TChartMeta, TSeriesMeta, TPointMeta>`, the same object

package/core/Chart/Chart.js

@@ -33,32 +33,47 @@ const toCssSize = (value, fallback) => {
   }
   return typeof value === 'number' ? `${value}px` : value;
 };
-function tooltipHeader(ctx, headerFormat, formatX) {
+const templateContext = (point, x) => ({
+  x,
+  y: point?.y ?? null,
+  value: point?.value ?? null,
+  seriesName: point?.seriesName ?? ''
+});
+function tooltipHeader(ctx, headerFormat, formatX, numberFormat) {
   if (headerFormat === undefined) {
     return formatX(ctx.x);
   }
-  return applyTooltipTemplate(headerFormat, {
-    x: ctx.x,
-    y: ctx.points[0]?.y ?? null,
-    seriesName: ctx.points[0]?.seriesName ?? ''
-  });
+  return applyTooltipTemplate(headerFormat, templateContext(ctx.points[0], ctx.x), numberFormat);
 }
-function defaultTooltip(ctx, tooltip, formatX, formatValue) {
-  const header = tooltipHeader(ctx, tooltip?.headerFormat, formatX);
+function pointRow(point, tooltip, formatValue, numberFormat) {
   const pointFormatter = tooltip?.pointFormatter;
+  if (pointFormatter) {
+    return pointFormatter(point);
+  }
+  if (tooltip?.pointFormat !== undefined) {
+    return _jsxs(_Fragment, {
+      children: [_jsx(TooltipSwatch, {
+        "$color": point.color
+      }), applyTooltipTemplate(tooltip.pointFormat, templateContext(point, point.x), numberFormat)]
+    });
+  }
+  return _jsxs(_Fragment, {
+    children: [_jsx(TooltipSwatch, {
+      "$color": point.color
+    }), _jsx(TooltipName, {
+      children: point.seriesName
+    }), _jsx(TooltipValue, {
+      children: formatValue(point.value ?? point.y)
+    })]
+  });
+}
+function defaultTooltip(ctx, tooltip, formatX, formatValue, numberFormat) {
+  const header = tooltipHeader(ctx, tooltip?.headerFormat, formatX, numberFormat);
   return _jsxs("div", {
     children: [header ? _jsx(TooltipTitle, {
       children: header
     }) : null, ctx.points.map(point => _jsx(TooltipRow, {
-      children: pointFormatter ? pointFormatter(point) : _jsxs(_Fragment, {
-        children: [_jsx(TooltipSwatch, {
-          "$color": point.color
-        }), _jsx(TooltipName, {
-          children: point.seriesName
-        }), _jsx(TooltipValue, {
-          children: formatValue(point.value ?? point.y)
-        })]
-      })
+      children: pointRow(point, tooltip, formatValue, numberFormat)
     }, `${point.seriesIndex}-${point.index}`))]
   });
 }
@@ -450,7 +465,7 @@ function ChartBody({
       return formatter(ctx);
     }
     const table = options.tooltip?.table;
-    return table ? tableTooltip(ctx, table, formatX) : defaultTooltip(ctx, options.tooltip, formatX, formatValue);
+    return table ? tableTooltip(ctx, table, formatX) : defaultTooltip(ctx, options.tooltip, formatX, formatValue, model.numberFormat);
   }, [hover, model, options.title?.text, options.meta, options.tooltip, formatX, formatValue]);
   const hasData = model?.series.some(series => series.points.some(point => point.y !== null)) ?? false;
   const plotBorderWidth = options.chart?.plotBorderWidth ?? 0;

package/core/format/template.d.ts

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

package/core/format/template.js

@@ -1,12 +1,14 @@
 import { formatTime } from './time';
 import { fillTokens } from './tokens';
-const substitute = (name, ctx) => {
+const substitute = (name, ctx, numberFormat) => {
   switch (name) {
     case 'point.key':
     case 'point.x':
       return String(ctx.x);
     case 'point.y':
-      return ctx.y === null ? '' : String(ctx.y);
+      return ctx.y === null ? '' : numberFormat(ctx.y);
+    case 'point.value':
+      return ctx.value === null ? '' : numberFormat(ctx.value);
     case 'series.name':
       return ctx.seriesName;
     default:
@@ -14,13 +16,13 @@ const substitute = (name, ctx) => {
   }
 };
 /**
- * Fills a Highcharts header template. Markup in it is dropped rather than rendered:
- * the chrome around a tooltip is the library's, and a `<span>` in a config is styling.
+ * 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 function applyTooltipTemplate(format, ctx) {
+export function applyTooltipTemplate(format, ctx, numberFormat = String) {
   const stripped = format.replace(/<br\s*\/?>/gi, ' ').replace(/<[^>]*>/g, '');
   return fillTokens(stripped, (name, pattern) => {
-    const value = substitute(name, ctx);
+    const value = substitute(name, ctx, numberFormat);
     if (value === undefined) {
       return undefined;
     }

package/core/format/tokens.d.ts

@@ -1,3 +1,3 @@
 export type TokenResolver = (name: string, pattern: string | undefined) => string | undefined;
-/** Fills `{name}` and `{name:pattern}` placeholders; an unresolved one is left as it stands. */
+/** Fills `{name}` and `{name:pattern}`; an unresolved token is left as it stands. */
 export declare function fillTokens(format: string, resolve: TokenResolver): string;

package/core/format/tokens.js

@@ -1,5 +1,5 @@
 const TOKEN = /\{([a-z][a-z.]*)(?::([^}]*))?\}/gi;
-/** Fills `{name}` and `{name:pattern}` placeholders; an unresolved one is left as it stands. */
+/** Fills `{name}` and `{name:pattern}`; an unresolved token is left as it stands. */
 export function fillTokens(format, resolve) {
-  return format.replace(TOKEN, (match, name, pattern) => resolve(name, pattern) ?? match);
+  return format.replace(TOKEN, (match, name, pattern) => resolve(name, pattern?.trim() || undefined) ?? match);
 }

package/core/types/options.d.ts

@@ -207,6 +207,8 @@ export interface TooltipOptions<TChartMeta = unknown, TSeriesMeta = unknown, TPo
     formatter?: TooltipFormatter<TChartMeta, TSeriesMeta, TPointMeta>;
     /** Highcharts' header template: `''` drops the header, `{point.key}` and friends fill. */
     headerFormat?: string;
+    /** Highcharts' per-point template, drawn after the swatch; `pointFormatter` wins. */
+    pointFormat?: string;
     /** One row per point, in place of the default swatch, name and value. */
     pointFormatter?: TooltipCellFormatter<TSeriesMeta, TPointMeta>;
     dateFormat?: string;

package/package.json

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