diff --git a/src/_components/Area-D3.svelte b/src/_components/Area-D3.svelte index 88f84742..243b51e7 100644 --- a/src/_components/Area-D3.svelte +++ b/src/_components/Area-D3.svelte @@ -8,7 +8,7 @@ const { data, xGet, yGet, yScale } = getContext('LayerCake'); - /** @type {String} [fill='#ab00d610'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */ + /** @type {string} [fill='#ab00d610'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */ export let fill = '#ab00d610'; /** @type {Function} [curve=curveLinear] - An optional D3 interpolation function. See [d3-shape](https://github.com/d3/d3-shape#curves) for options. Pass this function in uncalled, i.e. without the open-close parentheses. */ diff --git a/src/_components/Area.svelte b/src/_components/Area.svelte index 9c499f5b..6b0a30ca 100644 --- a/src/_components/Area.svelte +++ b/src/_components/Area.svelte @@ -7,7 +7,7 @@ const { data, xGet, yGet, xScale, yScale, extents } = getContext('LayerCake'); - /** @type {String} [fill='#ab00d610'] The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */ + /** @type {string} [fill='#ab00d610'] The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */ export let fill = '#ab00d610'; $: path = @@ -18,7 +18,7 @@ }) .join('L'); - /** @type {String} **/ + /** @type {string} **/ let area; $: { diff --git a/src/_components/ArrowheadMarker.svelte b/src/_components/ArrowheadMarker.svelte index 40a9a85a..e19c81f6 100644 --- a/src/_components/ArrowheadMarker.svelte +++ b/src/_components/ArrowheadMarker.svelte @@ -3,10 +3,10 @@ Generates an SVG marker containing a marker for a triangle makes a nice arrowhead. Add it to the named slot called "defs" on the SVG layout component. --> diff --git a/src/_components/Arrows.svelte b/src/_components/Arrows.svelte index b31272f2..818dabf8 100644 --- a/src/_components/Arrows.svelte +++ b/src/_components/Arrows.svelte @@ -9,10 +9,10 @@ /** @type {Array} annotations - A list of annotation objects. See the [Column](https://layercake.graphics/example/Column) chart example for the schema and options. */ export let annotations = []; - /** @type {String} [annotationClass='.layercake-annotation'] - The class name of the text annotation divs. */ + /** @type {string} [annotationClass='.layercake-annotation'] - The class name of the text annotation divs. */ export let containerClass = '.chart-container'; - /** @type {String} [containerClass='.chart-container'] - The class name / CSS selector of the parent element of the `` component. This is used to crawl the DOM for the text annotations. */ + /** @type {string} [containerClass='.chart-container'] - The class name / CSS selector of the parent element of the `` component. This is used to crawl the DOM for the text annotations. */ export let annotationClass = '.layercake-annotation'; let container; diff --git a/src/_components/AxisX.percent-range.html.svelte b/src/_components/AxisX.percent-range.html.svelte index 424c702d..fe35fefe 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 4eca4498..cd3d2828 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 0001212c..4d0a391b 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 435819e3..2bf762bf 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 f821c4b6..e220fa0a 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 e343896e..50a51014 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 9ff9cc9b..69513fdb 100644 --- a/src/_components/Bar.svelte +++ b/src/_components/Bar.svelte @@ -7,7 +7,7 @@ const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake'); - /** @type {String} [fill='#00bbff'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */ + /** @type {string} [fill='#00bbff'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */ export let fill = '#00bbff'; diff --git a/src/_components/Beeswarm.html.svelte b/src/_components/Beeswarm.html.svelte index 86276cae..c9fa54f4 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 2f5f6091..0d423da4 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 206c1bdb..739d6878 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 7e5ac18c..a733fc0a 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 4359cd83..adf8094a 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 aca57ece..b9a2da57 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 43051dc9..01755470 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 7097b57e..cce79323 100644 --- a/src/_components/Key.html.svelte +++ b/src/_components/Key.html.svelte @@ -5,10 +5,10 @@ ``` -### 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 37835a30..a0539cf8 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|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|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|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|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|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|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|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|undefined} r The r accessor. The key in each row of data that corresponds to the r-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context. */ export let r = undefined; /** @type {Array|Object} [data=[]] If `data` is not a flat array of objects and you want to use any of the scales, set a flat version of the data via the `flatData` prop. */ export let data = []; - /** @type {[min: Number|null, max: Number|null]|Array|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|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|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|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|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|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|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|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|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|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|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|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|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|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|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|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 da3c3619..ef998823 100644 --- a/src/lib/helpers/findScaleName.js +++ b/src/lib/helpers/findScaleName.js @@ -9,7 +9,7 @@ function f(name, modifier = '') { Get a D3 scale name https://svelte.dev/repl/ec6491055208401ca41120c9c8a67737?version=3.49.0 @param {Function} scale A D3 scale - @returns {String} The scale's name + @returns {string} The scale's name */ export default function findScaleName(scale) { /** diff --git a/src/lib/layouts/Canvas.svelte b/src/lib/layouts/Canvas.svelte index 27d37e75..dd6e0c59 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 `` tag. */ + /** @type {string|undefined} [label] A string passed to the `aria-label` on the `` tag. */ export let label = undefined; - /** @type {String|undefined} [labelledBy] A string passed to the `aria-labelledby` on the `` tag. */ + /** @type {string|undefined} [labelledBy] A string passed to the `aria-labelledby` on the `` tag. */ export let labelledBy = undefined; - /** @type {String|undefined} [describedBy] A string passed to `aria-describedby` property on the `` tag. */ + /** @type {string|undefined} [describedBy] A string passed to `aria-describedby` property on the `` tag. */ export let describedBy = undefined; const cntxt = { diff --git a/src/lib/layouts/Html.svelte b/src/lib/layouts/Html.svelte index 72e0529c..da46e31e 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 `
` 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 `
` 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 `
` tag. */ + /** @type {string|undefined} [label] A string passed to the `aria-label` on the `
` tag. */ export let label = undefined; - /** @type {String|undefined} [labelledBy] A string passed to the `aria-labelledby` on the `
` tag. */ + /** @type {string|undefined} [labelledBy] A string passed to the `aria-labelledby` on the `
` tag. */ export let labelledBy = undefined; - /** @type {String|undefined} [describedBy] A string passed to `aria-describedby` property on the `
` tag. */ + /** @type {string|undefined} [describedBy] A string passed to `aria-describedby` property on the `
` 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 a13c1a2f..d0a67be0 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 `` tag. */ + /** @type {string} [viewBox=`0 0 100 ${100 / fixedAspectRatio}`] A string passed to the `viewBox` property on the `` 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 `` tag. */ + /** @type {string|undefined} [label] A string passed to the `aria-label` on the `` tag. */ export let label = undefined; - /** @type {String|undefined} [labelledBy] A string passed to the `aria-labelledby` on the `` tag. */ + /** @type {string|undefined} [labelledBy] A string passed to the `aria-labelledby` on the `` tag. */ export let labelledBy = undefined; - /** @type {String|undefined} [describedBy] A string passed to `aria-describedby` property on the `` tag. */ + /** @type {string|undefined} [describedBy] A string passed to `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; diff --git a/src/lib/layouts/Svg.svelte b/src/lib/layouts/Svg.svelte index 96453cb6..0de3090f 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 9656981f..51b7c0d4 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 1d91f669..d81dc07b 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 c8b3de11..812c22db 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 d4ecc07d..5551d8cc 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 6dad1543..368c4cb2 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 80d3f20e..e7ce8e8e 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 15f7cdae..20d9d022 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 ebfb3b62..bb625bce 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 f38a1841..92f832e1 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) {