add percentScale option

mhkeller · May 24, 2020 · b37dbcd · b37dbcd
1 parent dfe35d9
commit b37dbcd
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 16 deletions.
diff --git a/src/LayerCake.svelte b/src/LayerCake.svelte
@@ -14,6 +14,7 @@
 	export let ssr = false;
 	export let pointerEvents = true;
 	export let position = 'relative';
+	export let percentScale = false;
 
 	export let width = undefined;
 	export let height = undefined;
@@ -212,16 +213,16 @@
 	const zDomain_d = derived([extents_d, _zDomain], calcDomain('z'));
 	const rDomain_d = derived([extents_d, _rDomain], calcDomain('r'));
 
-	const xScale_d = derived([_xScale, extents_d, xDomain_d, _xPadding, _xNice, _xReverse, width_d, height_d, _xRange], createScale('x'));
+	const xScale_d = derived([_xScale, extents_d, xDomain_d, _xPadding, _xNice, _xReverse, width_d, height_d, _xRange, percentScale], createScale('x'));
 	const xGet_d = derived([_x, xScale_d], createGetter);
 
-	const yScale_d = derived([_yScale, extents_d, yDomain_d, _yPadding, _yNice, _yReverse, width_d, height_d, _yRange], createScale('y'));
+	const yScale_d = derived([_yScale, extents_d, yDomain_d, _yPadding, _yNice, _yReverse, width_d, height_d, _yRange, percentScale], createScale('y'));
 	const yGet_d = derived([_y, yScale_d], createGetter);
 
-	const zScale_d = derived([_zScale, extents_d, zDomain_d, _zPadding, _zNice, _zReverse, width_d, height_d, _zRange], createScale('z'));
+	const zScale_d = derived([_zScale, extents_d, zDomain_d, _zPadding, _zNice, _zReverse, width_d, height_d, _zRange, percentScale], createScale('z'));
 	const zGet_d = derived([_z, zScale_d], createGetter);
 
-	const rScale_d = derived([_rScale, extents_d, rDomain_d, _rPadding, _rNice, _rReverse, width_d, height_d, _rRange], createScale('r'));
+	const rScale_d = derived([_rScale, extents_d, rDomain_d, _rPadding, _rNice, _rReverse, width_d, height_d, _rRange, percentScale], createScale('r'));
 	const rGet_d = derived([_r, rScale_d], createGetter);
 
 	const xRange_d = derived([xScale_d], getRange);
@@ -290,9 +291,50 @@
 		bind:clientHeight={containerHeight}
 	>
 		<slot
+			activeGetters={$activeGetters_d}
 			width={$width_d}
 			height={$height_d}
 			aspectRatio={$aspectRatio_d}
+			containerWidth={$_containerWidth}
+			containerHeight={$_containerHeight}
+			x={$_x}
+			y={$_y}
+			z={$_z}
+			r={$_r}
+			custom={$_custom}
+			data={$_data}
+			xNice={$_xNice}
+			yNice={$_yNice}
+			zNice={$_zNice}
+			rNice={$_rNice}
+			xReverse={$_xReverse}
+			yReverse={$_yReverse}
+			zReverse={$_zReverse}
+			rReverse={$_rReverse}
+			xPadding={$_xPadding}
+			yPadding={$_yPadding}
+			zPadding={$_zPadding}
+			rPadding={$_rPadding}
+			padding={$padding_d}
+			flatData={$_flatData}
+			extents={$extents_d}
+			xDomain={$xDomain_d}
+			yDomain={$yDomain_d}
+			zDomain={$zDomain_d}
+			rDomain={$rDomain_d}
+			xRange={$xRange_d}
+			yRange={$yRange_d}
+			zRange={$zRange_d}
+			rRange={$rRange_d}
+			config={$_originalSettings}
+			xScale={$xScale_d}
+			xGet={$xGet_d}
+			yScale={$yScale_d}
+			yGet={$yGet_d}
+			zScale={$zScale_d}
+			zGet={$zGet_d}
+			rScale={$rScale_d}
+			rGet={$rGet_d}
 		></slot>
 	</div>
 {/if}

