Merge pull request #2816 from evidence-dev/fix/2800-seriesFMT

seriesFmt for series labels in charts
evidence-dev · Nov 21, 2024 · f46d060 · f46d060
2 parents 35ea1fa + d07bf0c
commit f46d060
Show file tree

Hide file tree

Showing 23 changed files with 245 additions and 8 deletions.
diff --git a/.changeset/cuddly-peas-do.md b/.changeset/cuddly-peas-do.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+series names can be formatted in Area, Bar, Bubble, Line charts and Scatter plot
diff --git a/packages/lib/component-utilities/src/getSeriesConfig.js b/packages/lib/component-utilities/src/getSeriesConfig.js
@@ -1,4 +1,5 @@
 import getDistinctValues from './getDistinctValues.js';
+import { fmt } from '@evidence-dev/component-utilities/formatting';
 
 export default function getSeriesConfig(
 	data,
@@ -13,7 +14,8 @@ export default function getSeriesConfig(
 	seriesOrder,
 	size = undefined,
 	tooltipTitle = undefined,
-	y2 = undefined
+	y2 = undefined,
+	seriesLabelFmt = undefined
 ) {
 	function generateTempConfig(seriesData, seriesName, yAxisIndex, baseConfig) {
 		let tempConfig = {
@@ -223,5 +225,12 @@ export default function getSeriesConfig(
 		seriesConfig.sort((a, b) => seriesOrder.indexOf(a.name) - seriesOrder.indexOf(b.name));
 	}
 
+	// format series config:
+	if (seriesLabelFmt) {
+		seriesConfig.forEach((item) => {
+			item.name = fmt(item.name, seriesLabelFmt);
+		});
+	}
+
 	return seriesConfig;
 }
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/area/Area.svelte b/packages/ui/core-components/src/lib/unsorted/viz/area/Area.svelte
@@ -65,6 +65,8 @@
 	}
 	export let showAllLabels = false;
 	export let seriesOrder = undefined;
+	export let seriesLabelFmt = undefined;
+
 	// Prop check. If local props supplied, use those. Otherwise fall back to global props.
 	$: data = $props.data;
 	$: x = $props.x;
@@ -156,7 +158,11 @@
 		name,
 		xMismatch,
 		columnSummary,
-		seriesOrder
+		seriesOrder,
+		undefined, // size (not needed)
+		undefined, // tooltipTitle (not needed)
+		undefined, // y2 (not needed)
+		seriesLabelFmt
 	);
 
 	$: config.update((d) => {

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/area/AreaChart.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/area/AreaChart.stories.svelte
@@ -276,3 +276,24 @@ LIMIT 200`,
 	{@const data = Query.create(`select * from numeric_series`, query)}
 	<AreaChart {data} {...args} />
 </Story>
+<Story
+	name="With seriesLabelFmt"
+	args={{ x: 'x', y: 'y', series: 'series', seriesOrder: ['ivory', 'blue', 'violet', 'olive'] }}
+	let:args
+>
+	{@const data = Query.create(
+		`SELECT 0.1 AS series, 1 AS x, 10 AS y
+UNION
+SELECT 0.1 AS series, 2 AS x, 20 AS y
+UNION
+SELECT 0.1 AS series, 3 AS x, 30 AS y
+UNION
+SELECT 0.5 AS series, 1 AS x, 5 AS y
+UNION
+SELECT 0.5 AS series, 2 AS x, 15 AS y
+UNION
+SELECT 0.5 AS series, 3 AS x, 25 AS y`,
+		query
+	)}
+	<AreaChart {data} seriesLabelFmt="pct" {...args} />
+</Story>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/area/AreaChart.svelte b/packages/ui/core-components/src/lib/unsorted/viz/area/AreaChart.svelte
@@ -79,6 +79,7 @@
 	export let seriesOrder = undefined;
 
 	export let connectGroup = undefined;
+	export let seriesLabelFmt = undefined;
 </script>
 
 <Chart
@@ -143,6 +144,7 @@
 		{labelFmt}
 		{showAllLabels}
 		{seriesOrder}
+		{seriesLabelFmt}
 	/>
 	<slot />
 </Chart>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/bar/Bar.svelte b/packages/ui/core-components/src/lib/unsorted/viz/bar/Bar.svelte
@@ -197,6 +197,8 @@
 		}
 	};
 
+	export let seriesLabelFmt = undefined;
+
 	$: seriesConfig = getSeriesConfig(
 		data,
 		x,
@@ -210,7 +212,8 @@
 		seriesOrder,
 		undefined,
 		undefined,
-		y2
+		y2,
+		seriesLabelFmt
 	);
 
 	$: config.update((d) => {

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/bar/BarChart.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/bar/BarChart.stories.svelte
@@ -85,3 +85,24 @@
 	{@const data = Query.create(`select * from numeric_series`, query)}
 	<BarChart {data} {...args} />
 </Story>
+<Story
+	name="With seriesLabelFmt"
+	args={{ x: 'x', y: 'y', series: 'series', seriesOrder: [0.1, 0.5] }}
+	let:args
+>
+	{@const data = Query.create(
+		`SELECT 0.1 AS series, 1 AS x, 10 AS y
+UNION
+SELECT 0.1 AS series, 2 AS x, 20 AS y
+UNION
+SELECT 0.1 AS series, 3 AS x, 30 AS y
+UNION
+SELECT 0.5 AS series, 1 AS x, 5 AS y
+UNION
+SELECT 0.5 AS series, 2 AS x, 15 AS y
+UNION
+SELECT 0.5 AS series, 3 AS x, 25 AS y`,
+		query
+	)}
+	<BarChart {data} seriesLabelFmt="pct" {...args} />
+</Story>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/bar/BarChart.svelte b/packages/ui/core-components/src/lib/unsorted/viz/bar/BarChart.svelte
@@ -115,6 +115,8 @@
 	export let seriesColors = undefined;
 	export let seriesOrder = undefined;
 	export let connectGroup = undefined;
+
+	export let seriesLabelFmt = undefined;
 </script>
 
 <Chart
@@ -192,6 +194,7 @@
 		{showAllLabels}
 		{y2SeriesType}
 		{seriesOrder}
+		{seriesLabelFmt}
 	/>
 	<slot />
 </Chart>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/bubble/Bubble.svelte b/packages/ui/core-components/src/lib/unsorted/viz/bubble/Bubble.svelte
@@ -35,6 +35,7 @@
 	export let useTooltip = false;
 	export let tooltipTitle;
 	export let seriesOrder = undefined;
+	export let seriesLabelFmt = undefined;
 
 	let multiSeries;
 	let tooltipOutput;
@@ -249,7 +250,9 @@
 		columnSummary,
 		seriesOrder,
 		size,
-		tooltipTitle
+		tooltipTitle,
+		undefined, // y2 (not needed)
+		seriesLabelFmt
 	);
 	$: config.update((d) => {
 		d.series.push(...seriesConfig);

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/bubble/BubbleChart.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/bubble/BubbleChart.stories.svelte
@@ -191,3 +191,30 @@
 >
 	<BubbleChart {data} {...args} />
 </Story>
+
+<Story
+	name="With seriesLabelFmt"
+	args={{
+		series: 'series',
+		x: 'x',
+		y: 'y',
+		size: 'size'
+	}}
+	let:args
+>
+	{@const data = Query.create(
+		`SELECT 0.1 AS series, 1 AS x, 10 AS y, 100 AS size
+UNION
+SELECT 0.1 AS series, 2 AS x, 20 AS y, 200 AS size
+UNION
+SELECT 0.1 AS series, 3 AS x, 30 AS y, 300 AS size
+UNION
+SELECT 0.5 AS series, 1 AS x, 5 AS y, 50 AS size
+UNION
+SELECT 0.5 AS series, 2 AS x, 15 AS y, 150 AS size
+UNION
+SELECT 0.5 AS series, 3 AS x, 25 AS y, 250 AS size`,
+		query
+	)}
+	<BubbleChart seriesLabelFmt="pct" {data} {...args} />
+</Story>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/bubble/BubbleChart.svelte b/packages/ui/core-components/src/lib/unsorted/viz/bubble/BubbleChart.svelte
@@ -67,6 +67,7 @@
 	export let seriesOrder = undefined;
 
 	export let connectGroup = undefined;
+	export let seriesLabelFmt = undefined;
 </script>
 
 <Chart
@@ -122,6 +123,7 @@
 		{scaleTo}
 		{useTooltip}
 		{seriesOrder}
+		{seriesLabelFmt}
 	/>
 	<slot />
 </Chart>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/Chart.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/Chart.stories.svelte
@@ -0,0 +1,37 @@
+<script context="module">
+	/** @type {import("@storybook/svelte").Meta}*/
+	export const meta = {
+		title: 'Charts/Chart',
+		component: Chart
+	};
+</script>
+
+<script>
+	import { Story } from '@storybook/addon-svelte-csf';
+	import { Query } from '@evidence-dev/sdk/usql';
+	import { query } from '@evidence-dev/universal-sql/client-duckdb';
+	import Chart from './Chart.svelte';
+	import Bar from '../bar/Bar.svelte';
+	import Line from '../line/Line.svelte';
+</script>
+
+<Story name="Base">
+	{@const data = Query.create(
+		`SELECT 1 AS x, 5 AS growth, 50 AS size, 0.1 AS seriesA, 0.7 AS seriesB
+UNION
+SELECT 2 AS x, 10 AS growth, 60 AS size, 0.1 AS seriesA, 0.7 AS seriesB
+UNION
+SELECT 3 AS x, 20 AS growth, 70 AS size, 0.1 AS seriesA, 0.7 AS seriesB
+UNION
+SELECT 4 AS x, 30 AS growth, 90 AS size, 0.1 AS seriesA, 0.7 AS seriesB
+UNION
+SELECT 5 AS x, 40 AS growth, 110 AS size, 0.1 AS seriesA, 0.7 AS seriesB
+UNION
+SELECT 6 AS x, 50 AS growth, 130 AS size, 0.1 AS seriesA, 0.7 AS seriesB`,
+		query
+	)}
+	<Chart {data} title="Growth vs Sales">
+		<Bar y="growth" series="seriesA" seriesLabelFmt="pct" />
+		<Line y="size" series="seriesB" seriesLabelFmt="pct" />
+	</Chart>
+</Story>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/_Chart.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/_Chart.svelte
@@ -952,9 +952,9 @@
 									yVal = params[i].value[swapXY ? 0 : 1];
 									output =
 										output +
-										`<br> ${params[i].marker} ${
+										`<br> <span style='font-size: 11px;'>${params[i].marker} ${
 											params[i].seriesName
-										} <span style='float:right; margin-left: 10px;'>${formatValue(
+										}<span/><span style='float:right; margin-left: 10px; font-size: 12px;'>${formatValue(
 											yVal,
 											// Not sure if this will work. Need to check with multi series on both axes
 											// Check if echarts does the order in the same way - y first, then y2

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/line/Line.svelte b/packages/ui/core-components/src/lib/unsorted/viz/line/Line.svelte
@@ -76,6 +76,8 @@
 	 */
 	export let stepPosition = 'end';
 	export let seriesOrder = undefined;
+	/** @type {string | undefined} */
+	export let seriesLabelFmt = undefined;
 
 	// Prop check. If local props supplied, use those. Otherwise fall back to global props.
 	$: data = $props.data;
@@ -193,7 +195,8 @@
 		seriesOrder,
 		undefined,
 		undefined,
-		y2
+		y2,
+		seriesLabelFmt
 	);
 
 	$: config.update((d) => {

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/line/LineChart.svelte b/packages/ui/core-components/src/lib/unsorted/viz/line/LineChart.svelte
@@ -97,6 +97,8 @@
 	export let seriesOrder = undefined;
 
 	export let connectGroup = undefined;
+	/** @type {string | undefined} */
+	export let seriesLabelFmt = undefined;
 </script>
 
 <Chart
@@ -173,6 +175,7 @@
 		{showAllLabels}
 		{y2SeriesType}
 		{seriesOrder}
+		{seriesLabelFmt}
 	/>
 	<slot />
 </Chart>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/scatter/Scatter.svelte b/packages/ui/core-components/src/lib/unsorted/viz/scatter/Scatter.svelte
@@ -30,6 +30,8 @@
 	export let useTooltip = false; // if true, will override the default 'axis'-based echarts tooltip. true only for scatter-only charts
 	export let tooltipTitle;
 	export let seriesOrder = undefined;
+	/** @type {string | undefined} */
+	export let seriesLabelFmt = undefined;
 	let multiSeries;
 	let tooltipOutput;
 
@@ -197,7 +199,9 @@
 		columnSummary,
 		seriesOrder,
 		undefined,
-		tooltipTitle
+		tooltipTitle,
+		undefined,
+		seriesLabelFmt
 	);
 	$: config.update((d) => {
 		d.series.push(...seriesConfig);

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/scatter/ScatterPlot.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/scatter/ScatterPlot.stories.svelte
@@ -185,3 +185,53 @@
 >
 	<ScatterPlot {data} {...args} />
 </Story>
+<Story name="With seriesLabelFmt" let:args>
+	{@const data = Query.create(
+		`SELECT 0.1 AS series, 5000 AS advertising_spend, 25000 AS sales
+UNION
+SELECT 0.1 AS series, 3000 AS advertising_spend, 18000 AS sales
+UNION
+SELECT 0.1 AS series, 4000 AS advertising_spend, 22000 AS sales
+UNION
+SELECT 0.25 AS series, 9000 AS advertising_spend, 45000 AS sales
+UNION
+SELECT 0.3 AS series, 10000 AS advertising_spend, 50000 AS sales
+UNION
+SELECT 0.25 AS series, 7000 AS advertising_spend, 32000 AS sales
+UNION
+SELECT 0.1 AS series, 3500 AS advertising_spend, 21000 AS sales
+UNION
+SELECT 0.1 AS series, 4500 AS advertising_spend, 22000 AS sales
+UNION
+SELECT 0.3 AS series, 12000 AS advertising_spend, 60000 AS sales
+UNION
+SELECT 0.25 AS series, 9500 AS advertising_spend, 46000 AS sales
+UNION
+SELECT 0.1 AS series, 3200 AS advertising_spend, 15000 AS sales
+UNION
+SELECT 0.3 AS series, 11000 AS advertising_spend, 54000 AS sales
+UNION
+SELECT 0.25 AS series, 8000 AS advertising_spend, 41000 AS sales
+UNION
+SELECT 0.1 AS series, 4000 AS advertising_spend, 19000 AS sales
+UNION
+SELECT 0.3 AS series, 11500 AS advertising_spend, 55000 AS sales
+UNION
+SELECT 0.25 AS series, 8200 AS advertising_spend, 42000 AS sales
+UNION
+SELECT 0.1 AS series, 3800 AS advertising_spend, 19000 AS sales
+UNION
+SELECT 0.3 AS series, 13000 AS advertising_spend, 65000 AS sales;
+
+`,
+		query
+	)}
+	<ScatterPlot
+		{data}
+		x="advertising_spend"
+		y="sales"
+		series="series"
+		seriesLabelFmt="pct"
+		{...args}
+	/>
+</Story>