From f4d350e5ebd54504890a4f13a87577eea819d851 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Z=C3=ADpek?= <jan@zipek.cz>
Date: Mon, 1 Apr 2024 17:09:32 +0200
Subject: [PATCH] Add font size setting to dial

---
 .../BoxSettings/components/DialSettings.tsx          | 12 ++++++++++++
 .../DashboardGrid/components/BoxDialContent.tsx      |  8 ++++++--
 client/src/utils/dashboard/parseDashboard.ts         |  1 +
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/dashboard/components/BoxSettings/components/DialSettings.tsx b/client/src/pages/dashboard/components/BoxSettings/components/DialSettings.tsx
index ad9d7f0..901951e 100644
--- a/client/src/pages/dashboard/components/BoxSettings/components/DialSettings.tsx
+++ b/client/src/pages/dashboard/components/BoxSettings/components/DialSettings.tsx
@@ -1,4 +1,5 @@
 import { SensorInfo } from '@/api/sensors'
+import { FormField } from '@/components/FormField'
 import { DashboardDialData } from '@/utils/dashboard/parseDashboard'
 import { useForm } from '@/utils/hooks/useForm'
 import { omit } from '@/utils/omit'
@@ -41,6 +42,17 @@ export const DialSettings = ({ sensors, value, onChange }: Props) => {
 				<label>Multiplier</label>
 				<input type="number" step="any" {...register('multiplier')} />
 			</div>
+			<FormField
+				name="fontSIze"
+				label="Font size"
+				hint="Font size multiplier, default 1"
+			>
+				<input
+					type="number"
+					step="any"
+					{...register('fontSize', { type: 'number' })}
+				/>
+			</FormField>
 		</>
 	)
 }
diff --git a/client/src/pages/dashboard/components/DashboardGrid/components/BoxDialContent.tsx b/client/src/pages/dashboard/components/DashboardGrid/components/BoxDialContent.tsx
index 6f1ac14..c7c4086 100644
--- a/client/src/pages/dashboard/components/DashboardGrid/components/BoxDialContent.tsx
+++ b/client/src/pages/dashboard/components/DashboardGrid/components/BoxDialContent.tsx
@@ -53,10 +53,14 @@ export const BoxDialContent = ({ data, ...editableBoxProps }: Props) => {
 				{showFetchLoading && <BoxLoader />}
 				<div className="dial">
 					{value.data && (
-						<>
+						<div
+							style={{
+								...(data.fontSize && { fontSize: `${data.fontSize * 100}%` }),
+							}}
+						>
 							{displayValue}
 							{data.unit && ` ${data.unit}`}
-						</>
+						</div>
 					)}
 				</div>
 			</>
diff --git a/client/src/utils/dashboard/parseDashboard.ts b/client/src/utils/dashboard/parseDashboard.ts
index 64bc941..85271dc 100644
--- a/client/src/utils/dashboard/parseDashboard.ts
+++ b/client/src/utils/dashboard/parseDashboard.ts
@@ -41,6 +41,7 @@ export type DashboardDialData = {
 	unit?: string
 	decimals?: string
 	multiplier?: string
+	fontSize?: number
 }
 
 export const parseDashboard = (input: string) => {