Merge pull request #10 from lu0713/master

optimize rendering

Author: gracepark01

app/App.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import Splash from './components/Splash';
 import DashboardContainer from './containers/DashboardContainer';
 
-const App: React.FC = () => {
+const App: React.FC = React.memo(() => {
   // Disable splash for development
   // const [firstVisit, setFirstVisit] = useState(false);
 
@@ -11,6 +11,6 @@ const App: React.FC = () => {
 
   // Splash image on startup
   return firstVisit ? <Splash setFirstVisit={setFirstVisit} /> : <DashboardContainer />;
-};
+});
 
 export default App;

app/charts/DockerChart.tsx

@@ -22,7 +22,7 @@ interface IContainer {
  * Table that displays real-time Docker container information using the
  * latest data point available ???
  */
-const DockerStatsChart = () => {
+const DockerStatsChart = React.memo(() => {
   const { dockerData } = useContext(DockerContext);
 
   const {
@@ -57,6 +57,6 @@ const DockerStatsChart = () => {
       <span>Restart Count: {restartcount}</span>
     </div>
   ) : null;
-};
+});
 
 export default DockerStatsChart;

app/charts/LatencyChart.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import Plot from 'react-plotly.js';
 import { HealthContext } from '../context/HealthContext';
 
-const LatencyChart = () => {
+const LatencyChart = React.memo(() => {
   const { healthData } = useContext(HealthContext);
 
   const createChart = () => {
@@ -57,6 +57,6 @@ const LatencyChart = () => {
   };
 
   return <div className="chart">{createChart()}</div>;
-};
+});
 
 export default LatencyChart;

app/charts/MemoryChart.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import Plot from 'react-plotly.js';
 import { HealthContext } from '../context/HealthContext';
 
-const MemoryChart = () => {
+const MemoryChart = React.memo(() => {
   const { healthData } = useContext(HealthContext);
   const createChart = () => {
     const free: number[] = healthData.freememory;
@@ -67,6 +67,6 @@ const MemoryChart = () => {
   };
 
   return <div className="chart">{createChart()}</div>;
-};
+});
 
 export default MemoryChart;

app/charts/ProcessesChart.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import Plot from 'react-plotly.js';
 import { HealthContext } from '../context/HealthContext';
 
-const ProcessesChart = () => {
+const ProcessesChart = React.memo(() => {
   const { healthData } = useContext(HealthContext);
   const createChart = () => {
     const runningProcesses: Array<number> = healthData.runningprocesses;
@@ -71,6 +71,6 @@ const ProcessesChart = () => {
   };
 
   return <div className="chart">{createChart()}</div>;
-};
+});
 
 export default ProcessesChart;

app/charts/RequestTypesChart.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import Plot from 'react-plotly.js';
 import { CommsContext } from '../context/CommsContext';
 
-const RequestTypesChart: React.FC = () => {
+const RequestTypesChart: React.FC = React.memo(() => {
   const { commsData } = useContext(CommsContext);
 
   interface IObject {
@@ -78,6 +78,6 @@ const RequestTypesChart: React.FC = () => {
   };
 
   return <div className="chart">{createRequestChart()}</div>;
-};
+});
 
 export default RequestTypesChart;

app/charts/ResponseCodesChart.tsx

@@ -13,7 +13,7 @@ interface IObj {
   time: string;
 }
 
-const ResponseCodesChart: React.FC = () => {
+const ResponseCodesChart: React.FC = React.memo(() => {
   const { commsData } = useContext(CommsContext);
 
   const createChart = () => {
@@ -94,6 +94,6 @@ const ResponseCodesChart: React.FC = () => {
   };
 
   return <div className="chart">{createChart()}</div>;
-};
+});
 
 export default ResponseCodesChart;

app/charts/RouteChart.jsx

@@ -6,7 +6,7 @@ import { CommsContext } from '../context/CommsContext';
 // import { log } from 'console';
 import Graph from 'react-graph-vis';
 
-const RouteLocations = props => {
+const RouteLocations = React.memo(() => {
   const communicationsData = useContext(CommsContext).commsData;
   console.log('commdata=======>', communicationsData);
   console.log('try again');
@@ -136,7 +136,6 @@ const RouteLocations = props => {
   const options = {
     height: '300px',
     width: '300px',
-    style: 'surface',
     layout: {
       hierarchical: false
     },
@@ -168,6 +167,6 @@ const RouteLocations = props => {
       <Graph className={classes.paper} graph={graph} options={options} events={events} style={{ fontSize: '2px', color: '#555555', fontFamily: 'Open Sans', boxShadow: '3px 3px 6px 1px rgb(175, 175, 175)', backgroundColor: 'white', borderRadius: '3px' }} />
     </div>
   );
-};
+});
 
 export default RouteLocations;

app/charts/SpeedChart.tsx

@@ -3,7 +3,7 @@ import Plot from 'react-plotly.js';
 import { HealthContext } from '../context/HealthContext';
 import moment from 'moment';
 
-const SpeedChart = () => {
+const SpeedChart = React.memo(() => {
   const { healthData } = useContext(HealthContext);
   const { time, cpuspeed } = healthData;
   const yAxis = cpuspeed;
@@ -64,6 +64,6 @@ const SpeedChart = () => {
   };
 
   return <div className="chart">{createChart()}</div>;
-};
+});
 
 export default SpeedChart;

app/charts/TemperatureChart.tsx

@@ -3,7 +3,7 @@ import Plot from 'react-plotly.js';
 import moment from 'moment';
 import { HealthContext } from '../context/HealthContext';
 
-const TemperatureChart = () => {
+const TemperatureChart = React.memo(() => {
   const { healthData } = useContext(HealthContext);
   const { time, cputemp } = healthData;
 
@@ -69,6 +69,6 @@ const TemperatureChart = () => {
   };
 
   return <div className="chart">{createChart()}</div>;
-};
+});
 
 export default TemperatureChart;