add layercake components, stories and docs

.storybook/preview.js

@@ -23,6 +23,7 @@ const preview = {
           ["Theme", "Fonts"],
           "Examples",
           "Components",
+          "Layercake",
           "Layout",
           "Logos",
           "Maps",

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
 

src/lib/Layercake/AxisX.docs.md

@@ -0,0 +1,46 @@
+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:
+
+```js
+<style>
+     .tick {
+      font-size: 12px;
+      font-weight: 400;
+      font-family: var(--font-family-sans-serif);
+    }
+    line,
+    .tick line {
+      stroke: #DEDDDD;
+    }
+    .tick text {
+      fill: #000000;
+    }
+    .tick .tick-mark,
+    .baseline {
+      stroke: #000000;
+    }
+    /* This looks slightly better */
+    .axis.snapTicks .tick:last-child text {
+      transform: translateX(3px);
+    }
+    .axis.snapTicks .tick.tick-0 text {
+      transform: translateX(-3px);
+    }
+    .axis-label {
+      font-size: 12px;
+    }
+</style>
+```
+
+```js
+import { AxisX } from "@urbaninstitute/dataviz-components";
+```

src/lib/Layercake/AxisX.stories.svelte

@@ -0,0 +1,78 @@
+<script context="module">
+  import AxisX from "./AxisX.svelte";
+  import docs from "./AxisX.docs.md?raw";
+
+  export const meta = {
+    title: "Layercake/AxisX",
+    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"
+      }
+    },
+    parameters: {
+      backgrounds: {
+        default: "light",
+        values: [
+          { name: "light", value: "#ffffff" },
+          { name: "dark", value: "#0A4C6A" }
+        ]
+      },
+      docs: {
+        description: {
+          component: docs
+        }
+      },
+      githubLink: {
+        url: "/Layercake/AxisX.svelte"
+      }
+    }
+  };
+</script>
+
+<script>
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import { LayerCake, Svg } from "layercake";
+  import data from "./data.json";
+
+  const xKey = "value";
+  const yKey = "year";
+</script>
+
+<Template let:args>
+  <div style="height: 150px;">
+    <LayerCake {data} xDomain={[0, 20]} yDomain={[0, 10]} y={yKey} x={xKey}>
+      <Svg>
+        <AxisX {...args} />
+      </Svg>
+    </LayerCake>
+  </div>
+</Template>
+
+<Story name="Default" />

src/lib/Layercake/AxisX.svelte

