layerchart 0.53.0 → 0.54.1

package/dist/components/Calendar.svelte

@@ -1,46 +1,59 @@
-<script>import {} from 'svelte';
-import { timeDays, timeMonths, timeWeek, timeYear } from 'd3-time';
-import { index } from 'd3-array';
-import { format } from 'date-fns';
-import { chartContext } from './ChartContext.svelte';
-import Rect from './Rect.svelte';
-import MonthPath from './MonthPath.svelte';
-import Text from './Text.svelte';
-import { chartDataArray } from '../utils/common.js';
-export let start;
-export let end;
-/**
- * Size of cell.  If `number`, sets width/height as same value (square).  If array, sets as [width,height].  If undefined, is derived from Chart width/height
- */
-export let cellSize = undefined;
-/** Enable drawing path around each month.  If object, pass as props to underlying <path> */
-export let monthPath = false;
-/**
- * Tooltip context to setup mouse events to show tooltip for related data
- */
-export let tooltip = undefined;
-const { width, height, x, cGet, data, config } = chartContext();
-$: yearDays = timeDays(start, end);
-$: yearMonths = timeMonths(start, end);
-$: yearWeeks = timeWeek.count(start, end);
-$: chartCellWidth = $width / (yearWeeks + 1);
-$: chartCellHeight = $height / 7;
-$: chartCellSize = Math.min(chartCellWidth, chartCellHeight); // Use smallest to fit, and keep square aspect
-$: [cellWidth, cellHeight] = Array.isArray(cellSize)
+<script lang="ts">
+  import { type ComponentProps } from 'svelte';
+  import { timeDays, timeMonths, timeWeek, timeYear } from 'd3-time';
+  import { index } from 'd3-array';
+  import { format } from 'date-fns';
+
+  import { chartContext } from './ChartContext.svelte';
+  import Rect from './Rect.svelte';
+  import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
+  import MonthPath from './MonthPath.svelte';
+  import Text from './Text.svelte';
+  import { chartDataArray } from '../utils/common.js';
+
+  export let start: Date;
+  export let end: Date;
+
+  /**
+   * Size of cell.  If `number`, sets width/height as same value (square).  If array, sets as [width,height].  If undefined, is derived from Chart width/height
+   */
+  export let cellSize: number | [number, number] | undefined = undefined;
+
+  /** Enable drawing path around each month.  If object, pass as props to underlying <path> */
+  export let monthPath: boolean | Partial<ComponentProps<MonthPath>> = false;
+
+  /**
+   * Tooltip context to setup mouse events to show tooltip for related data
+   */
+  export let tooltip: TooltipContextValue | undefined = undefined;
+
+  const { width, height, x, cGet, data, config } = chartContext();
+
+  $: yearDays = timeDays(start, end);
+  $: yearMonths = timeMonths(start, end);
+  $: yearWeeks = timeWeek.count(start, end);
+
+  $: chartCellWidth = $width / (yearWeeks + 1);
+  $: chartCellHeight = $height / 7;
+  $: chartCellSize = Math.min(chartCellWidth, chartCellHeight); // Use smallest to fit, and keep square aspect
+
+  $: [cellWidth, cellHeight] = Array.isArray(cellSize)
     ? cellSize
     : typeof cellSize === 'number'
-        ? [cellSize, cellSize]
-        : [chartCellSize, chartCellSize];
-$: dataByDate = data && $config.x ? index(chartDataArray($data), (d) => $x(d)) : new Map();
-$: cells = yearDays.map((date) => {
+      ? [cellSize, cellSize]
+      : [chartCellSize, chartCellSize];
+
+  $: dataByDate = data && $config.x ? index(chartDataArray($data), (d) => $x(d)) : new Map();
+
+  $: cells = yearDays.map((date) => {
     const cellData = dataByDate.get(date) ?? { date };
     return {
-        x: timeWeek.count(timeYear(date), date) * cellWidth,
-        y: date.getDay() * cellHeight,
-        color: $config.c ? $cGet(cellData) : 'transparent',
-        data: cellData,
+      x: timeWeek.count(timeYear(date), date) * cellWidth,
+      y: date.getDay() * cellHeight,
+      color: $config.c ? $cGet(cellData) : 'transparent',
+      data: cellData,
     };
-});
+  });
 </script>
 
 <slot {cells}>

