@fundar/data-chart-telling 0.0.12 → 0.0.14

package/dist/layout/plot/PlotLayout.svelte

@@ -7,7 +7,7 @@
   import { hasHoverMarker, findHoverMarker } from '../tooltip/utils';
   import HoverMarker from '../../plots/markers/HoverMarker.svelte';
   import Tooltip from '../tooltip/Tooltip.svelte';
-  import type { AxisValue, Series, ScalesConfig, MarginConfig } from '../../types/plots/common';
+  import type { AxisValue, AxisScale, Series, ScalesConfig, MarginConfig } from '../../types/plots/common';
   import type { Marker } from '../../types/plots/markers';
   import type { HoverStrategy, HoverDisplayPoint, HoverPoint, TooltipRuntime } from '../../types/layout/tooltip';
 
@@ -98,6 +98,51 @@
     };
   });
 
+  // ── Axis ticks / domain ──────────────────────────────────────────────────
+
+  const xValues = $derived(data.map(getX));
+  const yValues = $derived(data.map(getY));
+
+  /**
+   * Caps the requested tick count to the axis's own number of distinct
+   * values, but never above what the pixel width would naturally request —
+   * so a narrow domain (e.g. 5 whole years) never gets subdivided into
+   * fractional ticks (2020, 2020.5, 2021, …) just to fill the space. Skipped
+   * whenever the caller already controls tick density directly.
+   */
+  function autoTickCount(scale: AxisScale | undefined, values: AxisValue[], span: number, spacing: number, min: number): number | undefined {
+    if (scale?.ticks != null || scale?.tickSpacing != null || scale?.interval != null) return undefined;
+    const uniqueCount = new Set(values.map(String)).size;
+    const natural = Math.max(min, Math.round(span / spacing));
+    return uniqueCount >= 2 && uniqueCount < natural ? uniqueCount : undefined;
+  }
+
+  const xTickCount = $derived(
+    autoTickCount(scales?.x, xValues, Math.max(0, width - computedMargins.left - computedMargins.right), 80, 3),
+  );
+  const yTickCount = $derived(
+    autoTickCount(scales?.y, yValues, Math.max(0, height - computedMargins.top - computedMargins.bottom), 50, 2),
+  );
+
+  /**
+   * svelteplot's own `sort` scale option only toggles a fixed ascending sort
+   * (lexicographic for strings) — it can't take a custom comparator. When the
+   * caller supplies one via `scales.x.sort`/`scales.y.sort` for a string-valued
+   * axis (e.g. dates formatted as text), compute the ordered domain ourselves
+   * and hand it to the scale as an explicit `domain`, which svelteplot does
+   * respect as-is for ordinal scales.
+   */
+  function sortedScale<T>(scale: T, scaleConfig: AxisScale | undefined, values: AxisValue[]): T {
+    const sort = scaleConfig?.sort;
+    if (!sort || scaleConfig?.domain || values.length === 0) return scale;
+    if (!values.every((v) => typeof v === 'string')) return scale;
+    const domain = [...new Set(values)].sort(sort);
+    return { ...(scale as object), domain } as T;
+  }
+
+  const resolvedX = $derived(sortedScale(x, scales?.x, xValues));
+  const resolvedY = $derived(sortedScale(y, scales?.y, yValues));
+
   // ── Hover / tooltip ───────────────────────────────────────────────────────
   const hoverActive = $derived(tooltip != null || hasHoverMarker(markers));
 
@@ -165,9 +210,21 @@
   onpointermove={hoverActive ? ctrl.onMove : undefined}
   onpointerleave={hoverActive ? ctrl.onLeave : undefined}
 >
