Colors gradient for student stats

Author: DedSec256

hwproj.front/package-lock.json

@@ -24,6 +24,7 @@
     "axios": "^0.21.2",
     "bootstrap": "^4.3.1",
     "classnames": "^2.3.1",
+    "color-util": "^2.2.3",
     "date-fns": "^2.23.0",
     "dayjs": "^1.10.6",
     "dotenv": "^10.0.0",

hwproj.front/package.json

@@ -102,7 +102,7 @@ class StudentStats extends React.Component<IStudentStatsProps, IStudentStatsStat
                                                 forMentor={this.props.isMentor}
                                                 studentId={String(cm.id)}
                                                 taskId={task.id!}
-                                            />
+                                                taskMaxRating={task.maxRating!}/>
                                         ))
                                     )}
                                 </TableRow>

hwproj.front/src/components/Courses/StudentStats.tsx

@@ -98,7 +98,6 @@ const TaskSolutionsPage: FC<RouteComponentProps<ITaskSolutionsProps>> = (props)
                                         forMentor={false}
                                         task={taskSolution.task}
                                         studentId={userId as string}
-                                        maxRating={taskSolution.task!.maxRating!}
                                     />
                                 </Grid>
                             )}
@@ -128,7 +127,6 @@ const TaskSolutionsPage: FC<RouteComponentProps<ITaskSolutionsProps>> = (props)
                                             forMentor={false}
                                             task={taskSolution.task}
                                             studentId={userId as string}
-                                            maxRating={taskSolution.task!.maxRating!}
                                         />
                                     </div>
                                     <div style={{marginTop: "10px"}}>

hwproj.front/src/components/Solutions/TaskSolutionsPage.tsx

@@ -3,12 +3,14 @@ import TableCell from "@material-ui/core/TableCell";
 import {Redirect} from "react-router-dom";
 import {Solution, StatisticsCourseSolutionsModel} from "api";
 import {Chip, Stack} from "@mui/material";
+import {colorBetween} from "../../services/JsUtils";
 
 interface ITaskStudentCellProps {
     studentId: string;
     taskId: number;
     forMentor: boolean;
     userId: string;
+    taskMaxRating: number;
     solutions?: StatisticsCourseSolutionsModel[];
 }
 
@@ -89,18 +91,19 @@ export default class StudentStatsCell extends React.Component<ITaskStudentCellPr
         this.setState({redirectForStudent: true});
     }
 
-    getCellBackgroundColor = (state: Solution.StateEnum | undefined, isFirstTry: boolean): string => {
+
+    getCellBackgroundColor = (state: Solution.StateEnum | undefined,
+                              rating: number | undefined, maxRating: number,
+                              isFirstTry: boolean): string => {
         if (state == Solution.StateEnum.NUMBER_0)
-            return isFirstTry ? "#d0fcc7" : "#ffeb99"
-        if (state == Solution.StateEnum.NUMBER_1)
-            return "#ffc346"
-        if (state == Solution.StateEnum.NUMBER_2)
-            return "#7ad67a"
-        return "#ffffff"
+            return isFirstTry ? "#d0fcc7" : "#afeeee"
+        return rating !== undefined
+            ? colorBetween(0xff0000, 0x2cba00, rating / maxRating * 100)
+            : "#ffffff"
     }
 
     async componentDidMount() {
-        const solutions = this.props.solutions
+        const {solutions, taskMaxRating} = this.props
         const ratedSolutions = solutions!.filter(x => x.state != Solution.StateEnum.NUMBER_0)
         const ratedSolutionsCount = ratedSolutions.length
         const isFirstUnratedTry = ratedSolutionsCount === 0
@@ -116,7 +119,7 @@ export default class StudentStatsCell extends React.Component<ITaskStudentCellPr
             return
         }
         this.setState({
-            color: this.getCellBackgroundColor(lastSolution.state, isFirstUnratedTry),
+            color: this.getCellBackgroundColor(lastSolution.state, lastSolution.rating, taskMaxRating, isFirstUnratedTry),
             isLoaded: true,
             lastRatedSolution: lastRatedSolution,
             ratedSolutionsCount: ratedSolutions.length

hwproj.front/src/components/Tasks/StudentStatsCell.tsx

@@ -0,0 +1,12 @@
+import colorutil from "color-util";
+
+export const colorBetween = (color1, color2, position) => {
+    const ratingGradient = colorutil.hsv.gradient({
+        type: "linear",
+        colors: [
+            colorutil.color(color1).hsv,
+            colorutil.color(color2).hsv
+        ]
+    })
+    return colorutil.rgb.to.hex(colorutil.hsv.to.rgb(ratingGradient(position, 0)))
+}