@fundar/data-chart-telling 0.0.24 → 0.0.26

package/dist/types/plots/data/scatter.d.ts

@@ -0,0 +1,13 @@
+import type { Accessor, SeriesProps, DataProps } from './common';
+/**
+ * `SeriesProps`/`DataProps`, plus an optional per-row bubble radius —
+ * ScatterPlot's own data contract. A field key or accessor function is
+ * bound to svelteplot's own auto sqrt scale (mirroring how `x`/`y` are
+ * bound to their own scales), so bubble *area* — not radius — ends up
+ * proportional to the raw values with no manual scaling needed; feeding it
+ * an already-scaled value double-scales it. A literal number bypasses
+ * scaling entirely (a fixed pixel radius, same as the default dot size).
+ */
+export type ScatterDataProps<T extends Record<string, unknown>> = (SeriesProps<T> | DataProps<T>) & {
+    r?: Accessor<T, number> | number;
+};

package/dist/types/plots/data/scatter.js

@@ -0,0 +1 @@
+export {};

package/dist/types/plots/props.d.ts

@@ -1,41 +1,23 @@
-import type { TooltipOptions } from '../layout/tooltip';
+import type { HoverPoint, HoverStrategy, TooltipOptions } from '../layout/tooltip';
 import type { Segment } from './segments/config';
-import type { AxisScale } from './axis';
-import type { GeoProjectionConfig } from './scales/geo';
+import type { AxisBasedScalesConfig } from '../layout/scales';
+import type { GeoScalesConfig } from '../layout/coordinates';
 /** The `styles` prop accepted by every plot kind — its own
- * styles shape ({@link BasePlotStyles}, `GeoStyles`, …). */
+ * styles shape ({@link BasePlotStylesConfig}, `GeoStylesConfig`, …). */
 export type StylesConfig<TStyles extends object> = TStyles;
