layerchart 0.42.0 → 0.43.0

package/dist/components/Chart.svelte

@@ -16,31 +16,15 @@ export const Svg = _Svg;
 export const WebGL = _WebGL;
 </script>
 
-<script>import { onMount } from 'svelte';
+<script generics="TData">import { accessor } from '../index.js/utils/common.js';
+import { onMount } from 'svelte';
 import { max, min } from 'd3-array';
-import { get } from 'lodash-es';
 import { isScaleBand } from '../utils/scales.js';
+import ChartContext from './ChartContext.svelte';
 import GeoContext from './GeoContext.svelte';
 import TooltipContext from './TooltipContext.svelte';
 import TransformContext from './TransformContext.svelte';
 import { geoFitObjectTransform } from '../utils/geo.js';
-/**
- *  Resolve a value from data based on the accessor type
- */
-function getValue(accessor, d) {
-    if (Array.isArray(accessor)) {
-        return accessor.map((a) => getValue(a, d));
-    }
-    else if (typeof accessor === 'function') {
-        return accessor(d) || 0;
-    }
-    else if (typeof accessor === 'string') {
-        return get(d, accessor);
-    }
-    else {
-        throw new Error('Unexpected accessor: ' + accessor);
-    }
-}
 export let data = [];
 export let x = undefined;
 export let y = undefined;
@@ -50,8 +34,8 @@ export let yScale = undefined;
  */
 export let xBaseline = null;
 let xDomain = undefined;
