Uni/dps-webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Admin Item Color grading

Browse Source
This commit is contained in:
Tim
2025-06-15 15:16:38 +02:00
parent f296f06371
commit 3ccf5357ce
1 changed files with 41 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
01-frontend/src/helper/adminpanel/ItemsInfo.tsx
View File

@@ -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));
const green = Math.floor(255 * ratio)
function hsvDegToHex(h: number): string {
h = Math.max(0, Math.min(360, h));
const redHex = red.toString(16).padStart(2, '0').toUpperCase();
const greenHex = green.toString(16).padStart(2, '0').toUpperCase();
const c = 1;
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"