@fundar/data-chart-telling 0.0.13 → 0.0.15

package/dist/markers/inset/InsetMarker.svelte

@@ -0,0 +1,170 @@
+<script lang="ts" generics="TProps extends Record<string, unknown>">
+  import { geoPath } from 'd3-geo';
+  import { buildInsetProjection } from './insetProjection';
+  import { insetBox } from './insetLayout';
+  import { filterGeometryParts } from '../../plots/utils/geoAccessors';
+  import TooltipLayout from '../../layout/tooltip/TooltipLayout.svelte';
+  import type { GeoInsetMarker } from '../../types/markers/geo';
+  import type { GeoFeature } from '../../types/plots/data/geo';
+
+  /**
+   * A small, independently-projected map panel anchored to a corner/edge of
+   * the plot — see `GeoInsetMarker`'s doc comment. Renders raw `<path>`s via
+   * its own `d3-geo` `geoPath`, deliberately not svelteplot's `<Geo>` mark:
+   * that mark is bound to the plot's *shared* projection scale, but an inset
+   * needs its own, independently fit to just what it's showing.
+   */
+  let {
+    marker,
+    features,
+    width,
+    height,
+    left = 0,
+    top = 0,
+    defaultFill,
+  }: {
+    marker: GeoInsetMarker<TProps>;
+    /**
+     * The plot's own already-tagged features (`__id` set), with full,
+     * unreduced geometry regardless of the plot's own `excludeParts` — used
+     * when `marker.data` is omitted, so an inset can show a part the main
+     * map excludes without needing a separate dataset.
+     */
+    features: (GeoFeature<TProps> & { __id: string })[];
+    /**
+     * The plot's own *content* width/height — i.e. already net of margins,
+     * matching the frame the map itself is actually drawn into (svelteplot
+     * bakes margins into the projection's scale/translate rather than
+     * wrapping marks in a translating `<g>`, so this needs to match, not the
+     * plot's raw outer width/height) — `location`'s edge and `margin`'s gap
+     * are both measured against this box, not the full canvas.
+     */
+    width: number;
+    height: number;
+    /** Top-left corner of that content box, in the plot's own absolute coordinate space (i.e. its margins). */
+    left?: number;
+    top?: number;
+    defaultFill: string;
+  } = $props();
+
+  const insetFeatures = $derived.by((): GeoFeature<Record<string, unknown>>[] => {
+    if (marker.data) {
+      return (
+        Array.isArray(marker.data) ? marker.data : marker.data.features
+      ) as GeoFeature<Record<string, unknown>>[];
+    }
+    if (marker.features?.length) {
+      const wanted = new Set(marker.features);
+      const matched = features.filter((f) => wanted.has(f.__id));
+      if (!marker.featurePartsFilter) return matched;
+      const partsFilter = marker.featurePartsFilter;
+      return matched.flatMap((f) => {
+        const geometry = filterGeometryParts(f.geometry, (part) => partsFilter(part, f));
+        return geometry ? [{ ...f, geometry }] : [];
+      });
+    }
+    return [];
+  });
+
+  const box = $derived(
+    insetBox(marker.location, marker.width ?? 0.26, marker.height ?? 0.22, marker.margin ?? 8, width, height),
+  );
+
+  const path = $derived.by(() => {
+    if (insetFeatures.length === 0 || box.width <= 0 || box.height <= 0) return null;
+    const projection = buildInsetProjection(marker.projection);
+    const collection: GeoJSON.FeatureCollection = { type: 'FeatureCollection', features: insetFeatures };
+    projection.fitExtent(
+      [
+        [0, 0],
+        [box.width, box.height],
+      ],
+      collection,
+    );
+    return geoPath(projection);
+  });
+
+  /**
+   * Nearest-feature hover, local to this inset only — mirrors the main
+   * map's own "always nearest feature centroid" behaviour (see `Plot.svelte`),
+   * but computed against this inset's own fitted `path`/projection instead
+   * of the plot's shared one, since svelteplot's `<Pointer>` (which drives
+   * the main map's hover) only ever matches the main projection's own
+   * feature positions — it has no way to reach content an inset draws at a
+   * wholly different scale/location.
+   */
+  const centroids = $derived.by(() => {
+    if (!path) return [];
+    return insetFeatures.map((f) => ({ feature: f, centroid: path.centroid(f as GeoJSON.Feature) }));
+  });
+
+  let hovered = $state<{ feature: GeoFeature<Record<string, unknown>>; x: number; y: number } | null>(null);
+
+  // Any point within the inset box always matches its nearest feature —
+  // there's no reason for a hover inside a small, self-contained panel to
+  // ever come up empty, so the threshold is just the box's own diagonal.
+  const maxDistance = $derived(Math.hypot(box.width, box.height));
+
+  function onInsetPointerMove(e: PointerEvent) {
+    const rect = (e.currentTarget as SVGRectElement).getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    let nearest: (typeof centroids)[number] | null = null;
+    let nearestDist = Infinity;
+    for (const c of centroids) {
+      const d = Math.hypot(c.centroid[0] - x, c.centroid[1] - y);
+      if (d < nearestDist) {
+        nearestDist = d;
+        nearest = c;
+      }
+    }
+    hovered = nearest && nearestDist <= maxDistance ? { feature: nearest.feature, x, y } : null;
+  }
+
+  function onInsetPointerLeave() {
+    hovered = null;
+  }
+</script>
+
+{#if path}
+  <g class="dct-geo-inset" transform="translate({box.left + left}, {box.top + top})">
+    {#each insetFeatures as f, i (i)}
+      <path
+        d={path(f as GeoJSON.Feature) ?? undefined}
+        fill={marker.style?.fill ?? defaultFill}
+        fill-opacity={marker.style?.fillOpacity}
+        stroke={marker.style?.stroke ?? 'currentColor'}
+        stroke-width={marker.style?.strokeWidth ?? 0.5}
+        style="vector-effect: non-scaling-stroke"
+      />
+    {/each}
+    {#if marker.tooltip}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <rect
+        x={0}
+        y={0}
+        width={box.width}
+        height={box.height}
+        fill="transparent"
+        onpointermove={onInsetPointerMove}
+        onpointerleave={onInsetPointerLeave}
+      />
+    {/if}
+    {#if marker.tooltip}
+      {@const tooltip = marker.tooltip}
+      <foreignObject x={0} y={0} width={box.width} height={box.height} style="overflow: visible; pointer-events: none;">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="position: relative; width: 100%; height: 100%;">
+          <TooltipLayout
+            visible={hovered != null}
+            x={hovered?.x ?? 0}
+            y={hovered?.y ?? 0}
+            bounds={{ width: box.width, height: box.height }}
+            rows={hovered ? [hovered.feature] : []}
+            format={tooltip.format}
+            content={tooltip.content}
+          />
+        </div>
+      </foreignObject>
+    {/if}
+  </g>
+{/if}

package/dist/markers/inset/InsetMarker.svelte.d.ts

@@ -0,0 +1,51 @@
+import type { GeoInsetMarker } from '../../types/markers/geo';
+import type { GeoFeature } from '../../types/plots/data/geo';
+declare function $$render<TProps extends Record<string, unknown>>(): {
+    props: {
+        marker: GeoInsetMarker<TProps>;
+        /**
+         * The plot's own already-tagged features (`__id` set), with full,
+         * unreduced geometry regardless of the plot's own `excludeParts` — used
+         * when `marker.data` is omitted, so an inset can show a part the main
+         * map excludes without needing a separate dataset.
+         */
+        features: (GeoFeature<TProps> & {
+            __id: string;
+        })[];
+        /**
+         * The plot's own *content* width/height — i.e. already net of margins,
+         * matching the frame the map itself is actually drawn into (svelteplot
+         * bakes margins into the projection's scale/translate rather than
+         * wrapping marks in a translating `<g>`, so this needs to match, not the
+         * plot's raw outer width/height) — `location`'s edge and `margin`'s gap
+         * are both measured against this box, not the full canvas.
+         */
+        width: number;
+        height: number;
+        /** Top-left corner of that content box, in the plot's own absolute coordinate space (i.e. its margins). */
+        left?: number;
+        top?: number;
+        defaultFill: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TProps extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TProps>>['props'];
+    events(): ReturnType<typeof $$render<TProps>>['events'];
+    slots(): ReturnType<typeof $$render<TProps>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TProps extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TProps>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TProps>['props']>, ReturnType<__sveltets_Render<TProps>['events']>, ReturnType<__sveltets_Render<TProps>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TProps>['bindings']>;
+    } & ReturnType<__sveltets_Render<TProps>['exports']>;
+    <TProps extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TProps>['props']> & {}): ReturnType<__sveltets_Render<TProps>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const InsetMarker: $$IsomorphicComponent;
+type InsetMarker<TProps extends Record<string, unknown>> = InstanceType<typeof InsetMarker<TProps>>;
+export default InsetMarker;

package/dist/markers/inset/insetLayout.d.ts

@@ -0,0 +1,25 @@
+import type { GeoInsetLocation } from '../../types/markers/geo';
+type Horizontal = 'left' | 'middle' | 'right';
+type Vertical = 'top' | 'middle' | 'bottom';
+/**
+ * Parses a `side-anchor` position string (either word order accepted — see
+ * `GeoInsetLocation`) into independent horizontal/vertical placement
+ * keywords.
+ */
+export declare function parseInsetLocation(location: GeoInsetLocation): {
+    h: Horizontal;
+    v: Vertical;
+};
+export type InsetBox = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/**
+ * Computes an inset's pixel rectangle within a `frameWidth`×`frameHeight`
+ * area, anchored per `location` and `margin` pixels from whichever edge(s)
+ * it's anchored to.
+ */
+export declare function insetBox(location: GeoInsetLocation, widthFraction: number, heightFraction: number, margin: number, frameWidth: number, frameHeight: number): InsetBox;
+export {};

package/dist/markers/inset/insetLayout.js

@@ -0,0 +1,39 @@
+/**
+ * Parses a `side-anchor` position string (either word order accepted — see
+ * `GeoInsetLocation`) into independent horizontal/vertical placement
+ * keywords.
+ */
+export function parseInsetLocation(location) {
+    const parts = location.split('-');
+    let h;
+    let v;
+    for (const part of parts) {
+        if (part === 'left' || part === 'right')
+            h = part;
+        else if (part === 'top' || part === 'bottom')
+            v = part;
+    }
+    // Any leftover 'middle' fills whichever axis wasn't claimed above.
+    for (const part of parts) {
+        if (part !== 'middle')
+            continue;
+        if (v === undefined)
+            v = 'middle';
+        else if (h === undefined)
+            h = 'middle';
+    }
+    return { h: h ?? 'middle', v: v ?? 'middle' };
+}
+/**
+ * Computes an inset's pixel rectangle within a `frameWidth`×`frameHeight`
+ * area, anchored per `location` and `margin` pixels from whichever edge(s)
+ * it's anchored to.
+ */
+export function insetBox(location, widthFraction, heightFraction, margin, frameWidth, frameHeight) {
+    const { h, v } = parseInsetLocation(location);
+    const width = frameWidth * widthFraction;
+    const height = frameHeight * heightFraction;
+    const left = h === 'left' ? margin : h === 'right' ? frameWidth - margin - width : (frameWidth - width) / 2;
+    const top = v === 'top' ? margin : v === 'bottom' ? frameHeight - margin - height : (frameHeight - height) / 2;
+    return { left, top, width, height };
+}

package/dist/markers/inset/insetProjection.d.ts

@@ -0,0 +1,8 @@
+import { type GeoProjection } from 'd3-geo';
+import type { GeoInsetProjectionConfig } from '../../types/markers/geo';
+/**
+ * Builds a fresh, configured (but not yet fit) d3-geo projection instance
+ * for an `inset` marker — the caller still needs to `.fitExtent()` it to
+ * whatever the inset ends up showing.
+ */
+export declare function buildInsetProjection(config?: GeoInsetProjectionConfig): GeoProjection;

package/dist/markers/inset/insetProjection.js

@@ -0,0 +1,39 @@
+import { geoAlbersUsa, geoAlbers, geoAzimuthalEqualArea, geoAzimuthalEquidistant, geoConicConformal, geoConicEqualArea, geoConicEquidistant, geoEqualEarth, geoEquirectangular, geoGnomonic, geoMercator, geoOrthographic, geoStereographic, geoTransverseMercator, } from 'd3-geo';
+const NAMED_PROJECTIONS = {
+    'albers-usa': geoAlbersUsa,
+    albers: geoAlbers,
+    'azimuthal-equal-area': geoAzimuthalEqualArea,
+    'azimuthal-equidistant': geoAzimuthalEquidistant,
+    'conic-conformal': geoConicConformal,
+    'conic-equal-area': geoConicEqualArea,
+    'conic-equidistant': geoConicEquidistant,
+    'equal-earth': geoEqualEarth,
+    equirectangular: geoEquirectangular,
+    gnomonic: geoGnomonic,
+    mercator: geoMercator,
+    orthographic: geoOrthographic,
+    stereographic: geoStereographic,
+    'transverse-mercator': geoTransverseMercator,
+};
+/**
+ * Builds a fresh, configured (but not yet fit) d3-geo projection instance
+ * for an `inset` marker — the caller still needs to `.fitExtent()` it to
+ * whatever the inset ends up showing.
+ */
+export function buildInsetProjection(config = 'mercator') {
+    const isConfigObject = typeof config === 'object' && config !== null;
+    const name = (isConfigObject ? config.type : config) ?? 'mercator';
+    const projection = NAMED_PROJECTIONS[name]();
+    if (isConfigObject) {
+        if (config.rotate)
+            projection.rotate(config.rotate);
+        if (config.center)
+            projection.center(config.center);
+        if (config.parallels && 'parallels' in projection) {
+            projection.parallels(config.parallels);
+        }
+        if (typeof config.clip === 'number')
+            projection.clipAngle(config.clip);
+    }
+    return projection;
+}

package/dist/plots/bar/BarSegments.svelte

@@ -0,0 +1,66 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+  import { BarX, BarY } from 'svelteplot';
+  import { resolveAccessor } from '../utils/accessors';
+  import type { Series } from '../../types/plots/data/common';
+  import type { BarSegmentStyle } from '../../types/plots/segments/common';
+  import type { VisualGroup } from '../../types/plots/segments/config';
+  import type { BarLayout } from './layout.svelte';
+
+  /**
+   * Renders one series' bars — the `'stacked'` branch (cumulative baseline
+   * from {@link BarLayout.stackedBaseline}) or the `'grouped'`/`'overlap'`
+   * branch (per-segment insets from {@link BarLayout.seriesStep}/`seriesGap`).
+   */
+  let {
+    group,
+    seriesIndex,
+    barLayout,
+    isHorizontal,
+    BarMark,
+    defaultColor,
+  }: {
+    group: VisualGroup<Series<TData>, BarSegmentStyle>;
+    seriesIndex: number;
+    barLayout: BarLayout<TData>;
+    isHorizontal: boolean;
+    BarMark: typeof BarX | typeof BarY;
+    defaultColor: string;
+  } = $props();
+
+  const xFn = $derived(resolveAccessor(group.series.x));
+  const yFn = $derived(resolveAccessor(group.series.y));
+</script>
+
+{#if barLayout.layout === 'stacked'}
+  {@const stackedBaselineFn = (d: TData) => barLayout.stackedBaseline(xFn(d), seriesIndex)}
+  {@const stackedTopFn = (d: TData) => barLayout.stackedBaseline(xFn(d), seriesIndex) + Number(yFn(d))}
+  <BarMark
+    data={group.series.data}
+    {...isHorizontal
+      ? { y: xFn, x1: stackedBaselineFn, x2: stackedTopFn }
+      : { x: xFn, y1: stackedBaselineFn, y2: stackedTopFn }}
+    fill={defaultColor}
+  />
+{:else}
+  {#each group.visualSegments as seg, i (`${group.series.name}-${i}`)}
+    <BarMark
+      data={seg.data}
+      {...isHorizontal
+        ? { y: xFn, x1: barLayout.valueBaseline, x2: yFn }
+        : { x: xFn, y1: barLayout.valueBaseline, y2: yFn }}
+      fill={seg.style.fill ?? defaultColor}
+      fillOpacity={seg.style.fillOpacity ?? 1}
+      {...barLayout.layout === 'grouped'
+        ? isHorizontal
+          ? {
+              insetTop: seriesIndex * barLayout.seriesStep + barLayout.seriesGap / 2,
+              insetBottom: (barLayout.seriesCount - 1 - seriesIndex) * barLayout.seriesStep + barLayout.seriesGap / 2,
+            }
+          : {
+              insetLeft: seriesIndex * barLayout.seriesStep + barLayout.seriesGap / 2,
+              insetRight: (barLayout.seriesCount - 1 - seriesIndex) * barLayout.seriesStep + barLayout.seriesGap / 2,
+            }
+        : {}}
+    />
+  {/each}
+{/if}

package/dist/plots/bar/BarSegments.svelte.d.ts

@@ -0,0 +1,36 @@
+import { BarX, BarY } from 'svelteplot';
+import type { Series } from '../../types/plots/data/common';
+import type { BarSegmentStyle } from '../../types/plots/segments/common';
+import type { VisualGroup } from '../../types/plots/segments/config';
+import type { BarLayout } from './layout.svelte';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: {
+        group: VisualGroup<Series<TData>, BarSegmentStyle>;
+        seriesIndex: number;
+        barLayout: BarLayout<TData>;
+        isHorizontal: boolean;
+        BarMark: typeof BarX | typeof BarY;
+        defaultColor: string;
+    };
+    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 BarSegments: $$IsomorphicComponent;
+type BarSegments<TData extends Record<string, unknown>> = InstanceType<typeof BarSegments<TData>>;
+export default BarSegments;