-$: if (xBaseline != null) {
-    const xValues = data.flatMap((d) => getValue(x, d));
+$: if (xBaseline != null && Array.isArray(data)) {
+    const xValues = data.flatMap(accessor(x));
     xDomain = [min([xBaseline, ...xValues]), max([xBaseline, ...xValues])];
 }
 /**
@@ -59,8 +43,8 @@ $: if (xBaseline != null) {
  */
 export let yBaseline = null;
 let yDomain = undefined;
-$: if (yBaseline != null) {
-    const yValues = data.flatMap((d) => getValue(y, d));
+$: if (yBaseline != null && Array.isArray(data)) {
+    const yValues = data.flatMap(accessor(y));
     yDomain = [min([yBaseline, ...yValues]), max([yBaseline, ...yValues])];
 }
 /**
@@ -75,6 +59,7 @@ export let geo = undefined;
 export let tooltip = undefined;
 /** Props passed to TransformContext */
 export let transform = undefined;
+// @ts-expect-error will only be undefined until bind:transformContext runs
 export let transformContext = undefined;
 // Binded for access within TransformContext
 let geoProjection = undefined;
@@ -110,8 +95,6 @@ onMount(() => {
   let:rScale
   let:rGet
   let:padding
-  let:data
-  let:flatData
 >
   <!-- Apply `fitGeojson` using TransformContext instead of GeoContext if `applyTransform` is used -->
   {@const initialTransform =
@@ -119,65 +102,68 @@ onMount(() => {
       ? geoFitObjectTransform(geo.projection(), [width, height], geo.fitGeojson)
       : undefined}
 
-  {#key isMounted}
-    <TransformContext
-      bind:this={transformContext}
-      mode={transform?.mode ?? geo?.applyTransform?.length ? 'manual' : 'none'}
-      initialTranslate={initialTransform?.translate}
-      initialScale={initialTransform?.scale}
-      processTranslate={geo
-        ? (x, y, deltaX, deltaY, scale) => {
-            if (geo.applyTransform?.includes('rotate')) {
-              // When applying transform to rotate, invert `y` values and reduce sensitivity based on projection scale
-              // see: https://observablehq.com/@benoldenburg/simple-globe and https://observablehq.com/@michael-keith/draggable-globe-in-d3
-              const projectionScale = $geoProjection.scale();
-              const sensitivity = 75;
-              return {
-                x: x + deltaX * (sensitivity / projectionScale),
-                y: y + deltaY * (sensitivity / projectionScale) * -1,
-              };
-            } else if (geo.applyTransform?.includes('translate')) {
-              // When applying to `translate`, use pointer values as is (with no `scale` adjustment)
-              return { x: x + deltaX, y: y + deltaY };
-            } else {
-              // Apply default TransformContext.processTransform (passing `undefined` below appears to not work when checking for `geo?.applyTransform` exists)
-              return { x: x + deltaX / scale, y: y + deltaY / scale };
+  <ChartContext {data} let:data let:flatData>
+    {#key isMounted}
+      <TransformContext
+        bind:this={transformContext}
+        mode={transform?.mode ?? geo?.applyTransform?.length ? 'manual' : 'none'}
+        initialTranslate={initialTransform?.translate}
+        initialScale={initialTransform?.scale}
+        processTranslate={geo
+          ? (x, y, deltaX, deltaY, scale) => {
+              if (geo.applyTransform?.includes('rotate')) {
+                // When applying transform to rotate, invert `y` values and reduce sensitivity based on projection scale
+                // see: https://observablehq.com/@benoldenburg/simple-globe and https://observablehq.com/@michael-keith/draggable-globe-in-d3
+                // @ts-expect-error
+                const projectionScale = $geoProjection.scale();
+                const sensitivity = 75;
+                return {
+                  x: x + deltaX * (sensitivity / projectionScale),
+                  y: y + deltaY * (sensitivity / projectionScale) * -1,
+                };
+              } else if (geo.applyTransform?.includes('translate')) {
+                // When applying to `translate`, use pointer values as is (with no `scale` adjustment)
+                return { x: x + deltaX, y: y + deltaY };
+              } else {
+                // Apply default TransformContext.processTransform (passing `undefined` below appears to not work when checking for `geo?.applyTransform` exists)
+                return { x: x + deltaX / scale, y: y + deltaY / scale };
+              }
             }
-          }
-        : undefined}
-      {...transform}
-      let:transform={_transform}
-      on:transform
-      on:dragstart
-      on:dragend
-    >
-      <GeoContext {...geo} bind:geo={geoProjection} let:projection>
-        {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
-        <TooltipContext {...tooltipProps} let:tooltip>
-          <slot
-            {aspectRatio}
-            {containerHeight}
-            {containerWidth}
-            {height}
-            {width}
-            {element}
-            {projection}
-            transform={_transform}
-            {tooltip}
-            {xScale}
-            {xGet}
-            {yScale}
-            {yGet}
-            {zScale}
-            {zGet}
-            {rScale}
-            {rGet}
-            {padding}
-            {data}
-            {flatData}
-          />
-        </TooltipContext>
-      </GeoContext>
-    </TransformContext>
-  {/key}
+          : undefined}
+        {...transform}
+        let:transform={_transform}
+        on:transform
+        on:dragstart
+        on:dragend
+      >
+        <GeoContext {...geo} bind:geo={geoProjection} let:projection>
+          {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
+          <TooltipContext {...tooltipProps} let:tooltip>
+            <slot
+              {aspectRatio}
+              {containerHeight}
+              {containerWidth}
+              {height}
+              {width}
+              {element}
+              {projection}
+              transform={_transform}
+              {tooltip}
+              {xScale}
+              {xGet}
+              {yScale}
+              {yGet}
+              {zScale}
+              {zGet}
+              {rScale}
+              {rGet}
+              {padding}
+              {data}
+              {flatData}
+            />
+          </TooltipContext>
+        </GeoContext>
+      </TransformContext>
+    {/key}
+  </ChartContext>
 </LayerCake>

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

@@ -7,25 +7,217 @@ export declare const Canvas: typeof _Canvas;
 export declare const Html: typeof _Html;
 export declare const Svg: typeof _Svg;
 export declare const WebGL: typeof _WebGL;
-import { type ComponentProps } from 'svelte';
-import GeoContext from './GeoContext.svelte';
-import TooltipContext from './TooltipContext.svelte';
+import { type Accessor } from '../index.js/utils/common.js';
+import type { HierarchyNode } from 'd3-hierarchy';
+import type { SankeyGraph } from 'd3-sankey';
+import { type AnyScale } from '../utils/scales.js';
 import TransformContext from './TransformContext.svelte';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        data?: any[];
-        x?: (string | number | ((d: any) => number)) | (string | number | ((d: any) => number))[] | undefined;
-        y?: (string | number | ((d: any) => number)) | (string | number | ((d: any) => number))[] | undefined;
-        yScale?: Function | undefined;
+declare class __sveltets_Render<TData> {
+    props(): {
+        /** Whether this chart should be rendered server side. @default false */
+        ssr?: boolean;
+        /** Whether to allow pointer events via CSS. Set this to `false` to set `pointer-events: none;` on all components, disabling all mouse interaction. @default true */
+        pointerEvents?: boolean;
+        /** Determine the positioning of the wrapper div. Set this to `'absolute'` when you want to stack cakes. @default 'relative' */
+        position?: string;
+        /** If `true`, set all scale ranges to `[0, 100]`. Ranges reversed via `xReverse`, `yReverse`, `zReverse` or `rReverse` props will continue to be reversed as usual. @default false */
+        percentRange?: boolean;
+        /** Override the automated width.  */
+        width?: number;
+        /** Override the automated height.  */
+        height?: number;
+        /** The bound container width. */
+        containerWidth?: number;
+        /**The bound container height. */
+        containerHeight?: number;
+        /**	The .layercake-container `<div>` tag. Useful for bindings. */
+        element?: HTMLDivElement;
+        /** If `data` is not a flat array of objects and you want to use any of the scales, set a flat version of the data via the `flatData` prop. */
+        data?: SankeyGraph<any, any> | TData[] | HierarchyNode<TData> | undefined;
+        /** A flat version of data. */
+        flatData?: any[];
+        /** The x accessor. The key in each row of data that corresponds to the x-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context. */
+        x?: Accessor<TData>;
+        /** The y accessor. The key in each row of data that corresponds to the y-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context. */
+        y?: Accessor<TData>;
+        /** The z accessor. The key in each row of data that corresponds to the z-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context. */
+        z?: Accessor<TData>;
+        /** The r accessor. The key in each row of data that corresponds to the r-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context. */
+        r?: Accessor<TData>;
+        /** Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`. This value can also be an array because sometimes your scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales), useful for color series. Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values. */
+        xDomain?: Function | string[] | [number | Date | null, number | Date | null] | (number | null)[] | Date[] | null[] | null;
+        /** Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`.  Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values. */
+        yDomain?: Function | string[] | [number | Date | null, number | Date | null] | (number | null)[] | Date[] | null[] | null;
+        /** Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`. This value can also be an array because sometimes your scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales), useful for color series. Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values. */
+        zDomain?: Function | string[] | [number | Date | null, number | Date | null] | (number | null)[] | Date[] | null[] | null;
+        /** Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`. This value can also be an array because sometimes your scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales), useful for color series. Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values. */
+        rDomain?: Function | string[] | [number | Date | null, number | Date | null] | (number | null)[] | Date[] | null[] | null;
+        /** Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the x domain. @default false */
+        xNice?: boolean | number;
+        /** Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the y domain. @default false */
+        yNice?: boolean | number;
+        /**  Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the z domain. @default false */
+        zNice?: boolean | number;
+        /**  Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the r domain. @default false */
+        rNice?: boolean | number;
+        /** @type Assign a pixel value to add to the min or max of the scale. This will increase the scales domain by the scale unit equivalent of the provided pixels. */
+        xPadding?: [number, number];
+        /** @type Assign a pixel value to add to the min or max of the scale. This will increase the scales domain by the scale unit equivalent of the provided pixels. */
+        yPadding?: [number, number];
+        /** @type Assign a pixel value to add to the min or max of the scale. This will increase the scales domain by the scale unit equivalent of the provided pixels. */
+        zPadding?: [number, number];
+        /** @type Assign a pixel value to add to the min or max of the scale. This will increase the scales domain by the scale unit equivalent of the provided pixels. */
+        rPadding?: [number, number];
+        /** @type {Function} [xScale=d3.scaleLinear] The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options. */
+        xScale?: AnyScale;
+        /** @type {Function} [yScale=d3.scaleLinear] The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options. */
+        yScale?: AnyScale;
+        /** @type {Function} [zScale=d3.scaleLinear] The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options. */
+        zScale?: AnyScale;
+        /** @type {Function} [rScale=d3.scaleSqrt] The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options. */
+        rScale?: AnyScale;
+        /** @type Override the default x range of `[0, width]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `xReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+        xRange?: string[] | number[] | ((args: {
+            width: number;
+            height: number;
+        }) => number[] | string[]) | undefined;
+        /** Override the default y range of `[0, height]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `yReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+        yRange?: string[] | number[] | ((args: {
+            width: number;
+            height: number;
+        }) => number[] | string[]) | undefined;
+        /** Override the default z range of `[0, width]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `zReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+        zRange?: string[] | number[] | ((args: {
+            width: number;
+            height: number;
+        }) => number[] | string[]) | undefined;
+        /** Override the default r range of `[1, 25]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `rReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+        rRange?: string[] | number[] | ((args: {
+            width: number;
+            height: number;
+        }) => number[] | string[]) | undefined;
+        /** Reverse the default x range. By default this is `false` and the range is `[0, width]`. Ignored if you set the xRange prop. @default false */
+        xReverse?: boolean;
+        /** Reverse the default y range. By default this is `true` and the range is `[height, 0]` unless using an ordinal scale with a `.bandwidth` method for `yScale`. Ignored if you set the `yRange` prop. @default true */
+        yReverse?: boolean;
+        /** @type {Boolean} [zReverse=false] Reverse the default z range. By default this is `false` and the range is `[0, width]`. Ignored if you set the zRange prop. @default false */
+        zReverse?: boolean;
+        /** @type {Boolean} [rReverse=false] Reverse the default r range. By default this is `false` and the range is `[1, 25]`. Ignored if you set the rRange prop. @default false */
+        rReverse?: boolean;
+        /** @type {Boolean} [xDomainSort=true] Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
+        xDomainSort?: boolean;
+        /** @type {Boolean} [yDomainSort=true] Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
+        yDomainSort?: boolean;
+        /** @type {Boolean} [zDomainSort=true] Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
+        zDomainSort?: boolean;
+        /** @type {Boolean} [rDomainSort=true] Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
+        rDomainSort?: boolean;
+        /** The amount of padding to put around your chart. It operates like CSS box-sizing: border-box; where values are subtracted from the parent container's width and height, the same as a [D3 margin convention](https://bl.ocks.org/mbostock/3019563). */
+        padding?: {
+            top?: Number;
+            right?: Number;
+            bottom?: Number;
+            left?: Number;
+        } | undefined;
+        /** Manually set the extents of the x, y or r scale as a two-dimensional array of the min and max you want. Setting values here will skip any dynamic extent calculation of the data for that dimension. */
+        extents?: {
+            x?: [min: Number, max: Number];
+            y?: [min: Number, max: Number];
+            r?: [min: Number, max: Number];
+            z?: [min: Number, max: Number];
+        } | undefined;
+        /** Any extra configuration values you want available on the LayerCake context. This could be useful for color lookups or additional constants. */
+        custom?: Record<string, any>;
+        /** @type {Boolean} debug Enable debug printing to the console. Useful to inspect your scales and dimensions. */
+        debug?: boolean;
+        /** @type {Boolean} [verbose=true] Show warnings in the console. */
+        verbose?: boolean;
+        /** x value guaranteed to be visible in xDomain.  Useful with optional negative values since `xDomain={[0, null]}` would ignore negative values */
         xBaseline?: number | null;
+        /** y value guaranteed to be visible in yDomain.  Useful with optional negative values since `yDomain={[0, null]}` would ignore negative values */
         yBaseline?: number | null;
-        geo?: Partial<ComponentProps<GeoContext>> | undefined;
-        tooltip?: Partial<ComponentProps<TooltipContext>> | boolean | undefined;
-        transform?: Partial<ComponentProps<TransformContext>> | undefined;
+        /** Props passed to GeoContext */
+        geo?: Partial<{
+            projection?: (() => import("d3-geo").GeoProjection) | undefined;
+            fitGeojson?: import("d3-geo").GeoPermissibleObjects | undefined;
+            fixedAspectRatio?: number | undefined;
+            clipAngle?: number | undefined;
+            clipExtent?: [[number, number], [number, number]] | undefined;
+            rotate?: {
+                yaw: number;
+                pitch: number;
+                roll: number;
+            } | undefined;
+            scale?: number | undefined;
+            translate?: [number, number] | undefined;
+            center?: [number, number] | undefined;
+            applyTransform?: ("scale" | "translate" | "rotate")[];
+            reflectX?: boolean | undefined;
+            reflectY?: boolean | undefined;
+            geo?: import("svelte/store").Writable<import("d3-geo").GeoProjection>;
+        }> | undefined;
+        /** Props passed to TooltipContext */
+        tooltip?: boolean | Partial<{
+            mode?: "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree" | "manual";
+            findTooltipData?: "closest" | "left" | "right";
+            raiseTarget?: boolean;
+            radius?: number;
+            debug?: boolean;
+            onClick?: ({ data }: {
+                data: any;
+            }) => any;
+        }> | undefined;
+        /** Props passed to TransformContext */
+        transform?: Partial<{
+            mode?: "none" | "canvas" | "manual";
+            translateOnScale?: boolean;
+            spring?: boolean | Parameters<typeof import("../stores/motionStore").motionStore>[1]["spring"];
+            tweened?: boolean | Parameters<typeof import("../stores/motionStore").motionStore>[1]["tweened"];
+            processTranslate?: (x: number, y: number, deltaX: number, deltaY: number, scale: number) => {
+                x: number;
+                y: number;
+            };
+            disablePointer?: boolean;
+            initialScrollMode?: "none" | "scale" | "translate";
+            clickDistance?: number;
+            initialTranslate?: {
+                x: number;
+                y: number;
+            } | undefined;
+            translate?: import("svelte/motion").Spring<{
+                x: number;
+                y: number;
+            }> | import("svelte/motion").Tweened<{
+                x: number;
+                y: number;
+            }> | import("svelte/store").Writable<{
+                x: number;
+                y: number;
+            }>;
+            initialScale?: number | undefined;
+            scale?: import("svelte/motion").Spring<number> | import("svelte/motion").Tweened<number> | import("svelte/store").Writable<number>;
+            setScrollMode?: (mode: "none" | "scale" | "translate") => void;
+            reset?: () => void;
+            zoomIn?: () => void;
+            zoomOut?: () => void;
+            translateCenter?: () => void;
+            zoomTo?: (center: {
+                x: number;
+                y: number;
+            }, rect?: {
+                width: number;
+                height: number;
+            }) => void;
+            setTranslate?: (point: {
+                x: number;
+                y: number;
+            }, options?: import("../stores/motionStore").MotionOptions) => void;
+            setScale?: (value: number, options?: import("../stores/motionStore").MotionOptions) => void;
+        }> | undefined;
+        /** Expose to support `bind:transformContext` for imperative control (`transformContext.translate(...)`) */
         transformContext?: TransformContext;
     };
-    events: {
+    events(): {
         transform: CustomEvent<{
             scale: number;
             translate: {
@@ -38,7 +230,7 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
+    slots(): {
         default: {
             aspectRatio: number;
             containerHeight: number;
@@ -46,7 +238,7 @@ declare const __propDef: {
             height: number;
             width: number;
             element: Element;
-            projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform;
+            projection: import("d3-geo").GeoProjection;
             transform: {
                 scale: number;
                 setScale: (value: number, options?: import("../stores/motionStore").MotionOptions) => void;
@@ -70,7 +262,7 @@ declare const __propDef: {
             tooltip: {
                 y: number;
                 x: number;
-                data: null;
+                data: any;
                 show: (e: PointerEvent, tooltipData?: any) => void;
                 hide: () => void;
             };
@@ -93,14 +285,14 @@ declare const __propDef: {
                 bottom?: number | undefined;
                 left?: number | undefined;
             };
-            data: Object | any[];
-            flatData: any[];
+            data: unknown[] | SankeyGraph<any, any> | HierarchyNode<unknown>;
+            flatData: import("svelte/store").Readable<unknown[] | HierarchyNode<unknown>>;
         };
     };
-};
-export type ChartProps = typeof __propDef.props;
-export type ChartEvents = typeof __propDef.events;
-export type ChartSlots = typeof __propDef.slots;
-export default class Chart extends SvelteComponentTyped<ChartProps, ChartEvents, ChartSlots> {
+}
+export type ChartProps<TData> = ReturnType<__sveltets_Render<TData>['props']>;
+export type ChartEvents<TData> = ReturnType<__sveltets_Render<TData>['events']>;
+export type ChartSlots<TData> = ReturnType<__sveltets_Render<TData>['slots']>;
+export default class Chart<TData> extends SvelteComponentTyped<ChartProps<TData>, ChartEvents<TData>, ChartSlots<TData>> {
 }
 export {};

package/dist/components/ChartClipPath.svelte

@@ -1,15 +1,15 @@
-<script>import { getContext } from 'svelte';
+<script>import { chartContext } from './ChartContext.svelte';
 import RectClipPath from './RectClipPath.svelte';
-const { width, height, padding } = getContext('LayerCake');
+const { width, height, padding } = chartContext();
 /** Include padding area (ex. axis) */
 export let full = false;
 </script>
 
 <RectClipPath
-  x={full ? -$padding.left : 0}
-  y={full ? -$padding.top : 0}
-  width={$width + (full ? $padding.left + $padding.right : 0)}
-  height={$height + (full ? $padding.top + $padding.bottom : 0)}
+  x={full && $padding.left ? -$padding.left : 0}
+  y={full && $padding.top ? -$padding.top : 0}
+  width={$width + (full ? ($padding?.left ?? 0) + ($padding?.right ?? 0) : 0)}
+  height={$height + (full ? ($padding?.top ?? 0) + ($padding?.bottom ?? 0) : 0)}
   on:click
   {...$$restProps}
 >

package/dist/components/ChartContext.svelte

@@ -0,0 +1,19 @@
+<!-- Wrapper to allow getting LayerCake context from <Chart> and exposing with a strongly type context getter -->
+<script context="module">import { getContext, setContext } from 'svelte';
+import {} from 'svelte/store';
+export const chartContextKey = Symbol();
+export function chartContext() {
+    return getContext(chartContextKey);
+}
+function setChartContext(context) {
+    setContext(chartContextKey, context);
+}
+</script>
+
+<script generics="TData">const layerCakeContext = getContext('LayerCake');
+setChartContext(layerCakeContext);
+// Added to try to pass TData downward
+export let data = []; // Same as `ComponentProps<Chart<TData>>` but causes circular reference
+</script>
+
+<slot {data} flatData={layerCakeContext.data} />

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

@@ -0,0 +1,89 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AnyScale } from '../index.js/utils/scales.js';
+import type { HierarchyNode } from 'd3-hierarchy';
+import { type Readable } from 'svelte/store';
+export declare const chartContextKey: unique symbol;
+type LayerCakeContext<TData> = {
+    activeGetters: Readable<{
+        x: (d: TData) => any;
+        y: (d: TData) => any;
+        z: (d: TData) => any;
+        r: (d: TData) => any;
+    }>;
+    width: Readable<number>;
+    height: Readable<number>;
+    percentRange: Readable<boolean>;
+    aspectRatio: Readable<number>;
+    containerWidth: Readable<number>;
+    containerHeight: Readable<number>;
+    x: Readable<(d: TData) => any>;
+    y: Readable<(d: TData) => any>;
+    z: Readable<(d: TData) => any>;
+    r: Readable<(d: TData) => any>;
+    custom: Readable<Object>;
+    data: Readable<TData[] | HierarchyNode<TData>>;
+    xNice: Readable<number | boolean>;
+    yNice: Readable<number | boolean>;
+    zNice: Readable<number | boolean>;
+    rNice: Readable<number | boolean>;
+    xDomainSort: Readable<boolean>;
+    yDomainSort: Readable<boolean>;
+    zDomainSort: Readable<boolean>;
+    rDomainSort: Readable<boolean>;
+    xReverse: Readable<boolean>;
+    yReverse: Readable<boolean>;
+    zReverse: Readable<boolean>;
+    rReverse: Readable<boolean>;
+    xPadding: Readable<[number, number]>;
+    yPadding: Readable<[number, number]>;
+    zPadding: Readable<[number, number]>;
+    rPadding: Readable<[number, number]>;
+    padding: Readable<{
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    }>;
+    flatData: Readable<TData[]>;
+    extents: Readable<{}>;
+    xDomain: Readable<any>;
+    yDomain: Readable<any>;
+    zDomain: Readable<any>;
+    rDomain: Readable<any>;
+    xRange: Readable<any>;
+    yRange: Readable<any>;
+    zRange: Readable<any>;
+    rRange: Readable<any>;
+    config: Readable<any>;
+    xScale: Readable<AnyScale>;
+    xGet: Readable<any>;
+    yScale: Readable<AnyScale>;
+    yGet: Readable<any>;
+    zScale: Readable<AnyScale>;
+    zGet: Readable<any>;
+    rScale: Readable<AnyScale>;
+    rGet: Readable<any>;
+};
+export type ChartContext<TData> = LayerCakeContext<TData> & {};
+export declare function chartContext<TData = any>(): ChartContext<TData>;
+import type { SankeyGraph } from 'd3-sankey';
+declare class __sveltets_Render<TData> {
+    props(): {
+        data?: SankeyGraph<any, any> | TData[] | HierarchyNode<TData> | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {
+            data: SankeyGraph<any, any> | TData[] | HierarchyNode<TData>;
+            flatData: Readable<TData[] | HierarchyNode<TData>>;
+        };
+    };
+}
+export type ChartContextProps<TData> = ReturnType<__sveltets_Render<TData>['props']>;
+export type ChartContextEvents<TData> = ReturnType<__sveltets_Render<TData>['events']>;
+export type ChartContextSlots<TData> = ReturnType<__sveltets_Render<TData>['slots']>;
+export default class ChartContext<TData> extends SvelteComponentTyped<ChartContextProps<TData>, ChartContextEvents<TData>, ChartContextSlots<TData>> {
+}
+export {};

package/dist/components/Circle.svelte

@@ -19,6 +19,7 @@ $: tick().then(() => {
 });
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <circle
   cx={$tweened_cx}
   cy={$tweened_cy}

package/dist/components/ClipPath.svelte

@@ -21,6 +21,7 @@ export let disabled = false;
   {#if disabled}
     <slot />
   {:else}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <g style:clip-path="url(#{id})" on:click on:pointermove on:pointerleave on:keydown>
       <slot {id} url="url(#{id})" {useId} />
     </g>