@@ -0,0 +1,128 @@
+<!--
+  @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.
+ -->
+<script>
+  import { getContext } from "svelte";
+  const { width, height, xScale, yRange } = getContext("LayerCake");
+
+  /** @type {Boolean} [gridlines=true] - Extend lines from the ticks into the chart space */
+  export let gridlines = false;
+
+  /** @type {Boolean} [tickMarks=false] - Show a vertical mark for each tick. */
+  export let tickMarks = true;
+
+  /** @type {Boolean} [baseline=false] – Show a solid line at the bottom. */
+  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. */
+  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. */
+  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. */
+  export let ticks = undefined;
+
+  /** @type {Number} [xTick=0] - How far over to position the text marker. */
+  export let xTick = 0;
+
+  /** @type {Number} [yTick=16] - The distance from the baseline to place each tick value. */
+  export let yTick = 16;
+
+  /** @type {String|null} [axisLabel=null] An optional label for the y axis*/
+  export let axisLabel = null;
+
+  $: isBandwidth = typeof $xScale.bandwidth === "function";
+
+  $: tickVals = Array.isArray(ticks)
+    ? ticks
+    : isBandwidth
+      ? $xScale.domain()
+      : typeof ticks === "function"
+        ? ticks($xScale.ticks())
+        : $xScale.ticks(ticks);
+
+  function textAnchor(i) {
+    if (snapTicks === true) {
+      if (i === 0) {
+        return "start";
+      }
+      if (i === tickVals.length - 1) {
+        return "end";
+      }
+    }
+    return "middle";
+  }
+</script>
+
+<g class="axis x-axis" class:snapTicks>
+  {#each tickVals as tick, i (tick)}
+    <g class="tick tick-{i}" transform="translate({$xScale(tick)},{Math.max(...$yRange)})">
+      {#if gridlines !== false}
+        <line class="gridline" y1={$height * -1} y2="0" x1="0" x2="0" />
+      {/if}
+      {#if tickMarks === true}
+        <line
+          class="tick-mark"
+          y1={0}
+          y2={6}
+          x1={isBandwidth ? $xScale.bandwidth() / 2 : 0}
+          x2={isBandwidth ? $xScale.bandwidth() / 2 : 0}
+        />
+      {/if}
+      <text
+        x={isBandwidth ? $xScale.bandwidth() / 2 + xTick : xTick}
+        y={yTick}
+        dx=""
+        dy=""
+        text-anchor={textAnchor(i)}>{formatTick(tick)}</text
+      >
+    </g>
+  {/each}
+  {#if baseline === true}
+    <line class="baseline" y1={$height + 0.5} y2={$height + 0.5} x1="0" x2={$width} />
+  {/if}
+  {#if axisLabel}
+    <text
+      class="axis-label"
+      x={$width / 2}
+      y={$height + 40}
+      dy="-4"
+      fill={"#000"}
+      text-anchor="middle">{axisLabel}</text
+    >
+  {/if}
+</g>
+
+<style>
+  .tick {
+    font-size: 12px;
+    font-weight: 400;
+    font-family: var(--font-family-sans-serif);
+  }
+
+  line,
+  .tick line {
+    stroke: #dedddd;
+  }
+
+  .tick text {
+    fill: #000000;
+  }
+
+  .tick .tick-mark,
+  .baseline {
+    stroke: #000000;
+  }
+  /* This looks slightly better */
+  .axis.snapTicks .tick:last-child text {
+    transform: translateX(3px);
+  }
+  .axis.snapTicks .tick.tick-0 text {
+    transform: translateX(-3px);
+  }
+  .axis-label {
+    font-size: 12px;
+  }
+</style>

src/lib/Layercake/AxisY.docs.md

@@ -0,0 +1,31 @@
+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:
+
+```js
+<style>
+    .tick, .axis-label {
+      font-size: 12px;
+      font-family: var(--font-family-sans-serif);
+    }
+
+    .tick line {
+      stroke: #dedddd;
+    }
+    .tick:first-of-type line {
+      stroke: #000000;
+    }
+</style>
+```
+
+```js
+import { AxisY } from "@urbaninstitute/dataviz-components";
+```

src/lib/Layercake/AxisY.stories.svelte

@@ -0,0 +1,91 @@
+<script context="module">
+  import AxisY from "./AxisY.svelte";
+  import docs from "./AxisY.docs.md?raw";
+
+  export const meta = {
+    title: "Layercake/AxisY",
+    component: AxisY,
+    tags: ["autodocs"],
+    argTypes: {
+      gridlines: {
+        control: "boolean"
+      },
+      tickMarks: {
+        control: "boolean"
+      },
+      ticks: {
+        control: {
+          type: "range",
+          min: 1,
+          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"]
+      },
+      tickLabelColor: {
+        control: {
+          type: "color"
+        }
+      },
+      axisLabel: {
+        control: "text"
+      }
+    },
+    parameters: {
+      backgrounds: {
+        default: "light",
+        values: [
+          { name: "light", value: "#ffffff" },
+          { name: "dark", value: "#0A4C6A" }
+        ]
+      },
+      docs: {
+        description: {
+          component: docs
+        }
+      },
+      githubLink: {
+        url: "/Layercake/AxisY.svelte"
+      }
+    }
+  };
+</script>
+
+<script>
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import { LayerCake, Svg } from "layercake";
+  import data from "./data.json";
+
+  const xKey = "value";
+  const yKey = "year";
+</script>
+
+<Template let:args>
+  <div style="height: 150px; width:100%;">
+    <LayerCake {data} xDomain={[0, 20]} yDomain={[0, 10]} y={yKey} x={xKey}>
+      <Svg>
+        <AxisY {...args} />
+      </Svg>
+    </LayerCake>
+  </div>
+</Template>
+
+<Story name="Default" />