add options to chartjs component

This commit is contained in:
Ruben Fiszel
2023-06-08 15:28:09 +02:00
parent 4dc950f167
commit ddfb4a2211
3 changed files with 26 additions and 10 deletions

View File

@@ -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}

View File

@@ -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)}

View File

@@ -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: {