@fundar/data-chart-telling 0.0.61 → 0.0.63

package/README.md

@@ -522,6 +522,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',
@@ -95,7 +99,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

@@ -93,6 +93,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;
@@ -329,6 +331,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;
@@ -565,6 +569,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;
@@ -801,6 +807,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

@@ -319,14 +319,22 @@
     white-space: nowrap;
     font-weight: var(--dct-continuous-label-weight, 600);
   }
-  .dct-continuous__tick--handle-lo.dct-continuous__tick--vertical {
+  /*
+   * Once the two handle labels would otherwise collide, both read
+   * top-to-bottom instead of left-to-right — the *same* rotation and the
+   * *same* pivot corner for lo and hi, so the two read identically instead
+   * of one appearing mirrored against the other. Pivoting on the label's
+   * own bottom-left corner (exactly where `left: <anchor>px` already
+   * places it) means the rotation doesn't shift the label off its anchor
+   * at all — it grows right-and-down from the point it was already
+   * sitting at, the same "grow into the bar, not off the container's edge"
+   * reasoning as the horizontal anchoring above.
+   */
+  .dct-continuous__tick--handle-lo.dct-continuous__tick--vertical,
+  .dct-continuous__tick--handle-hi.dct-continuous__tick--vertical {
     transform-origin: left bottom;
     transform: rotate(var(--dct-continuous-label-overlap-rotate, 90deg));
   }
-  .dct-continuous__tick--handle-hi.dct-continuous__tick--vertical {
-    transform-origin: right bottom;
-    transform: rotate(calc(var(--dct-continuous-label-overlap-rotate, 90deg) * -1));
-  }
   /* Tick mark below the bar at each non-interactive tick's position. */
   .dct-continuous__tick-mark {
     width: var(--dct-continuous-tick-width, 1px);

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

@@ -94,6 +94,8 @@ export type ChartConfig = {
         xTickPadding: number;
         yTickPadding: number;
         grid: boolean;
+        locale: string;
+        compactDisplay: 'short' | 'long';
     };
     tooltip: {
         background: string;

package/package.json

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