Add Admin Item Color grading

01-frontend/src/helper/adminpanel/ItemsInfo.tsx

@@ -5,7 +5,7 @@ import Item from "../../components/Item";
 import {useTranslation} from "react-i18next";
 import {DataGrid, GridColDef, GridRowId, GridRowSelectionModel} from "@mui/x-data-grid";
 import {useEffect, useState} from "react";
-import {Gauge} from "@mui/x-charts";
+import {Gauge, gaugeClasses} from "@mui/x-charts";
 
 export default function ItemsInfo() {
     const theme = useTheme();
@@ -19,14 +19,36 @@ export default function ItemsInfo() {
         const ratio = maxVal !== minVal
             ? (clamped - minVal) / (maxVal - minVal)
             : 0;
+        return hsvDegToHex(120 * ratio);//120° is green, 0° is red
+    }
 
-        const red = Math.floor(255 * (1 - ratio));
+    function hsvDegToHex(h: number): string {
-        const green = Math.floor(255 * ratio)
+        h = Math.max(0, Math.min(360, h));
     
-        const redHex = red.toString(16).padStart(2, '0').toUpperCase();
+        const c = 1;
-        const greenHex = green.toString(16).padStart(2, '0').toUpperCase();
+        const x = (1 - Math.abs(((h / 60) % 2) - 1));
       
-        return `#${redHex}${greenHex}00`; // Blue is always 00
+        let r = 0, g = 0, b = 0;
+        if (h < 60) {
+          r = c; g = x; b = 0;
+        } else if (h < 120) {
+          r = x; g = c; b = 0;
+        } else if (h < 180) {
+          r = 0; g = c; b = x;
+        } else if (h < 240) {
+          r = 0; g = x; b = c;
+        } else if (h < 300) {
+          r = x; g = 0; b = c;
+        } else {
+          r = c; g = 0; b = x;
+        }
+      
+        // scale to 0-255
+        const rHex = Math.round(r * 255).toString(16).padStart(2, '0');
+        const gHex = Math.round(g * 255).toString(16).padStart(2, '0');
+        const bHex = Math.round(b * 255).toString(16).padStart(2, '0');
+      
+        return `#${rHex}${gHex}${bHex}`;
     }
 
     function handleIconEdit(item: Item) {
@@ -44,7 +66,7 @@ export default function ItemsInfo() {
             stock: 100,
             stockExpected: 1200,
             category: "garden",
-            rating: 5,
+            rating: 7,
             discount100: 21,
         },
         {
@@ -125,7 +147,11 @@ export default function ItemsInfo() {
             width: 100,
             editable: true,
             type: 'number',
-            renderCell: params => <Gauge value={params.row.stock} valueMin={0} valueMax={params.row.stockExpected} startAngle={-90} endAngle={90} />
+            renderCell: params => <Gauge value={params.row.stock} valueMin={0} valueMax={params.row.stockExpected} startAngle={-90} endAngle={90} sx={{
+                [`& .${gaugeClasses.valueArc}`]: {
+                    fill: () => {return mapValueToColor(0, params.row.stockExpected, params.row.stock)},
+                },
+            }}/>
         },
         {
             field: 'rating',
@@ -133,7 +159,11 @@ export default function ItemsInfo() {
             width: 100,
             editable: true,
             type: 'number',
-            renderCell: params => <Gauge value={params.row.rating} valueMin={0} valueMax={10} startAngle={-90} endAngle={90}/>
+            renderCell: params => <Gauge value={params.row.rating} valueMin={0} valueMax={10} startAngle={-90} endAngle={90} sx={{
+                [`& .${gaugeClasses.valueArc}`]: {
+                    fill: () => {return mapValueToColor(0, 10, params.row.rating)},
+                },
+            }}/>
         },
         { //edit billing information button
             field: "actualPrice",
@@ -151,11 +181,6 @@ export default function ItemsInfo() {
         }
     ];
 
-    useEffect(() => {
-        console.log(mapValueToColor(0,10,2))
-        console.log(mapValueToColor(0,10,7))
-    }, []);
-
     return (
         <Box
             className="page-table"