@onsvisual/svelte-components 1.0.44 → 1.0.45

package/dist/datavis/Table/Table.stories.svelte

@@ -1,48 +1,48 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Table from "./Table.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const data = [
-		{ country: "Scotland", mountain: "Ben Nevis", height: 1345 },
-		{ country: "Wales", mountain: "Snowdon", height: 1085 },
-		{ country: "England", mountain: "Scarfell Pike", height: 978 },
-		{ country: "Northern Ireland", mountain: "Slieve Donard", height: 850 }
-	];
-	const columns = [
-		{ key: "country", label: "Country" },
-		{ key: "mountain", label: "Highest mountain" },
-		{ key: "height", label: "Height in metres", numeric: true }
-	];
-
-	const dataAlt = [
-		{ measure: "First measure", value: 1 },
-		{ measure: "Second measure", value: 2 },
-		{ measure: "Third measure", value: null },
-		{ measure: "Fourth measure", value: 3 }
-	];
-	const columnsAlt = [
-		{ key: "measure", label: "Measure" },
-		{ key: "value", label: "Value", numeric: true }
-	];
-
-	const { Story } = defineMeta({
-		title: "Data visualisation/Table",
-		component: Table,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-<Story name="Default" args={{ data, columns }} />
-
-<Story name="Fixed height with sticky header" args={{ data, columns, height: 200 }} />
-
-<Story name="Compact mode, sortable" args={{ data, columns, sortable: true, compact: true }} />
-
-<Story
-	name="Sortable with null values"
-	args={{ data: dataAlt, columns: columnsAlt, sortable: true }}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Table from "./Table.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const data = [
+		{ country: "Scotland", mountain: "Ben Nevis", height: 1345 },
+		{ country: "Wales", mountain: "Snowdon", height: 1085 },
+		{ country: "England", mountain: "Scarfell Pike", height: 978 },
+		{ country: "Northern Ireland", mountain: "Slieve Donard", height: 850 }
+	];
+	const columns = [
+		{ key: "country", label: "Country" },
+		{ key: "mountain", label: "Highest mountain" },
+		{ key: "height", label: "Height in metres", numeric: true }
+	];
+
+	const dataAlt = [
+		{ measure: "First measure", value: 1 },
+		{ measure: "Second measure", value: 2 },
+		{ measure: "Third measure", value: null },
+		{ measure: "Fourth measure", value: 3 }
+	];
+	const columnsAlt = [
+		{ key: "measure", label: "Measure" },
+		{ key: "value", label: "Value", numeric: true }
+	];
+
+	const { Story } = defineMeta({
+		title: "Data visualisation/Table",
+		component: Table,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story name="Default" args={{ data, columns }} />
+
+<Story name="Fixed height with sticky header" args={{ data, columns, height: 200 }} />
+
+<Story name="Compact mode, sortable" args={{ data, columns, sortable: true, compact: true }} />
+
+<Story
+	name="Sortable with null values"
+	args={{ data: dataAlt, columns: columnsAlt, sortable: true }}
+/>

package/dist/datavis/Table/Table.svelte

@@ -1,161 +1,161 @@
-<script>
-	import { formatter, isNumeric, ascending, descending } from "../../js/utils.js";
-
-	/**
-	 * An optional title for the table
-	 * @type {string|null}
-	 */
-	export let title = null;
-	/**
-	 * Make the table smaller/more compact
-	 * @type {boolean}
-	 */
-	export let compact = false;
-	/**
-	 * Make the table sortable
-	 * @type {boolean}
-	 */
-	export let sortable = false;
-	/**
-	 * Make the chart responsive (changes layout on narrow screens)
-	 * @type {boolean}
-	 */
-	export let responsive = false;
-	/**
-	 * Highlight rows on hover
-	 * @type {boolean}
-	 */
-	export let rowHover = false;
-	/**
-	 * Maximum height of table (in pixels). The header row becomes sticky unless the value is "auto" (default).
-	 * @type {number|"auto"}
-	 */
-	export let height = "auto";
-	/**
-	 * Rows of data
-	 * @type {object[]}
-	 */
-	export let data = [];
-	/**
-	 * Optional metadata for formatting columns. Array of {key, label, numeric?, dp?, formatter?} objects
-	 * @type {object[]}
-	 */
-	export let columns =
-		Array.isArray(data) && data[0] ? Object.keys(data[0]).map((key) => ({ key, label: key })) : [];
-	let _data = [...data];
-	let sort = columns.map(() => "none");
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-
-	$: formatters = columns.map((d) => d.formatter || formatter(d.dp));
-</script>
-
-<div
-	class={cls}
-	style:overflow={typeof height === "number" ? "auto" : null}
-	style:height={typeof height === "number" ? `${height}px` : null}
-	style:display={typeof height !== "number" ? "contents" : null}
->
-	<table
-		class="ons-table"
-		class:ons-table--sortable={sortable}
-		class:ons-table--compact={compact}
-		class:ons-table--responsive={responsive}
-		class:ons-table--row-hover={rowHover}
-		class:sticky-header={typeof height === "number"}
-		data-aria-sort={sortable ? "Sort by" : null}
-		data-aria-asc={sortable ? "ascending" : null}
-		data-aria-desc={sortable ? "descending" : null}
-	>
-		{#if title}<caption class="ons-table__caption">{title}</caption>{/if}
-		<thead class="ons-table__head">
-			<tr class="ons-table__row">
-				{#each columns as col, i}
-					{#if sortable}
-						<th
-							scope="col"
-							class="ons-table__header"
-							class:ons-table__header--numeric={col.numeric}
-							aria-sort={sort[i]}
-						>
-							<button
-								aria-label="Sort by {col.label}"
-								type="button"
-								data-index={i}
-								class="ons-table__sort-button"
-								on:click={() => {
-									sort = sort.map((c, j) =>
-										j === i && c === "ascending" ? "descending" : j === i ? "ascending" : "none"
-									);
-									_data = _data.sort((a, b) =>
-										sort[i] === "ascending"
-											? ascending(a[col.key], b[col.key])
-											: descending(a[col.key], b[col.key])
-									);
-								}}
-							>
-								{col.label}<svg
-									id="sort-sprite-id-0"
-									class="ons-icon"
-									viewBox="0 0 12 19"
-									xmlns="http://www.w3.org/2000/svg"
-									focusable="false"
-									fill="currentColor"
-									role="img"
-									title="ons-icon-sort-sprite"
-								>
-									<path
-										class="ons-topTriangle"
-										d="M6 0l6 7.2H0L6 0zm0 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"
-									></path>
-									<path class="ons-bottomTriangle" d="M6 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"
-									></path>
-								</svg>
-							</button>
-						</th>
-					{:else}
-						<th
-							scope="col"
-							class="ons-table__header"
-							class:ons-table__header--numeric={col.numeric}
-						>
-							<span class="ons-table__header-text">{col.label}</span>
-						</th>
-					{/if}
-				{/each}
-			</tr>
-		</thead>
-		<tbody class="ons-table__body">
-			{#each _data as row}
-				<tr class="ons-table__row">
-					{#each columns as col, i}
-						<td
-							class="ons-table__cell"
-							class:ons-table__cell--numeric={col.numeric}
-							data-th={col.label}
-							>{@html col.numeric && isNumeric(row[col.key])
-								? formatters[i](row[col.key])
-								: row[col.key] || "&ndash;"}</td
-						>
-					{/each}
-				</tr>
-			{/each}
-		</tbody>
-	</table>
-</div>
-
-<style>
-	table.sticky-header thead.ons-table__head {
-		position: sticky;
-		top: 0;
-		background: var(--ons-color-page-light);
-		border-bottom: none;
-	}
-	table.sticky-header thead.ons-table__head th {
-		box-shadow: 0px -2px var(--ons-color-borders) inset;
-		border-bottom: none;
-	}
-</style>
+<script>
+	import { formatter, isNumeric, ascending, descending } from "../../js/utils.js";
+
+	/**
+	 * An optional title for the table
+	 * @type {string|null}
+	 */
+	export let title = null;
+	/**
+	 * Make the table smaller/more compact
+	 * @type {boolean}
+	 */
+	export let compact = false;
+	/**
+	 * Make the table sortable
+	 * @type {boolean}
+	 */
+	export let sortable = false;
+	/**
+	 * Make the chart responsive (changes layout on narrow screens)
+	 * @type {boolean}
+	 */
+	export let responsive = false;
+	/**
+	 * Highlight rows on hover
+	 * @type {boolean}
+	 */
+	export let rowHover = false;
+	/**
+	 * Maximum height of table (in pixels). The header row becomes sticky unless the value is "auto" (default).
+	 * @type {number|"auto"}
+	 */
+	export let height = "auto";
+	/**
+	 * Rows of data
+	 * @type {object[]}
+	 */
+	export let data = [];
+	/**
+	 * Optional metadata for formatting columns. Array of {key, label, numeric?, dp?, formatter?} objects
+	 * @type {object[]}
+	 */
+	export let columns =
+		Array.isArray(data) && data[0] ? Object.keys(data[0]).map((key) => ({ key, label: key })) : [];
+	let _data = [...data];
+	let sort = columns.map(() => "none");
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+
+	$: formatters = columns.map((d) => d.formatter || formatter(d.dp));
+</script>
+
+<div
+	class={cls}
+	style:overflow={typeof height === "number" ? "auto" : null}
+	style:height={typeof height === "number" ? `${height}px` : null}
+	style:display={typeof height !== "number" ? "contents" : null}
+>
+	<table
+		class="ons-table"
+		class:ons-table--sortable={sortable}
+		class:ons-table--compact={compact}
+		class:ons-table--responsive={responsive}
+		class:ons-table--row-hover={rowHover}
+		class:sticky-header={typeof height === "number"}
+		data-aria-sort={sortable ? "Sort by" : null}
+		data-aria-asc={sortable ? "ascending" : null}
+		data-aria-desc={sortable ? "descending" : null}
+	>
+		{#if title}<caption class="ons-table__caption">{title}</caption>{/if}
+		<thead class="ons-table__head">
+			<tr class="ons-table__row">
+				{#each columns as col, i}
+					{#if sortable}
+						<th
+							scope="col"
+							class="ons-table__header"
+							class:ons-table__header--numeric={col.numeric}
+							aria-sort={sort[i]}
+						>
+							<button
+								aria-label="Sort by {col.label}"
+								type="button"
+								data-index={i}
+								class="ons-table__sort-button"
+								on:click={() => {
+									sort = sort.map((c, j) =>
+										j === i && c === "ascending" ? "descending" : j === i ? "ascending" : "none"
+									);
+									_data = _data.sort((a, b) =>
+										sort[i] === "ascending"
+											? ascending(a[col.key], b[col.key])
+											: descending(a[col.key], b[col.key])
+									);
+								}}
+							>
+								{col.label}<svg
+									id="sort-sprite-id-0"
+									class="ons-icon"
+									viewBox="0 0 12 19"
+									xmlns="http://www.w3.org/2000/svg"
+									focusable="false"
+									fill="currentColor"
+									role="img"
+									title="ons-icon-sort-sprite"
+								>
+									<path
+										class="ons-topTriangle"
+										d="M6 0l6 7.2H0L6 0zm0 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"
+									></path>
+									<path class="ons-bottomTriangle" d="M6 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"
+									></path>
+								</svg>
+							</button>
+						</th>
+					{:else}
+						<th
+							scope="col"
+							class="ons-table__header"
+							class:ons-table__header--numeric={col.numeric}
+						>
+							<span class="ons-table__header-text">{col.label}</span>
+						</th>
+					{/if}
+				{/each}
+			</tr>
+		</thead>
+		<tbody class="ons-table__body">
+			{#each _data as row}
+				<tr class="ons-table__row">
+					{#each columns as col, i}
+						<td
+							class="ons-table__cell"
+							class:ons-table__cell--numeric={col.numeric}
+							data-th={col.label}
+							>{@html col.numeric && isNumeric(row[col.key])
+								? formatters[i](row[col.key])
+								: row[col.key] || "&ndash;"}</td
+						>
+					{/each}
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>
+
+<style>
+	table.sticky-header thead.ons-table__head {
+		position: sticky;
+		top: 0;
+		background: var(--ons-color-page-light);
+		border-bottom: none;
+	}
+	table.sticky-header thead.ons-table__head th {
+		box-shadow: 0px -2px var(--ons-color-borders) inset;
+		border-bottom: none;
+	}
+</style>

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

@@ -1,20 +1,20 @@
-A table component with various customisation options.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Table } from "@onsvisual/svelte-components";
-
-  const data = [
-    { col1: "Item one", col2: 10 },
-    { col1: "Item two", col2: 20 },
-    { col1: "Item three", col2: 30 },
-  ];
-  const columns = [
-    { key: "col1", label: "Text column" },
-    { key: "col2", label: "Numeric column", numeric: true},
-  ];
-</script>
-
-<Table {data} {columns} />
-```
+A table component with various customisation options.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Table } from "@onsvisual/svelte-components";
+
+  const data = [
+    { col1: "Item one", col2: 10 },
+    { col1: "Item two", col2: 20 },
+    { col1: "Item three", col2: 30 },
+  ];
+  const columns = [
+    { key: "col1", label: "Text column" },
+    { key: "col2", label: "Numeric column", numeric: true},
+  ];
+</script>
+
+<Table {data} {columns} />
+```

package/dist/datavis/demo-data/data-scatter.js

@@ -1,40 +1,40 @@
-export default [
-  { year: 1979, value: 7.19, alt: 12, group: "apples" },
-  { year: 1980, value: 7.83, alt: 15, group: "apples" },
-  { year: 1981, value: 7.24, alt: 17, group: "apples" },
-  { year: 1982, value: 7.44, alt: 28, group: "apples" },
-  { year: 1983, value: 7.51, alt: 23, group: "apples" },
-  { year: 1984, value: 7.1, alt: 17, group: "apples" },
-  { year: 1985, value: 6.91, alt: 11, group: "apples" },
-  { year: 1986, value: 7.53, alt: 13, group: "apples" },
-  { year: 1987, value: 7.47, alt: 18, group: "apples" },
-  { year: 1988, value: 7.48, alt: 20, group: "apples" },
-  { year: 1989, value: 7.03, alt: 24, group: "apples" },
-  { year: 1990, value: 6.23, alt: 26, group: "bananas" },
-  { year: 1991, value: 6.54, alt: 16, group: "bananas" },
-  { year: 1992, value: 7.54, alt: 25, group: "bananas" },
-  { year: 1993, value: 6.5, alt: 28, group: "bananas" },
-  { year: 1994, value: 7.18, alt: 11, group: "bananas" },
-  { year: 1995, value: 6.12, alt: 19, group: "bananas" },
-  { year: 1996, value: 7.87, alt: 14, group: "bananas" },
-  { year: 1997, value: 6.73, alt: 22, group: "bananas" },
-  { year: 1998, value: 6.55, alt: 13, group: "bananas" },
-  { year: 1999, value: 6.23, alt: 30, group: "bananas" },
-  { year: 2000, value: 6.31, alt: 27, group: "bananas" },
-  { year: 2001, value: 6.74, alt: 13, group: "cherries" },
-  { year: 2002, value: 5.95, alt: 18, group: "cherries" },
-  { year: 2003, value: 6.13, alt: 15, group: "cherries" },
-  { year: 2004, value: 6.04, alt: 11, group: "cherries" },
-  { year: 2005, value: 5.56, alt: 29, group: "cherries" },
-  { year: 2006, value: 5.91, alt: 26, group: "cherries" },
-  { year: 2007, value: 4.29, alt: 10, group: "cherries" },
-  { year: 2008, value: 4.72, alt: 14, group: "cherries" },
-  { year: 2009, value: 5.38, alt: 21, group: "cherries" },
-  { year: 2010, value: 4.92, alt: 20, group: "cherries" },
-  { year: 2011, value: 4.61, alt: 24, group: "dates" },
-  { year: 2012, value: 3.62, alt: 19, group: "dates" },
-  { year: 2013, value: 5.35, alt: 12, group: "dates" },
-  { year: 2014, value: 5.28, alt: 13, group: "dates" },
-  { year: 2015, value: 4.63, alt: 28, group: "dates" },
-  { year: 2016, value: 4.72, alt: 30, group: "dates" },
-];
+export default [
+  { year: 1979, value: 7.19, alt: 12, group: "apples" },
+  { year: 1980, value: 7.83, alt: 15, group: "apples" },
+  { year: 1981, value: 7.24, alt: 17, group: "apples" },
+  { year: 1982, value: 7.44, alt: 28, group: "apples" },
+  { year: 1983, value: 7.51, alt: 23, group: "apples" },
+  { year: 1984, value: 7.1, alt: 17, group: "apples" },
+  { year: 1985, value: 6.91, alt: 11, group: "apples" },
+  { year: 1986, value: 7.53, alt: 13, group: "apples" },
+  { year: 1987, value: 7.47, alt: 18, group: "apples" },
+  { year: 1988, value: 7.48, alt: 20, group: "apples" },
+  { year: 1989, value: 7.03, alt: 24, group: "apples" },
+  { year: 1990, value: 6.23, alt: 26, group: "bananas" },
+  { year: 1991, value: 6.54, alt: 16, group: "bananas" },
+  { year: 1992, value: 7.54, alt: 25, group: "bananas" },
+  { year: 1993, value: 6.5, alt: 28, group: "bananas" },
+  { year: 1994, value: 7.18, alt: 11, group: "bananas" },
+  { year: 1995, value: 6.12, alt: 19, group: "bananas" },
+  { year: 1996, value: 7.87, alt: 14, group: "bananas" },
+  { year: 1997, value: 6.73, alt: 22, group: "bananas" },
+  { year: 1998, value: 6.55, alt: 13, group: "bananas" },
+  { year: 1999, value: 6.23, alt: 30, group: "bananas" },
+  { year: 2000, value: 6.31, alt: 27, group: "bananas" },
+  { year: 2001, value: 6.74, alt: 13, group: "cherries" },
+  { year: 2002, value: 5.95, alt: 18, group: "cherries" },
+  { year: 2003, value: 6.13, alt: 15, group: "cherries" },
+  { year: 2004, value: 6.04, alt: 11, group: "cherries" },
+  { year: 2005, value: 5.56, alt: 29, group: "cherries" },
+  { year: 2006, value: 5.91, alt: 26, group: "cherries" },
+  { year: 2007, value: 4.29, alt: 10, group: "cherries" },
+  { year: 2008, value: 4.72, alt: 14, group: "cherries" },
+  { year: 2009, value: 5.38, alt: 21, group: "cherries" },
+  { year: 2010, value: 4.92, alt: 20, group: "cherries" },
+  { year: 2011, value: 4.61, alt: 24, group: "dates" },
+  { year: 2012, value: 3.62, alt: 19, group: "dates" },
+  { year: 2013, value: 5.35, alt: 12, group: "dates" },
+  { year: 2014, value: 5.28, alt: 13, group: "dates" },
+  { year: 2015, value: 4.63, alt: 28, group: "dates" },
+  { year: 2016, value: 4.72, alt: 30, group: "dates" },
+];

package/dist/datavis/demo-data/data.js

@@ -1,18 +1,18 @@
-export default [
-  { year: 2017, value: 320, group: "apples" },
-  { year: 2017, value: 480, group: "bananas" },
-  { year: 2017, value: 640, group: "cherries" },
-  { year: 2017, value: 400, group: "dates" },
-  { year: 2018, value: 640, group: "apples" },
-  { year: 2018, value: 960, group: "bananas" },
-  { year: 2018, value: 640, group: "cherries" },
-  { year: 2018, value: 400, group: "dates" },
-  { year: 2019, value: 1600, group: "apples" },
-  { year: 2019, value: 1440, group: "bananas" },
-  { year: 2019, value: 960, group: "cherries" },
-  { year: 2019, value: 400, group: "dates" },
-  { year: 2020, value: 3840, group: "apples" },
-  { year: 2020, value: 1920, group: "bananas" },
-  { year: 2020, value: 960, group: "cherries" },
-  { year: 2020, value: 400, group: "dates" },
-];
+export default [
+  { year: 2017, value: 320, group: "apples" },
+  { year: 2017, value: 480, group: "bananas" },
+  { year: 2017, value: 640, group: "cherries" },
+  { year: 2017, value: 400, group: "dates" },
+  { year: 2018, value: 640, group: "apples" },
+  { year: 2018, value: 960, group: "bananas" },
+  { year: 2018, value: 640, group: "cherries" },
+  { year: 2018, value: 400, group: "dates" },
+  { year: 2019, value: 1600, group: "apples" },
+  { year: 2019, value: 1440, group: "bananas" },
+  { year: 2019, value: 960, group: "cherries" },
+  { year: 2019, value: 400, group: "dates" },
+  { year: 2020, value: 3840, group: "apples" },
+  { year: 2020, value: 1920, group: "bananas" },
+  { year: 2020, value: 960, group: "cherries" },
+  { year: 2020, value: 400, group: "dates" },
+];

package/dist/datavis/intro.mdx

@@ -1,22 +1,22 @@
-import { Meta } from "@storybook/addon-docs/blocks";
-
-<Meta title="Data visualisation/Using svelte-charts" />
-
-# Using svelte-charts
-
-Most of the charts in this section are examples from the [@onsvisual/svelte-charts](https://github.com/onsvisual/svelte-charts/) library. To make use of the charts from that library, it is necessary to install an additional dependency in your project:
-
-```bash
-npm install @onsvisual/svelte-charts --save-dev
-```
-
-When using these charts, you need to make sure that you import them from the **svelte-charts** library and not the components library, for example:
-
-{/* prettier-ignore */}
-```html
-<script>
-  import { Chart } from  "@onsvisual/svelte-charts";
-</script>
-
-<Chart {...chart_properties}>
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Data visualisation/Using svelte-charts" />
+
+# Using svelte-charts
+
+Most of the charts in this section are examples from the [@onsvisual/svelte-charts](https://github.com/onsvisual/svelte-charts/) library. To make use of the charts from that library, it is necessary to install an additional dependency in your project:
+
+```bash
+npm install @onsvisual/svelte-charts --save-dev
+```
+
+When using these charts, you need to make sure that you import them from the **svelte-charts** library and not the components library, for example:
+
+{/* prettier-ignore */}
+```html
+<script>
+  import { Chart } from  "@onsvisual/svelte-charts";
+</script>
+
+<Chart {...chart_properties}>
 ```