From 1fc9352660514c7a18a2e8fed696ab5259481dfb Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 8 Jun 2023 15:28:09 +0200
Subject: [PATCH] add options to chartjs component

---
 frontend/src/lib/components/ArgInfo.svelte       | 14 ++++++++++++--
 .../apps/components/display/AppChartJs.svelte    | 16 ++++++++--------
 .../apps/editor/component/components.ts          |  6 ++++++
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/ArgInfo.svelte b/frontend/src/lib/components/ArgInfo.svelte
index bfc9a8cf18..261b834d1e 100644
--- a/frontend/src/lib/components/ArgInfo.svelte
+++ b/frontend/src/lib/components/ArgInfo.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { ResourceService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import { truncate } from '$lib/utils'
-	import { DrawerContent } from './common'
+	import { copyToClipboard, truncate } from '$lib/utils'
+	import { ClipboardCopy } from 'lucide-svelte'
+	import { Button, DrawerContent } from './common'
 	import Drawer from './common/drawer/Drawer.svelte'
 	import ObjectViewer from './propertyPicker/ObjectViewer.svelte'
 	import Tooltip from './Tooltip.svelte'
@@ -23,6 +24,15 @@
 
 <Drawer bind:this={jsonViewer} size="800px">
 	<DrawerContent title="Argument Details" on:close={jsonViewer.toggleDrawer}>
+		<svelte:fragment slot="actions">
+			<Button
+				on:click={() => copyToClipboard(JSON.stringify(jsonViewerContent, null, 4))}
+				color="light"
+				size="xs"
+			>
+				<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
+			</Button>
+		</svelte:fragment>
 		{#if isString(jsonViewerContent)}
 			<pre>{jsonViewerContent}</pre>
 		{:else}
diff --git a/frontend/src/lib/components/apps/components/display/AppChartJs.svelte b/frontend/src/lib/components/apps/components/display/AppChartJs.svelte
index 2711ac5f04..dbb727ec62 100644
--- a/frontend/src/lib/components/apps/components/display/AppChartJs.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppChartJs.svelte
@@ -28,18 +28,18 @@
 
 	let result: undefined = undefined
 
-	const options = {
-		responsive: true,
-		animation: false,
-		maintainAspectRatio: false
-	} as ChartOptions
-
-	$: css = concatCustomCss($app.css?.piechartcomponent, customCss)
-
 	const resolvedConfig = initConfig(
 		components['chartjscomponent'].initialData.configuration,
 		configuration
 	)
+	$: options = {
+		responsive: true,
+		animation: false,
+		maintainAspectRatio: false,
+		...(resolvedConfig.options ?? {})
+	} as ChartOptions
+
+	$: css = concatCustomCss($app.css?.piechartcomponent, customCss)
 </script>
 
 {#each Object.keys(components['chartjscomponent'].initialData.configuration) as key (key)}
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 7e37f5eacd..5b6d3ae5ec 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -781,6 +781,12 @@ export const components = {
 					fieldType: 'select',
 					selectOptions: selectOptions.chartTypeOptions,
 					value: 'pie'
+				},
+				options: {
+					type: 'static',
+					fieldType: 'object',
+					value: {},
+					tooltip: 'ChartJs options object'
 				}
 			},
 			componentInput: {