@onsvisual/svelte-components 1.0.40 → 1.0.42

package/dist/datavis/ColumnChart/ColumnChart.stories.svelte

@@ -1,84 +1,84 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import { ColumnChart } from "@onsvisual/svelte-charts";
-	import data from "../demo-data/data.js";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Data visualisation/ColumnChart",
-		component: ColumnChart,
-		tags: ["autodocs"],
-		argTypes: {
-			mode: {
-				options: ["default", "stacked", "grouped", "comparison", "marker"],
-				control: { type: "select" }
-			}
-		},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-<Story
-	name="Default"
-	args={{
-		data: data.filter((d) => d.group == "apples"),
-		xKey: "year",
-		yKey: "value",
-		title: "Simple bar chart",
-		footer: "Source: ONS.",
-		mode: "default"
-	}}
-/>
-
-<Story
-	name="Stacked columns"
-	args={{
-		data,
-		xKey: "year",
-		yKey: "value",
-		zKey: "group",
-		title: "Stacked bar chart",
-		footer: "Source: ONS.",
-		mode: "default"
-	}}
-/>
-
-<Story
-	name="Grouped columns"
-	args={{
-		data,
-		xKey: "year",
-		yKey: "value",
-		zKey: "group",
-		title: "Grouped bar chart",
-		footer: "Source: ONS.",
-		mode: "grouped"
-	}}
-/>
-
-<Story
-	name="Comparison markers"
-	args={{
-		data,
-		xKey: "year",
-		yKey: "value",
-		zKey: "group",
-		title: "Comparison marker chart",
-		footer: "Source: ONS.",
-		mode: "comparison"
-	}}
-/>
-
-<Story
-	name="Barcode"
-	args={{
-		data,
-		xKey: "year",
-		yKey: "value",
-		zKey: "group",
-		title: "Barcode chart",
-		footer: "Source: ONS.",
-		mode: "marker"
-	}}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import { ColumnChart } from "@onsvisual/svelte-charts";
+	import data from "../demo-data/data.js";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Data visualisation/ColumnChart",
+		component: ColumnChart,
+		tags: ["autodocs"],
+		argTypes: {
+			mode: {
+				options: ["default", "stacked", "grouped", "comparison", "marker"],
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		data: data.filter((d) => d.group == "apples"),
+		xKey: "year",
+		yKey: "value",
+		title: "Simple bar chart",
+		footer: "Source: ONS.",
+		mode: "default"
+	}}
+/>
+
+<Story
+	name="Stacked columns"
+	args={{
+		data,
+		xKey: "year",
+		yKey: "value",
+		zKey: "group",
+		title: "Stacked bar chart",
+		footer: "Source: ONS.",
+		mode: "default"
+	}}
+/>
+
+<Story
+	name="Grouped columns"
+	args={{
+		data,
+		xKey: "year",
+		yKey: "value",
+		zKey: "group",
+		title: "Grouped bar chart",
+		footer: "Source: ONS.",
+		mode: "grouped"
+	}}
+/>
+
+<Story
+	name="Comparison markers"
+	args={{
+		data,
+		xKey: "year",
+		yKey: "value",
+		zKey: "group",
+		title: "Comparison marker chart",
+		footer: "Source: ONS.",
+		mode: "comparison"
+	}}
+/>
+
+<Story
+	name="Barcode"
+	args={{
+		data,
+		xKey: "year",
+		yKey: "value",
+		zKey: "group",
+		title: "Barcode chart",
+		footer: "Source: ONS.",
+		mode: "marker"
+	}}
+/>

package/dist/datavis/ColumnChart/docs/component.md

