Merge pull request #221 from rgieseke/typescript-fixes-axes

Fix TypeScript errors in Axis components

src/_components/AxisRadial.svelte

@@ -20,6 +20,8 @@
 
 	$: angleSlice = (Math.PI * 2) / $config.x.length;
 
+	/** @param {Number} total
+	 *  @param {Number} i */
 	function anchor(total, i) {
 		if (i === 0 || i === total / 2) {
 			return 'middle';

src/_components/AxisX.percent-range.html.svelte

@@ -24,10 +24,10 @@
 	/** @type {Boolean} [snapLabels=false] - Instead of centering the text labels on the first and the last items, align them to the edges of the chart. */
 	export let snapLabels = false;
 
-	/** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	/** @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] - 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<any>|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). */
@@ -46,6 +46,7 @@
 
 	$: isBandwidth = typeof $xScale.bandwidth === 'function';
 
+	/** @type {Array<any>} */
 	$: tickVals = Array.isArray(ticks)
 		? ticks
 		: isBandwidth

src/_components/AxisX.svelte

@@ -22,10 +22,10 @@
 	/** @type {Boolean} [snapLabels=false] - Instead of centering the text labels on the first and the last items, align them to the edges of the chart. */
 	export let snapLabels = false;
 
-	/** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	/** @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] - 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<any>|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). */
@@ -37,6 +37,8 @@
 	/** @type {Number} [dy=12] - Any optional value passed to the `dy` attribute on the text label. */
 	export let dy = 12;
 
+	/**@param {Number} i
+	 * @param {Boolean} sl */
 	function textAnchor(i, sl) {
 		if (sl === true) {
 			if (i === 0) {
@@ -53,6 +55,7 @@
 
 	$: isBandwidth = typeof $xScale.bandwidth === 'function';
 
+	/** @type {Array<any>} */
 	$: tickVals = Array.isArray(ticks)
 		? ticks
 		: isBandwidth

src/_components/AxisXTop.percent-range.html.svelte

@@ -24,10 +24,10 @@
 	/** @type {Boolean} [snapLabels=false] - Instead of centering the text labels on the first and the last items, align them to the edges of the chart. */
 	export let snapLabels = false;
 
-	/** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	/** @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] - 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<any>|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). */
@@ -46,6 +46,7 @@
 
 	$: isBandwidth = typeof $xScale.bandwidth === 'function';
 
+	/** @type {Array<any>} */
 	$: tickVals = Array.isArray(ticks)
 		? ticks
 		: isBandwidth

src/_components/AxisXTop.svelte

@@ -22,10 +22,10 @@
 	/** @type {Boolean} [snapLabels=false] - Instead of centering the text labels on the first and the last items, align them to the edges of the chart. */
 	export let snapLabels = false;
 
-	/** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	/** @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] - 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<any>|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). */
@@ -37,6 +37,8 @@
 	/** @type {Number} [dy=-4] - Any optional value passed to the `dy` attribute on the text label. */
 	export let dy = -4;
 
+	/**@param {Number} i
+	 * @param {Boolean} sl */
 	function textAnchor(i, sl) {
 		if (sl === true) {
 			if (i === 0) {
@@ -53,6 +55,7 @@
 
 	$: isBandwidth = typeof $xScale.bandwidth === 'function';
 
+	/** @type {Array<any>} */
 	$: tickVals = Array.isArray(ticks)
 		? ticks
 		: isBandwidth

src/_components/AxisY.percent-range.html.svelte

@@ -21,13 +21,13 @@
 	/** @type {Boolean} [gridlines=true] - Show gridlines extending into the chart area. */
 	export let gridlines = true;
 
-	/** @type {Number} [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 {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	/** @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<any>|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). */
@@ -47,6 +47,7 @@
 
 	$: isBandwidth = typeof $yScale.bandwidth === 'function';
 
+	/** @type {Array<any>} */
 	$: tickVals = Array.isArray(ticks)
 		? ticks
 		: isBandwidth
@@ -55,6 +56,8 @@
 				? ticks($yScale.ticks())
 				: $yScale.ticks(ticks);
 
+	/** @param {Number} sum
+	 *  @param {String} val */
 	function calcStringLength(sum, val) {
 		if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
 		return sum + charPixelWidth;

src/_components/AxisY.svelte

@@ -19,13 +19,13 @@
 	/** @type {Boolean} [gridlines=true] - Show gridlines extending into the chart area. */
 	export let gridlines = true;
 
-	/** @type {Number} [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 {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	/** @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<any>|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). */
@@ -42,6 +42,7 @@
 
 	$: isBandwidth = typeof $yScale.bandwidth === 'function';
 
+	/** @type {Array<any>} */
 	$: tickVals = Array.isArray(ticks)
 		? ticks
 		: isBandwidth
@@ -50,6 +51,8 @@
 				? ticks($yScale.ticks())
 				: $yScale.ticks(ticks);
 
+	/** @param {Number} sum
+	 *  @param {String} val */
 	function calcStringLength(sum, val) {
 		if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
 		return sum + charPixelWidth;

src/_components/AxisYRight.percent-range.html.svelte

@@ -21,13 +21,13 @@
 	/** @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} [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 {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	/** @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<any>|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). */
@@ -47,6 +47,7 @@
 
 	$: isBandwidth = typeof $yScale.bandwidth === 'function';
 
+	/** @type {Array<any>} */
 	$: tickVals = Array.isArray(ticks)
 		? ticks
 		: isBandwidth
@@ -55,6 +56,8 @@
 				? ticks($yScale.ticks())
 				: $yScale.ticks(ticks);
 
+	/** @param {Number} sum
+	 *  @param {String} val */
 	function calcStringLength(sum, val) {
 		if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
 		return sum + charPixelWidth;

src/_components/AxisYRight.svelte

@@ -19,13 +19,13 @@
 	/** @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} [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 {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	/** @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<any>|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). */
@@ -42,6 +42,7 @@
 
 	$: isBandwidth = typeof $yScale.bandwidth === 'function';
 
+	/** @type {Array<any>} */
 	$: tickVals = Array.isArray(ticks)
 		? ticks
 		: isBandwidth
@@ -50,6 +51,8 @@
 				? ticks($yScale.ticks())
 				: $yScale.ticks(ticks);
 
+	/** @param {Number} sum
+	 *  @param {String} val */
 	function calcStringLength(sum, val) {
 		if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
 		return sum + charPixelWidth;