feat(frontend): add plain chartjs component (#1621)

* fix(frontend): add plain chartjs component

* feat(frontend): add missing styling

* feat(frontend): fix typing

* feat(frontend): fix typing

frontend/src/lib/components/apps/components/display/AppChartJs.svelte

@@ -1,23 +1,14 @@
-<!-- <script lang="ts">
-	import { Doughnut, Pie } from 'svelte-chartjs'
-	import {
-		Chart as ChartJS,
-		Title,
-		Tooltip,
-		Legend,
-		LineElement,
-		LinearScale,
-		PointElement,
-		CategoryScale,
-		ArcElement
-	} from 'chart.js'
+<script lang="ts">
+	import { Chart } from 'svelte-chartjs'
+	import { Chart as ChartJS, registerables, type ChartOptions } from 'chart.js'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 	import type { AppInput } from '../../inputType'
-	import InputValue from '../helpers/InputValue.svelte'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import { getContext } from 'svelte'
-	import { initOutput } from '../../editor/appUtils'
+	import { initConfig, initOutput } from '../../editor/appUtils'
+	import { components } from '../../editor/component'
+	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -33,59 +24,39 @@
 		loading: false
 	})
 
-	ChartJS.register(
-		Title,
-		Tooltip,
-		Legend,
-		LineElement,
-		LinearScale,
-		PointElement,
-		CategoryScale,
-		ArcElement
-	)
+	ChartJS.register(...registerables)
 
-	let result: { data: number[]; labels?: string[] } | undefined = undefined
-	let theme: string = 'theme1'
-	let doughnut = false
-
-	$: backgroundColor = {
-		theme1: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
-		// blue theme
-		theme2: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b'],
-		// red theme
-		theme3: ['#e74a3b', '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e']
-	}[theme]
+	let result: undefined = undefined
 
 	const options = {
 		responsive: true,
 		animation: false,
 		maintainAspectRatio: false
-	}
-
-	$: data = {
-		labels: result?.labels ?? [],
-		datasets: [
-			{
-				data: result?.data ?? [],
-				backgroundColor: backgroundColor
-			}
-		]
-	}
+	} as ChartOptions
 
 	$: css = concatCustomCss($app.css?.piechartcomponent, customCss)
+
+	const resolvedConfig = initConfig(
+		components['chartjscomponent'].initialData.configuration,
+		configuration
+	)
 </script>
 
-<InputValue {id} input={configuration.theme} bind:value={theme} />
-<InputValue {id} input={configuration.doughnutStyle} bind:value={doughnut} />
+{#each Object.keys(components['chartjscomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 <RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
-		{#if result}
-			{#if doughnut}
-				<Doughnut {data} {options} />
-			{:else}
-				<Pie {data} {options} />
-			{/if}
+		{#if result && resolvedConfig.type}
+			{#key resolvedConfig.type}
+				<Chart type={resolvedConfig.type} data={result} {options} />
+			{/key}
 		{/if}
 	</div>
-</RunnableWrapper> -->
+</RunnableWrapper>

frontend/src/lib/components/apps/editor/component/Component.svelte

@@ -48,6 +48,7 @@
 	import AppDownload from '../../components/display/AppDownload.svelte'
 	import AppLogsComponent from '../../components/display/AppLogsComponent.svelte'
 	import AppFlowStatusComponent from '../../components/display/AppFlowStatusComponent.svelte'
+	import AppChartJs from '../../components/display/AppChartJs.svelte'
 
 	export let component: AppComponent
 	export let selected: boolean
@@ -546,6 +547,15 @@
 				configuration={component.configuration}
 				{render}
 			/>
+		{:else if component.type === 'chartjscomponent'}
+			<AppChartJs
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:initializing
+				componentInput={component.componentInput}
+				{render}
+			/>
 		{/if}
 	</div>
 </div>

frontend/src/lib/components/apps/editor/component/components.ts

@@ -1,7 +1,7 @@
 import type { IntRange } from '../../../../common'
 import type { NARROW_GRID_COLUMNS, WIDE_GRID_COLUMNS } from '../../gridUtils'
 import { BUTTON_COLORS } from '../../../common'
-
+import type { ChartType } from 'chart.js'
 import { defaultAlignement } from '../componentsPanel/componentDefaultProps'
 import {
 	BarChart4,
@@ -82,6 +82,8 @@ export type FormButtonComponent = BaseComponent<'formbuttoncomponent'> & Recompu
 export type RunFormComponent = BaseComponent<'runformcomponent'>
 export type BarChartComponent = BaseComponent<'barchartcomponent'>
 export type PieChartComponent = BaseComponent<'piechartcomponent'>
+export type ChartJsComponent = BaseComponent<'chartjscomponent'>
+
 export type ScatterChartComponent = BaseComponent<'scatterchartcomponent'>
 export type TableComponent = BaseComponent<'tablecomponent'> & {
 	actionButtons: (BaseAppComponent & ButtonComponent & GridItem)[]
@@ -176,6 +178,7 @@ export type TypedComponent =
 	| ConditionalWrapperComponent
 	| SelectStepComponent
 	| DownloadComponent
+	| ChartJsComponent
 
 export type AppComponent = BaseAppComponent & TypedComponent
 
@@ -253,9 +256,18 @@ export const selectOptions = {
 	],
 	objectFitOptions: ['contain', 'cover', 'fill'],
 	splitPanelOptions: ['2', '3', '4'],
-	formorientationOptions: ['Horizontal', 'Vertical']
+	formorientationOptions: ['Horizontal', 'Vertical'],
+	chartTypeOptions: [
+		'bar',
+		'bubble',
+		'doughnut',
+		'line',
+		'pie',
+		'polarArea',
+		'radar',
+		'scatter'
+	] as ChartType[]
 }
-
 const labels = {
 	none: 'Do nothing',
 	errorOverlay: 'Show error overlay',
@@ -753,6 +765,38 @@ export const components = {
 			}
 		}
 	},
+	chartjscomponent: {
+		name: 'ChartJs',
+		icon: PieChart,
+		dims: '2:8-6:8' as AppComponentDimensions,
+		customCss: {
+			container: { class: '', style: '' }
+		},
+		initialData: {
+			configuration: {
+				type: {
+					type: 'static',
+					onlyStatic: true,
+					fieldType: 'select',
+					selectOptions: selectOptions.chartTypeOptions,
+					value: 'pie'
+				}
+			},
+			componentInput: {
+				type: 'static',
+				fieldType: 'object',
+				value: {
+					labels: ['Pie', 'Charts', '<3'],
+					datasets: [
+						{
+							data: [25, 50, 25],
+							backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56']
+						}
+					]
+				}
+			}
+		}
+	},
 	barchartcomponent: {
 		name: 'Bar/Line Chart',
 		icon: BarChart4,

frontend/src/lib/components/apps/editor/component/sets.ts

@@ -76,7 +76,8 @@ const charts: ComponentSet = {
 		'vegalitecomponent',
 		'plotlycomponent',
 		'scatterchartcomponent',
-		'timeseriescomponent'
+		'timeseriescomponent',
+		'chartjscomponent'
 	]
 } as const
 

frontend/src/lib/components/apps/editor/componentsPanel/quickStyleProperties.ts

@@ -652,6 +652,9 @@ export const quickStyleProperties: Record<
 	piechartcomponent: {
 		container: containerDefaultProps
 	},
+	chartjscomponent: {
+		container: containerDefaultProps
+	},
 	vegalitecomponent: {},
 	containercomponent: {
 		container: containerDefaultProps