@pushwoosh/kit-charts 0.0.10 → 0.0.12

package/ai-documentation.md

@@ -92,6 +92,12 @@ own `formatter` or `format` wins over it.
 the step is chosen from the candidates that stay integral at its magnitude, and
 never falls below 1.
 
+`tickAmount` is Highcharts' demand and not a hint: the y axis stretches the end
+the caller left open until exactly that many ticks fit, so a count of 2 on a
+`tickAmount: 5` axis still draws 0..4 and reads against a stable grid rather than
+filling the plot. An end pinned with `max` cannot be stretched, so a tick amount
+alongside one is ignored.
+
 `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.

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

@@ -139,6 +139,7 @@ function buildYScale(axis, extent, range, hint, linked) {
       max: axis.max === undefined
     },
     tickHint: hint,
+    tickCount: axis.tickAmount,
     allowDecimals: axis.allowDecimals
   });
 }
@@ -337,7 +338,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) {
@@ -347,6 +350,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
     }) => {

package/core/scale/linear.d.ts

@@ -9,6 +9,8 @@ export interface LinearScaleOptions {
     range: readonly [number, number];
     nice?: boolean | NiceEnds;
     tickHint?: number;
+    /** Highcharts' `tickAmount`: stretch the open end so exactly this many ticks fit. */
+    tickCount?: number;
     /** False keeps every tick a whole number, as a count axis needs. */
     allowDecimals?: boolean;
 }

package/core/scale/linear.js

@@ -31,18 +31,32 @@ export function createLinearScale(options) {
     range,
     nice = false,
     tickHint = 5,
+    tickCount,
     allowDecimals = true
   } = options;
   let [min, max] = options.domain;
+  const niceMin = nice === true || typeof nice === 'object' && nice.min === true;
+  const niceMax = nice === true || typeof nice === 'object' && nice.max === true;
   if (!Number.isFinite(min) || !Number.isFinite(max)) {
     [min, max] = [0, 1];
   } else if (min === max) {
     const pad = Math.abs(min) || 1;
-    [min, max] = [min - pad, max + pad];
+    // An end the caller pinned stays put: padding both would take a `min: 0`
+    // count axis below zero on a day where every value is zero.
+    [min, max] = [min - (niceMin || !niceMax ? pad : 0), max + (niceMax || !niceMin ? pad : 0)];
   }
-  const niceMin = nice === true || typeof nice === 'object' && nice.min === true;
-  const niceMax = nice === true || typeof nice === 'object' && nice.max === true;
-  if (niceMin || niceMax) {
+  if (tickCount !== undefined && tickCount > 1 && niceMax) {
+    let step = niceStep((max - min) / (tickCount - 1), allowDecimals);
+    if (niceMin) {
+      min = Math.floor(min / step) * step;
+    }
+    // Rounding the low end down lengthens the run, which can leave the last tick
+    // short of the data; widen the step until the fixed number of them covers it.
+    while (min + (tickCount - 1) * step < max) {
+      step = niceStep(step * 1.5, allowDecimals);
+    }
+    max = min + (tickCount - 1) * step;
+  } else if (niceMin || niceMax) {
     const step = niceStep((max - min) / tickHint, allowDecimals);
     if (niceMin) {
       min = Math.floor(min / step) * step;

package/core/types/options.d.ts

@@ -86,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. */
@@ -168,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.10",
+  "version": "0.0.12",
   "description": "Small React chart library on SVG, with a Highcharts-shaped configuration model",
   "license": "MIT",
   "repository": {