diff --git a/src/_components/Area-D3.svelte b/src/_components/Area-D3.svelte
index 88f84742..243b51e7 100644
--- a/src/_components/Area-D3.svelte
+++ b/src/_components/Area-D3.svelte
@@ -8,7 +8,7 @@
const { data, xGet, yGet, yScale } = getContext('LayerCake');
- /** @type {String} [fill='#ab00d610'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
+ /** @type {string} [fill='#ab00d610'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
export let fill = '#ab00d610';
/** @type {Function} [curve=curveLinear] - An optional D3 interpolation function. See [d3-shape](https://github.com/d3/d3-shape#curves) for options. Pass this function in uncalled, i.e. without the open-close parentheses. */
diff --git a/src/_components/Area.svelte b/src/_components/Area.svelte
index 9c499f5b..6b0a30ca 100644
--- a/src/_components/Area.svelte
+++ b/src/_components/Area.svelte
@@ -7,7 +7,7 @@
const { data, xGet, yGet, xScale, yScale, extents } = getContext('LayerCake');
- /** @type {String} [fill='#ab00d610'] The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
+ /** @type {string} [fill='#ab00d610'] The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
export let fill = '#ab00d610';
$: path =
@@ -18,7 +18,7 @@
})
.join('L');
- /** @type {String} **/
+ /** @type {string} **/
let area;
$: {
diff --git a/src/_components/ArrowheadMarker.svelte b/src/_components/ArrowheadMarker.svelte
index 40a9a85a..e19c81f6 100644
--- a/src/_components/ArrowheadMarker.svelte
+++ b/src/_components/ArrowheadMarker.svelte
@@ -3,10 +3,10 @@
Generates an SVG marker containing a marker for a triangle makes a nice arrowhead. Add it to the named slot called "defs" on the SVG layout component.
-->
diff --git a/src/_components/Arrows.svelte b/src/_components/Arrows.svelte
index b31272f2..818dabf8 100644
--- a/src/_components/Arrows.svelte
+++ b/src/_components/Arrows.svelte
@@ -9,10 +9,10 @@
/** @type {Array} annotations - A list of annotation objects. See the [Column](https://layercake.graphics/example/Column) chart example for the schema and options. */
export let annotations = [];
- /** @type {String} [annotationClass='.layercake-annotation'] - The class name of the text annotation divs. */
+ /** @type {string} [annotationClass='.layercake-annotation'] - The class name of the text annotation divs. */
export let containerClass = '.chart-container';
- /** @type {String} [containerClass='.chart-container'] - The class name / CSS selector of the parent element of the `` component. This is used to crawl the DOM for the text annotations. */
+ /** @type {string} [containerClass='.chart-container'] - The class name / CSS selector of the parent element of the `` component. This is used to crawl the DOM for the text annotations. */
export let annotationClass = '.layercake-annotation';
let container;
diff --git a/src/_components/AxisRadial.svelte b/src/_components/AxisRadial.svelte
index 2ba77607..e1fb8864 100644
--- a/src/_components/AxisRadial.svelte
+++ b/src/_components/AxisRadial.svelte
@@ -7,10 +7,10 @@
const { width, height, xScale, extents, config } = getContext('LayerCake');
- /** @type {Number} [lineLengthFactor=1.1] - How far to extend the lines from the circle's center. A value of `1` puts them at the circle's circumference. */
+ /** @type {number} [lineLengthFactor=1.1] - How far to extend the lines from the circle's center. A value of `1` puts them at the circle's circumference. */
export let lineLengthFactor = 1.1;
- /** @type {Number} [labelPlacementFactor=1.25] - How far to place the labels from the circle's center. A value of `1` puts them at the circle's circumference. */
+ /** @type {number} [labelPlacementFactor=1.25] - How far to place the labels from the circle's center. A value of `1` puts them at the circle's circumference. */
export let labelPlacementFactor = 1.25;
$: max = $xScale(Math.max(...$extents.x));
@@ -20,8 +20,8 @@
$: angleSlice = (Math.PI * 2) / $config.x.length;
- /** @param {Number} total
- * @param {Number} i */
+ /** @param {number} total
+ * @param {number} i */
function anchor(total, i) {
if (i === 0 || i === total / 2) {
return 'middle';
diff --git a/src/_components/AxisX.percent-range.html.svelte b/src/_components/AxisX.percent-range.html.svelte
index efd2294e..cb99c17b 100644
--- a/src/_components/AxisX.percent-range.html.svelte
+++ b/src/_components/AxisX.percent-range.html.svelte
@@ -15,7 +15,7 @@
/** @type {boolean} [gridlines=true] - Show gridlines extending into the chart area. */
export let gridlines = true;
- /** @type {Number} [tickMarkLength=6] - The length of the tick mark. */
+ /** @type {number} [tickMarkLength=6] - The length of the tick mark. */
export let tickMarkLength = 6;
/** @type {boolean} [baseline=false] – Show a solid line at the bottom. */
@@ -27,19 +27,19 @@
/** @type {(d: any) => string} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
export let format = d => d;
- /** @type {Number|Array|Function|undefined} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
+ /** @type {number|Array|Function|undefined} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
export let ticks = undefined;
- /** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
+ /** @type {number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
export let tickGutter = 0;
- /** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+ /** @type {number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
export let dx = 0;
- /** @type {Number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
+ /** @type {number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
export let dy = 0;
- /** @type {String} units - Whether this component should use percentage or pixel values. If `percentRange={true}` it defaults to `'%'`. Options: `'%'` or `'px'`. */
+ /** @type {string} units - Whether this component should use percentage or pixel values. If `percentRange={true}` it defaults to `'%'`. Options: `'%'` or `'px'`. */
export let units = $percentRange === true ? '%' : 'px';
$: tickLen = tickMarks === true ? tickMarkLength ?? 6 : 0;
diff --git a/src/_components/AxisX.svelte b/src/_components/AxisX.svelte
index da7bb3cc..e587dac7 100644
--- a/src/_components/AxisX.svelte
+++ b/src/_components/AxisX.svelte
@@ -13,7 +13,7 @@
/** @type {boolean} [gridlines=true] - Show gridlines extending into the chart area. */
export let gridlines = true;
- /** @type {Number} [tickMarkLength=6] - The length of the tick mark. */
+ /** @type {number} [tickMarkLength=6] - The length of the tick mark. */
export let tickMarkLength = 6;
/** @type {boolean} [baseline=false] – Show a solid line at the bottom. */
@@ -25,20 +25,21 @@
/** @type {(d: any) => string} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
export let format = d => d;
- /** @type {Number|Array|Function|undefined} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
+ /** @type {number|Array|Function|undefined} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
export let ticks = undefined;
- /** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
+ /** @type {number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
export let tickGutter = 0;
- /** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+ /** @type {number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
export let dx = 0;
- /** @type {Number} [dy=12] - Any optional value passed to the `dy` attribute on the text label. */
+ /** @type {number} [dy=12] - Any optional value passed to the `dy` attribute on the text label. */
export let dy = 12;
- /**@param {Number} i
- * @param {boolean} sl */
+
+ /** @param {number} i
+ * @param {boolean} sl */
function textAnchor(i, sl) {
if (sl === true) {
if (i === 0) {
diff --git a/src/_components/AxisXTop.percent-range.html.svelte b/src/_components/AxisXTop.percent-range.html.svelte
index 01c00fc5..099e6918 100644
--- a/src/_components/AxisXTop.percent-range.html.svelte
+++ b/src/_components/AxisXTop.percent-range.html.svelte
@@ -15,7 +15,7 @@
/** @type {boolean} [gridlines=true] - Show gridlines extending into the chart area. */
export let gridlines = true;
- /** @type {Number} [tickMarkLength=6] - The length of the tick mark. */
+ /** @type {number} [tickMarkLength=6] - The length of the tick mark. */
export let tickMarkLength = 6;
/** @type {boolean} [baseline=false] – Show a solid line at the bottom. */
@@ -27,19 +27,19 @@
/** @type {(d: any) => string} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
export let format = d => d;
- /** @type {Number|Array|Function|undefined} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
+ /** @type {number|Array|Function|undefined} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
export let ticks = undefined;
- /** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
+ /** @type {number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
export let tickGutter = 0;
- /** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+ /** @type {number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
export let dx = 0;
- /** @type {Number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
+ /** @type {number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
export let dy = 0;
- /** @type {String} units - Whether this component should use percentage or pixel values. If `percentRange={true}` it defaults to `'%'`. Options: `'%'` or `'px'`. */
+ /** @type {string} units - Whether this component should use percentage or pixel values. If `percentRange={true}` it defaults to `'%'`. Options: `'%'` or `'px'`. */
export let units = $percentRange === true ? '%' : 'px';
$: tickLen = tickMarks === true ? tickMarkLength ?? 6 : 0;
diff --git a/src/_components/AxisXTop.svelte b/src/_components/AxisXTop.svelte
index 42095dfd..76a1513b 100644
--- a/src/_components/AxisXTop.svelte
+++ b/src/_components/AxisXTop.svelte
@@ -13,7 +13,7 @@
/** @type {boolean} [gridlines=true] - Show gridlines extending into the chart area. */
export let gridlines = true;
- /** @type {Number} [tickMarkLength=6] - The length of the tick mark. */
+ /** @type {number} [tickMarkLength=6] - The length of the tick mark. */
export let tickMarkLength = 6;
/** @type {boolean} [baseline=false] – Show a solid line at the bottom. */
@@ -25,20 +25,20 @@
/** @type {(d: any) => string} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
export let format = d => d;
- /** @type {Number|Array|Function|undefined} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
+ /** @type {number|Array|Function|undefined} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
export let ticks = undefined;
- /** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
+ /** @type {number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
export let tickGutter = 0;
- /** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+ /** @type {number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
export let dx = 0;
- /** @type {Number} [dy=-4] - Any optional value passed to the `dy` attribute on the text label. */
+ /** @type {number} [dy=-4] - Any optional value passed to the `dy` attribute on the text label. */
export let dy = -4;
- /**@param {Number} i
- * @param {boolean} sl */
+ /** @param {number} i
+ * @param {boolean} sl */
function textAnchor(i, sl) {
if (sl === true) {
if (i === 0) {
diff --git a/src/_components/AxisY.percent-range.html.svelte b/src/_components/AxisY.percent-range.html.svelte
index abab2f24..7a34960a 100644
--- a/src/_components/AxisY.percent-range.html.svelte
+++ b/src/_components/AxisY.percent-range.html.svelte
@@ -12,7 +12,7 @@
/** @type {boolean} [tickMarks=false] - Show marks next to the tick label. */
export let tickMarks = false;
- /** @type {String} [labelPosition='even'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'. */
+ /** @type {string} [labelPosition='even'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'. */
export let labelPosition = 'even';
/** @type {boolean} [snapBaselineLabel=false] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark. */
@@ -21,28 +21,28 @@
/** @type {boolean} [gridlines=true] - Show gridlines extending into the chart area. */
export let gridlines = true;
- /** @type {Number|undefined} [tickMarkLength=undefined] - The length of the tick mark. If not set, becomes the length of the widest tick. */
+ /** @type {number|undefined} [tickMarkLength=undefined] - The length of the tick mark. If not set, becomes the length of the widest tick. */
export let tickMarkLength = undefined;
/** @type {(d: any) => string} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
export let format = d => d;
- /** @type {Number|Array|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
+ /** @type {number|Array|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
export let ticks = 4;
- /** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
+ /** @type {number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
export let tickGutter = 0;
- /** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+ /** @type {number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
export let dx = 0;
- /** @type {Number} [dy=-3] - Any optional value passed to the `dy` attribute on the text label. */
+ /** @type {number} [dy=-3] - Any optional value passed to the `dy` attribute on the text label. */
export let dy = -3;
- /** @type {Number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value). */
+ /** @type {number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value). */
export let charPixelWidth = 7.25;
- /** @type {String} units - Whether this component should use percentage or pixel values. If `percentRange={true}` it defaults to `'%'`. Options: `'%'` or `'px'`. */
+ /** @type {string} units - Whether this component should use percentage or pixel values. If `percentRange={true}` it defaults to `'%'`. Options: `'%'` or `'px'`. */
export let units = $percentRange === true ? '%' : 'px';
$: isBandwidth = typeof $yScale.bandwidth === 'function';
@@ -56,7 +56,7 @@
? ticks($yScale.ticks())
: $yScale.ticks(ticks);
- /** @param {Number} sum
+ /** @param {number} sum
* @param {String} val */
function calcStringLength(sum, val) {
if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
diff --git a/src/_components/AxisY.svelte b/src/_components/AxisY.svelte
index e3773c3a..1c1c212c 100644
--- a/src/_components/AxisY.svelte
+++ b/src/_components/AxisY.svelte
@@ -10,7 +10,7 @@
/** @type {boolean} [tickMarks=false] - Show marks next to the tick label. */
export let tickMarks = false;
- /** @type {String} [labelPosition='even'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'. */
+ /** @type {string} [labelPosition='even'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'. */
export let labelPosition = 'even';
/** @type {boolean} [snapBaselineLabel=false] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark. */
@@ -19,25 +19,25 @@
/** @type {boolean} [gridlines=true] - Show gridlines extending into the chart area. */
export let gridlines = true;
- /** @type {Number|undefined} [tickMarkLength=undefined] - The length of the tick mark. If not set, becomes the length of the widest tick. */
+ /** @type {number|undefined} [tickMarkLength=undefined] - The length of the tick mark. If not set, becomes the length of the widest tick. */
export let tickMarkLength = undefined;
/** @type {(d: any) => string} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
export let format = d => d;
- /** @type {Number|Array|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
+ /** @type {number|Array|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
export let ticks = 4;
- /** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
+ /** @type {number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
export let tickGutter = 0;
- /** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+ /** @type {number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
export let dx = 0;
- /** @type {Number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
+ /** @type {number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
export let dy = 0;
- /** @type {Number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value). */
+ /** @type {number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value). */
export let charPixelWidth = 7.25;
$: isBandwidth = typeof $yScale.bandwidth === 'function';
@@ -51,7 +51,7 @@
? ticks($yScale.ticks())
: $yScale.ticks(ticks);
- /** @param {Number} sum
+ /** @param {number} sum
* @param {String} val */
function calcStringLength(sum, val) {
if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
diff --git a/src/_components/AxisYRight.percent-range.html.svelte b/src/_components/AxisYRight.percent-range.html.svelte
index 367f37ff..4398efa6 100644
--- a/src/_components/AxisYRight.percent-range.html.svelte
+++ b/src/_components/AxisYRight.percent-range.html.svelte
@@ -12,7 +12,7 @@
/** @type {boolean} [tickMarks=true] - Show marks next to the tick label. */
export let tickMarks = true;
- /** @type {String} [labelPosition='even'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'. */
+ /** @type {string} [labelPosition='even'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'. */
export let labelPosition = 'even';
/** @type {boolean} [snapBaselineLabel=false] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark. */
@@ -21,28 +21,28 @@
/** @type {boolean} [gridlines=true] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark. */
export let gridlines = true;
- /** @type {Number|undefined} [tickMarkLength=undefined] - The length of the tick mark. If not set, becomes the length of the widest tick. */
+ /** @type {number|undefined} [tickMarkLength=undefined] - The length of the tick mark. If not set, becomes the length of the widest tick. */
export let tickMarkLength = undefined;
/** @type {(d: any) => string} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
export let format = d => d;
- /** @type {Number|Array|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
+ /** @type {number|Array|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
export let ticks = 4;
- /** @type {Number} [tickGutter=5] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
+ /** @type {number} [tickGutter=5] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
export let tickGutter = 5;
- /** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+ /** @type {number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
export let dx = 0;
- /** @type {Number} [dy=-3] - Any optional value passed to the `dy` attribute on the text label. */
+ /** @type {number} [dy=-3] - Any optional value passed to the `dy` attribute on the text label. */
export let dy = -3;
- /** @type {Number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value). */
+ /** @type {number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value). */
export let charPixelWidth = 7.25;
- /** @type {String} units - Whether this component should use percentage or pixel values. If `percentRange={true}` it defaults to `'%'`. Options: `'%'` or `'px'`. */
+ /** @type {string} units - Whether this component should use percentage or pixel values. If `percentRange={true}` it defaults to `'%'`. Options: `'%'` or `'px'`. */
export let units = $percentRange === true ? '%' : 'px';
$: isBandwidth = typeof $yScale.bandwidth === 'function';
@@ -56,7 +56,7 @@
? ticks($yScale.ticks())
: $yScale.ticks(ticks);
- /** @param {Number} sum
+ /** @param {number} sum
* @param {String} val */
function calcStringLength(sum, val) {
if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
diff --git a/src/_components/AxisYRight.svelte b/src/_components/AxisYRight.svelte
index 6e6694e2..139a5be0 100644
--- a/src/_components/AxisYRight.svelte
+++ b/src/_components/AxisYRight.svelte
@@ -10,7 +10,7 @@
/** @type {boolean} [tickMarks=false] - Show marks next to the tick label. */
export let tickMarks = false;
- /** @type {String} [labelPosition='above'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. */
+ /** @type {string} [labelPosition='above'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. */
export let labelPosition = 'above';
/** @type {boolean} [snapBaselineLabel=false] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark. */
@@ -19,25 +19,25 @@
/** @type {boolean} [gridlines=true] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark. */
export let gridlines = true;
- /** @type {Number|undefined} [tickMarkLength=undefined] - The length of the tick mark. If not set, becomes the length of the widest tick. */
+ /** @type {number|undefined} [tickMarkLength=undefined] - The length of the tick mark. If not set, becomes the length of the widest tick. */
export let tickMarkLength = undefined;
/** @type {(d: any) => string} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
export let format = d => d;
- /** @type {Number|Array|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
+ /** @type {number|Array|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
export let ticks = 4;
- /** @type {Number} [tickGutter=5] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
+ /** @type {number} [tickGutter=5] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
export let tickGutter = 5;
- /** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+ /** @type {number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
export let dx = 0;
- /** @type {Number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
+ /** @type {number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
export let dy = 0;
- /** @type {Number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value). */
+ /** @type {number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value). */
export let charPixelWidth = 7.25;
$: isBandwidth = typeof $yScale.bandwidth === 'function';
@@ -51,7 +51,7 @@
? ticks($yScale.ticks())
: $yScale.ticks(ticks);
- /** @param {Number} sum
+ /** @param {number} sum
* @param {String} val */
function calcStringLength(sum, val) {
if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
diff --git a/src/_components/Bar.svelte b/src/_components/Bar.svelte
index 9ff9cc9b..69513fdb 100644
--- a/src/_components/Bar.svelte
+++ b/src/_components/Bar.svelte
@@ -7,7 +7,7 @@
const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
- /** @type {String} [fill='#00bbff'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
+ /** @type {string} [fill='#00bbff'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
export let fill = '#00bbff';
diff --git a/src/_components/Beeswarm.html.svelte b/src/_components/Beeswarm.html.svelte
index 86276cae..0a4f7a68 100644
--- a/src/_components/Beeswarm.html.svelte
+++ b/src/_components/Beeswarm.html.svelte
@@ -7,16 +7,16 @@
const { data, xGet, zGet, height, config } = getContext('LayerCake');
- /** @type {Number} [r=3] - The circle radius size in pixels. */
+ /** @type {number} [r=3] - The circle radius size in pixels. */
export let r = 3;
- /** @type {Number} [strokeWidth=0] - The circle's stroke width in pixels. */
+ /** @type {number} [strokeWidth=0] - The circle's stroke width in pixels. */
export let strokeWidth = 0;
- /** @type {String} [stroke='#fff'] - The circle's stroke color. */
+ /** @type {string} [stroke='#fff'] - The circle's stroke color. */
export let stroke = '#fff';
- /** @type {Number} [spacing=1.5] - Spacing, in pixels, between each circle. */
+ /** @type {number} [spacing=1.5] - Spacing, in pixels, between each circle. */
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. Mostly useful for debugging, needs better styling for production. */
diff --git a/src/_components/Beeswarm.svelte b/src/_components/Beeswarm.svelte
index 2f5f6091..513210ef 100644
--- a/src/_components/Beeswarm.svelte
+++ b/src/_components/Beeswarm.svelte
@@ -7,16 +7,16 @@
const { data, xGet, zGet, height, config } = getContext('LayerCake');
- /** @type {Number} [r=3] - The circle radius size in pixels. */
+ /** @type {number} [r=3] - The circle radius size in pixels. */
export let r = 3;
- /** @type {Number} [strokeWidth=0] - The circle's stroke width in pixels. */
+ /** @type {number} [strokeWidth=0] - The circle's stroke width in pixels. */
export let strokeWidth = 0;
- /** @type {String} [stroke='#fff'] - The circle's stroke color. */
+ /** @type {string} [stroke='#fff'] - The circle's stroke color. */
export let stroke = '#fff';
- /** @type {Number} [spacing=1.5] - Whitespace padding between each circle, in pixels */
+ /** @type {number} [spacing=1.5] - Whitespace padding between each circle, in pixels */
export let spacing = 1.5;
/** @type {Function|undefined} [getTitle] — An accessor function to get the field on the data element to display as a hover label using a `` tag. */
diff --git a/src/_components/BeeswarmForce.html.svelte b/src/_components/BeeswarmForce.html.svelte
index 206c1bdb..e4e681e1 100644
--- a/src/_components/BeeswarmForce.html.svelte
+++ b/src/_components/BeeswarmForce.html.svelte
@@ -10,19 +10,19 @@
const nodes = $data.map(d => ({ ...d }));
- /** @type {Number} [r=4] - The circle radius size in pixels. */
+ /** @type {number} [r=4] - The circle radius size in pixels. */
export let r = 4;
- /** @type {Number} [strokeWidth=0.5] - The circle's stroke width in pixels. */
+ /** @type {number} [strokeWidth=0.5] - The circle's stroke width in pixels. */
export let strokeWidth = 0.5;
- /** @type {String} [stroke='#fff'] - The circle's stroke color. */
+ /** @type {string} [stroke='#fff'] - The circle's stroke color. */
export let stroke = '#fff';
- /** @type {Number} [xStrength=0.95] - 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. */
+ /** @type {number} [xStrength=0.95] - 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.95;
- /** @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. */
+ /** @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|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. */
diff --git a/src/_components/BeeswarmForce.svelte b/src/_components/BeeswarmForce.svelte
index 7e5ac18c..394addb9 100644
--- a/src/_components/BeeswarmForce.svelte
+++ b/src/_components/BeeswarmForce.svelte
@@ -10,19 +10,19 @@
const nodes = $data.map(d => ({ ...d }));
- /** @type {Number} [r=4] - The circle radius size in pixels. */
+ /** @type {number} [r=4] - The circle radius size in pixels. */
export let r = 4;
- /** @type {Number} [strokeWidth=1] - The circle's stroke width in pixels. */
+ /** @type {number} [strokeWidth=1] - The circle's stroke width in pixels. */
export let strokeWidth = 1;
- /** @type {String} [stroke='#fff'] - The circle's stroke color. */
+ /** @type {string} [stroke='#fff'] - The circle's stroke color. */
export let stroke = '#fff';
- /** @type {Number} [xStrength=0.95] - The value passed into the `.strength` method on `forceX`. See [the documentation](https://github.com/d3/d3-force#x_strength). */
+ /** @type {number} [xStrength=0.95] - The value passed into the `.strength` method on `forceX`. See [the documentation](https://github.com/d3/d3-force#x_strength). */
export let xStrength = 0.95;
- /** @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). */
+ /** @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|undefined} [getTitle] — An accessor function to get the field on the data element to display as a hover label using a `<title>` tag. */
diff --git a/src/_components/Brush.html.svelte b/src/_components/Brush.html.svelte
index f792d632..27057d90 100644
--- a/src/_components/Brush.html.svelte
+++ b/src/_components/Brush.html.svelte
@@ -5,10 +5,10 @@
<script>
import { clamp } from 'yootils';
- /** @type {Number} min - The brush's min value. Useful to bind to. */
+ /** @type {number} min - The brush's min value. Useful to bind to. */
export let min;
- /** @type {Number} max - The brush's max value. Useful to bind to. */
+ /** @type {number} max - The brush's max value. Useful to bind to. */
export let max;
let brush;
diff --git a/src/_components/CirclePack.html.svelte b/src/_components/CirclePack.html.svelte
index 4359cd83..5cd4a3c8 100644
--- a/src/_components/CirclePack.html.svelte
+++ b/src/_components/CirclePack.html.svelte
@@ -9,40 +9,40 @@
const { width, height, data } = getContext('LayerCake');
- /** @type {String} [idKey='id'] - The key on each object where the id value lives. */
+ /** @type {string} [idKey='id'] - The key on each object where the id value lives. */
export let idKey = 'id';
- /** @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). */
+ /** @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. */
+ /** @type {string} [valueKey='value'] - The key on each object where the data value lives. */
export let valueKey = 'value';
/** @type {Function} [labelVisibilityThreshold=r => r > 25] - By default, only show the text inside a circle if its radius exceeds a certain size. Provide your own function for different behavior. */
export let labelVisibilityThreshold = r => r > 25;
- /** @type {String} [fill='#fff'] - The circle's fill color. */
+ /** @type {string} [fill='#fff'] - The circle's fill color. */
export let fill = '#fff';
- /** @type {String} [stroke='#999'] - The circle's stroke color. */
+ /** @type {string} [stroke='#999'] - The circle's stroke color. */
export let stroke = '#999';
- /** @type {Number} [strokeWidth=1] - The circle's stroke width, in pixels. */
+ /** @type {number} [strokeWidth=1] - The circle's stroke width, in pixels. */
export let strokeWidth = 1;
- /** @type {String} [textColor='#333'] - The label text color. */
+ /** @type {string} [textColor='#333'] - The label text color. */
export let textColor = '#333';
- /** @type {String} [textStroke='#000'] - The label text's stroke color. */
+ /** @type {string} [textStroke='#000'] - The label text's stroke color. */
export let textStroke = '#000';
- /** @type {Number} [textStrokeWidth=0] - The label text's stroke width, in pixels. */
+ /** @type {number} [textStrokeWidth=0] - The label text's stroke width, in pixels. */
export let textStrokeWidth = 0;
/** @type {Function} [sortBy=(a, b) => b.value - a.value] - The order in which circle's are drawn. Sorting on the `depth` key is also a popular choice. */
export let sortBy = (a, b) => b.value - a.value; // 'depth' is also a popular choice
- /** @type {Number} [spacing=0] - Whitespace padding between each circle, in pixels. */
+ /** @type {number} [spacing=0] - Whitespace padding between each circle, in pixels. */
export let spacing = 0;
/* --------------------------------------------
diff --git a/src/_components/CirclePackForce.svelte b/src/_components/CirclePackForce.svelte
index 811f6156..9d5b42c3 100644
--- a/src/_components/CirclePackForce.svelte
+++ b/src/_components/CirclePackForce.svelte
@@ -8,19 +8,19 @@
const { data, width, height, xScale, xGet, rGet, zGet } = getContext('LayerCake');
- /** @type {Number} [manyBodyStrength=5] - The value passed into the `.strength` method on `forceManyBody`, which is used as the `'charge'` property on the simulation. See [the documentation](https://github.com/d3/d3-force#manyBody_strength) for more. */
+ /** @type {number} [manyBodyStrength=5] - The value passed into the `.strength` method on `forceManyBody`, which is used as the `'charge'` property on the simulation. See [the documentation](https://github.com/d3/d3-force#manyBody_strength) for more. */
export let manyBodyStrength = 5;
- /** @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. */
+ /** @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|undefined} [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. */
+ /** @type {string} [nodeStroke='#fff'] - The circle's stroke color. */
export let nodeStroke = '#fff';
- /** @type {Number} [nodeStrokeWidth=1] - The circle's stroke width, in pixels. */
+ /** @type {number} [nodeStrokeWidth=1] - The circle's stroke width, in pixels. */
export let nodeStrokeWidth = 1;
/** @type {boolean} [groupBy=true] - Group the nodes by the return value of the x-scale. If `false`, align all the nodes to the canvas center. */
diff --git a/src/_components/ClevelandDotPlot.percent-range.html.svelte b/src/_components/ClevelandDotPlot.percent-range.html.svelte
index 7369821c..2a2fdb51 100644
--- a/src/_components/ClevelandDotPlot.percent-range.html.svelte
+++ b/src/_components/ClevelandDotPlot.percent-range.html.svelte
@@ -7,7 +7,7 @@
const { data, xGet, yGet, zScale, yScale, config } = getContext('LayerCake');
- /** @type {Number} [r=5] - The circle radius. */
+ /** @type {number} [r=5] - The circle radius. */
export let r = 5;
$: midHeight = $yScale.bandwidth() / 2;
diff --git a/src/_components/ClevelandDotPlot.svelte b/src/_components/ClevelandDotPlot.svelte
index 446cd938..52ec3d31 100644
--- a/src/_components/ClevelandDotPlot.svelte
+++ b/src/_components/ClevelandDotPlot.svelte
@@ -7,7 +7,7 @@
const { data, xGet, yGet, yScale, zScale, config } = getContext('LayerCake');
- /** @type {Number} [r=5] - The circle radius. */
+ /** @type {number} [r=5] - The circle radius. */
export let r = 5;
$: midHeight = $yScale.bandwidth() / 2;
diff --git a/src/_components/Column.svelte b/src/_components/Column.svelte
index 049f9f81..6ebaeea6 100644
--- a/src/_components/Column.svelte
+++ b/src/_components/Column.svelte
@@ -7,13 +7,13 @@
const { data, xGet, yGet, x, yRange, xScale, y, height } = getContext('LayerCake');
- /** @type {String} [fill='#00e047'] - The shape's fill color. */
+ /** @type {string} [fill='#00e047'] - The shape's fill color. */
export let fill = '#00e047';
- /** @type {String} [stroke='#000'] - The shape's stroke color. */
+ /** @type {string} [stroke='#000'] - The shape's stroke color. */
export let stroke = '#000';
- /** @type {Number} [strokeWidth=0] - The shape's stroke width. */
+ /** @type {number} [strokeWidth=0] - The shape's stroke width. */
export let strokeWidth = 0;
/** @type {boolean} [false] - Show the numbers for each column */
diff --git a/src/_components/Key.html.svelte b/src/_components/Key.html.svelte
index f3960687..c9400898 100644
--- a/src/_components/Key.html.svelte
+++ b/src/_components/Key.html.svelte
@@ -5,10 +5,10 @@
<script>
import { getContext } from 'svelte';
- /** @type {String} [shape='square'] - The shape for each item. Can be 'circle', 'line', or 'square'; */
+ /** @type {string} [shape='square'] - The shape for each item. Can be 'circle', 'line', or 'square'; */
export let shape = 'square';
- /** @type {String} [align='start'] - Sets the CSS flexbox justify-content setting for the box as a whole. Can be 'start', 'center' or 'end'. */
+ /** @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|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. */
diff --git a/src/_components/Line-D3.svelte b/src/_components/Line-D3.svelte
index 6465348f..f4936916 100644
--- a/src/_components/Line-D3.svelte
+++ b/src/_components/Line-D3.svelte
@@ -8,7 +8,7 @@
const { data, xGet, yGet } = getContext('LayerCake');
- /** @type {String} [stroke='#ab00d6'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
+ /** @type {string} [stroke='#ab00d6'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
export let stroke = '#ab00d6';
/** @type {Function} [curve=curveLinear] - An optional D3 interpolation function. See [d3-shape](https://github.com/d3/d3-shape#curves) for options. Pass this function in uncalled, i.e. without the open-close parentheses. */
diff --git a/src/_components/Line.svelte b/src/_components/Line.svelte
index aeb91723..29a43cc2 100644
--- a/src/_components/Line.svelte
+++ b/src/_components/Line.svelte
@@ -7,7 +7,7 @@
const { data, xGet, yGet } = getContext('LayerCake');
- /** @type {String} [stroke='#ab00d6'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
+ /** @type {string} [stroke='#ab00d6'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
export let stroke = '#ab00d6';
$: path =
diff --git a/src/_components/Map.canvas.svelte b/src/_components/Map.canvas.svelte
index 40112868..9b1671ca 100644
--- a/src/_components/Map.canvas.svelte
+++ b/src/_components/Map.canvas.svelte
@@ -14,13 +14,13 @@
/** @type {Function} projection - A D3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */
export let projection;
- /** @type {String} [stroke='#ccc'] - The shape's stroke color. */
+ /** @type {string} [stroke='#ccc'] - The shape's stroke color. */
export let stroke = '#ccc';
- /** @type {Number} [strokeWidth=1] - The shape's stroke width. */
+ /** @type {number} [strokeWidth=1] - The shape's stroke width. */
export let strokeWidth = 1;
- /** @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. */
+ /** @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|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. */
diff --git a/src/_components/Map.svg.svelte b/src/_components/Map.svg.svelte
index 6092a7a8..c778b5b7 100644
--- a/src/_components/Map.svg.svelte
+++ b/src/_components/Map.svg.svelte
@@ -12,16 +12,16 @@
/** @type {Function} projection - A D3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */
export let projection;
- /** @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. */
+ /** @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|undefined} [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. */
+ /** @type {string} [stroke='#333'] - The shape's stroke color. */
export let stroke = '#333';
- /** @type {Number} [strokeWidth=0.5] - The shape's stroke width. */
+ /** @type {number} [strokeWidth=0.5] - The shape's stroke width. */
export let strokeWidth = 0.5;
/** @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. */
diff --git a/src/_components/MapLabels.html.svelte b/src/_components/MapLabels.html.svelte
index 935bd35e..3b711c0a 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|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. */
+ /** @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. */
diff --git a/src/_components/MapLabels.svg.svelte b/src/_components/MapLabels.svg.svelte
index 13cd0b5a..1c9e8227 100644
--- a/src/_components/MapLabels.svg.svelte
+++ b/src/_components/MapLabels.svg.svelte
@@ -13,7 +13,7 @@
/** @type {Function} getLabel - An accessor function to get the field to display. */
export let getLabel;
- /** @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. */
+ /** @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. */
diff --git a/src/_components/MapPoints.canvas.svelte b/src/_components/MapPoints.canvas.svelte
index fb1eeba4..7e6fe968 100644
--- a/src/_components/MapPoints.canvas.svelte
+++ b/src/_components/MapPoints.canvas.svelte
@@ -13,16 +13,16 @@
/** @type {Function} projection - A D3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */
export let projection;
- /** @type {Number} [r=3.5] - The point's radius. */
+ /** @type {number} [r=3.5] - The point's radius. */
export let r = 3.5;
- /** @type {String} [fill='yellow'] - The point's fill color. */
+ /** @type {string} [fill='yellow'] - The point's fill color. */
export let fill = 'yellow';
- /** @type {String} [stroke='#000'] - The point's stroke color. */
+ /** @type {string} [stroke='#000'] - The point's stroke color. */
export let stroke = '#000';
- /** @type {Number} [strokeWidth=1] - The point's stroke width. */
+ /** @type {number} [strokeWidth=1] - The point's stroke width. */
export let strokeWidth = 1;
/** @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. */
diff --git a/src/_components/MapPoints.html.svelte b/src/_components/MapPoints.html.svelte
index b7795fd3..35231ade 100644
--- a/src/_components/MapPoints.html.svelte
+++ b/src/_components/MapPoints.html.svelte
@@ -10,19 +10,19 @@
/** @type {Function} projection - A D3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */
export let projection;
- /** @type {Number} [r=3.5] - The point's radius. */
+ /** @type {number} [r=3.5] - The point's radius. */
export let r = 3.5;
- /** @type {String} [fill='yellow'] - The point's fill color. */
+ /** @type {string} [fill='yellow'] - The point's fill color. */
export let fill = 'yellow';
- /** @type {String} [stroke='#000'] - The point's stroke color. */
+ /** @type {string} [stroke='#000'] - The point's stroke color. */
export let stroke = '#000';
- /** @type {Number} [strokeWidth=1] - The point's stroke width, in pixels. */
+ /** @type {number} [strokeWidth=1] - The point's stroke width, in pixels. */
export let strokeWidth = 1;
- /** @type {Number} [opacity=1] - The point's opacity. */
+ /** @type {number} [opacity=1] - The point's opacity. */
export let opacity = 1;
/** @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. */
diff --git a/src/_components/MapPoints.svelte b/src/_components/MapPoints.svelte
index b45c1902..fea7821f 100644
--- a/src/_components/MapPoints.svelte
+++ b/src/_components/MapPoints.svelte
@@ -13,19 +13,19 @@
*/
export let projection;
- /** @type {Number} [r=3.5] - The point's radius. */
+ /** @type {number} [r=3.5] - The point's radius. */
export let r = 3.5;
- /** @type {String} [fill='yellow'] - The point's fill color. */
+ /** @type {string} [fill='yellow'] - The point's fill color. */
export let fill = 'yellow';
- /** @type {String} [stroke='#000'] - The point's stroke color. */
+ /** @type {string} [stroke='#000'] - The point's stroke color. */
export let stroke = '#000';
- /** @type {Number} [strokeWidth=1] - The point's stroke width. */
+ /** @type {number} [strokeWidth=1] - The point's stroke width. */
export let strokeWidth = 1;
- /** @type {Number} [opacity=1] - The point's opacity. */
+ /** @type {number} [opacity=1] - The point's opacity. */
export let opacity = 1;
/** @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. */
diff --git a/src/_components/QuadTree.html.svelte b/src/_components/QuadTree.html.svelte
index 0fb97542..732a3e42 100644
--- a/src/_components/QuadTree.html.svelte
+++ b/src/_components/QuadTree.html.svelte
@@ -14,13 +14,13 @@
let found = {};
let e = {};
- /** @type {String} [x='x'] – The dimension to search across when moving the mouse left and right. */
+ /** @type {'x'|'y'} [x='x'] – The dimension to search across when moving the mouse left and right. */
export let x = 'x';
- /** @type {String} [y='y'] – The dimension to search across when moving the mouse up and down. */
+ /** @type {'x'|'y'} [y='y'] – The dimension to search across when moving the mouse up and down. */
export let y = 'y';
- /** @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. */
+ /** @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<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. */
@@ -29,11 +29,12 @@
$: xGetter = x === 'x' ? $xGet : $yGet;
$: yGetter = y === 'y' ? $yGet : $xGet;
+ /** @param {MouseEvent} evt */
function findItem(evt) {
e = evt;
- const xLayerKey = `layer${x.toUpperCase()}`;
- const yLayerKey = `layer${y.toUpperCase()}`;
+ const xLayerKey = /** @type {'layerX'|'layerY'} */ (`layer${x.toUpperCase()}`);
+ const yLayerKey = /** @type {'layerX'|'layerY'}*/ (`layer${y.toUpperCase()}`);
found = finder.find(evt[xLayerKey], evt[yLayerKey], searchRadius) || {};
visible = Object.keys(found).length > 0;
diff --git a/src/_components/QuadTree.percent-range.html.svelte b/src/_components/QuadTree.percent-range.html.svelte
index 8f85c483..9d7494a6 100644
--- a/src/_components/QuadTree.percent-range.html.svelte
+++ b/src/_components/QuadTree.percent-range.html.svelte
@@ -14,13 +14,13 @@
let found = {};
let e = {};
- /** @type {String} [x='x'] - The dimension to search across when moving the mouse left and right. */
+ /** @type {'x'|'y'} [x='x'] - The dimension to search across when moving the mouse left and right. */
export let x = 'x';
- /** @type {String} [y='y'] - The dimension to search across when moving the mouse up and down. */
+ /** @type {'x'|'y'} [y='y'] - The dimension to search across when moving the mouse up and down. */
export let y = 'y';
- /** @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. */
+ /** @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<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. */
@@ -29,11 +29,12 @@
$: xGetter = x === 'x' ? $xGet : $yGet;
$: yGetter = y === 'y' ? $yGet : $xGet;
+ /** @param {MouseEvent} evt*/
function findItem(evt) {
e = evt;
- const xLayerKey = `layer${x.toUpperCase()}`;
- const yLayerKey = `layer${y.toUpperCase()}`;
+ const xLayerKey = /** @type {'layerX'|'layerY'} */ (`layer${x.toUpperCase()}`);
+ const yLayerKey = /** @type {'layerX'|'layerY'}*/ (`layer${y.toUpperCase()}`);
const xLayerVal = (evt[xLayerKey] / (x === 'x' ? $width : $height)) * 100;
const yLayerVal = (evt[yLayerKey] / (y === 'y' ? $height : $width)) * 100;
diff --git a/src/_components/Radar.svelte b/src/_components/Radar.svelte
index d7d09379..292d2a8b 100644
--- a/src/_components/Radar.svelte
+++ b/src/_components/Radar.svelte
@@ -8,28 +8,28 @@
const { data, width, height, xGet, config } = getContext('LayerCake');
- /** @type {String} [fill='#f0c'] The radar's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
+ /** @type {string} [fill='#f0c'] The radar's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
export let fill = '#f0c';
- /** @type {String} [stroke='#f0c'] The radar's stroke color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
+ /** @type {string} [stroke='#f0c'] The radar's stroke color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
export let stroke = '#f0c';
- /** @type {Number} [stroke=2] The radar's stroke color. */
+ /** @type {number} [stroke=2] The radar's stroke color. */
export let strokeWidth = 2;
- /** @type {Number} [fillOpacity=0.5] The radar's fill opacity. */
+ /** @type {number} [fillOpacity=0.5] The radar's fill opacity. */
export let fillOpacity = 0.5;
- /** @type {Number} [r=4.5] Each circle's radius. */
+ /** @type {number} [r=4.5] Each circle's radius. */
export let r = 4.5;
- /** @type {String} [circleFill="#f0c"] Each circle's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
+ /** @type {string} [circleFill="#f0c"] Each circle's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
export let circleFill = '#f0c';
- /** @type {String} [circleStroke="#fff"] Each circle's stroke color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
+ /** @type {string} [circleStroke="#fff"] Each circle's stroke color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
export let circleStroke = '#fff';
- /** @type {Number} [circleStrokeWidth=1] Each circle's stroke width. */
+ /** @type {number} [circleStrokeWidth=1] Each circle's stroke width. */
export let circleStrokeWidth = 1;
$: angleSlice = (Math.PI * 2) / $config.x.length;
diff --git a/src/_components/Sankey.svelte b/src/_components/Sankey.svelte
index afdeef69..ad4cb6d7 100644
--- a/src/_components/Sankey.svelte
+++ b/src/_components/Sankey.svelte
@@ -17,10 +17,10 @@
/** @type {Function} [colorText=d => '#263238'] - A function to return a color for each text label. */
export let colorText = () => '#263238';
- /** @type {Number} [nodeWidth=5] - The width of each node, in pixels, passed to [`sankey.nodeWidth`](https://github.com/d3/d3-sankey#sankey_nodeWidth). */
+ /** @type {number} [nodeWidth=5] - The width of each node, in pixels, passed to [`sankey.nodeWidth`](https://github.com/d3/d3-sankey#sankey_nodeWidth). */
export let nodeWidth = 5;
- /** @type {Number} [nodePadding=10] - The padding between nodes, passed to [`sankey.nodePadding`](https://github.com/d3/d3-sankey#sankey_nodePadding). */
+ /** @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|null} [linkSort=null] - How to sort the links, passed to [`sankey.linkSort`](https://github.com/d3/d3-sankey#sankey_linkSort). */
diff --git a/src/_components/Scatter.canvas.svelte b/src/_components/Scatter.canvas.svelte
index 287c7193..4468070f 100644
--- a/src/_components/Scatter.canvas.svelte
+++ b/src/_components/Scatter.canvas.svelte
@@ -10,16 +10,16 @@
const { ctx } = getContext('canvas');
- /** @type {Number} [r=5] - The circle's radius. */
+ /** @type {number} [r=5] - The circle's radius. */
export let r = 5;
- /** @type {String} [fill='#0cf'] - The circle's fill color. */
+ /** @type {string} [fill='#0cf'] - The circle's fill color. */
export let fill = '#0cf';
- /** @type {String} [stroke='#000'] - The circle's stroke color. */
+ /** @type {string} [stroke='#000'] - The circle's stroke color. */
export let stroke = '#000';
- /** @type {Number} [strokeWidth=1] - The circle's stroke width. */
+ /** @type {number} [strokeWidth=1] - The circle's stroke width. */
export let strokeWidth = 1;
$: {
diff --git a/src/_components/Scatter.html.svelte b/src/_components/Scatter.html.svelte
index 3da44563..8afcf913 100644
--- a/src/_components/Scatter.html.svelte
+++ b/src/_components/Scatter.html.svelte
@@ -7,16 +7,16 @@
const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
- /** @type {Number} [r=5] - The circle's radius. */
+ /** @type {number} [r=5] - The circle's radius. */
export let r = 5;
- /** @type {String} [fill='#0cf'] - The circle's fill color. */
+ /** @type {string} [fill='#0cf'] - The circle's fill color. */
export let fill = '#0cf';
- /** @type {String} [stroke='#000'] - The circle's stroke color. */
+ /** @type {string} [stroke='#000'] - The circle's stroke color. */
export let stroke = '#000';
- /** @type {Number} [strokeWidth=1] - The circle's stroke width. */
+ /** @type {number} [strokeWidth=1] - The circle's stroke width. */
export let strokeWidth = 1;
</script>
diff --git a/src/_components/Scatter.svg.svelte b/src/_components/Scatter.svg.svelte
index 1a874378..c6984f14 100644
--- a/src/_components/Scatter.svg.svelte
+++ b/src/_components/Scatter.svg.svelte
@@ -7,16 +7,16 @@
const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
- /** @type {Number} [r=5] – The circle's radius. */
+ /** @type {number} [r=5] – The circle's radius. */
export let r = 5;
- /** @type {String} [fill='#0cf'] – The circle's fill color. */
+ /** @type {string} [fill='#0cf'] – The circle's fill color. */
export let fill = '#0cf';
- /** @type {String} [stroke='#000'] – The circle's stroke color. */
+ /** @type {string} [stroke='#000'] – The circle's stroke color. */
export let stroke = '#000';
- /** @type {Number} [strokeWidth=0] – The circle's stroke width. */
+ /** @type {number} [strokeWidth=0] – The circle's stroke width. */
export let strokeWidth = 0;
</script>
diff --git a/src/_components/Scatter.webgl.svelte b/src/_components/Scatter.webgl.svelte
index a688205d..11a899d5 100644
--- a/src/_components/Scatter.webgl.svelte
+++ b/src/_components/Scatter.webgl.svelte
@@ -8,10 +8,10 @@
const { data, xGet, yGet, width, height } = getContext('LayerCake');
- /** @type {Number} [r=5] - The circle's radius. */
+ /** @type {number} [r=5] - The circle's radius. */
export let r = 5;
- /** @type {String} [fill='#0cf'] - The circle's fill color. */
+ /** @type {string} [fill='#0cf'] - The circle's fill color. */
export let fill = '#0cf';
export let stroke = '#000'; // Not yet implemented
diff --git a/src/_components/SharedTooltip.html.svelte b/src/_components/SharedTooltip.html.svelte
index cb5cc035..ea7fcf92 100644
--- a/src/_components/SharedTooltip.html.svelte
+++ b/src/_components/SharedTooltip.html.svelte
@@ -22,7 +22,7 @@
/** @type {Function} [formatKey=d => titleCase(d)] - A function to format the series name. */
export let formatKey = d => titleCase(d);
- /** @type {Number} [offset=-20] - A y-offset from the hover point, in pixels. */
+ /** @type {number} [offset=-20] - A y-offset from the hover point, in pixels. */
export let offset = -20;
/** @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. */
diff --git a/src/_components/SharedTooltip.percent-range.html.svelte b/src/_components/SharedTooltip.percent-range.html.svelte
index 2f876610..6ddf930f 100644
--- a/src/_components/SharedTooltip.percent-range.html.svelte
+++ b/src/_components/SharedTooltip.percent-range.html.svelte
@@ -22,7 +22,7 @@
/** @type {Function} [formatValue=d => isNaN(+d) ? d : commas(d)] - A function to format the value. */
export let formatValue = d => (isNaN(+d) ? d : commas(d));
- /** @type {Number} [offset=-20] - A y-offset from the hover point, in pixels. */
+ /** @type {number} [offset=-20] - A y-offset from the hover point, in pixels. */
export let offset = -20;
/** @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. */
diff --git a/src/_components/Tooltip.html.svelte b/src/_components/Tooltip.html.svelte
index bdc60877..a3c4ddf2 100644
--- a/src/_components/Tooltip.html.svelte
+++ b/src/_components/Tooltip.html.svelte
@@ -6,7 +6,7 @@
/** @type {Object} evt - A svelte event created via [`dispatch`](https://svelte.dev/docs#createEventDispatcher) with event information under `evt.detail.e`. */
export let evt = {};
- /** @type {Number} [offset=-35] - A y-offset from the hover point, in pixels. */
+ /** @type {number} [offset=-35] - A y-offset from the hover point, in pixels. */
export let offset = -35;
</script>
diff --git a/src/_components/Voronoi.svelte b/src/_components/Voronoi.svelte
index 51009a92..350a2e09 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|undefined} [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 b39da8da..fed7ec2d 100644
--- a/src/content/guide/03-layercake-props.md
+++ b/src/content/guide/03-layercake-props.md
@@ -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<String|Function|Number>|undefined`
+### 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<String|Function|Number>|undefined`
+### y `string|Function|number|Array<string|Function|number>|undefined`
Same as [x](/guide#x) but for the y dimension.
-### z `String|Function|Number|Array<String|Function|Number>|undefined`
+### z `string|Function|number|Array<string|Function|number>|undefined`
Same as [x](/guide#x) but for the z dimension.
-### r `String|Function|Number|Array<String|Function|Number>|undefined`
+### 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]|Array<Number|String>|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]|Array<Number|String>|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]|Array<Number|String>|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]|Array<Number|String>|Function`
+### rDomain `Array:[min: number|null, max: number|null]|Array<number|string>|Function`
Same as [xDomain](/guide#xdomain) but for the r scale.
@@ -241,7 +241,7 @@ Same as [xDomainSort](/guide#xdomainsort) but for the z domain.
Same as [xDomainSort](/guide#xdomainsort) but for the r domain.
-### xPadding `Array:[leftPixels: Number, rightPixels: Number]`
+### xPadding `Array:[leftPixels: number, rightPixels: number]`
Assign a pixel value to add to the min or max of the x scale. This will increase the scales domain by the scale unit equivalent of the provided pixels. This is useful for adding extra space to a scatter plot so that your circles don't interfere with your y-axis. It's better than fussing with the range since you don't need to add a magic number to other components, like axes.
@@ -253,35 +253,35 @@ It will log out a warning if you try to use it on a scale that has a domain or r
>
```
-### yPadding `Array:[leftPixels: Number, rightPixels: Number]`
+### yPadding `Array:[leftPixels: number, rightPixels: number]`
Same as [xPadding](/guide#xpadding) but for the y domain.
-### zPadding `Array:[leftPixels: Number, rightPixels: Number]`
+### zPadding `Array:[leftPixels: number, rightPixels: number]`
Same as [xPadding](/guide#xpadding) but for the z domain.
-### rPadding `Array:[leftPixels: Number, rightPixels: Number]`
+### rPadding `Array:[leftPixels: number, rightPixels: number]`
Same as [xPadding](/guide#xpadding) but for the r domain.
-### xNice `boolean=false|Number`
+### xNice `boolean=false|number`
Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the x domain. This is a separate option instead of being one you can apply to a passed in scale because D3's "nice" transformation only works on existing domains and does not use a state to be able to tell if your existing scale wants to be nice. Can also pass `count` number as argument for greater control.
-### yNice `boolean=false|Number`
+### yNice `boolean=false|number`
Same as [xNice](/guide#xnice) but for the y domain.
-### zNice `boolean=false|Number`
+### zNice `boolean=false|number`
Same as [xNice](/guide#xnice) but for the z domain.
-### rNice `boolean=false|Number`
+### rNice `boolean=false|number`
Same as [xNice](/guide#xnice) but for the r domain.
-### xRange `Function|Array:[min: Number, max: Number]|Array<Number|String>`
+### 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]|Array<Number|String>`
+### 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]|Array<Number|String>`
+### 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]|Array<Number|String>`
+### 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.
@@ -421,7 +421,7 @@ When rendering charts server side, you pretty much always want your scale range
> The default range for the y-scale will be `[100, 0]` because `yReverse` defaults to `true`. All of the range reverse functions will work as usual with this.
-### position `String='relative'`
+### position `string='relative'`
Determine the positioning of the wrapper div. Set this to `'absolute'` when you want to stack two `<LayerCake>` components on top of one another, such as when you have one that is server-side rendered and one client side like in the [Annotated column](/example-ssr/Column) example.
diff --git a/src/content/guide/04-computed-context-values.md b/src/content/guide/04-computed-context-values.md
index fde6986b..d4454373 100644
--- a/src/content/guide/04-computed-context-values.md
+++ b/src/content/guide/04-computed-context-values.md
@@ -23,7 +23,7 @@ An object that has a key for each dimension of data you have provided an accesso
}
```
-### aspectRatio `Number`
+### aspectRatio `number`
The aspect ratio of the chart, `width / height`. As a slot prop, you could use it to selectively display some components over others:
@@ -51,11 +51,11 @@ Or, [xDomain](/guide#xdomain) and the other domain props can be used to set manu
Having access to this field can help you not repeat yourself in specifying things twice or in scenarios where Layer Cake is doing a transformation on that original value, like in accessors or domain inputs, and you want to know about the original value.
-### containerWidth `Number`
+### containerWidth `number`
The width of the parent container – the div element that contains the `<LayerCake>` component. Unlike [width](/guide#width), this value does not take into account any margin. As a variable on the Layer Cake slot so you can access it with `let:containerWidth`.
-### containerHeight `Number`
+### containerHeight `number`
The height of the parent container – the div element that contains the `<LayerCake>` component. Unlike [height](/guide#height), this value does not take into account any margin. This is also exposed as a variable on the Layer Cake slot so you can access it with `let:containerHeight`.
@@ -74,11 +74,11 @@ This value could differ from the domain of your scale if you are manually settin
}
```
-### width `Number`
+### width `number`
The width of the drawable space for the chart. This is the width of the parent container taking into account any margin. This is also exposed as a variable on the Layer Cake slot so you can access it with `let:width`.
-### height `Number`
+### height `number`
The width of the drawable space for the chart. This is the height of the parent container taking into account any margin. This is also exposed as a variable on the Layer Cake slot so you can access it with `let:height`.
@@ -117,7 +117,7 @@ Same as [x](/guide#x-1) but for the z dimension.
Same as [x](/guide#x-1) but for the r dimension.
-### xDomain `Array:[min: Number, max: Number]`
+### xDomain `Array:[min: number, max: number]`
The calculated extent of the x-dimension of the data. This is the extent of the data taking into account any manual settings passed in for [xDomain](/guide#xdomain).
@@ -125,33 +125,33 @@ For example, if the extent of the data is `[10, 100]` and you set the xDomain pr
It's equivalent to calling `$xScale.domain()`.
-### yDomain `Array:[min: Number, max: Number]`
+### yDomain `Array:[min: number, max: number]`
Same as [xDomain](/guide#xdomain-1) above but for the y domain.
-### zDomain `Array:[min: Number, max: Number]`
+### zDomain `Array:[min: number, max: number]`
Same as [xDomain](/guide#xdomain-1) above but for the z domain.
-### rDomain `Array:[min: Number, max: Number]`
+### rDomain `Array:[min: number, max: number]`
Same as [xDomain](/guide#xdomain-1) above but for the r domain.
-### xRange `Array:[min: Number, max: Number]`
+### xRange `Array:[min: number, max: number]`
The range used for the x-scale. This is usually `[0, width]` unless it's been manually set via the [xRange](/guide#xrange) prop.
It's equivalent to calling `$xScale.range()`.
-### yRange `Array:[min: Number, max: Number]`
+### yRange `Array:[min: number, max: number]`
Same as [xRange](/guide#xrange-1) above but for the y domain.
-### zRange `Array:[min: Number, max: Number]`
+### zRange `Array:[min: number, max: number]`
Same as [xRange](/guide#xrange-1) above but for the z domain.
-### rRange `Array:[min: Number, max: Number]`
+### rRange `Array:[min: number, max: number]`
Same as [xRange](/guide#xrange-1) above but for the r domain.
diff --git a/src/content/guide/06-layout-component-props.md b/src/content/guide/06-layout-component-props.md
index ee427e57..79c69dbe 100644
--- a/src/content/guide/06-layout-component-props.md
+++ b/src/content/guide/06-layout-component-props.md
@@ -4,16 +4,16 @@ title: Layout component props
In addition to the [accessibility props](guide#accessibility) described above, all layout components accept the following props:
-- [zIndex](guide#zindex) `Number|String`
+- [zIndex](guide#zindex) `number|string`
- [pointerEvents](guide#pointerevents) `boolean`
The Svg and ScaledSvg layout components also accept:
-- [viewBox](guide#viewbox) `String`
+- [viewBox](guide#viewbox) `string`
And ScaledSvg additionally accepts:
-- [fixedAspectRatio](guide#fixedaspectratio) `Number`
+- [fixedAspectRatio](guide#fixedaspectratio) `number`
The WebGL Component accepts:
@@ -52,7 +52,7 @@ The `Canvas` and the `WebGL` components also export a `context` variable that yo
</LayerCake>
```
-### zIndex `Number|undefined`
+### 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.
@@ -72,7 +72,7 @@ Useful for tooltip layers that need to be display above chart elements but not c
</LayerCake>
```
-### viewBox `String`
+### viewBox `string`
For Svg components, this defaults to `''` and for ScaledSvg it defaults to `0 0 100 100`.
@@ -82,7 +82,7 @@ For Svg components, this defaults to `''` and for ScaledSvg it defaults to `0 0
</LayerCake>
```
-### fixedAspectRatio `Number=1`
+### 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. Default is `1`.
diff --git a/src/content/guide/99-helper-functions.md b/src/content/guide/99-helper-functions.md
index 621e55ba..79eaa49e 100644
--- a/src/content/guide/99-helper-functions.md
+++ b/src/content/guide/99-helper-functions.md
@@ -4,7 +4,7 @@ title: Helper functions
Layer Cake exposes some commonly-used helper functions. If you don't use them, they will be tree-shaken so there's no added bloat!
-### bin(data: `Array`[, accessor: `String|Function`, { domain: `Array`, thresholds: `Array` }])
+### bin(data: `Array`[, accessor: `string|Function`, { domain: `Array`, thresholds: `Array` }])
This is a wrapper around the `bin` function in [d3-array](https://github.com/d3/d3-array#bins). It's useful for histograms.
@@ -12,11 +12,11 @@ The component has the following props:
- **data** `Array|Object`
- The data to be binned.
-- **value** `Function|String`
+- **value** `Function|string`
- Optional. An accessor function passed to [`bin.value()`](https://github.com/d3/d3-array#bin_value). If this is a string, it will be transformed into an accessor for that key.
- **domain** `Array`
- Optional. The domain passed to [`bin.domain()`](https://github.com/d3/d3-array#bin_domain).
-- **thresholds** `Number|Array|Function`
+- **thresholds** `number|Array|Function`
- Optional. The thresholds passed to [`bin.thresholds()`](https://github.com/d3/d3-array#bin_thresholds). Optional. Can be a number, array or function.
See the [stacked bar chart](/example/BarStacked) for an example:
@@ -185,7 +185,7 @@ console.log(uniques);
*/
```
-### flatten(data: `Array`[, accessor: `String|Function`])
+### flatten(data: `Array`[, accessor: `string|Function`])
Flatten an array one-level down. Handy for preparing data from stacked layouts whose extents can easily be calculated. This is equivalent to `Array.prototype.flat()` but is kept in for old versions of node that support that or other browser compatibility.
@@ -315,7 +315,7 @@ Becomes...
];
```
-### groupLonger(data: `Array`, keys: `String[]`[, { groupTo: `String='group'`, valueTo: `String='value'`, keepKeys: `String[]` }])
+### groupLonger(data: `Array`, keys: `string[]`[, { groupTo: `string='group'`, valueTo: `string='value'`, keepKeys: `string[]` }])
This function is useful for data that you get in a "wide" format that you want to break into a multi-series chart.
@@ -376,14 +376,14 @@ The component has the following props:
- **data** `Array|Object`
- The data to be transformed.
-- **keys** `String[]`
+- **keys** `string[]`
- The series names to break out out into separate groups.
- **options** `Object` Options object
-- **options.groupTo** `String='group'`
+- **options.groupTo** `string='group'`
- Optional. This name of the field that is added to each group object. Defaults to 'group'. This field is also added to each row of data.
-- **options.valueTo** `String='value'`
+- **options.valueTo** `string='value'`
- Optional. The name of the new field on each row of data to store the value under. Defaults to 'value'.
-- **options.keepKeys** `String[]`
+- **options.keepKeys** `string[]`
- Optional. Any keys we want to explicitly keep. If this is unset, all keys not specified in your groups will be kept. The list of full keys is determined by naively looking at the first row of the data.
It returns:
@@ -403,7 +403,7 @@ el.parentNode.appendChild(el);
This is useful for hovering over SVG maps so that the hovered-over feature is not obstructed by neighboring shapes. See how it's used in the [SVG map component](/example/MapSvg).
-### scaleCanvas(ctx: `CanvasRenderingContext2D`, width: `Number`, height: `Number`)
+### scaleCanvas(ctx: `CanvasRenderingContext2D`, width: `number`, height: `number`)
Scale your canvas size to retina screens. This function will modify the canvas, if necessary, and return an object with the new `width` and `height` as properties.
@@ -447,7 +447,7 @@ Such as in the [Scatter canvas](/example/Scatter) example:
</script>
```
-### stack(data: `Array|Object`[, keys: `String[]`, { domain: `Array`, thresholds: `Array` }])
+### stack(data: `Array|Object`[, keys: `string[]`, { domain: `Array`, thresholds: `Array` }])
This function is a wrapper around the `stack` function in [d3-shape](https://github.com/d3/d3-shape#stacks).
@@ -455,10 +455,10 @@ The component has the following props:
- **data** `Array|Object`
- The data to be stacked.
-- **keys** `String[]`
+- **keys** `string[]`
- The series names to stack, passed to [`stack.keys()`](https://github.com/d3/d3-shape#stack_keys).
- **options** `Object` Options object
-- **options.value** `Function|String`
+- **options.value** `Function|string`
- Optional. An accessor function passed to [`stack.value()`](https://github.com/d3/d3-shape#stack_value). If this is a string, it will be transformed into an accessor for that key.
- **options.order** `Array|Function`
- Optional. The stack order passed to [`stack.order()`](https://github.com/d3/d3-shape#stack_order).
@@ -495,7 +495,7 @@ stack(data, ['apples', 'bananas', 'cherries', 'dates'])
]
```
-### uniques(data: `Array`[, accessor: `String|Function`, transform: `boolean=true`])
+### uniques(data: `Array`[, accessor: `string|Function`, transform: `boolean=true`])
A function to get the unique values from a list. If **accessor** is specified, the uniqueness will be compared using that and, by default, the values in the returned list of unique values will be values returned by the accessor. Accessor can also be the string name of the key. Pass `false` to the **transform** argument if you want to return the original elements, which will be the first one that appears for every unique value. The default for **transform** is `true`.
diff --git a/src/lib/LayerCake.svelte b/src/lib/LayerCake.svelte
index a7b2dfbf..aaad0989 100644
--- a/src/lib/LayerCake.svelte
+++ b/src/lib/LayerCake.svelte
@@ -25,19 +25,19 @@
export let ssr = false;
/** @type {boolean} [pointerEvents=true] Whether to allow pointer events via CSS. Set this to `false` to set `pointer-events: none;` on all components, disabling all mouse interaction. */
export let pointerEvents = true;
- /** @type {String} [position='relative'] Determine the positioning of the wrapper div. Set this to `'absolute'` when you want to stack cakes. */
+ /** @type {string} [position='relative'] Determine the positioning of the wrapper div. Set this to `'absolute'` when you want to stack cakes. */
export let position = 'relative';
/** @type {boolean} [percentRange=false] 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. */
export let percentRange = false;
- /** @type {Number} [width=containerWidth] Override the automated width. */
+ /** @type {number} [width=containerWidth] Override the automated width. */
export let width = undefined;
- /** @type {Number} [height=containerHeight] Override the automated height. */
+ /** @type {number} [height=containerHeight] Override the automated height. */
export let height = undefined;
- /** @type {Number} [containerWidth=100] The bound container width. */
+ /** @type {number} [containerWidth=100] The bound container width. */
export let containerWidth = width || 100;
- /** @type {Number} [containerHeight=100] The bound container height. */
+ /** @type {number} [containerHeight=100] The bound container height. */
export let containerHeight = height || 100;
/** @type {Element|undefined} [element] The .layercake-container `<div>` tag. Useful for bindings. */
@@ -50,41 +50,42 @@
*
*/
- /** @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. */
+
+ /** @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<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. */
+ /** @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<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. */
+ /** @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<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. */
+ /** @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>|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]|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. */
+ /** @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]|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. */
+ /** @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]|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. */
+ /** @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]|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. */
+ /** @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. */
+ /** @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;
- /** @type {boolean|Number} [yNice=false] Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the y domain. */
+ /** @type {boolean|number} [yNice=false] Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the y domain. */
export let yNice = false;
- /** @type {boolean|Number} [zNice=false] Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the z domain. */
+ /** @type {boolean|number} [zNice=false] Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the z domain. */
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]|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. */
+ /** @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]|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. */
+ /** @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]|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. */
+ /** @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]|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. */
+ /** @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,13 +95,13 @@
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|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). */
+ /** @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|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). */
+ /** @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|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). */
+ /** @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|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). */
+ /** @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;
@@ -118,9 +119,9 @@
export let zDomainSort = true;
/** @type {boolean} [rDomainSort=true] Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
export let rDomainSort = true;
- /** @type {{top?: Number, right?: Number, bottom?: Number, left?: Number}} [padding={}] 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). */
+ /** @type {{top?: number, right?: number, bottom?: number, left?: number}} [padding={}] 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). */
export let padding = {};
- /** @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. */
+ /** @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<Object|Array<any>>|undefined} [flatData=data] A flat version of data. */
diff --git a/src/lib/helpers/findScaleName.js b/src/lib/helpers/findScaleName.js
index da3c3619..ef998823 100644
--- a/src/lib/helpers/findScaleName.js
+++ b/src/lib/helpers/findScaleName.js
@@ -9,7 +9,7 @@ function f(name, modifier = '') {
Get a D3 scale name
https://svelte.dev/repl/ec6491055208401ca41120c9c8a67737?version=3.49.0
@param {Function} scale A D3 scale
- @returns {String} The scale's name
+ @returns {string} The scale's name
*/
export default function findScaleName(scale) {
/**
diff --git a/src/lib/layouts/Canvas.svelte b/src/lib/layouts/Canvas.svelte
index be513bd7..bc10cc41 100644
--- a/src/lib/layouts/Canvas.svelte
+++ b/src/lib/layouts/Canvas.svelte
@@ -15,22 +15,22 @@
/** @type {CanvasRenderingContext2D|undefined} [context] The `<canvas>`'s 2d context. Useful for bindings. */
export let context = undefined;
- /** @type {Number|undefined} [zIndex] The layer's z-index. */
+ /** @type {number|undefined} [zIndex] The layer's z-index. */
export let zIndex = undefined;
/** @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. */
+ /** @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|undefined} [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|undefined} [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|undefined} [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 9fd42c91..a2ffa53a 100644
--- a/src/lib/layouts/Html.svelte
+++ b/src/lib/layouts/Html.svelte
@@ -10,22 +10,22 @@
/** @type {Element|undefined} [element] The layer's outermost `<div>` tag. Useful for bindings. */
export let element = undefined;
- /** @type {Number|undefined} [zIndex] The layer's z-index. */
+ /** @type {number|undefined} [zIndex] The layer's z-index. */
export let zIndex = undefined;
/** @type {boolean|undefined} [pointerEvents] Set this to `false` to set `pointer-events: none;` on the entire layer. */
export let pointerEvents = undefined;
- /** @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. */
+ /** @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|undefined} [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|undefined} [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|undefined} [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 90510068..1207a648 100644
--- a/src/lib/layouts/ScaledSvg.svelte
+++ b/src/lib/layouts/ScaledSvg.svelte
@@ -10,29 +10,29 @@
/** @type {Element|undefined} [element] The layer's `<svg>` tag. Useful for bindings. */
export let element = undefined;
- /** @type {Number|undefined} [zIndex] The layer's z-index. */
+ /** @type {number|undefined} [zIndex] The layer's z-index. */
export let zIndex = undefined;
/** @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. */
+ /** @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|undefined} [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|undefined} [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|undefined} [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|undefined} [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 055c8779..379723e8 100644
--- a/src/lib/layouts/Svg.svelte
+++ b/src/lib/layouts/Svg.svelte
@@ -11,25 +11,25 @@
/** @type {Element|undefined} [innerElement] The layer's `` tag. Useful for bindings. */
export let innerElement = undefined;
- /** @type {Number|undefined} [zIndex] The layer's z-index. */
+ /** @type {number|undefined} [zIndex] The layer's z-index. */
export let zIndex = undefined;
/** @type {boolean|undefined} [pointerEvents] Set this to `false` to set `pointer-events: none;` on the entire layer. */
export let pointerEvents = undefined;
- /** @type {String|undefined} [viewBox] A string passed to the `viewBox` property on the `