fix(ui): Sort total statistics data points

Hypfer · Jan 9, 2022 · a568c03 · a568c03
1 parent ecd1aeb
commit a568c03
Showing 1 changed file with 41 additions and 25 deletions.
diff --git a/frontend/src/robot/TotalStatistics.tsx b/frontend/src/robot/TotalStatistics.tsx
@@ -141,33 +141,43 @@ const TotalStatisticsInternal: React.FunctionComponent = (): JSX.Element => {
             return <Typography color="error">Error loading statistics</Typography>;
         }
 
-        const statistics =
-            totalStatisticsState.map((dataPoint) => {
-                const achievement = statisticsAchievements[dataPoint.type].find(achievement => {
-                    return dataPoint.value >= achievement.value;
-                });
-
-                return (
-                    <Grid item xs={12} sm={4} key={dataPoint.type}>
-                        <Card style={{height: "100%"}}>
-                            <CardMedia component={StatisticsAward} achievement={achievement}/>
-                            <CardContent>
-                                {<Typography variant="body1" mb={2}>
-                                    {achievement?.description || "No achievement yet"}
-                                </Typography>}
-
-                                <Typography sx={{fontSize: 14}} color="text.secondary" gutterBottom>
-                                    {getFriendlyStatName(dataPoint)}
-                                </Typography>
-                                <Typography variant="h5" component="div">
-                                    {getHumanReadableStatValue(dataPoint)}
-                                </Typography>
-                            </CardContent>
-                        </Card>
-                    </Grid>
-                );
+        const statistics = totalStatisticsState.sort((a, b) => {
+            const aMapped = SORT_ORDER[a.type] ?? 10;
+            const bMapped = SORT_ORDER[b.type] ?? 10;
+
+            if (aMapped < bMapped) {
+                return -1;
+            } else if (bMapped < aMapped) {
+                return 1;
+            } else {
+                return 0;
+            }
+        }).map((dataPoint) => {
+            const achievement = statisticsAchievements[dataPoint.type].find(achievement => {
+                return dataPoint.value >= achievement.value;
             });
 
+            return (
+                <Grid item xs={12} sm={4} key={dataPoint.type}>
+                    <Card style={{height: "100%"}}>
+                        <CardMedia component={StatisticsAward} achievement={achievement}/>
+                        <CardContent>
+                            {<Typography variant="body1" mb={2}>
+                                {achievement?.description || "No achievement yet"}
+                            </Typography>}
+
+                            <Typography sx={{fontSize: 14}} color="text.secondary" gutterBottom>
+                                {getFriendlyStatName(dataPoint)}
+                            </Typography>
+                            <Typography variant="h5" component="div">
+                                {getHumanReadableStatValue(dataPoint)}
+                            </Typography>
+                        </CardContent>
+                    </Card>
+                </Grid>
+            );
+        });
+
         return (
             <>
                 <Grid container spacing={2}>
@@ -190,4 +200,10 @@ const TotalStatistics = (): JSX.Element => {
     );
 };
 
+const SORT_ORDER = {
+    "time": 1,
+    "area": 2,
+    "count": 3
+};
+
 export default TotalStatistics;