@onsvisual/svelte-components 0.1.105 → 1.0.0-next.2

package/dist/datavis/BarChart/BarChart.stories.svelte

@@ -0,0 +1,84 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import { BarChart } from "@onsvisual/svelte-charts";
+	import data from "../demo-data/data.js";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Data visualisation/BarChart",
+		component: BarChart,
+		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: "value",
+		yKey: "year",
+		title: "Simple bar chart",
+		footer: "Source: ONS.",
+		mode: "default"
+	}}
+/>
+
+<Story
+	name="Stacked bars"
+	args={{
+		data,
+		xKey: "value",
+		yKey: "year",
+		zKey: "group",
+		title: "Stacked bar chart",
+		footer: "Source: ONS.",
+		mode: "default"
+	}}
+/>
+
+<Story
+	name="Grouped bars"
+	args={{
+		data,
+		xKey: "value",
+		yKey: "year",
+		zKey: "group",
+		title: "Grouped bar chart",
+		footer: "Source: ONS.",
+		mode: "grouped"
+	}}
+/>
+
+<Story
+	name="Comparison markers"
+	args={{
+		data,
+		xKey: "value",
+		yKey: "year",
+		zKey: "group",
+		title: "Comparison marker chart",
+		footer: "Source: ONS.",
+		mode: "comparison"
+	}}
+/>
+
+<Story
+	name="Barcode"
+	args={{
+		data,
+		xKey: "value",
+		yKey: "year",
+		zKey: "group",
+		title: "Barcode chart",
+		footer: "Source: ONS.",
+		mode: "marker"
+	}}
+/>

package/dist/datavis/BarChart/BarChart.stories.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  BarChartProps */
+/** @typedef {typeof __propDef.events}  BarChartEvents */
+/** @typedef {typeof __propDef.slots}  BarChartSlots */
+export default class BarChart extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type BarChartProps = typeof __propDef.props;
+export type BarChartEvents = typeof __propDef.events;
+export type BarChartSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

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

package/dist/datavis/Chart/Chart.stories.svelte

