@fundar/data-chart-telling 0.0.14 → 0.0.16

package/dist/layout/legend/ContinuousSection.svelte

@@ -1,32 +1,54 @@
 <script lang="ts">
+  import { untrack } from 'svelte';
   import type { ContinuousLegendSection } from '../../types/charts/legend';
   import { makeColorScale } from '../../utils/color';
   import { getConfiguration } from '../../configuration/config.svelte';
+  import { getLegendInteraction, createLegendInteraction } from './interaction.svelte';
 
   let { section }: { section: ContinuousLegendSection } = $props();
 
   const cfg = $derived(getConfiguration());
   const gradientId = `dct-grad-${Math.random().toString(36).slice(2)}`;
   const barWidth = $derived(section.width ?? 170);
+
+  const fmt = $derived(section.format ?? ((v: number) => String(v)));
+
+  const tickPositions = $derived(
+    section.interactive
+      ? []
+      : (section.ticks ?? []).map((v) => ({
+          v,
+          t: (v - section.min) / (section.max - section.min || 1),
+          label: fmt(v),
+        })),
+  );
+
+  // ── Drag-to-narrow-margins ────────────────────────────────────────────────
+  const interaction = getLegendInteraction() ?? createLegendInteraction();
+
+  // Seeded once from the section's own bounds (deliberately untracked — this
+  // component doesn't follow later `section.min`/`max` prop changes).
+  let lo = $state(untrack(() => section.min));
+  let hi = $state(untrack(() => section.max));
+
+  function toT(v: number): number {
+    return (v - section.min) / (section.max - section.min || 1);
+  }
+  const loT = $derived(toT(lo));
+  const hiT = $derived(toT(hi));
+
+  const colorDomain = $derived.by((): [number, number] =>
+    section.interactive && (section.mode ?? 'filter') === 'rescale' ? [lo, hi] : [section.min, section.max],
+  );
   const colorScale = $derived(
     makeColorScale(
-      section.min,
-      section.max,
+      colorDomain[0],
+      colorDomain[1],
       section.colorMin ?? cfg.continuous.min,
       section.colorMax ?? cfg.continuous.max,
     ),
   );
 
-  const fmt = $derived(section.format ?? ((v: number) => String(v)));
-
-  const tickPositions = $derived(
-    (section.ticks ?? []).map((v) => ({
-      v,
-      t: (v - section.min) / (section.max - section.min || 1),
-      label: fmt(v),
-    })),
-  );
-
   const stops = $derived(
     Array.from({ length: 20 }, (_, i) => {
       const t = i / 19;
@@ -34,6 +56,56 @@
       return { offset: t * 100, color: colorScale(v) };
     }),
   );
+
+  $effect(() => {
+    if (!section.interactive) return;
+    interaction.continuousRange =
+      lo <= section.min && hi >= section.max
+        ? null
+        : {
+            min: lo,
+            max: hi,
+            mode: section.mode ?? 'filter',
+            disabledStyle: section.disabledStyle ?? { opacity: cfg.legend.disabledOpacity },
+          };
+  });
+
+  function startDrag(which: 'lo' | 'hi') {
+    return (event: PointerEvent) => {
+      if (!section.interactive) return;
+      event.preventDefault();
+      const target = event.currentTarget as SVGElement;
+      target.setPointerCapture(event.pointerId);
+      const startX = event.clientX;
+      const startValue = which === 'lo' ? lo : hi;
+      const valuePerPixel = (section.max - section.min) / barWidth;
+
+      function onMove(e: PointerEvent): void {
+        const next = startValue + (e.clientX - startX) * valuePerPixel;
+        if (which === 'lo') {
+          lo = Math.max(section.min, Math.min(next, hi));
+        } else {
+          hi = Math.min(section.max, Math.max(next, lo));
+        }
+      }
+      function onUp(e: PointerEvent): void {
+        target.releasePointerCapture(e.pointerId);
+        target.removeEventListener('pointermove', onMove);
+        target.removeEventListener('pointerup', onUp);
+        target.removeEventListener('pointercancel', onUp);
+      }
+      target.addEventListener('pointermove', onMove);
+      target.addEventListener('pointerup', onUp);
+      target.addEventListener('pointercancel', onUp);
+    };
+  }
+
+  function resetHandle(which: 'lo' | 'hi') {
+    return () => {
+      if (which === 'lo') lo = section.min;
+      else hi = section.max;
+    };
+  }
 </script>
 
 <div class="dct-continuous" style:width="{barWidth}px">
