@fundar/data-chart-telling 0.0.62 → 0.0.63
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/dist/configuration/config.svelte.js +8 -2
- package/dist/configuration/themes/index.d.ts +8 -0
- package/dist/layout/coordinates/CoordinatesLayout.svelte +4 -0
- package/dist/layout/coordinates/CoordinatesLayout.svelte.d.ts +2 -0
- package/dist/layout/plot/BasePlotLayout.svelte +5 -1
- package/dist/types/configuration/styling.d.ts +2 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -522,6 +522,10 @@ Consumed as plain numeric/boolean props by the underlying svelteplot axes — on
|
|
|
522
522
|
| `axis.xTickPadding` | `number` | `10` | — |
|
|
523
523
|
| `axis.yTickPadding` | `number` | `10` | — |
|
|
524
524
|
| `axis.grid` | `boolean` | `false` | — |
|
|
525
|
+
| `axis.locale` | `string` | `'es-AR'` | — |
|
|
526
|
+
| `axis.compactDisplay` | `'short' \| 'long'` | `'long'` | — (`'1 mil'` vs `'1 K'`) |
|
|
527
|
+
|
|
528
|
+
`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.
|
|
525
529
|
|
|
526
530
|
#### Tooltip
|
|
527
531
|
|
|
@@ -14,7 +14,11 @@
|
|
|
14
14
|
*/
|
|
15
15
|
// ── Defaults ────────────────────────────────────────────────────────────────
|
|
16
16
|
// Mirror the values the components shipped with, so adopting the config system
|
|
17
|
-
// is visually a no-op until something is overridden.
|
|
17
|
+
// is visually a no-op until something is overridden — except `axis.locale`,
|
|
18
|
+
// which defaults to `es-AR` instead of svelteplot's own `en-US`, and
|
|
19
|
+
// `axis.compactDisplay`, which defaults to `long` instead of svelteplot's
|
|
20
|
+
// own `short` (Spanish's short form is inconsistent about letter case —
|
|
21
|
+
// `'1 K'` vs `'10 k'` for the same unit — while its long form isn't).
|
|
18
22
|
const text = (over) => ({
|
|
19
23
|
font: 'inherit',
|
|
20
24
|
size: '1rem',
|
|
@@ -95,7 +99,9 @@ export const DEFAULT_CONFIG = {
|
|
|
95
99
|
yTickSize: 5,
|
|
96
100
|
xTickPadding: 10,
|
|
97
101
|
yTickPadding: 10,
|
|
98
|
-
grid: false
|
|
102
|
+
grid: false,
|
|
103
|
+
locale: 'es-AR',
|
|
104
|
+
compactDisplay: 'long'
|
|
99
105
|
},
|
|
100
106
|
tooltip: {
|
|
101
107
|
background: '#111827',
|
|
@@ -93,6 +93,8 @@ export declare const THEMES: {
|
|
|
93
93
|
xTickPadding?: number | undefined;
|
|
94
94
|
yTickPadding?: number | undefined;
|
|
95
95
|
grid?: boolean | undefined;
|
|
96
|
+
locale?: string | undefined;
|
|
97
|
+
compactDisplay?: "short" | "long" | undefined;
|
|
96
98
|
} | undefined;
|
|
97
99
|
tooltip?: {
|
|
98
100
|
background?: string | undefined;
|
|
@@ -329,6 +331,8 @@ export declare const THEMES: {
|
|
|
329
331
|
xTickPadding?: number | undefined;
|
|
330
332
|
yTickPadding?: number | undefined;
|
|
331
333
|
grid?: boolean | undefined;
|
|
334
|
+
locale?: string | undefined;
|
|
335
|
+
compactDisplay?: "short" | "long" | undefined;
|
|
332
336
|
} | undefined;
|
|
333
337
|
tooltip?: {
|
|
334
338
|
background?: string | undefined;
|
|
@@ -565,6 +569,8 @@ export declare const THEMES: {
|
|
|
565
569
|
xTickPadding?: number | undefined;
|
|
566
570
|
yTickPadding?: number | undefined;
|
|
567
571
|
grid?: boolean | undefined;
|
|
572
|
+
locale?: string | undefined;
|
|
573
|
+
compactDisplay?: "short" | "long" | undefined;
|
|
568
574
|
} | undefined;
|
|
569
575
|
tooltip?: {
|
|
570
576
|
background?: string | undefined;
|
|
@@ -801,6 +807,8 @@ export declare const THEMES: {
|
|
|
801
807
|
xTickPadding?: number | undefined;
|
|
802
808
|
yTickPadding?: number | undefined;
|
|
803
809
|
grid?: boolean | undefined;
|
|
810
|
+
locale?: string | undefined;
|
|
811
|
+
compactDisplay?: "short" | "long" | undefined;
|
|
804
812
|
} | undefined;
|
|
805
813
|
tooltip?: {
|
|
806
814
|
background?: string | undefined;
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
x,
|
|
31
31
|
y,
|
|
32
32
|
coordinates = undefined,
|
|
33
|
+
locale = undefined,
|
|
33
34
|
data,
|
|
34
35
|
containerEl,
|
|
35
36
|
remountKey = undefined,
|
|
@@ -41,6 +42,8 @@
|
|
|
41
42
|
x: SveltePlotProps['x'];
|
|
42
43
|
y: SveltePlotProps['y'];
|
|
43
44
|
coordinates?: CoordinatesConfig;
|
|
45
|
+
/** Forwarded verbatim to svelteplot's own `<Plot locale>`. */
|
|
46
|
+
locale?: SveltePlotProps['locale'];
|
|
44
47
|
/** Fed to `resolveProjection`'s `domain: 'data'` sentinel and to `coordinates.camera`'s `{features}` target resolution. */
|
|
45
48
|
data: TData[];
|
|
46
49
|
containerEl?: HTMLDivElement;
|
|
@@ -149,6 +152,7 @@
|
|
|
149
152
|
{margin}
|
|
150
153
|
{x}
|
|
151
154
|
{y}
|
|
155
|
+
{locale}
|
|
152
156
|
projection={finalProjection as SveltePlotProps['projection']}
|
|
153
157
|
>
|
|
154
158
|
{#if cameraActive && resolvedCameraTarget}
|
|
@@ -8,6 +8,8 @@ declare function $$render<TData extends Record<string, unknown>>(): {
|
|
|
8
8
|
x: false | import("svelteplot/types/data.js").RawValue[] | Partial<import("svelteplot/types/scale.js").XScaleOptions> | undefined;
|
|
9
9
|
y: false | import("svelteplot/types/data.js").RawValue[] | Partial<import("svelteplot/types/scale.js").YScaleOptions> | undefined;
|
|
10
10
|
coordinates?: CoordinatesConfig;
|
|
11
|
+
/** Forwarded verbatim to svelteplot's own `<Plot locale>`. */
|
|
12
|
+
locale?: string | undefined;
|
|
11
13
|
/** Fed to `resolveProjection`'s `domain: 'data'` sentinel and to `coordinates.camera`'s `{features}` target resolution. */
|
|
12
14
|
data: TData[];
|
|
13
15
|
containerEl?: HTMLDivElement;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
generics="TData extends Record<string, unknown>, TSeries extends Record<string, unknown> = TData"
|
|
4
4
|
>
|
|
5
5
|
import type { ComponentProps, Snippet } from 'svelte';
|
|
6
|
-
import { Plot, Pointer } from 'svelteplot';
|
|
6
|
+
import { Plot, Pointer, setPlotDefaults } from 'svelteplot';
|
|
7
7
|
import { getConfiguration } from '../../configuration/config.svelte';
|
|
8
8
|
import { AUTO_MARGIN_ESTIMATE, numericMargin } from './margins';
|
|
9
9
|
import { buildScale } from '../scales/buildScale';
|
|
@@ -149,6 +149,9 @@
|
|
|
149
149
|
} = $props();
|
|
150
150
|
|
|
151
151
|
const cfg = $derived(getConfiguration());
|
|
152
|
+
setPlotDefaults({
|
|
153
|
+
numberFormat: { useGrouping: 'min2', compactDisplay: cfg.axis.compactDisplay }
|
|
154
|
+
});
|
|
152
155
|
|
|
153
156
|
/**
|
|
154
157
|
* Margins passed straight to `<Plot margin={…}>`. Each side defaults to
|
|
@@ -262,6 +265,7 @@
|
|
|
262
265
|
x={resolvedX}
|
|
263
266
|
y={resolvedY}
|
|
264
267
|
{coordinates}
|
|
268
|
+
locale={cfg.axis.locale}
|
|
265
269
|
{data}
|
|
266
270
|
{containerEl}
|
|
267
271
|
remountKey={marginRemountKey}
|