@fundar/data-chart-telling 0.0.64 → 1.0.0

package/dist/charts/container/ChartContainer.svelte

@@ -1,137 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import type { ChartBoxSnippet } from '../../types/charts/common';
-  import { getConfiguration, configToCssVars, cssVarsStyle } from '../../configuration/config.svelte';
-
-  /**
-   * The outermost chart frame. It owns the fixed footprint (`width`/`height`),
-   * lays out the header, optional legend and caption, and measures whatever
-   * space is left for the plot. The actual drawing is delegated to the `plot`
-   * snippet, which receives that measured box — so this component knows nothing
-   * about what kind of plot it wraps.
-   */
-  let {
-    width,
-    height,
-    title,
-    subtitle,
-    caption,
-    legend,
-    header,
-    footer,
-    plot,
-  }: {
-    width: number;
-    height: number;
-    title?: string;
-    subtitle?: string;
-    caption?: string;
-    legend?: Snippet;
-    header?: Snippet;
-    footer?: Snippet;
-    plot: ChartBoxSnippet;
-  } = $props();
-
-  let bodyWidth = $state(0);
-  let bodyHeight = $state(0);
-
-  // Stamp every `--dct-*` custom property on the root so the scoped styles below
-  // (and any nested plot/legend/timeline) resolve them from the live config.
-  const themeStyle = $derived(cssVarsStyle(configToCssVars(getConfiguration())));
-</script>
-
-<div class="dct-chart" style={themeStyle} style:width="{width}px" style:height="{height}px">
-  {#if header}
-    <div class="dct-chart__header">{@render header()}</div>
-  {:else if title || subtitle}
-    <div class="dct-chart__header">
-      {#if title}<h3 class="dct-chart__title">{title}</h3>{/if}
-      {#if subtitle}<span class="dct-chart__subtitle">{subtitle}</span>{/if}
-    </div>
-  {/if}
-
-  {#if legend}
-    <div class="dct-chart__legend">{@render legend()}</div>
-  {/if}
-
-  <div
-    class="dct-chart__body"
-    bind:clientWidth={bodyWidth}
-    bind:clientHeight={bodyHeight}
-  >
-    {#if bodyWidth > 0 && bodyHeight > 0}
-      {@render plot({ width: bodyWidth, height: bodyHeight })}
-    {/if}
-  </div>
-
-  {#if footer}
-    <div class="dct-chart__caption">{@render footer()}</div>
-  {:else if caption}
-    <div class="dct-chart__caption">
-      <span>{caption}</span>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .dct-chart {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    max-width: 100%;
-    max-height: 100%;
-    padding: var(--dct-bleed, 12px);
-    overflow: hidden;
-    color: var(--dct-fg, currentColor);
-    background: var(--dct-bg, transparent);
-    font-family: var(--dct-font, inherit);
-  }
-
-  .dct-chart__header {
-    flex: 0 0 auto;
-    padding: var(--dct-header-pad, 0.75rem 0 1rem);
-    border-bottom: 1px solid var(--dct-border, color-mix(in srgb, currentColor 15%, transparent));
-  }
-
-  .dct-chart__title {
-    margin: 0 0 0.4rem;
-    font-family: var(--dct-title-font, inherit);
-    font-size: var(--dct-title-size, 1.5rem);
-    font-weight: var(--dct-title-weight, 500);
-    line-height: var(--dct-title-leading, 1.2);
-    letter-spacing: var(--dct-title-spacing, normal);
-    color: var(--dct-title-color, inherit);
-  }
-
-  .dct-chart__subtitle {
-    font-family: var(--dct-subtitle-font, inherit);
-    font-size: var(--dct-subtitle-size, 1rem);
-    font-weight: var(--dct-subtitle-weight, 400);
-    line-height: var(--dct-subtitle-leading, 1.3);
-    letter-spacing: var(--dct-subtitle-spacing, normal);
-    color: var(--dct-subtitle-color, inherit);
-  }
-
-  .dct-chart__legend {
-    flex: 0 0 auto;
-    padding: var(--dct-legend-pad, 0.75rem 0);
-  }
-
-  .dct-chart__body {
-    flex: 1 1 auto;
-    min-height: 0;
-    min-width: 0;
-  }
-
-  .dct-chart__caption {
-    flex: 0 0 auto;
-    padding: var(--dct-caption-pad, 0.5rem 0);
-    font-family: var(--dct-caption-font, inherit);
-    font-size: var(--dct-caption-size, 0.75rem);
-    font-weight: var(--dct-caption-weight, 400);
-    line-height: var(--dct-caption-leading, 1.3);
-    letter-spacing: var(--dct-caption-spacing, normal);
-    color: var(--dct-caption-color, inherit);
-    white-space: pre-line;
-  }
-</style>

package/dist/charts/container/ChartContainer.svelte.d.ts

@@ -1,16 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { ChartBoxSnippet } from '../../types/charts/common';
-type $$ComponentProps = {
-    width: number;
-    height: number;
-    title?: string;
-    subtitle?: string;
-    caption?: string;
-    legend?: Snippet;
-    header?: Snippet;
-    footer?: Snippet;
-    plot: ChartBoxSnippet;
-};
-declare const ChartContainer: import("svelte").Component<$$ComponentProps, {}, "">;
-type ChartContainer = ReturnType<typeof ChartContainer>;
-export default ChartContainer;

package/dist/charts/heatmap/Chart.svelte

@@ -1,114 +0,0 @@
-<script lang="ts" generics="TRow extends Record<string, unknown>">
-  import BaseChart from '../BaseChart.svelte';
-  import HeatmapPlot from '../../plots/heatmap/Plot.svelte';
-  import {
-    resolveTooltip,
-    resolveHoverStrategy,
-    resolveHoverSync,
-    hasHoverMarker
-  } from '../../layout/tooltip/utils';
-  import { resolveAccessor } from '../../plots/utils/accessors';
-  import type { Accessor } from '../../types/plots/data/common';
-  import type { AxisBasedScalesConfig } from '../../types/layout/scales';
-  import type { CellSegmentStyle } from '../../types/plots/segments/common';
-  import type { ChartProps } from '../../types/charts/props';
-
-  /**
-   * High-level heatmap. Proves the chart chrome (container/legend/timeline/facet)
-   * is plot-agnostic: it reuses {@link BaseChart} exactly like {@link LineChart}, only
-   * swapping the leaf for {@link HeatmapPlot}. The colour domain is computed once
-   * over the full dataset so cells stay comparable across timeline steps/facets —
-   * it is passed via `scales.z.domain` and can be overridden by the caller.
-   */
-  let {
-    width,
-    height,
-    title,
-    subtitle,
-    caption,
-    legend,
-    header,
-    footer,
-    data,
-    x,
-    y,
-    z,
-    styles = {},
-    segments = {},
-    scales = {},
-    margins,
-    markers = [],
-    facet,
-    timeline,
-    tooltip,
-  }: ChartProps<TRow, CellSegmentStyle> & { z: Accessor<TRow, number> } = $props();
-
-  const getX = $derived(resolveAccessor<TRow>(x));
-  const getY = $derived(resolveAccessor<TRow>(y));
-  const getZ = $derived(resolveAccessor<TRow>(z));
-  const formatValue = $derived(styles.values?.format ?? ((v: number) => `${v}`));
-
-  // Compute domain over the full dataset so colour is comparable across facets/timeline steps.
-  // Caller-provided `scales.z.domain` always takes precedence.
-  const fullDomain = $derived.by((): [number, number] => {
-    const vals = data.map((d) => Number(getZ(d)));
-    return vals.length ? [Math.min(...vals, 0), Math.max(...vals)] : [0, 1];
-  });
-  const mergedScales = $derived<AxisBasedScalesConfig<TRow>>({
-    ...scales,
-    z: { domain: fullDomain, ...(scales.z ?? {}) },
-  });
-
-  const tip = $derived(resolveTooltip(tooltip, 'punctual'));
-  const hoverEnabled = $derived(tip.enabled || hasHoverMarker(markers));
-  const resolvedStrategy = $derived(resolveHoverStrategy(tip.enabled ? tip.strategy : undefined, markers, 'punctual'));
-  const resolvedSync = $derived(resolveHoverSync(tip.enabled ? tip.sync : undefined, markers));
-  const defaultFormat = $derived((row: TRow) => {
-    const xl = scales.x?.label || 'x';
-    const yl = scales.y?.label || 'y';
-    return `${xl} ${getX(row)} · ${yl} ${getY(row)}\n${formatValue(Number(getZ(row)), '')}`;
-  });
-</script>
-
-<BaseChart
-  {width}
-  {height}
-  {title}
-  {subtitle}
-  {caption}
-  {legend}
-  {header}
-  {footer}
-  {data}
-  {facet}
-  {timeline}
-  hover={hoverEnabled ? { strategy: resolvedStrategy, sync: resolvedSync } : undefined}
->
-  {#snippet plot({ data: rows, width: w, height: h, facetValue })}
-    <HeatmapPlot
-      width={w}
-      height={h}
-      data={rows}
-      {x}
-      {y}
-      {z}
-      {styles}
-      {segments}
-      scales={mergedScales}
-      {margins}
-      {markers}
-      tooltip={tip.enabled
-        ? {
-            format: tip.format ?? defaultFormat,
-            facetId: facetValue ?? '',
-            strategy: tip.strategy,
-            sync: tip.sync,
-            series: tip.series,
-            content: tip.content,
-            anchorX: tip.anchorX,
-            anchorY: tip.anchorY,
-          }
-        : undefined}
-    />
-  {/snippet}
-</BaseChart>

package/dist/charts/line/Chart.svelte

@@ -1,112 +0,0 @@
-<script lang="ts" generics="TRow extends Record<string, unknown>">
-  import BaseChart from '../BaseChart.svelte';
-  import LinePlot from '../../plots/line/Plot.svelte';
-  import {
-    resolveTooltip,
-    resolveHoverStrategy,
-    resolveHoverSync,
-    hasHoverMarker
-  } from '../../layout/tooltip/utils';
-  import { resolveAccessor } from '../../plots/utils/accessors';
-  import { resolveTimelineInterpolation } from '../../utils/interpolate';
-  import type { LineSegmentStyle } from '../../types/plots/segments/common';
-  import type { GapsAwareChartProps } from '../../types/charts/props';
-
-  /**
-   * High-level line chart. It takes flat rows plus `x`/`y`/`z` encodings, groups
-   * by `z` into one line per group, and hands the result to {@link LinePlot}.
-   * Everything chrome-related (title, legend, timeline, facets) is delegated to
-   * {@link BaseChart}; this component only owns the flat-data → line-series adaption.
-   */
-  let {
-    width,
-    height,
-    title,
-    subtitle,
-    caption,
-    legend,
-    header,
-    footer,
-    data,
-    x,
-    y,
-    z,
-    styles = {},
-    segments,
-    markers = [],
-    scales = {},
-    margins,
-    facet,
-    timeline,
-    tooltip,
-  }: GapsAwareChartProps<TRow, LineSegmentStyle> = $props();
-
-  // A line should grow into its full extent over time, not snap to a single
-  // year's point — so default to a cumulative reveal unless the caller wants
-  // the bar/heatmap-style exact-step snapshot instead.
-  const timelineConfig = $derived(
-    timeline
-      ? {
-          ...timeline,
-          filterMode: timeline.filterMode ?? 'upTo',
-          interpolate: resolveTimelineInterpolation(timeline.interpolate, { value: y, key: z }),
-        }
-      : undefined,
-  );
-
-  const tip = $derived(resolveTooltip(tooltip, 'x'));
-  const hoverEnabled = $derived(tip.enabled || hasHoverMarker(markers));
-  const resolvedStrategy = $derived(resolveHoverStrategy(tip.enabled ? tip.strategy : undefined, markers, 'x'));
-  const resolvedSync = $derived(resolveHoverSync(tip.enabled ? tip.sync : undefined, markers));
-  const getX = $derived(resolveAccessor<TRow>(x));
-  const getY = $derived(resolveAccessor<TRow>(y));
-  const getZ = $derived(z ? resolveAccessor<TRow>(z) : null);
-  const fmtX = (v: unknown) => (v instanceof Date ? v.toLocaleDateString() : String(v));
-  const defaultFormat = $derived((row: TRow) => {
-    const group = getZ ? `${getZ(row)}\n` : '';
-    return `${group}${fmtX(getX(row))}: ${getY(row)}`;
-  });
-</script>
-
-<BaseChart
-  {width}
-  {height}
-  {title}
-  {subtitle}
-  {caption}
-  {legend}
-  {header}
-  {footer}
-  {data}
-  {facet}
-  timeline={timelineConfig}
-  hover={hoverEnabled ? { strategy: resolvedStrategy, sync: resolvedSync } : undefined}
->
-  {#snippet plot({ data: rows, width: w, height: h, facetValue })}
-    <LinePlot
-      width={w}
-      height={h}
-      data={rows}
-      {x}
-      {y}
-      {z}
-      {styles}
-      {segments}
-      {markers}
-      {scales}
-      {margins}
-      tooltip={tip.enabled
-        ? {
-            format: tip.format ?? defaultFormat,
-            facetId: facetValue ?? '',
-            strategy: tip.strategy,
-            sync: tip.sync,
-            series: tip.series,
-            content: tip.content,
-            anchorX: tip.anchorX,
-            anchorY: tip.anchorY,
-          }
-        : undefined}
-    />
-  {/snippet}
-</BaseChart>

package/dist/charts/line/Chart.svelte.d.ts

@@ -1,26 +0,0 @@
-import type { LineSegmentStyle } from '../../types/plots/segments/common';
-import type { GapsAwareChartProps } from '../../types/charts/props';
-declare function $$render<TRow extends Record<string, unknown>>(): {
-    props: GapsAwareChartProps<TRow, LineSegmentStyle>;
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<TRow extends Record<string, unknown>> {
-    props(): ReturnType<typeof $$render<TRow>>['props'];
-    events(): ReturnType<typeof $$render<TRow>>['events'];
-    slots(): ReturnType<typeof $$render<TRow>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TRow extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TRow>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TRow>['props']>, ReturnType<__sveltets_Render<TRow>['events']>, ReturnType<__sveltets_Render<TRow>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TRow>['bindings']>;
-    } & ReturnType<__sveltets_Render<TRow>['exports']>;
-    <TRow extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TRow>['props']> & {}): ReturnType<__sveltets_Render<TRow>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Chart: $$IsomorphicComponent;
-type Chart<TRow extends Record<string, unknown>> = InstanceType<typeof Chart<TRow>>;
-export default Chart;

package/dist/charts/pyramid/Chart.svelte

@@ -1,134 +0,0 @@
-<script lang="ts" generics="TRow extends Record<string, unknown>">
-  import BaseChart from '../BaseChart.svelte';
-  import PyramidPlot from '../../plots/pyramid/Plot.svelte';
-  import {
-    resolveTooltip,
-    resolveHoverStrategy,
-    resolveHoverSync,
-    hasHoverMarker
-  } from '../../layout/tooltip/utils';
-  import { resolveAccessor } from '../../plots/utils/accessors';
-  import { resolveTimelineInterpolation } from '../../utils/interpolate';
-  import type { AxisValue } from '../../types/layout/scales';
-  import type { Accessor } from '../../types/plots/data/common';
-  import type { BarSegmentStyle } from '../../types/plots/segments/common';
-  import type { GapsAwareChartProps } from '../../types/charts/props';
-
-  /**
-   * High-level population-pyramid-style chart. Forwards flat rows and the
-   * `x`/`y`/`z` accessors straight to {@link PyramidPlot}, which groups them
-   * into series and assigns left/right sides automatically from the
-   * alphabetical order of `z` values. Pass `scales.z.reverse: true` to flip
-   * which side goes first. Delegates all chrome (title, legend, timeline,
-   * facets) to {@link BaseChart}.
-   */
-  let {
-    width,
-    height,
-    title,
-    subtitle,
-    caption,
-    legend,
-    header,
-    footer,
-    data,
-    x: magnitude,
-    y: category,
-    z: sides,
-    styles = {},
-    scales = {},
-    margins,
-    segments,
-    markers = [],
-    facet,
-    timeline,
-    tooltip,
-  }: GapsAwareChartProps<TRow, BarSegmentStyle> & { x: Accessor<TRow, number>; z: Accessor<TRow, unknown> } = $props();
-
-  const getMagnitude = $derived(resolveAccessor<TRow>(magnitude));
-  const getCategory = $derived(resolveAccessor<TRow>(category));
-  const getSides = $derived(resolveAccessor<TRow>(sides));
-  const formatValue = $derived(styles.values?.format ?? ((v: number) => `${v}`));
-
-  // Computed once over the full dataset (not the per-facet/timeline-filtered
-  // rows) so the diverging axis and category bands stay comparable across
-  // timeline steps/facets — the same reasoning HeatmapChart applies to its
-  // colour domain.
-  const categoryDomain = $derived([...new Set(data.map((d) => getCategory(d) as AxisValue))]);
-  const maxMagnitude = $derived.by(() => {
-    const vals = data.map((d) => Math.abs(Number(getMagnitude(d))));
-    return vals.length ? Math.max(...vals) : 1;
-  });
-  // Spread all caller scales first so scales.z (used by PyramidPlot for side
-  // assignment) is preserved, then override x/y with the computed domains.
-  const resolvedScales = $derived({
-    ...scales,
-    x: { domain: [-maxMagnitude, maxMagnitude], ...(scales.x ?? {}) },
-    y: { domain: categoryDomain, ...(scales.y ?? {}) },
-  });
-  // A pyramid timeline snapshots one frame per step; interpolation needs to
-  // match each bar across steps by its category and z-group, not by the
-  // timeline's own time field.
-  const timelineConfig = $derived(
-    timeline
-      ? {
-          ...timeline,
-          interpolate: resolveTimelineInterpolation(timeline.interpolate, {
-            value: magnitude,
-            key: (d: TRow) => `${String(getCategory(d))}::${String(getSides(d))}`,
-          }),
-        }
-      : undefined,
-  );
-
-  const tip = $derived(resolveTooltip(tooltip, 'y'));
-  const hoverEnabled = $derived(tip.enabled || hasHoverMarker(markers));
-  const resolvedStrategy = $derived(resolveHoverStrategy(tip.enabled ? tip.strategy : undefined, markers, 'y'));
-  const resolvedSync = $derived(resolveHoverSync(tip.enabled ? tip.sync : undefined, markers));
-  const defaultFormat = $derived(
-    (row: TRow) => `${String(getSides(row))}\n${String(getCategory(row))}: ${formatValue(Number(getMagnitude(row)), String(getSides(row)))}`,
-  );
-</script>
-
-<BaseChart
-  {width}
-  {height}
-  {title}
-  {subtitle}
-  {caption}
-  {legend}
-  {header}
-  {footer}
-  {data}
-  {facet}
-  timeline={timelineConfig}
-  hover={hoverEnabled ? { strategy: resolvedStrategy, sync: resolvedSync } : undefined}
->
-  {#snippet plot({ data: rows, width: w, height: h, facetValue })}
-    <PyramidPlot
-      width={w}
-      height={h}
-      data={rows}
-      x={magnitude}
-      y={category}
-      z={sides}
-      {styles}
-      scales={resolvedScales}
-      {margins}
-      {segments}
-      {markers}
-      tooltip={tip.enabled
-        ? {
-            format: tip.format ?? defaultFormat,
-            facetId: facetValue ?? '',
-            strategy: tip.strategy,
-            sync: tip.sync,
-            series: tip.series,
-            content: tip.content,
-            anchorX: tip.anchorX,
-            anchorY: tip.anchorY,
-          }
-        : undefined}
-    />
-  {/snippet}
-</BaseChart>

package/dist/charts/pyramid/Chart.svelte.d.ts

@@ -1,30 +0,0 @@
-import type { Accessor } from '../../types/plots/data/common';
-declare function $$render<TRow extends Record<string, unknown>>(): {
-    props: Omit<import("../../types/charts/props").ChartProps<TRow, import("../..").AreaStyle>, "styles"> & {
-        styles?: import("../..").GapsAwarePlotStylesConfig<import("../..").AreaStyle> | undefined;
-    } & {
-        x: Accessor<TRow, number>;
-        z: Accessor<TRow, unknown>;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<TRow extends Record<string, unknown>> {
-    props(): ReturnType<typeof $$render<TRow>>['props'];
-    events(): ReturnType<typeof $$render<TRow>>['events'];
-    slots(): ReturnType<typeof $$render<TRow>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TRow extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TRow>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TRow>['props']>, ReturnType<__sveltets_Render<TRow>['events']>, ReturnType<__sveltets_Render<TRow>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TRow>['bindings']>;
-    } & ReturnType<__sveltets_Render<TRow>['exports']>;
-    <TRow extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TRow>['props']> & {}): ReturnType<__sveltets_Render<TRow>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Chart: $$IsomorphicComponent;
-type Chart<TRow extends Record<string, unknown>> = InstanceType<typeof Chart<TRow>>;
-export default Chart;

package/dist/charts/scatter/Chart.svelte

@@ -1,95 +0,0 @@
-<script lang="ts" generics="TRow extends Record<string, unknown>">
-  import BaseChart from '../BaseChart.svelte';
-  import ScatterPlot from '../../plots/scatter/Plot.svelte';
-  import {
-    resolveTooltip,
-    resolveHoverStrategy,
-    resolveHoverSync,
-    hasHoverMarker
-  } from '../../layout/tooltip/utils';
-  import { resolveAccessor } from '../../plots/utils/accessors';
-  import type { Accessor } from '../../types/plots/data/common';
-  import type { ScatterSegmentStyle } from '../../types/plots/segments/common';
-  import type { ChartProps } from '../../types/charts/props';
-
-  /**
-   * High-level scatter chart. Groups flat rows by `z` into one point cloud
-   * per group and delegates all chrome to {@link BaseChart}. `r` gives every
-   * point a per-row radius (bubble sizing), independent of `z` grouping.
-   */
-  let {
-    width,
-    height,
-    title,
-    subtitle,
-    caption,
-    legend,
-    header,
-    footer,
-    data,
-    x,
-    y,
-    z,
-    r,
-    styles = {},
-    segments,
-    markers = [],
-    scales = {},
-    margins,
-    facet,
-    timeline,
-    tooltip,
-  }: ChartProps<TRow, ScatterSegmentStyle> & { r?: Accessor<TRow, number> | number } = $props();
-
-  const tip = $derived(resolveTooltip(tooltip, 'punctual'));
-  const hoverEnabled = $derived(tip.enabled || hasHoverMarker(markers));
-  const resolvedStrategy = $derived(resolveHoverStrategy(tip.enabled ? tip.strategy : undefined, markers, 'punctual'));
-  const resolvedSync = $derived(resolveHoverSync(tip.enabled ? tip.sync : undefined, markers));
-  const getX = $derived(resolveAccessor<TRow>(x));
-  const getY = $derived(resolveAccessor<TRow>(y));
-  const defaultFormat = $derived((row: TRow) => `${String(getX(row))}, ${String(getY(row))}`);
-</script>
-
-<BaseChart
-  {width}
-  {height}
-  {title}
-  {subtitle}
-  {caption}
-  {legend}
-  {header}
-  {footer}
-  {data}
-  {facet}
-  {timeline}
-  hover={hoverEnabled ? { strategy: resolvedStrategy, sync: resolvedSync } : undefined}
->
-  {#snippet plot({ data: rows, width: w, height: h, facetValue })}
-    <ScatterPlot
-      width={w}
-      height={h}
-      data={rows}
-      {x}
-      {y}
-      {z}
-      {r}
-      {styles}
-      {segments}
-      {markers}
-      {scales}
-      {margins}
-      tooltip={tip.enabled
-        ? {
-            format: tip.format ?? defaultFormat,
-            facetId: facetValue ?? '',
-            strategy: tip.strategy,
-            sync: tip.sync,
-            series: tip.series,
-            content: tip.content,
-            anchorX: tip.anchorX,
-            anchorY: tip.anchorY,
-          }
-        : undefined}
-    />
-  {/snippet}
-</BaseChart>