Merge pull request #2134 from evidence-dev/fix/1889-link

BigValue url prop fix #2134
evidence-dev · Jun 24, 2024 · 4e93912 · 4e93912
2 parents 7f43e25 + f43b8a9
commit 4e93912
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 3 deletions.
diff --git a/.changeset/brave-students-joke.md b/.changeset/brave-students-joke.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Added url prop to Big value Component
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte
@@ -40,6 +40,9 @@
 	let positive = true;
 	let comparisonColor = 'var(--grey-700)';
 
+	/** @type {string | null}*/
+	export let link = null;
+
 	let error = undefined;
 	$: try {
 		error = undefined;
@@ -103,7 +106,13 @@
 	{:else}
 		<p class="text-sm text-gray-700">{title}</p>
 		<div class="relative text-xl font-medium text-gray-700 my-0.5">
-			<Value {data} column={value} {fmt} />
+			{#if link}
+				<a class="hover:bg-gray-100" href={link}>
+					<Value {data} column={value} {fmt} />
+				</a>
+			{:else}
+				<Value {data} column={value} {fmt} />
+			{/if}
 			{#if sparkline}
 				<Sparkline
 					height="15"
@@ -137,7 +146,13 @@
 				</p>
 			{:else}
 				<p class="text-xs font-sans text-gray-500 pt-[0.5px]">
-					<Value {data} column={comparison} fmt={comparisonFmt} />
+					{#if link}
+						<a class="hover:bg-gray-100" href={link}>
+							<Value {data} column={comparison} fmt={comparisonFmt} />
+						</a>
+					{:else}
+						<Value {data} column={comparison} fmt={comparisonFmt} />
+					{/if}
 					<span>{comparisonTitle}</span>
 				</p>
 			{/if}

diff --git a/sites/docs/pages/components/big-value.md b/sites/docs/pages/components/big-value.md
@@ -123,7 +123,31 @@ Multiple cards will align themselves into a row.
   comparisonTitle="MoM"
 />
 ```
+### Linking to other pages
 
+The link property makes the Value component clickable, allowing navigation to other pages.
+
+<BigValue 
+  data={orders_with_comparisons} 
+  value=num_orders
+  sparkline=month
+  comparison=order_growth
+  comparisonFmt=pct1
+  comparisonTitle="vs. Last Month"
+  link='/components/big-value/'
+/>
+
+```html
+<BigValue 
+  data={orders_with_comparisons} 
+  value=num_orders
+  sparkline=month
+  comparison=order_growth
+  comparisonFmt=pct1
+  comparisonTitle="vs. Last Month"
+  link='/components/big-value/'
+/>
+```
 
 ### Non-Delta Comparisons
 
@@ -154,7 +178,6 @@ Multiple cards will align themselves into a row.
   sparkline=month
 />
 
-
 ## Options
 
 ### Data
@@ -206,6 +229,11 @@ Multiple cards will align themselves into a row.
     defaultValue="No records"
 />
 
+<PropListing name="link">
+
+Used to navigate to other pages. Can be a full external link like `https://google.com` or an internal link like `/sales/performance`
+</PropListing>
+
 ### Comparison Options
 
 <PropListing