package/dist/components/Chart.svelte

@@ -1,81 +1,304 @@
-<script generics="TData">import { onMount } from 'svelte';
-import { LayerCake } from 'layercake';
-import { max, min } from 'd3-array';
-import ChartContext from './ChartContext.svelte';
-import GeoContext from './GeoContext.svelte';
-import TooltipContext from './tooltip/TooltipContext.svelte';
-import TransformContext from './TransformContext.svelte';
-import { accessor } from '../utils/common.js';
-import { isScaleBand } from '../utils/scales.js';
-import { geoFitObjectTransform } from '../utils/geo.js';
-export let data = [];
-export let x = undefined;
-export let xRange = undefined;
-export let y = undefined;
-export let yScale = undefined;
-export let yRange = undefined;
-export let x1 = undefined;
-export let x1Scale = undefined;
-export let x1Domain = undefined;
-export let x1Range = undefined;
-export let y1 = undefined;
-export let y1Scale = undefined;
-export let y1Domain = undefined;
-export let y1Range = undefined;
-export let c = undefined;
-export let cScale = undefined;
-export let cDomain = undefined;
-export let cRange = undefined;
-/**
- * x value guaranteed to be visible in xDomain.  Useful with optional negative values since `xDomain={[0, null]}` would ignore negative values
- */
-export let xBaseline = null;
-let xDomain = undefined;
-$: if (xBaseline != null && Array.isArray(data)) {
+<script lang="ts" generics="TData">
+  import { onMount, type ComponentProps } from 'svelte';
+  import { LayerCake } from 'layercake';
+  import type { HierarchyNode } from 'd3-hierarchy';
+  import type { SankeyGraph } from 'd3-sankey';
+  import { max, min } from 'd3-array';
+
+  import ChartContext from './ChartContext.svelte';
+  import GeoContext from './GeoContext.svelte';
+  import TooltipContext from './tooltip/TooltipContext.svelte';
+  import TransformContext from './TransformContext.svelte';
+
+  import { accessor, type Accessor } from '../utils/common.js';
+  import { isScaleBand, type AnyScale, type DomainType } from '../utils/scales.js';
+  import { geoFitObjectTransform } from '../utils/geo.js';
+
+  type LayerCakeProps = ComponentProps<LayerCake>;
+
+  interface $$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?: typeof data;
+
+    /** 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>;
+    /** The x1 accessor. The key in each row of data that corresponds to the x1-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. */
+    x1?: Accessor<TData>;
+    /** The y1 accessor. The key in each row of data that corresponds to the y1-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. */
+    y1?: Accessor<TData>;
+    /** The c (color) accessor. The key in each row of data that corresponds to the color. This can be a string or an accessor function. This property gets converted to a function when you access it through the context. */
+    c?: 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?: DomainType;
+    /** 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?: DomainType;
+    /** 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?: DomainType;
+    /** 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?: DomainType;
+    /** 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. */
+    x1Domain?: DomainType;
+    /** 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. */
+    y1Domain?: DomainType;
+    /** Set the list of color values. */
+    cDomain?: DomainType;
+
+    /** 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;
+
+    /** 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];
+    /** 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];
+    /** 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];
+    /** 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];
+
+    /** 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. @default scaleLinear */
+    xScale?: AnyScale;
+    /** 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. @default scaleLinear */
+    yScale?: AnyScale;
+    /** 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. @default scaleLinear */
+    zScale?: AnyScale;
+    /** 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. @default scaleSqrt */
+    rScale?: AnyScale;
+    /** The D3 scale that should be used for the x1-dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options. @default scaleLinear */
+    x1Scale?: AnyScale;
+    /** The D3 scale that should be used for the y1-dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options. @default scaleLinear */
+    y1Scale?: AnyScale;
+    /** The D3 scale that should be used for the  color dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options. @default scaleOrdinal */
+    cScale?: AnyScale;
+
+    /** 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 [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+    xRange?:
+      | number[]
+      | string[]
+      | ((args: { width: number; height: number }) => number[] | string[]);
+    /** 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 [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+    yRange?:
+      | number[]
+      | string[]
+      | ((args: { width: number; height: number }) => number[] | string[]);
+    /** 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 [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+    zRange?:
+      | number[]
+      | string[]
+      | ((args: { width: number; height: number }) => number[] | string[]);
+    /** 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 [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+    rRange?:
+      | number[]
+      | string[]
+      | ((args: { width: number; height: number }) => number[] | string[]);
+    /** Set the x1 range by setting an array or function with argument `({ xScale, width, height})` that returns an array. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+    x1Range?:
+      | number[]
+      | string[]
+      | ((args: { xScale: AnyScale; width: number; height: number }) => number[] | string[]);
+    /** Set the y1 range by setting an array or function with argument `({ yScale, width, height})` that returns an array. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+    y1Range?:
+      | number[]
+      | string[]
+      | ((args: { yScale: AnyScale; width: number; height: number }) => number[] | string[]);
+    /** Override the default y1 range of `[0, width]` by setting an array or function with argument `({ yScale, width, height})` that returns an array. Setting this prop overrides `x1Reverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+    cRange?: string[] | readonly string[];
+
+    /** 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;
+    /** 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;
+    /** 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;
+
+    /** Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
+    xDomainSort?: boolean;
+    /** Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
+    yDomainSort?: boolean;
+    /** Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
+    zDomainSort?: boolean;
+    /** 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 };
+
+    /** 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];
+    };
+
+    /** 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>;
+
+    /** Enable debug printing to the console. Useful to inspect your scales and dimensions. */
+    debug?: boolean;
+
+    /** 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?: typeof xBaseline;
+
+    /** y value guaranteed to be visible in yDomain.  Useful with optional negative values since `yDomain={[0, null]}` would ignore negative values */
+    yBaseline?: typeof xBaseline;
+
+    /* Props passed to ChartContext */
+    /** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
+    radial?: typeof radial;
+
+    /** Props passed to GeoContext */
+    geo?: typeof geo;
+
+    /** Props passed to TooltipContext */
+    tooltip?: typeof tooltip;
+
+    /** Props passed to TransformContext */
+    transform?: typeof transform;
+
+    /** Expose to support `bind:transformContext` for imperative control (`transformContext.translate(...)`) */
+    transformContext?: typeof transformContext;
+
+    /** Exposed via bind: to support `bind:geoProjection` for external access */
+    geoProjection?: typeof geoProjection;
+
+    /** Exposed via bind: to support `bind:tooltipContext` for external access (ex. `tooltipContext.data) */
+    tooltipContext?: typeof tooltipContext;
+  }
+
+  export let data: TData[] | HierarchyNode<TData> | SankeyGraph<any, any> = [];
+
+  export let x: Accessor<TData> = undefined;
+  export let xRange: $$Props['xRange'] = undefined;
+
+  export let y: Accessor<TData> = undefined;
+  export let yScale: AnyScale | undefined = undefined;
+  export let yRange: $$Props['yRange'] = undefined;
+
+  export let x1: $$Props['x1'] = undefined;
+  export let x1Scale: $$Props['x1Scale'] = undefined;
+  export let x1Domain: $$Props['x1Domain'] = undefined;
+  export let x1Range: $$Props['x1Range'] = undefined;
+
+  export let y1: $$Props['y1'] = undefined;
+  export let y1Scale: $$Props['y1Scale'] = undefined;
+  export let y1Domain: $$Props['y1Domain'] = undefined;
+  export let y1Range: $$Props['y1Range'] = undefined;
+
+  export let c: $$Props['c'] = undefined;
+  export let cScale: $$Props['cScale'] = undefined;
+  export let cDomain: $$Props['cDomain'] = undefined;
+  export let cRange: $$Props['cRange'] = undefined;
+
+  /**
+   * x value guaranteed to be visible in xDomain.  Useful with optional negative values since `xDomain={[0, null]}` would ignore negative values
+   */
+  export let xBaseline: number | null = null;
+
+  let xDomain: [number, number] | undefined = undefined;
+  $: if (xBaseline != null && Array.isArray(data)) {
     const xValues = data.flatMap(accessor(x));
     xDomain = [min([xBaseline, ...xValues]), max([xBaseline, ...xValues])];
-}
-/**
- * y value guaranteed to be visible in yDomain.  Useful with optional negative values since `yDomain={[0, null]}` would ignore negative values
- */
-export let yBaseline = null;
-let yDomain = undefined;
-$: if (yBaseline != null && Array.isArray(data)) {
+  }
+
+  /**
+   * y value guaranteed to be visible in yDomain.  Useful with optional negative values since `yDomain={[0, null]}` would ignore negative values
+   */
+  export let yBaseline: number | null = null;
+
+  let yDomain: [number, number] | undefined = undefined;
+  $: if (yBaseline != null && Array.isArray(data)) {
     const yValues = data.flatMap(accessor(y));
     yDomain = [min([yBaseline, ...yValues]), max([yBaseline, ...yValues])];
-}
-/**
- * Reverse the default y range ([0, height] becomes [height, 0]). By default this is `true` unless using scaleBand y scale.
- * see: https://layercake.graphics/guide#yreverse
- * see: https://github.com/mhkeller/layercake/issues/83
- */
-$: yReverse = yScale ? !isScaleBand(yScale) : true;
-/** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
-export let radial = false;
-/** Props passed to GeoContext */
-export let geo = undefined;
-/** Props passed to TooltipContext */
-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;
-// Track when mounted since LayerCake initializes width/height with `100` until binded `clientWidth`/`clientWidth` can run
-// Useful to key/remount TransformContext with correct `initialTranslate` / `initialScale` values
-let isMounted = false;
-onMount(() => {
+  }
+
+  /**
+   * Reverse the default y range ([0, height] becomes [height, 0]). By default this is `true` unless using scaleBand y scale.
+   * see: https://layercake.graphics/guide#yreverse
+   * see: https://github.com/mhkeller/layercake/issues/83
+   */
+  $: yReverse = yScale ? !isScaleBand(yScale) : true;
+
+  /** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
+  export let radial = false;
+
+  /** Props passed to GeoContext */
+  export let geo: Partial<ComponentProps<GeoContext>> | undefined = undefined;
+
+  /** Props passed to TooltipContext */
+  export let tooltip: Partial<ComponentProps<TooltipContext>> | boolean | undefined = undefined;
+
+  /** Props passed to TransformContext */
+  export let transform: Partial<ComponentProps<TransformContext>> | undefined = undefined;
+  // @ts-expect-error will only be undefined until bind:transformContext runs
+  export let transformContext: TransformContext = undefined;
+
+  /** Expose bound geo projection context */
+  export let geoProjection: ComponentProps<GeoContext>['geo'] = undefined;
+
+  /** Expose bound tooltip context */
+  export let tooltipContext: ComponentProps<TooltipContext>['tooltip'] = undefined;
+
+  // Track when mounted since LayerCake initializes width/height with `100` until bound `clientWidth`/`clientWidth` can run
+  // Useful to key/remount TransformContext with correct `initialTranslate` / `initialScale` values
+  let isMounted = false;
+  onMount(() => {
     isMounted = true;
-});
-// TODO: Hacks until LayerCake has better typings (`Accessor<TData>`)
-$: _x = x;
-$: _y = y;
-$: _yRange =
+  });
+
+  // TODO: Hacks until LayerCake has better typings (`Accessor<TData>`)
+  $: _x = x as LayerCakeProps['x'];
+  $: _y = y as LayerCakeProps['y'];
+  $: _yRange =
     yRange ??
