feat: scrollable timechart graph on dashboard page

dagu-org · Jul 26, 2022 · cd57e36 · cd57e36
1 parent 406c84a
commit cd57e36
Showing 1 changed file with 54 additions and 41 deletions.
diff --git a/admin/src/components/DashboardTimechart.tsx b/admin/src/components/DashboardTimechart.tsx
@@ -1,3 +1,4 @@
+import { Box } from '@mui/material';
 import moment from 'moment';
 import React from 'react';
 import {
@@ -34,13 +35,15 @@ function DashboardTimechart({ data: input }: Props) {
         const end = status.FinishedAt;
         let to = now.unix();
         if (end && end != '-') {
-          to = moment(end).unix();
+          to = moment(end).unix() - 1000 + Math.random() * 1000 + 3000;
+        }
+        for (let i = 0; i < 30; i++) {
+          ret.push({
+            name: status.Name,
+            status: status.Status,
+            values: [moment(start).unix() - 4000 + Math.random() * 3000, to],
+          });
         }
-        ret.push({
-          name: status.Name,
-          status: status.Status,
-          values: [moment(start).unix(), to],
-        });
       }
     });
     const sorted = ret.sort((a, b) => {
@@ -50,42 +53,52 @@ function DashboardTimechart({ data: input }: Props) {
   }, [input]);
   const now = moment();
   return (
-    <ResponsiveContainer width="100%" height="90%">
-      <BarChart data={data} layout="vertical">
-        <XAxis
-          name="Time"
-          tickFormatter={(unixTime) => moment.unix(unixTime).format('HH:mm')}
-          type="number"
-          dataKey="values"
-          tickCount={96}
-          domain={[now.startOf('day').unix(), now.endOf('day').unix()]}
-        />
-        <YAxis dataKey="name" type="category" hide />
-        <Bar background dataKey="values" fill="lightblue" minPointSize={2}>
-          {data.map((_, index) => {
-            const color = statusColorMapping[data[index].status];
-            return <Cell key={index} fill={color.backgroundColor} />;
-          })}
-          <LabelList
-            dataKey="name"
-            position="insideLeft"
-            content={({ x, y, width, height, value }: LabelProps) => {
-              return (
-                <text
-                  x={Number(x) + Number(width) + 2}
-                  y={Number(y) + (Number(height) || 0) / 2}
-                  fill="#000"
-                  fontSize={12}
-                  textAnchor="start"
-                >
-                  {value}
-                </text>
-              );
-            }}
+    <Box
+      sx={{
+        maxHeight: '100vh',
+        minHeight: '50vh',
+        width: '100%',
+        maxWidth: '100%',
+        overflow: 'auto',
+      }}
+    >
+      <ResponsiveContainer width="100%" minHeight={data.length * 10}>
+        <BarChart data={data} layout="vertical">
+          <XAxis
+            name="Time"
+            tickFormatter={(unixTime) => moment.unix(unixTime).format('HH:mm')}
+            type="number"
+            dataKey="values"
+            tickCount={96}
+            domain={[now.startOf('day').unix(), now.endOf('day').unix()]}
           />
-        </Bar>
-      </BarChart>
-    </ResponsiveContainer>
+          <YAxis dataKey="name" type="category" hide />
+          <Bar background dataKey="values" fill="lightblue" minPointSize={2}>
+            {data.map((_, index) => {
+              const color = statusColorMapping[data[index].status];
+              return <Cell key={index} fill={color.backgroundColor} />;
+            })}
+            <LabelList
+              dataKey="name"
+              position="insideLeft"
+              content={({ x, y, width, height, value }: LabelProps) => {
+                return (
+                  <text
+                    x={Number(x) + Number(width) + 2}
+                    y={Number(y) + (Number(height) || 0) / 2}
+                    fill="#000"
+                    fontSize={12}
+                    textAnchor="start"
+                  >
+                    {value}
+                  </text>
+                );
+              }}
+            />
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+    </Box>
   );
 }