@fundar/data-chart-telling 0.0.63 → 1.0.0

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>

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

@@ -1,28 +0,0 @@
-import type { Accessor } from '../../types/plots/data/common';
-import type { ChartProps } from '../../types/charts/props';
-declare function $$render<TRow extends Record<string, unknown>>(): {
-    props: ChartProps<TRow, import("../..").DotStyle> & {
-        r?: Accessor<TRow, number> | number;
-    };
-    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/layout/coordinates/margins.d.ts

@@ -1,16 +0,0 @@
-/**
- * GeoPlot's own margin default — a small, uniform gap on every side, unlike
- * `AUTO_MARGIN_ESTIMATE`'s asymmetric axis-tick-label estimate (extra room
- * on the left/bottom for y tick labels and an x-axis title). A map has no
- * axes to make room for, so borrowing that estimate just left GeoPlot with
- * a lopsided, oversized margin — most visibly a much taller gap under the
- * map than an `inset` marker's own default `margin` (see `insetLayout.ts`),
- * even though both are meant to read as the same edge gap. Matching this
- * constant to that 8px inset default keeps the two visually aligned.
- */
-export declare const GEO_MARGIN_ESTIMATE: {
-    readonly top: 8;
-    readonly right: 8;
-    readonly bottom: 8;
-    readonly left: 8;
-};

package/dist/layout/coordinates/margins.js

@@ -1,11 +0,0 @@
-/**
- * GeoPlot's own margin default — a small, uniform gap on every side, unlike
- * `AUTO_MARGIN_ESTIMATE`'s asymmetric axis-tick-label estimate (extra room
- * on the left/bottom for y tick labels and an x-axis title). A map has no
- * axes to make room for, so borrowing that estimate just left GeoPlot with
- * a lopsided, oversized margin — most visibly a much taller gap under the
- * map than an `inset` marker's own default `margin` (see `insetLayout.ts`),
- * even though both are meant to read as the same edge gap. Matching this
- * constant to that 8px inset default keeps the two visually aligned.
- */
-export const GEO_MARGIN_ESTIMATE = { top: 8, right: 8, bottom: 8, left: 8 };

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

@@ -1,15 +0,0 @@
-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.
- *
- * Only resolves correctly when called during a real descendant component's
- * own `<script>` instantiation, not from inside a `{@render}`ed snippet body
- * — snippets run in their author's scope rather than as a fresh component
- * instance. `BaseChart`'s `plot` snippet gets the same data via its `legend`
- * context field instead, which works from either scope.
- */
-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

@@ -1,32 +0,0 @@
-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.
- *
- * Only resolves correctly when called during a real descendant component's
- * own `<script>` instantiation, not from inside a `{@render}`ed snippet body
- * — snippets run in their author's scope rather than as a fresh component
- * instance. `BaseChart`'s `plot` snippet gets the same data via its `legend`
- * context field instead, which works from either scope.
- */
-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/BasePlotLayout.svelte

@@ -1,332 +0,0 @@
-<script
-	lang="ts"
-	generics="TData extends Record<string, unknown>, TSeries extends Record<string, unknown> = TData"
->
-	import type { ComponentProps, Snippet } from 'svelte';
-	import { Plot, Pointer, setPlotDefaults } from 'svelteplot';
-	import { getConfiguration } from '../../configuration/config.svelte';
-	import { AUTO_MARGIN_ESTIMATE, numericMargin } from './margins';
-	import { buildScale } from '../scales/buildScale';
-	import ScalesLayout from '../scales/ScalesLayout.svelte';
-	import GeometryLayout from '../geometry/GeometryLayout.svelte';
-	import CoordinatesLayout from '../coordinates/CoordinatesLayout.svelte';
-	import StylesLayout from '../styles/StylesLayout.svelte';
-	import { getHover, createHover } from '../tooltip/hover.svelte';
-	import { createHoverController } from '../tooltip/controller.svelte';
-	import TooltipLayout from '../tooltip/TooltipLayout.svelte';
-	import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
-	import type { CoordinatesConfig } from '../../types/layout/coordinates';
-	import type { StylesLayoutConfig } from '../../types/layout/styles';
-	import type { ScopedMarkerGroup } from '../../types/layout/geometry';
-	import type { HoverPoint } from '../../types/layout/tooltip';
-	import type { MarginConfig, HoverConfig } from '../../types/plots/props';
-	import type { MarkerConfig } from '../../types/markers/all';
-	import type { Series } from '../../types/plots/data/common';
-	import type { GeoFeature } from '../../types/plots/data/geo';
-
-	type SveltePlotProps = ComponentProps<typeof Plot>;
-
-	/**
-	 * Shared chrome around every plot kind's svelteplot markup: the
-	 * pointer-event wrapper, the hover/tooltip state machine, and the floating
-	 * tooltip. Composes the Coordinates and Styles layers around every plot
-	 * kind's own content, plus `GeometryLayout` (which renders nothing extra
-	 * when `markers` is empty/unset). `ScalesLayout` composes in
-	 * independently, only when `scales` is passed. Every plot kind supplies
-	 * its own `<Plot x y projection>` scale config, either directly via
-	 * `x`/`y` or by leaving them unset so this component derives them from
-	 * `scales`.
-	 */
-	let {
-		width,
-		height,
-		data,
-		getX,
-		getY,
-		hover,
-		x = undefined,
-		y = undefined,
-		scales = undefined,
-		coordinates = undefined,
-		margins,
-		marginEstimate = AUTO_MARGIN_ESTIMATE,
-		marginRemountKey = undefined,
-		xTickRotate = undefined,
-		styles = undefined,
-		markers = undefined,
-		seriesData = undefined,
-		scopedGroups = undefined,
-		geoAllFeatures = undefined,
-		containerEl = $bindable(undefined),
-		children
-	}: {
-		width: number;
-		height: number;
-		/** Flat rows fed to svelteplot's `<Pointer>` for nearest-point matching, and to `CoordinatesLayout` for a `domain: 'data'` projection auto-fit. */
-		data: TData[];
-		getX: (d: TData) => AxisValue;
-		getY: (d: TData) => AxisValue;
-		/** Every hover/tooltip prop this component's own hover machinery reads — see {@link HoverConfig}. */
-		hover: HoverConfig<TData>;
-		/** Explicit `<Plot x>` override — bypasses `scales`-derived resolution (e.g. GeoPlot's fixed lon/lat domain). */
-		x?: SveltePlotProps['x'];
-		/** Explicit `<Plot y>` override — see `x`. */
-		y?: SveltePlotProps['y'];
-		/** Scale config `x`/`y` are derived from when not given directly. */
-		scales?: AxisBasedScalesConfig<TData>;
-		/** This plot kind's coordinate system config — `GeoPlot` only (a projection + pan/zoom). */
-		coordinates?: CoordinatesConfig;
-		/** Partial margin override — merged on top of the theme. */
-		margins?: MarginConfig;
-		/** Numeric fallback for a margin side that resolved to `'auto'` — see `numericMargin`'s doc comment. */
-		marginEstimate?: Record<'top' | 'right' | 'bottom' | 'left', number>;
-		/**
-		 * Forces svelteplot's own `<Plot>` to fully unmount/remount (via
-		 * `{#key}`) whenever this changes, instead of reacting to a `margins`
-		 * prop change on an already-mounted instance. Only needed by a caller
-		 * (line's own `Plot.svelte`) whose `margins` grows *after* mount, from
-		 * measuring rendered content (see `createLabelMarginTracker`) — handing
-		 * svelteplot's `<Plot>` a live post-mount margin change (rather than the
-		 * same final value from its very first mount) was observed to send its
-		 * own internal auto-margin sizing into a permanent one-pixel
-		 * bottom-margin oscillation for line's end-point value labels
-		 * specifically, which in turn kept re-triggering the overflow watcher
-		 * that grew the margin in the first place — an infinite effect loop
-		 * that tripped Svelte's `effect_update_depth_exceeded` guard. A static
-		 * `margins` prop (the common case — every other plot kind) never needs
-		 * this; leave it unset there.
-		 */
-		marginRemountKey?: string | number;
-		/** Boosts the bottom margin for a rotated x tick label — axis-having plot kinds only. */
-		xTickRotate?: number;
-		/** This plot kind's own `styles` prop, forwarded to the Styles layer. */
-		styles?: StylesLayoutConfig;
-		/**
-		 * This plot kind's own markers array. Accepts a plain array, or a
-		 * builder function for a plot kind whose own marker construction needs
-		 * `setHoverMatch`/`clearHoverMatch`, only available once this
-		 * component's own hover controller is set up.
-		 */
-		markers?:
-			| MarkerConfig[]
-			| ((hover: {
-					setHoverMatch: (rows: TData[]) => void;
-					clearHoverMatch: () => void;
-			  }) => MarkerConfig[]);
-		/** All resolved series, forwarded to `GeometryLayout` — axis-based kinds only. Independently generic over `TSeries` (defaults to `TData`). */
-		seriesData?: Series<TSeries>[];
-		/** Per-series `GeometryLayout` groups — axis-based kinds only, same `TSeries` as `seriesData`. */
-		scopedGroups?: ScopedMarkerGroup<TSeries>[];
-		/** `GeoPlot`'s own untouched, tagged features, forwarded to `GeometryLayout` — `inset` marker only. */
-		geoAllFeatures?: (GeoFeature<Record<string, unknown>> & { __id: string })[];
-		/** The wrapper div's own element — bind for a nested layout that needs it for its own gesture handling (e.g. `CoordinatesLayout`'s zoom/rotate). */
-		containerEl?: HTMLDivElement;
-		/**
-		 * `matchedPoints` carries the source `row` alongside the display fields,
-		 * so a template can resolve it straight off `row` instead of assuming
-		 * which visual axis it landed on. `activePoint` is the one matched point
-		 * under the cursor. `numericMargins` lets a nested layout align itself
-		 * with the plot's own content box. `setHoverMatch`/`clearHoverMatch` let
-		 * a plot kind drive the match itself instead of svelteplot's
-		 * distance-based `<Pointer>` — see `hover.pointMatching`. When `markers`
-		 * is given, this is `GeometryLayout`'s own `children` instead of raw
-		 * plot content. Optional — a plot kind whose every mark is a `markers`
-		 * entry has nothing left to render here.
-		 */
-		children?: Snippet<
-			[
-				{
-					matchedPoints: HoverPoint<TData>[];
-					activePoint: HoverPoint<TData> | null;
-					impliesCrosshairX: boolean;
-					impliesCrosshairY: boolean;
-					numericMargins: { top: number; right: number; bottom: number; left: number };
-					setHoverMatch: (rows: TData[]) => void;
-					clearHoverMatch: () => void;
-				}
-			]
-		>;
-	} = $props();
-
-	const cfg = $derived(getConfiguration());
-	setPlotDefaults({
-		numberFormat: { useGrouping: 'min2', compactDisplay: cfg.axis.compactDisplay }
-	});
-
-	/**
-	 * Margins passed straight to `<Plot margin={…}>`. Each side defaults to
-	 * `'auto'` (from the theme), which lets svelteplot size it to whatever it
-	 * actually renders there — tick labels, an axis title, rotated ticks —
-	 * rather than a fixed guess that either clips content or wastes space.
-	 * `margins`/`cfg.margins` can still pin a side to an exact number.
-	 */
-	const computedMargins = $derived.by(() => {
-		const base = { ...cfg.margins, ...margins };
-		// Auto margins already measure the real (rotated) label bounding box, so
-		// this manual boost is only needed when the caller pinned bottom to a
-		// fixed number, which bypasses that measurement.
-		if (!xTickRotate || typeof base.bottom !== 'number') return base;
-		const rad = (Math.abs(xTickRotate) * Math.PI) / 180;
-		return {
-			...base,
-			bottom: base.bottom + Math.ceil(Math.sin(rad) * 20)
-		};
-	});
-
-	const numericMargins = $derived({
-		top: numericMargin('top', computedMargins.top, marginEstimate),
-		right: numericMargin('right', computedMargins.right, marginEstimate),
-		bottom: numericMargin('bottom', computedMargins.bottom, marginEstimate),
-		left: numericMargin('left', computedMargins.left, marginEstimate)
-	});
-
-	// Cast to svelteplot's own (narrower, axis-specific) scale option type:
-	// buildScale has already stripped the fields that don't exist there
-	// (grid, the vertical label config, BarPlot's series-layout knobs).
-	const resolvedX = $derived(
-		x !== undefined ? x : (buildScale(scales?.x, data, getX) as SveltePlotProps['x'])
-	);
-	const resolvedY = $derived(
-		y !== undefined ? y : (buildScale(scales?.y, data, getY) as SveltePlotProps['y'])
-	);
-
-	/** Only ever meaningful for `GeoPlot`. `none` while any interactive gesture (`zoom`/`pan`/`rotate`) is on. */
-	const touchAction = $derived(
-		(coordinates?.zoom !== false && coordinates?.zoom != null) ||
-			coordinates?.pan ||
-			coordinates?.rotate
-			? 'none'
-			: undefined
-	);
-
-	// ── Hover / tooltip ───────────────────────────────────────────────────────
-	const sharedHover = getHover();
-	const localHover = createHover();
-	const hoverStore = $derived(sharedHover ?? localHover);
-
-	/** Declared intent, defaulted — see {@link HoverConfig.pointMatching}. */
-	const pointMatchingStrategy = $derived(hover.pointMatching ?? 'nearest');
-
-	/**
-	 * Which axes svelteplot's `<Pointer>` should search along, derived from
-	 * the active strategy. `undefined` for an axis collapses every point to
-	 * the same coordinate on that axis, excluding it from the match entirely.
-	 */
-	const pointerMatchX = $derived(hoverStore.strategy === 'y' ? undefined : getX);
-	const pointerMatchY = $derived(hoverStore.strategy === 'x' ? undefined : getY);
-
-	$effect(() => {
-		if (sharedHover) return;
-		localHover.strategy = hover.strategy ?? 'x';
-		localHover.sync = hover.sync ?? false;
-	});
-
-	const ctrl = createHoverController<TData>({
-		hover: () => hoverStore,
-		facetId: () => hover.tooltip?.facetId ?? '',
-		points: () => hover.points,
-		getX: () => getX,
-		getY: () => getY,
-		label: () => hover.label,
-		seriesFilter: () => hover.tooltip?.series,
-		width: () => width,
-		height: () => height,
-		crosshair: () => hover.crosshair
-	});
-
-	function onMove(e: PointerEvent) {
-		if (hover.exclude?.(e)) {
-			ctrl.onLeave();
-			return;
-		}
-		ctrl.onMove(e);
-	}
-
-	const resolvedMarkers = $derived(
-		typeof markers === 'function'
-			? markers({ setHoverMatch: ctrl.onPointer, clearHoverMatch: ctrl.onLeave })
-			: markers
-	);
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="dct-plot"
-	bind:this={containerEl}
-	style:color={cfg.axis.color}
-	style:touch-action={touchAction}
-	onpointermove={hover.active ? onMove : undefined}
-	onpointerleave={hover.active ? ctrl.onLeave : undefined}
->
-	<CoordinatesLayout
-		{width}
-		{height}
-		margin={computedMargins}
-		x={resolvedX}
-		y={resolvedY}
-		{coordinates}
-		locale={cfg.axis.locale}
-		{data}
-		{containerEl}
-		remountKey={marginRemountKey}
-	>
-		<StylesLayout {styles} {width} {height} {numericMargins} />
-		{#if scales !== undefined}
-			<ScalesLayout {data} {getX} {getY} {width} {height} {numericMargins} {scales} />
-		{/if}
-		<GeometryLayout
-			markers={resolvedMarkers}
-			seriesData={seriesData ?? []}
-			scopedGroups={scopedGroups ?? []}
-			{ctrl}
-			{width}
-			{height}
-			{numericMargins}
-			{data}
-			{geoAllFeatures}
-			tooltipAnchorX={hover.tooltip?.anchorX}
-			tooltipAnchorY={hover.tooltip?.anchorY}
-		>
-			{@render children?.({
-				matchedPoints: ctrl.points,
-				activePoint: ctrl.activePoint,
-				impliesCrosshairX: ctrl.impliesCrosshairX,
-				impliesCrosshairY: ctrl.impliesCrosshairY,
-				numericMargins,
-				setHoverMatch: ctrl.onPointer,
-				clearHoverMatch: ctrl.onLeave
-			})}
-		</GeometryLayout>
-
-		{#if hover.active && pointMatchingStrategy === 'nearest'}
-			<Pointer
-				{data}
-				x={pointerMatchX}
-				y={pointerMatchY}
-				maxDistance={400}
-				onupdate={ctrl.onPointer}
-			/>
-		{/if}
-	</CoordinatesLayout>
-
-	{#if hover.tooltip}
-		<TooltipLayout
-			visible={ctrl.showTooltip && ctrl.tooltipPosition != null}
-			x={ctrl.tooltipPosition?.x ?? 0}
-			y={ctrl.tooltipPosition?.y ?? 0}
-			bounds={{ width, height }}
-			rows={ctrl.matchedRows.map((p) => p.row)}
-			format={hover.tooltip.format}
-			content={hover.tooltip.content}
-			anchorX={hover.tooltip.anchorX}
-			anchorY={hover.tooltip.anchorY}
-		/>
-	{/if}
-</div>
-
-<style>
-	.dct-plot {
-		position: relative;
-		line-height: 0;
-	}
-</style>