From 0920219b657abeb6cd12cd183454c89db0805ffa Mon Sep 17 00:00:00 2001 From: Archie Wood <58074498+archiewood@users.noreply.github.com> Date: Tue, 5 Nov 2024 10:13:50 -0500 Subject: [PATCH 1/2] POC --- .../lib/unsorted/viz/table/TableRow.svelte | 13 +++++------ .../docs/pages/components/data-table/index.md | 22 ++++++++++++++++++- 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/TableRow.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/TableRow.svelte index bef7d657cb..271e8c8d0c 100644 --- a/packages/ui/core-components/src/lib/unsorted/viz/table/TableRow.svelte +++ b/packages/ui/core-components/src/lib/unsorted/viz/table/TableRow.svelte @@ -212,7 +212,8 @@ style="width: {Math.min( Math.abs((row[column.id] / total_width) * 100), 100 - )}%; background-color: {column.negativeBarColor}; height: 100%; position: absolute; right: {(1 - + )}%; background-color: {column.negativeBarColor}; height: 100%; position: absolute; + {column.align === 'right' ? 'left' : 'right'}: {(1 - Math.abs(column_min) / (Math.abs(column_min) + column_max)) * 100}%;" > @@ -225,11 +226,11 @@ style="width: {Math.min( (row[column.id] / total_width) * 100, 100 - )}%; background-color: {column.barColor}; height: 100%; position: absolute; left: {column_min < - 0 + )}%; background-color: {column.barColor}; height: 100%; position: absolute; + {column.align === 'right' ? 'right' : 'left'}: {column_min < 0 ? (Math.abs(column_min) / (Math.abs(column_min) + column_max)) * 100 + '%' : '0'};" - > + > {/if} @@ -244,15 +245,13 @@ width: {(Math.abs(column_max) / ((column_min < 0 ? Math.abs(column_min) : 0) + Math.abs(column_max))) * 100}%; - left: {column_min < 0 && column_max >= 0 + {column.align === 'right' ? 'right' : 'left'}: {column_min < 0 && column_max >= 0 ? (Math.abs(column_min) / (Math.abs(column_min) + column_max)) * 100 + '%' : '0'};" > {formatValue(row[column.id], column_format, useCol.columnUnitSummary)} - - {:else if column.contentType === 'sparkline' && row[column.id] !== undefined} {@const alignment = column.align ?? 'center'}
diff --git a/sites/docs/pages/components/data-table/index.md b/sites/docs/pages/components/data-table/index.md index f8c2f14faf..1142bb1062 100644 --- a/sites/docs/pages/components/data-table/index.md +++ b/sites/docs/pages/components/data-table/index.md @@ -117,7 +117,7 @@ This example includes a `custom_format` column, which contains a different curre ### Deltas ```sql country_summary -select date '2020-04-30' as date, 87 as value_usd, 0.0234 as yoy, 'Austria' as country, 'B' as category, 100384 as country_id, 'AT' as country_code, 'https://flaglog.com/codes/standardized-rectangle-120px/AT.png' as flag, 'https://www.google.ca/search?q=austria' as country_url +select date '2020-04-30' as date, -10 as value_usd, 0.0234 as yoy, 'Austria' as country, 'B' as category, 100384 as country_id, 'AT' as country_code, 'https://flaglog.com/codes/standardized-rectangle-120px/AT.png' as flag, 'https://www.google.ca/search?q=austria' as country_url union all select date '2020-05-01' as date, 95 as value_usd, 0.0534 as yoy, 'Australia' as country, 'C' as category, 104942 as country_id, 'AU' as country_code, 'https://flaglog.com/codes/standardized-rectangle-120px/AU.png' as flag, 'https://www.google.ca/search?q=australia' as country_url union all @@ -275,6 +275,26 @@ order by total_sales desc +### Bar Chart Column - Right Aligned + +```svelte + + + + + + + +``` + + + + + + + + + ### Total Row From 2be59ff5b91253ea2899a5a4c2933f291bef4f48 Mon Sep 17 00:00:00 2001 From: Archie Sarre Wood <58074498+archiewood@users.noreply.github.com> Date: Wed, 6 Nov 2024 13:14:03 -0500 Subject: [PATCH 2/2] Update sites/docs/pages/components/data-table/index.md --- sites/docs/pages/components/data-table/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sites/docs/pages/components/data-table/index.md b/sites/docs/pages/components/data-table/index.md index 1142bb1062..ba90723a44 100644 --- a/sites/docs/pages/components/data-table/index.md +++ b/sites/docs/pages/components/data-table/index.md @@ -119,7 +119,7 @@ This example includes a `custom_format` column, which contains a different curre ```sql country_summary select date '2020-04-30' as date, -10 as value_usd, 0.0234 as yoy, 'Austria' as country, 'B' as category, 100384 as country_id, 'AT' as country_code, 'https://flaglog.com/codes/standardized-rectangle-120px/AT.png' as flag, 'https://www.google.ca/search?q=austria' as country_url union all -select date '2020-05-01' as date, 95 as value_usd, 0.0534 as yoy, 'Australia' as country, 'C' as category, 104942 as country_id, 'AU' as country_code, 'https://flaglog.com/codes/standardized-rectangle-120px/AU.png' as flag, 'https://www.google.ca/search?q=australia' as country_url +select date '2020-05-01' as date, -95 as value_usd, 0.0534 as yoy, 'Australia' as country, 'C' as category, 104942 as country_id, 'AU' as country_code, 'https://flaglog.com/codes/standardized-rectangle-120px/AU.png' as flag, 'https://www.google.ca/search?q=australia' as country_url union all select date '2020-05-02' as date, 163 as value_usd, 0.0264 as yoy, 'Brazil' as country, 'A' as category, 100842 as country_id, 'BR' as country_code, 'https://flaglog.com/codes/standardized-rectangle-120px/BR.png' as flag, 'https://www.google.ca/search?q=brazil' as country_url union all