@onsvisual/svelte-components 1.0.37 → 1.0.38

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

@@ -1,18 +1,20 @@
-A component for presenting key facts and figures as a grid of "cards".
-
-Note: This component is experimental. Its attributes and options are likely to change. The intention is to include a range of simple chart types.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { DataCard } from "@onsvisual/svelte-components";
-</script>
-
-<DataCard
-  title="Consumer Price Index (CPI)"
-  subtitle="Consumer Price Index (CPI)"
-  value="up 2.5%"
-  caption="in 12 months to December 2024"
-  source="Source: ONS"
-/>
-```
+<span class="ons-warning">This component is experimental</span>
+
+A component for presenting key facts and figures as a grid of "cards".
+
+Note: This component is experimental. Its attributes and options are likely to change. The intention is to include a range of simple chart types.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { DataCard } from "@onsvisual/svelte-components";
+</script>
+
+<DataCard
+  title="Consumer Price Index (CPI)"
+  subtitle="Consumer Price Index (CPI)"
+  value="up 2.5%"
+  caption="in 12 months to December 2024"
+  source="Source: ONS"
+/>
+```

package/dist/datavis/DataCard/docs/example.md

@@ -1,25 +1,25 @@
-For sparklines, an array of data needs to be passed into the component.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { DataCard } from "@onsvisual/svelte-components";
-
-  const data = [
-    { x: 1979, y: 7.19 },
-    { x: 1980, y: 7.83 },
-    { x: 1981, y: 7.24 },
-    etc...
-  ];
-</script>
-
-<DataCard
-  title="Example sparkline",
-  subtitle="Value in £ million"
-  mode="sparkline"
-  data={data}
-  value="down 2.47",
-  caption="Change from 1979 to 2016",
-  source="Source: ONS"
-/>
-```
+For sparklines, an array of data needs to be passed into the component.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { DataCard } from "@onsvisual/svelte-components";
+
+  const data = [
+    { x: 1979, y: 7.19 },
+    { x: 1980, y: 7.83 },
+    { x: 1981, y: 7.24 },
+    etc...
+  ];
+</script>
+
+<DataCard
+  title="Example sparkline",
+  subtitle="Value in £ million"
+  mode="sparkline"
+  data={data}
+  value="down 2.47",
+  caption="Change from 1979 to 2016",
+  source="Source: ONS"
+/>
+```

package/dist/datavis/DotPlotChart/DotPlotChart.stories.svelte

@@ -1,40 +1,40 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import { DotPlotChart } from "@onsvisual/svelte-charts";
-	import data from "../demo-data/data.js";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Data visualisation/DotPlotChart",
-		component: DotPlotChart,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-<Story
-	name="Default"
-	args={{
-		data: data.filter((d) => d.group == "apples"),
-		xKey: "value",
-		yKey: "year",
-		title: "Dot plot chart",
-		footer: "Source: ONS.",
-		mode: "default"
-	}}
-/>
-
-<Story
-	name="Multiple dots"
-	args={{
-		data,
-		xKey: "value",
-		yKey: "year",
-		zKey: "group",
-		title: "Dot plot with multiple points",
-		footer: "Source: ONS.",
-		mode: "default"
-	}}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import { DotPlotChart } from "@onsvisual/svelte-charts";
+	import data from "../demo-data/data.js";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Data visualisation/DotPlotChart",
+		component: DotPlotChart,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		data: data.filter((d) => d.group == "apples"),
+		xKey: "value",
+		yKey: "year",
+		title: "Dot plot chart",
+		footer: "Source: ONS.",
+		mode: "default"
+	}}
+/>
+
+<Story
+	name="Multiple dots"
+	args={{
+		data,
+		xKey: "value",
+		yKey: "year",
+		zKey: "group",
+		title: "Dot plot with multiple points",
+		footer: "Source: ONS.",
+		mode: "default"
+	}}
+/>

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

@@ -1,19 +1,19 @@
-A dot plot chart component with 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 { DotPlotChart } from "@onsvisual/svelte-charts";
-
-  const data = [
-    { year: 2017, value: 320 },
-    { year: 2018, value: 640 },
-    { year: 2019, value: 1600 },
-    { year: 2020, value: 3840 },
-  ];
-</script>
-
-<DotPlotChart {data} xKey="value" yKey="year" title="Bar chart example" footer="Source: ONS." />
-```
+A dot plot chart component with 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 { DotPlotChart } from "@onsvisual/svelte-charts";
+
+  const data = [
+    { year: 2017, value: 320 },
+    { year: 2018, value: 640 },
+    { year: 2019, value: 1600 },
+    { year: 2020, value: 3840 },
+  ];
+</script>
+
+<DotPlotChart {data} xKey="value" yKey="year" title="Bar chart example" footer="Source: ONS." />
+```

package/dist/datavis/LineChart/LineChart.stories.svelte

