Skip to content

Commit

Permalink
prettierr
Browse files Browse the repository at this point in the history
  • Loading branch information
@rachelmarconi
rachelmarconi committed Aug 8, 2024
1 parent 9786b03 commit dd9d052
Show file tree
Hide file tree
Showing 8 changed files with 263 additions and 265 deletions.
7 changes: 3 additions & 4 deletions src/lib/Layercake/AxisX.docs.md
View file
Original file line number Diff line number Diff line change
@@ -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
<style>
Expand Down Expand Up @@ -41,7 +41,6 @@ Use this css instead:
</style>
```


```js
import { AxisX } from "@urbaninstitute/dataviz-components";
```
30 changes: 12 additions & 18 deletions src/lib/Layercake/AxisX.stories.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -23,8 +23,8 @@
control: {
type: "range",
min: 1,
max: 20,
},
max: 20
}
},
xTick: {
control: "number"
Expand Down Expand Up @@ -59,24 +59,18 @@
<script>
import { Story, Template } from "@storybook/addon-svelte-csf";
import { LayerCake, Svg } from "layercake";
import data from "./data.json"
import data from "./data.json";
const xKey = 'value';
const yKey = 'year';
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 {data} xDomain={[0, 20]} yDomain={[0, 10]} y={yKey} x={xKey}>
<Svg>
<AxisX {...args} />
</Svg>
</LayerCake>
</div>
</Template>
Expand Down
236 changes: 122 additions & 114 deletions src/lib/Layercake/AxisX.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
-->
<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';
}
<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>
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>
10 changes: 5 additions & 5 deletions src/lib/Layercake/AxisY.docs.md
View file
Original file line number Diff line number Diff line change
@@ -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
<style>
.tick, .axis-label {
font-size: 12px;
font-family: var(--font-family-sans-serif);
}

.tick line {
stroke: #dedddd;
}
Expand All @@ -25,7 +26,6 @@ Use this css instead:
</style>
```


```js
import { AxisY } from "@urbaninstitute/dataviz-components";
```
Loading

0 comments on commit dd9d052

Please sign in to comment.