FIX: responsive chart

bisohns · Jan 5, 2023 · c3f6aae · c3f6aae
1 parent 37f5013
commit c3f6aae
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 34 deletions.
diff --git a/web/src/index.css b/web/src/index.css
@@ -28,4 +28,13 @@ code {
   display: grid;
   grid-gap: 10px;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+pre { 
+	margin: 20px; padding: 20px; 
+	color: #aaa; background-color: #222;
+	white-space: pre; text-shadow: 0 1px 0 #000;
+	border-radius: 15px; border-bottom: 1px solid #555;
+	box-shadow: 0 1px 5px rgba(0,0,0,0.4) inset, 0 0 20px rgba(0,0,0,0.2) inset;
+	font: 16px/24px 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
 }
diff --git a/web/src/server/ServerDetailServicesTabPaneCustom.tsx b/web/src/server/ServerDetailServicesTabPaneCustom.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { ServerServiceNameType } from './ServerType';
+import React from "react";
+import { ServerServiceNameType } from "./ServerType";
 
 interface ServerDetailServicesTabPanelLoadAvgType {
   serverName: ServerServiceNameType;
@@ -10,7 +10,7 @@ interface ServerDetailServicesTabPanelLoadAvgType {
 export default function ServerDetailServicesTabPanelCustom(
   props: ServerDetailServicesTabPanelLoadAvgType
 ) {
-    const { serverData } = props;
+  const { serverData } = props;
 
   if (serverData.Error) {
     return (
@@ -23,7 +23,9 @@ export default function ServerDetailServicesTabPanelCustom(
   return (
     <div>
       <h1>{serverData.Message.Data.Command}</h1>
-      <pre className="text-white bg-black p-4">{serverData.Message?.Data?.Output}</pre>
+      <pre className="text-white bg-black p-4">
+        {serverData.Message?.Data?.Output}
+      </pre>
     </div>
   );
 }
diff --git a/web/src/server/ServerDetailServicesTabPanelDisk.tsx b/web/src/server/ServerDetailServicesTabPanelDisk.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import styled from '@emotion/styled';
+import React from "react";
+import styled from "@emotion/styled";
 import {
   BarChart,
   Bar,
@@ -8,13 +8,14 @@ import {
   CartesianGrid,
   Tooltip,
   Legend,
-} from 'recharts';
+  ResponsiveContainer,
+} from "recharts";
 
 import {
   DiskData,
   ServerResponseType,
   ServerServiceNameType,
-} from './ServerType';
+} from "./ServerType";
 
 interface ServerDetailServicesTabPanelDiskType {
   serverName: ServerServiceNameType;
@@ -36,19 +37,18 @@ export default function ServerDetailServicesTabPanelDisk(
 
   return (
     <Div>
-      {
-        /* <ServicesTabPanel /> */
-        <BarChart width={900} height={500} data={Data}>
-          <CartesianGrid strokeDasharray='3 3' />
-          <XAxis dataKey='FileSystem' />
+      <ResponsiveContainer width="100%" height={500}>
+        <BarChart data={Data}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="FileSystem" />
           <YAxis />
           <Tooltip />
           <Legend />
-          <Bar dataKey='Available' fill='#8884d8' />
-          <Bar dataKey='Used' fill='red' />
-          <Bar dataKey='Size' fill='green' />
+          <Bar dataKey="Available" fill="#8884d8" />
+          <Bar dataKey="Used" fill="red" />
+          <Bar dataKey="Size" fill="green" />
         </BarChart>
-      }
+      </ResponsiveContainer>
     </Div>
   );
 }
diff --git a/web/src/server/ServerDetailServicesTabPanelLoadAvg.tsx b/web/src/server/ServerDetailServicesTabPanelLoadAvg.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styled from '@emotion/styled';
+import styled from "@emotion/styled";
 import {
   BarChart,
   Bar,
@@ -8,9 +8,14 @@ import {
   CartesianGrid,
   Tooltip,
   Legend,
-} from 'recharts';
+  ResponsiveContainer,
+} from "recharts";
 
-import { LoadingAvgData, ServerResponseType, ServerServiceNameType } from "./ServerType";
+import {
+  LoadingAvgData,
+  ServerResponseType,
+  ServerServiceNameType,
+} from "./ServerType";
 
 interface ServerDetailServicesTabPanelLoadAvgType {
   serverName: ServerServiceNameType;
@@ -24,7 +29,6 @@ const Div = styled.div`
 export default function ServerDetailServicesTabPanelLoadAvg(
   props: ServerDetailServicesTabPanelLoadAvgType
 ) {
-
   const {
     serverData: {
       Message: { Data },
@@ -33,18 +37,18 @@ export default function ServerDetailServicesTabPanelLoadAvg(
 
   return (
     <Div>
-      {
+      <ResponsiveContainer width="100%" height={500}>
         <BarChart width={900} height={500} data={[Data]}>
-          <CartesianGrid strokeDasharray='3 3' />
-          <XAxis dataKey='Name' />
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="Name" />
           <YAxis />
           <Tooltip />
           <Legend />
-          <Bar dataKey='Load1M' fill='#8884d8' />
-          <Bar dataKey='Load5M' fill='red' />
-          <Bar dataKey='Load15M' fill='green' />
+          <Bar dataKey="Load1M" fill="#8884d8" />
+          <Bar dataKey="Load5M" fill="red" />
+          <Bar dataKey="Load15M" fill="green" />
         </BarChart>
-      }
+      </ResponsiveContainer>
     </Div>
   );
 }
diff --git a/web/src/server/ServerDetailServicesTabPanelMemory.tsx b/web/src/server/ServerDetailServicesTabPanelMemory.tsx
@@ -8,6 +8,7 @@ import {
   CartesianGrid,
   Tooltip,
   Legend,
+  ResponsiveContainer,
 } from "recharts";
 import {
   MemoryData,
@@ -34,10 +35,8 @@ export default function ServerDetailServicesTabPanelMemory(
   } = props;
   return (
     <Div>
-      {
-        /* <ServicesTabPanel /> */
-        // <ResponsiveContainer width='100%' height='100%'>
-        <BarChart width={900} height={500} data={[Data]}>
+      <ResponsiveContainer width="100%" height={500}>
+        <BarChart data={[Data]}>
           <CartesianGrid strokeDasharray="3 3" />
           <XAxis dataKey="FileSystem" />
           <YAxis />
@@ -48,8 +47,7 @@ export default function ServerDetailServicesTabPanelMemory(
           <Bar dataKey="SwapFree" fill="#bc5090" />
           <Bar dataKey="SwapTotal" fill="#ff6361" />
         </BarChart>
-        // </ResponsiveContainer>
-      }
+      </ResponsiveContainer>
     </Div>
   );
 }