Merge pull request #1828 from evidence-dev/next

Patch Release
evidence-dev · Mar 30, 2024 · 5419a28 · 5419a28
2 parents 403c3d3 + b8efc67
commit 5419a28
Show file tree

Hide file tree

Showing 18 changed files with 248 additions and 108 deletions.
diff --git a/.changeset/new-cows-speak.md b/.changeset/new-cows-speak.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Adjust delta neutral symbol
diff --git a/.changeset/tough-camels-brush.md b/.changeset/tough-camels-brush.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Fix column order issue in DataTable when Column used
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/Delta.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/Delta.svelte
@@ -7,7 +7,7 @@
 	import Delta from './_Delta.svelte';
 	import EmptyChart from '../core/EmptyChart.svelte';
 
-	export let data;
+	export let data = undefined;
 
 	const initialHash = typeof data === 'object' && '__isQueryStore' in data ? data.hash : undefined;
 
@@ -34,7 +34,5 @@
 		{/if}
 	</span>
 	<p slot="skeleton" class="text-gray-500">Loading...</p>
-	<Delta {...spreadProps} data={loaded?.__isQueryStore ? Array.from(loaded) : loaded}>
-		<slot />
-	</Delta>
+	<Delta {...spreadProps} data={loaded?.__isQueryStore ? Array.from(loaded) : loaded} />
 </QueryLoad>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/_Delta.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/_Delta.svelte
@@ -103,7 +103,7 @@
 				} else {
 					selected_format = columnSummary[0].format;
 				}
