Merge pull request #223 from rgieseke/fix-undefined-and-array-ts-errors

Fix TypeScript errors from missing undefined or unprecise arrays

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 `<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;
 
 	$: circles = dodge($data, { rds: r * 2 + spacing + strokeWidth, x: $xGet });

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)

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)

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. */

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. */

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. */

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. */

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);

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;
 
 	/* --------------------------------------------

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];

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];

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);

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);

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);

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;

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;

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). */

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;

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;

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();