add line chart and progress

client/src/pages/system/LineChart.tsx

@@ -0,0 +1,110 @@
+
+import { makeStyles, Theme } from '@material-ui/core';
+
+const getStyles = makeStyles((theme: Theme) => ({
+  root: {
+    transform: 'scaleY(-1)',
+  },
+  ycoord: {
+    cursor: 'pointer',
+
+    "& circle": {
+      transition: 'all .25s',
+    },
+
+    "&:hover, &:focus": {
+      "& line": {
+        transition: 'all .25s',
+        opacity: 1,
+      },
+    },
+
+    "&:hover": {
+      "& circle": {
+        fill: '#06AFF2',
+      },
+    },
+
+    "&:focus": {
+      outline: 'none',
+
+      "& circle": {
+        fill: '#06F3AF',
+      },
+    },
+  }
+}));
+
+const LineChart = (props: any) => {
+  const fullHeight = 100;
+  const fullWidth = 300;
+  const step = 30;
+  const classes = getStyles();
+  // const { nodes } = props;
+  const nodes = [
+    {
+      percent: 90,
+      value: 2000,
+      timestamp: 1629947929204,
+    },
+
+    {
+      percent: 30,
+      value: 2000,
+      timestamp: 1629947329204,
+    },
+
+    {
+      percent: 50,
+      value: 2000,
+      timestamp: 1629947129204,
+    },
+
+    {
+      percent: 80,
+      value: 2000,
+      timestamp: 1629947129204,
+    },
+
+    {
+      percent: 30,
+      value: 2000,
+      timestamp: 1629947129204,
+    },
+
+    {
+      percent: 20,
+      value: 2000,
+      timestamp: 1629947129204,
+    },
+  ];
+
+  return (
+    <svg className={classes.root} width="300" height="100" viewBox="0 0 300 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+      {
+        nodes.map((node, index) => {
+          const x1 = fullWidth - (nodes.length - index + 1) * step;
+          const y1 = node.percent;
+          let line = null;
+          if (index < nodes.length - 1) {
+            const x2 = fullWidth - (nodes.length - index) * step;
+            const y2 = nodes[index + 1]['percent'];
+            line = <line x1={x1} y1={y1} x2={x2} y2={y2} stroke="#06AFF2" />;
+          }
+          return (
+            <g>
+              {line}
+              <g className={classes.ycoord} tabIndex={0}>
+                <circle cx={x1} cy={y1} r={3} fill="white" stroke="#06AFF2" />
+                <rect opacity="0" x={x1 - 5} y={0} width="10" height={fullHeight} fill="#E9E9ED" />
+                <line opacity="0" x1={x1} y1={0} x2={x1} y2={fullWidth} stroke="#06AFF2" stroke-dasharray="2.5" />
+              </g>
+            </g>
+          )
+        })
+      }
+    </svg >
+  );
+};
+
+export default LineChart;

client/src/pages/system/Progress.tsx

@@ -0,0 +1,37 @@
+
+import { makeStyles, Theme } from '@material-ui/core';
+
+const getStyles = makeStyles((theme: Theme) => ({
+  root: {
+    transform: 'scaleY(-1)',
+  },
+  ycoord: {
+    cursor: 'pointer',
+
+    "&:hover": {
+      "& line": {
+        transition: 'all .25s',
+        opacity: 1,
+      },
+
+      "& circle": {
+        transition: 'all .25s',
+        fill: '#06AFF2',
+      },
+    },
+  }
+}));
+
+const Progress = (props: any) => {
+  const classes = getStyles();
+  const { percent = 0, color = '#06F3AF' } = props;
+
+  return (
+    <svg className={classes.root} width="300" height="100" viewBox="0 0 300 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <line x1={10} y1={50} x2={250} y2={50} stroke-width="12" stroke="#AEAEBB" stroke-linecap="round" />
+      <line x1={10} y1={50} x2={250 * percent / 100} y2={50} stroke-width="12" stroke={color} stroke-linecap="round" />
+    </svg >
+  );
+};
+
+export default Progress;

client/src/pages/system/SystemView.tsx

@@ -1,12 +1,18 @@
 import { useNavigationHook } from '../../hooks/Navigation';
 import { ALL_ROUTER_TYPES } from '../../router/Types';
 import Topo from './Topology';