@@ -56,14 +128,56 @@
         stroke-width="1"
       />
     {/each}
+
+    {#if section.interactive}
+      {#if loT > 0}
+        <rect x="0" y="0" width={loT * barWidth} height="12" rx="2" fill="currentColor" fill-opacity="0.35" />
+      {/if}
+      {#if hiT < 1}
+        <rect x={hiT * barWidth} y="0" width={barWidth - hiT * barWidth} height="12" rx="2" fill="currentColor" fill-opacity="0.35" />
+      {/if}
+      <circle
+        class="dct-continuous__handle"
+        cx={loT * barWidth}
+        cy="6"
+        r="6"
+        onpointerdown={startDrag('lo')}
+        ondblclick={resetHandle('lo')}
+        role="slider"
+        aria-label="Margen inferior"
+        aria-valuemin={section.min}
+        aria-valuemax={hi}
+        aria-valuenow={lo}
+        tabindex="0"
+      />
+      <circle
+        class="dct-continuous__handle"
+        cx={hiT * barWidth}
+        cy="6"
+        r="6"
+        onpointerdown={startDrag('hi')}
+        ondblclick={resetHandle('hi')}
+        role="slider"
+        aria-label="Margen superior"
+        aria-valuemin={lo}
+        aria-valuemax={section.max}
+        aria-valuenow={hi}
+        tabindex="0"
+      />
+    {/if}
   </svg>
 
   <div class="dct-continuous__labels" style:width="{barWidth}px">
-    <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>
-    {/each}
-    <span class="dct-continuous__edge dct-continuous__edge--end">{fmt(section.max)}</span>
+    {#if section.interactive}
+      <span class="dct-continuous__tick dct-continuous__tick--handle-lo" style:left="{loT * barWidth}px">{fmt(lo)}</span>
+      <span class="dct-continuous__tick dct-continuous__tick--handle-hi" style:left="{hiT * barWidth}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>
+      {/each}
+      <span class="dct-continuous__edge dct-continuous__edge--end">{fmt(section.max)}</span>
+    {/if}
   </div>
 </div>
 
@@ -92,4 +206,31 @@
     position: absolute;
     transform: translateX(-50%);
   }
+  /*
+   * Anchored outward (not centered, unlike a plain tick) so the label always
+   * grows into the bar instead of over its own edge — a centered label at
+   * lo=min or hi=max would overflow past `.dct-chart`'s `overflow: hidden`
+   * and get clipped, exactly like the old fixed min/max edge labels never did.
+   */
+  .dct-continuous__tick--handle-lo,
+  .dct-continuous__tick--handle-hi {
+    font-weight: 600;
+  }
+  .dct-continuous__tick--handle-lo {
+    transform: none;
+  }
+  .dct-continuous__tick--handle-hi {
+    transform: translateX(-100%);
+  }
+  .dct-continuous__handle {
+    fill: currentColor;
+    stroke: var(--dct-bg, #fff);
+    stroke-width: 1.5;
+    cursor: ew-resize;
+    touch-action: none;
+  }
+  .dct-continuous__handle:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
 </style>

package/dist/layout/legend/DiscreteSection.svelte

@@ -1,13 +1,42 @@
 <script lang="ts">
+  import { SvelteSet } from 'svelte/reactivity';
   import { getConfiguration } from '../../configuration/config.svelte';
   import { paletteColor } from '../../utils/color';
-  import type { DiscreteLegendSection } from '../../types/charts/legend';
-  import type { LineStyle } from '../../types/plots/styles';
+  import { getLegendInteraction, createLegendInteraction } from './interaction.svelte';
+  import type { DiscreteLegendSection, LegendItem } from '../../types/charts/legend';
+  import type { LineStyle } from '../../types/plots/constants';
 
   let { section }: { section: DiscreteLegendSection } = $props();
 
   const cfg = $derived(getConfiguration());
   const columns = $derived(section.columns ?? 1);
+  const interaction = getLegendInteraction() ?? createLegendInteraction();
+
+  const seeded = new SvelteSet<string>();
+  $effect(() => {
+    for (const item of section.items) {
+      if (seeded.has(item.name)) continue;
+      seeded.add(item.name);
+      if (item.disabled) {
+        interaction.disabledSeries.set(item.name, section.disabledStyle ?? { opacity: cfg.legend.disabledOpacity });
+      }
+    }
+  });
+
+  function toggle(item: LegendItem): void {
+    if (!section.interactive) return;
+    if (interaction.disabledSeries.has(item.name)) {
+      interaction.disabledSeries.delete(item.name);
+    } else {
+      interaction.disabledSeries.set(item.name, section.disabledStyle ?? { opacity: cfg.legend.disabledOpacity });
+    }
+  }
+
+  function onKeydown(event: KeyboardEvent, item: LegendItem): void {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    toggle(item);
+  }
 
   function dashArray(style?: LineStyle): string | undefined {
     switch (style) {
@@ -25,8 +54,23 @@
 
 <div class="dct-discrete" style:grid-template-columns="repeat({columns}, max-content)">
   {#each section.items as item, i (item.name)}
-    {@const color = item.color ?? paletteColor(i, cfg.palette)}
-    <div class="dct-discrete__item" style:opacity={item.opacity ?? 1}>
+    {@const disabledStyle = interaction.disabledSeries.get(item.name)}
+    {@const color = disabledStyle?.fill ?? disabledStyle?.stroke?.stroke ?? item.color ?? paletteColor(i, cfg.palette)}
+    {@const itemOpacity = disabledStyle ? (disabledStyle.opacity ?? cfg.legend.disabledOpacity) : (item.opacity ?? 1)}
+    <div
+      class="dct-discrete__item"
+      class:dct-discrete__item--interactive={section.interactive}
+      style:opacity={itemOpacity}
+      {...section.interactive
+        ? {
+            role: 'button',
+            tabindex: 0,
+            'aria-pressed': disabledStyle != null,
+            onclick: () => toggle(item),
+            onkeydown: (e: KeyboardEvent) => onKeydown(e, item),
+          }
+        : {}}
+    >
       <svg class="dct-discrete__swatch" viewBox="0 0 15 10">
         {#if item.symbol === 'circle'}
           <circle cx="5" cy="5" r="4" fill={color} />
@@ -70,6 +114,14 @@
     align-items: center;
     gap: 0.35rem;
     min-width: 0;
+    transition: opacity 0.15s ease;
+  }
+  .dct-discrete__item--interactive {
+    cursor: pointer;
+  }
+  .dct-discrete__item--interactive:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
   }
   .dct-discrete__swatch {
     width: var(--dct-legend-swatch, 1.25rem);

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

@@ -0,0 +1,7 @@
+import type { LegendInteractionStore } from '../../types/layout/legend';
+/** Create + register the shared legend-interaction store. Call during component init. */
+export declare function provideLegendInteraction(): LegendInteractionStore;
+/** Read the shared legend-interaction store, or `null` when there is no provider. */
+export declare function getLegendInteraction(): LegendInteractionStore | null;
+/** A private legend-interaction store for a legend/plot used outside of a {@link BaseChart}. */
+export declare function createLegendInteraction(): LegendInteractionStore;

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

@@ -0,0 +1,24 @@
+import { getContext, setContext } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
+const LEGEND_INTERACTION_KEY = Symbol('dct-legend-interaction');
+function blank() {
+    return {
+        disabledSeries: new SvelteMap(),
+        continuousRange: null,
+    };
+}
+/** Create + register the shared legend-interaction store. Call during component init. */
+export function provideLegendInteraction() {
+    const store = $state(blank());
+    setContext(LEGEND_INTERACTION_KEY, store);
+    return store;
+}
+/** Read the shared legend-interaction store, or `null` when there is no provider. */
+export function getLegendInteraction() {
+    return getContext(LEGEND_INTERACTION_KEY) ?? null;
+}
+/** A private legend-interaction store for a legend/plot used outside of a {@link BaseChart}. */
+export function createLegendInteraction() {
+    const store = $state(blank());
+    return store;
+}

package/dist/layout/plot/AxisLayout.svelte

@@ -0,0 +1,95 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+  import { AxisX, AxisY } from 'svelteplot';
+  import { getConfiguration } from '../../configuration/config.svelte';
+  import type { AxisValue } from '../../types/plots/axis';
+  import type { AxisBasedScalesConfig } from '../../types/plots/props';
+
+  /**
+   * Axis ticks/titles for the plot kinds that have an x/y axis pair
+   * (line/bar/heatmap/pyramid) — reads the scale/tick config off `scales`,
+   * against the plot's own resolved margins. Not used by `GeoPlot`, whose
+   * position comes from a `d3-geo` projection instead (see `GeoLayout`).
+   * `AxisX`/`AxisY` themselves inherit their actual scale from svelteplot's
+   * `<Plot>` context — this only supplies their cosmetic/tick-count props.
+   */
+  let {
+    data,
+    getX,
+    getY,
+    width,
+    height,
+    numericMargins,
+    scales,
+  }: {
+    data: TData[];
+    getX: (d: TData) => AxisValue;
+    getY: (d: TData) => AxisValue;
+    width: number;
+    height: number;
+    numericMargins: { top: number; right: number; bottom: number; left: number };
+    scales?: AxisBasedScalesConfig<TData>;
+  } = $props();
+
+  const cfg = $derived(getConfiguration());
+
+  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: AxisBasedScalesConfig<TData>['x'], 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 - numericMargins.left - numericMargins.right), 80, 3),
+  );
+  const yTickCount = $derived(
+    autoTickCount(scales?.y, yValues, Math.max(0, height - numericMargins.top - numericMargins.bottom), 50, 2),
+  );
+
+  /** Vertical Y-axis title placement, when `scales.y.labelOrientation === 'vertical'`. */
+  const verticalYLabel = $derived.by(() => {
+    if (!scales?.y?.label || scales.y.labelOrientation !== 'vertical') return null;
+    const position = scales.y.labelPosition ?? 'middle';
+    const x = 14;
+    const top = numericMargins.top;
+    const bottom = height - numericMargins.bottom;
+    const y = position === 'top' ? top : (top + bottom) / 2;
+    return { text: scales.y.label, x, y, anchor: position === 'top' ? ('end' as const) : ('middle' as const) };
+  });
+</script>
+
+<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}
+/>
+{#if verticalYLabel}
+  <text
+    x={verticalYLabel.x}
+    y={verticalYLabel.y}
+    transform="rotate(-90, {verticalYLabel.x}, {verticalYLabel.y})"
+    text-anchor={verticalYLabel.anchor}
+    font-size={scales?.y?.titleFontSize ?? cfg.axis.titleFontSize}
+    fill={cfg.axis.color}
+    opacity="0.8"
+  >{verticalYLabel.text}</text>
+{/if}

package/dist/layout/plot/AxisLayout.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { AxisValue } from '../../types/plots/axis';
+import type { AxisBasedScalesConfig } from '../../types/plots/props';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: {
+        data: TData[];
+        getX: (d: TData) => AxisValue;
+        getY: (d: TData) => AxisValue;
+        width: number;
+        height: number;
+        numericMargins: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        scales?: AxisBasedScalesConfig<TData>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const AxisLayout: $$IsomorphicComponent;
+type AxisLayout<TData extends Record<string, unknown>> = InstanceType<typeof AxisLayout<TData>>;
+export default AxisLayout;