-			} else if (value) {
+			} else if (value !== undefined) {
 				if (isNaN(value)) {
 					throw Error('value must be a number (value=' + value + ')');
 				} else {
@@ -145,9 +145,13 @@
 		<span style:text-align={align ?? 'right'}>
 			{#if symbolPosition === 'right'}
 				{#if showValue}
-					<span>
-						{formatValue(selected_value, selected_format, columnUnitSummary)}
-					</span>
+					{#if selected_value === null}
+						<span class="font-[system-ui]"> – </span>
+					{:else}
+						<span>
+							{formatValue(selected_value, selected_format, columnUnitSummary)}
+						</span>
+					{/if}
 				{/if}
 				{#if showSymbol}
 					<span class="font-[system-ui]"
@@ -165,13 +169,17 @@
 							? '&#9650;'
 							: valueStatus === 'negative'
 								? '&#9660;'
-								: '–'}</span
+								: '—'}</span
 					>
 				{/if}
 				{#if showValue}
-					<span>
-						{formatValue(selected_value, selected_format, columnUnitSummary)}
-					</span>
+					{#if selected_value === null}
+						<span class="font-[system-ui]"> – </span>
+					{:else}
+						<span>
+							{formatValue(selected_value, selected_format, columnUnitSummary)}
+						</span>
+					{/if}
 				{/if}
 			{/if}
 			{#if text}

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/GroupRow.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/GroupRow.svelte
@@ -19,6 +19,7 @@
 	export let rowNumbers;
 	export let rowColor = undefined;
 	export let subtotals = true;
+	export let finalColumnOrder = undefined;
 
 	const dispatch = createEventDispatcher();
 
@@ -35,9 +36,9 @@
 	on:keypress={(e) => e.key === 'Enter' && toggleGroup()}
 	style:background-color={rowColor}
 >
-	{#each $props.columns.length > 0 ? $props.columns.sort((a, b) => $props.finalColumnOrder.indexOf(a.id) - $props.finalColumnOrder.indexOf(b.id)) : columnSummary
+	{#each $props.columns.length > 0 ? $props.columns.sort((a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id)) : columnSummary
 				.filter((d) => d.show === true)
-				.sort((a, b) => $props.finalColumnOrder.indexOf(a.id) - $props.finalColumnOrder.indexOf(b.id)) as column, j}
+				.sort((a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id)) as column, j}
 		{@const useCol = safeExtractColumn(column, columnSummary)}
 		{@const column_format = column.fmt
 			? getFormatObjectFromString(column.fmt, useCol.format?.valueType)
@@ -49,7 +50,7 @@
 				: column_format}
 		{@const useFormat = format?.valueType === 'date' ? '' : format}
 		{#if j === 0}
-			<TableCell class="font-medium py-[3px]" colSpan={rowNumbers ? 2 : 1}>
+			<TableCell class="font-medium py-[3px]" colSpan={rowNumbers ? 2 : 1} paddingLeft="1px">
 				<div class="items-center gap-2 align-top">
 					<span class="inline-flex print-hidden chevron"><TableGroupIcon {toggled} /></span>
 					{groupName}
@@ -71,7 +72,7 @@
 							format_object={useFormat}
 							columnUnitSummary={useCol.columnUnitSummary}
 							showValue={column.showValue}
-							deltaSymbol={column.deltaSymbol}
+							showSymbol={column.deltaSymbol}
 							align={column.align}
 							fontClass="font-medium text-[9.25pt]"
 							neutralMin={column.neutralMin}

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/SubtotalRow.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/SubtotalRow.svelte
@@ -10,23 +10,24 @@
 	import { propKey } from '@evidence-dev/component-utilities/chartContext';
 	const props = getContext(propKey);
 
-	export let groupName;
-	export let currentGroupData;
-	export let columnSummary;
+	export let groupName = undefined;
+	export let currentGroupData = undefined;
+	export let columnSummary = undefined;
 	export let rowColor = 'var(--grey-100)';
-	export let groupBy;
-	export let groupType;
-	export let fontColor;
+	export let groupBy = undefined;
+	export let groupType = undefined;
+	export let fontColor = undefined;
+	export let finalColumnOrder = undefined;
 </script>
 
 <tr
 	class=" w-full border-b-gray-400 border-b-[1px]"
 	style:background-color={rowColor}
 	style:color={fontColor}
 >
-	{#each $props.columns.length > 0 ? $props.columns.sort((a, b) => $props.finalColumnOrder.indexOf(a.id) - $props.finalColumnOrder.indexOf(b.id)) : columnSummary
+	{#each $props.columns.length > 0 ? $props.columns.sort((a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id)) : columnSummary
 				.filter((d) => d.show === true)
-				.sort((a, b) => $props.finalColumnOrder.indexOf(a.id) - $props.finalColumnOrder.indexOf(b.id)) as column}
+				.sort((a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id)) as column}
 		{@const useCol = safeExtractColumn(column, columnSummary)}
 		{@const column_format = column.fmt
 			? getFormatObjectFromString(column.fmt, useCol.format?.valueType)
@@ -55,7 +56,7 @@
 						format_object={column_format}
 						columnUnitSummary={useCol.columnUnitSummary}
 						showValue={column.showValue}
-						deltaSymbol={column.deltaSymbol}
+						showSymbol={column.deltaSymbol}
 						align={column.align}
 						fontClass="font-medium text-[9.25pt]"
 						neutralMin={column.neutralMin}

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/TableCell.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/TableCell.svelte
@@ -1,24 +1,24 @@
 <script>
-	export let dataType;
-	export let align;
-	export let height;
-	export let width;
-	export let wrap;
+	export let dataType = undefined;
+	export let align = undefined;
+	export let height = undefined;
+	export let width = undefined;
+	export let wrap = undefined;
 
 	export let verticalAlign = 'middle';
 	export let rowSpan = 1;
 	export let colSpan = 1;
 	export let show = true;
-	export let cellColor;
-	export let fontColor;
+	export let cellColor = undefined;
+	export let fontColor = undefined;
 
-	export let topBorder;
-	export let paddingLeft;
+	export let topBorder = undefined;
+	export let paddingLeft = undefined;
 </script>
 
 <td
 	class="{$$restProps.class ||
-		''} {dataType} {topBorder} py-[2px] px-[8px] whitespace-nowrap overflow-hidden first:pl-[4px]"
+		''} {dataType} {topBorder} py-[2px] px-[8px] whitespace-nowrap overflow-hidden first:pl-[3px]"
 	style:text-align={align}
 	style:height
 	style:width

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/TableHeader.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/TableHeader.svelte
@@ -71,7 +71,7 @@
 	}
 
 	th:first-child {
-		padding-left: 4px;
+		padding-left: 3px;
 	}
 
 	.index {

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
@@ -10,18 +10,19 @@
 	import TableCell from './TableCell.svelte';
 	const props = getContext(propKey);
 
-	export let displayedData;
-	export let rowShading;
-	export let link;
-	export let rowNumbers;
-	export let rowLines;
-	export let index;
-	export let columnSummary;
+	export let displayedData = undefined;
+	export let rowShading = undefined;
+	export let link = undefined;
+	export let rowNumbers = undefined;
+	export let rowLines = undefined;
+	export let index = undefined;
+	export let columnSummary = undefined;
 	export let grouped = false; // if part of a group - styling will be adjusted
-	export let groupType;
-	export let groupColumn;
-	export let rowSpan;
+	export let groupType = undefined;
+	export let groupColumn = undefined;
+	export let rowSpan = undefined;
 	export let groupNamePosition = 'middle'; // middle (default) | top | bottom
+	export let finalColumnOrder = undefined;
 
 	function handleRowClick(url) {
 		if (link) {
@@ -48,7 +49,7 @@
 		{/if}
 
 		{#if $props.columns.length > 0}
-			{#each $props.columns.sort((a, b) => $props.finalColumnOrder.indexOf(a.id) - $props.finalColumnOrder.indexOf(b.id)) as column, k}
+			{#each $props.columns.sort((a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id)) as column, k}
 				{@const useCol = safeExtractColumn(column, columnSummary)}
 				{@const column_min = column.colorMin ?? useCol.columnUnitSummary.min}
 				{@const column_max = column.colorMax ?? useCol.columnUnitSummary.max}
@@ -137,7 +138,7 @@
 							format_object={column_format}
 							columnUnitSummary={useCol.columnUnitSummary}
 							showValue={column.showValue}
-							deltaSymbol={column.deltaSymbol}
+							showSymbol={column.deltaSymbol}
 							align={column.align}
 							fontClass="text-[9.25pt]"
 							neutralMin={column.neutralMin}
@@ -158,7 +159,7 @@
 		{:else}
 			{#each columnSummary
 				.filter((d) => d.show === true)
-				.sort((a, b) => $props.finalColumnOrder.indexOf(a.id) - $props.finalColumnOrder.indexOf(b.id)) as column, j}
+				.sort((a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id)) as column, j}
 				<!-- Check if last row in table-->
 				<TableCell
 					class={column.type}

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/TotalRow.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/TotalRow.svelte
@@ -10,22 +10,23 @@
 	import { propKey } from '@evidence-dev/component-utilities/chartContext';
 	const props = getContext(propKey);
 
-	export let data;
-	export let rowNumbers;
-	export let columnSummary;
+	export let data = undefined;
+	export let rowNumbers = undefined;
+	export let columnSummary = undefined;
 	export let rowColor = undefined;
 	export let fontColor = undefined;
-	export let groupType;
+	export let groupType = undefined;
+	export let finalColumnOrder = undefined;
 </script>
 
 <tr class="font-semibold" style:background-color={rowColor} style:color={fontColor}>
 	{#if rowNumbers && groupType !== 'section'}
 		<TableCell class="index w-[2%]" topBorder="border-t border-gray-600" />
 	{/if}
 
-	{#each $props.columns.length > 0 ? $props.columns.sort((a, b) => $props.finalColumnOrder.indexOf(a.id) - $props.finalColumnOrder.indexOf(b.id)) : columnSummary
+	{#each $props.columns.length > 0 ? $props.columns.sort((a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id)) : columnSummary
 				.filter((d) => d.show === true)
-				.sort((a, b) => $props.finalColumnOrder.indexOf(a.id) - $props.finalColumnOrder.indexOf(b.id)) as column}
+				.sort((a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id)) as column}
 		{@const colColumnSummary = safeExtractColumn(column, columnSummary)}
 		{@const format = column.totalFmt
 			? getFormatObjectFromString(column.totalFmt)
@@ -51,7 +52,7 @@
 						format_object={format}
 						columnUnitSummary={colColumnSummary.columnUnitSummary}
 						showValue={column.showValue}
-						deltaSymbol={column.deltaSymbol}
+						showSymbol={column.deltaSymbol}
 						align={column.align}
 						fontClass="font-semibold text-[9.25pt]"
 						neutralMin={column.neutralMin}