@fundar/data-chart-telling 0.0.62 → 0.0.64

package/README.md

@@ -482,10 +482,13 @@ Each is a `TextStyle` — `{ font, size, weight, color, leading, spacing }` —
 | `legend.navButton.fontSize` | `string` | `'1rem'` | `--dct-legend-nav-font-size` |
 | `legend.navButton.disabledOpacity` | `number` | `0.3` | `--dct-legend-nav-disabled-opacity` |
 
-`legend.continuous` — the gradient bar's draggable handles, ticks, and labels:
+`legend.continuous` — the gradient bar itself, its draggable handles, ticks, and labels:
 
 | Field | Type | Default | CSS variable |
 | ----- | ---- | ------- | ------------- |
+| `legend.continuous.height` | `number` (px) | `20` | — |
+| `legend.continuous.barHeight` | `number` (px) | `12` | — |
+| `legend.continuous.barRadius` | `number` (px) | `2` | — |
 | `legend.continuous.handle.width` | `string` | `'6px'` | `--dct-continuous-handle-width` |
 | `legend.continuous.handle.height` | `string` | `'20px'` | `--dct-continuous-handle-height` |
 | `legend.continuous.handle.radius` | `string` | `'3px'` | `--dct-continuous-handle-radius` |
@@ -522,6 +525,10 @@ Consumed as plain numeric/boolean props by the underlying svelteplot axes — on
 | `axis.xTickPadding` | `number` | `10` | — |
 | `axis.yTickPadding` | `number` | `10` | — |
 | `axis.grid` | `boolean` | `false` | — |
+| `axis.locale` | `string` | `'es-AR'` | — |
+| `axis.compactDisplay` | `'short' \| 'long'` | `'long'` | — (`'1 mil'` vs `'1 K'`) |
+
+`axis.locale`/`axis.compactDisplay` feed svelteplot's own automatic tick formatter — the one it falls back to on any axis without its own explicit `scales.x`/`scales.y.tickFormat`. Whether a given axis abbreviates at all (vs. spelling every digit out) stays svelteplot's own per-axis call, based on that axis's value range; these two only change the *wording* once it decides to. `axis.locale` updates a chart already on screen; `axis.compactDisplay` is read once when a chart mounts (it goes through svelteplot's own `setPlotDefaults` context hook, not a per-instance prop) and needs a remount to pick up a later change.
 
 #### Tooltip
 

package/dist/configuration/config.svelte.js

@@ -14,7 +14,11 @@
  */
 // ── Defaults ────────────────────────────────────────────────────────────────
 // Mirror the values the components shipped with, so adopting the config system
