Add flexible unit display for data view

Author: akustn

frontend/src/pages/DataViewPage/CloeDataViewPage.tsx

@@ -19,6 +19,5 @@ export const CloeDataViewPage = () => (
         plotYLabel="Fill [%]"
         plotYMin={0}
         plotYMax={100}
-        latestValueUnit="%"
     />
 )

frontend/src/pages/DataViewPage/DataView.tsx

@@ -51,7 +51,6 @@ interface DataViewProps {
     plotYLabel: string
     plotYMin: number
     plotYMax: number
-    latestValueUnit: string
 }
 
 export const DataView = ({
@@ -63,7 +62,6 @@ export const DataView = ({
     plotYLabel,
     plotYMin,
     plotYMax,
-    latestValueUnit,
 }: DataViewProps) => {
     const { TranslateText } = useLanguageContext()
     const { installation } = useContext(InstallationContext)
@@ -209,7 +207,6 @@ export const DataView = ({
                                     setSelectedTagId(tagId)
                                     setSelectedDataPoint(null)
                                 }}
-                                latestValueUnit={latestValueUnit}
                             />
                         )}
                         {plantCode && mapMission && (

frontend/src/pages/DataViewPage/DataViewTable.tsx

@@ -6,16 +6,28 @@ import { DescriptionDisplay, TagIdDisplay } from 'components/Displays/TaskDispla
 import { Task } from 'models/Task'
 import { formatDateTime } from 'utils/StringFormatting'
 
+const unitDisplaySymbols: Record<string, string> = {
+    celsius: '°C',
+    percentage: '%',
+}
+
+const formatUnit = (unit?: string): string => {
+    if (!unit) return ''
+    const normalizedUnit = unit
+        .toLowerCase()
+        .replace(/\s*\[.*\]\s*/, '')
+        .trim()
+    return unitDisplaySymbols[normalizedUnit] ?? unit
+}
+
 export const DataViewTable = ({
     tasks,
     selectedTagId,
     onSelectTag,
-    latestValueUnit,
 }: {
     tasks: Task[]
     selectedTagId: string | null
     onSelectTag: (tagId: string | null) => void
-    latestValueUnit: string
 }) => {
     const { TranslateText } = useLanguageContext()
 
@@ -68,7 +80,7 @@ export const DataViewTable = ({
                                     <Table.Cell>
                                         <Typography>
                                             {Math.round(parseFloat(task.inspection.analysisResult?.value)) +
-                                                latestValueUnit}
+                                                formatUnit(task.inspection.analysisResult?.unit)}
                                         </Typography>
                                     </Table.Cell>
                                 ) : (

frontend/src/pages/DataViewPage/ThermalReadingViewPage.tsx

@@ -21,7 +21,6 @@ export const ThermalReadingViewPage = () => {
             plotYLabel="Temperature [°C]"
             plotYMin={-20}
             plotYMax={100}
-            latestValueUnit="°C"
         />
     )
 }