From 3c94101b92d143f4714feb805024280476cb8d5b Mon Sep 17 00:00:00 2001 From: Rachel Marconi Date: Thu, 8 Aug 2024 17:42:40 -0400 Subject: [PATCH 1/5] add layercake components, stories and docs --- .storybook/preview.js | 1 + CHANGELOG.md | 1 + src/lib/Layercake/AxisX.docs.md | 13 +++ src/lib/Layercake/AxisX.stories.svelte | 84 +++++++++++++++++ src/lib/Layercake/AxisX.svelte | 120 +++++++++++++++++++++++++ src/lib/Layercake/AxisY.docs.md | 13 +++ src/lib/Layercake/AxisY.stories.svelte | 97 ++++++++++++++++++++ src/lib/Layercake/AxisY.svelte | 107 ++++++++++++++++++++++ src/lib/Layercake/data.json | 8 ++ src/lib/index.js | 2 + 10 files changed, 446 insertions(+) create mode 100644 src/lib/Layercake/AxisX.docs.md create mode 100644 src/lib/Layercake/AxisX.stories.svelte create mode 100644 src/lib/Layercake/AxisX.svelte create mode 100644 src/lib/Layercake/AxisY.docs.md create mode 100644 src/lib/Layercake/AxisY.stories.svelte create mode 100644 src/lib/Layercake/AxisY.svelte create mode 100644 src/lib/Layercake/data.json diff --git a/.storybook/preview.js b/.storybook/preview.js index 0ec5f265..0a749eec 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -23,6 +23,7 @@ const preview = { ["Theme", "Fonts"], "Examples", "Components", + "Layercake", "Layout", "Logos", "Maps", diff --git a/CHANGELOG.md b/CHANGELOG.md index 5cf4a346..cfdbf0a1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - Patch: Update method of declaring Storybook component descriptions and add import instructions to components - Patch: Remove description field from top level `meta` object in component `.stories.svelte` files (do not render) - Feature: CLI command to generate new component boilerplate (`npm run create-component`) +- Feature: Add Layercake AxisX and AxisY components and docs ## v0.10.2 diff --git a/src/lib/Layercake/AxisX.docs.md b/src/lib/Layercake/AxisX.docs.md new file mode 100644 index 00000000..b9cd5fde --- /dev/null +++ b/src/lib/Layercake/AxisX.docs.md @@ -0,0 +1,13 @@ +Layercake components can be useful for out-of-the-box Svelte charts. Often, however, they are not built according to Urban style. This AxisX component takes those available in Layercake and updates them to use Urban font family, colors, and sizes. + +Furthermore, while Layercake components are often externally updated, this axis here is set in time at a stage where they will not break our builds. Any updates to merge in newer Layercake code will happen not project to project but here, at source, when decided necessary. Therefore, this axis will always work with expected parameters. + + +## Usage + +Layercake axes must be built inside a Layercake component and context, and, further, within an Svg component. Both can be imported from the layercake package. The Layercake object must be passed flat array (not object) data and domain before anything can be initialized and rendered, and these are used across all components used to craft a chart. + + +```js +import { AxisX } from "@urbaninstitute/dataviz-components"; +``` diff --git a/src/lib/Layercake/AxisX.stories.svelte b/src/lib/Layercake/AxisX.stories.svelte new file mode 100644 index 00000000..d64cfbd2 --- /dev/null +++ b/src/lib/Layercake/AxisX.stories.svelte @@ -0,0 +1,84 @@ + + + + + + + diff --git a/src/lib/Layercake/AxisX.svelte b/src/lib/Layercake/AxisX.svelte new file mode 100644 index 00000000..99932ba4 --- /dev/null +++ b/src/lib/Layercake/AxisX.svelte @@ -0,0 +1,120 @@ + + + + + {#each tickVals as tick, i (tick)} + + {#if gridlines !== false} + + {/if} + {#if tickMarks === true} + + {/if} + {formatTick(tick)} + + {/each} + {#if baseline === true} + + {/if} + {#if axisLabel} + {axisLabel} + {/if} + + + \ No newline at end of file diff --git a/src/lib/Layercake/AxisY.docs.md b/src/lib/Layercake/AxisY.docs.md new file mode 100644 index 00000000..a7a56db7 --- /dev/null +++ b/src/lib/Layercake/AxisY.docs.md @@ -0,0 +1,13 @@ +Layercake components can be useful for out-of-the-box Svelte charts. Often, however, they are not built according to Urban style. This AxisY component takes those available in Layercake and updates them to use Urban font family, colors, and sizes. + +Furthermore, while Layercake components are often externally updated, this axis here is set in time at a stage where they will not break our builds. Any updates to merge in newer Layercake code will happen not project to project but here, at source, when decided necessary. Therefore, this axis will always work with expected parameters. + + +## Usage + +Layercake axes must be built inside a Layercake component and context, and, further, within an Svg component. Both can be imported from the layercake package. The Layercake object must be passed flat array (not object) data and domain before anything can be initialized and rendered, and these are used across all components used to craft a chart. + + +```js +import { AxisY } from "@urbaninstitute/dataviz-components"; +``` diff --git a/src/lib/Layercake/AxisY.stories.svelte b/src/lib/Layercake/AxisY.stories.svelte new file mode 100644 index 00000000..d932c301 --- /dev/null +++ b/src/lib/Layercake/AxisY.stories.svelte @@ -0,0 +1,97 @@ + + + + + + + diff --git a/src/lib/Layercake/AxisY.svelte b/src/lib/Layercake/AxisY.svelte new file mode 100644 index 00000000..cf7f05c8 --- /dev/null +++ b/src/lib/Layercake/AxisY.svelte @@ -0,0 +1,107 @@ + + + + + {#each tickVals as tick (tick)} + + {#if gridlines !== false} + + {/if} + {#if tickMarks === true} + + {/if} + {formatTick(tick)} + + {/each} + {#if axisLabel} + {axisLabel} + {/if} + + + \ No newline at end of file diff --git a/src/lib/Layercake/data.json b/src/lib/Layercake/data.json new file mode 100644 index 00000000..55e6a463 --- /dev/null +++ b/src/lib/Layercake/data.json @@ -0,0 +1,8 @@ +[ +["year","value"], +[1979, 2], +[1980, 3], +[1981, 5], +[1982, 8], +[1983, 18] +] \ No newline at end of file diff --git a/src/lib/index.js b/src/lib/index.js index e03e9159..f35f7b1d 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -27,3 +27,5 @@ export { default as Headline } from "./Headline/Headline.svelte"; export { default as PymChild } from "./Pym/PymChild.svelte"; export { default as LoadingWrapper } from "./LoadingWrapper/LoadingWrapper.svelte"; export { default as Tooltip } from "./Tooltip/Tooltip.svelte"; +export { default as AxisY } from "./Layercake/AxisY.svelte"; +export { default as AxisX } from "./Layercake/AxisX.svelte"; \ No newline at end of file From 9786b03420b6c6b6439acb641a466c83b98251d1 Mon Sep 17 00:00:00 2001 From: Rachel Marconi Date: Thu, 8 Aug 2024 17:49:45 -0400 Subject: [PATCH 2/5] add css code chunks --- src/lib/Layercake/AxisX.docs.md | 34 +++++++++++++++++++++++++++++++++ src/lib/Layercake/AxisY.docs.md | 18 +++++++++++++++++ 2 files changed, 52 insertions(+) diff --git a/src/lib/Layercake/AxisX.docs.md b/src/lib/Layercake/AxisX.docs.md index b9cd5fde..c3cb20e3 100644 --- a/src/lib/Layercake/AxisX.docs.md +++ b/src/lib/Layercake/AxisX.docs.md @@ -7,6 +7,40 @@ Furthermore, while Layercake components are often externally updated, this axis Layercake axes must be built inside a Layercake component and context, and, further, within an Svg component. Both can be imported from the layercake package. The Layercake object must be passed flat array (not object) data and domain before anything can be initialized and rendered, and these are used across all components used to craft a chart. +## Want to update axis style straight from the Layercake repo? +Use this css instead: + +```js + +``` + ```js import { AxisX } from "@urbaninstitute/dataviz-components"; diff --git a/src/lib/Layercake/AxisY.docs.md b/src/lib/Layercake/AxisY.docs.md index a7a56db7..0db29d2d 100644 --- a/src/lib/Layercake/AxisY.docs.md +++ b/src/lib/Layercake/AxisY.docs.md @@ -7,6 +7,24 @@ Furthermore, while Layercake components are often externally updated, this axis Layercake axes must be built inside a Layercake component and context, and, further, within an Svg component. Both can be imported from the layercake package. The Layercake object must be passed flat array (not object) data and domain before anything can be initialized and rendered, and these are used across all components used to craft a chart. +## Want to update axis style straight from the Layercake repo? +Use this css instead: +```js + +``` + ```js import { AxisY } from "@urbaninstitute/dataviz-components"; From dd9d052623ed0041ddbcf53973a6588d26f91bed Mon Sep 17 00:00:00 2001 From: Rachel Marconi Date: Thu, 8 Aug 2024 17:51:46 -0400 Subject: [PATCH 3/5] prettierr --- src/lib/Layercake/AxisX.docs.md | 7 +- src/lib/Layercake/AxisX.stories.svelte | 30 ++-- src/lib/Layercake/AxisX.svelte | 236 +++++++++++++------------ src/lib/Layercake/AxisY.docs.md | 10 +- src/lib/Layercake/AxisY.stories.svelte | 26 ++- src/lib/Layercake/AxisY.svelte | 203 ++++++++++----------- src/lib/Layercake/data.json | 14 +- src/lib/index.js | 2 +- 8 files changed, 263 insertions(+), 265 deletions(-) diff --git a/src/lib/Layercake/AxisX.docs.md b/src/lib/Layercake/AxisX.docs.md index c3cb20e3..9702abec 100644 --- a/src/lib/Layercake/AxisX.docs.md +++ b/src/lib/Layercake/AxisX.docs.md @@ -1,14 +1,14 @@ -Layercake components can be useful for out-of-the-box Svelte charts. Often, however, they are not built according to Urban style. This AxisX component takes those available in Layercake and updates them to use Urban font family, colors, and sizes. +Layercake components can be useful for out-of-the-box Svelte charts. Often, however, they are not built according to Urban style. This AxisX component takes those available in Layercake and updates them to use Urban font family, colors, and sizes. Furthermore, while Layercake components are often externally updated, this axis here is set in time at a stage where they will not break our builds. Any updates to merge in newer Layercake code will happen not project to project but here, at source, when decided necessary. Therefore, this axis will always work with expected parameters. - ## Usage Layercake axes must be built inside a Layercake component and context, and, further, within an Svg component. Both can be imported from the layercake package. The Layercake object must be passed flat array (not object) data and domain before anything can be initialized and rendered, and these are used across all components used to craft a chart. ## Want to update axis style straight from the Layercake repo? -Use this css instead: + +Use this css instead: ```js ``` - ```js import { AxisX } from "@urbaninstitute/dataviz-components"; ``` diff --git a/src/lib/Layercake/AxisX.stories.svelte b/src/lib/Layercake/AxisX.stories.svelte index d64cfbd2..111e187a 100644 --- a/src/lib/Layercake/AxisX.stories.svelte +++ b/src/lib/Layercake/AxisX.stories.svelte @@ -8,13 +8,13 @@ tags: ["autodocs"], argTypes: { gridlines: { - control: "boolean", + control: "boolean" }, tickMarks: { - control: "boolean", + control: "boolean" }, baseline: { - control: "boolean", + control: "boolean" }, snapTicks: { control: "boolean" @@ -23,8 +23,8 @@ control: { type: "range", min: 1, - max: 20, - }, + max: 20 + } }, xTick: { control: "number" @@ -59,24 +59,18 @@ diff --git a/src/lib/Layercake/AxisX.svelte b/src/lib/Layercake/AxisX.svelte index 99932ba4..6933c840 100644 --- a/src/lib/Layercake/AxisX.svelte +++ b/src/lib/Layercake/AxisX.svelte @@ -2,119 +2,127 @@ @component Generates an SVG x-axis. This component is also configured to detect if your x-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth. --> - - - - {#each tickVals as tick, i (tick)} - - {#if gridlines !== false} - - {/if} - {#if tickMarks === true} - - {/if} - {formatTick(tick)} - - {/each} - {#if baseline === true} - - {/if} - {#if axisLabel} - {axisLabel} - {/if} - - - \ No newline at end of file + return "middle"; + } + + + + {#each tickVals as tick, i (tick)} + + {#if gridlines !== false} + + {/if} + {#if tickMarks === true} + + {/if} + {formatTick(tick)} + + {/each} + {#if baseline === true} + + {/if} + {#if axisLabel} + {axisLabel} + {/if} + + + diff --git a/src/lib/Layercake/AxisY.docs.md b/src/lib/Layercake/AxisY.docs.md index 0db29d2d..da4d3aad 100644 --- a/src/lib/Layercake/AxisY.docs.md +++ b/src/lib/Layercake/AxisY.docs.md @@ -1,21 +1,22 @@ -Layercake components can be useful for out-of-the-box Svelte charts. Often, however, they are not built according to Urban style. This AxisY component takes those available in Layercake and updates them to use Urban font family, colors, and sizes. +Layercake components can be useful for out-of-the-box Svelte charts. Often, however, they are not built according to Urban style. This AxisY component takes those available in Layercake and updates them to use Urban font family, colors, and sizes. Furthermore, while Layercake components are often externally updated, this axis here is set in time at a stage where they will not break our builds. Any updates to merge in newer Layercake code will happen not project to project but here, at source, when decided necessary. Therefore, this axis will always work with expected parameters. - ## Usage Layercake axes must be built inside a Layercake component and context, and, further, within an Svg component. Both can be imported from the layercake package. The Layercake object must be passed flat array (not object) data and domain before anything can be initialized and rendered, and these are used across all components used to craft a chart. ## Want to update axis style straight from the Layercake repo? -Use this css instead: + +Use this css instead: + ```js ``` - ```js import { AxisY } from "@urbaninstitute/dataviz-components"; ``` diff --git a/src/lib/Layercake/AxisY.stories.svelte b/src/lib/Layercake/AxisY.stories.svelte index d932c301..5513ad84 100644 --- a/src/lib/Layercake/AxisY.stories.svelte +++ b/src/lib/Layercake/AxisY.stories.svelte @@ -17,8 +17,8 @@ control: { type: "range", min: 1, - max: 10, - }, + max: 10 + } }, xTick: { control: "number", @@ -38,7 +38,7 @@ }, textAnchor: { control: "select", - options: ["start","middle","end"] + options: ["start", "middle", "end"] }, tickLabelColor: { control: { @@ -72,24 +72,18 @@ diff --git a/src/lib/Layercake/AxisY.svelte b/src/lib/Layercake/AxisY.svelte index cf7f05c8..27184f93 100644 --- a/src/lib/Layercake/AxisY.svelte +++ b/src/lib/Layercake/AxisY.svelte @@ -2,106 +2,109 @@ @component Generates an SVG y-axis. This component is also configured to detect if your y-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth. --> - - - - {#each tickVals as tick (tick)} - + + + {#each tickVals as tick (tick)} + + {#if gridlines !== false} + + {/if} + {#if tickMarks === true} + + {/if} + {formatTick(tick)} - {#if gridlines !== false} - - {/if} - {#if tickMarks === true} - - {/if} - {formatTick(tick)} - - {/each} - {#if axisLabel} - {axisLabel} - {/if} - - - \ No newline at end of file + + {/each} + {#if axisLabel} + {axisLabel} + {/if} + + + diff --git a/src/lib/Layercake/data.json b/src/lib/Layercake/data.json index 55e6a463..c3c512bf 100644 --- a/src/lib/Layercake/data.json +++ b/src/lib/Layercake/data.json @@ -1,8 +1,8 @@ [ -["year","value"], -[1979, 2], -[1980, 3], -[1981, 5], -[1982, 8], -[1983, 18] -] \ No newline at end of file + ["year", "value"], + [1979, 2], + [1980, 3], + [1981, 5], + [1982, 8], + [1983, 18] +] diff --git a/src/lib/index.js b/src/lib/index.js index f35f7b1d..143b38fb 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -28,4 +28,4 @@ export { default as PymChild } from "./Pym/PymChild.svelte"; export { default as LoadingWrapper } from "./LoadingWrapper/LoadingWrapper.svelte"; export { default as Tooltip } from "./Tooltip/Tooltip.svelte"; export { default as AxisY } from "./Layercake/AxisY.svelte"; -export { default as AxisX } from "./Layercake/AxisX.svelte"; \ No newline at end of file +export { default as AxisX } from "./Layercake/AxisX.svelte"; From 511cc363a25dc96910a5171c0bb6ec71ec28cdac Mon Sep 17 00:00:00 2001 From: Rachel Marconi Date: Wed, 28 Aug 2024 12:40:01 -0400 Subject: [PATCH 4/5] update organization and arg types --- src/lib/Layercake/AxisX.docs.md | 12 +++----- src/lib/Layercake/AxisX.stories.svelte | 24 ++------------- src/lib/Layercake/AxisX.svelte | 38 +++++++++++++++++------ src/lib/Layercake/AxisY.docs.md | 12 +++----- src/lib/Layercake/AxisY.stories.svelte | 28 ++--------------- src/lib/Layercake/AxisY.svelte | 42 +++++++++++++++++++------- src/lib/Layercake/Intro.docs.mdx | 17 +++++++++++ 7 files changed, 90 insertions(+), 83 deletions(-) create mode 100644 src/lib/Layercake/Intro.docs.mdx diff --git a/src/lib/Layercake/AxisX.docs.md b/src/lib/Layercake/AxisX.docs.md index 9702abec..f1b7883a 100644 --- a/src/lib/Layercake/AxisX.docs.md +++ b/src/lib/Layercake/AxisX.docs.md @@ -1,10 +1,8 @@ -Layercake components can be useful for out-of-the-box Svelte charts. Often, however, they are not built according to Urban style. This AxisX component takes those available in Layercake and updates them to use Urban font family, colors, and sizes. - -Furthermore, while Layercake components are often externally updated, this axis here is set in time at a stage where they will not break our builds. Any updates to merge in newer Layercake code will happen not project to project but here, at source, when decided necessary. Therefore, this axis will always work with expected parameters. - ## Usage -Layercake axes must be built inside a Layercake component and context, and, further, within an Svg component. Both can be imported from the layercake package. The Layercake object must be passed flat array (not object) data and domain before anything can be initialized and rendered, and these are used across all components used to craft a chart. +```js +import { AxisX } from "@urbaninstitute/dataviz-components"; +``` ## Want to update axis style straight from the Layercake repo? @@ -41,6 +39,4 @@ Use this css instead: ``` -```js -import { AxisX } from "@urbaninstitute/dataviz-components"; -``` +## Story diff --git a/src/lib/Layercake/AxisX.stories.svelte b/src/lib/Layercake/AxisX.stories.svelte index 111e187a..27a8d05d 100644 --- a/src/lib/Layercake/AxisX.stories.svelte +++ b/src/lib/Layercake/AxisX.stories.svelte @@ -7,34 +7,16 @@ component: AxisX, tags: ["autodocs"], argTypes: { - gridlines: { - control: "boolean" - }, - tickMarks: { - control: "boolean" - }, - baseline: { - control: "boolean" - }, - snapTicks: { - control: "boolean" - }, ticks: { control: { type: "range", min: 1, max: 20 - } - }, - xTick: { - control: "number" - }, - yTick: { - control: "number" + }, }, axisLabel: { - control: "text" - } + control: 'text' + }, }, parameters: { backgrounds: { diff --git a/src/lib/Layercake/AxisX.svelte b/src/lib/Layercake/AxisX.svelte index 6933c840..5f013209 100644 --- a/src/lib/Layercake/AxisX.svelte +++ b/src/lib/Layercake/AxisX.svelte @@ -6,32 +6,50 @@ import { getContext } from "svelte"; const { width, height, xScale, yRange } = getContext("LayerCake"); - /** @type {Boolean} [gridlines=true] - Extend lines from the ticks into the chart space */ + /** + * Extend lines from the ticks into the chart space + * @type {boolean} [gridlines=true] */ export let gridlines = false; - /** @type {Boolean} [tickMarks=false] - Show a vertical mark for each tick. */ + /** + * Show a vertical mark for each tick. + * @type {boolean} [tickMarks=false] */ export let tickMarks = true; - /** @type {Boolean} [baseline=false] – Show a solid line at the bottom. */ + /** + * Show a solid line at the bottom. + * @type {boolean} [baseline=false] */ export let baseline = true; - /** @type {Boolean} [snapTicks=false] - Instead of centering the text on the first and the last items, align them to the edges of the chart. */ + /** + * Instead of centering the text on the first and the last items, align them to the edges of the chart. + * @type {boolean} [snapTicks=false] */ export let snapTicks = false; - /** @type {Function} [formatTick=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */ + /** + * A function that passes the current tick value and expects a nicely formatted value in return. + * @type {Function} [formatTick=d => d] */ export let formatTick = (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. */ + /** + * If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. + * @type {number|Array|Function} [ticks] */ export let ticks = undefined; - /** @type {Number} [xTick=0] - How far over to position the text marker. */ + /** + * How far over to position the text marker. + * @type {number} [xTick=0] */ export let xTick = 0; - /** @type {Number} [yTick=16] - The distance from the baseline to place each tick value. */ + /** + * The distance from the baseline to place each tick value. + * @type {number} [yTick=16] */ export let yTick = 16; - /** @type {String|null} [axisLabel=null] An optional label for the y axis*/ - export let axisLabel = null; + /** + * An optional label for the y axis + * @type {string|null} [axisLabel=null] */ + export let axisLabel = ""; $: isBandwidth = typeof $xScale.bandwidth === "function"; diff --git a/src/lib/Layercake/AxisY.docs.md b/src/lib/Layercake/AxisY.docs.md index da4d3aad..023ccec3 100644 --- a/src/lib/Layercake/AxisY.docs.md +++ b/src/lib/Layercake/AxisY.docs.md @@ -1,10 +1,8 @@ -Layercake components can be useful for out-of-the-box Svelte charts. Often, however, they are not built according to Urban style. This AxisY component takes those available in Layercake and updates them to use Urban font family, colors, and sizes. - -Furthermore, while Layercake components are often externally updated, this axis here is set in time at a stage where they will not break our builds. Any updates to merge in newer Layercake code will happen not project to project but here, at source, when decided necessary. Therefore, this axis will always work with expected parameters. - ## Usage -Layercake axes must be built inside a Layercake component and context, and, further, within an Svg component. Both can be imported from the layercake package. The Layercake object must be passed flat array (not object) data and domain before anything can be initialized and rendered, and these are used across all components used to craft a chart. +```js +import { AxisY } from "@urbaninstitute/dataviz-components"; +``` ## Want to update axis style straight from the Layercake repo? @@ -26,6 +24,4 @@ Use this css instead: ``` -```js -import { AxisY } from "@urbaninstitute/dataviz-components"; -``` +## Story \ No newline at end of file diff --git a/src/lib/Layercake/AxisY.stories.svelte b/src/lib/Layercake/AxisY.stories.svelte index 5513ad84..f0095d7e 100644 --- a/src/lib/Layercake/AxisY.stories.svelte +++ b/src/lib/Layercake/AxisY.stories.svelte @@ -7,12 +7,6 @@ component: AxisY, tags: ["autodocs"], argTypes: { - gridlines: { - control: "boolean" - }, - tickMarks: { - control: "boolean" - }, ticks: { control: { type: "range", @@ -20,33 +14,17 @@ max: 10 } }, - xTick: { - control: "number", - description: "Equal to dxTick." - }, - yTick: { - control: "number", - description: "Equal to dyTick." - }, - dxTick: { - control: "number", - description: "Equal to xTick." - }, - dyTick: { - control: "number", - description: "Equal to yTick." - }, textAnchor: { control: "select", options: ["start", "middle", "end"] }, + axisLabel: { + control: "text" + }, tickLabelColor: { control: { type: "color" } - }, - axisLabel: { - control: "text" } }, parameters: { diff --git a/src/lib/Layercake/AxisY.svelte b/src/lib/Layercake/AxisY.svelte index 27184f93..88b13b73 100644 --- a/src/lib/Layercake/AxisY.svelte +++ b/src/lib/Layercake/AxisY.svelte @@ -7,37 +7,57 @@ const { padding, xRange, yScale, yDomain, xDomain, xScale, width } = getContext("LayerCake"); - /** @type {Boolean} [gridlines=true] - Extend lines from the ticks into the chart space */ + /** + * Extend lines from the ticks into the chart space + * @type {boolean} [gridlines=true] */ export let gridlines = true; - /** @type {Boolean} [tickMarks=false] - Show a vertical mark for each tick. */ + /** + * Show a vertical mark for each tick. + * @type {boolean} [tickMarks=false] */ export let tickMarks = false; - /** @type {Function} [formatTick=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */ + /** + * A function that passes the current tick value and expects a nicely formatted value in return. + * @type {Function} [formatTick=d => d] */ export let formatTick = (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. */ + /** + * If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it"s a function, passes along the default tick values and expects an array of tick values in return. + * @type {number|Array|Function} [ticks=4] */ export let ticks = 4; - /** @type {Number} [xTick=0] - How far over to position the text marker. */ + /** + * How far over to position the text marker. + * @type {number} [xTick=0] */ export let xTick = 0; - /** @type {Number} [yTick=0] - How far up and down to position the text marker. */ + /** + * How far up and down to position the text marker. + * @type {number} [yTick=0] */ export let yTick = 0; - /** @type {Number} [dxTick=-4] - Any optional value passed to the `dx` attribute on the text marker and tick mark (if visible). This is ignored on the text marker if your scale is ordinal. */ + /** + * Any optional value passed to the `dx` attribute on the text marker and tick mark (if visible). This is ignored on the text marker if your scale is ordinal. + * @type {number} [dxTick=-4] */ export let dxTick = -4; - /** @type {Number} [dyTick=0] - Any optional value passed to the `dy` attribute on the text marker and tick mark (if visible). This is ignored on the text marker if your scale is ordinal. */ + /** + * Any optional value passed to the `dy` attribute on the text marker and tick mark (if visible). This is ignored on the text marker if your scale is ordinal. + * @type {number} [dyTick=0] */ export let dyTick = 0; - /** @type {String} [textAnchor="end"] The CSS `text-anchor` passed to the label. This is automatically set to "end" if the scale has a bandwidth method, like in ordinal scales. */ + /** + * The CSS `text-anchor` passed to the label. This is automatically set to "end" if the scale has a bandwidth method, like in ordinal scales. + * @type {string} [textAnchor="end"] */ export let textAnchor = "end"; export let tickLabelColor = "#000000"; - /** @type {String|null} [axisLabel=null] An optional label for the y axis*/ - export let axisLabel = null; + /** + * An optional label for the y axis + * @type {string|null} [axisLabel=null] */ + export let axisLabel = ""; export let labelDx = 0; diff --git a/src/lib/Layercake/Intro.docs.mdx b/src/lib/Layercake/Intro.docs.mdx new file mode 100644 index 00000000..9dc131db --- /dev/null +++ b/src/lib/Layercake/Intro.docs.mdx @@ -0,0 +1,17 @@ +import { Meta } from "@storybook/blocks"; + + + +# Urban-styled Layercake commponents + +Layercake components can be useful for out-of-the-box Svelte charts. Often, however, they are not built according to Urban style. This AxisY component takes those available in Layercake and updates them to use Urban font family, colors, and sizes. + +Furthermore, while Layercake components are often externally updated, this axis here is set in time at a stage where they will not break our builds. Any updates to merge in newer Layercake code will happen not project to project but here, at source, when decided necessary. Therefore, this axis will always work with expected parameters. + +## Usage + +Layercake axes must be built inside a Layercake component and context, and, further, within an Svg component. Both can be imported from the layercake package. The Layercake object must be passed flat array (not object) data and domain before anything can be initialized and rendered, and these are used across all components used to craft a chart. + +## More on Layercake + +Learn more with Layercake documentation and examples. \ No newline at end of file From dc5f60506ab6d5fa95a3eceacf34479f048e49e2 Mon Sep 17 00:00:00 2001 From: Rachel Marconi Date: Wed, 28 Aug 2024 13:33:05 -0400 Subject: [PATCH 5/5] order tweak --- .storybook/preview.js | 1 + 1 file changed, 1 insertion(+) diff --git a/.storybook/preview.js b/.storybook/preview.js index 0a749eec..5240ac6b 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -24,6 +24,7 @@ const preview = { "Examples", "Components", "Layercake", + ["Intro"], "Layout", "Logos", "Maps",