From be98ef50b4fab5cbff90e02803dbd2786bf777f6 Mon Sep 17 00:00:00 2001 From: kwongz Date: Tue, 19 Nov 2024 13:23:59 -0500 Subject: [PATCH 01/11] added seriesFmt for series titles in barCharts --- .../src/getSeriesConfig.js | 11 +++++++++- .../src/lib/unsorted/viz/bar/Bar.svelte | 5 ++++- .../unsorted/viz/bar/BarChart.stories.svelte | 21 +++++++++++++++++++ .../src/lib/unsorted/viz/bar/BarChart.svelte | 3 +++ .../src/lib/unsorted/viz/core/_Chart.svelte | 4 ++-- 5 files changed, 40 insertions(+), 4 deletions(-) diff --git a/packages/lib/component-utilities/src/getSeriesConfig.js b/packages/lib/component-utilities/src/getSeriesConfig.js index c6fa025ef6..08910da11a 100644 --- 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, + seriesFmt = 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 (seriesFmt) { + seriesConfig.forEach((item) => { + item.name = fmt(item.name, seriesFmt); + }); + } + return seriesConfig; } 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 index b91903ba86..d4fd7f75bd 100644 --- 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 seriesFmt = undefined; + $: seriesConfig = getSeriesConfig( data, x, @@ -210,7 +212,8 @@ seriesOrder, undefined, undefined, - y2 + y2, + seriesFmt ); $: 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 index 7f34d1387a..cd876f5dae 100644 --- 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)} + + {@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 + )} + + 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 index efbaff6faa..f0fd323377 100644 --- 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 seriesFmt = undefined; 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 index c89f53bb62..f190c62694 100644 --- 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 + - `
${params[i].marker} ${ + `
${params[i].marker} ${ params[i].seriesName - } ${formatValue( + }${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 From 7f23cde8a4c16344506f6382bdb5f1f59dc4b9ee Mon Sep 17 00:00:00 2001 From: kwongz Date: Tue, 19 Nov 2024 14:28:10 -0500 Subject: [PATCH 02/11] added seriesFmt: Area Chart --- .../src/lib/unsorted/viz/area/Area.svelte | 22 ++++++++++++++++++- .../viz/area/AreaChart.stories.svelte | 21 ++++++++++++++++++ .../lib/unsorted/viz/area/AreaChart.svelte | 2 ++ 3 files changed, 44 insertions(+), 1 deletion(-) 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 index e6dc2027b6..fa2de3ee93 100644 --- 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 seriesFmt = undefined; + // Prop check. If local props supplied, use those. Otherwise fall back to global props. $: data = $props.data; $: x = $props.x; @@ -145,6 +147,20 @@ symbolSize: labels && !markers ? 0 : markerSize, step: step ? stepPosition : false }; + // data, + // x, + // y, + // series, + // swapXY, + // baseConfig, + // name, + // xMismatch, // this checks for scenarios where xType is string and xDataType is number. When this is the case, we need to inject strings into the x axis, or else it will cause echarts to think there are duplicate x-axis values (e.g., "4" and 4) + // columnSummary, + // seriesOrder, + // size = undefined, + // tooltipTitle = undefined, + // y2 = undefined, + // seriesFmt = undefined $: seriesConfig = getSeriesConfig( data, @@ -156,7 +172,11 @@ name, xMismatch, columnSummary, - seriesOrder + seriesOrder, + undefined, // size (not needed) + undefined, // tooltipTitle (not needed) + undefined, // y2 (not needed) + seriesFmt ); $: 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 index 5e411df9f2..f634709b95 100644 --- 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)} + + {@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 + )} + + 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 index cd1ee9b84e..317c91732e 100644 --- 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 seriesFmt = undefined; From b67e421cbb4fa01600c6e9cce9d059f3fc833fb5 Mon Sep 17 00:00:00 2001 From: kwongz Date: Tue, 19 Nov 2024 14:45:49 -0500 Subject: [PATCH 03/11] added seriesFmt: bubble chart --- .../src/lib/unsorted/viz/bubble/Bubble.svelte | 5 +++- .../viz/bubble/BubbleChart.stories.svelte | 27 +++++++++++++++++++ .../unsorted/viz/bubble/BubbleChart.svelte | 2 ++ 3 files changed, 33 insertions(+), 1 deletion(-) 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 index 5f0f93d463..b4dd439ada 100644 --- 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 seriesFmt = undefined; let multiSeries; let tooltipOutput; @@ -249,7 +250,9 @@ columnSummary, seriesOrder, size, - tooltipTitle + tooltipTitle, + undefined, // y2 (not needed) + seriesFmt ); $: 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 index 36a9b9c5db..27d4271f65 100644 --- 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 @@ > + + +{@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 +)} + + 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 index 66333bd7fa..82da965384 100644 --- 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 seriesFmt = undefined; From 3b048e78b802fe5f7cb5e19d9bad742fea3b2c38 Mon Sep 17 00:00:00 2001 From: kwongz Date: Wed, 20 Nov 2024 10:40:47 -0500 Subject: [PATCH 04/11] created mixed chart stories --- .../unsorted/viz/core/Chart.stories.svelte | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 packages/ui/core-components/src/lib/unsorted/viz/core/Chart.stories.svelte 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 new file mode 100644 index 0000000000..5a814c1b64 --- /dev/null +++ b/packages/ui/core-components/src/lib/unsorted/viz/core/Chart.stories.svelte @@ -0,0 +1,45 @@ + + + + + + {@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 + )} + + + + + + + From 9fb6cfaaeb137d45a952e567be7b2f018d8168ee Mon Sep 17 00:00:00 2001 From: kwongz Date: Wed, 20 Nov 2024 13:54:32 -0500 Subject: [PATCH 05/11] added serieFmt: line chart --- .../ui/core-components/src/lib/unsorted/viz/line/Line.svelte | 5 ++++- .../src/lib/unsorted/viz/line/LineChart.svelte | 3 +++ 2 files changed, 7 insertions(+), 1 deletion(-) 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 index bc0ec788ab..2edd084e59 100644 --- 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 seriesFmt = 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, + seriesFmt ); $: 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 index fbca9b66a7..8e874f184b 100644 --- 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 seriesFmt = undefined; From 0d096de051eaa16362f0801063dcd632aac6e090 Mon Sep 17 00:00:00 2001 From: kwongz Date: Wed, 20 Nov 2024 14:27:03 -0500 Subject: [PATCH 06/11] sereisFmt added: scatter plot --- .../lib/unsorted/viz/scatter/Scatter.svelte | 6 ++- .../viz/scatter/ScatterPlot.stories.svelte | 46 +++++++++++++++++++ .../unsorted/viz/scatter/ScatterPlot.svelte | 3 ++ 3 files changed, 54 insertions(+), 1 deletion(-) 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 index 57fd894a6c..813dfb506d 100644 --- 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 seriesFmt = undefined; let multiSeries; let tooltipOutput; @@ -197,7 +199,9 @@ columnSummary, seriesOrder, undefined, - tooltipTitle + tooltipTitle, + undefined, + seriesFmt ); $: 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 index 54cc498c8b..6cc60de321 100644 --- 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,49 @@ > + +{@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 +)} + + diff --git a/packages/ui/core-components/src/lib/unsorted/viz/scatter/ScatterPlot.svelte b/packages/ui/core-components/src/lib/unsorted/viz/scatter/ScatterPlot.svelte index b5c1a57889..6f147f2c84 100644 --- a/packages/ui/core-components/src/lib/unsorted/viz/scatter/ScatterPlot.svelte +++ b/packages/ui/core-components/src/lib/unsorted/viz/scatter/ScatterPlot.svelte @@ -66,6 +66,8 @@ export let seriesOrder = undefined; export let connectGroup = undefined; + /** @type {string | undefined} */ + export let seriesFmt = undefined; From f131ae37e1b01ff6ebd50516707dd2ab9554b04b Mon Sep 17 00:00:00 2001 From: kwongz Date: Wed, 20 Nov 2024 14:34:38 -0500 Subject: [PATCH 07/11] updated seriesFmt to seriesLabelFmt --- packages/lib/component-utilities/src/getSeriesConfig.js | 6 +++--- .../core-components/src/lib/unsorted/viz/area/Area.svelte | 6 +++--- .../src/lib/unsorted/viz/area/AreaChart.stories.svelte | 4 ++-- .../src/lib/unsorted/viz/area/AreaChart.svelte | 4 ++-- .../ui/core-components/src/lib/unsorted/viz/bar/Bar.svelte | 4 ++-- .../src/lib/unsorted/viz/bar/BarChart.stories.svelte | 4 ++-- .../src/lib/unsorted/viz/bar/BarChart.svelte | 4 ++-- .../src/lib/unsorted/viz/bubble/Bubble.svelte | 4 ++-- .../src/lib/unsorted/viz/bubble/BubbleChart.stories.svelte | 4 ++-- .../src/lib/unsorted/viz/bubble/BubbleChart.svelte | 4 ++-- .../src/lib/unsorted/viz/core/Chart.stories.svelte | 4 ++-- .../core-components/src/lib/unsorted/viz/line/Line.svelte | 4 ++-- .../src/lib/unsorted/viz/line/LineChart.svelte | 4 ++-- .../src/lib/unsorted/viz/scatter/Scatter.svelte | 4 ++-- .../src/lib/unsorted/viz/scatter/ScatterPlot.stories.svelte | 4 ++-- .../src/lib/unsorted/viz/scatter/ScatterPlot.svelte | 4 ++-- 16 files changed, 34 insertions(+), 34 deletions(-) diff --git a/packages/lib/component-utilities/src/getSeriesConfig.js b/packages/lib/component-utilities/src/getSeriesConfig.js index 08910da11a..2a1e106abf 100644 --- a/packages/lib/component-utilities/src/getSeriesConfig.js +++ b/packages/lib/component-utilities/src/getSeriesConfig.js @@ -15,7 +15,7 @@ export default function getSeriesConfig( size = undefined, tooltipTitle = undefined, y2 = undefined, - seriesFmt = undefined + seriesLabelFmt = undefined ) { function generateTempConfig(seriesData, seriesName, yAxisIndex, baseConfig) { let tempConfig = { @@ -226,9 +226,9 @@ export default function getSeriesConfig( } // format series config: - if (seriesFmt) { + if (seriesLabelFmt) { seriesConfig.forEach((item) => { - item.name = fmt(item.name, seriesFmt); + item.name = fmt(item.name, seriesLabelFmt); }); } 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 index fa2de3ee93..5a3f245e68 100644 --- 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,7 +65,7 @@ } export let showAllLabels = false; export let seriesOrder = undefined; - export let seriesFmt = undefined; + export let seriesLabelFmt = undefined; // Prop check. If local props supplied, use those. Otherwise fall back to global props. $: data = $props.data; @@ -160,7 +160,7 @@ // size = undefined, // tooltipTitle = undefined, // y2 = undefined, - // seriesFmt = undefined + // seriesLabelFmt = undefined $: seriesConfig = getSeriesConfig( data, @@ -176,7 +176,7 @@ undefined, // size (not needed) undefined, // tooltipTitle (not needed) undefined, // y2 (not needed) - seriesFmt + 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 index f634709b95..a5b86c5818 100644 --- 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 @@ -277,7 +277,7 @@ LIMIT 200`, @@ -295,5 +295,5 @@ UNION SELECT 0.5 AS series, 3 AS x, 25 AS y`, query )} - + 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 index 317c91732e..33ececc0b3 100644 --- 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,7 +79,7 @@ export let seriesOrder = undefined; export let connectGroup = undefined; - export let seriesFmt = undefined; + export let seriesLabelFmt = undefined; 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 index d4fd7f75bd..d5d8243ae1 100644 --- 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,7 +197,7 @@ } }; - export let seriesFmt = undefined; + export let seriesLabelFmt = undefined; $: seriesConfig = getSeriesConfig( data, @@ -213,7 +213,7 @@ undefined, undefined, y2, - seriesFmt + 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 index cd876f5dae..937f4e989a 100644 --- 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 @@ -86,7 +86,7 @@ @@ -104,5 +104,5 @@ UNION SELECT 0.5 AS series, 3 AS x, 25 AS y`, query )} - + 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 index f0fd323377..a991ff8161 100644 --- a/packages/ui/core-components/src/lib/unsorted/viz/bar/BarChart.svelte +++ b/packages/ui/core-components/src/lib/unsorted/viz/bar/BarChart.svelte @@ -116,7 +116,7 @@ export let seriesOrder = undefined; export let connectGroup = undefined; - export let seriesFmt = undefined; + export let seriesLabelFmt = undefined; 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 index b4dd439ada..d26dff493a 100644 --- 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,7 +35,7 @@ export let useTooltip = false; export let tooltipTitle; export let seriesOrder = undefined; - export let seriesFmt = undefined; + export let seriesLabelFmt = undefined; let multiSeries; let tooltipOutput; @@ -252,7 +252,7 @@ size, tooltipTitle, undefined, // y2 (not needed) - seriesFmt + 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 index 27d4271f65..234f9ef6f0 100644 --- 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 @@ -193,7 +193,7 @@ + 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 index 82da965384..25c1afe489 100644 --- 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,7 +67,7 @@ export let seriesOrder = undefined; export let connectGroup = undefined; - export let seriesFmt = undefined; + export let seriesLabelFmt = undefined; 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 index 5a814c1b64..48ccf96079 100644 --- 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 @@ -37,8 +37,8 @@ SELECT 6 AS x, 50 AS growth, 130 AS size, 0.1 AS seriesA, 0.7 AS seriesB` query )} - - + + 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 index 2edd084e59..269958e99b 100644 --- a/packages/ui/core-components/src/lib/unsorted/viz/line/Line.svelte +++ b/packages/ui/core-components/src/lib/unsorted/viz/line/Line.svelte @@ -77,7 +77,7 @@ export let stepPosition = 'end'; export let seriesOrder = undefined; /** @type {string | undefined} */ - export let seriesFmt = undefined; + export let seriesLabelFmt = undefined; // Prop check. If local props supplied, use those. Otherwise fall back to global props. $: data = $props.data; @@ -196,7 +196,7 @@ undefined, undefined, y2, - seriesFmt + 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 index 8e874f184b..9d85f2f8c1 100644 --- a/packages/ui/core-components/src/lib/unsorted/viz/line/LineChart.svelte +++ b/packages/ui/core-components/src/lib/unsorted/viz/line/LineChart.svelte @@ -98,7 +98,7 @@ export let connectGroup = undefined; /** @type {string | undefined} */ - export let seriesFmt = undefined; + export let seriesLabelFmt = undefined; 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 index 813dfb506d..d7b71d0615 100644 --- a/packages/ui/core-components/src/lib/unsorted/viz/scatter/Scatter.svelte +++ b/packages/ui/core-components/src/lib/unsorted/viz/scatter/Scatter.svelte @@ -31,7 +31,7 @@ export let tooltipTitle; export let seriesOrder = undefined; /** @type {string | undefined} */ - export let seriesFmt = undefined; + export let seriesLabelFmt = undefined; let multiSeries; let tooltipOutput; @@ -201,7 +201,7 @@ undefined, tooltipTitle, undefined, - seriesFmt + 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 index 6cc60de321..4865fc6816 100644 --- 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 @@ -186,7 +186,7 @@ {@const data = Query.create( @@ -229,5 +229,5 @@ SELECT 0.3 AS series, 13000 AS advertising_spend, 65000 AS sales; `, query )} - + diff --git a/packages/ui/core-components/src/lib/unsorted/viz/scatter/ScatterPlot.svelte b/packages/ui/core-components/src/lib/unsorted/viz/scatter/ScatterPlot.svelte index 6f147f2c84..59c460091b 100644 --- a/packages/ui/core-components/src/lib/unsorted/viz/scatter/ScatterPlot.svelte +++ b/packages/ui/core-components/src/lib/unsorted/viz/scatter/ScatterPlot.svelte @@ -67,7 +67,7 @@ export let connectGroup = undefined; /** @type {string | undefined} */ - export let seriesFmt = undefined; + export let seriesLabelFmt = undefined; From 1f65e9a7b0af47a26f0257b19a52701c531cbf18 Mon Sep 17 00:00:00 2001 From: kwongz Date: Wed, 20 Nov 2024 14:37:04 -0500 Subject: [PATCH 08/11] chore: format --- .../viz/bubble/BubbleChart.stories.svelte | 10 ++++----- .../unsorted/viz/core/Chart.stories.svelte | 13 +++++------ .../viz/scatter/ScatterPlot.stories.svelte | 22 +++++++++++-------- .../unsorted/viz/scatter/ScatterPlot.svelte | 2 +- 4 files changed, 24 insertions(+), 23 deletions(-) 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 index 234f9ef6f0..5645ee5b39 100644 --- 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 @@ -198,12 +198,12 @@ series: 'series', x: 'x', y: 'y', - size: 'size', + size: 'size' }} let:args > -{@const data = Query.create( - `SELECT 0.1 AS series, 1 AS x, 10 AS y, 100 AS size + {@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 @@ -214,7 +214,7 @@ 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 -)} + query + )} 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 index 48ccf96079..133a8b4985 100644 --- 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 @@ -2,7 +2,7 @@ /** @type {import("@storybook/svelte").Meta}*/ export const meta = { title: 'Charts/Chart', - component: Chart, + component: Chart }; const data = Query.create( @@ -22,7 +22,7 @@ {@const data = Query.create( -`SELECT 1 AS x, 5 AS growth, 50 AS size, 0.1 AS seriesA, 0.7 AS seriesB + `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 @@ -32,14 +32,11 @@ 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` -, +SELECT 6 AS x, 50 AS growth, 130 AS size, 0.1 AS seriesA, 0.7 AS seriesB`, query )} - - + + - - 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 index 4865fc6816..2cd438a838 100644 --- 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,12 +185,9 @@ > - -{@const data = Query.create( - `SELECT 0.1 AS series, 5000 AS advertising_spend, 25000 AS sales + + {@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 @@ -227,7 +224,14 @@ UNION SELECT 0.3 AS series, 13000 AS advertising_spend, 65000 AS sales; `, - query -)} - + query + )} + diff --git a/packages/ui/core-components/src/lib/unsorted/viz/scatter/ScatterPlot.svelte b/packages/ui/core-components/src/lib/unsorted/viz/scatter/ScatterPlot.svelte index 59c460091b..cf6b66ddc5 100644 --- a/packages/ui/core-components/src/lib/unsorted/viz/scatter/ScatterPlot.svelte +++ b/packages/ui/core-components/src/lib/unsorted/viz/scatter/ScatterPlot.svelte @@ -66,7 +66,7 @@ export let seriesOrder = undefined; export let connectGroup = undefined; - /** @type {string | undefined} */ + /** @type {string | undefined} */ export let seriesLabelFmt = undefined; From 4d1ecd92118b8d90f1cde4c017e893e5f2792f53 Mon Sep 17 00:00:00 2001 From: kwongz Date: Wed, 20 Nov 2024 14:43:47 -0500 Subject: [PATCH 09/11] chore: changeset --- .changeset/cuddly-peas-do.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cuddly-peas-do.md diff --git a/.changeset/cuddly-peas-do.md b/.changeset/cuddly-peas-do.md new file mode 100644 index 0000000000..443937485b --- /dev/null +++ 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 From 105f1641e62802c620e27a1ac1de3674e5492f1c Mon Sep 17 00:00:00 2001 From: kwongz Date: Wed, 20 Nov 2024 14:54:35 -0500 Subject: [PATCH 10/11] linted --- .../src/lib/unsorted/viz/core/Chart.stories.svelte | 5 ----- 1 file changed, 5 deletions(-) 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 index 133a8b4985..0eccddfa39 100644 --- 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 @@ -4,11 +4,6 @@ title: 'Charts/Chart', component: Chart }; - - const data = Query.create( - 'SELECT plane, fare, SUM(fare) as total_sales, SUM(fare) as total_fare FROM flights WHERE plane IN (SELECT DISTINCT plane FROM flights LIMIT 2) GROUP BY plane, fare LIMIT 25', - query - );