@fundar/data-chart-telling 0.0.64 → 1.1.0

package/dist/layout/interaction/PlotInteraction.svelte.d.ts

@@ -0,0 +1,38 @@
+import { LegendState } from '../legend/LegendState.svelte';
+import { HoverState } from '../hover/HoverState.svelte';
+import type { PlotStylesConfig } from '../../types/configuration/styling';
+import type { LegendDisabledStyle } from '../../types/layout/legend';
+import type { DotStyle, StrokeStyle } from '../../types/plots/styling';
+/**
+ * What the reader is doing with one plot: the legend's toggles and the
+ * figure's hover, read in the plot's own hover scope. Its phases ask it how
+ * each series draws - dimmed when the legend turns it off, or when a value
+ * label isolates another one - and its value labels tell it what they
+ * isolate. A core takes the enclosing figure's ({@link PlotInteraction.current});
+ * a run outside any core builds one from the legend it has.
+ */
+export declare class PlotInteraction {
+    #private;
+    readonly legend: LegendState | null;
+    readonly hover: HoverState;
+    constructor(cfg: () => PlotStylesConfig, parts?: {
+        legend?: LegendState | null;
+        hover?: HoverState;
+        scope?: () => string;
+    });
+    /** The enclosing figure's legend and hover, in the plot's own hover scope. Call during component init. */
+    static current(cfg: () => PlotStylesConfig): PlotInteraction;
+    /** How `series` dims: the legend's off style, else the legend's opacity while another series is isolated. */
+    dimmed(series: string): LegendDisabledStyle | undefined;
+    /** `series`' fill while dimmed. */
+    fillFor(series: string): {
+        fill?: string;
+        fillOpacity?: number;
+    } | undefined;
+    /** `series`' stroke while dimmed. */
+    strokeFor(series: string): StrokeStyle | undefined;
+    /** `series`' dots while dimmed. */
+    dotsFor(series: string): DotStyle | undefined;
+    /** Isolates `series` - every other one dims - or ends it with `null`. */
+    isolate(series: string | null): void;
+}

package/dist/layout/interaction/PlotInteraction.svelte.js

@@ -0,0 +1,56 @@
+import { LegendState } from '../legend/LegendState.svelte';
+import { HoverState } from '../hover/HoverState.svelte';
+import { DisabledStyle } from '../legend/DisabledStyle';
+/**
+ * What the reader is doing with one plot: the legend's toggles and the
+ * figure's hover, read in the plot's own hover scope. Its phases ask it how
+ * each series draws - dimmed when the legend turns it off, or when a value
+ * label isolates another one - and its value labels tell it what they
+ * isolate. A core takes the enclosing figure's ({@link PlotInteraction.current});
+ * a run outside any core builds one from the legend it has.
+ */
+export class PlotInteraction {
+    legend;
+    hover;
+    #scope;
+    #cfg;
+    constructor(cfg, parts = {}) {
+        this.#cfg = cfg;
+        this.legend = parts.legend ?? null;
+        this.hover = parts.hover ?? new HoverState();
+        this.#scope = parts.scope ?? (() => '');
+    }
+    /** The enclosing figure's legend and hover, in the plot's own hover scope. Call during component init. */
+    static current(cfg) {
+        return new PlotInteraction(cfg, {
+            legend: LegendState.current(),
+            hover: HoverState.current() ?? undefined,
+            scope: HoverState.scope()
+        });
+    }
+    /** How `series` dims: the legend's off style, else the legend's opacity while another series is isolated. */
+    dimmed(series) {
+        const opacity = this.#cfg().legend.disabledOpacity;
+        const off = DisabledStyle.of(this.legend?.actionOf(series), opacity);
+        if (off)
+            return off;
+        const isolated = this.hover.isolatedIn(this.#scope());
+        return isolated !== null && isolated !== series ? { opacity } : undefined;
+    }
+    /** `series`' fill while dimmed. */
+    fillFor(series) {
+        return DisabledStyle.fill(this.dimmed(series));
+    }
+    /** `series`' stroke while dimmed. */
+    strokeFor(series) {
+        return DisabledStyle.stroke(this.dimmed(series));
+    }
+    /** `series`' dots while dimmed. */
+    dotsFor(series) {
+        return DisabledStyle.dots(this.dimmed(series));
+    }
+    /** Isolates `series` - every other one dims - or ends it with `null`. */
+    isolate(series) {
+        this.hover.isolate(series, this.#scope());
+    }
+}

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

@@ -0,0 +1,12 @@
+import type { PlotStylesConfig } from '../../types/configuration/styling';
+/** Numbers as the plots' axes write them, by `axis.locale` and `axis.compactDisplay`. */
+export declare class AxisNumberFormat {
+    /**
+     * A formatter for values across `domain`, as svelteplot's automatic axis
+     * ticks are: compact (`1,2 mil`, `1.2K`) when the domain crosses zero or
+     * spans more than one order of magnitude, plain otherwise.
+     */
+    static of(domain: [number, number], cfg: Pick<PlotStylesConfig, 'axis'>): (value: number) => string;
+    /** Whether ticks across `domain` read compact. */
+    static compact([min, max]: [number, number]): boolean;
+}

package/dist/layout/legend/AxisNumberFormat.js

@@ -0,0 +1,25 @@
+/** Numbers as the plots' axes write them, by `axis.locale` and `axis.compactDisplay`. */
+export class AxisNumberFormat {
+    /**
+     * A formatter for values across `domain`, as svelteplot's automatic axis
+     * ticks are: compact (`1,2 mil`, `1.2K`) when the domain crosses zero or
+     * spans more than one order of magnitude, plain otherwise.
+     */
+    static of(domain, cfg) {
+        const format = new Intl.NumberFormat(cfg.axis.locale, {
+            ...(AxisNumberFormat.compact(domain) ? { notation: 'compact' } : {}),
+            useGrouping: 'min2',
+            compactDisplay: cfg.axis.compactDisplay
+        });
+        return (value) => format.format(value);
+    }
+    /** Whether ticks across `domain` read compact. */
+    static compact([min, max]) {
+        if (!Number.isFinite(min) || !Number.isFinite(max))
+            return false;
+        if (min <= 0 && max >= 0)
+            return true;
+        const magnitude = (d) => Math.floor(Math.log10(Math.abs(d)));
+        return magnitude(min) !== magnitude(max);
+    }
+}