diff --git a/src/helpers/createScale.js b/src/helpers/createScale.js
@@ -4,12 +4,12 @@ import padScale from '../utils/padScale.js';
 import getDefaultRange from '../settings/getDefaultRange.js';
 
 export default function createScale (s) {
-	return function scaleCreator ([$scale, $extents, $domain, $padding, $nice, $reverse, $width, $height, $range, baseRange]) {
+	return function scaleCreator ([$scale, $extents, $domain, $padding, $nice, $reverse, $width, $height, $range, percentScale]) {
 		if ($extents === null) {
 			return null;
 		}
 
-		const defaultRange = getDefaultRange(s, $width, $height, $reverse, $range);
+		const defaultRange = getDefaultRange(s, $width, $height, $reverse, $range, percentScale);
 
 		const scale = $scale === defaultScales[s] ? $scale() : $scale.copy();
 

diff --git a/src/settings/getDefaultRange.js b/src/settings/getDefaultRange.js
@@ -1,17 +1,20 @@
 /* eslint-disable no-nested-ternary */
-function calcBaseRange(s, width, height, reverse) {
-	const config = {
-		x: reverse === true ? [width, 0] : [0, width],
-		y: reverse === true ? [height, 0] : [0, height],
-		z: reverse === true ? [width, 0] : [0, width],
-		r: reverse === true ? [25, 1] : [1, 25],
-	};
-	return config[s];
+function calcBaseRange(s, width, height, reverse, percentScale) {
+	let min;
+	let max;
+	if (percentScale === true) {
+		min = 0;
+		max = 100;
+	} else {
+		min = s === 'r' ? 1 : 0;
+		max = s === 'y' ? height : s === 'r' ? 25 : width;
+	}
+	return reverse === true ? [max, min] : [min, max];
 }
 
-export default function getDefaultRange(s, width, height, reverse, range) {
+export default function getDefaultRange(s, width, height, reverse, range, percentScale) {
 	return !range
-		? calcBaseRange(s, width, height, reverse)
+		? calcBaseRange(s, width, height, reverse, percentScale)
 		: typeof range === 'function'
 			? range({ width, height })
 			: range;

diff --git a/test/getDefaultRange.js b/test/getDefaultRange.js
@@ -27,6 +27,22 @@ const tests = [
 	{ args: ['z', w, h, !defaultReverses.z], expected: [w, 0] },
 	{ args: ['r', w, h, !defaultReverses.r], expected: [25, 1] },
 
+	/* --------------------------------------------
+	 * Set percent scale
+	 */
+	{ args: ['x', w, h, defaultReverses.x, null, true], expected: [0, 100] },
+	{ args: ['y', w, h, defaultReverses.y, null, true], expected: [100, 0] },
+	{ args: ['z', w, h, defaultReverses.z, null, true], expected: [0, 100] },
+	{ args: ['r', w, h, defaultReverses.r, null, true], expected: [0, 100] },
+
+	/* --------------------------------------------
+	 * Reverse percent scale
+	 */
+	{ args: ['x', w, h, !defaultReverses.x, null, true], expected: [100, 0] },
+	{ args: ['y', w, h, !defaultReverses.y, null, true], expected: [0, 100] },
+	{ args: ['z', w, h, !defaultReverses.z, null, true], expected: [100, 0] },
+	{ args: ['r', w, h, !defaultReverses.r, null, true], expected: [100, 0] },
+
 	/* --------------------------------------------
 	 * Set a manual default
 	 */
@@ -35,6 +51,14 @@ const tests = [
 	{ args: ['z', w, h, false, [-100, 100]], expected: [-100, 100] },
 	{ args: ['r', w, h, false, [-100, 100]], expected: [-100, 100] },
 
+	/* --------------------------------------------
+	 * Manual default overrides percentScale = true
+	 */
+	{ args: ['x', w, h, false, [-100, 100], true], expected: [-100, 100] },
+	{ args: ['y', w, h, false, [-100, 100], true], expected: [-100, 100] },
+	{ args: ['z', w, h, false, [-100, 100], true], expected: [-100, 100] },
+	{ args: ['r', w, h, false, [-100, 100], true], expected: [-100, 100] },
+
 	/* --------------------------------------------
 	 * Set a manual default, with reverse true, which should have no effect
 	 */