From c23c0fa1d1d73725f9f64dae1b03abc7ec95b6eb Mon Sep 17 00:00:00 2001 From: Robert Gieseke Date: Thu, 15 Aug 2024 09:52:57 +0200 Subject: [PATCH 1/9] Lower-case Number type synonym See discussion in #218 While 'Number' is a valid JSDoc type synonym the lower-case variant is used to avoid confusion. --- src/_components/AxisRadial.svelte | 8 +-- .../AxisX.percent-range.html.svelte | 10 ++-- src/_components/AxisX.svelte | 12 ++--- .../AxisXTop.percent-range.html.svelte | 10 ++-- src/_components/AxisXTop.svelte | 12 ++--- .../AxisY.percent-range.html.svelte | 14 +++--- src/_components/AxisY.svelte | 14 +++--- .../AxisYRight.percent-range.html.svelte | 14 +++--- src/_components/AxisYRight.svelte | 14 +++--- src/_components/Beeswarm.html.svelte | 6 +-- src/_components/Beeswarm.svelte | 6 +-- src/_components/BeeswarmForce.html.svelte | 8 +-- src/_components/BeeswarmForce.svelte | 8 +-- src/_components/Brush.html.svelte | 4 +- src/_components/CirclePack.html.svelte | 6 +-- src/_components/CirclePackForce.svelte | 6 +-- ...ClevelandDotPlot.percent-range.html.svelte | 2 +- src/_components/ClevelandDotPlot.svelte | 2 +- src/_components/Column.svelte | 2 +- src/_components/Map.canvas.svelte | 2 +- src/_components/Map.svg.svelte | 4 +- src/_components/MapLabels.html.svelte | 2 +- src/_components/MapLabels.svg.svelte | 2 +- src/_components/MapPoints.canvas.svelte | 4 +- src/_components/MapPoints.html.svelte | 6 +-- src/_components/MapPoints.svelte | 6 +-- src/_components/QuadTree.html.svelte | 2 +- .../QuadTree.percent-range.html.svelte | 2 +- src/_components/Radar.svelte | 8 +-- src/_components/Sankey.svelte | 4 +- src/_components/Scatter.canvas.svelte | 4 +- src/_components/Scatter.html.svelte | 4 +- src/_components/Scatter.svg.svelte | 4 +- src/_components/Scatter.webgl.svelte | 2 +- src/_components/SharedTooltip.html.svelte | 2 +- .../SharedTooltip.percent-range.html.svelte | 2 +- src/_components/Tooltip.html.svelte | 2 +- src/content/guide/03-layercake-props.md | 40 +++++++-------- .../guide/04-computed-context-values.md | 26 +++++----- .../guide/06-layout-component-props.md | 8 +-- src/content/guide/99-helper-functions.md | 4 +- src/lib/LayerCake.svelte | 50 +++++++++---------- src/lib/layouts/Canvas.svelte | 2 +- src/lib/layouts/Html.svelte | 2 +- src/lib/layouts/ScaledSvg.svelte | 4 +- src/lib/layouts/Svg.svelte | 2 +- src/lib/layouts/Webgl.svelte | 2 +- src/lib/lib/bin.js | 4 +- src/lib/lib/calcExtents.js | 2 +- src/lib/lib/calcUniques.js | 2 +- src/lib/lib/scaleCanvas.js | 6 +-- src/lib/lib/stack.js | 2 +- src/lib/lib/takeEvery.js | 2 +- src/lib/utils/makeAccessor.js | 2 +- src/lib/utils/padScale.js | 4 +- src/lib/utils/partialDomain.js | 6 +-- 56 files changed, 195 insertions(+), 195 deletions(-) diff --git a/src/_components/AxisRadial.svelte b/src/_components/AxisRadial.svelte index 2ba776070..e1fb8864e 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 424c702d4..4f23a725b 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,16 +27,16 @@ /** @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'`. */ diff --git a/src/_components/AxisX.svelte b/src/_components/AxisX.svelte index f8c54bb0a..126ad5334 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,19 +25,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=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 {number} i * @param {Boolean} sl */ function textAnchor(i, sl) { if (sl === true) { diff --git a/src/_components/AxisXTop.percent-range.html.svelte b/src/_components/AxisXTop.percent-range.html.svelte index 4eca44987..960377dc7 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,16 +27,16 @@ /** @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'`. */ diff --git a/src/_components/AxisXTop.svelte b/src/_components/AxisXTop.svelte index 8a23c3ea7..6013b9afe 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,19 +25,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 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 {number} i * @param {Boolean} sl */ function textAnchor(i, sl) { if (sl === true) { diff --git a/src/_components/AxisY.percent-range.html.svelte b/src/_components/AxisY.percent-range.html.svelte index 0001212c7..65accb29e 100644 --- a/src/_components/AxisY.percent-range.html.svelte +++ b/src/_components/AxisY.percent-range.html.svelte @@ -21,25 +21,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=-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'`. */ @@ -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 435819e3a..2f3e2b961 100644 --- a/src/_components/AxisY.svelte +++ b/src/_components/AxisY.svelte @@ -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 f821c4b6c..3cdf7ad40 100644 --- a/src/_components/AxisYRight.percent-range.html.svelte +++ b/src/_components/AxisYRight.percent-range.html.svelte @@ -21,25 +21,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=-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'`. */ @@ -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 e343896e9..bc1f9dd88 100644 --- a/src/_components/AxisYRight.svelte +++ b/src/_components/AxisYRight.svelte @@ -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/Beeswarm.html.svelte b/src/_components/Beeswarm.html.svelte index 86276cae6..44d784978 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. */ 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 2f5f60912..6603e8ae1 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. */ 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 206c1bdb3..0c834e805 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. */ 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 7e5ac18c6..547c1a678 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. */ 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 f792d632a..27057d90d 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 4359cd838..3f9a0b742 100644 --- a/src/_components/CirclePack.html.svelte +++ b/src/_components/CirclePack.html.svelte @@ -27,7 +27,7 @@ /** @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. */ @@ -36,13 +36,13 @@ /** @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 aca57ecea..2a299a0fc 100644 --- a/src/_components/CirclePackForce.svelte +++ b/src/_components/CirclePackForce.svelte @@ -8,10 +8,10 @@ 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`. */ @@ -20,7 +20,7 @@ /** @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 7369821c2..2a2fdb51e 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 446cd938b..52ec3d31d 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 43051dc94..9937dab9b 100644 --- a/src/_components/Column.svelte +++ b/src/_components/Column.svelte @@ -13,7 +13,7 @@ /** @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/Map.canvas.svelte b/src/_components/Map.canvas.svelte index 401128684..93593eff1 100644 --- a/src/_components/Map.canvas.svelte +++ b/src/_components/Map.canvas.svelte @@ -17,7 +17,7 @@ /** @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. */ diff --git a/src/_components/Map.svg.svelte b/src/_components/Map.svg.svelte index 6092a7a88..6ad08bb81 100644 --- a/src/_components/Map.svg.svelte +++ b/src/_components/Map.svg.svelte @@ -12,7 +12,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 {String|undefined} [fill] - The shape's fill color. By default, the fill will be determined by the z-scale, unless this prop is set. */ @@ -21,7 +21,7 @@ /** @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 935bd35ef..3b711c0af 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 13cd0b5a9..1c9e82275 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 fb1eeba4f..64c04af33 100644 --- a/src/_components/MapPoints.canvas.svelte +++ b/src/_components/MapPoints.canvas.svelte @@ -13,7 +13,7 @@ /** @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. */ @@ -22,7 +22,7 @@ /** @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 b7795fd39..c70528844 100644 --- a/src/_components/MapPoints.html.svelte +++ b/src/_components/MapPoints.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} [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. */ @@ -19,10 +19,10 @@ /** @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 b45c19026..4ec5877b5 100644 --- a/src/_components/MapPoints.svelte +++ b/src/_components/MapPoints.svelte @@ -13,7 +13,7 @@ */ 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. */ @@ -22,10 +22,10 @@ /** @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 0fb97542b..a0ed61797 100644 --- a/src/_components/QuadTree.html.svelte +++ b/src/_components/QuadTree.html.svelte @@ -20,7 +20,7 @@ /** @type {String} [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. */ diff --git a/src/_components/QuadTree.percent-range.html.svelte b/src/_components/QuadTree.percent-range.html.svelte index 8f85c4833..d1b015df4 100644 --- a/src/_components/QuadTree.percent-range.html.svelte +++ b/src/_components/QuadTree.percent-range.html.svelte @@ -20,7 +20,7 @@ /** @type {String} [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. */ diff --git a/src/_components/Radar.svelte b/src/_components/Radar.svelte index d7d093795..a5b63dbca 100644 --- a/src/_components/Radar.svelte +++ b/src/_components/Radar.svelte @@ -14,13 +14,13 @@ /** @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. */ @@ -29,7 +29,7 @@ /** @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 afdeef69b..ad4cb6d7d 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 287c71934..a87afdb8e 100644 --- a/src/_components/Scatter.canvas.svelte +++ b/src/_components/Scatter.canvas.svelte @@ -10,7 +10,7 @@ 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. */ @@ -19,7 +19,7 @@ /** @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 3da44563d..9e30837bb 100644 --- a/src/_components/Scatter.html.svelte +++ b/src/_components/Scatter.html.svelte @@ -7,7 +7,7 @@ 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. */ @@ -16,7 +16,7 @@ /** @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 1a8743786..e4c6bda68 100644 --- a/src/_components/Scatter.svg.svelte +++ b/src/_components/Scatter.svg.svelte @@ -7,7 +7,7 @@ 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. */ @@ -16,7 +16,7 @@ /** @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 a688205dc..365c6b50e 100644 --- a/src/_components/Scatter.webgl.svelte +++ b/src/_components/Scatter.webgl.svelte @@ -8,7 +8,7 @@ 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. */ diff --git a/src/_components/SharedTooltip.html.svelte b/src/_components/SharedTooltip.html.svelte index cb5cc0358..ea7fcf922 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 2f8766109..6ddf930f9 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 bdc608779..a3c4ddf25 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/content/guide/03-layercake-props.md b/src/content/guide/03-layercake-props.md index 08299021f..7ed5c0359 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. diff --git a/src/content/guide/04-computed-context-values.md b/src/content/guide/04-computed-context-values.md index fde6986bc..d44543731 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 f11ee7b03..0b26c6c5c 100644 --- a/src/content/guide/06-layout-component-props.md +++ b/src/content/guide/06-layout-component-props.md @@ -4,7 +4,7 @@ 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: @@ -13,7 +13,7 @@ The Svg and ScaledSvg layout components also accept: 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. @@ -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 71ad03dfa..612d28d02 100644 --- a/src/content/guide/99-helper-functions.md +++ b/src/content/guide/99-helper-functions.md @@ -16,7 +16,7 @@ The component has the following props: - 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: @@ -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. diff --git a/src/lib/LayerCake.svelte b/src/lib/LayerCake.svelte index 37835a30c..efae07702 100644 --- a/src/lib/LayerCake.svelte +++ b/src/lib/LayerCake.svelte @@ -30,14 +30,14 @@ /** @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,41 @@ * */ - /** @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 +94,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 +118,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/layouts/Canvas.svelte b/src/lib/layouts/Canvas.svelte index 27d37e75b..2171de139 100644 --- a/src/lib/layouts/Canvas.svelte +++ b/src/lib/layouts/Canvas.svelte @@ -15,7 +15,7 @@ /** @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. */ diff --git a/src/lib/layouts/Html.svelte b/src/lib/layouts/Html.svelte index 72e0529c2..b9d0a25d1 100644 --- a/src/lib/layouts/Html.svelte +++ b/src/lib/layouts/Html.svelte @@ -10,7 +10,7 @@ /** @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. */ diff --git a/src/lib/layouts/ScaledSvg.svelte b/src/lib/layouts/ScaledSvg.svelte index a13c1a2f5..6668986ba 100644 --- a/src/lib/layouts/ScaledSvg.svelte +++ b/src/lib/layouts/ScaledSvg.svelte @@ -10,13 +10,13 @@ /** @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. */ diff --git a/src/lib/layouts/Svg.svelte b/src/lib/layouts/Svg.svelte index 96453cb64..d55b50083 100644 --- a/src/lib/layouts/Svg.svelte +++ b/src/lib/layouts/Svg.svelte @@ -11,7 +11,7 @@ /** @type {Element|undefined} [innerElement] The layer's `<g>` 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. */ diff --git a/src/lib/layouts/Webgl.svelte b/src/lib/layouts/Webgl.svelte index 9656981f9..084c63f14 100644 --- a/src/lib/layouts/Webgl.svelte +++ b/src/lib/layouts/Webgl.svelte @@ -9,7 +9,7 @@ /** @type {HTMLCanvasElement|undefined} [element] The `<canvas>` 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. */ diff --git a/src/lib/lib/bin.js b/src/lib/lib/bin.js index 1d91f6696..b911f3e24 100644 --- a/src/lib/lib/bin.js +++ b/src/lib/lib/bin.js @@ -35,10 +35,10 @@ ] @param {Array} data The data to be binned. - @param {String|Number|Function} [value] Optional. An accessor function passed to `bin.value()`. Defaults to an identity function. If this is a string or number, it will be transformed into an accessor for that key. + @param {String|number|Function} [value] Optional. An accessor function passed to `bin.value()`. Defaults to an identity function. If this is a string or number, it will be transformed into an accessor for that key. @param {Object} options Options object @param {Array} [options.domain] Optional. The domain passed to `bin.domain()`. Pass in your own domain if you'd like, otherwise computed automatically. - @param {Number|Array|Function} [options.thresholds] Optional. The thresholds passed to `bin.thresholds()`, otherwise computed automatically. + @param {number|Array|Function} [options.thresholds] Optional. The thresholds passed to `bin.thresholds()`, otherwise computed automatically. @returns {Array} binData An array of bin arrays */ diff --git a/src/lib/lib/calcExtents.js b/src/lib/lib/calcExtents.js index c8b3de11e..1ff5d9cca 100644 --- a/src/lib/lib/calcExtents.js +++ b/src/lib/lib/calcExtents.js @@ -8,7 +8,7 @@ `{ x: [0, 10], y: [-10, 10] }` @param {Array} data A flat array of objects. @param {{x?: Function, y?: Function, z?: Function, r?: Function}} fields An object containing `x`, `y`, `r` or `z` keys that equal an accessor function. If an accessor function returns an array of values, each value will also be evaluated. - @returns {{x?: [min: Number, max: Number]|[min: String, max: String], y?: [min: Number, max: Number]|[min: String, max: String], z?: [min: Number, max: Number]|[min: String, max: String], r?: [min: Number, max: Number]|[min: String, max: String]}} An object with the same structure as `fields` but instead of an accessor, each key contains an array of a min and a max. + @returns {{x?: [min: number, max: number]|[min: String, max: String], y?: [min: number, max: number]|[min: String, max: String], z?: [min: number, max: number]|[min: String, max: String], r?: [min: number, max: number]|[min: String, max: String]}} An object with the same structure as `fields` but instead of an accessor, each key contains an array of a min and a max. */ export default function calcExtents(data, fields) { if (!Array.isArray(data)) { diff --git a/src/lib/lib/calcUniques.js b/src/lib/lib/calcUniques.js index d4ecc07dd..c801b0592 100644 --- a/src/lib/lib/calcUniques.js +++ b/src/lib/lib/calcUniques.js @@ -11,7 +11,7 @@ import { ascending, InternSet } from 'd3-array'; @param {Array} data A flat array of. @param {{x?: Function, y?: Function, z?: Function, r?: Function}} fields An object containing `x`, `y`, `r` or `z` keys that equal an accessor function. If an accessor function returns an array of values, each value will also be evaluated. @param {{ sort?: Boolean, x?: Boolean , y?: Boolean , z?: Boolean , r?: Boolean }} sortOptions An object containing `sort`, `x`, `y`, `r` or `z` keys with Boolean values that designate how results should be sorted. Default is un-sorted. Pass in `sort: true` to sort all fields or specify fields individually. - @returns {{x?: [min: Number, max: Number]|[min: String, max: String], y?: [min: Number, max: Number]|[min: String, max: String], z?: [min: Number, max: Number]|[min: String, max: String], r?: [min: Number, max: Number]|[min: String, max: String]}} An object with the same structure as `fields` but instead of an accessor, each key contains an array of unique items. + @returns {{x?: [min: number, max: number]|[min: String, max: String], y?: [min: number, max: number]|[min: String, max: String], z?: [min: number, max: number]|[min: String, max: String], r?: [min: number, max: number]|[min: String, max: String]}} An object with the same structure as `fields` but instead of an accessor, each key contains an array of unique items. */ export default function calcUniques(data, fields, sortOptions = {}) { if (!Array.isArray(data)) { diff --git a/src/lib/lib/scaleCanvas.js b/src/lib/lib/scaleCanvas.js index 6d4f5d64d..e53721a9c 100644 --- a/src/lib/lib/scaleCanvas.js +++ b/src/lib/lib/scaleCanvas.js @@ -1,9 +1,9 @@ /** Scales a canvas. From Paul Lewis: http://www.html5rocks.com/en/tutorials/canvas/hidpi/ @param {CanvasRenderingContext2D} ctx A canvas context. - @param {Number} width The container width. - @param {Number} height The container height. - @returns {{width: Number, height: Number}} + @param {number} width The container width. + @param {number} height The container height. + @returns {{width: number, height: number}} */ export default function (ctx, width, height) { const dpr = window.devicePixelRatio || 1; diff --git a/src/lib/lib/stack.js b/src/lib/lib/stack.js index 15f7cdae8..bf83ada48 100644 --- a/src/lib/lib/stack.js +++ b/src/lib/lib/stack.js @@ -25,7 +25,7 @@ @param {Array} data The data to be stacked. @param {Array|Function} keys The group names to stack, passed to `stack.keys()`. @param {Object} options Options object - @param {String|Number|Function} [options.value] An accessor function passed to `stack.value()`. If this is a string or number, it will be transformed into an accessor for that key. + @param {String|number|Function} [options.value] An accessor function passed to `stack.value()`. If this is a string or number, it will be transformed into an accessor for that key. @param {Array|Function} [options.order] The stack order passed to `stack.order()`. @param {Function} [options.offset] The offset function passed to `stack.offset()`. diff --git a/src/lib/lib/takeEvery.js b/src/lib/lib/takeEvery.js index f5ad9a224..a4d8d5f25 100644 --- a/src/lib/lib/takeEvery.js +++ b/src/lib/lib/takeEvery.js @@ -3,7 +3,7 @@ useful for slimming down the number of ticks in an axis @param {Array} list A list of items - @param {Number} n Take one item every n times. So if you set this to 5, every fifth element will be taken, including the 0th. + @param {number} n Take one item every n times. So if you set this to 5, every fifth element will be taken, including the 0th. @returns {Array} */ export default function takeEvery(list, n) { diff --git a/src/lib/utils/makeAccessor.js b/src/lib/utils/makeAccessor.js index f38a1841e..d0b8f2dae 100644 --- a/src/lib/utils/makeAccessor.js +++ b/src/lib/utils/makeAccessor.js @@ -1,7 +1,7 @@ import canBeZero from './canBeZero.js'; /** Make an accessor from a string, number, function or an array of the combination of any - @param {String|Number|Function|Array} acc The accessor function, key or list of them. + @param {String|number|Function|Array} acc The accessor function, key or list of them. @returns {Function} An accessor function. */ export default function makeAccessor(acc) { diff --git a/src/lib/utils/padScale.js b/src/lib/utils/padScale.js index 0c132ef2e..df080ed86 100644 --- a/src/lib/utils/padScale.js +++ b/src/lib/utils/padScale.js @@ -6,8 +6,8 @@ Padding contributed by @veltman. See here for discussion of transforms: https://github.com/d3/d3-scale/issues/150 @param {Function} scale A D3 scale funcion - @param {Number[]} padding A two-value array of numbers specifying padding in pixels - @returns {Number[]} The padded domain + @param {number[]} padding A two-value array of numbers specifying padding in pixels + @returns {number[]} The padded domain */ import isOrdinalDomain from '../helpers/isOrdinalDomain.js'; import getPadFunctions from '../helpers/getPadFunctions.js'; diff --git a/src/lib/utils/partialDomain.js b/src/lib/utils/partialDomain.js index 8637e1166..228bd3465 100644 --- a/src/lib/utils/partialDomain.js +++ b/src/lib/utils/partialDomain.js @@ -2,9 +2,9 @@ If we have a domain from settings (the directive), fill in any null values with ones from our measured extents otherwise, return the measured extent - @param {Number[]} domain A two-value array of numbers - @param {Number[]} directive A two-value array of numbers that will have any nulls filled in from the `domain` array - @returns {Number[]} The filled in domain + @param {number[]} domain A two-value array of numbers + @param {number[]} directive A two-value array of numbers that will have any nulls filled in from the `domain` array + @returns {number[]} The filled in domain */ export default function partialDomain(domain = [], directive) { if (Array.isArray(directive) === true) { From 9cd1966213d05c8f036b743a4b5311151f69bd69 Mon Sep 17 00:00:00 2001 From: Robert Gieseke <rob.g@web.de> Date: Thu, 15 Aug 2024 11:01:53 +0200 Subject: [PATCH 2/9] Lower-case String type synonym See discussion in #218 While 'String' is a valid JSDoc type synonym the lower-case variant is used to avoid confusion. --- src/_components/Area-D3.svelte | 2 +- src/_components/Area.svelte | 4 +-- src/_components/ArrowheadMarker.svelte | 4 +-- src/_components/Arrows.svelte | 4 +-- .../AxisX.percent-range.html.svelte | 2 +- .../AxisXTop.percent-range.html.svelte | 2 +- .../AxisY.percent-range.html.svelte | 6 ++--- src/_components/AxisY.svelte | 4 +-- .../AxisYRight.percent-range.html.svelte | 6 ++--- src/_components/AxisYRight.svelte | 4 +-- src/_components/Bar.svelte | 2 +- src/_components/Beeswarm.html.svelte | 2 +- src/_components/Beeswarm.svelte | 2 +- src/_components/BeeswarmForce.html.svelte | 2 +- src/_components/BeeswarmForce.svelte | 2 +- src/_components/CirclePack.html.svelte | 14 +++++----- src/_components/CirclePackForce.svelte | 4 +-- src/_components/Column.svelte | 4 +-- src/_components/Key.html.svelte | 4 +-- src/_components/Line-D3.svelte | 2 +- src/_components/Line.svelte | 2 +- src/_components/Map.canvas.svelte | 4 +-- src/_components/Map.svg.svelte | 4 +-- src/_components/MapPoints.canvas.svelte | 4 +-- src/_components/MapPoints.html.svelte | 4 +-- src/_components/MapPoints.svelte | 4 +-- src/_components/QuadTree.html.svelte | 4 +-- .../QuadTree.percent-range.html.svelte | 4 +-- src/_components/Radar.svelte | 8 +++--- src/_components/Scatter.canvas.svelte | 4 +-- src/_components/Scatter.html.svelte | 4 +-- src/_components/Scatter.svg.svelte | 4 +-- src/_components/Scatter.webgl.svelte | 2 +- src/_components/Voronoi.svelte | 2 +- src/content/guide/03-layercake-props.md | 26 +++++++++---------- .../guide/06-layout-component-props.md | 6 ++--- src/content/guide/99-helper-functions.md | 24 ++++++++--------- src/lib/LayerCake.svelte | 26 +++++++++---------- src/lib/helpers/findScaleName.js | 2 +- src/lib/layouts/Canvas.svelte | 8 +++--- src/lib/layouts/Html.svelte | 8 +++--- src/lib/layouts/ScaledSvg.svelte | 10 +++---- src/lib/layouts/Svg.svelte | 10 +++---- src/lib/layouts/Webgl.svelte | 8 +++--- src/lib/lib/bin.js | 2 +- src/lib/lib/calcExtents.js | 2 +- src/lib/lib/calcUniques.js | 2 +- src/lib/lib/flatten.js | 2 +- src/lib/lib/groupLonger.js | 6 ++--- src/lib/lib/stack.js | 2 +- src/lib/lib/uniques.js | 2 +- src/lib/utils/makeAccessor.js | 2 +- 52 files changed, 139 insertions(+), 139 deletions(-) diff --git a/src/_components/Area-D3.svelte b/src/_components/Area-D3.svelte index 88f847426..243b51e77 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 9c499f5b4..6b0a30caa 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 40a9a85a4..e19c81f64 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. --> <script> - /** @type {String} [fill='#000'] – The arrowhead's fill color. */ + /** @type {string} [fill='#000'] – The arrowhead's fill color. */ export let fill = '#000'; - /** @type {String} [stroke='#000'] – The arrowhead's fill color. */ + /** @type {string} [stroke='#000'] – The arrowhead's fill color. */ export let stroke = '#000'; </script> diff --git a/src/_components/Arrows.svelte b/src/_components/Arrows.svelte index b31272f2c..818dabf80 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 `<LayerCake>` 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 `<LayerCake>` component. This is used to crawl the DOM for the text annotations. */ export let annotationClass = '.layercake-annotation'; let container; diff --git a/src/_components/AxisX.percent-range.html.svelte b/src/_components/AxisX.percent-range.html.svelte index 424c702d4..fe35fefe7 100644 --- a/src/_components/AxisX.percent-range.html.svelte +++ b/src/_components/AxisX.percent-range.html.svelte @@ -39,7 +39,7 @@ /** @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.percent-range.html.svelte b/src/_components/AxisXTop.percent-range.html.svelte index 4eca44987..cd3d2828e 100644 --- a/src/_components/AxisXTop.percent-range.html.svelte +++ b/src/_components/AxisXTop.percent-range.html.svelte @@ -39,7 +39,7 @@ /** @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/AxisY.percent-range.html.svelte b/src/_components/AxisY.percent-range.html.svelte index 0001212c7..4d0a391b2 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. */ @@ -42,7 +42,7 @@ /** @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'; @@ -57,7 +57,7 @@ : $yScale.ticks(ticks); /** @param {Number} sum - * @param {String} val */ + * @param {string} val */ function calcStringLength(sum, val) { if (val === ',' || val === '.') return sum + charPixelWidth * 0.5; return sum + charPixelWidth; diff --git a/src/_components/AxisY.svelte b/src/_components/AxisY.svelte index 435819e3a..2bf762bf9 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. */ @@ -52,7 +52,7 @@ : $yScale.ticks(ticks); /** @param {Number} sum - * @param {String} val */ + * @param {string} val */ function calcStringLength(sum, val) { if (val === ',' || val === '.') return sum + charPixelWidth * 0.5; return sum + charPixelWidth; diff --git a/src/_components/AxisYRight.percent-range.html.svelte b/src/_components/AxisYRight.percent-range.html.svelte index f821c4b6c..e220fa0a8 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. */ @@ -42,7 +42,7 @@ /** @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'; @@ -57,7 +57,7 @@ : $yScale.ticks(ticks); /** @param {Number} sum - * @param {String} val */ + * @param {string} val */ function calcStringLength(sum, val) { if (val === ',' || val === '.') return sum + charPixelWidth * 0.5; return sum + charPixelWidth; diff --git a/src/_components/AxisYRight.svelte b/src/_components/AxisYRight.svelte index e343896e9..50a51014f 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. */ @@ -52,7 +52,7 @@ : $yScale.ticks(ticks); /** @param {Number} sum - * @param {String} val */ + * @param {string} val */ function calcStringLength(sum, val) { if (val === ',' || val === '.') return sum + charPixelWidth * 0.5; return sum + charPixelWidth; diff --git a/src/_components/Bar.svelte b/src/_components/Bar.svelte index 9ff9cc9bc..69513fdb6 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'; </script> diff --git a/src/_components/Beeswarm.html.svelte b/src/_components/Beeswarm.html.svelte index 86276cae6..c9fa54f4a 100644 --- a/src/_components/Beeswarm.html.svelte +++ b/src/_components/Beeswarm.html.svelte @@ -13,7 +13,7 @@ /** @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. */ diff --git a/src/_components/Beeswarm.svelte b/src/_components/Beeswarm.svelte index 2f5f60912..0d423da4d 100644 --- a/src/_components/Beeswarm.svelte +++ b/src/_components/Beeswarm.svelte @@ -13,7 +13,7 @@ /** @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 */ diff --git a/src/_components/BeeswarmForce.html.svelte b/src/_components/BeeswarmForce.html.svelte index 206c1bdb3..739d68781 100644 --- a/src/_components/BeeswarmForce.html.svelte +++ b/src/_components/BeeswarmForce.html.svelte @@ -16,7 +16,7 @@ /** @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. */ diff --git a/src/_components/BeeswarmForce.svelte b/src/_components/BeeswarmForce.svelte index 7e5ac18c6..a733fc0a0 100644 --- a/src/_components/BeeswarmForce.svelte +++ b/src/_components/BeeswarmForce.svelte @@ -16,7 +16,7 @@ /** @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). */ diff --git a/src/_components/CirclePack.html.svelte b/src/_components/CirclePack.html.svelte index 4359cd838..adf8094a7 100644 --- a/src/_components/CirclePack.html.svelte +++ b/src/_components/CirclePack.html.svelte @@ -9,31 +9,31 @@ 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. */ 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. */ diff --git a/src/_components/CirclePackForce.svelte b/src/_components/CirclePackForce.svelte index aca57ecea..b9a2da57c 100644 --- a/src/_components/CirclePackForce.svelte +++ b/src/_components/CirclePackForce.svelte @@ -14,10 +14,10 @@ /** @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. */ diff --git a/src/_components/Column.svelte b/src/_components/Column.svelte index 43051dc94..01755470e 100644 --- a/src/_components/Column.svelte +++ b/src/_components/Column.svelte @@ -7,10 +7,10 @@ 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. */ diff --git a/src/_components/Key.html.svelte b/src/_components/Key.html.svelte index 7097b57e7..cce793235 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 6465348f5..f49369163 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 aeb917237..29a43cc25 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 401128684..fc80033cf 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. */ 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 6092a7a88..32566e8b2 100644 --- a/src/_components/Map.svg.svelte +++ b/src/_components/Map.svg.svelte @@ -15,10 +15,10 @@ /** @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. */ diff --git a/src/_components/MapPoints.canvas.svelte b/src/_components/MapPoints.canvas.svelte index fb1eeba4f..19fe36d07 100644 --- a/src/_components/MapPoints.canvas.svelte +++ b/src/_components/MapPoints.canvas.svelte @@ -16,10 +16,10 @@ /** @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. */ diff --git a/src/_components/MapPoints.html.svelte b/src/_components/MapPoints.html.svelte index b7795fd39..c6507b41c 100644 --- a/src/_components/MapPoints.html.svelte +++ b/src/_components/MapPoints.html.svelte @@ -13,10 +13,10 @@ /** @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. */ diff --git a/src/_components/MapPoints.svelte b/src/_components/MapPoints.svelte index b45c19026..bdcaefa76 100644 --- a/src/_components/MapPoints.svelte +++ b/src/_components/MapPoints.svelte @@ -16,10 +16,10 @@ /** @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. */ diff --git a/src/_components/QuadTree.html.svelte b/src/_components/QuadTree.html.svelte index 0fb97542b..59a15138f 100644 --- a/src/_components/QuadTree.html.svelte +++ b/src/_components/QuadTree.html.svelte @@ -14,10 +14,10 @@ let found = {}; let e = {}; - /** @type {String} [x='x'] – The dimension to search across when moving the mouse left and right. */ + /** @type {string} [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 {string} [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. */ diff --git a/src/_components/QuadTree.percent-range.html.svelte b/src/_components/QuadTree.percent-range.html.svelte index 8f85c4833..9bb267c31 100644 --- a/src/_components/QuadTree.percent-range.html.svelte +++ b/src/_components/QuadTree.percent-range.html.svelte @@ -14,10 +14,10 @@ let found = {}; let e = {}; - /** @type {String} [x='x'] - The dimension to search across when moving the mouse left and right. */ + /** @type {string} [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 {string} [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. */ diff --git a/src/_components/Radar.svelte b/src/_components/Radar.svelte index d7d093795..b6679416f 100644 --- a/src/_components/Radar.svelte +++ b/src/_components/Radar.svelte @@ -8,10 +8,10 @@ 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. */ @@ -23,10 +23,10 @@ /** @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. */ diff --git a/src/_components/Scatter.canvas.svelte b/src/_components/Scatter.canvas.svelte index 287c71934..b47d756e7 100644 --- a/src/_components/Scatter.canvas.svelte +++ b/src/_components/Scatter.canvas.svelte @@ -13,10 +13,10 @@ /** @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. */ diff --git a/src/_components/Scatter.html.svelte b/src/_components/Scatter.html.svelte index 3da44563d..60962c799 100644 --- a/src/_components/Scatter.html.svelte +++ b/src/_components/Scatter.html.svelte @@ -10,10 +10,10 @@ /** @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. */ diff --git a/src/_components/Scatter.svg.svelte b/src/_components/Scatter.svg.svelte index 1a8743786..f31a29c7a 100644 --- a/src/_components/Scatter.svg.svelte +++ b/src/_components/Scatter.svg.svelte @@ -10,10 +10,10 @@ /** @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. */ diff --git a/src/_components/Scatter.webgl.svelte b/src/_components/Scatter.webgl.svelte index a688205dc..a0b61511e 100644 --- a/src/_components/Scatter.webgl.svelte +++ b/src/_components/Scatter.webgl.svelte @@ -11,7 +11,7 @@ /** @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/Voronoi.svelte b/src/_components/Voronoi.svelte index 51009a928..350a2e09e 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 08299021f..52ad48f06 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. @@ -281,7 +281,7 @@ Same as [xNice](/guide#xnice) but for the z domain. Same as [xNice](/guide#xnice) but for the r domain. -### xRange `Function|Array:[min: Number, max: Number]|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/06-layout-component-props.md b/src/content/guide/06-layout-component-props.md index f11ee7b03..0211224fc 100644 --- a/src/content/guide/06-layout-component-props.md +++ b/src/content/guide/06-layout-component-props.md @@ -4,12 +4,12 @@ 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: @@ -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`. diff --git a/src/content/guide/99-helper-functions.md b/src/content/guide/99-helper-functions.md index 71ad03dfa..fe14838d6 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,7 +12,7 @@ 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). @@ -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: @@ -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 37835a30c..a0539cf8f 100644 --- a/src/lib/LayerCake.svelte +++ b/src/lib/LayerCake.svelte @@ -25,7 +25,7 @@ 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; @@ -50,25 +50,25 @@ * */ - /** @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. */ export let xNice = false; @@ -94,13 +94,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; diff --git a/src/lib/helpers/findScaleName.js b/src/lib/helpers/findScaleName.js index da3c3619a..ef9988230 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 27d37e75b..dd6e0c590 100644 --- a/src/lib/layouts/Canvas.svelte +++ b/src/lib/layouts/Canvas.svelte @@ -21,16 +21,16 @@ /** @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 72e0529c2..da46e31e3 100644 --- a/src/lib/layouts/Html.svelte +++ b/src/lib/layouts/Html.svelte @@ -16,16 +16,16 @@ /** @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 a13c1a2f5..d0a67be0b 100644 --- a/src/lib/layouts/ScaledSvg.svelte +++ b/src/lib/layouts/ScaledSvg.svelte @@ -19,20 +19,20 @@ /** @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 96453cb64..0de3090f5 100644 --- a/src/lib/layouts/Svg.svelte +++ b/src/lib/layouts/Svg.svelte @@ -17,19 +17,19 @@ /** @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 `` tag. */ + /** @type {string|undefined} [viewBox] A string passed to the `viewBox` property on the `` tag. */ export let viewBox = undefined; - /** @type {String|undefined} [label] A string passed to the `aria-label` property on the `` tag. */ + /** @type {string|undefined} [label] A string passed to the `aria-label` property on the `` tag. */ export let label = undefined; - /** @type {String|undefined} [labelledBy] A string passed to the `aria-labelledby property` on the `` tag. */ + /** @type {string|undefined} [labelledBy] A string passed to the `aria-labelledby property` on the `` tag. */ export let labelledBy = undefined; - /** @type {String|undefined} [describedBy] A string passed to the `aria-describedby` property on the `` tag. */ + /** @type {string|undefined} [describedBy] A string passed to the `aria-describedby` property on the `` tag. */ export let describedBy = undefined; - /** @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. */ + /** @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; const { containerWidth, containerHeight, padding } = getContext('LayerCake'); diff --git a/src/lib/layouts/Webgl.svelte b/src/lib/layouts/Webgl.svelte index 9656981f9..51b7c0d4b 100644 --- a/src/lib/layouts/Webgl.svelte +++ b/src/lib/layouts/Webgl.svelte @@ -21,16 +21,16 @@ /** @type {WebGLRenderingContext|undefined} [context] The ``'s WebGL context. Useful for bindings. */ export let context = 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` property on the `` tag. */ + /** @type {string|undefined} [label] A string passed to the `aria-label` property on the `` tag. */ export let label = undefined; - /** @type {String|undefined} [labelledBy] A string passed to the `aria-labelledby` property on the `` tag. */ + /** @type {string|undefined} [labelledBy] A string passed to the `aria-labelledby` property on the `` tag. */ export let labelledBy = undefined; - /** @type {String|undefined} [describedBy] A string passed to the `aria-describedby` property on the `` tag. */ + /** @type {string|undefined} [describedBy] A string passed to the `aria-describedby` property on the `` tag. */ export let describedBy = undefined; let testGl; diff --git a/src/lib/lib/bin.js b/src/lib/lib/bin.js index 1d91f6696..d81dc07b2 100644 --- a/src/lib/lib/bin.js +++ b/src/lib/lib/bin.js @@ -35,7 +35,7 @@ ] @param {Array} data The data to be binned. - @param {String|Number|Function} [value] Optional. An accessor function passed to `bin.value()`. Defaults to an identity function. If this is a string or number, it will be transformed into an accessor for that key. + @param {string|Number|Function} [value] Optional. An accessor function passed to `bin.value()`. Defaults to an identity function. If this is a string or number, it will be transformed into an accessor for that key. @param {Object} options Options object @param {Array} [options.domain] Optional. The domain passed to `bin.domain()`. Pass in your own domain if you'd like, otherwise computed automatically. @param {Number|Array|Function} [options.thresholds] Optional. The thresholds passed to `bin.thresholds()`, otherwise computed automatically. diff --git a/src/lib/lib/calcExtents.js b/src/lib/lib/calcExtents.js index c8b3de11e..812c22dbc 100644 --- a/src/lib/lib/calcExtents.js +++ b/src/lib/lib/calcExtents.js @@ -8,7 +8,7 @@ `{ x: [0, 10], y: [-10, 10] }` @param {Array} data A flat array of objects. @param {{x?: Function, y?: Function, z?: Function, r?: Function}} fields An object containing `x`, `y`, `r` or `z` keys that equal an accessor function. If an accessor function returns an array of values, each value will also be evaluated. - @returns {{x?: [min: Number, max: Number]|[min: String, max: String], y?: [min: Number, max: Number]|[min: String, max: String], z?: [min: Number, max: Number]|[min: String, max: String], r?: [min: Number, max: Number]|[min: String, max: String]}} An object with the same structure as `fields` but instead of an accessor, each key contains an array of a min and a max. + @returns {{x?: [min: Number, max: Number]|[min: string, max: string], y?: [min: Number, max: Number]|[min: string, max: string], z?: [min: Number, max: Number]|[min: string, max: string], r?: [min: Number, max: Number]|[min: string, max: string]}} An object with the same structure as `fields` but instead of an accessor, each key contains an array of a min and a max. */ export default function calcExtents(data, fields) { if (!Array.isArray(data)) { diff --git a/src/lib/lib/calcUniques.js b/src/lib/lib/calcUniques.js index d4ecc07dd..5551d8cc7 100644 --- a/src/lib/lib/calcUniques.js +++ b/src/lib/lib/calcUniques.js @@ -11,7 +11,7 @@ import { ascending, InternSet } from 'd3-array'; @param {Array} data A flat array of. @param {{x?: Function, y?: Function, z?: Function, r?: Function}} fields An object containing `x`, `y`, `r` or `z` keys that equal an accessor function. If an accessor function returns an array of values, each value will also be evaluated. @param {{ sort?: Boolean, x?: Boolean , y?: Boolean , z?: Boolean , r?: Boolean }} sortOptions An object containing `sort`, `x`, `y`, `r` or `z` keys with Boolean values that designate how results should be sorted. Default is un-sorted. Pass in `sort: true` to sort all fields or specify fields individually. - @returns {{x?: [min: Number, max: Number]|[min: String, max: String], y?: [min: Number, max: Number]|[min: String, max: String], z?: [min: Number, max: Number]|[min: String, max: String], r?: [min: Number, max: Number]|[min: String, max: String]}} An object with the same structure as `fields` but instead of an accessor, each key contains an array of unique items. + @returns {{x?: [min: Number, max: Number]|[min: string, max: string], y?: [min: Number, max: Number]|[min: string, max: string], z?: [min: Number, max: Number]|[min: string, max: string], r?: [min: Number, max: Number]|[min: string, max: string]}} An object with the same structure as `fields` but instead of an accessor, each key contains an array of unique items. */ export default function calcUniques(data, fields, sortOptions = {}) { if (!Array.isArray(data)) { diff --git a/src/lib/lib/flatten.js b/src/lib/lib/flatten.js index 6dad1543e..368c4cb22 100644 --- a/src/lib/lib/flatten.js +++ b/src/lib/lib/flatten.js @@ -1,7 +1,7 @@ /** Flatten arrays of arrays one level deep @param {Array} list The list to flatten. - @param {String|Function} accessor An optional accessor function. If this is a string, it will be transformed into an accessor for that key. + @param {string|Function} accessor An optional accessor function. If this is a string, it will be transformed into an accessor for that key. @returns {Array} */ export default function flatten(list, accessor = d => d) { diff --git a/src/lib/lib/groupLonger.js b/src/lib/lib/groupLonger.js index 80d3f20ec..e7ce8e8e2 100644 --- a/src/lib/lib/groupLonger.js +++ b/src/lib/lib/groupLonger.js @@ -29,9 +29,9 @@ @param {Array} data The data to be transformed. @param {Array} keys The groups names to break out into separate groups. @param {Object} options Options object - @param {String} [options.groupTo='group'] 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. - @param {String} [options.valueTo='value'] The name of the new field on each row of data to store the value under. Defaults to 'value'. - @param {String[]} [options.keepKeys] 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. + @param {string} [options.groupTo='group'] 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. + @param {string} [options.valueTo='value'] The name of the new field on each row of data to store the value under. Defaults to 'value'. + @param {string[]} [options.keepKeys] 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. @returns {Array} [dataLong] The transformed data that is a list of one object for each group. Each object has `key` and `values` where `key` is the group name and `values` is a list of transformed data. */ diff --git a/src/lib/lib/stack.js b/src/lib/lib/stack.js index 15f7cdae8..20d9d0229 100644 --- a/src/lib/lib/stack.js +++ b/src/lib/lib/stack.js @@ -25,7 +25,7 @@ @param {Array} data The data to be stacked. @param {Array|Function} keys The group names to stack, passed to `stack.keys()`. @param {Object} options Options object - @param {String|Number|Function} [options.value] An accessor function passed to `stack.value()`. If this is a string or number, it will be transformed into an accessor for that key. + @param {string|Number|Function} [options.value] An accessor function passed to `stack.value()`. If this is a string or number, it will be transformed into an accessor for that key. @param {Array|Function} [options.order] The stack order passed to `stack.order()`. @param {Function} [options.offset] The offset function passed to `stack.offset()`. diff --git a/src/lib/lib/uniques.js b/src/lib/lib/uniques.js index ebfb3b625..bb625bcee 100644 --- a/src/lib/lib/uniques.js +++ b/src/lib/lib/uniques.js @@ -1,7 +1,7 @@ /** Remove duplicate values from a list with an optional iterator string or function. By default return the transformed value if iteratee exists. @param {Array} list An array of values or objects. - @param {String|Function} [accessor] An optional accessor function that takes an object and returns the value to judge uniqueness by. If accessor is a string instead of a function, judges uniqueness by the property named by accessor on each of the objects. + @param {string|Function} [accessor] An optional accessor function that takes an object and returns the value to judge uniqueness by. If accessor is a string instead of a function, judges uniqueness by the property named by accessor on each of the objects. @param {Boolean} [transform=true] If true, return the transformed value from accessor. @returns {Array} */ diff --git a/src/lib/utils/makeAccessor.js b/src/lib/utils/makeAccessor.js index f38a1841e..92f832e17 100644 --- a/src/lib/utils/makeAccessor.js +++ b/src/lib/utils/makeAccessor.js @@ -1,7 +1,7 @@ import canBeZero from './canBeZero.js'; /** Make an accessor from a string, number, function or an array of the combination of any - @param {String|Number|Function|Array} acc The accessor function, key or list of them. + @param {string|Number|Function|Array} acc The accessor function, key or list of them. @returns {Function} An accessor function. */ export default function makeAccessor(acc) { From 4c7b4d21d426752ddcfe8ac6d6dc6d43f330e9d3 Mon Sep 17 00:00:00 2001 From: Robert Gieseke Date: Mon, 26 Aug 2024 14:39:52 +0200 Subject: [PATCH 3/9] Add type information for mousemove event This also adds a JSDoc typecast for the 'layerX'/'layerY' values. --- src/_components/QuadTree.html.svelte | 11 ++++++----- src/_components/QuadTree.percent-range.html.svelte | 9 +++++---- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/_components/QuadTree.html.svelte b/src/_components/QuadTree.html.svelte index 0fb97542b..916b948ac 100644 --- a/src/_components/QuadTree.html.svelte +++ b/src/_components/QuadTree.html.svelte @@ -14,10 +14,10 @@ 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. */ @@ -29,12 +29,13 @@ $: 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()}`); + console.log(evt.x, evt.y); 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 8f85c4833..764a7f73a 100644 --- a/src/_components/QuadTree.percent-range.html.svelte +++ b/src/_components/QuadTree.percent-range.html.svelte @@ -14,10 +14,10 @@ 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. */ @@ -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; From d1fc2b8aba54b5a2b8b5de98dc10cb2fa3bb2516 Mon Sep 17 00:00:00 2001 From: mhkeller Date: Mon, 26 Aug 2024 13:33:09 -0400 Subject: [PATCH 4/9] remove whitespace --- src/content/guide/03-layercake-props.md | 3 --- src/lib/lib/calcExtents.js | 1 - src/lib/lib/calcUniques.js | 1 - 3 files changed, 5 deletions(-) diff --git a/src/content/guide/03-layercake-props.md b/src/content/guide/03-layercake-props.md index 331de5b50..e3c90799e 100644 --- a/src/content/guide/03-layercake-props.md +++ b/src/content/guide/03-layercake-props.md @@ -34,7 +34,6 @@ A list of data items. If this is not a flat data array of objects, you'll also n > ``` - ### x `string|Function|number|Array|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. @@ -180,7 +179,6 @@ 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|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`. @@ -283,7 +281,6 @@ Same as [xNice](/guide#xnice) but for the z domain. Same as [xNice](/guide#xnice) but for the r domain. - ### xRange `Function|Array:[min: number, max: number]|Array` 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. diff --git a/src/lib/lib/calcExtents.js b/src/lib/lib/calcExtents.js index 204eab1c7..39fd6927c 100644 --- a/src/lib/lib/calcExtents.js +++ b/src/lib/lib/calcExtents.js @@ -8,7 +8,6 @@ `{ x: [0, 10], y: [-10, 10] }` @param {Array} data A flat array of objects. @param {{x?: Function, y?: Function, z?: Function, r?: Function}} fields An object containing `x`, `y`, `r` or `z` keys that equal an accessor function. If an accessor function returns an array of values, each value will also be evaluated. - @returns {{x?: [min: number, max: number]|[min: string, max: string], y?: [min: number, max: number]|[min: string, max: string], z?: [min: number, max: number]|[min: string, max: string], r?: [min: number, max: number]|[min: string, max: string]}} An object with the same structure as `fields` but instead of an accessor, each key contains an array of a min and a max. */ export default function calcExtents(data, fields) { diff --git a/src/lib/lib/calcUniques.js b/src/lib/lib/calcUniques.js index c3038e48b..5c3027f4d 100644 --- a/src/lib/lib/calcUniques.js +++ b/src/lib/lib/calcUniques.js @@ -11,7 +11,6 @@ import { ascending, InternSet } from 'd3-array'; @param {Array} data A flat array of. @param {{x?: Function, y?: Function, z?: Function, r?: Function}} fields An object containing `x`, `y`, `r` or `z` keys that equal an accessor function. If an accessor function returns an array of values, each value will also be evaluated. @param {{ sort?: Boolean, x?: Boolean , y?: Boolean , z?: Boolean , r?: Boolean }} sortOptions An object containing `sort`, `x`, `y`, `r` or `z` keys with Boolean values that designate how results should be sorted. Default is un-sorted. Pass in `sort: true` to sort all fields or specify fields individually. - @returns {{x?: [min: number, max: number]|[min: string, max: string], y?: [min: number, max: number]|[min: string, max: string], z?: [min: number, max: number]|[min: string, max: string], r?: [min: number, max: number]|[min: string, max: string]}} An object with the same structure as `fields` but instead of an accessor, each key contains an array of unique items. */ export default function calcUniques(data, fields, sortOptions = {}) { From 9e071ff71de0022a0ed9e2c004f557cb18c48c5d Mon Sep 17 00:00:00 2001 From: mhkeller Date: Mon, 26 Aug 2024 13:33:28 -0400 Subject: [PATCH 5/9] remove whitespace --- src/lib/lib/bin.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/lib/bin.js b/src/lib/lib/bin.js index 2417185ac..a67d009a2 100644 --- a/src/lib/lib/bin.js +++ b/src/lib/lib/bin.js @@ -40,7 +40,6 @@ @param {Object} options Options object @param {Array} [options.domain] Optional. The domain passed to `bin.domain()`. Pass in your own domain if you'd like, otherwise computed automatically. @param {number|Array|Function} [options.thresholds] Optional. The thresholds passed to `bin.thresholds()`, otherwise computed automatically. - @returns {Array} binData An array of bin arrays */ import { bin as d3Bin } from 'd3-array'; From 93139374e2d5734bc42151da736d3b0b71ce9d7f Mon Sep 17 00:00:00 2001 From: mhkeller Date: Mon, 26 Aug 2024 13:34:12 -0400 Subject: [PATCH 6/9] fix number regression --- src/content/guide/03-layercake-props.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/guide/03-layercake-props.md b/src/content/guide/03-layercake-props.md index e3c90799e..bf337a655 100644 --- a/src/content/guide/03-layercake-props.md +++ b/src/content/guide/03-layercake-props.md @@ -281,7 +281,7 @@ Same as [xNice](/guide#xnice) but for the z domain. Same as [xNice](/guide#xnice) but for the r domain. -### xRange `Function|Array:[min: number, max: number]|Array` +### xRange `Function|Array:[min: number, max: number]|Array` 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,7 +301,7 @@ It can also be a function: > ``` -### yRange `Function|Array:[min: number, max: Number]|Array` +### yRange `Function|Array:[min: number, max: number]|Array` 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. From 8a4823b7c1e672b13e4925c0a7ae085029d3d0a1 Mon Sep 17 00:00:00 2001 From: mhkeller Date: Mon, 26 Aug 2024 13:35:31 -0400 Subject: [PATCH 7/9] remove whitespace --- src/_components/AxisY.percent-range.html.svelte | 1 - src/_components/AxisY.svelte | 1 - src/_components/AxisYRight.percent-range.html.svelte | 1 - 3 files changed, 3 deletions(-) diff --git a/src/_components/AxisY.percent-range.html.svelte b/src/_components/AxisY.percent-range.html.svelte index 4b97892f9..8007ec435 100644 --- a/src/_components/AxisY.percent-range.html.svelte +++ b/src/_components/AxisY.percent-range.html.svelte @@ -56,7 +56,6 @@ ? ticks($yScale.ticks()) : $yScale.ticks(ticks); - /** @param {number} sum * @param {String} val */ function calcStringLength(sum, val) { diff --git a/src/_components/AxisY.svelte b/src/_components/AxisY.svelte index 56c61f7c2..62a86659f 100644 --- a/src/_components/AxisY.svelte +++ b/src/_components/AxisY.svelte @@ -51,7 +51,6 @@ ? ticks($yScale.ticks()) : $yScale.ticks(ticks); - /** @param {number} sum * @param {String} val */ function calcStringLength(sum, val) { diff --git a/src/_components/AxisYRight.percent-range.html.svelte b/src/_components/AxisYRight.percent-range.html.svelte index 803e8a8cf..7a6a24f85 100644 --- a/src/_components/AxisYRight.percent-range.html.svelte +++ b/src/_components/AxisYRight.percent-range.html.svelte @@ -56,7 +56,6 @@ ? ticks($yScale.ticks()) : $yScale.ticks(ticks); - /** @param {number} sum * @param {String} val */ function calcStringLength(sum, val) { From 779df38ef1a0d5f40d9935c28a9474ff1859d640 Mon Sep 17 00:00:00 2001 From: mhkeller Date: Mon, 26 Aug 2024 13:37:19 -0400 Subject: [PATCH 8/9] remove whitespace --- src/lib/lib/bin.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/lib/bin.js b/src/lib/lib/bin.js index a67d009a2..26a92d86a 100644 --- a/src/lib/lib/bin.js +++ b/src/lib/lib/bin.js @@ -35,7 +35,6 @@ ] @param {Array} data The data to be binned. - @param {string|number|Function} [value] Optional. An accessor function passed to `bin.value()`. Defaults to an identity function. If this is a string or number, it will be transformed into an accessor for that key. @param {Object} options Options object @param {Array} [options.domain] Optional. The domain passed to `bin.domain()`. Pass in your own domain if you'd like, otherwise computed automatically. From da3abbf3086bc5007f3f2dd9b0571d7d58c1b4f7 Mon Sep 17 00:00:00 2001 From: mhkeller Date: Mon, 26 Aug 2024 13:42:07 -0400 Subject: [PATCH 9/9] remove log --- src/_components/QuadTree.html.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_components/QuadTree.html.svelte b/src/_components/QuadTree.html.svelte index 536e1db83..732a3e426 100644 --- a/src/_components/QuadTree.html.svelte +++ b/src/_components/QuadTree.html.svelte @@ -35,7 +35,7 @@ const xLayerKey = /** @type {'layerX'|'layerY'} */ (`layer${x.toUpperCase()}`); const yLayerKey = /** @type {'layerX'|'layerY'}*/ (`layer${y.toUpperCase()}`); - console.log(evt.x, evt.y); + found = finder.find(evt[xLayerKey], evt[yLayerKey], searchRadius) || {}; visible = Object.keys(found).length > 0; }