diff --git a/src/_components/Beeswarm.svelte b/src/_components/Beeswarm.svelte
index 9f348c61..2f5f6091 100644
--- a/src/_components/Beeswarm.svelte
+++ b/src/_components/Beeswarm.svelte
@@ -19,7 +19,7 @@
/** @type {Number} [spacing=1.5] - Whitespace padding between each circle, in pixels */
export let spacing = 1.5;
- /** @type {Function} [getTitle] — An accessor function to get the field on the data element to display as a hover label using a `` tag. */
+ /** @type {Function|undefined} [getTitle] — An accessor function to get the field on the data element to display as a hover label using a `<title>` tag. */
export let getTitle = undefined;
$: circles = dodge($data, { rds: r * 2 + spacing + strokeWidth, x: $xGet });
diff --git a/src/_components/BeeswarmForce.html.svelte b/src/_components/BeeswarmForce.html.svelte
index eb3d7600..206c1bdb 100644
--- a/src/_components/BeeswarmForce.html.svelte
+++ b/src/_components/BeeswarmForce.html.svelte
@@ -25,7 +25,7 @@
/** @type {Number} [yStrength=0.075] - The value passed into the `.strength` method on `forceY`, which is used as the `'y'` property on the simulation. See [the documentation](https://github.com/d3/d3-force#y_strength) for more. */
export let yStrength = 0.075;
- /** @type {Function} [getTitle] — An accessor function to get the field on the data element to display as a hover label. Mostly useful for debugging, needs better styling for production. */
+ /** @type {Function|undefined} [getTitle] — An accessor function to get the field on the data element to display as a hover label. Mostly useful for debugging, needs better styling for production. */
export let getTitle = undefined;
$: simulation = forceSimulation(nodes)
diff --git a/src/_components/BeeswarmForce.svelte b/src/_components/BeeswarmForce.svelte
index 09ccf5a0..7e5ac18c 100644
--- a/src/_components/BeeswarmForce.svelte
+++ b/src/_components/BeeswarmForce.svelte
@@ -25,7 +25,7 @@
/** @type {Number} [yStrength=0.075] - The value passed into the `.strength` method on `forceY`. See [the documentation](https://github.com/d3/d3-force#y_strength). */
export let yStrength = 0.075;
- /** @type {Function} [getTitle] — An accessor function to get the field on the data element to display as a hover label using a `<title>` tag. */
+ /** @type {Function|undefined} [getTitle] — An accessor function to get the field on the data element to display as a hover label using a `<title>` tag. */
export let getTitle = undefined;
$: simulation = forceSimulation(nodes)
diff --git a/src/_components/CirclePack.html.svelte b/src/_components/CirclePack.html.svelte
index b116c913..4359cd83 100644
--- a/src/_components/CirclePack.html.svelte
+++ b/src/_components/CirclePack.html.svelte
@@ -12,7 +12,7 @@
/** @type {String} [idKey='id'] - The key on each object where the id value lives. */
export let idKey = 'id';
- /** @type {String} [parentKey] - Set this if you want to define one parent circle. This will give you a [nested](https://layercake.graphics/example/CirclePackNested) graphic versus a [grouping of circles](https://layercake.graphics/example/CirclePack). */
+ /** @type {String|undefined} [parentKey] - Set this if you want to define one parent circle. This will give you a [nested](https://layercake.graphics/example/CirclePackNested) graphic versus a [grouping of circles](https://layercake.graphics/example/CirclePack). */
export let parentKey = undefined;
/** @type {String} [valueKey='value'] - The key on each object where the data value lives. */
diff --git a/src/_components/CirclePackForce.svelte b/src/_components/CirclePackForce.svelte
index 1012f077..aca57ece 100644
--- a/src/_components/CirclePackForce.svelte
+++ b/src/_components/CirclePackForce.svelte
@@ -14,7 +14,7 @@
/** @type {Number} [xStrength=0.1] - The value passed into the `.strength` method on `forceX`, which is used as the `'x'` property on the simulation. See [the documentation](https://github.com/d3/d3-force#x_strength) for more. */
export let xStrength = 0.1;
- /** @type {String} [nodeColor] Set a color manually otherwise it will default to the `zScale`. */
+ /** @type {String|undefined} [nodeColor] Set a color manually otherwise it will default to the `zScale`. */
export let nodeColor = undefined;
/** @type {String} [nodeStroke='#fff'] - The circle's stroke color. */
diff --git a/src/_components/Key.html.svelte b/src/_components/Key.html.svelte
index a1e27ed9..7097b57e 100644
--- a/src/_components/Key.html.svelte
+++ b/src/_components/Key.html.svelte
@@ -11,7 +11,7 @@
/** @type {String} [align='start'] - Sets the CSS flexbox justify-content setting for the box as a whole. Can be 'start', 'center' or 'end'. */
export let align = 'start';
- /** @type {Function|Object} [lookup] - Either a function that takes the value and returns a formatted string, or an object of values. If a given value is not present in a lookup object, it returns the original value. */
+ /** @type {Function|Object|undefined} [lookup] - Either a function that takes the value and returns a formatted string, or an object of values. If a given value is not present in a lookup object, it returns the original value. */
export let lookup = undefined;
/** @type {Boolean} [capitalize=true] - Capitalize the first character. */
diff --git a/src/_components/Labels.html.svelte b/src/_components/Labels.html.svelte
index 95d7bb15..772bd1aa 100644
--- a/src/_components/Labels.html.svelte
+++ b/src/_components/Labels.html.svelte
@@ -7,7 +7,7 @@
const { xGet, yGet } = getContext('LayerCake');
- /** @type {Array} labels - An array of objects that contain a field containing text label and data fields. */
+ /** @type {Array<Object>} labels - An array of objects that contain a field containing text label and data fields. */
export let labels;
/** @type {Function} getLabelName= - An accessor function to return the label field on your objects in the `labels` array. */
diff --git a/src/_components/Map.canvas.svelte b/src/_components/Map.canvas.svelte
index 3f372975..40112868 100644
--- a/src/_components/Map.canvas.svelte
+++ b/src/_components/Map.canvas.svelte
@@ -20,10 +20,10 @@
/** @type {Number} [strokeWidth=1] - The shape's stroke width. */
export let strokeWidth = 1;
- /** @type {String} [fill] - The shape's fill color. By default, the fill will be determined by the z-scale, unless this prop is set. */
+ /** @type {String|undefined} [fill] - The shape's fill color. By default, the fill will be determined by the z-scale, unless this prop is set. */
export let fill = undefined;
- /** @type {Array} [features] - A list of GeoJSON features. Use this if you want to draw a subset of the features in `$data` while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in `$data.features` if left unset. */
+ /** @type {Array|undefined} [features] - A list of GeoJSON features. Use this if you want to draw a subset of the features in `$data` while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in `$data.features` if left unset. */
export let features = undefined;
$: projectionFn = projection().fitSize([$width, $height], $data);
diff --git a/src/_components/Map.svg.svelte b/src/_components/Map.svg.svelte
index 0e4c8ba9..6092a7a8 100644
--- a/src/_components/Map.svg.svelte
+++ b/src/_components/Map.svg.svelte
@@ -12,10 +12,10 @@
/** @type {Function} projection - A D3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */
export let projection;
- /** @type {Number} [fixedAspectRatio] - By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here. */
+ /** @type {Number|undefined} [fixedAspectRatio] - By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here. */
export let fixedAspectRatio = undefined;
- /** @type {String} [fill] - The shape's fill color. By default, the fill will be determined by the z-scale, unless this prop is set. */
+ /** @type {String|undefined} [fill] - The shape's fill color. By default, the fill will be determined by the z-scale, unless this prop is set. */
export let fill = undefined;
/** @type {String} [stroke='#333'] - The shape's stroke color. */
@@ -24,7 +24,7 @@
/** @type {Number} [strokeWidth=0.5] - The shape's stroke width. */
export let strokeWidth = 0.5;
- /** @type {Array} [features] - A list of GeoJSON features. Use this if you want to draw a subset of the features in `$data` while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in `$data.features` if left unset. */
+ /** @type {Array<Object>|undefined} [features] - A list of GeoJSON features. Use this if you want to draw a subset of the features in `$data` while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in `$data.features` if left unset. */
export let features = undefined;
/* --------------------------------------------
diff --git a/src/_components/MapLabels.html.svelte b/src/_components/MapLabels.html.svelte
index 8c2c6441..935bd35e 100644
--- a/src/_components/MapLabels.html.svelte
+++ b/src/_components/MapLabels.html.svelte
@@ -10,7 +10,7 @@
/** @type {Function} projection - A D3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */
export let projection;
- /** @type {Number} [fixedAspectRatio] - By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here. */
+ /** @type {Number|undefined} [fixedAspectRatio] - By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here. */
export let fixedAspectRatio = undefined;
/** @type {Function} getLabel - An accessor function to get the field to display. */
@@ -19,7 +19,7 @@
/** @type {Function} [getCoordinates=d => d.geometry.coordinates] - An accessor function to get the `[x, y]` coordinate field. Defaults to a GeoJSON feature format. */
export let getCoordinates;
- /** @type {Array} [features] - A list of labels as GeoJSON features. If unset, the plotted features will defaults to those in `$data.features`, assuming this field a list of GeoJSON features. */
+ /** @type {Array<Object>|undefined} [features] - A list of labels as GeoJSON features. If unset, the plotted features will defaults to those in `$data.features`, assuming this field a list of GeoJSON features. */
export let features = undefined;
$: fitSizeRange = fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [$width, $height];
diff --git a/src/_components/MapLabels.svg.svelte b/src/_components/MapLabels.svg.svelte
index f3a53c57..13cd0b5a 100644
--- a/src/_components/MapLabels.svg.svelte
+++ b/src/_components/MapLabels.svg.svelte
@@ -13,13 +13,13 @@
/** @type {Function} getLabel - An accessor function to get the field to display. */
export let getLabel;
- /** @type {Number} [fixedAspectRatio] - By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here. */
+ /** @type {Number|undefined} [fixedAspectRatio] - By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here. */
export let fixedAspectRatio = undefined;
/** @type {Function} [getCoordinates=d => d.geometry.coordinates] - An accessor function to get the `[x, y]` coordinate field. Defaults to a GeoJSON feature format. */
export let getCoordinates;
- /** @type {Array} [features] - A list of labels as GeoJSON features. If unset, the plotted features will defaults to those in `$data.features`, assuming this field a list of GeoJSON features. */
+ /** @type {Array<Object>|undefined} [features] - A list of labels as GeoJSON features. If unset, the plotted features will defaults to those in `$data.features`, assuming this field a list of GeoJSON features. */
export let features = undefined;
$: fitSizeRange = fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [$width, $height];
diff --git a/src/_components/MapPoints.canvas.svelte b/src/_components/MapPoints.canvas.svelte
index 9be239ac..fb1eeba4 100644
--- a/src/_components/MapPoints.canvas.svelte
+++ b/src/_components/MapPoints.canvas.svelte
@@ -25,7 +25,7 @@
/** @type {Number} [strokeWidth=1] - The point's stroke width. */
export let strokeWidth = 1;
- /** @type {Array} [features] - A list of GeoJSON features to plot. If unset, the plotted features will defaults to those in `$data.features`, assuming this field a list of GeoJSON features. */
+ /** @type {Array<Object>|undefined} [features] - A list of GeoJSON features to plot. If unset, the plotted features will defaults to those in `$data.features`, assuming this field a list of GeoJSON features. */
export let features = undefined;
$: projectionFn = projection().fitSize([$width, $height], $data);
diff --git a/src/_components/MapPoints.html.svelte b/src/_components/MapPoints.html.svelte
index 8cf7d8c9..b7795fd3 100644
--- a/src/_components/MapPoints.html.svelte
+++ b/src/_components/MapPoints.html.svelte
@@ -25,7 +25,7 @@
/** @type {Number} [opacity=1] - The point's opacity. */
export let opacity = 1;
- /** @type {Array} [features] - A list of GeoJSON features to plot. If unset, the plotted features will defaults to those in `$data.features`, assuming this field a list of GeoJSON features. */
+ /** @type {Array<Object>|undefined} [features] - A list of GeoJSON features to plot. If unset, the plotted features will defaults to those in `$data.features`, assuming this field a list of GeoJSON features. */
export let features = undefined;
$: projectionFn = projection().fitSize([$width, $height], $data);
diff --git a/src/_components/MapPoints.svelte b/src/_components/MapPoints.svelte
index bb2a4b44..b45c1902 100644
--- a/src/_components/MapPoints.svelte
+++ b/src/_components/MapPoints.svelte
@@ -28,7 +28,7 @@
/** @type {Number} [opacity=1] - The point's opacity. */
export let opacity = 1;
- /** @type {Array} [features] - A list of GeoJSON features to plot. If unset, the plotted features will defaults to those in `$data.features`, assuming this field a list of GeoJSON features. */
+ /** @type {Array<Object>|undefined} [features] - A list of GeoJSON features to plot. If unset, the plotted features will defaults to those in `$data.features`, assuming this field a list of GeoJSON features. */
export let features = undefined;
$: projectionFn = projection().fitSize([$width, $height], $data);
diff --git a/src/_components/QuadTree.html.svelte b/src/_components/QuadTree.html.svelte
index ae1b1053..0fb97542 100644
--- a/src/_components/QuadTree.html.svelte
+++ b/src/_components/QuadTree.html.svelte
@@ -23,7 +23,7 @@
/** @type {Number|undefined} [searchRadius] – The number of pixels to search around the mouse's location. This is the third argument passed to [`quadtree.find`](https://github.com/d3/d3-quadtree#quadtree_find) and by default a value of `undefined` means an unlimited range. */
export let searchRadius = undefined;
- /** @type {Array} [dataset] – The dataset to work off of—defaults to $data if left unset. You can pass override the default here in here in case you don't want to use the main data or it's in a strange format. */
+ /** @type {Array<Object>|undefined} [dataset] – The dataset to work off of—defaults to $data if left unset. You can pass override the default here in here in case you don't want to use the main data or it's in a strange format. */
export let dataset = undefined;
$: xGetter = x === 'x' ? $xGet : $yGet;
diff --git a/src/_components/QuadTree.percent-range.html.svelte b/src/_components/QuadTree.percent-range.html.svelte
index cdd9c8fe..8f85c483 100644
--- a/src/_components/QuadTree.percent-range.html.svelte
+++ b/src/_components/QuadTree.percent-range.html.svelte
@@ -23,7 +23,7 @@
/** @type {Number|undefined} [searchRadius] - The number of pixels to search around the mouse's location. This is the third argument passed to [`quadtree.find`](https://github.com/d3/d3-quadtree#quadtree_find) and by default a value of `undefined` means an unlimited range. */
export let searchRadius = undefined;
- /** @type {Array} [dataset] - The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format. */
+ /** @type {Array<Object>|undefined} [dataset] - The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format. */
export let dataset = undefined;
$: xGetter = x === 'x' ? $xGet : $yGet;
diff --git a/src/_components/Sankey.svelte b/src/_components/Sankey.svelte
index b6746835..afdeef69 100644
--- a/src/_components/Sankey.svelte
+++ b/src/_components/Sankey.svelte
@@ -23,7 +23,7 @@
/** @type {Number} [nodePadding=10] - The padding between nodes, passed to [`sankey.nodePadding`](https://github.com/d3/d3-sankey#sankey_nodePadding). */
export let nodePadding = 10;
- /** @type {Function} [linkSort=null] - How to sort the links, passed to [`sankey.linkSort`](https://github.com/d3/d3-sankey#sankey_linkSort). */
+ /** @type {Function|null} [linkSort=null] - How to sort the links, passed to [`sankey.linkSort`](https://github.com/d3/d3-sankey#sankey_linkSort). */
export let linkSort = null;
/** @type {Function} [nodeId=d => d.id] - The ID field accessor, passed to [`sankey.nodeId`](https://github.com/d3/d3-sankey#sankey_nodeId). */
diff --git a/src/_components/SharedTooltip.html.svelte b/src/_components/SharedTooltip.html.svelte
index 384d0397..cb5cc035 100644
--- a/src/_components/SharedTooltip.html.svelte
+++ b/src/_components/SharedTooltip.html.svelte
@@ -25,7 +25,7 @@
/** @type {Number} [offset=-20] - A y-offset from the hover point, in pixels. */
export let offset = -20;
- /** @type {Array} [dataset] - The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format. */
+ /** @type {Array<Object>|undefined} [dataset] - The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format. */
export let dataset = undefined;
const w = 150;
diff --git a/src/_components/SharedTooltip.percent-range.html.svelte b/src/_components/SharedTooltip.percent-range.html.svelte
index 49b1bd5a..2f876610 100644
--- a/src/_components/SharedTooltip.percent-range.html.svelte
+++ b/src/_components/SharedTooltip.percent-range.html.svelte
@@ -25,7 +25,7 @@
/** @type {Number} [offset=-20] - A y-offset from the hover point, in pixels. */
export let offset = -20;
- /** @type {Array} [dataset] - The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format. */
+ /** @type {Array<Object>|undefined} [dataset] - The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format. */
export let dataset = undefined;
const w = 150;
diff --git a/src/_components/Voronoi.svelte b/src/_components/Voronoi.svelte
index a73aa1eb..51009a92 100644
--- a/src/_components/Voronoi.svelte
+++ b/src/_components/Voronoi.svelte
@@ -9,7 +9,7 @@
const { data, xGet, yGet, width, height } = getContext('LayerCake');
- /** @type {String} [stroke] – An optional stroke color, which is likely only useful for testing to make sure the shapes drew correctly. */
+ /** @type {String|undefined} [stroke] – An optional stroke color, which is likely only useful for testing to make sure the shapes drew correctly. */
export let stroke = undefined;
let dispatcher = createEventDispatcher();
diff --git a/src/content/guide/03-layercake-props.md b/src/content/guide/03-layercake-props.md
index 5d668527..08299021 100644
--- a/src/content/guide/03-layercake-props.md
+++ b/src/content/guide/03-layercake-props.md
@@ -24,7 +24,7 @@ The component also exports an `element` prop that represents the main wrapper, i
</LayerCake>
```
-### data `Array`
+### data `Array<Object|Array<any>>|Object`
A list of data items. If this is not a flat data array of objects, you'll also need to set [flatData](/guide#flatdata).
@@ -34,7 +34,7 @@ A list of data items. If this is not a flat data array of objects, you'll also n
>
```
-### x `String|Function|Number|Array`
+### x `String|Function|Number|Array<String|Function|Number>|undefined`
The key in each row of data that corresponds to the x-field. This can be a string, number (usually relating to an index of an array), an accessor function, or any combination of those types. This property gets converted to a function when you access it through the context.
@@ -109,15 +109,15 @@ The x- and y-accessors would then look like this:
Calls to `x(dataRow)` in this scenario will return the two-value array. Calls to `xGet(dataRow)` will return a two-value array, mapped through the [xScale](/guide#xscale).
-### y `String|Function|Number|Array`
+### y `String|Function|Number|Array<String|Function|Number>|undefined`
Same as [x](/guide#x) but for the y dimension.
-### z `String|Function|Number|Array`
+### z `String|Function|Number|Array<String|Function|Number>|undefined`
Same as [x](/guide#x) but for the z dimension.
-### r `String|Function|Number|Array`
+### r `String|Function|Number|Array<String|Function|Number>|undefined`
Same as [x](/guide#x) but for the r dimension.
@@ -179,7 +179,7 @@ Same as [xScale](/guide#xscale) but for the z scale. The default is `d3.scaleLin
Same as [xScale](/guide#xscale) but for the r scale. The default is [`d3.scaleSqrt()`](https://github.com/d3/d3-scale#scalesqrt).
-### xDomain `Array:[min: Number|null, max: Number|null]|String[]|Number[]|Function`
+### xDomain `Array:[min: Number|null, max: Number|null]|Array<Number|String>|Function`
Set a min or max on the x scale. If you want to inherit the value from the data's extent, set that value to `null`.
@@ -211,15 +211,15 @@ If you set a [`scaleBand`](https://github.com/d3/d3-scale#scaleband), [`scalePoi
>
```
-### yDomain `Array:[min: Number|null, max: Number|null]|String[]|Number[]|Function`
+### yDomain `Array:[min: Number|null, max: Number|null]|Array<Number|String>|Function`
Same as [xDomain](/guide#xdomain) but for the y scale.
-### zDomain `Array:[min: Number|null, max: Number|null]|String[]|Number[]|Function`
+### zDomain `Array:[min: Number|null, max: Number|null]|Array<Number|String>|Function`
Same as [xDomain](/guide#xdomain) but for the z scale.
-### rDomain `Array:[min: Number|null, max: Number|null]|String[]|Number[]|Function`
+### rDomain `Array:[min: Number|null, max: Number|null]|Array<Number|String>|Function`
Same as [xDomain](/guide#xdomain) but for the r scale.
@@ -281,7 +281,7 @@ Same as [xNice](/guide#xnice) but for the z domain.
Same as [xNice](/guide#xnice) but for the r domain.
-### xRange `Function|Array:[min: Number, max: Number]|String[]|Number[]`
+### xRange `Function|Array:[min: Number, max: Number]|Array<Number|String>`
Override the default x range of `[0, width]` by setting it here to an array or function with argument `({ width, height})` that returns an array.
@@ -301,19 +301,19 @@ It can also be a function:
>
```
-### yRange `Function|Array:[min: Number, max: Number]|String[]|Number[]`
+### yRange `Function|Array:[min: Number, max: Number]|Array<Number|String>`
Same as [xRange](/guide#xrange) but for the y scale. Override the default y range of `[0, height]` by setting it here to an array or function with argument `({ width, height})` that returns an array.
This overrides setting [yReverse](/guide#yreverse) to `true`.
-### zRange `Function|Array:[min: Number, max: Number]|String[]|Number[]`
+### zRange `Function|Array:[min: Number, max: Number]|Array<Number|String>`
Same as [xRange](/guide#xrange) but for the z scale. Override the default z range of `[0, width]` by setting it here to an array or function with argument `({ width, height})` that returns an array.
This overrides setting [zReverse](/guide#zreverse) to `true`.
-### rRange `Function|Array:[min: Number, max: Number]|String[]|Number[]`
+### rRange `Function|Array:[min: Number, max: Number]|Array<Number|String>`
Same as [xRange](/guide#xrange) but for the r scale. Override the default y range of `[1, 25]` by setting it here to an array or function with argument `({ width, height})` that returns an array. The r scale defaults to `d3.scaleSqrt` so make sure you don't use a zero in your range.
diff --git a/src/content/guide/06-layout-component-props.md b/src/content/guide/06-layout-component-props.md
index 8e901e23..f11ee7b0 100644
--- a/src/content/guide/06-layout-component-props.md
+++ b/src/content/guide/06-layout-component-props.md
@@ -52,7 +52,7 @@ The `Canvas` and the `WebGL` components also export a `context` variable that yo
</LayerCake>
```
-### zIndex `Number|String`
+### zIndex `Number|undefined`
This lets you fine-tune your layering and is useful if you want your layers to build in a certain order but have a different appearance than their DOM order.
@@ -62,7 +62,7 @@ This lets you fine-tune your layering and is useful if you want your layers to b
</LayerCake>
```
-### pointerEvents `Boolean`
+### pointerEvents `Boolean|undefined`
Useful for tooltip layers that need to be display above chart elements but not capture mouse events. Defaults to no `pointer-events` CSS being set. Set to `false` to set `pointer-events: none;`
@@ -74,7 +74,7 @@ Useful for tooltip layers that need to be display above chart elements but not c
### viewBox `String`
-On Svg components, this defaults to `undefined` and `0 0 100 100` for ScaledSvg.
+For Svg components, this defaults to `''` and for ScaledSvg it defaults to `0 0 100 100`.
```svelte
<LayerCake ...>
@@ -82,9 +82,9 @@ On Svg components, this defaults to `undefined` and `0 0 100 100` for ScaledSvg.
</LayerCake>
```
-### fixedAspectRatio `Number`
+### fixedAspectRatio `Number=1`
-For ScaledSvg components, you can pass in a set aspect ratio. See the [server-side rendered Map](/example-ssr/MapSvg) for an example.
+For ScaledSvg components, you can pass in a set aspect ratio. See the [server-side rendered Map](/example-ssr/MapSvg) for an example. Default is `1`.
```svelte
<LayerCake ...>
@@ -92,7 +92,7 @@ For ScaledSvg components, you can pass in a set aspect ratio. See the [server-si
</LayerCake>
```
-### contextAttributes `Object`
+### contextAttributes `Object|undefined`
For WebGL components, you can pass in an object that gets passed as the second argument to `canvas.getContext()`. See the [WebGL docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext) for more details on what those attributes can be.
diff --git a/src/lib/LayerCake.svelte b/src/lib/LayerCake.svelte
index ad81d5b0..37835a30 100644
--- a/src/lib/LayerCake.svelte
+++ b/src/lib/LayerCake.svelte
@@ -40,7 +40,7 @@
/** @type {Number} [containerHeight=100] The bound container height. */
export let containerHeight = height || 100;
- /** @type {Element} [element] The .layercake-container `<div>` tag. Useful for bindings. */
+ /** @type {Element|undefined} [element] The .layercake-container `<div>` tag. Useful for bindings. */
export let element = undefined;
/* --------------------------------------------
@@ -50,25 +50,25 @@
*
*/
- /** @type {String|Function|Number|Array} x 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. */
+ /** @type {String|Function|Number|Array<String|Function|Number>|undefined} x 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. */
export let x = undefined;
- /** @type {String|Function|Number|Array} y 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. */
+ /** @type {String|Function|Number|Array<String|Function|Number>|undefined} y 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. */
export let y = undefined;
- /** @type {String|Function|Number|Array} z 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. */
+ /** @type {String|Function|Number|Array<String|Function|Number>|undefined} z 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. */
export let z = undefined;
- /** @type {String|Function|Number|Array} r 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. */
+ /** @type {String|Function|Number|Array<String|Function|Number>|undefined} r 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. */
export let r = undefined;
- /** @type {Array|Object} [data=[]] 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. */
+ /** @type {Array<Object>|Object} [data=[]] 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. */
export let data = [];
- /** @type {[min: Number|null, max: Number|null]|String[]|Number[]|Function} [xDomain] 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. */
+ /** @type {[min: Number|null, max: Number|null]|Array<String|Number>|Function|undefined} [xDomain] 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. */
export let xDomain = undefined;
- /** @type {[min: Number|null, max: Number|null]|String[]|Number[]|Function} [yDomain] 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. */
+ /** @type {[min: Number|null, max: Number|null]|Array<String|Number>|Function|undefined} [yDomain] 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. */
export let yDomain = undefined;
- /** @type {[min: Number|null, max: Number|null]|String[]|Number[]|Function} [zDomain] 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. */
+ /** @type {[min: Number|null, max: Number|null]|Array<String|Number>|Function|undefined} [zDomain] 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. */
export let zDomain = undefined;
- /** @type {[min: Number|null, max: Number|null]|String[]|Number[]|Function} [rDomain] 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. */
+ /** @type {[min: Number|null, max: Number|null]|Array<String|Number>|Function|undefined} [rDomain] 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. */
export let rDomain = undefined;
/** @type {Boolean|Number} [xNice=false] Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the x domain. */
export let xNice = false;
@@ -78,13 +78,13 @@
export let zNice = false;
/** @type {Boolean} [rNice=false] Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the r domain. */
export let rNice = false;
- /** @type {[leftPixels: Number, rightPixels: Number]} [xPadding] 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. */
+ /** @type {[leftPixels: Number, rightPixels: Number]|undefined} [xPadding] 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. */
export let xPadding = undefined;
- /** @type {[leftPixels: Number, rightPixels: Number]} [yPadding] 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. */
+ /** @type {[leftPixels: Number, rightPixels: Number]|undefined} [yPadding] 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. */
export let yPadding = undefined;
- /** @type {[leftPixels: Number, rightPixels: Number]} [zPadding] 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. */
+ /** @type {[leftPixels: Number, rightPixels: Number]|undefined} [zPadding] 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. */
export let zPadding = undefined;
- /** @type {[leftPixels: Number, rightPixels: Number]} [rPadding] 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. */
+ /** @type {[leftPixels: Number, rightPixels: Number]|undefined} [rPadding] 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. */
export let rPadding = undefined;
/** @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. */
export let xScale = defaultScales.x;
@@ -94,17 +94,17 @@
export let zScale = defaultScales.z;
/** @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. */
export let rScale = defaultScales.r;
- /** @type {[min: Number, max: Number]|Function|String[]|Number[]} [xRange] 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). */
+ /** @type {[min: Number, max: Number]|Function|Array<String|Number>|undefined} [xRange] 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). */
export let xRange = undefined;
- /** @type {[min: Number, max: Number]|Function|String[]|Number[]} [xRange] 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). */
+ /** @type {[min: Number, max: Number]|Function|Array<String|Number>|undefined} [xRange] 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). */
export let yRange = undefined;
- /** @type {[min: Number, max: Number]|Function|String[]|Number[]} [zRange] 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). */
+ /** @type {[min: Number, max: Number]|Function|Array<String|Number>|undefined} [zRange] 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). */
export let zRange = undefined;
- /** @type {[min: Number, max: Number]|Function|String[]|Number[]} [rRange] 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). */
+ /** @type {[min: Number, max: Number]|Function|Array<String|Number>|undefined} [rRange] 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). */
export let rRange = undefined;
/** @type {Boolean} [xReverse=false] Reverse the default x range. By default this is `false` and the range is `[0, width]`. Ignored if you set the xRange prop. */
export let xReverse = false;
- /** @type {Boolean} [yReverse=true] 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. */
+ /** @type {Boolean|undefined} [yReverse=true] Reverse the default y range. By default this is set dynamically and will be `true` – setting the range to `[height, 0]` – unless the `yScale` has a `.bandwidth` method. Dynamic behavior is overridden if the user sets the prop. Ignored if you set the `yRange` prop. */
export let yReverse = undefined;
/** @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. */
export let zReverse = false;
@@ -123,7 +123,7 @@
/** @type {{ x?: [min: Number, max: Number], y?: [min: Number, max: Number], r?: [min: Number, max: Number], z?: [min: Number, max: Number] }} [extents] 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. */
export let extents = {};
- /** @type {Array} [flatData=data] A flat version of data. */
+ /** @type {Array<Object|Array<any>>|undefined} [flatData=data] A flat version of data. */
export let flatData = undefined;
/** @type {Object} custom Any extra configuration values you want available on the LayerCake context. This could be useful for color lookups or additional constants. */
diff --git a/src/lib/layouts/Canvas.svelte b/src/lib/layouts/Canvas.svelte
index 4a837a08..27d37e75 100644
--- a/src/lib/layouts/Canvas.svelte
+++ b/src/lib/layouts/Canvas.svelte
@@ -9,28 +9,28 @@
const { width, height, padding } = getContext('LayerCake');
- /** @type {HTMLCanvasElement} [element] The `<canvas>` tag. Useful for bindings. */
+ /** @type {HTMLCanvasElement|undefined} [element] The `<canvas>` tag. Useful for bindings. */
export let element = undefined;
- /** @type {CanvasRenderingContext2D} [context] The `<canvas>`'s 2d context. Useful for bindings. */
+ /** @type {CanvasRenderingContext2D|undefined} [context] The `<canvas>`'s 2d context. Useful for bindings. */
export let context = undefined;
- /** @type {Number} [zIndex] The layer's z-index. */
+ /** @type {Number|undefined} [zIndex] The layer's z-index. */
export let zIndex = undefined;
- /** @type {Boolean} [pointerEvents] Set this to `false` to set `pointer-events: none;` on the entire layer. */
+ /** @type {Boolean|undefined} [pointerEvents] Set this to `false` to set `pointer-events: none;` on the entire layer. */
export let pointerEvents = undefined;
/** @type {String} [fallback] Text to display if the browser won't render a canvas tag. You can also set arbitrary HTML via the "fallback" slot but this is fine if you just need text. If you use the "fallback" slot, this prop is ignored. */
export let fallback = '';
- /** @type {String} [label] A string passed to the `aria-label` on the `<canvas>` tag. */
+ /** @type {String|undefined} [label] A string passed to the `aria-label` on the `<canvas>` tag. */
export let label = undefined;
- /** @type {String} [labelledBy] A string passed to the `aria-labelledby` on the `<canvas>` tag. */
+ /** @type {String|undefined} [labelledBy] A string passed to the `aria-labelledby` on the `<canvas>` tag. */
export let labelledBy = undefined;
- /** @type {String} [describedBy] A string passed to `aria-describedby` property on the `<canvas>` tag. */
+ /** @type {String|undefined} [describedBy] A string passed to `aria-describedby` property on the `<canvas>` tag. */
export let describedBy = undefined;
const cntxt = {
diff --git a/src/lib/layouts/Html.svelte b/src/lib/layouts/Html.svelte
index 41dd6fa6..72e0529c 100644
--- a/src/lib/layouts/Html.svelte
+++ b/src/lib/layouts/Html.svelte
@@ -7,25 +7,25 @@
const { padding } = getContext('LayerCake');
- /** @type {Element} [element] The layer's outermost `<div>` tag. Useful for bindings. */
+ /** @type {Element|undefined} [element] The layer's outermost `<div>` tag. Useful for bindings. */
export let element = undefined;
- /** @type {Number} [zIndex] The layer's z-index. */
+ /** @type {Number|undefined} [zIndex] The layer's z-index. */
export let zIndex = undefined;
- /** @type {Boolean} [pointerEvents] Set this to `false` to set `pointer-events: none;` on the entire layer. */
+ /** @type {Boolean|undefined} [pointerEvents] Set this to `false` to set `pointer-events: none;` on the entire layer. */
export let pointerEvents = undefined;
- /** @type {String} [role] A string passed to the `aria-role` on the `<div>` tag. This is `undefined` by default but will be set by default to `'figure'` if `label`, `labelledby` or `describedby` is set. That default will be overridden by whatever is passed in. */
+ /** @type {String|undefined} [role] A string passed to the `aria-role` on the `<div>` tag. This is `undefined` by default but will be set by default to `'figure'` if `label`, `labelledby` or `describedby` is set. That default will be overridden by whatever is passed in. */
export let role = undefined;
- /** @type {String} [label] A string passed to the `aria-label` on the `<div>` tag. */
+ /** @type {String|undefined} [label] A string passed to the `aria-label` on the `<div>` tag. */
export let label = undefined;
- /** @type {String} [labelledBy] A string passed to the `aria-labelledby` on the `<div>` tag. */
+ /** @type {String|undefined} [labelledBy] A string passed to the `aria-labelledby` on the `<div>` tag. */
export let labelledBy = undefined;
- /** @type {String} [describedBy] A string passed to `aria-describedby` property on the `<div>` tag. */
+ /** @type {String|undefined} [describedBy] A string passed to `aria-describedby` property on the `<div>` tag. */
export let describedBy = undefined;
$: roleVal = role || (label || labelledBy || describedBy ? 'figure' : undefined);
diff --git a/src/lib/layouts/ScaledSvg.svelte b/src/lib/layouts/ScaledSvg.svelte
index fa19aa9f..a13c1a2f 100644
--- a/src/lib/layouts/ScaledSvg.svelte
+++ b/src/lib/layouts/ScaledSvg.svelte
@@ -7,32 +7,32 @@
const { padding } = getContext('LayerCake');
- /** @type {Element} [element] The layer's `<svg>` tag. Useful for bindings. */
+ /** @type {Element|undefined} [element] The layer's `<svg>` tag. Useful for bindings. */
export let element = undefined;
- /** @type {Number} [zIndex] The layer's z-index. */
+ /** @type {Number|undefined} [zIndex] The layer's z-index. */
export let zIndex = undefined;
- /** @type {Boolean} [pointerEvents] Set this to `false` to set `pointer-events: none;` on the entire layer. */
+ /** @type {Boolean|undefined} [pointerEvents] Set this to `false` to set `pointer-events: none;` on the entire layer. */
export let pointerEvents = undefined;
- /** @type {Number} [fixedAspectRatio=1`] A number to set the aspect ratio onto the viewBox. */
+ /** @type {Number} [fixedAspectRatio=1] A number to set the aspect ratio onto the viewBox. */
export let fixedAspectRatio = 1;
/** @type {String} [viewBox=`0 0 100 ${100 / fixedAspectRatio}`] A string passed to the `viewBox` property on the `<svg>` tag. */
export let viewBox = `0 0 100 ${100 / fixedAspectRatio}`;
$: viewBox = `0 0 100 ${100 / fixedAspectRatio}`;
- /** @type {String} [label] A string passed to the `aria-label` on the `<svg>` tag. */
+ /** @type {String|undefined} [label] A string passed to the `aria-label` on the `<svg>` tag. */
export let label = undefined;
- /** @type {String} [labelledBy] A string passed to the `aria-labelledby` on the `<svg>` tag. */
+ /** @type {String|undefined} [labelledBy] A string passed to the `aria-labelledby` on the `<svg>` tag. */
export let labelledBy = undefined;
- /** @type {String} [describedBy] A string passed to `aria-describedby` property on the `<svg>` tag. */
+ /** @type {String|undefined} [describedBy] A string passed to `aria-describedby` property on the `<svg>` tag. */
export let describedBy = undefined;
- /** @type {String} [title] Shorthand to set the contents of `<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. */
+ /** @type {String|undefined} [title] Shorthand to set the contents of `` 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;
diff --git a/src/lib/layouts/Svg.svelte b/src/lib/layouts/Svg.svelte
index 1f03b7c0..96453cb6 100644
--- a/src/lib/layouts/Svg.svelte
+++ b/src/lib/layouts/Svg.svelte
@@ -5,31 +5,31 @@