-/** The `markers` prop accepted by every plot kind — a list of that
- * kind's own marker union ({@link Marker}, `GeoMarker`, …). */
+/** The `markers` prop accepted by every plot kind — a list of that kind's own marker union. */
 export type MarkersConfig<TMarker> = TMarker[];
 /**
- * The `segments` prop accepted by every plot kind.
- *
- * A record mapping series names (or `'default'` for all series) to lists of
- * {@link Segment}s. Segments in a named key apply only to that series;
- * segments under `'default'` apply to every series.
- *
- * ```ts
- * segments: {
- *   female:  [{ style: { stroke: { stroke: 'tomato' } } }],   // catch-all for female
- *   male:    [{ style: { stroke: { stroke: 'steelblue' } } }], // catch-all for male
- *   default: [{ areas: [{ x: { from: 2012, to: 2014 } }], style: { dots: { dotSymbol: 'circle' } } }],
- * }
- * ```
- *
- * Within each resolved series list, catch-alls (no `areas`) are evaluated last
- * so that area-specific segments always override them, regardless of position.
- * Area-specific segments also inherit any style key absent from their own style
- * by merging the catch-all as a baseline — the area's own style wins on conflict.
- * This lets you set a series colour once in a catch-all and add per-range dots
- * or dash patterns without repeating the colour on every area segment.
+ * The `segments` prop accepted by every plot kind — series name (or
+ * `'default'` for all series) to a list of {@link Segment}s. Within a
+ * series, catch-all segments (no `areas`) evaluate first as a baseline;
+ * area-specific segments merge on top and win on conflict.
  */
 export type SegmentsConfig<TStyle> = Record<string, Segment<TStyle>[]>;
 /**
- * Partial margin override — only the sides you specify are overridden; the
- * rest come from the theme (which itself defaults every side to `'auto'`).
- * `'auto'` sizes that side to fit its rendered content (tick labels, axis
- * title, rotated ticks); a number pins it exactly.
+ * Partial margin override — unset sides fall back to the theme (itself
+ * `'auto'` by default). `'auto'` fits the side to its rendered content; a
+ * number pins it exactly.
  */
 export type MarginConfig = Partial<{
     top: number | 'auto';
@@ -44,69 +26,59 @@ export type MarginConfig = Partial<{
     left: number | 'auto';
 }>;
 /**
- * The `tooltip` prop a plot actually receives — the chart's resolved form of
- * the author-facing {@link TooltipOptions} (which a chart accepts as a bare
- * `boolean` or the full object via `TooltipProp`): `format`/`sync` become
- * required once resolved, and `facetId` identifies the originating facet
- * (`''` when not faceted). Presence of this object on a plot is what turns
- * hovering on.
+ * The `tooltip` prop a plot actually receives — the resolved form of the
+ * author-facing {@link TooltipOptions}. `format`/`sync` become required;
+ * `facetId` identifies the originating facet (`''` when not faceted).
+ * Presence of this object is what turns hovering on.
  */
 export type TooltipConfig<TRow extends Record<string, unknown>> = Omit<TooltipOptions<TRow>, 'format' | 'sync'> & {
     format: (row: TRow) => string;
     sync: boolean;
     facetId: string;
 };
-/**
- * Per-axis scale overrides, passed as a single `scales` prop to every
- * axis-based plot kind (`GeoPlot` uses {@link GeoScalesConfig} instead — a
- * map has no x/y/z axis pair). `TData` threads through to
- * {@link AxisScale.sort} on each axis.
- */
-export type AxisBasedScalesConfig<TData = Record<string, unknown>> = {
-    x?: AxisScale<TData>;
-    y?: AxisScale<TData>;
-    z?: AxisScale<TData>;
-};
-/**
- * `scales` prop for GeoPlot — the geo analog of {@link AxisBasedScalesConfig}.
- * A map has no x/y/z axis pair, so this configures the projection and the
- * choropleth colour domain instead.
- */
-export type GeoScalesConfig = {
-    /** Which map projection to draw with. Defaults to `'equal-earth'`. */
-    projection?: GeoProjectionConfig;
-    /** Continuous choropleth value domain — mirrors heatmap's `scales.z.domain`. */
-    color?: {
-        domain?: [number, number];
-    };
+/** How a pointer event resolves to a candidate point: `'nearest'` (closest within a distance threshold) or `'contains'` (whichever candidate's own rendered shape contains the cursor). */
+export type PointMatchingStrategy = 'nearest' | 'contains';
+/** `BasePlotLayout`'s single `hover` prop — every plot kind's own resolved hover/tooltip wiring. */
+export type HoverConfig<TRow extends Record<string, unknown>> = {
+    /** Whether the pointer/hover/tooltip machinery should mount at all. */
+    active: boolean;
+    /** Candidate points hover matching searches against. */
+    points: HoverPoint<TRow>[];
+    /** Short label drawn next to the highlight dot (e.g. the value). */
+    label: (row: TRow) => string;
+    /** Resolved hover strategy for the *local* hover store (ignored once a shared store is in scope). */
+    strategy?: HoverStrategy;
+    /** Resolved sync flag for the *local* hover store (ignored once a shared store is in scope). */
+    sync?: boolean;
+    tooltip?: TooltipConfig<TRow>;
+    /** When it returns `true`, that pointer event is treated as a leave instead of a move — lets a nested layout opt part of the plot out of hover matching. */
+    exclude?: (e: PointerEvent) => boolean;
+    /** How to resolve a pointer event to a candidate point — see {@link PointMatchingStrategy}. Defaults to `'nearest'`. */
+    pointMatching?: PointMatchingStrategy;
+    /** Forces the crosshair rule(s) a `hover` marker draws off entirely, overriding whatever `strategy` implies. */
+    crosshair?: boolean;
 };
 /**
  * The `scales` prop accepted by every plot kind — either flavor of scale
- * config a plot kind can have ({@link AxisBasedScalesConfig} for the
- * axis-based kinds, {@link GeoScalesConfig} for `GeoPlot`). Each concrete
- * `Plot.svelte` narrows `BasePlotProps`'s `TScales` to exactly the one
- * that applies to it, rather than accepting this whole union.
+ * config a plot kind can have. Each concrete `Plot.svelte` narrows
+ * `BasePlotProps`'s `TScales` to exactly the one that applies to it.
  */
 export type ScalesConfig<TData = Record<string, unknown>> = AxisBasedScalesConfig<TData> | GeoScalesConfig;
 /**
- * The shared "prop bag" every plot component accepts, parameterized over
- * everything that varies by plot kind: `TDataContract` is the kind's own
- * data shape ({@link SeriesProps}`|`{@link DataProps} for the axis-based
- * kinds, `GeoDataProps` for `GeoPlot`), `TRow` is what `tooltip` resolves
- * against, and `TStyles`/`TSegmentStyle`/`TMarker`/`TScales` are that kind's
- * own segment/style/marker/scale shapes. Each `Plot.svelte` instantiates
- * this directly with its own concrete arguments rather than going through a
- * shared per-kind alias — segments/styles/markers already diverge in shape
- * across kinds today (or will soon), so a shared alias would just be an
- * extra layer to keep in sync.
+ * The shared prop bag every plot component accepts, parameterized over
+ * everything that varies by plot kind: `TDataContract` is its own data
+ * shape, `TRow` is what `tooltip` resolves against, and the rest are its
+ * own segment/style/marker/scale/coordinate-system shapes. `TCoordinates`
+ * defaults to `undefined` — only `GeoPlot` instantiates it.
  */
-export type BasePlotProps<TDataContract, TRow extends Record<string, unknown>, TStyles extends object, TSegmentStyle extends object, TMarker, TScales extends ScalesConfig<TRow>> = TDataContract & {
+export type BasePlotProps<TDataContract, TRow extends Record<string, unknown>, TStyles extends object, TSegmentStyle extends object, TMarker, TScales extends ScalesConfig<TRow>, TCoordinates = undefined> = TDataContract & {
     width: number;
     height: number;
     styles?: StylesConfig<TStyles>;
     segments?: SegmentsConfig<TSegmentStyle>;
     markers?: MarkersConfig<TMarker>;
     scales?: TScales;
+    coordinates?: TCoordinates;
     margins?: MarginConfig;
     tooltip?: TooltipConfig<TRow>;
 };

package/dist/types/plots/segments/common.d.ts

@@ -1,21 +1,15 @@
-import type { StrokeStyle, DotStyle } from '../styling';
+import type { StrokeStyle, DotStyle, AreaStyle } from '../styling';
 /** Per-segment styling for a line: its stroke and/or its endpoint dots. */
 export type LineSegmentStyle = {
     stroke?: StrokeStyle;
     dots?: DotStyle;
 };
-/** Per-segment styling for a bar-shaped mark: its fill. Shared by `BarPlot` and `PyramidPlot`. */
-export type BarSegmentStyle = {
-    fill?: string;
-    fillOpacity?: number;
-};
+/** Per-segment styling for a bar-shaped mark. Shared by `BarPlot` and `PyramidPlot`. */
+export type BarSegmentStyle = AreaStyle;
 /** Per-cell styling override for a heatmap cell. */
-export type CellSegmentStyle = {
-    fill?: string;
-    fillOpacity?: number;
-    stroke?: string;
-    strokeWidth?: number;
-};
+export type CellSegmentStyle = AreaStyle;
+/** Per-segment styling for a scatter point cloud. */
+export type ScatterSegmentStyle = DotStyle;
 /** Per-feature styling override for `GeoPlot` — the geo analog of `CellSegmentStyle`. */
 export type GeoSegmentStyle = {
     fill?: string;

package/dist/types/plots/segments/config.d.ts

@@ -1,4 +1,4 @@
-import type { AxisValue } from '../axis';
+import type { AxisValue } from '../../layout/scales';
 import type { Series } from '../data/common';
 import type { LineSegmentStyle } from './common';
 /** A half-open interval on one axis. Both bounds are inclusive; omit either to leave that end open. */

package/dist/types/plots/styling.d.ts

@@ -43,3 +43,13 @@ export type DotStyle = {
     dotStrokeOpacity?: number;
     dotStrokeDasharray?: string | LineStyle;
 };
+/** Styling for a 2D area mark — a bar segment, a heatmap cell, a geo feature highlight. */
+export type AreaStyle = {
+    fill?: string;
+    fillOpacity?: number;
+    stroke?: string;
+    strokeWidth?: number;
+    strokeOpacity?: number;
+    strokeDasharray?: string | LineStyle;
+    borderRadius?: number;
+};

package/dist/{plots/utils → utils}/delta.d.ts

@@ -1,5 +1,5 @@
-import type { Series } from '../../types/plots/data/common';
-import type { DeltaConfig } from '../../types/plots/delta';
+import type { Series } from '../types/plots/data/common';
+import type { DeltaConfig } from '../types/markers/line';
 export type ResolvedDelta = {
     cfg: DeltaConfig;
     at: number;

package/dist/{plots/utils → utils}/delta.js

@@ -1,4 +1,4 @@
-import { resolveAccessor } from './accessors';
+import { resolveAccessor } from '../plots/utils/accessors';
 /**
  * Sorts `data` by `sortBy`, then finds the first adjacent pair where `scanBy`
  * brackets `target` and linearly interpolates `measureBy` at that crossing.

package/dist/utils/edgeAwareAnchor.d.ts

@@ -0,0 +1,37 @@
+export type HorizontalAnchor = 'start' | 'middle' | 'end';
+export type VerticalAnchor = 'top' | 'middle' | 'bottom';
+/** Rough estimate of rendered text width in pixels — character count × font size, not a real DOM measurement. Shared so a pre-render space reservation (e.g. domain padding) and this file's own overflow check agree on the same number. */
+export declare function estimateTextWidth(text: string, fontSize: number): number;
+export type AnchorPlacement = {
+    textAnchor: HorizontalAnchor;
+    lineAnchor: VerticalAnchor;
+    dx: number;
+    dy: number;
+};
+/**
+ * Flips (or nudges) a label's anchor/offset when its default placement
+ * would push it past a pixel box — e.g. the plot's own inner content box.
+ * `extent` estimates the rendered label size (character count × font size,
+ * not a real DOM measurement) deliberately: measuring via `getBBox()` and
+ * feeding the result back into anything reactive to the plot's own layout
+ * (like svelteplot's shared margin-auto-sizing context) risks a feedback
+ * loop between this component's own effect and svelteplot's — this stays
+ * self-contained and read-only against the live scale instead.
+ */
+export declare function resolveEdgeAwareAnchor(args: {
+    /** Pixel position of the anchored point. */
+    px: number;
+    py: number;
+    /** Size of the box the label must stay within — typically the plot's own inner content box. */
+    width: number;
+    height: number;
+    textAnchor: HorizontalAnchor;
+    lineAnchor: VerticalAnchor;
+    /** Desired distance from the point, in pixels — sign is resolved from the (possibly flipped) anchor. */
+    gapX: number;
+    gapY: number;
+    extent: {
+        width: number;
+        height: number;
+    };
+}): AnchorPlacement;

package/dist/utils/edgeAwareAnchor.js

@@ -0,0 +1,65 @@
+/** Rough estimate of rendered text width in pixels — character count × font size, not a real DOM measurement. Shared so a pre-render space reservation (e.g. domain padding) and this file's own overflow check agree on the same number. */
+export function estimateTextWidth(text, fontSize) {
+    return text.length * fontSize * 0.62;
+}
+/**
+ * Flips (or nudges) a label's anchor/offset when its default placement
+ * would push it past a pixel box — e.g. the plot's own inner content box.
+ * `extent` estimates the rendered label size (character count × font size,
+ * not a real DOM measurement) deliberately: measuring via `getBBox()` and
+ * feeding the result back into anything reactive to the plot's own layout
+ * (like svelteplot's shared margin-auto-sizing context) risks a feedback
+ * loop between this component's own effect and svelteplot's — this stays
+ * self-contained and read-only against the live scale instead.
+ */
+export function resolveEdgeAwareAnchor(args) {
+    const { px, py, width, height, gapX, gapY, extent } = args;
+    let { textAnchor, lineAnchor } = args;
+    let dx;
+    let dy;
+    if (textAnchor === 'start') {
+        dx = gapX;
+        if (px + dx + extent.width > width) {
+            textAnchor = 'end';
+            dx = -gapX;
+        }
+    }
+    else if (textAnchor === 'end') {
+        dx = -gapX;
+        if (px + dx - extent.width < 0) {
+            textAnchor = 'start';
+            dx = gapX;
+        }
+    }
+    else {
+        const half = extent.width / 2;
+        dx = 0;
+        if (px - half < 0)
+            dx = half - px;
+        else if (px + half > width)
+            dx = width - (px + half);
+    }
+    if (lineAnchor === 'top') {
+        dy = gapY;
+        if (py + dy + extent.height > height) {
+            lineAnchor = 'bottom';
+            dy = -gapY;
+        }
+    }
+    else if (lineAnchor === 'bottom') {
+        dy = -gapY;
+        if (py + dy - extent.height < 0) {
+            lineAnchor = 'top';
+            dy = gapY;
+        }
+    }
+    else {
+        const half = extent.height / 2;
+        dy = 0;
+        if (py - half < 0)
+            dy = half - py;
+        else if (py + half > height)
+            dy = height - (py + half);
+    }
+    return { textAnchor, lineAnchor, dx, dy };
+}

package/dist/utils/grouping.d.ts

@@ -1,4 +1,4 @@
-import type { AxisValue } from '../types/plots/axis';
+import type { AxisValue } from '../types/layout/scales';
 import type { Series, Accessor } from '../types/plots/data/common';
 /**
  * Splits rows into ordered groups keyed by the stringified accessor value.

package/dist/utils/interpolate.d.ts

@@ -1,6 +1,6 @@
 import type { EasingName, EasingFn } from '../types/charts/interpolate';
 import type { TimeValue, TimelineInterpolation } from '../types/charts/common';
-import type { AxisValue } from '../types/plots/axis';
+import type { AxisValue } from '../types/layout/scales';
 import type { Accessor } from '../types/plots/data/common';
 export declare function resolveEasing(easing?: EasingName | EasingFn): EasingFn;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "type": "module",
   "files": [
     "dist"
@@ -58,6 +58,7 @@
     "eslint-plugin-storybook": "^10.4.1",
     "eslint-plugin-svelte": "^3.17.0",
     "globals": "^17.4.0",
+    "knip": "^6.32.1",
     "playwright": "^1.60.0",
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.5.1",
@@ -80,6 +81,7 @@
     "build": "svelte-package",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "check:unused-types": "knip --include types",
     "lint": "prettier --check . && eslint .",
     "format": "prettier --write .",
     "test": "vitest run --project=unit --project=browser",

package/dist/layout/geo/GeoLayout.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import TileLayer from '../../plots/geo/TileLayer.svelte';
-  import type { GeoTileLayerConfig } from '../../types/plots/styles/geo';
-
-  /**
-   * Geo-only chrome nested inside `BasePlotLayout` (the `GeoPlot` analog of
-   * `AxisLayout`/`GridLayout`/`RuleLayout`) — just the pan/zoom transform
-   * group and the raster tile layer underneath the map's own marks.
-   * Everything else GeoPlot used to duplicate from `BasePlotLayout` (the hover
-   * state machine, `<Plot>` itself, `<Pointer>`, the tooltip) now lives
-   * exclusively in `BasePlotLayout`; the zoom/rotate *gesture* state itself lives
-   * in `GeoPlot`'s own `Plot.svelte` (it also feeds the projection's
-   * `rotate`, which has to reach `BasePlotLayout`'s `<Plot projection>` prop —
-   * something a component nested *inside* that same `<Plot>` has no way to
-   * reach back out to), and is only handed down here as an already-resolved
-   * `zoomTransform` to apply.
-   */
-  let {
-    width,
-    height,
-    numericMargins,
-    zoomTransform,
-    tileLayer,
-    dataLonLatBounds,
-    children,
-  }: {
-    width: number;
-    height: number;
-    numericMargins: { top: number; right: number; bottom: number; left: number };
-    zoomTransform: { x: number; y: number; k: number };
-    tileLayer?: GeoTileLayerConfig;
-    /** Forwarded to `TileLayer` — see `Plot.svelte`'s `dataLonLatBounds`. */
-    dataLonLatBounds?: [number, number, number, number] | null;
-    children: Snippet;
-  } = $props();
-</script>
-
-<g transform="translate({zoomTransform.x}, {zoomTransform.y}) scale({zoomTransform.k})">
-  {#if tileLayer}
-    <TileLayer
-      config={tileLayer}
-      left={numericMargins.left}
-      top={numericMargins.top}
-      width={Math.max(0, width - numericMargins.left - numericMargins.right)}
-      height={Math.max(0, height - numericMargins.top - numericMargins.bottom)}
-      {dataLonLatBounds}
-    />
-  {/if}
-  {@render children()}
-</g>

package/dist/layout/geo/GeoLayout.svelte.d.ts

@@ -1,24 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { GeoTileLayerConfig } from '../../types/plots/styles/geo';
-type $$ComponentProps = {
-    width: number;
-    height: number;
-    numericMargins: {
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
-    };
-    zoomTransform: {
-        x: number;
-        y: number;
-        k: number;
-    };
-    tileLayer?: GeoTileLayerConfig;
-    /** Forwarded to `TileLayer` — see `Plot.svelte`'s `dataLonLatBounds`. */
-    dataLonLatBounds?: [number, number, number, number] | null;
-    children: Snippet;
-};
-declare const GeoLayout: import("svelte").Component<$$ComponentProps, {}, "">;
-type GeoLayout = ReturnType<typeof GeoLayout>;
-export default GeoLayout;

package/dist/layout/geo/resolveProjection.js

@@ -1,48 +0,0 @@
-/**
- * `data` (see `resolveProjection`) is one row per disjoint geometry *part*
- * (see `Plot.svelte`'s `hoverCandidates` — needed so hover-matching finds
- * every part of a multi-part feature, not just whichever one its combined
- * centroid happens to land near), not one row per feature. Several rows
- * therefore share the exact same `geometry` object by reference — spread
- * from the same tagged feature, only `__cx`/`__cy` differ. Deduping by that
- * reference before handing rows to d3-geo's bounds/fit computation matters:
- * a feature with many parts (e.g. a province whose `MultiPolygon` has
- * hundreds of small islands) would otherwise have its *entire* geometry
- * re-traversed once per part it contributed, an accidental O(parts²) cost
- * that got severe enough to be visible (multi-second) on real IGN data.
- */
-function dedupeByGeometry(data) {
-    const seen = new Set();
-    const result = [];
-    for (const row of data) {
-        if (seen.has(row.geometry))
-            continue;
-        seen.add(row.geometry);
-        result.push(row);
-    }
-    return result;
-}
-/**
- * Resolves a `GeoScalesConfig['projection']` into what svelteplot's own
- * `<Plot projection>` expects — kept separate from `GeoPlot`'s own
- * `Plot.svelte` so adding more projection-level behavior (like the
- * `domain: 'data'` sentinel below) doesn't grow that component itself.
- */
-export function resolveProjection(projection, data) {
-    if (!projection)
-        return 'equal-earth';
-    if (typeof projection === 'string')
-        return projection;
-    const domain = projection.domain === 'data'
-        ? { type: 'FeatureCollection', features: dedupeByGeometry(data) }
-        : projection.domain;
-    return {
-        type: projection.type,
-        rotate: projection.rotate,
-        center: projection.center,
-        parallels: projection.parallels,
-        inset: projection.inset,
-        clip: projection.clip,
-        domain,
-    };
-}

package/dist/layout/plot/GridLayout.svelte

@@ -1,30 +0,0 @@
-<script lang="ts" generics="TData extends Record<string, unknown>">
-  import { GridX, GridY } from 'svelteplot';
-  import type { AxisBasedScalesConfig } from '../../types/plots/props';
-
-  /**
-   * Grid lines for the plot kinds that have an x/y axis pair — opt-in via
-   * `scales.x.grid`/`scales.y.grid` (svelteplot's own implicit grid is a
-   * fixed, unstyled default, so this is drawn instead of that, not on top of
-   * it — see `BasePlotLayout`'s `finalizeScale`, which strips `grid` from what
-   * actually reaches `<Plot x y>`).
-   */
-  let { scales }: { scales?: AxisBasedScalesConfig<TData> } = $props();
-</script>
-
-{#if scales?.x?.grid}
-  <GridX
-    stroke={typeof scales.x.grid === 'object' ? scales.x.grid.stroke : undefined}
-    strokeWidth={typeof scales.x.grid === 'object' ? scales.x.grid.strokeWidth : undefined}
-    strokeOpacity={typeof scales.x.grid === 'object' ? scales.x.grid.strokeOpacity : undefined}
-    strokeDasharray={typeof scales.x.grid === 'object' ? scales.x.grid.strokeDasharray : undefined}
-  />
-{/if}
-{#if scales?.y?.grid}
-  <GridY
-    stroke={typeof scales.y.grid === 'object' ? scales.y.grid.stroke : undefined}
-    strokeWidth={typeof scales.y.grid === 'object' ? scales.y.grid.strokeWidth : undefined}
-    strokeOpacity={typeof scales.y.grid === 'object' ? scales.y.grid.strokeOpacity : undefined}
-    strokeDasharray={typeof scales.y.grid === 'object' ? scales.y.grid.strokeDasharray : undefined}
-  />
-{/if}