-        (radial
-            ? ({ height }) => [0, height / 2]
-            : undefined);
+    ((radial
+      ? ({ height }: { height: number }) => [0, height / 2]
+      : undefined) as LayerCakeProps['yRange']);
 </script>
 
 <!-- Remove domain sorting by default: https://github.com/mhkeller/layercake/issues/147  -->
@@ -184,7 +407,7 @@ $: _yRange =
       >
         <GeoContext {...geo} bind:geo={geoProjection} let:projection>
           {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
-          <TooltipContext {...tooltipProps} let:tooltip>
+          <TooltipContext {...tooltipProps} bind:tooltip={tooltipContext} let:tooltip>
             <slot
               {aspectRatio}
               {containerHeight}

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

@@ -86,40 +86,40 @@ declare class __sveltets_Render<TData> {
         y1Scale?: AnyScale;
         /** The D3 scale that should be used for the  color dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options. @default scaleOrdinal */
         cScale?: AnyScale;
-        /** 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). */
+        /** 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 [scaleThreshold](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). */
+        /** 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 [scaleThreshold](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). */
+        /** 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 [scaleThreshold](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). */
+        /** 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 [scaleThreshold](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;
-        /** Set the x1 range by setting an array or function with argument `({ xScale, width, height})` that returns an array. 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). */
+        /** Set the x1 range by setting an array or function with argument `({ xScale, width, height})` that returns an array. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
         x1Range?: string[] | number[] | ((args: {
             xScale: AnyScale;
             width: number;
             height: number;
         }) => number[] | string[]) | undefined;
-        /** Set the y1 range by setting an array or function with argument `({ yScale, width, height})` that returns an array. 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). */
+        /** Set the y1 range by setting an array or function with argument `({ yScale, width, height})` that returns an array. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
         y1Range?: string[] | number[] | ((args: {
             yScale: AnyScale;
             width: number;
             height: number;
         }) => number[] | string[]) | undefined;
-        /** Override the default y1 range of `[0, width]` by setting an array or function with argument `({ yScale, width, height})` that returns an array. Setting this prop overrides `x1Reverse`. 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). */
-        cRange?: string[];
+        /** Override the default y1 range of `[0, width]` by setting an array or function with argument `({ yScale, width, height})` that returns an array. Setting this prop overrides `x1Reverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+        cRange?: string[] | readonly string[];
         /** 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 */
@@ -192,6 +192,13 @@ declare class __sveltets_Render<TData> {
             onClick?: ({ data }: {
                 data: any;
             }) => any;
+            tooltip?: import("svelte/store").Writable<{
+                y: number;
+                x: number;
+                data: any;
+                show: (e: PointerEvent, tooltipData?: any) => void;
+                hide: () => void;
+            }>;
         }> | undefined;
         /** Props passed to TransformContext */
         transform?: Partial<{
@@ -242,9 +249,19 @@ declare class __sveltets_Render<TData> {
         }> | undefined;
         /** Expose to support `bind:transformContext` for imperative control (`transformContext.translate(...)`) */
         transformContext?: TransformContext;
+        /** Exposed via bind: to support `bind:geoProjection` for external access */
+        geoProjection?: import("svelte/store").Writable<import("d3-geo").GeoProjection> | undefined;
+        /** Exposed via bind: to support `bind:tooltipContext` for external access (ex. `tooltipContext.data) */
+        tooltipContext?: import("svelte/store").Writable<{
+            y: number;
+            x: number;
+            data: any;
+            show: (e: PointerEvent, tooltipData?: any) => void;
+            hide: () => void;
+        }> | undefined;
     };
     events(): {
-        resize: any;
+        resize: CustomEvent<any>;
         transform: CustomEvent<{
             scale: number;
             translate: {
@@ -264,7 +281,7 @@ declare class __sveltets_Render<TData> {
             containerWidth: number;
             height: number;
             width: number;
-            element: Element;
+            element: Element | undefined;
             projection: import("d3-geo").GeoProjection;
             transform: {
                 scale: number;
@@ -305,28 +322,28 @@ declare class __sveltets_Render<TData> {
             r: Function;
             rScale: any;
             rGet: any;
-            x1: any;
-            x1Scale: any;
-            x1Get: any;
-            y1: any;
-            y1Scale: any;
-            y1Get: any;
-            c: any;
-            cScale: any;
-            cGet: any;
+            x1: (d: any) => any;
+            x1Scale: AnyScale<any, any, any, any> | null;
+            x1Get: Function;
+            y1: (d: any) => any;
+            y1Scale: AnyScale<any, any, any, any> | null;
+            y1Get: Function;
+            c: (d: any) => any;
+            cScale: AnyScale<any, any, any, any> | null;
+            cGet: Function;
             padding: {
                 top: number;
                 right: number;
                 bottom: number;
                 left: number;
             } & {
-                top?: number | undefined;
-                right?: number | undefined;
-                bottom?: number | undefined;
-                left?: number | undefined;
+                top?: number;
+                right?: number;
+                bottom?: number;
+                left?: number;
             };
-            data: any;
-            flatData: any;
+            data: unknown[] | SankeyGraph<any, any> | HierarchyNode<unknown>;
+            flatData: import("svelte/store").Readable<unknown[] | SankeyGraph<any, any> | HierarchyNode<unknown>>;
             config: any;
         };
     };