@pushwoosh/kit-charts 0.0.9 → 0.0.11

package/ai-documentation.md

@@ -356,9 +356,11 @@ 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.
+`font-size`, `font-weight` or `font-style`. Anything else loses its tag and keeps
+its text, so `<script>bad()</script>` prints a visible `bad()` — nothing runs, but
+nothing disappears either. 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.
 

package/core/Chart/Axes.js

@@ -14,6 +14,8 @@ const ANCHOR = {
   center: 'middle',
   right: 'end'
 };
+/** `style.textAlign` wins over the anchor the axis derives from its own geometry. */
+const anchorFor = (style, fallback) => style?.textAlign && ANCHOR[style.textAlign] || fallback;
 /** 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) {
@@ -33,7 +35,7 @@ function TickLabel({
   const text = _jsx("text", {
     x: x,
     y: y,
-    textAnchor: anchor,
+    textAnchor: anchorFor(style, anchor),
     ...textProps(style),
     children: children
   });
@@ -89,7 +91,7 @@ function AxisTitle({
   return _jsx("text", {
     x: at.x,
     y: at.y,
-    textAnchor: rotation === 0 ? anchor : 'middle',
+    textAnchor: rotation === 0 ? anchorFor(title.style, anchor) : 'middle',
     transform: rotation === 0 ? undefined : `rotate(${rotation} ${at.x} ${at.y})`,
     ...textProps(title.style),
     children: title.text

package/core/model/build-model.js

@@ -16,6 +16,11 @@ import { computeStacks } from '../stack/stack';
 /** Key for a switched-off series, or for one of its points. */
 export const hiddenKey = (seriesIndex, pointIndex) => pointIndex === undefined ? `${seriesIndex}` : `${seriesIndex}:${pointIndex}`;
 const DEFAULT_SPACING = [10, 10, 15, 10];
+/** `spacingTop` and friends each override their side of the `spacing` tuple. */
+const resolveSpacing = chart => {
+  const [top, right, bottom, left] = chart?.spacing ?? DEFAULT_SPACING;
+  return [chart?.spacingTop ?? top, chart?.spacingRight ?? right, chart?.spacingBottom ?? bottom, chart?.spacingLeft ?? left];
+};
 const isBand = scale => scale.kind === 'band';
 const isContinuous = scale => scale.kind === 'linear' || scale.kind === 'time';
 const asText = label => ({
@@ -332,7 +337,9 @@ export function buildChartModel({
     }) => {
       points.forEach(point => {
         if (typeof point.x === 'string') {
-          point.band = point.x;
+          // Highcharts reads a string in `[name, value]` as the point's name and
+          // places it by index; we key by category, and fall back where it misses.
+          point.band = !explicitCategories || categories.includes(point.x) ? point.x : categories[point.index] ?? point.x;
           return;
         }
         if (!explicitCategories) {
@@ -342,6 +349,8 @@ export function buildChartModel({
         point.band = categories[Number(point.x)] ?? categories[point.index] ?? String(point.x);
       });
     });
+    // A band still outside the list extends the axis: a surplus point is data, and
+    // dropping it would lose it without a word.
     resolved.forEach(({
       points
     }) => {
@@ -405,7 +414,7 @@ export function buildChartModel({
     max: acc.x.max + pad
   } : acc.x;
   const yDomains = acc.y;
-  const spacing = options.chart?.spacing ?? DEFAULT_SPACING;
+  const spacing = resolveSpacing(options.chart);
   const [spaceTop, spaceRight, spaceBottom, spaceLeft] = spacing;
   const labelsOnTop = xAxisOptions.opposite === true;
   const labelStyle = xAxisOptions.labels?.style;

package/core/types/options.d.ts

@@ -29,6 +29,11 @@ export interface ChartRootOptions {
     width?: number | string | null;
     backgroundColor?: string;
     spacing?: Spacing;
+    /** One side of `spacing`, which it overrides — the Highcharts pair. */
+    spacingTop?: number;
+    spacingRight?: number;
+    spacingBottom?: number;
+    spacingLeft?: number;
     marginTop?: number;
     marginRight?: number;
     marginBottom?: number;
@@ -81,10 +86,8 @@ export interface AxisLabelsOptions {
     hint?: (ctx: AxisLabelContext) => string | undefined;
     allowOverlap?: boolean;
     align?: 'left' | 'center' | 'right';
-    rotation?: number;
     x?: number;
     y?: number;
-    padding?: number;
     style?: TextStyle;
 }
 /** `zIndex` at or above this draws over the series instead of under it. */
@@ -163,7 +166,6 @@ export interface LegendOptions<TSeriesMeta = unknown> {
     align?: 'left' | 'center' | 'right';
     verticalAlign?: 'top' | 'middle' | 'bottom';
     layout?: 'horizontal' | 'vertical';
-    margin?: number;
     x?: number;
     y?: number;
     itemStyle?: TextStyle;

package/package.json

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