+import LineChart from './LineChart';
+import Progress from './Progress';
 
 const SystemView = () => {
   useNavigationHook(ALL_ROUTER_TYPES.SYSTEM);
 
   return (
     <div>
+
+      <Progress percent={50} color={"#06F3AF"} />
+      <Progress percent={90} color={"#635DCE"} />
+      <LineChart />
       <Topo />
     </div>
   );

client/src/pages/system/Topology.tsx

@@ -1,6 +1,6 @@
 
 import { useEffect, useState } from 'react';
-import { makeStyles, Theme, Link } from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core';
 
 const getStyles = makeStyles((theme: Theme) => ({
   rootNode: {
@@ -19,7 +19,7 @@ const getStyles = makeStyles((theme: Theme) => ({
 
     '&:hover, &:focus': {
       transform: 'scale(1.1)',
-      filter: 'drop-shadow(3px 3px 5px rgba(0, 0, 0, .5))',
+      filter: 'drop-shadow(3px 3px 5px rgba(0, 0, 0, .2))',
     },
 
     '&:focus': {
@@ -51,7 +51,7 @@ const getStyles = makeStyles((theme: Theme) => ({
 
     '&:hover, &:focus': {
       transform: 'scale(1.1)',
-      filter: 'drop-shadow(3px 3px 5px rgba(0, 0, 0, .5))',
+      filter: 'drop-shadow(3px 3px 5px rgba(0, 0, 0, .2))',
     },
 
     '&:focus': {
@@ -87,7 +87,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     '&:hover, &:focus': {
       transform: 'scale(1.05)',
       transformOrigin: 'center',
-      filter: 'drop-shadow(3px 3px 5px rgba(0, 0, 0, .5))',
+      filter: 'drop-shadow(3px 3px 5px rgba(0, 0, 0, .2))',
 
       "& rect": {
         opacity: 0,
@@ -98,8 +98,6 @@ const getStyles = makeStyles((theme: Theme) => ({
         transform: 'translate(-40px, -77px) scale(3)',
       },
     },
-
-
   }
 }));
 
@@ -123,6 +121,7 @@ const Topo = (props: any) => {
       name: 'storage',
       nodes: 1902
     },
+
   ]
 
   const capitalize = (s: string) => {
@@ -160,7 +159,7 @@ const Topo = (props: any) => {
           const nodeCenterX = 300 + 150 * Math.cos(angle);
           const nodeCenterY = 300 + 150 * Math.sin(angle);
 
-          const childAngle = (360 * index / nodes.length + 30) * Math.PI / 180;
+          const childAngle = (360 * index / nodes.length + 35) * Math.PI / 180;
           const childNodeCenterX = 300 + 250 * Math.cos(childAngle);
           const childNodeCenterY = 300 + 250 * Math.sin(childAngle);
 
@@ -214,8 +213,8 @@ const Topo = (props: any) => {
               <line x1={nodeCenterX} y1={nodeCenterY} x2={childNodeCenterX} y2={childNodeCenterY} stroke="#06AFF2" />
               <g className={classes.childNode} tabIndex={0}>
                 <circle cx={nodeCenterX} cy={nodeCenterY} r="40" fill="white" stroke="#06AFF2" />
-                {icon && <svg x={nodeCenterX - 12} y={nodeCenterY - 25} width="25" height="25" viewBox="0 0 25 25" preserveAspectRatio="none">{icon}</svg>}
-                <text fontFamily="Roboto" textAnchor="middle" fill="#06AFF2" fontWeight="700" fontSize="16" x={nodeCenterX} y={nodeCenterY + 20}>{capitalize(node.name)}</text>
+                {icon && <svg x={nodeCenterX - 12} y={nodeCenterY - 20} width="25" height="25" viewBox="0 0 25 25" preserveAspectRatio="none">{icon}</svg>}
+                <text fontFamily="Roboto" textAnchor="middle" fill="#06AFF2" fontWeight="700" fontSize="16" x={nodeCenterX} y={nodeCenterY + 18}>{capitalize(node.name)}</text>
               </g>
 
               <svg tabIndex={0} width="60" height="60" viewBox="0 0 60 60" x={childNodeCenterX - 30} y={childNodeCenterY - 30} className={classes.subChild} >