From b9b30e66ec485cc019561b092fc27d08aa4666b3 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Tue, 6 Aug 2024 12:20:16 +0200
Subject: [PATCH] fix(frontend): Hide AgChart background to make styling work
 (#4197)

* fix(frontend): Hide AgChart background to make styling work

* fix(frontend): Fix dark theme
---
 .../display/charts/AppAgCharts.svelte         | 63 ++++++++++++++++++-
 1 file changed, 60 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/charts/AppAgCharts.svelte b/frontend/src/lib/components/apps/components/display/charts/AppAgCharts.svelte
index 4b8fe6fa0e..83d351fbb2 100644
--- a/frontend/src/lib/components/apps/components/display/charts/AppAgCharts.svelte
+++ b/frontend/src/lib/components/apps/components/display/charts/AppAgCharts.svelte
@@ -8,13 +8,14 @@
 		RichConfigurations
 	} from '../../../types'
 	import { initCss } from '../../../utils'
-	import { getContext } from 'svelte'
+	import { getContext, tick } from 'svelte'
 	import { initConfig, initOutput } from '../../../editor/appUtils'
 	import { components } from '../../../editor/component'
 	import ResolveConfig from '../../helpers/ResolveConfig.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import ResolveStyle from '../../helpers/ResolveStyle.svelte'
 	import type { AgChartOptions, AgChartInstance } from 'ag-charts-community'
+	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -58,6 +59,48 @@
 	let css = initCss($app.css?.agchartscomponent, customCss)
 	let chartInstance: AgChartInstance | undefined = undefined
 
+	function getChartStyleByTheme() {
+		const gridColor = darkMode ? '#555555' : '#dddddd'
+		const axisColor = darkMode ? '#555555' : '#dddddd'
+		const textColor = darkMode ? '#eeeeee' : '#333333'
+
+		return {
+			axes: [
+				{
+					type: 'category',
+					position: 'bottom',
+					label: { color: textColor },
+					line: { color: axisColor },
+					tick: { color: axisColor },
+					gridLine: {
+						style: [
+							{
+								stroke: gridColor
+							}
+						]
+					}
+				},
+				{
+					type: 'number',
+					position: 'left',
+					label: { color: textColor },
+					line: { color: axisColor },
+					tick: { color: axisColor },
+					gridLine: {
+						style: [
+							{
+								stroke: gridColor
+							}
+						]
+					}
+				}
+			],
+			background: {
+				visible: false
+			}
+		}
+	}
+
 	function updateChart() {
 		if (!chartInstance) {
 			return
@@ -111,7 +154,8 @@
 							yName: d.name
 						}
 					}
-				}) as any[]) ?? []
+				}) as any[]) ?? [],
+			...getChartStyleByTheme()
 		}
 
 		outputs.result.set({
@@ -220,6 +264,7 @@
 		}
 		const options = {
 			container: document.getElementById(`agchart-${id}`) as HTMLElement,
+			...getChartStyleByTheme(),
 			...result
 		}
 
@@ -252,7 +297,8 @@
 			const options: AgChartOptions = {
 				container: document.getElementById(`agchart-${id}`) as HTMLElement,
 				data: [],
-				series: []
+				series: [],
+				...getChartStyleByTheme()
 			}
 
 			chartInstance = AgChartsInstance?.create(options)
@@ -274,8 +320,19 @@
 			initChart()
 		})
 	}
+
+	let darkMode = false
 </script>
 
+<DarkModeObserver
+	bind:darkMode
+	on:change={(e) => {
+		tick().then(() => {
+			updateChart()
+		})
+	}}
+/>
+
 {#if datasets}
 	<ResolveConfig
 		{id}