@@ -1,64 +1,64 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import { LineChart } from "@onsvisual/svelte-charts";
-	import data from "../demo-data/data.js";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Data visualisation/LineChart",
-		component: LineChart,
-		tags: ["autodocs"],
-		argTypes: {
-			mode: {
-				options: ["default", "stacked"],
-				control: { type: "select" }
-			}
-		},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-<Story
-	name="Default"
-	args={{
-		data,
-		xKey: "year",
-		yKey: "value",
-		zKey: "group",
-		title: "Simple line chart",
-		footer: "Source: ONS.",
-		mode: "default",
-		legend: true
-	}}
-/>
-
-<Story
-	name="Line chart with inline labels"
-	args={{
-		data,
-		xKey: "year",
-		yKey: "value",
-		zKey: "group",
-		title: "Line chart with inline labels",
-		footer: "Source: ONS.",
-		mode: "default",
-		padding: { top: 0, bottom: 28, left: 35, right: 100 },
-		labels: "all"
-	}}
-/>
-
-<Story
-	name="Stacked area chart"
-	args={{
-		data,
-		xKey: "year",
-		yKey: "value",
-		zKey: "group",
-		title: "Stacked area chart",
-		footer: "Source: ONS.",
-		mode: "stacked",
-		line: false,
-		legend: true
-	}}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import { LineChart } from "@onsvisual/svelte-charts";
+	import data from "../demo-data/data.js";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Data visualisation/LineChart",
+		component: LineChart,
+		tags: ["autodocs"],
+		argTypes: {
+			mode: {
+				options: ["default", "stacked"],
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		data,
+		xKey: "year",
+		yKey: "value",
+		zKey: "group",
+		title: "Simple line chart",
+		footer: "Source: ONS.",
+		mode: "default",
+		legend: true
+	}}
+/>
+
+<Story
+	name="Line chart with inline labels"
+	args={{
+		data,
+		xKey: "year",
+		yKey: "value",
+		zKey: "group",
+		title: "Line chart with inline labels",
+		footer: "Source: ONS.",
+		mode: "default",
+		padding: { top: 0, bottom: 28, left: 35, right: 100 },
+		labels: "all"
+	}}
+/>
+
+<Story
+	name="Stacked area chart"
+	args={{
+		data,
+		xKey: "year",
+		yKey: "value",
+		zKey: "group",
+		title: "Stacked area chart",
+		footer: "Source: ONS.",
+		mode: "stacked",
+		line: false,
+		legend: true
+	}}
+/>

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

@@ -1,31 +1,31 @@
-A line 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 { LineChart } from "@onsvisual/svelte-charts";
-
-  const data = [
-    { 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" },
-  ];
-</script>
-
-<LineChart {data} xKey="year" yKey="value" zKey="group" title="Line chart example" footer="Source: ONS." legend={true} />
-```
+A line 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 { LineChart } from "@onsvisual/svelte-charts";
+
+  const data = [
+    { 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" },
+  ];
+</script>
+
+<LineChart {data} xKey="year" yKey="value" zKey="group" title="Line chart example" footer="Source: ONS." legend={true} />
+```

package/dist/datavis/ScatterChart/ScatterChart.stories.svelte

@@ -1,55 +1,55 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import { ScatterChart } from "@onsvisual/svelte-charts";
-	import data from "../demo-data/data-scatter.js";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Data visualisation/ScatterChart",
-		component: ScatterChart,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-<Story
-	name="Default"
-	args={{
-		data,
-		xKey: "year",
-		yKey: "value",
-		title: "Simple scatter chart",
-		footer: "Source: ONS."
-	}}
-/>
-
-<Story
-	name="Scatter chart radius and groups"
-	args={{
-		data,
-		xKey: "year",
-		yKey: "value",
-		zKey: "group",
-		rKey: "alt",
-		r: [3, 15],
-		title: "Scatter chart radius and groups",
-		footer: "Source: ONS.",
-		legend: true
-	}}
-/>
-
-<Story
-	name="Beeswarm chart radius and groups"
-	args={{
-		data,
-		xKey: "value",
-		zKey: "group",
-		rKey: "alt",
-		r: [3, 15],
-		title: "Beeswarm chart radius and groups",
-		footer: "Source: ONS.",
-		legend: true
-	}}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import { ScatterChart } from "@onsvisual/svelte-charts";
+	import data from "../demo-data/data-scatter.js";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Data visualisation/ScatterChart",
+		component: ScatterChart,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		data,
+		xKey: "year",
+		yKey: "value",
+		title: "Simple scatter chart",
+		footer: "Source: ONS."
+	}}
+/>
+
+<Story
+	name="Scatter chart radius and groups"
+	args={{
+		data,
+		xKey: "year",
+		yKey: "value",
+		zKey: "group",
+		rKey: "alt",
+		r: [3, 15],
+		title: "Scatter chart radius and groups",
+		footer: "Source: ONS.",
+		legend: true
+	}}
+/>
+
+<Story
+	name="Beeswarm chart radius and groups"
+	args={{
+		data,
+		xKey: "value",
+		zKey: "group",
+		rKey: "alt",
+		r: [3, 15],
+		title: "Beeswarm chart radius and groups",
+		footer: "Source: ONS.",
+		legend: true
+	}}
+/>

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

@@ -1,53 +1,53 @@
-A scatter 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 { ScatterChart } from "@onsvisual/svelte-charts";
-
-  const data = 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" },
-  ];
-</script>
-
-<ScatterChart {data} xKey="year" yKey="value" title="Scatter chart example" footer="Source: ONS." />
-```
+A scatter 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 { ScatterChart } from "@onsvisual/svelte-charts";
+
+  const data = 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" },
+  ];
+</script>
+
+<ScatterChart {data} xKey="year" yKey="value" title="Scatter chart example" footer="Source: ONS." />
+```