@fundar/data-chart-telling 0.0.43 → 0.0.45

package/dist/charts/BaseChart.svelte

@@ -20,9 +20,12 @@
    *
    *   container ▸ timeline (one shared scrubber) ▸ facet (split per small-multiple) ▸ plot
    *
-   * The leaf snippet receives `{ data, width, height, facetValue?, selectedValue? }`
-   * and knows nothing about how that box or that data slice was produced, which
-   * is what lets any plot (line, bar, heatmap, …) drop in unchanged.
+   * The leaf snippet receives `{ data, width, height, facetValue?, selectedValue?,
+   * margins? }` and knows nothing about how that box or that data slice was
+   * produced, which is what lets any plot (line, bar, heatmap, …) drop in
+   * unchanged. `margins` is only present when `facet.labelsForMargin` is
+   * given — forward it to the plot's own `margins` prop so every facet
+   * shares the same content box.
    */
   let {
     width,
@@ -83,17 +86,19 @@
       formatIndicator={facet.formatIndicator}
       indicator={facet.indicator}
       navButton={facet.navButton}
+      labelsForMargin={facet.labelsForMargin}
       width={w}
       height={h}
     >
-      {#snippet cell({ facetValue, data: cellData, width: cw, height: ch })}
+      {#snippet cell({ facetValue, data: cellData, width: cw, height: ch, margins })}
         {@render plot({
           data: cellData,
           width: cw,
           height: ch,
           facetValue,
           selectedValue,
-          legend: legendPlotContext
+          legend: legendPlotContext,
+          margins
         })}
       {/snippet}
     </FacetLayout>

package/dist/layout/scales/ScalesLayout.svelte

@@ -32,20 +32,53 @@
   const xValues = $derived(data.map(getX));
   const yValues = $derived(data.map(getY));
 
-  /** Caps tick count to the axis's distinct value count, never above what fits the pixel span. Skipped once the caller sets tick density directly. */
+  function naturalTickCount(span: number, spacing: number, min: number): number {
+    return Math.max(min, Math.round(span / spacing));
+  }
+
+  /** `[min, max]` of a pinned `scale.domain` (if numeric), else the extent of `values`. */
+  function axisExtent(scale: AxisBasedScalesConfig<TData>['x'], values: AxisValue[]): [number, number] | undefined {
+    const domainNumbers = scale?.domain?.filter((d): d is number => typeof d === 'number');
+    const source = domainNumbers && domainNumbers.length >= 2 ? domainNumbers : values.filter((v): v is number => typeof v === 'number');
+    if (source.length < 2) return undefined;
+    const lo = Math.min(...source);
+    const hi = Math.max(...source);
+    return hi > lo ? [lo, hi] : undefined;
+  }
+
+  /** Caps tick count to the axis's distinct value count, never above what fits the pixel span. Skipped once the caller sets tick density directly, or pins the domain. */
   function autoTickCount(scale: AxisBasedScalesConfig<TData>['x'], values: AxisValue[], span: number, spacing: number, min: number): number | undefined {
-    if (scale?.ticks != null || scale?.tickSpacing != null || scale?.interval != null) return undefined;
+    if (scale?.ticks != null || scale?.tickSpacing != null || scale?.interval != null || scale?.domain != null) return undefined;
     const uniqueCount = new Set(values.map(String)).size;
-    const natural = Math.max(min, Math.round(span / spacing));
+    const natural = naturalTickCount(span, spacing, min);
     return uniqueCount >= 2 && uniqueCount < natural ? uniqueCount : undefined;
   }
 
-  const xTickCount = $derived(
-    autoTickCount(scales?.x, xValues, Math.max(0, width - numericMargins.left - numericMargins.right), 80, 3),
-  );
-  const yTickCount = $derived(
-    autoTickCount(scales?.y, yValues, Math.max(0, height - numericMargins.top - numericMargins.bottom), 50, 2),
-  );
+  /** Forces a whole-unit tick interval on an integer domain that spans fewer integers than the pixel span would naturally want ticks for. */
+  function integerTickInterval(
+    scale: AxisBasedScalesConfig<TData>['x'],
+    values: AxisValue[],
+    span: number,
+    spacing: number,
+    min: number
+  ): number | undefined {
+    if (scale?.ticks != null || scale?.tickSpacing != null || scale?.interval != null) return undefined;
+    if (scale?.type != null && scale.type !== 'linear' && scale.type !== 'auto') return undefined;
+    const extent = axisExtent(scale, values);
+    if (!extent) return undefined;
+    const [lo, hi] = extent;
+    if (!Number.isInteger(lo) || !Number.isInteger(hi)) return undefined;
+    return hi - lo < naturalTickCount(span, spacing, min) ? 1 : undefined;
+  }
+
+  const xSpan = $derived(Math.max(0, width - numericMargins.left - numericMargins.right));
+  const ySpan = $derived(Math.max(0, height - numericMargins.top - numericMargins.bottom));
+
+  const xTickCount = $derived(autoTickCount(scales?.x, xValues, xSpan, 80, 3));
+  const yTickCount = $derived(autoTickCount(scales?.y, yValues, ySpan, 50, 2));
+
+  const xTickInterval = $derived(integerTickInterval(scales?.x, xValues, xSpan, 80, 3));
+  const yTickInterval = $derived(integerTickInterval(scales?.y, yValues, ySpan, 50, 2));
 
   /** Vertical Y-axis title placement, when `scales.y.labelOrientation === 'vertical'`. */
   const verticalYLabel = $derived.by(() => {
@@ -61,6 +94,7 @@
 
 <AxisX
   tickCount={xTickCount}
+  interval={xTickInterval}
   tickSize={scales?.x?.tickSize ?? cfg.axis.xTickSize}
   tickPadding={scales?.x?.tickPadding ?? cfg.axis.xTickPadding}
   tickFontSize={cfg.axis.fontSize}
@@ -68,6 +102,7 @@
 />
 <AxisY
   tickCount={yTickCount}
+  interval={yTickInterval}
   tickSize={scales?.y?.tickSize ?? cfg.axis.yTickSize}
   tickPadding={scales?.y?.tickPadding ?? cfg.axis.yTickPadding}
   tickFontSize={cfg.axis.fontSize}

package/dist/types/charts/common.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { TimeValue } from '../layout/timeline';
 import type { LegendPlotContext } from '../layout/legend';
+import type { MarginConfig } from '../plots/props';
 export type ChartBoxContext = {
     width: number;
     height: number;
@@ -13,6 +14,8 @@ export type ChartPlotContext<TRow extends Record<string, unknown>> = {
     facetValue?: string;
     selectedValue?: TimeValue;
     legend?: LegendPlotContext;
+    /** Present only when faceted with `facet.labelsForMargin` — forward to the plot's own `margins` prop so every facet shares the same content box. */
+    margins?: MarginConfig;
 };
 export type ChartPlotSnippet<TRow extends Record<string, unknown>> = Snippet<[
     ChartPlotContext<TRow>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "0.0.43",
+  "version": "0.0.45",
   "type": "module",
   "files": [
     "dist"