From 76c0d56218bc43add3d50a08f803f9e5636433fd Mon Sep 17 00:00:00 2001 From: Robert Gieseke Date: Sun, 24 Aug 2025 17:40:43 +0200 Subject: [PATCH 01/14] Rename derived and run `npx sv migrate svelte-5` ` --- src/lib/LayerCake.svelte | 601 +++++++++++++++++++++++---------------- 1 file changed, 353 insertions(+), 248 deletions(-) diff --git a/src/lib/LayerCake.svelte b/src/lib/LayerCake.svelte index f619be72..edd186ae 100644 --- a/src/lib/LayerCake.svelte +++ b/src/lib/LayerCake.svelte @@ -3,8 +3,10 @@ Layer Cake component --> {#if ssr === true || typeof window !== 'undefined'} @@ -559,58 +715,7 @@ bind:clientWidth={containerWidth} bind:clientHeight={containerHeight} > - + {@render children?.({ element, width: $width_d, height: $height_d, aspectRatio: $aspectRatio_d, containerWidth: $_containerWidth, containerHeight: $_containerHeight, activeGetters: $activeGetters_d, percentRange: $_percentRange, x: $_x, y: $_y, z: $_z, r: $_r, custom: $_custom, data: $_data, xNice: $_xNice, yNice: $_yNice, zNice: $_zNice, rNice: $_rNice, xDomainSort: $_xDomainSort, yDomainSort: $_yDomainSort, zDomainSort: $_zDomainSort, rDomainSort: $_rDomainSort, 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: $_config, xScale: $xScale_d, xGet: $xGet_d, yScale: $yScale_d, yGet: $yGet_d, zScale: $zScale_d, zGet: $zGet_d, rScale: $rScale_d, rGet: $rGet_d, })} {/if} From ab7f3af6ddbe95bda27c6c8644c1a3bbc5daf1dd Mon Sep 17 00:00:00 2001 From: Robert Gieseke Date: Sun, 24 Aug 2025 17:41:42 +0200 Subject: [PATCH 02/14] Format --- src/lib/LayerCake.svelte | 116 +++++++++++++++++++-------------------- 1 file changed, 56 insertions(+), 60 deletions(-) diff --git a/src/lib/LayerCake.svelte b/src/lib/LayerCake.svelte index edd186ae..fc39cc02 100644 --- a/src/lib/LayerCake.svelte +++ b/src/lib/LayerCake.svelte @@ -24,19 +24,6 @@ const printDebug_debounced = debounce(printDebug, 200); - - - - - - - - - - - - - /* -------------------------------------------- * Parameters * Values that computed properties are based on and that @@ -44,49 +31,6 @@ * */ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - /** * @typedef {Object} Props * @property {boolean} [ssr] @@ -194,12 +138,13 @@ /** * Make this reactive */ - let yReverseValue = - $derived(typeof yReverse === 'undefined' + let yReverseValue = $derived( + typeof yReverse === 'undefined' ? typeof yScale.bandwidth === 'function' ? false : true - : yReverse); + : yReverse + ); /* -------------------------------------------- * Keep track of whether the component has mounted @@ -715,7 +660,58 @@ bind:clientWidth={containerWidth} bind:clientHeight={containerHeight} > - {@render children?.({ element, width: $width_d, height: $height_d, aspectRatio: $aspectRatio_d, containerWidth: $_containerWidth, containerHeight: $_containerHeight, activeGetters: $activeGetters_d, percentRange: $_percentRange, x: $_x, y: $_y, z: $_z, r: $_r, custom: $_custom, data: $_data, xNice: $_xNice, yNice: $_yNice, zNice: $_zNice, rNice: $_rNice, xDomainSort: $_xDomainSort, yDomainSort: $_yDomainSort, zDomainSort: $_zDomainSort, rDomainSort: $_rDomainSort, 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: $_config, xScale: $xScale_d, xGet: $xGet_d, yScale: $yScale_d, yGet: $yGet_d, zScale: $zScale_d, zGet: $zGet_d, rScale: $rScale_d, rGet: $rGet_d, })} + {@render children?.({ + element, + width: $width_d, + height: $height_d, + aspectRatio: $aspectRatio_d, + containerWidth: $_containerWidth, + containerHeight: $_containerHeight, + activeGetters: $activeGetters_d, + percentRange: $_percentRange, + x: $_x, + y: $_y, + z: $_z, + r: $_r, + custom: $_custom, + data: $_data, + xNice: $_xNice, + yNice: $_yNice, + zNice: $_zNice, + rNice: $_rNice, + xDomainSort: $_xDomainSort, + yDomainSort: $_yDomainSort, + zDomainSort: $_zDomainSort, + rDomainSort: $_rDomainSort, + 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: $_config, + xScale: $xScale_d, + xGet: $xGet_d, + yScale: $yScale_d, + yGet: $yGet_d, + zScale: $zScale_d, + zGet: $zGet_d, + rScale: $rScale_d, + rGet: $rGet_d + })} {/if} From 1601d37b37b75def2c8569056816c1c24a30d018 Mon Sep 17 00:00:00 2001 From: Robert Gieseke Date: Sun, 24 Aug 2025 17:42:44 +0200 Subject: [PATCH 03/14] Fix prop typos --- src/lib/LayerCake.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/LayerCake.svelte b/src/lib/LayerCake.svelte index fc39cc02..75f0391f 100644 --- a/src/lib/LayerCake.svelte +++ b/src/lib/LayerCake.svelte @@ -64,7 +64,7 @@ * @property {Function} [zScale] * @property {Function} [rScale] * @property {[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} [xRange] - * @property {[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} [yRange] + * @property {[min: number, max: number]|Function|Array|undefined} [yRange] Override the default y range of `[0, height]` by setting an array or function with argument `({ width, height} [yRange] * @property {[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} [zRange] * @property {[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} [rRange] * @property {boolean} [xReverse] @@ -75,7 +75,7 @@ * @property {boolean} [yDomainSort] * @property {boolean} [zDomainSort] * @property {boolean} [rDomainSort] - * @property {{top?: Number, right?: Number, bottom?: Number, left?: Number}} [padding={} [padding] + * @property {{top?: Number, right?: Number, bottom?: Number, left?: Number}} [padding={}] [padding] * @property {Array>|undefined} [flatData] * @property {Object} [custom] * @property {boolean} [debug] From 60d9acb33e72be7c900864e8510202f3bd02086d Mon Sep 17 00:00:00 2001 From: Robert Gieseke Date: Sun, 24 Aug 2025 17:48:33 +0200 Subject: [PATCH 04/14] Use single run function --- src/lib/LayerCake.svelte | 92 ---------------------------------------- 1 file changed, 92 deletions(-) diff --git a/src/lib/LayerCake.svelte b/src/lib/LayerCake.svelte index 75f0391f..33e5f144 100644 --- a/src/lib/LayerCake.svelte +++ b/src/lib/LayerCake.svelte @@ -165,38 +165,16 @@ const config = $state({}); run(() => { if (x) config.x = x; - }); - run(() => { if (y) config.y = y; - }); - run(() => { if (z) config.z = z; - }); - run(() => { if (r) config.r = r; - }); - run(() => { if (xDomain) config.xDomain = xDomain; - }); - run(() => { if (yDomain) config.yDomain = yDomain; - }); - run(() => { if (zDomain) config.zDomain = zDomain; - }); - run(() => { if (rDomain) config.rDomain = rDomain; - }); - run(() => { if (xRange) config.xRange = xRange; - }); - run(() => { if (yRange) config.yRange = yRange; - }); - run(() => { if (zRange) config.zRange = zRange; - }); - run(() => { if (rRange) config.rRange = rRange; }); @@ -247,110 +225,40 @@ run(() => { $_percentRange = percentRange; - }); - run(() => { $_containerWidth = containerWidth; - }); - run(() => { $_containerHeight = containerHeight; - }); - run(() => { $_data = data; - }); - run(() => { $_flatData = flatData || data; - }); - run(() => { $_padding = padding; - }); - run(() => { $_x = makeAccessor(x); - }); - run(() => { $_y = makeAccessor(y); - }); - run(() => { $_z = makeAccessor(z); - }); - run(() => { $_r = makeAccessor(r); - }); - run(() => { $_xDomain = xDomain; - }); - run(() => { $_yDomain = yDomain; - }); - run(() => { $_zDomain = zDomain; - }); - run(() => { $_rDomain = rDomain; - }); - run(() => { $_xNice = xNice; - }); - run(() => { $_yNice = yNice; - }); - run(() => { $_zNice = zNice; - }); - run(() => { $_rNice = rNice; - }); - run(() => { $_xReverse = xReverse; - }); - run(() => { $_yReverse = yReverseValue; - }); - run(() => { $_zReverse = zReverse; - }); - run(() => { $_rReverse = rReverse; - }); - run(() => { $_xPadding = xPadding; - }); - run(() => { $_yPadding = yPadding; - }); - run(() => { $_zPadding = zPadding; - }); - run(() => { $_rPadding = rPadding; - }); - run(() => { $_xRange = xRange; - }); - run(() => { $_yRange = yRange; - }); - run(() => { $_zRange = zRange; - }); - run(() => { $_rRange = rRange; - }); - run(() => { $_xScale = xScale; - }); - run(() => { $_yScale = yScale; - }); - run(() => { $_zScale = zScale; - }); - run(() => { $_rScale = rScale; - }); - run(() => { $_custom = custom; - }); - run(() => { $_config = config; }); From 960a203dd0655cbd442c528e9aa5129760abb439 Mon Sep 17 00:00:00 2001 From: Robert Gieseke Date: Sun, 24 Aug 2025 18:08:18 +0200 Subject: [PATCH 05/14] Remove Svelte 3 - 4 peer dependency --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f711d22a..671bc688 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,7 @@ "npm": ">=11.0.0" }, "peerDependencies": { - "svelte": "3 - 5 || >=5.0.0-next.120", + "svelte": ">=5.0.0-next.120", "typescript": "^5.0.2" }, "svelte": "./dist/index.js" From 3cc915d70e20ad125a031dac58dcc9f530ffbdae Mon Sep 17 00:00:00 2001 From: Robert Gieseke Date: Sun, 24 Aug 2025 19:30:28 +0200 Subject: [PATCH 06/14] Fix docstring --- src/lib/LayerCake.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/LayerCake.svelte b/src/lib/LayerCake.svelte index 33e5f144..d50646a1 100644 --- a/src/lib/LayerCake.svelte +++ b/src/lib/LayerCake.svelte @@ -75,7 +75,7 @@ * @property {boolean} [yDomainSort] * @property {boolean} [zDomainSort] * @property {boolean} [rDomainSort] - * @property {{top?: Number, right?: Number, bottom?: Number, left?: Number}} [padding={}] [padding] + * @property {{top?: Number, right?: Number, bottom?: Number, left?: Number}} [padding={}] * @property {Array>|undefined} [flatData] * @property {Object} [custom] * @property {boolean} [debug] From 8f6c3fd233db9917b13c87848ed9b1d0f4f16ecf Mon Sep 17 00:00:00 2001 From: Robert Gieseke Date: Sun, 24 Aug 2025 20:04:03 +0200 Subject: [PATCH 07/14] Bring back version from main --- src/lib/LayerCake.svelte | 513 +++++++++++++++++++-------------------- 1 file changed, 252 insertions(+), 261 deletions(-) diff --git a/src/lib/LayerCake.svelte b/src/lib/LayerCake.svelte index d50646a1..b0538723 100644 --- a/src/lib/LayerCake.svelte +++ b/src/lib/LayerCake.svelte @@ -2,11 +2,9 @@ @component Layer Cake component --> - {#if ssr === true || typeof window !== 'undefined'} @@ -568,58 +559,58 @@ bind:clientWidth={containerWidth} bind:clientHeight={containerHeight} > - {@render children?.({ - element, - width: $width_d, - height: $height_d, - aspectRatio: $aspectRatio_d, - containerWidth: $_containerWidth, - containerHeight: $_containerHeight, - activeGetters: $activeGetters_d, - percentRange: $_percentRange, - x: $_x, - y: $_y, - z: $_z, - r: $_r, - custom: $_custom, - data: $_data, - xNice: $_xNice, - yNice: $_yNice, - zNice: $_zNice, - rNice: $_rNice, - xDomainSort: $_xDomainSort, - yDomainSort: $_yDomainSort, - zDomainSort: $_zDomainSort, - rDomainSort: $_rDomainSort, - 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: $_config, - xScale: $xScale_d, - xGet: $xGet_d, - yScale: $yScale_d, - yGet: $yGet_d, - zScale: $zScale_d, - zGet: $zGet_d, - rScale: $rScale_d, - rGet: $rGet_d - })} + {/if} From 2e705c2581e6358dc9d83240391977e962a66f4b Mon Sep 17 00:00:00 2001 From: Robert Gieseke Date: Sun, 24 Aug 2025 20:06:13 +0200 Subject: [PATCH 08/14] Adjust format for keeping comments --- src/lib/LayerCake.svelte | 92 ++++++++++++++++++++-------------------- 1 file changed, 46 insertions(+), 46 deletions(-) diff --git a/src/lib/LayerCake.svelte b/src/lib/LayerCake.svelte index b0538723..11702e66 100644 --- a/src/lib/LayerCake.svelte +++ b/src/lib/LayerCake.svelte @@ -22,26 +22,26 @@ const printDebug_debounced = debounce(printDebug, 200); - /** @type {boolean} [ssr=false] Whether this chart should be rendered server side. */ + /** @type {boolean} [ssr=false] - Whether this chart should be rendered server side. */ 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. */ + /** @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. */ + /** @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 `
` tag. Useful for bindings. */ + /** @type {Element|undefined} [element] - The .layercake-container `
` tag. Useful for bindings. */ export let element = undefined; /* -------------------------------------------- @@ -51,86 +51,86 @@ * */ - /** @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. */ + /** @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. */ + /** @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. */ + /** @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; - /** @type {Function} [yScale=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. */ + /** @type {Function} [yScale=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 yScale = defaultScales.y; - /** @type {Function} [zScale=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. */ + /** @type {Function} [zScale=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 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. */ + /** @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. */ + /** @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; - /** @type {boolean|undefined} [yReverse=true] Reverse the default y range. By default this is set dynamically and will be `true` – setting the range to `[height, 0]` – unless the `yScale` has a `.bandwidth` method. Dynamic behavior is overridden if the user sets the prop. Ignored if you set the `yRange` prop. */ + /** @type {boolean|undefined} [yReverse=true] - Reverse the default y range. By default this is set dynamically and will be `true` – setting the range to `[height, 0]` – unless the `yScale` has a `.bandwidth` method. Dynamic behavior is overridden if the user sets the prop. Ignored if you set the `yRange` prop. */ export let yReverse = undefined; - /** @type {boolean} [zReverse=false] Reverse the default z range. By default this is `false` and the range is `[0, width]`. Ignored if you set the zRange prop. */ + /** @type {boolean} [zReverse=false] - Reverse the default z range. By default this is `false` and the range is `[0, width]`. Ignored if you set the zRange prop. */ export let zReverse = false; - /** @type {boolean} [rReverse=false] Reverse the default r range. By default this is `false` and the range is `[1, 25]`. Ignored if you set the rRange prop. */ + /** @type {boolean} [rReverse=false] - Reverse the default r range. By default this is `false` and the range is `[1, 25]`. Ignored if you set the rRange prop. */ export let rReverse = false; - /** @type {boolean} [xDomainSort=false] Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */ + /** @type {boolean} [xDomainSort=false] - Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */ export let xDomainSort = false; - /** @type {boolean} [yDomainSort=false] Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */ + /** @type {boolean} [yDomainSort=false] - Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */ export let yDomainSort = false; - /** @type {boolean} [zDomainSort=false] Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */ + /** @type {boolean} [zDomainSort=false] - Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */ export let zDomainSort = false; - /** @type {boolean} [rDomainSort=false] Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */ + /** @type {boolean} [rDomainSort=false] - Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */ export let rDomainSort = false; - /** @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 {Array>|undefined} [flatData=data] A flat version of data. */ + /** @type {Array>|undefined} [flatData=data] - A flat version of data. */ export let flatData = undefined; - /** @type {Object} custom Any extra configuration values you want available on the LayerCake context. This could be useful for color lookups or additional constants. */ + /** @type {Object} custom - Any extra configuration values you want available on the LayerCake context. This could be useful for color lookups or additional constants. */ export let custom = {}; - /** @type {boolean} debug Enable debug printing to the console. Useful to inspect your scales and dimensions. */ + /** @type {boolean} debug - Enable debug printing to the console. Useful to inspect your scales and dimensions. */ export let debug = false; - /** @type {boolean} [verbose=true] Show warnings in the console. */ + /** @type {boolean} [verbose=true] - Show warnings in the console. */ export let verbose = true; /** From 156a386b75c9e304d0ffd41831c3363ec7ff83f0 Mon Sep 17 00:00:00 2001 From: Robert Gieseke Date: Sun, 24 Aug 2025 20:07:45 +0200 Subject: [PATCH 09/14] Rename derived store --- src/lib/LayerCake.svelte | 56 ++++++++++++++++++++-------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/lib/LayerCake.svelte b/src/lib/LayerCake.svelte index 11702e66..9fed73ae 100644 --- a/src/lib/LayerCake.svelte +++ b/src/lib/LayerCake.svelte @@ -4,7 +4,7 @@ --> {#if ssr === true || typeof window !== 'undefined'} @@ -559,58 +715,7 @@ bind:clientWidth={containerWidth} bind:clientHeight={containerHeight} > - + {@render children?.({ element, width: $width_d, height: $height_d, aspectRatio: $aspectRatio_d, containerWidth: $_containerWidth, containerHeight: $_containerHeight, activeGetters: $activeGetters_d, percentRange: $_percentRange, x: $_x, y: $_y, z: $_z, r: $_r, custom: $_custom, data: $_data, xNice: $_xNice, yNice: $_yNice, zNice: $_zNice, rNice: $_rNice, xDomainSort: $_xDomainSort, yDomainSort: $_yDomainSort, zDomainSort: $_zDomainSort, rDomainSort: $_rDomainSort, 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: $_config, xScale: $xScale_d, xGet: $xGet_d, yScale: $yScale_d, yGet: $yGet_d, zScale: $zScale_d, zGet: $zGet_d, rScale: $rScale_d, rGet: $rGet_d, })} {/if} From 71db9a08ec0a978e9e426e1f469f3764cdbe2ad8 Mon Sep 17 00:00:00 2001 From: Robert Gieseke Date: Sun, 24 Aug 2025 20:08:41 +0200 Subject: [PATCH 11/14] Format --- src/lib/LayerCake.svelte | 118 +++++++++++++++++++-------------------- 1 file changed, 57 insertions(+), 61 deletions(-) diff --git a/src/lib/LayerCake.svelte b/src/lib/LayerCake.svelte index b62069b9..b7cfb6f2 100644 --- a/src/lib/LayerCake.svelte +++ b/src/lib/LayerCake.svelte @@ -2,7 +2,7 @@ @component Layer Cake component --> -