u

uiserver/src/components/Chart.js

@@ -99,7 +99,9 @@ export default class Chart extends Component {
 
                     for (let i = 0; i < points.length; i++) {
                         const [tsStr, rawVal, untilStr] = points[i];
-                        const val = Number(rawVal);
+                        const numVal = Number(rawVal);
+                        // MUI-X charts only accepts numbers and null - NaN causes errors
+                        const val = Number.isNaN(numVal) ? null : numVal;
 
                         let start = new Date(tsStr).getTime();
                         let explicitEnd = untilStr ? new Date(untilStr).getTime() : null;
@@ -230,12 +232,14 @@ export default class Chart extends Component {
             let label = id;
             let yAxisKey = 'left';
             let color = undefined;
+            let fillColor = undefined;
             if (channelConfig) {
                 const item = channelConfig.find(c => c.id === id);
                 if (item) {
                     if (item.alias) label = item.alias;
                     if (item.yAxis) yAxisKey = item.yAxis;
                     if (item.color) color = item.color;
+                    if (item.fillColor) fillColor = item.fillColor;
                 }
             }
 
@@ -247,6 +251,16 @@ export default class Chart extends Component {
                 yAxisKey: yAxisKey,
             };
             if (color) sObj.color = color;
+            // Enable area fill if fillColor is set (with 50% transparency)
+            if (fillColor) {
+                sObj.area = true;
+                // Convert hex to rgba with 50% opacity
+                const hex = fillColor.replace('#', '');
+                const r = parseInt(hex.substring(0, 2), 16);
+                const g = parseInt(hex.substring(2, 4), 16);
+                const b = parseInt(hex.substring(4, 6), 16);
+                sObj.areaColor = `rgba(${r}, ${g}, ${b}, 0.5)`;
+            }
             return sObj;
         });
 
@@ -289,6 +303,15 @@ export default class Chart extends Component {
                                     position: { vertical: 'top', horizontal: 'middle' },
                                     padding: 0,
                                 },
+                                lineHighlight: { strokeWidth: 3 },
+                            }}
+                            sx={{
+                                '& .MuiLineElement-root': {
+                                    strokeWidth: 3,
+                                },
+                                '& .MuiAreaElement-root': {
+                                    fillOpacity: 0.5,
+                                },
                             }}
                         />
                     </Box>