@pushwoosh/kit-charts 0.0.15 → 0.0.17

package/ai-documentation.md

@@ -113,6 +113,19 @@ it, exactly as `pick(labels.x, distance)` does there.
 The x axis line is drawn after the series, so a bar or an area sitting on zero
 cannot paint over the line it stands on.
 
+A y axis with `labels.enabled: false` reserves no gutter at all — only a rotated
+title still takes room — so the plot starts at `chart.spacing`, where Highcharts
+starts it, rather than a label column in from there.
+
+An end the axis leaves unpadded puts its extreme point on the plot edge, where
+half of the point's marker would fall outside the SVG and be cut. Such an end
+keeps `MARKER_REACH` of room: the plot edge moves in to 5px from the canvas
+unless the gutter, the spacing or `chart.marginLeft`/`marginRight` already leaves
+at least that much, so a chart with `spacing: 0` and no gutter is 5px in rather
+than flush. Only an end that can draw a marker pays it: `marker.enabled: false`
+does not release the room — the hover dot is drawn regardless, as in Highcharts —
+but `marker.states.hover.enabled: false` does, and then no dot is drawn either.
+
 `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/model/build-model.js

@@ -7,7 +7,7 @@ import { AXIS_LABEL_GAP, AXIS_LABEL_DISTANCE, AXIS_TITLE_GAP, MARKER_REACH, VALU
 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';
+import { resolveAxes, resolveSeries, isSeriesVisible, showsHoverMarker, showsMarkers } from '../options/normalize';
 import { createBandScale } from '../scale/band';
 import { createColorScale } from '../scale/color';
 import { createLinearScale } from '../scale/linear';
@@ -475,7 +475,7 @@ export function buildChartModel({
   const yLabelsShown = !axisless && yAxes[0]?.visible !== false && yAxes[0]?.labels?.enabled !== false;
   const markerReach = resolved.some(({
     options: series
-  }) => series.marker?.enabled !== false) ? MARKER_REACH : 0;
+  }) => showsMarkers(series.marker)) ? MARKER_REACH : 0;
   // The topmost tick label is centred on the plot's top edge, so half of it hangs
   // above the plot: without this the highest grid line and its label sit on the
   // chart border.
@@ -499,10 +499,13 @@ export function buildChartModel({
   })();
   const marginTop = spaceTop + titleHeight + (legendAtTop ? legendHeight : 0) + (labelsOnTop ? xLabelHeight : 0) + Math.max(labelHeadroom, topOverflow);
   const marginBottom = spaceBottom + (labelsOnTop ? 0 : xLabelHeight) + (legendAtTop ? 0 : legendHeight);
-  const measureGutter = estimate => {
+  const measureGutter = () => {
     const axis = yAxes[0] ?? {};
+    const title = axis.title?.text && (axis.title.rotation ?? -90) !== 0 ? textHeight(axis.title.style) + AXIS_TITLE_GAP : 0;
+    // Highcharts measures the label column and nothing else, so an axis without
+    // labels leaves the plot flush with the chart edge rather than indented.
     if (axis.labels?.enabled === false) {
-      return estimate;
+      return title;
     }
     const labels = axis.categories?.length ? [...axis.categories] : axisTicks(axis, createLinearScale({
       domain: (() => {
@@ -515,17 +518,26 @@ export function buildChartModel({
       allowDecimals: axis.allowDecimals
     }), axis.tickAmount ?? 5, undefined, 'y', numberFormat).map(tick => tick.label);
     const widest = labels.reduce((widest_, label) => Math.max(widest_, measureText(label, axis.labels?.style)), 0);
-    const title = axis.title?.text && (axis.title.rotation ?? -90) !== 0 ? textHeight(axis.title.style) + AXIS_TITLE_GAP : 0;
     // Highcharts reserves the widest label plus the distance it is drawn at; the two
     // must be one number or the plot edge and the label column drift apart.
     return Math.ceil(widest) + yLabelGap(axis) + title;
   };
-  const gutter = axisless || yAxes[0]?.visible === false ? 0 : measureGutter(32);
+  const gutter = axisless || yAxes[0]?.visible === false ? 0 : measureGutter();
   const legendAlign = options.legend?.align ?? 'left';
   const legendBesideLeft = legendMetrics.beside && legendAlign === 'left';
+  // A point on the plot edge draws half its marker outside the canvas, where the
+  // svg cuts it; an end the axis pads keeps that room already.
+  const edgeMarkers = !axisless && xKind !== 'band' && resolved.some(({
+    renderer,
+    options: series
+  }) => renderer.scales.x !== 'band' && (showsMarkers(series.marker) || showsHoverMarker(series.marker)));
+  const hoverReach = edgeMarkers ? MARKER_REACH : 0;
+  const domainMin = xAxisOptions.min ?? xDomain.min;
+  const domainMax = xAxisOptions.max ?? xDomain.max;
+  const edgeRoom = (margin, flush) => flush ? Math.max(margin, hoverReach) : margin;
   // Highcharts margins replace the computed edge distance rather than adding to it.
-  const left = options.chart?.marginLeft ?? spaceLeft + gutter + (legendBesideLeft ? legendMetrics.width : 0);
-  const right = options.chart?.marginRight ?? spaceRight + (legendMetrics.beside && !legendBesideLeft ? legendMetrics.width : 0);
+  const left = options.chart?.marginLeft ?? edgeRoom(spaceLeft + gutter + (legendBesideLeft ? legendMetrics.width : 0), domainMin === acc.x.min);
+  const right = options.chart?.marginRight ?? edgeRoom(spaceRight + (legendMetrics.beside && !legendBesideLeft ? legendMetrics.width : 0), domainMax === acc.x.max);
   const top = options.chart?.marginTop ?? marginTop;
   const bottom = options.chart?.marginBottom ?? marginBottom;
   const plot = {

package/core/options/normalize.d.ts

@@ -1,4 +1,4 @@
-import { type AxisOptions, type ChartOptions, type SeriesOptionsBase } from '../types/options';
+import { type AxisOptions, type ChartOptions, type MarkerOptions, type SeriesOptionsBase } from '../types/options';
 export declare const toAxisArray: (axis: AxisOptions | readonly AxisOptions[] | undefined) => AxisOptions[];
 export declare function resolveSeries(options: ChartOptions): SeriesOptionsBase[];
 export declare function resolveAxes(options: ChartOptions): {
@@ -6,3 +6,7 @@ export declare function resolveAxes(options: ChartOptions): {
     yAxes: AxisOptions[];
 };
 export declare const isSeriesVisible: (series: SeriesOptionsBase) => boolean;
+/** A marker at every point of the series. */
+export declare const showsMarkers: (marker: MarkerOptions | undefined) => boolean;
+/** The dot under the pointer, which Highcharts draws whatever `marker.enabled` says. */
+export declare const showsHoverMarker: (marker: MarkerOptions | undefined) => boolean;

package/core/options/normalize.js

@@ -40,4 +40,8 @@ export function resolveAxes(options) {
     yAxes: toAxisArray(options.yAxis)
   };
 }
-export const isSeriesVisible = series => series.visible !== false;
+export const isSeriesVisible = series => series.visible !== false;
+/** A marker at every point of the series. */
+export const showsMarkers = marker => marker?.enabled !== false && marker?.symbol !== 'none';
+/** The dot under the pointer, which Highcharts draws whatever `marker.enabled` says. */
+export const showsHoverMarker = marker => marker?.states?.hover?.enabled !== false;

package/core/scale/time.js

@@ -90,7 +90,12 @@ const LADDER = [{
 }];
 const pickRungIndex = (span, count) => {
   const target = span / Math.max(1, count);
-  const found = LADDER.findIndex(rung => rung.approx >= target);
+  // Highcharts keeps a rung until the midpoint to the next one, so a month of data read at
+  // three days a tick still steps by two days instead of jumping to whole weeks.
+  const found = LADDER.findIndex((rung, index) => {
+    const next = LADDER[index + 1];
+    return !next || target <= (rung.approx + next.approx) / 2;
+  });
   return found === -1 ? LADDER.length - 1 : found;
 };
 const alignUp = (from, rung) => {

package/package.json

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

package/series/area/area.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { drawable, projectSeries, toAreaPath, toLinePath } from '../../core/geometry/path';
+import { showsHoverMarker } from '../../core/options/normalize';
 import { includeZero } from '../shared/domain';
 import { nearestByX } from '../shared/hit';
 import { seriesLegend } from '../shared/legend';
@@ -41,7 +42,7 @@ export const area = {
         marker: ctx.series.marker,
         projected: projected,
         color: color
-      }), hovered ? _jsx("circle", {
+      }), hovered && showsHoverMarker(ctx.series.marker) ? _jsx("circle", {
         cx: hovered.px,
         cy: hovered.py,
         r: ctx.series.marker?.states?.hover?.radius ?? 4,

package/series/line/line.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { drawable, projectSeries, toLinePath } from '../../core/geometry/path';
+import { showsHoverMarker } from '../../core/options/normalize';
 import { nearestByX } from '../shared/hit';
 import { seriesLegend } from '../shared/legend';
 import { Markers } from '../shared/Markers';
@@ -33,7 +34,7 @@ export const line = {
         marker: ctx.series.marker,
         projected: projected,
         color: color
-      }), hovered ? _jsx("circle", {
+      }), hovered && showsHoverMarker(ctx.series.marker) ? _jsx("circle", {
         cx: hovered.px,
         cy: hovered.py,
         r: ctx.series.marker?.states?.hover?.radius ?? 4,

package/series/shared/Markers.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { showsMarkers } from '../../core/options/normalize';
 const markerRadius = marker => marker?.radius ?? (marker?.width ? marker.width / 2 : 3);
 export function Markers({
   marker,
   projected,
   color
 }) {
-  if (marker?.enabled === false || marker?.symbol === 'none') {
+  if (!showsMarkers(marker)) {
     return null;
   }
   const radius = markerRadius(marker);