layerchart 0.42.0 → 0.43.0

package/dist/components/Treemap.svelte

@@ -1,8 +1,8 @@
-<script>import { getContext } from 'svelte';
-import * as d3 from 'd3-hierarchy';
+<script>import { treemap as d3treemap, treemapBinary, treemapDice, treemapResquarify, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3-hierarchy';
+import { chartContext } from './ChartContext.svelte';
 import { aspectTile } from '../utils/treemap.js';
-const { data, width, height } = getContext('LayerCake');
-export let tile = d3.treemapSquarify;
+const { data, width, height } = chartContext();
+export let tile = treemapSquarify;
 export let padding = 0;
 export let paddingInner = 0;
 export let paddingOuter = 0;
@@ -13,22 +13,21 @@ export let paddingRight = undefined;
 export let selected = null;
 $: tileFunc =
     tile === 'squarify'
-        ? d3.treemapSquarify
+        ? treemapSquarify
         : tile === 'resquarify'
-            ? d3.treemapResquarify
+            ? treemapResquarify
             : tile === 'binary'
-                ? d3.treemapBinary
+                ? treemapBinary
                 : tile === 'dice'
-                    ? d3.treemapDice
+                    ? treemapDice
                     : tile === 'slice'
-                        ? d3.treemapSlice
+                        ? treemapSlice
                         : tile === 'sliceDice'
-                            ? d3.treemapSliceDice
+                            ? treemapSliceDice
                             : tile;
 let treemap;
 $: {
-    treemap = d3
-        .treemap()
+    treemap = d3treemap()
         .size([$width, $height])
         .tile(aspectTile(tileFunc, $width, $height));
     if (padding) {

package/dist/components/Treemap.svelte.d.ts

@@ -1,23 +1,23 @@
 import { SvelteComponentTyped } from "svelte";
-import * as d3 from 'd3-hierarchy';
+import { treemapSquarify, type HierarchyRectangularNode } from 'd3-hierarchy';
 declare const __propDef: {
     props: {
-        tile?: typeof d3.treemapSquarify | "binary" | "squarify" | "resquarify" | "dice" | "slice" | "sliceDice";
+        tile?: typeof treemapSquarify | "binary" | "squarify" | "resquarify" | "dice" | "slice" | "sliceDice";
         padding?: number;
         paddingInner?: number;
         paddingOuter?: number;
         paddingTop?: number;
         paddingBottom?: number;
-        paddingLeft?: undefined;
-        paddingRight?: undefined;
-        selected?: any;
+        paddingLeft?: number | undefined;
+        paddingRight?: number | undefined;
+        selected?: HierarchyRectangularNode<any> | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {
-            nodes: any;
+            nodes: HierarchyRectangularNode<any>[];
         };
     };
 };

package/dist/components/Voronoi.svelte

@@ -1,11 +1,13 @@
-<script>import { createEventDispatcher, getContext } from 'svelte';
-import { cls } from 'svelte-ux';
+<script>import { createEventDispatcher } from 'svelte';
 import { min } from 'd3-array';
 import { Delaunay } from 'd3-delaunay';
+// @ts-expect-error
 import { geoVoronoi } from 'd3-geo-voronoi';
+import { cls } from 'svelte-ux';
+import { chartContext } from './ChartContext.svelte';
 import GeoPath from './GeoPath.svelte';
 import { geoContext } from './GeoContext.svelte';
-const { flatData, xGet, yGet, x: xContext, y: yContext, width, height } = getContext('LayerCake');
+const { flatData, xGet, yGet, x: xContext, y: yContext, width, height } = chartContext();
 const geo = geoContext();
 /** Override data instead of using context */
 export let data = undefined;
@@ -18,6 +20,7 @@ $: points = (data ?? $flatData).map((d) => {
     const x = Array.isArray(xValue) ? min(xValue) : xValue;
     const y = Array.isArray(yValue) ? min(yValue) : yValue;
     const point = [x, y];
+    // @ts-expect-error
     point.data = d;
     return point;
 });
@@ -48,6 +51,8 @@ $: boundHeight = Math.max($height, 0);
   {:else}
     {@const voronoi = Delaunay.from(points).voronoi([0, 0, boundWidth, boundHeight])}
     {#each points as point, i}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <path
         d={voronoi.renderCell(i)}
         class={cls('fill-transparent', classes.path)}

package/dist/components/layout/Canvas.svelte

@@ -1,12 +1,14 @@
-<script>import { getContext, onMount, setContext } from 'svelte';
+<script>import { onMount, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { scaleCanvas } from 'layercake';
 import { cls } from 'svelte-ux';
+import { chartContext } from '../ChartContext.svelte';
 import { transformContext } from '../TransformContext.svelte';
-const { width, height, containerWidth, containerHeight, padding } = getContext('LayerCake');
+const { width, height, containerWidth, containerHeight, padding } = chartContext();
 /** The `<canvas>` tag. Useful for bindings. */
 export let element = undefined;
 /** The `<canvas>`'s 2d context. Useful for bindings. */
+// @ts-expect-error: set during onMount()
 export let context = undefined;
 /** Force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling getImageData() frequently.
  * see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#willreadfrequently */
@@ -31,7 +33,7 @@ const { mode, scale, translate } = transformContext();
 $: if (context) {
     scaleCanvas(context, $containerWidth, $containerHeight);
     context.clearRect(0, 0, $containerWidth, $containerHeight);
-    context.translate($padding.left, $padding.top);
+    context.translate($padding.left ?? 0, $padding.top ?? 0);
     if (mode === 'canvas') {
         const center = { x: $width / 2, y: $height / 2 };
         const newTranslate = {

package/dist/components/layout/Html.svelte

@@ -1,5 +1,5 @@
-<script>import { getContext } from 'svelte';
-import { cls } from 'svelte-ux';
+<script>import { cls } from 'svelte-ux';
+import { chartContext } from '../ChartContext.svelte';
 /** The layer's outermost `<div>` tag. Useful for bindings. */
 export let element = undefined;
 /** The layer's z-index. */
@@ -14,7 +14,7 @@ export let label = undefined;
 export let labelledBy = undefined;
 /** A string passed to the `aria-describedby` property on the `<div>` tag. */
 export let describedBy = undefined;
-const { padding } = getContext('LayerCake');
+const { padding } = chartContext();
 $: roleVal = role || (label || labelledBy || describedBy ? 'figure' : undefined);
 </script>
 

package/dist/components/layout/Svg.svelte

@@ -1,5 +1,5 @@
-<script>import { getContext } from 'svelte';
-import { cls } from 'svelte-ux';
+<script>import { cls } from 'svelte-ux';
+import { chartContext } from '../ChartContext.svelte';
 import { transformContext } from '../TransformContext.svelte';
 /** The layer's `<svg>` tag. Useful for bindings. */
 export let element = undefined;
@@ -19,7 +19,7 @@ export let labelledBy = undefined;
 export let describedBy = undefined;
 /** Shorthand to set the contents of `<title></title>` for accessibility. You can also set arbitrary HTML via the "title" slot but this is a convenient shorthand. If you use the "title" slot, this prop is ignored. */
 export let title = undefined;
-const { containerWidth, containerHeight, width, height, padding } = getContext('LayerCake');
+const { containerWidth, containerHeight, width, height, padding } = chartContext();
 const { mode, scale, translate } = transformContext();
 let transform = '';
 $: if (mode === 'canvas') {
@@ -32,6 +32,8 @@ $: if (mode === 'canvas') {
 }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <svg
   bind:this={element}
   {viewBox}
@@ -48,6 +50,7 @@ $: if (mode === 'canvas') {
   aria-labelledby={labelledBy}
   aria-describedby={describedBy}
   on:click
+  role="figure"
 >
   <slot name="title">
     {#if title}<title>{title}</title>{/if}

package/dist/docs/Code.svelte

@@ -1,16 +1,15 @@
 <script>import Prism from 'prismjs';
 import 'prism-svelte';
-import { CopyButton, cls, getComponentClasses } from 'svelte-ux';
+import { CopyButton, cls } from 'svelte-ux';
 export let source = null;
 export let language = 'svelte';
 export let highlightedSource = source
     ? Prism.highlight(source, Prism.languages[language] ?? Prism.languages.text, language)
     : '';
 export let classes = {};
-const settingsClasses = getComponentClasses('Code');
 </script>
 
-<div class={cls('Code', 'rounded', settingsClasses.root, classes.root, $$props.class)}>
+<div class={cls('Code', 'rounded', classes.root, $$props.class)}>
   {#if source}
     <div class="relative">
       <pre

package/dist/docs/GeoDebug.svelte

@@ -1,7 +1,7 @@
-<script>import { getContext } from 'svelte';
-import { format, Checkbox, cls } from 'svelte-ux';
+<script>import { format, Checkbox, cls } from 'svelte-ux';
+import { chartContext } from '../components/ChartContext.svelte';
 import { geoContext } from '../components/GeoContext.svelte';
-const { width, height } = getContext('LayerCake');
+const { width, height } = chartContext();
 const geo = geoContext();
 let showCenter = false;
 </script>
@@ -33,7 +33,7 @@ let showCenter = false;
 
     <div>
       <span class="opacity-50">long/lat: <Checkbox bind:checked={showCenter} size="xs" /></span>
-      {#each $geo.invert?.([$width / 2, $height / 2]) as coord}
+      {#each $geo.invert?.([$width / 2, $height / 2]) ?? [] as coord}
         <div class="text-right">{format(coord, 'decimal')}</div>
       {/each}
     </div>

package/dist/docs/Link.svelte

@@ -1,7 +1,5 @@
-<script>"use strict";
-// console.log($$props, $$slots);
-</script>
-
+<!-- href provided by markdown/mdsvex -->
+<!-- svelte-ignore a11y-missing-attribute -->
 <a class="text-primary font-medium" {...$$restProps}>
   <slot />
 </a>

package/dist/docs/Link.svelte.d.ts

@@ -1,3 +1,17 @@
+/** @typedef {typeof __propDef.props}  LinkProps */
+/** @typedef {typeof __propDef.events}  LinkEvents */
+/** @typedef {typeof __propDef.slots}  LinkSlots */
+export default class Link extends SvelteComponentTyped<{
+    [x: string]: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type LinkProps = typeof __propDef.props;
+export type LinkEvents = typeof __propDef.events;
+export type LinkSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
@@ -10,9 +24,4 @@ declare const __propDef: {
         default: {};
     };
 };
-export type LinkProps = typeof __propDef.props;
-export type LinkEvents = typeof __propDef.events;
-export type LinkSlots = typeof __propDef.slots;
-export default class Link extends SvelteComponentTyped<LinkProps, LinkEvents, LinkSlots> {
-}
 export {};

package/dist/docs/Preview.svelte

@@ -9,7 +9,7 @@ import Json from './Json.svelte';
 export let code = undefined;
 export let data = undefined;
 export let language = 'svelte';
-export let highlightedCode = Prism.highlight(code, Prism.languages.svelte, language);
+export let highlightedCode = code ? Prism.highlight(code, Prism.languages.svelte, language) : '';
 export let showCode = false;
 let copyValue = null;
 try {

package/dist/docs/TilesetField.svelte

@@ -89,7 +89,7 @@ $: serviceUrl = getServiceUrl(selected);
   toggleIcon={null}
   stepper
 >
-  <div slot="append" on:click|stopPropagation>
+  <div slot="append" on:click|stopPropagation role="none">
     <div class="text-[10px] text-surface-content/50 text-center">2x</div>
     <Switch bind:checked={doubleScale} size="md" />
   </div>

package/dist/docs/TilesetField.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         doubleScale?: boolean;
-        serviceUrl?: (x: number, y: number, z: number) => string;
+        serviceUrl?: Function;
     };
     events: {
         click: MouseEvent;

package/dist/docs/ViewSourceButton.svelte

@@ -1,9 +1,9 @@
-<script>import { mdiGithub } from '@mdi/js';
-import { Button, Dialog, Toggle, Tooltip } from 'svelte-ux';
+<script>import { Button, Dialog, Toggle, Tooltip } from 'svelte-ux';
+import { mdiGithub } from '@mdi/js';
 import Code from './Code.svelte';
 export let label;
-export let source;
-export let href;
+export let source = undefined;
+export let href = undefined;
 export let icon;
 </script>
 

package/dist/docs/ViewSourceButton.svelte.d.ts

@@ -1,10 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ComponentProps } from 'svelte';
+import { Button } from 'svelte-ux';
 declare const __propDef: {
     props: {
         label: string;
-        source: string;
-        href: string;
-        icon: string;
+        source?: string | undefined;
+        href?: string | undefined;
+        icon: ComponentProps<Button>["icon"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/stores/motionStore.d.ts

@@ -1,6 +1,6 @@
 import { spring, tweened } from 'svelte/motion';
-export type SpringOptions = Parameters<typeof spring>[1];
-export type TweenedOptions = Parameters<typeof tweened>[1];
+export type SpringOptions = Parameters<typeof spring<any>>[1];
+export type TweenedOptions = Parameters<typeof tweened<any>>[1];
 export type MotionOptions = {
     spring?: boolean | SpringOptions;
     tweened?: boolean | TweenedOptions;

package/dist/stores/motionStore.js

@@ -22,14 +22,16 @@ export function resolveOptions(prop, options) {
         spring: typeof options.spring === 'boolean' || options.spring == null
             ? options.spring
             : prop in options.spring
-                ? options.spring[prop]
+                ? //@ts-expect-error
+                    options.spring[prop]
                 : Object.keys(options.spring).some((key) => ['precision', 'damping', 'stiffness'].includes(key))
                     ? options.tweened
                     : false,
         tweened: typeof options.tweened === 'boolean' || options.tweened == null
             ? options.tweened
             : prop in options.tweened
-                ? options.tweened[prop]
+                ? //@ts-expect-error
+                    options.tweened[prop]
                 : Object.keys(options.tweened).some((key) => ['delay', 'duration', 'easing'].includes(key))
                     ? options.tweened
                     : false,

package/dist/utils/array.d.ts

@@ -0,0 +1,5 @@
+import { extent as d3extent, type Numeric } from 'd3-array';
+/**
+ * Wrapper around d3-array's `extent()` but remove [undefined, undefined] return type
+ */
+export declare function extent<T extends Numeric>(iterable: Parameters<typeof d3extent<T>>[0]): [T, T];

package/dist/utils/array.js

@@ -0,0 +1,7 @@
+import { extent as d3extent } from 'd3-array';
+/**
+ * Wrapper around d3-array's `extent()` but remove [undefined, undefined] return type
+ */
+export function extent(iterable) {
+    return d3extent(iterable);
+}

package/dist/utils/common.d.ts

@@ -0,0 +1,2 @@
+export type Accessor<TData = any> = number | string | ((d: TData) => any) | undefined | Accessor<TData>[];
+export declare function accessor<TData = any>(prop: Accessor<TData>): (d: TData) => any;

package/dist/utils/common.js

@@ -0,0 +1,18 @@
+import { get } from 'lodash-es';
+export function accessor(prop) {
+    if (Array.isArray(prop)) {
+        return (d) => prop.map((p) => accessor(p)(d));
+    }
+    else if (typeof prop === 'function') {
+        // function
+        return prop;
+    }
+    else if (typeof prop === 'string') {
+        // path
+        return (d) => get(d, prop);
+    }
+    else {
+        // return full object
+        return (d) => d;
+    }
+}

package/dist/utils/genData.d.ts

@@ -14,35 +14,35 @@ export declare function getRandomInteger(min: number, max: number, includeMax?:
 export declare function randomWalk(options?: {
     count?: number;
 }): number[];
-export declare function createSeries(options: {
+export declare function createSeries<TKey extends string>(options: {
     count?: number;
     min: number;
     max: number;
-    keys?: Array<string>;
+    keys?: TKey[];
     value?: 'number' | 'integer';
-}): {
+}): ({
     x: number;
-}[];
-export declare function createDateSeries(options: {
+} & { [K in TKey]: number; })[];
+export declare function createDateSeries<TKey extends string>(options: {
     count?: number;
     min: number;
     max: number;
-    keys?: Array<string>;
+    keys?: TKey[];
     value?: 'number' | 'integer';
-}): {
+}): ({
     date: Date;
-}[];
-export declare function createTimeSeries(options: {
+} & { [K in TKey]: number; })[];
+export declare function createTimeSeries<TKey extends string>(options: {
     count?: number;
     min: number;
     max: number;
-    keys: Array<string>;
+    keys: TKey[];
     value: 'number' | 'integer';
-}): {
+}): ({
     name: string;
     startDate: Date;
     endDate: Date;
-}[];
+} & { [K in TKey]: number; })[];
 export declare const wideData: {
     year: string;
     apples: number;
@@ -56,21 +56,21 @@ export declare const longData: {
     fruit: string;
     value: number;
 }[];
-export declare function getPhyllotaxis({ radius, count, width, height }: {
-    radius: any;
-    count: any;
-    width: any;
-    height: any;
+export declare function getPhyllotaxis({ radius, count, width, height, }: {
+    radius: number;
+    count: number;
+    width: number;
+    height: number;
 }): {
     x: number;
     y: number;
 }[];
-export declare function getSpiral({ angle, radius, count, width, height }: {
-    angle: any;
-    radius: any;
-    count: any;
-    width: any;
-    height: any;
+export declare function getSpiral({ angle, radius, count, width, height, }: {
+    angle: number;
+    radius: number;
+    count: number;
+    width: number;
+    height: number;
 }): {
     x: number;
     y: number;

package/dist/utils/genData.js

@@ -23,6 +23,7 @@ export function getRandomInteger(min, max, includeMax = true) {
  */
 export function randomWalk(options) {
     const random = randomNormal();
+    // @ts-expect-error
     return Array.from(cumsum({ length: options?.count ?? 100 }, random));
 }
 export function createSeries(options) {
@@ -108,12 +109,12 @@ export const longData = [
     { year: '2016', basket: 2, fruit: 'cherries', value: 720 },
     { year: '2016', basket: 2, fruit: 'dates', value: 400 },
 ];
-export function getPhyllotaxis({ radius, count, width, height }) {
+export function getPhyllotaxis({ radius, count, width, height, }) {
     // Phyllotaxis: https://www.youtube.com/watch?v=KWoJgHFYWxY
     const rads = Math.PI * (3 - Math.sqrt(5)); // ~2.4 rads or ~137.5 degrees
     return getSpiral({ angle: radiansToDegrees(rads), radius, count, width, height });
 }
-export function getSpiral({ angle, radius, count, width, height }) {
+export function getSpiral({ angle, radius, count, width, height, }) {
     return Array.from({ length: count }, (_, i) => {
         const r = radius * Math.sqrt(i);
         const a = degreesToRadians(angle * i);

package/dist/utils/geo.d.ts

@@ -1,11 +1,11 @@
-import { type GeoPermissibleObjects, type GeoProjection, type GeoStreamWrapper } from 'd3-geo';
+import { geoPath as d3geoPath, type GeoProjection, type GeoStreamWrapper } from 'd3-geo';
 import { type Path } from 'd3-path';
 import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
 /**
  * Render a geoPath() using curve factory
  * @see {@link https://observablehq.com/@d3/context-to-curve}
  */
-export declare function geoCurvePath(projection: GeoProjection | GeoStreamWrapper | null, curve: CurveFactory | CurveFactoryLineOnly, context?: CanvasRenderingContext2D | Path): (object: GeoPermissibleObjects) => string | undefined;
+export declare function geoCurvePath(projection: GeoProjection | GeoStreamWrapper | null, curve: CurveFactory | CurveFactoryLineOnly, context?: CanvasRenderingContext2D | Path): ReturnType<typeof d3geoPath>;
 /**
  * Return the point on Earth's surface that is diametrically opposite to another point
  * @see: https://en.wikipedia.org/wiki/Antipodes
@@ -15,7 +15,7 @@ export declare function antipode([longitude, latitude]: [number, number]): [numb
  * Check if point ([x, y]) is visible on projection
  * @see: https://observablehq.com/@d3/testing-projection-visibility
  */
-export declare function isVisible(projection: GeoProjection | GeoStreamWrapper): ([x, y]: [any, any]) => boolean;
+export declare function isVisible(projection: GeoProjection | GeoStreamWrapper): ([x, y]: [number, number]) => boolean;
 export declare function geoFitObjectTransform(projection: GeoProjection, size: [number, number], object: Parameters<typeof projection.fitSize>[1]): {
     translate: {
         x: number;

package/dist/utils/geo.js

@@ -14,6 +14,7 @@ export function geoCurvePath(projection, curve, context) {
     };
     // Expose geoPath properties such as `.centroid()`
     Object.setPrototypeOf(fn, geoPath);
+    // @ts-expect-error
     return fn;
 }
 /**
@@ -52,6 +53,7 @@ export function antipode([longitude, latitude]) {
  */
 export function isVisible(projection) {
     let visible;
+    // @ts-expect-error
     const stream = projection.stream({
         point() {
             visible = true;

package/dist/utils/graph.d.ts

@@ -19,7 +19,7 @@ export declare function graphFromHierarchy(hierarchy: ReturnType<typeof d3Hierar
  * Create graph from node (and target node/links downward)
  */
 export declare function graphFromNode(node: SankeyNodeMinimal<any, any>): {
-    nodes: SankeyNodeMinimal<any, any>[];
+    nodes: any[];
     links: any[];
 };
 /**

package/dist/utils/graph.js

@@ -7,8 +7,8 @@ export function graphFromCsv(csv) {
         ? {
             source,
             target,
-            // @ts-ignore
-            value: !value || isNaN((value = +value)) ? 1 : value,
+            // @ts-expect-error
+            value: !value || isNaN((value = +value)) ? 1 : +value,
             // color: linkColor,
         }
         : null);
@@ -29,7 +29,7 @@ export function graphFromHierarchy(hierarchy) {
 export function graphFromNode(node) {
     const nodes = [node];
     const links = [];
-    node.sourceLinks.forEach((link) => {
+    node.sourceLinks?.forEach((link) => {
         nodes.push(link.target);
         links.push(link);
         if (link.target.sourceLinks.length) {

package/dist/utils/hierarchy.d.ts

@@ -3,4 +3,4 @@ import type { HierarchyNode } from 'd3-hierarchy';
  *  Find first ancestor matching filter, including node.
  *  Similar to `node.find()` (https://github.com/d3/d3-hierarchy#node_find) but checks ancestors instead of descendants
  */
-export declare function findAncestor<T = any>(node: HierarchyNode<T>, filter: (node: any) => boolean): HierarchyNode<T> | null;
+export declare function findAncestor<T = any>(node: HierarchyNode<T>, filter: (node: HierarchyNode<T>) => boolean): HierarchyNode<T> | null;

package/dist/utils/hierarchy.js

@@ -7,6 +7,7 @@ export function findAncestor(node, filter) {
         if (filter(node)) {
             return node;
         }
+        // @ts-expect-error
         node = node.parent;
     }
     return null;

package/dist/utils/rect.d.ts

@@ -1,8 +1,10 @@
+import type { ChartContext } from '../components/ChartContext.svelte';
+import { type Accessor } from './common.js';
 type DimensionGetterOptions = {
     /** Override `x` accessor from context */
-    x?: (item: any) => any;
+    x?: Accessor;
     /** Override `y` accessor from context */
-    y?: (item: any) => any;
+    y?: Accessor;
     groupBy?: string;
     inset?: number;
     groupPadding?: {
@@ -10,7 +12,7 @@ type DimensionGetterOptions = {
         outer?: number;
     };
 };
-export declare function createDimensionGetter(context: any, options?: DimensionGetterOptions): import("svelte/store").Readable<(item: any) => {
+export declare function createDimensionGetter<TData>(context: ChartContext<TData>, options?: DimensionGetterOptions): import("svelte/store").Readable<(item: any) => {
     x: any;
     y: number;
     width: number;