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 @@
{:else if inputCat == 'resource-object'}
-
+
{:else if inputCat == 'object'}
{#if properties && Object.keys(properties).length > 0}
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
+ }
{#if result}
-
+
{/if}