From 86eae2c824bedbfd9dcb7750adea7ded331dc953 Mon Sep 17 00:00:00 2001
From: Kai Jellinghaus <contact@kaij.tech>
Date: Sat, 3 Dec 2022 20:48:04 +0100
Subject: [PATCH] feat(frontend); Improve Pie schema (#983)

* Make the pie schema good

* Remove private info

* Fix build error
---
 frontend/src/lib/components/ArgInput.svelte   |  2 +-
 .../components/dataDisplay/AppPieChart.svelte | 31 +++++++++++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 1307a0ce51..704e2f7581 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -285,7 +285,7 @@
 					</span>
 				</div>
 			{:else if inputCat == 'resource-object'}
-				<ObjectResourceInput {compact} {format} bind:value />
+				<ObjectResourceInput {format} bind:value />
 			{:else if inputCat == 'object'}
 				{#if properties && Object.keys(properties).length > 0}
 					<div class="p-4 pl-8 border rounded w-full">
diff --git a/frontend/src/lib/components/apps/components/dataDisplay/AppPieChart.svelte b/frontend/src/lib/components/apps/components/dataDisplay/AppPieChart.svelte
index 586bd0f643..e208ad1287 100644
--- a/frontend/src/lib/components/apps/components/dataDisplay/AppPieChart.svelte
+++ b/frontend/src/lib/components/apps/components/dataDisplay/AppPieChart.svelte
@@ -40,11 +40,38 @@
 		animation: false
 	}
 
-	let result: ChartData<'pie', number[], unknown> | undefined = undefined
+	let nextColor = 0
+
+	// TODO: Replace with nicer windmill branded color pallet.
+	const colors = ['#3b82f6', '#ff6384', '#4bc0c0', '#ff9f40', '#9966ff', '#ffcd56', '#c9cbcf']
+
+	function generateColor() {
+		const col = colors[nextColor]
+		nextColor = (nextColor + 1) % colors.length
+		return col
+	}
+
+	let result: { name: string; value: number; color: string | undefined }[] | undefined = undefined
+	let data: ChartData<'pie', number[], string> | undefined = undefined
+
+	$: if (Array.isArray(result)) {
+		nextColor = 0
+		data = {
+			datasets: [
+				{
+					data: result.map((x) => x.value),
+					backgroundColor: result.map((x) => x.color ?? generateColor())
+				}
+			],
+			labels: result.map((x) => x.name)
+		}
+	} else {
+		data = undefined
+	}
 </script>
 
 <RunnableComponent {id} {path} {runType} {inlineScriptName} bind:inputs bind:result>
 	{#if result}
-		<Pie data={result} {options} />
+		<Pie {data} {options} />
 	{/if}
 </RunnableComponent>