-  <Plot {width} {height} margin={computedMargins} {x} {y}>
-    <AxisX tickSize={scales?.x?.tickSize ?? cfg.axis.xTickSize} tickPadding={scales?.x?.tickPadding ?? cfg.axis.xTickPadding} tickFontSize={cfg.axis.fontSize} titleFontSize={scales?.x?.titleFontSize ?? cfg.axis.titleFontSize} />
-    <AxisY tickSize={scales?.y?.tickSize ?? cfg.axis.yTickSize} tickPadding={scales?.y?.tickPadding ?? cfg.axis.yTickPadding} tickFontSize={cfg.axis.fontSize} titleFontSize={scales?.y?.titleFontSize ?? cfg.axis.titleFontSize} />
+  <Plot {width} {height} margin={computedMargins} x={resolvedX} y={resolvedY}>
+    <AxisX
+      tickCount={xTickCount}
+      tickSize={scales?.x?.tickSize ?? cfg.axis.xTickSize}
+      tickPadding={scales?.x?.tickPadding ?? cfg.axis.xTickPadding}
+      tickFontSize={cfg.axis.fontSize}
+      titleFontSize={scales?.x?.titleFontSize ?? cfg.axis.titleFontSize}
+    />
+    <AxisY
+      tickCount={yTickCount}
+      tickSize={scales?.y?.tickSize ?? cfg.axis.yTickSize}
+      tickPadding={scales?.y?.tickPadding ?? cfg.axis.yTickPadding}
+      tickFontSize={cfg.axis.fontSize}
+      titleFontSize={scales?.y?.titleFontSize ?? cfg.axis.titleFontSize}
+    />
     {@render children({
       matchedPoints: ctrl.points,
       ruleX: ctrl.ruleX,
@@ -219,7 +276,7 @@
   </Plot>
 
   {#if tooltip && ctrl.showTooltip && ctrl.tooltipPosition}
-    <Tooltip x={ctrl.tooltipPosition?.x ?? 0} y={ctrl.tooltipPosition?.y ?? 0}>
+    <Tooltip x={ctrl.tooltipPosition?.x ?? 0} y={ctrl.tooltipPosition?.y ?? 0} bounds={{ width, height }}>
       {#if tooltip.content}
         {@render tooltip.content({ rows: ctrl.matchedRows.map((p) => p.row) })}
       {:else}

package/dist/layout/tooltip/Tooltip.svelte

@@ -6,6 +6,11 @@
    * parent. It is styled entirely from the `--dct-tooltip-*` variables that
    * {@link ChartContainer} stamps from the config, so it themes for free. Plots
    * that implement hovering can render this with their own content snippet.
+   *
+   * Placement is boundary-aware: it prefers sitting centered above the point,
+   * but flips below when it would overflow the top and shifts horizontally
+   * when it would overflow the left/right, so it always stays clear of the
+   * `bounds` box (typically the plot's own width/height).
    */
   let {
     x,
@@ -13,6 +18,7 @@
     visible = true,
     background,
     color,
+    bounds,
     children,
   }: {
     x: number;
@@ -20,15 +26,39 @@
     visible?: boolean;
     background?: string;
     color?: string;
+    /** Box the tooltip must stay within — usually the hosting plot's width/height. */
+    bounds?: { width: number; height: number };
     children: Snippet;
   } = $props();
+
+  const GAP = 10;
+  const EDGE_MARGIN = 6;
+
+  let boxWidth = $state(0);
+  let boxHeight = $state(0);
+
+  const placement = $derived.by(() => {
+    const boundsWidth = bounds?.width ?? Infinity;
+    const boundsHeight = bounds?.height ?? Infinity;
+
+    let top = y - GAP - boxHeight;
+    if (top < EDGE_MARGIN) top = y + GAP;
+    top = Math.min(Math.max(top, EDGE_MARGIN), Math.max(EDGE_MARGIN, boundsHeight - boxHeight - EDGE_MARGIN));
+
+    let left = x - boxWidth / 2;
+    left = Math.min(Math.max(left, EDGE_MARGIN), Math.max(EDGE_MARGIN, boundsWidth - boxWidth - EDGE_MARGIN));
+
+    return { left, top };
+  });
 </script>
 
 {#if visible}
   <div
     class="dct-tooltip"
-    style:left="{x}px"
-    style:top="{y}px"
+    bind:clientWidth={boxWidth}
+    bind:clientHeight={boxHeight}
+    style:left="{placement.left}px"
+    style:top="{placement.top}px"
     style:background={background}
     style:color={color}
   >
@@ -40,7 +70,6 @@
   .dct-tooltip {
     position: absolute;
     z-index: 10;
-    transform: translate(-50%, -110%);
     pointer-events: none;
     background: var(--dct-tooltip-bg, #111827);
     color: var(--dct-tooltip-color, #fff);

package/dist/layout/tooltip/Tooltip.svelte.d.ts

@@ -5,6 +5,11 @@ type $$ComponentProps = {
     visible?: boolean;
     background?: string;
     color?: string;
+    /** Box the tooltip must stay within — usually the hosting plot's width/height. */
+    bounds?: {
+        width: number;
+        height: number;
+    };
     children: Snippet;
 };
 declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/layout/tooltip/controller.svelte.js

@@ -47,7 +47,7 @@ export function createHoverController(args) {
             return cursor != null;
         return h.sync;
     });
-    const tooltipText = $derived(matchedRows.length ? matchedRows.map((p) => args.format()(p.row)).join('\n\n') : '');
+    const tooltipText = $derived(matchedRows.length ? matchedRows.map((p) => args.format()(p.row)).join('\n') : '');
     function onPointer(data) {
         const h = args.hover();
         if (data.length) {

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

@@ -42,10 +42,7 @@ export type AxisScale = {
     titleFontSize?: number;
     base?: number;
     constant?: number;
-    sort?: ((a: unknown, b: unknown) => number) | {
-        channel: string;
-        order: 'ascending' | 'descending';
-    };
+    sort?: (a: AxisValue, b: AxisValue) => number;
     grid?: boolean;
     tickRotate?: number;
     tickFormat?: false | Intl.NumberFormatOptions | Intl.DateTimeFormatOptions | ((d: unknown, index: number, ticks: unknown[]) => string | string[]);

package/package.json

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