-// is visually a no-op until something is overridden.
+// is visually a no-op until something is overridden — except `axis.locale`,
+// which defaults to `es-AR` instead of svelteplot's own `en-US`, and
+// `axis.compactDisplay`, which defaults to `long` instead of svelteplot's
+// own `short` (Spanish's short form is inconsistent about letter case —
+// `'1 K'` vs `'10 k'` for the same unit — while its long form isn't).
 const text = (over) => ({
     font: 'inherit',
     size: '1rem',
@@ -60,6 +64,9 @@ export const DEFAULT_CONFIG = {
             disabledOpacity: 0.3
         },
         continuous: {
+            height: 20,
+            barHeight: 12,
+            barRadius: 2,
             // A slim vertical bar handle, taller than the 12px gradient track.
             handle: {
                 width: '6px',
@@ -95,7 +102,9 @@ export const DEFAULT_CONFIG = {
         yTickSize: 5,
         xTickPadding: 10,
         yTickPadding: 10,
-        grid: false
+        grid: false,
+        locale: 'es-AR',
+        compactDisplay: 'long'
     },
     tooltip: {
         background: '#111827',

package/dist/configuration/themes/index.d.ts

@@ -58,6 +58,9 @@ export declare const THEMES: {
                 disabledOpacity?: number | undefined;
             } | undefined;
             continuous?: {
+                height?: number | undefined;
+                barHeight?: number | undefined;
+                barRadius?: number | undefined;
                 handle?: {
                     width?: string | undefined;
                     height?: string | undefined;
@@ -93,6 +96,8 @@ export declare const THEMES: {
             xTickPadding?: number | undefined;
             yTickPadding?: number | undefined;
             grid?: boolean | undefined;
+            locale?: string | undefined;
+            compactDisplay?: "short" | "long" | undefined;
         } | undefined;
         tooltip?: {
             background?: string | undefined;
@@ -294,6 +299,9 @@ export declare const THEMES: {
                 disabledOpacity?: number | undefined;
             } | undefined;
             continuous?: {
+                height?: number | undefined;
+                barHeight?: number | undefined;
+                barRadius?: number | undefined;
                 handle?: {
                     width?: string | undefined;
                     height?: string | undefined;
@@ -329,6 +337,8 @@ export declare const THEMES: {
             xTickPadding?: number | undefined;
             yTickPadding?: number | undefined;
             grid?: boolean | undefined;
+            locale?: string | undefined;
+            compactDisplay?: "short" | "long" | undefined;
         } | undefined;
         tooltip?: {
             background?: string | undefined;
@@ -530,6 +540,9 @@ export declare const THEMES: {
                 disabledOpacity?: number | undefined;
             } | undefined;
             continuous?: {
+                height?: number | undefined;
+                barHeight?: number | undefined;
+                barRadius?: number | undefined;
                 handle?: {
                     width?: string | undefined;
                     height?: string | undefined;
@@ -565,6 +578,8 @@ export declare const THEMES: {
             xTickPadding?: number | undefined;
             yTickPadding?: number | undefined;
             grid?: boolean | undefined;
+            locale?: string | undefined;
+            compactDisplay?: "short" | "long" | undefined;
         } | undefined;
         tooltip?: {
             background?: string | undefined;
@@ -766,6 +781,9 @@ export declare const THEMES: {
                 disabledOpacity?: number | undefined;
             } | undefined;
             continuous?: {
+                height?: number | undefined;
+                barHeight?: number | undefined;
+                barRadius?: number | undefined;
                 handle?: {
                     width?: string | undefined;
                     height?: string | undefined;
@@ -801,6 +819,8 @@ export declare const THEMES: {
             xTickPadding?: number | undefined;
             yTickPadding?: number | undefined;
             grid?: boolean | undefined;
+            locale?: string | undefined;
+            compactDisplay?: "short" | "long" | undefined;
         } | undefined;
         tooltip?: {
             background?: string | undefined;

package/dist/layout/coordinates/CoordinatesLayout.svelte

@@ -30,6 +30,7 @@
 		x,
 		y,
 		coordinates = undefined,
+		locale = undefined,
 		data,
 		containerEl,
 		remountKey = undefined,
@@ -41,6 +42,8 @@
 		x: SveltePlotProps['x'];
 		y: SveltePlotProps['y'];
 		coordinates?: CoordinatesConfig;
+		/** Forwarded verbatim to svelteplot's own `<Plot locale>`. */
+		locale?: SveltePlotProps['locale'];
 		/** Fed to `resolveProjection`'s `domain: 'data'` sentinel and to `coordinates.camera`'s `{features}` target resolution. */
 		data: TData[];
 		containerEl?: HTMLDivElement;
@@ -149,6 +152,7 @@
 		{margin}
 		{x}
 		{y}
+		{locale}
 		projection={finalProjection as SveltePlotProps['projection']}
 	>
 		{#if cameraActive && resolvedCameraTarget}

package/dist/layout/coordinates/CoordinatesLayout.svelte.d.ts

@@ -8,6 +8,8 @@ declare function $$render<TData extends Record<string, unknown>>(): {
         x: false | import("svelteplot/types/data.js").RawValue[] | Partial<import("svelteplot/types/scale.js").XScaleOptions> | undefined;
         y: false | import("svelteplot/types/data.js").RawValue[] | Partial<import("svelteplot/types/scale.js").YScaleOptions> | undefined;
         coordinates?: CoordinatesConfig;
+        /** Forwarded verbatim to svelteplot's own `<Plot locale>`. */
+        locale?: string | undefined;
         /** Fed to `resolveProjection`'s `domain: 'data'` sentinel and to `coordinates.camera`'s `{features}` target resolution. */
         data: TData[];
         containerEl?: HTMLDivElement;

package/dist/layout/legend/ContinuousSection.svelte

@@ -14,6 +14,23 @@
   const fmt = $derived(section.format ?? ((v: number) => String(v)));
   const isInteractive = $derived(section.interactive?.enabled ?? false);
 
+  // How far the default handle bleeds past its 0/1 track position, so the
+  // track can be inset from `barWidth`'s edges by that much.
+  let loHandleEl = $state<SVGRectElement>();
+  const handleBleed = $derived(
+    isInteractive && !section.interactive?.handle && loHandleEl
+      ? Math.ceil(loHandleEl.getBoundingClientRect().width / 2)
+      : 0,
+  );
+  const trackWidth = $derived(Math.max(0, barWidth - handleBleed * 2));
+  function trackX(t: number): number {
+    return handleBleed + t * trackWidth;
+  }
+
+  const svgHeight = $derived(cfg.legend.continuous.height);
+  const barHeight = $derived(cfg.legend.continuous.barHeight);
+  const barRadius = $derived(cfg.legend.continuous.barRadius);
+
   // Fill/opacity for the excluded-margin rects.
   const excludedStyle = $derived.by((): { fill: string; opacity: number } => {
     const d = section.interactive?.disabledStyle;
@@ -133,7 +150,7 @@
       target.setPointerCapture(event.pointerId);
       const startX = event.clientX;
       const startValue = which === 'lo' ? lo : hi;
-      const valuePerPixel = (section.max - section.min) / barWidth;
+      const valuePerPixel = (section.max - section.min) / trackWidth;
 
       function onMove(e: PointerEvent): void {
         const next = startValue + (e.clientX - startX) * valuePerPixel;
@@ -173,12 +190,12 @@
   const labelsOverlap = $derived(
     isInteractive &&
       cfg.legend.continuous.label.overlap.enabled &&
-      (hiT - loT) * barWidth - loLabelWidth - hiLabelWidth < cfg.legend.continuous.label.overlap.margin,
+      (hiT - loT) * trackWidth - loLabelWidth - hiLabelWidth < cfg.legend.continuous.label.overlap.margin,
   );
 </script>
 
 <div class="dct-continuous" style:width="{barWidth}px">
-  <svg width={barWidth} height="20" style="overflow: visible">
+  <svg width={barWidth} height={svgHeight} style="overflow: visible">
     <defs>
       <linearGradient id={gradientId} x1="0" x2="1" y1="0" y2="0">
         {#each stops as s (s.offset)}
@@ -186,17 +203,17 @@
         {/each}
       </linearGradient>
     </defs>
-    <rect width={barWidth} height="12" rx="2" fill="url(#{gradientId})" />
+    <rect x={handleBleed} width={trackWidth} height={barHeight} rx={barRadius} fill="url(#{gradientId})" />
     {#each tickPositions as tick (tick.v)}
-      <rect class="dct-continuous__tick-mark" x={tick.t * barWidth} y="12" />
+      <rect class="dct-continuous__tick-mark" x={trackX(tick.t)} y={barHeight} />
     {/each}
 
     {#if isInteractive}
       {#if loT > 0}
-        <rect x="0" y="0" width={loT * barWidth} height="12" rx="2" fill={excludedStyle.fill} fill-opacity={excludedStyle.opacity} />
+        <rect x={handleBleed} y="0" width={loT * trackWidth} height={barHeight} rx={barRadius} fill={excludedStyle.fill} fill-opacity={excludedStyle.opacity} />
       {/if}
       {#if hiT < 1}
-        <rect x={hiT * barWidth} y="0" width={barWidth - hiT * barWidth} height="12" rx="2" fill={excludedStyle.fill} fill-opacity={excludedStyle.opacity} />
+        <rect x={trackX(hiT)} y="0" width={trackWidth - hiT * trackWidth} height={barHeight} rx={barRadius} fill={excludedStyle.fill} fill-opacity={excludedStyle.opacity} />
       {/if}
       {#if section.interactive?.handle}
         {@render section.interactive.handle({
@@ -216,8 +233,9 @@
       {:else}
         <rect
           class="dct-continuous__handle"
-          x={loT * barWidth}
-          y="6"
+          bind:this={loHandleEl}
+          x={trackX(loT)}
+          y={barHeight / 2}
           onpointerdown={startDrag('lo')}
           ondblclick={resetHandle('lo')}
           role="slider"
@@ -229,8 +247,8 @@
         />
         <rect
           class="dct-continuous__handle"
-          x={hiT * barWidth}
-          y="6"
+          x={trackX(hiT)}
+          y={barHeight / 2}
           onpointerdown={startDrag('hi')}
           ondblclick={resetHandle('hi')}
           role="slider"
@@ -251,17 +269,17 @@
       <span
         class="dct-continuous__tick dct-continuous__tick--handle-lo"
         class:dct-continuous__tick--vertical={labelsOverlap}
-        style:left="{loT * barWidth}px"
+        style:left="{trackX(loT)}px"
       >{fmt(lo)}</span>
       <span
         class="dct-continuous__tick dct-continuous__tick--handle-hi"
         class:dct-continuous__tick--vertical={labelsOverlap}
-        style:left="{hiT * barWidth}px"
+        style:left="{trackX(hiT)}px"
       >{fmt(hi)}</span>
     {:else}
       <span class="dct-continuous__edge dct-continuous__edge--start">{fmt(section.min)}</span>
       {#each tickPositions as tick (tick.v)}
-        <span class="dct-continuous__tick" style:left="{tick.t * barWidth}px">{tick.label}</span>
+        <span class="dct-continuous__tick" style:left="{trackX(tick.t)}px">{tick.label}</span>
       {/each}
       <span class="dct-continuous__edge dct-continuous__edge--end">{fmt(section.max)}</span>
     {/if}

package/dist/layout/legend/DiscreteSection.svelte

@@ -26,6 +26,7 @@
 	const cfg = $derived(getConfiguration());
 	const layout = $derived(section.layout ?? defaultItemsLayout);
 	const isHorizontal = $derived(layout.type === 'horizontal');
+	const isFlex = $derived(layout.type === 'flex');
 	const maxRows = $derived(layout.type === 'horizontal' ? Math.max(1, layout.maxRows ?? 1) : 1);
 	const columns = $derived(section.columns ?? 1);
 	const isInteractive = $derived(section.interactive?.enabled ?? false);
@@ -238,6 +239,12 @@
 			)}
 		{/if}
 	</div>
+{:else if isFlex}
+	<div class="dct-discrete dct-discrete--horizontal">
+		{#each section.items as item, i (item.name)}
+			{@render discreteItem(item, i)}
+		{/each}
+	</div>
 {:else}
 	<div class="dct-discrete" style:grid-template-columns="repeat({columns}, max-content)">
 		{#each section.items as item, i (item.name)}

package/dist/layout/plot/BasePlotLayout.svelte

@@ -3,7 +3,7 @@
 	generics="TData extends Record<string, unknown>, TSeries extends Record<string, unknown> = TData"
 >
 	import type { ComponentProps, Snippet } from 'svelte';
-	import { Plot, Pointer } from 'svelteplot';
+	import { Plot, Pointer, setPlotDefaults } from 'svelteplot';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import { AUTO_MARGIN_ESTIMATE, numericMargin } from './margins';
 	import { buildScale } from '../scales/buildScale';
@@ -149,6 +149,9 @@
 	} = $props();
 
 	const cfg = $derived(getConfiguration());
+	setPlotDefaults({
+		numberFormat: { useGrouping: 'min2', compactDisplay: cfg.axis.compactDisplay }
+	});
 
 	/**
 	 * Margins passed straight to `<Plot margin={…}>`. Each side defaults to
@@ -262,6 +265,7 @@
 		x={resolvedX}
 		y={resolvedY}
 		{coordinates}
+		locale={cfg.axis.locale}
 		{data}
 		{containerEl}
 		remountKey={marginRemountKey}

package/dist/types/configuration/styling.d.ts

@@ -50,6 +50,12 @@ export type ChartConfig = {
         };
         /** Continuous section styling: the draggable lo/hi handles and the tick/edge labels. */
         continuous: {
+            /** Total height (px) of the bar's drawing area. */
+            height: number;
+            /** Height (px) of the gradient bar itself, centered within `height`. */
+            barHeight: number;
+            /** Corner radius (px) of the gradient bar and excluded-range overlays. */
+            barRadius: number;
             /** The draggable lo/hi handle. */
             handle: {
                 width: string;
@@ -94,6 +100,8 @@ export type ChartConfig = {
         xTickPadding: number;
         yTickPadding: number;
         grid: boolean;
+        locale: string;
+        compactDisplay: 'short' | 'long';
     };
     tooltip: {
         background: string;

package/dist/types/layout/legend.d.ts

@@ -37,13 +37,16 @@ export type LegendItem = {
 /**
  * How a discrete section's items flow. `'vertical'` stacks them in a
  * `columns`-wide grid; `'horizontal'` flows them left to right, paginating
- * past `maxRows` (default 1) with prev/next arrows.
+ * past `maxRows` (default 1) with prev/next arrows; `'flex'` also flows them
+ * left to right, but wraps onto as many rows as it takes instead of paginating.
  */
 export type LegendItemsLayout = {
     type: 'vertical';
 } | {
     type: 'horizontal';
     maxRows?: number;
+} | {
+    type: 'flex';
 };
 export type LegendNavDirection = 'prev' | 'next';
 export type LegendNavContext = {

package/package.json

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