@pond-ts/charts 0.44.0 → 0.44.1

package/CHANGELOG.md

@@ -8,7 +8,8 @@ The `@pond-ts` packages — `pond-ts`, `@pond-ts/react`, `@pond-ts/charts`,
 tag, so this file covers them all. Pre-1.0: minor bumps may include new features
 and type-level changes; patch bumps are strictly additive.
 
-[Unreleased]: https://github.com/pjm17971/pond-ts/compare/v0.44.0...HEAD
+[Unreleased]: https://github.com/pjm17971/pond-ts/compare/v0.44.1...HEAD
+[0.44.1]: https://github.com/pjm17971/pond-ts/compare/v0.44.0...v0.44.1
 [0.44.0]: https://github.com/pjm17971/pond-ts/compare/v0.43.0...v0.44.0
 [0.43.0]: https://github.com/pjm17971/pond-ts/compare/v0.42.0...v0.43.0
 [0.42.0]: https://github.com/pjm17971/pond-ts/compare/v0.41.0...v0.42.0
@@ -42,6 +43,28 @@ and type-level changes; patch bumps are strictly additive.
 
 ## [Unreleased]
 
+## [0.44.1] — 2026-07-13
+
+A `@pond-ts/charts` patch: fixes trading-time axis tick density. `pond-ts`,
+`@pond-ts/react`, `@pond-ts/fit`, and `@pond-ts/financial` carry no code
+changes — republished in lock-step; their `^0.44.0` peer ranges already
+admit this patch.
+
+### Fixed
+
+- **charts:** trading-time axis tick density now derives from plot width
+  instead of a fixed count of 5. The trading scale's tick `count` caps how many
+  calendar buckets `coarsenCalendar` may keep, so the fixed count coarsened any
+  ≳6-month daily view to quarter or year grain — a 1-year daily chart on a
+  ~900px plot showed 2 ticks; it now lands on month grain (~12). Continuous
+  (non-trading) time and value axes keep the fixed default, unchanged. The
+  count is shared through the container frame (`xTickCount`), so axis labels,
+  x gridlines, session dividers, and the cursor-time formatter all derive from
+  the same instants — previously the label formatter anchored at the scale's
+  internal default (10) while ticks used 5, which is why sparse year-grain
+  ticks were labelled with dates (`Jun 22`) instead of years. (Tidal friction
+  report, charts 0.44.)
+
 ## [0.44.0] — 2026-07-11
 
 The **value-axis charts** release: cross-sectional data (a volatility smile keyed

package/dist/ChartContainer.js

@@ -11,9 +11,18 @@ import { resolveCursorX, DEFAULT_CURSOR_MODE } from './tracker.js';
 import { resolveAxisFormat, resolveTimeFormat, } from './format.js';
 import { TimeAxis } from './TimeAxis.js';
 import { defaultTheme } from './theme.js';
-/** Time-axis tick count — matches `<TimeAxis>` so the cursor-time formatter is
- *  calibrated as the time-axis labels are. */
+/** Tick count for a **continuous** (non-trading) x axis — the `ticks(count)`
+ *  request `<TimeAxis>`, the x gridlines, and the cursor-time formatter share
+ *  (as the frame's `xTickCount`). */
 const TIME_TICK_COUNT = 5;
+/** Target px of plot width per tick on a **trading-time** axis. That scale's
+ *  `ticks(count)` treats `count` as a **cap on calendar buckets** (see
+ *  `coarsenCalendar` — it picks the finest grain that fits), so the count must
+ *  scale with the room the labels actually have: a fixed 5 coarsens any
+ *  ≳6-month daily view to year grain — 2 ticks on a 900px plot. ~65px fits a
+ *  `%b %d` anchor label at the default font plus breathing room, so a ~900px
+ *  year-long daily view lands on month grain. */
+const TRADING_TICK_PX = 65;
 /**
  * Normalize the `range` prop — a `[begin, end]` tuple or a `TimeRange` — to a
  * plain `[number, number]`, or `undefined` when omitted (→ auto-fit). The
@@ -323,6 +332,15 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         ? calendar.discontinuities(spacing ? { spacing } : undefined)
         : undefined, [resolvedKind, discontinuities, calendar, spacing]);
     const xDiscontinuities = resolvedKind === 'time' ? (discontinuities ?? calendarProvider) : undefined;
+    // The shared x-side tick count — labels, x gridlines, session dividers, and
+    // `formatTime` all pass this one value, so they derive from the same instants
+    // (the alignment previously held by three hardcoded constants agreeing).
+    // Trading axis: width-derived, since the trading scale's `count` caps its
+    // calendar buckets rather than targeting a tick total; floored at 2 so a
+    // pre-layout zero width still requests a drawable tick set.
+    const xTickCount = xDiscontinuities !== undefined
+        ? Math.max(2, Math.floor(plotWidth / TRADING_TICK_PX))
+        : TIME_TICK_COUNT;
     const { xScale, formatTime } = useMemo(() => {
         if (resolvedKind === 'category') {
             // Ordinal column-domain axis: a band scale over the category slots. The
@@ -339,24 +357,26 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
             const s = scaleLinear().domain([d0, d1]).range([0, plotWidth]);
             return {
                 xScale: s,
-                formatTime: resolveAxisFormat(s, TIME_TICK_COUNT, timeFormat),
+                formatTime: resolveAxisFormat(s, xTickCount, timeFormat),
             };
         }
         if (xDiscontinuities !== undefined) {
             // Trading-time axis: closed-market gaps collapse, time proportional within
             // sessions. Same tickFormat surface as scaleTime, so the readout is shared.
+            // `xTickCount` reaches `tickFormat` too: the trading scale picks its anchor
+            // grain from the count, so labels sit on the exact instants the ticks do.
             const s = scaleTradingTime(xDiscontinuities)
                 .domain([d0, d1])
                 .range([0, plotWidth]);
             return {
                 xScale: s,
-                formatTime: resolveTimeFormat(s, TIME_TICK_COUNT, timeFormat),
+                formatTime: resolveTimeFormat(s, xTickCount, timeFormat),
             };
         }
         const s = scaleTime().domain([d0, d1]).range([0, plotWidth]);
         return {
             xScale: s,
-            formatTime: resolveTimeFormat(s, TIME_TICK_COUNT, timeFormat),
+            formatTime: resolveTimeFormat(s, xTickCount, timeFormat),
         };
     }, [
         resolvedKind,
@@ -366,6 +386,7 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         plotWidth,
         timeFormat,
         xDiscontinuities,
+        xTickCount,
     ]);
     // The crosshair pixel (see resolveCursorX). A stored hoverX is a *plot* pixel;
     // if plotWidth changes mid-hover (a gutter reserving, or a width change) it's
@@ -478,6 +499,7 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         onHoverAnnotation,
         onEditAnnotation,
         formatTime,
+        xTickCount,
         registerTrackerSource,
         unregisterTrackerSource,
         registerSelectable,
@@ -531,6 +553,7 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         onHoverAnnotation,
         onEditAnnotation,
         formatTime,
+        xTickCount,
         registerTrackerSource,
         unregisterTrackerSource,
         registerSelectable,

package/dist/Layers.js

@@ -7,10 +7,12 @@ import { resolveSelection } from './select.js';
 import { panRange, zoomRange, panRangeTrading, zoomRangeTrading, } from './viewport.js';
 import { flagChipStyle, flagChipX, axisPillX, axisPillStyle } from './chip.js';
 import { ContainerContext, LayersContext, RowContext, } from './context.js';
-/** Gridline tick count. **Must match the axis label counts** (`XAxis`
- *  `TICK_COUNT`, `ChartContainer` `TIME_TICK_COUNT`, `YAxis`) — the grid, the
- *  session dividers, and the axis labels are all derived from `ticks(count)`, so
- *  they only line up while the counts agree. Kept at 5 across all four. */
+/** **Y**-gridline tick count. **Must match the y-axis label counts** (`YAxis`
+ *  `TICK_COUNT`, `ChartRow` `AXIS_TICK_COUNT`) — horizontal gridlines and the y
+ *  labels are both derived from `ticks(count)`, so they only line up while the
+ *  counts agree; kept at 5 across all three. The **x** side instead reads the
+ *  container's shared `xTickCount` (as `<XAxis>` and `formatTime` do), which is
+ *  width-derived on a trading-time axis. */
 const GRID_TICKS = 5;
 /** Minimum px between session dividers — thins dense collapse points (e.g. a
  *  daily chart where every candle is a new session) so the axis never crowds. */
@@ -56,8 +58,10 @@ export function Layers({ children }) {
     const background = container.theme.background;
     const { grid: gridColor, gridDash } = container.theme.axis;
     const { layers, yScales, formats, defaultAxisId, tickValues, axisSides } = row;
-    // x geometry is shared and lives on the container (uniform across rows).
-    const { xScale, plotWidth } = container;
+    // x geometry is shared and lives on the container (uniform across rows), and
+    // so is the x tick count — vertical gridlines must sit under the `<XAxis>`
+    // labels, which pass the same `xTickCount` to the same scale.
+    const { xScale, plotWidth, xTickCount } = container;
     const draw = useCallback((ctx, w, h) => {
         if (background !== undefined) {
             ctx.fillStyle = background;
@@ -71,7 +75,7 @@ export function Layers({ children }) {
         const explicitY = tickValues.get(defaultAxisId);
         // A category axis draws no vertical gridlines — a line through each bar
         // centre reads as noise; the bars are the structure.
-        const xTickVals = container.xKind === 'category' ? [] : xScale.ticks(GRID_TICKS);
+        const xTickVals = container.xKind === 'category' ? [] : xScale.ticks(xTickCount);
         const xTicks = xTickVals.map((d) => xScale(+d));
         const yTicks = gridY
             ? (explicitY ?? gridY.ticks(GRID_TICKS)).map((t) => gridY(t))
@@ -104,6 +108,7 @@ export function Layers({ children }) {
         layers,
         yScales,
         xScale,
+        xTickCount,
         defaultAxisId,
         tickValues,
         background,

package/dist/XAxis.js

@@ -7,7 +7,6 @@ import { resolveAxisFormat, resolveTimeFormat, } from './format.js';
 const TICK_STRIP = 22;
 /** Extra height reserved for an axis `label` line. */
 const LABEL_STRIP = 16;
-const TICK_COUNT = 5;
 /**
  * Thin + truncate a **category** axis's labels so a dense axis stays legible: keep
  * every `stride`-th label (so a kept label has room), and ellipsize one that still
@@ -53,7 +52,10 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
     if (container === null) {
         throw new Error('<XAxis> must be rendered inside a <ChartContainer>');
     }
-    const { xScale, plotWidth, leftGutter, theme, formatTime, xKind } = container;
+    // `xTickCount` is the container's shared x-side count — the same value the x
+    // gridlines and `formatTime` use, so labels and grid stay on the same instants
+    // (width-derived on a trading-time axis).
+    const { xScale, plotWidth, leftGutter, theme, formatTime, xKind, xTickCount, } = container;
     // The crosshair's x-time pill: when the container cursor is `'crosshair'` and a
     // cursor is live in-bounds, pin the hovered time to this axis (covering the
     // tick behind it), matching the on-axis y value pills the rows draw. Gated on
@@ -76,8 +78,8 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
     format === undefined || xKind === 'category'
         ? formatTime
         : xKind === 'time'
-            ? resolveTimeFormat(xScale, TICK_COUNT, format)
-            : resolveAxisFormat(xScale, TICK_COUNT, format);
+            ? resolveTimeFormat(xScale, xTickCount, format)
+            : resolveAxisFormat(xScale, xTickCount, format);
     // Marker annotations that opted into an axis indicator (`<Marker indicator>`)
     // pin their **time** to this shared x-axis — a pill at `at`, in the annotation
     // colour, reading like a tick. An indicator always shows the axis coordinate
@@ -126,7 +128,7 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
     const maxPillLane = Math.max(0, pillLaneEnds.length - 1);
     const rawTicks = customTicks
         ? customTicks.map((t) => ({ x: xScale(t.at), label: t.label }))
-        : xScale.ticks(TICK_COUNT).map((d) => ({
+        : xScale.ticks(xTickCount).map((d) => ({
             x: xScale(d),
             label: fmt(+d),
         }));

package/dist/context.d.ts

@@ -151,6 +151,17 @@ export interface ContainerFrame {
     /** Format an epoch-ms instant the same way the time axis labels its ticks —
      *  shared by `<TimeAxis>` and the cursor-time readout. */
     readonly formatTime: (epochMs: number) => string;
+    /**
+     * The shared **x-side tick count** — the `count` every x-side `ticks()` /
+     * `tickFormat()` call passes (`<XAxis>` labels, the canvas x gridlines and
+     * session dividers, {@link formatTime}), so labels, grid, and dividers all
+     * derive from the same instants. A fixed default on a continuous axis;
+     * **width-derived on a trading-time axis**, where the count caps how many
+     * calendar buckets `coarsenCalendar` may keep — a fixed small count would
+     * coarsen any long daily view to year grain (2 ticks) no matter how wide
+     * the plot is.
+     */
+    readonly xTickCount: number;
     /**
      * Register a draw layer as a tracker source so the container can fan in every
      * series' value at the cursor for `onTrackerChanged`. Keyed by the layer's

package/dist/format.d.ts

@@ -42,8 +42,10 @@ interface TimeTickable {
  * - a **function** → used as-is (called with epoch ms);
  * - a **specifier string** → `scale.tickFormat(count, specifier)` (one format for
  *   every value), wrapped to take epoch ms;
- * - **`undefined`** → `scale.tickFormat()` — d3's **multi-scale** time format (the
- *   time axis's default; no `count` so it matches `<TimeAxis>` exactly).
+ * - **`undefined`** → `scale.tickFormat(count)` — the scale's default. On a d3
+ *   `scaleTime` that is the **multi-scale** time format (which ignores `count`);
+ *   a trading-time scale picks its **anchor grain** from `count`, so passing the
+ *   axis's count here is what keeps the labels on the same grain as the ticks.
  *
  * The cursor time is epoch ms, so the resolved formatter wraps the d3 `Date`
  * formatter in `new Date(ms)`.

package/dist/format.js

@@ -32,8 +32,10 @@ export function resolveAxisFormat(scale, count, format) {
  * - a **function** → used as-is (called with epoch ms);
  * - a **specifier string** → `scale.tickFormat(count, specifier)` (one format for
  *   every value), wrapped to take epoch ms;
- * - **`undefined`** → `scale.tickFormat()` — d3's **multi-scale** time format (the
- *   time axis's default; no `count` so it matches `<TimeAxis>` exactly).
+ * - **`undefined`** → `scale.tickFormat(count)` — the scale's default. On a d3
+ *   `scaleTime` that is the **multi-scale** time format (which ignores `count`);
+ *   a trading-time scale picks its **anchor grain** from `count`, so passing the
+ *   axis's count here is what keeps the labels on the same grain as the ticks.
  *
  * The cursor time is epoch ms, so the resolved formatter wraps the d3 `Date`
  * formatter in `new Date(ms)`.
@@ -41,7 +43,9 @@ export function resolveAxisFormat(scale, count, format) {
 export function resolveTimeFormat(scale, count, format) {
     if (typeof format === 'function')
         return format;
-    const tf = format !== undefined ? scale.tickFormat(count, format) : scale.tickFormat();
+    const tf = format !== undefined
+        ? scale.tickFormat(count, format)
+        : scale.tickFormat(count);
     return (ms) => tf(new Date(ms));
 }
 //# sourceMappingURL=format.js.map

package/dist/tradingTimeScale.d.ts

@@ -83,6 +83,12 @@ type TickGranularity = 'session' | 'week' | 'month' | 'quarter' | 'year';
  * `count` buckets and returns the first open in each; beyond yearly it decimates
  * every-nth so the axis never crowds. Exported so the container can draw session
  * dividers at the same instants the axis labels.
+ *
+ * `count` is a **cap**, not a target: grains jump by 4–12× up the ladder, so a
+ * small fixed count over-coarsens long spans (a mid-year-anchored 12-month daily
+ * run spans 6 quarter buckets — capped at 5 it collapses to year grain, 2
+ * ticks). Callers size the cap to the room the labels have — the container
+ * derives it from plot width — rather than passing a small constant.
  */
 export declare function coarsenCalendar(opens: readonly number[], count: number): {
     ticks: number[];

package/dist/tradingTimeScale.js

@@ -52,6 +52,12 @@ const COARSENING_LADDER = [
  * `count` buckets and returns the first open in each; beyond yearly it decimates
  * every-nth so the axis never crowds. Exported so the container can draw session
  * dividers at the same instants the axis labels.
+ *
+ * `count` is a **cap**, not a target: grains jump by 4–12× up the ladder, so a
+ * small fixed count over-coarsens long spans (a mid-year-anchored 12-month daily
+ * run spans 6 quarter buckets — capped at 5 it collapses to year grain, 2
+ * ticks). Callers size the cap to the room the labels have — the container
+ * derives it from plot width — rather than passing a small constant.
  */
 export function coarsenCalendar(opens, count) {
     if (opens.length <= count)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pond-ts/charts",
-  "version": "0.44.0",
+  "version": "0.44.1",
   "private": false,
   "description": "Canvas-rendered, streaming-first time-series charts for pond-ts",
   "license": "MIT",