@@ -0,0 +1,128 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
+	import { Chart } from "@onsvisual/svelte-charts";
+	import componentDocs from "./docs/component.md?raw";
+	import exampleDocs from "./docs/example.md?raw";
+
+	const barData = [
+		{ x: 5315, y: "Portsmouth" },
+		{ x: 5070, y: "Southampton" },
+		{ x: 4596, y: "Slough" },
+		{ x: 3969, y: "Reading" },
+		{ x: 3522, y: "Brighton and Hove" }
+	];
+	const lineData = [
+		{ z: "West Oxfordshire", x: "2002", y: 95961 },
+		{ z: "West Oxfordshire", x: "2003", y: 97083 },
+		{ z: "West Oxfordshire", x: "2004", y: 98038 },
+		{ z: "West Oxfordshire", x: "2005", y: 98869 },
+		{ z: "West Oxfordshire", x: "2006", y: 100316 },
+		{ z: "West Oxfordshire", x: "2007", y: 102166 },
+		{ z: "West Oxfordshire", x: "2008", y: 103016 },
+		{ z: "West Oxfordshire", x: "2009", y: 103824 },
+		{ z: "West Oxfordshire", x: "2010", y: 104706 },
+		{ z: "West Oxfordshire", x: "2011", y: 105442 },
+		{ z: "West Oxfordshire", x: "2012", y: 107164 },
+		{ z: "West Oxfordshire", x: "2013", y: 107945 },
+		{ z: "West Oxfordshire", x: "2014", y: 108095 },
+		{ z: "West Oxfordshire", x: "2015", y: 108609 },
+		{ z: "West Oxfordshire", x: "2016", y: 108748 },
+		{ z: "West Oxfordshire", x: "2017", y: 109266 },
+		{ z: "West Oxfordshire", x: "2018", y: 109800 },
+		{ z: "West Oxfordshire", x: "2019", y: 110643 },
+		{ z: "West Oxfordshire", x: "2020", y: 111758 },
+		{ z: "South Oxfordshire", x: "2002", y: 128754 },
+		{ z: "South Oxfordshire", x: "2003", y: 128920 },
+		{ z: "South Oxfordshire", x: "2004", y: 129359 },
+		{ z: "South Oxfordshire", x: "2005", y: 130050 },
+		{ z: "South Oxfordshire", x: "2006", y: 130676 },
+		{ z: "South Oxfordshire", x: "2007", y: 131626 },
+		{ z: "South Oxfordshire", x: "2008", y: 132611 },
+		{ z: "South Oxfordshire", x: "2009", y: 133466 },
+		{ z: "South Oxfordshire", x: "2010", y: 133915 },
+		{ z: "South Oxfordshire", x: "2011", y: 134961 },
+		{ z: "South Oxfordshire", x: "2012", y: 135722 },
+		{ z: "South Oxfordshire", x: "2013", y: 136328 },
+		{ z: "South Oxfordshire", x: "2014", y: 137477 },
+		{ z: "South Oxfordshire", x: "2015", y: 138177 },
+		{ z: "South Oxfordshire", x: "2016", y: 139156 },
+		{ z: "South Oxfordshire", x: "2017", y: 139767 },
+		{ z: "South Oxfordshire", x: "2018", y: 140504 },
+		{ z: "South Oxfordshire", x: "2019", y: 142057 },
+		{ z: "South Oxfordshire", x: "2020", y: 143782 },
+		{ z: "Winchester", x: "2002", y: 107844 },
+		{ z: "Winchester", x: "2003", y: 108515 },
+		{ z: "Winchester", x: "2004", y: 109179 },
+		{ z: "Winchester", x: "2005", y: 109947 },
+		{ z: "Winchester", x: "2006", y: 110628 },
+		{ z: "Winchester", x: "2007", y: 111820 },
+		{ z: "Winchester", x: "2008", y: 113267 },
+		{ z: "Winchester", x: "2009", y: 114505 },
+		{ z: "Winchester", x: "2010", y: 115789 },
+		{ z: "Winchester", x: "2011", y: 116820 },
+		{ z: "Winchester", x: "2012", y: 118074 },
+		{ z: "Winchester", x: "2013", y: 119037 },
+		{ z: "Winchester", x: "2014", y: 120290 },
+		{ z: "Winchester", x: "2015", y: 121734 },
+		{ z: "Winchester", x: "2016", y: 123100 },
+		{ z: "Winchester", x: "2017", y: 123879 },
+		{ z: "Winchester", x: "2018", y: 124295 },
+		{ z: "Winchester", x: "2019", y: 124859 },
+		{ z: "Winchester", x: "2020", y: 125925 }
+	];
+
+	const { Story } = defineMeta({
+		title: "Data visualisation/Chart",
+		component: Chart,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story
+	name="Bar"
+	args={{
+		type: "bar",
+		data: barData,
+		options: {
+			id: "chart-density",
+			title: "Densest local authorities in the South East, 2020",
+			footer: "Source: Office for National Statistics",
+			"padding-left": "120"
+		}
+	}}
+/>
+
+<Story
+	name="Bar, robo-journalism case"
+	args={{
+		section: {
+			id: "chart-density",
+			chartType: "bar",
+			data: barData,
+			title: "Densest local authorities in the South East, 2020",
+			footer: "Source: Office for National Statistics",
+			"padding-left": "120"
+		}
+	}}
+	parameters={withStoryDocs(exampleDocs)}
+/>
+
+<Story
+	name="Line with highlight"
+	args={{
+		section: {
+			id: "chart-timeseries",
+			chartType: "line-highlight",
+			title: "Largest local authorities in the South East, 2002-2020",
+			footer: "Source: Office for National Statistics",
+			data: lineData,
+			selected: "Winchester",
+			"padding-top": "20",
+			"padding-right": "120",
+			"padding-left": "80"
+		}
+	}}
+/>

package/dist/datavis/Chart/Chart.stories.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  ChartProps */
+/** @typedef {typeof __propDef.events}  ChartEvents */
+/** @typedef {typeof __propDef.slots}  ChartSlots */
+export default class Chart extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ChartProps = typeof __propDef.props;
+export type ChartEvents = typeof __propDef.events;
+export type ChartSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,31 @@
+A wrapper component that offers a simplified way to use charts with sensible preset defaults.
+
+The config for this component can either be defined via `type`, `data` and `options` props, or via a single comboned `section` object. The latter use case is optimised for robo-journalism projects (see second example below).
+
+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 { Chart } from "@onsvisual/svelte-charts";
+
+  const data = [
+    {"x": 5315, "y": "Portsmouth"},
+    {"x": 5070, "y": "Southampton"},
+    {"x": 4596, "y": "Slough"},
+    {"x": 3969, "y": "Reading"},
+    {"x": 3522, "y": "Brighton and Hove"}
+  ];
+  const options = {
+    "id": "chart-density",
+    "title": "Densest local authorities in the South East, 2020",
+    "footer": "Source: Office for National Statistics",
+    "padding-left": "120"
+  };
+</script>
+
+<Chart
+  type="bar"
+  data="{data}"
+  options="{options}"/>
+```

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

@@ -0,0 +1,28 @@
+In this use case, all of the data and config are passed into the component via a single `section` prop.
+
+This is optimised for robo-journalism projects, where a chart is defined within a section block in a PUG template. The component is used in this way within the [robo-embed](https://github.com/ONSvisual/robo-embed/) and [robo-article](https://github.com/ONSvisual/robo-article/) templates.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Chart } from "@onsvisual/svelte-charts";
+
+  //the section is normally generated by the pug file
+  const section = {
+    "id": "chart-density",
+    "chartType": "bar",
+    "title": "Densest local authorities in the South East, 2020",
+    "footer": "Source: Office for National Statistics",
+    "data": [
+      {"x": 5315, "y": "Portsmouth"},
+      {"x": 5070, "y": "Southampton"},
+      {"x": 4596, "y": "Slough"},
+      {"x": 3969, "y": "Reading"},
+      {"x": 3522, "y": "Brighton and Hove"}
+    ],
+    "padding-left": "120"
+  };
+</script>
+
+<Chart {section}/>
+```

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

@@ -0,0 +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"
+	}}
+/>

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  ColumnChartProps */
+/** @typedef {typeof __propDef.events}  ColumnChartEvents */
+/** @typedef {typeof __propDef.slots}  ColumnChartSlots */
+export default class ColumnChart extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ColumnChartProps = typeof __propDef.props;
+export type ColumnChartEvents = typeof __propDef.events;
+export type ColumnChartSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +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." />
+```

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

@@ -0,0 +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"
+	}}
+/>

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  DotPlotChartProps */
+/** @typedef {typeof __propDef.events}  DotPlotChartEvents */
+/** @typedef {typeof __propDef.slots}  DotPlotChartSlots */
+export default class DotPlotChart extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DotPlotChartProps = typeof __propDef.props;
+export type DotPlotChartEvents = typeof __propDef.events;
+export type DotPlotChartSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +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." />
+```

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

@@ -0,0 +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
+	}}
+/>

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  LineChartProps */
+/** @typedef {typeof __propDef.events}  LineChartEvents */
+/** @typedef {typeof __propDef.slots}  LineChartSlots */
+export default class LineChart extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type LineChartProps = typeof __propDef.props;
+export type LineChartEvents = typeof __propDef.events;
+export type LineChartSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +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} />
+```