@@ -1,19 +1,19 @@
-A column chart component with various modes, plus animation and events.
-
-Note: This component is part of the **@onsvisual/svelte-charts** library. See [more examples here](https://onsvisual.github.io/svelte-charts/).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { ColumnChart } from "@onsvisual/svelte-charts";
-
-  const data = [
-    { year: 2017, value: 320 },
-    { year: 2018, value: 640 },
-    { year: 2019, value: 1600 },
-    { year: 2020, value: 3840 },
-  ];
-</script>
-
-<ColumnChart {data} xKey="value" yKey="year" title="Bar chart example" footer="Source: ONS." />
-```
+A column chart component with various modes, plus animation and events.
+
+Note: This component is part of the **@onsvisual/svelte-charts** library. See [more examples here](https://onsvisual.github.io/svelte-charts/).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { ColumnChart } from "@onsvisual/svelte-charts";
+
+  const data = [
+    { year: 2017, value: 320 },
+    { year: 2018, value: 640 },
+    { year: 2019, value: 1600 },
+    { year: 2020, value: 3840 },
+  ];
+</script>
+
+<ColumnChart {data} xKey="value" yKey="year" title="Bar chart example" footer="Source: ONS." />
+```

package/dist/datavis/DataCard/DataCard.stories.svelte

@@ -1,45 +1,45 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
-	import DataCard from "./DataCard.svelte";
-	import componentDocs from "./docs/component.md?raw";
-	import exampleDocs from "./docs/example.md?raw";
-	import data from "../demo-data/data-scatter.js";
-
-	const { Story } = defineMeta({
-		title: "Data visualisation/DataCard",
-		component: DataCard,
-		tags: ["autodocs"],
-		argTypes: {
-			mode: {
-				control: { type: "select" }
-			}
-		},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-<Story
-	name="Big number"
-	args={{
-		title: "Consumer Price Index (CPI)",
-		subtitle: "United Kingdom",
-		value: "up 2.5%",
-		caption: "in 12 months to December 2024",
-		source: "Source: ONS"
-	}}
-/>
-
-<Story
-	name="Sparkline"
-	args={{
-		title: "Example sparkline",
-		subtitle: "Value in £ million",
-		mode: "sparkline",
-		data: data.map((d) => ({ x: d.year, y: d.value })),
-		value: "down 2.47",
-		caption: `Change from 1979 to 2016`,
-		source: "Source: ONS"
-	}}
-	parameters={withStoryDocs(exampleDocs)}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
+	import DataCard from "./DataCard.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import exampleDocs from "./docs/example.md?raw";
+	import data from "../demo-data/data-scatter.js";
+
+	const { Story } = defineMeta({
+		title: "Data visualisation/DataCard",
+		component: DataCard,
+		tags: ["autodocs"],
+		argTypes: {
+			mode: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story
+	name="Big number"
+	args={{
+		title: "Consumer Price Index (CPI)",
+		subtitle: "United Kingdom",
+		value: "up 2.5%",
+		caption: "in 12 months to December 2024",
+		source: "Source: ONS"
+	}}
+/>
+
+<Story
+	name="Sparkline"
+	args={{
+		title: "Example sparkline",
+		subtitle: "Value in £ million",
+		mode: "sparkline",
+		data: data.map((d) => ({ x: d.year, y: d.value })),
+		value: "down 2.47",
+		caption: `Change from 1979 to 2016`,
+		source: "Source: ONS"
+	}}
+	parameters={withStoryDocs(exampleDocs)}
+/>

package/dist/datavis/DataCard/DataCard.svelte

@@ -1,70 +1,70 @@
-<script>
-	import Card from "../../layout/Card/Card.svelte";
-	import Sparkline from "./Sparkline.svelte";
-
-	/**
-	 * Title of card
-	 * @type {string|null}
-	 */
-	export let title = null;
-	/**
-	 * Optional: Subtitle of card
-	 * @type {string|null}
-	 */
-	export let subtitle = null;
-	/**
-	 * Optional: URL link for card title
-	 * @type {string|null}
-	 */
-	export let href = null;
-	/**
-	 * Big number (expects a pre-formatted text string)
-	 * @type {string|number|null}
-	 */
-	export let value = null;
-	/**
-	 * Mode for the data tile
-	 * @type {"number"|"sparkline"|"bar"}
-	 */
-	export let mode = "number";
-	/**
-	 * Text caption describing the number
-	 * @type {string|null}
-	 */
-	export let caption = null;
-	/**
-	 * An array of data (required for charts)
-	 * @type {object[]|null}
-	 */
-	export let data = null;
-	/**
-	 * Text describing the source of the data
-	 * @type {string|null}
-	 */
-	export let source = null;
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-</script>
-
-<Card {title} {href} mode="featured" {cls}>
-	{#if subtitle}
-		<p class="ons-card__subtitle ons-u-fs-s">{subtitle}</p>
-	{/if}
-	{#if mode === "sparkline" && data}
-		<Sparkline {data} />
-	{/if}
-	{#if value}
-		<p class="ons-card__figure ons-u-fs-3xl ons-u-fw-b ons-u-mb-no">{value}</p>
-	{/if}
-	{#if caption}
-		<p class="ons-card__body">
-			{@html caption}
-		</p>
-	{/if}
-	{#if source}
-		<p class="ons-u-fs-s ons-u-mt-s ons-u-mb-no">{source}</p>
-	{/if}
-</Card>
+<script>
+	import Card from "../../layout/Card/Card.svelte";
+	import Sparkline from "./Sparkline.svelte";
+
+	/**
+	 * Title of card
+	 * @type {string|null}
+	 */
+	export let title = null;
+	/**
+	 * Optional: Subtitle of card
+	 * @type {string|null}
+	 */
+	export let subtitle = null;
+	/**
+	 * Optional: URL link for card title
+	 * @type {string|null}
+	 */
+	export let href = null;
+	/**
+	 * Big number (expects a pre-formatted text string)
+	 * @type {string|number|null}
+	 */
+	export let value = null;
+	/**
+	 * Mode for the data tile
+	 * @type {"number"|"sparkline"|"bar"}
+	 */
+	export let mode = "number";
+	/**
+	 * Text caption describing the number
+	 * @type {string|null}
+	 */
+	export let caption = null;
+	/**
+	 * An array of data (required for charts)
+	 * @type {object[]|null}
+	 */
+	export let data = null;
+	/**
+	 * Text describing the source of the data
+	 * @type {string|null}
+	 */
+	export let source = null;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+</script>
+
+<Card {title} {href} mode="featured" {cls}>
+	{#if subtitle}
+		<p class="ons-card__subtitle ons-u-fs-s">{subtitle}</p>
+	{/if}
+	{#if mode === "sparkline" && data}
+		<Sparkline {data} />
+	{/if}
+	{#if value}
+		<p class="ons-card__figure ons-u-fs-3xl ons-u-fw-b ons-u-mb-no">{value}</p>
+	{/if}
+	{#if caption}
+		<p class="ons-card__body">
+			{@html caption}
+		</p>
+	{/if}
+	{#if source}
+		<p class="ons-u-fs-s ons-u-mt-s ons-u-mb-no">{source}</p>
+	{/if}
+</Card>

package/dist/datavis/DataCard/Sparkline.svelte

@@ -1,117 +1,117 @@
-<script>
-	import { scaleLinear } from "d3-scale";
-	import { line } from "d3-shape";
-
-	/**
-	 * Array of data in the format [{x: value, y: value}, etc]
-	 * @type {object[]}
-	 */
-	export let data;
-	/**
-	 * Key for the X values
-	 * @type {string}
-	 */
-	export let xKey = "x";
-	/**
-	 * Key for the Y values
-	 * @type {string}
-	 */
-	export let yKey = "y";
-
-	function minMax(data, key) {
-		const values = data.map((d) => d[key]);
-		return [Math.min(...values), Math.max(...values)];
-	}
-
-	const xDomain = [data[0][xKey], data[data.length - 1][xKey]];
-	const yDomain = minMax(data, yKey);
-
-	const xScale = scaleLinear().domain(xDomain).range([0, 100]);
-	const yScale = scaleLinear().domain(yDomain).range([100, 0]);
-	const lineFn = line()
-		.x((d) => xScale(d[xKey]))
-		.y((d) => yScale(d[yKey]));
-</script>
-
-<div class="sparkline-container">
-	<div
-		class="sparkline-point"
-		style={[data[data.length - 1]].map((d) => `right: 0; top: ${yScale(d[yKey])}%;`)[0]}
-	></div>
-	<svg class="sparkline-chart" viewBox="0 0 100 100" preserveAspectRatio="none">
-		<path class="sparkline" d={lineFn(data)} />
-	</svg>
-</div>
-<div class="x-ticks">
-	{#each [data[0], data[data.length - 1]] as tick, i}
-		<div class="x-tick x-tick--{i === 0 ? 'start' : 'end'}">
-			<span class="ons-u-fs-s">{tick[xKey]}</span><br /><span class="x-tick--value"
-				>{tick[yKey]}</span
-			>
-		</div>
-	{/each}
-</div>
-
-<style>
-	.sparkline-container {
-		display: block;
-		height: 100px;
-		width: 100%;
-		position: relative;
-	}
-	.sparkline-chart {
-		display: block;
-		position: absolute;
-		height: 100%;
-		width: 100%;
-		overflow: visible;
-	}
-	.sparkline-point {
-		position: absolute;
-		display: inline-block;
-		width: 10px;
-		height: 10px;
-		border-radius: 50%;
-		background: var(--ons-color-branded);
-		transform: translate(50%, -50%);
-	}
-	.sparkline {
-		fill: none;
-		stroke: var(--ons-color-branded);
-		stroke-width: 2.5px;
-		vector-effect: non-scaling-stroke;
-	}
-	.x-ticks {
-		display: flex;
-		width: 100%;
-		flex-direction: row;
-		justify-content: space-between;
-		margin-bottom: 6px;
-	}
-	.x-tick {
-		position: relative;
-		padding-top: 10px;
-		line-height: 1.1;
-	}
-	.x-tick--value {
-		color: var(--ons-color-branded);
-		font-size: 1.25rem;
-		font-weight: bold;
-	}
-	.x-tick::before {
-		position: absolute;
-		content: " ";
-		height: 10px;
-		top: 0;
-	}
-	.x-tick--end {
-		text-align: right;
-	}
-	.x-tick--start::before {
-		border-left: 1px solid var(--ons-color-borders);
-	}
-	.x-tick--end::before {
-		right: 0;
-		border-right: 1px solid var(--ons-color-borders);
-	}
-</style>
+<script>
+	import { scaleLinear } from "d3-scale";
+	import { line } from "d3-shape";
+
+	/**
+	 * Array of data in the format [{x: value, y: value}, etc]
+	 * @type {object[]}
+	 */
+	export let data;
+	/**
+	 * Key for the X values
+	 * @type {string}
+	 */
+	export let xKey = "x";
+	/**
+	 * Key for the Y values
+	 * @type {string}
+	 */
+	export let yKey = "y";
+
+	function minMax(data, key) {
+		const values = data.map((d) => d[key]);
+		return [Math.min(...values), Math.max(...values)];
+	}
+
+	const xDomain = [data[0][xKey], data[data.length - 1][xKey]];
+	const yDomain = minMax(data, yKey);
+
+	const xScale = scaleLinear().domain(xDomain).range([0, 100]);
+	const yScale = scaleLinear().domain(yDomain).range([100, 0]);
+	const lineFn = line()
+		.x((d) => xScale(d[xKey]))
+		.y((d) => yScale(d[yKey]));
+</script>
+
+<div class="sparkline-container">
+	<div
+		class="sparkline-point"
+		style={[data[data.length - 1]].map((d) => `right: 0; top: ${yScale(d[yKey])}%;`)[0]}
+	></div>
+	<svg class="sparkline-chart" viewBox="0 0 100 100" preserveAspectRatio="none">
+		<path class="sparkline" d={lineFn(data)} />
+	</svg>
+</div>
+<div class="x-ticks">
+	{#each [data[0], data[data.length - 1]] as tick, i}
+		<div class="x-tick x-tick--{i === 0 ? 'start' : 'end'}">
+			<span class="ons-u-fs-s">{tick[xKey]}</span><br /><span class="x-tick--value"
+				>{tick[yKey]}</span
+			>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.sparkline-container {
+		display: block;
+		height: 100px;
+		width: 100%;
+		position: relative;
+	}
+	.sparkline-chart {
+		display: block;
+		position: absolute;
+		height: 100%;
+		width: 100%;
+		overflow: visible;
+	}
+	.sparkline-point {
+		position: absolute;
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+		background: var(--ons-color-branded);
+		transform: translate(50%, -50%);
+	}
+	.sparkline {
+		fill: none;
+		stroke: var(--ons-color-branded);
+		stroke-width: 2.5px;
+		vector-effect: non-scaling-stroke;
+	}
+	.x-ticks {
+		display: flex;
+		width: 100%;
+		flex-direction: row;
+		justify-content: space-between;
+		margin-bottom: 6px;
+	}
+	.x-tick {
+		position: relative;
+		padding-top: 10px;
+		line-height: 1.1;
+	}
+	.x-tick--value {
+		color: var(--ons-color-branded);
+		font-size: 1.25rem;
+		font-weight: bold;
+	}
+	.x-tick::before {
+		position: absolute;
+		content: " ";
+		height: 10px;
+		top: 0;
+	}
+	.x-tick--end {
+		text-align: right;
+	}
+	.x-tick--start::before {
+		border-left: 1px solid var(--ons-color-borders);
+	}
+	.x-tick--end::before {
+		right: 0;
+		border-right: 1px solid var(--ons-color-borders);
+	}
+</style>