Modifications of stats card

src/containers/TheFooter.js

@@ -3,7 +3,7 @@ import { CFooter } from '@coreui/react';
 
 const TheFooter = () => (
   <CFooter fixed={false}>
-    <div>Version 0.0.5</div>
+    <div>Version 0.0.6</div>
     <div className="mfs-auto">
       <span className="mr-1">Powered by</span>
       <a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">

src/pages/DevicePage/DeviceStatistics/DeviceStatisticsCard.js

@@ -1,20 +1,50 @@
-import React from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import { 
     CCard, 
     CCardHeader, 
-    CCardBody
+    CCardBody,
+    CPopover,
+    CRow,
+    CCol
 } from '@coreui/react';
+import { cilSync } from '@coreui/icons';
+import CIcon from '@coreui/icons-react';
 import StatisticsChartList from './StatisticsChartList';
 
-const DeviceStatisticsCard = ({ selectedDeviceId }) => (
-    <CCard>
-        <CCardHeader>Device Statistics</CCardHeader>
-        <CCardBody style={{padding: '5%'}}>
-            <StatisticsChartList selectedDeviceId={selectedDeviceId}/>
-        </CCardBody>
-    </CCard>
-);
+const DeviceStatisticsCard = ({ selectedDeviceId }) => {
+    const [lastRefresh, setLastRefresh] = useState('');
+
+    const refresh = () => {
+        setLastRefresh(new Date().toString());
+    }
+
+    return (
+        <CCard>
+            <CCardHeader>
+                <CRow>
+                    <CCol>
+                        Statistics
+                    </CCol>
+                    <CCol style={{textAlign: 'right'}}>
+                        <CPopover content="Refresh">
+                            <CIcon 
+                                onClick={() => refresh()}
+                                name="cil-sync" 
+                                content={cilSync} 
+                                size="lg"
+                                color='primary'
+                            />
+                        </CPopover>
+                    </CCol>
+                </CRow>
+            </CCardHeader>
+            <CCardBody style={{padding: '5%'}}>
+                <StatisticsChartList selectedDeviceId={selectedDeviceId} lastRefresh={lastRefresh}/>
+            </CCardBody>
+        </CCard>
+    );
+};
 
 DeviceStatisticsCard.propTypes = {
     selectedDeviceId: PropTypes.string.isRequired,

src/pages/DevicePage/DeviceStatistics/StatisticsChartList.js

@@ -4,9 +4,9 @@ import { v4 as createUuid } from 'uuid';
 import DeviceStatisticsChart from './DeviceStatisticsChart';
 import axiosInstance from '../../../utils/axiosInstance';
 import { getToken } from '../../../utils/authHelper';
-import { unixToTime } from '../../../utils/helper';
+import { unixToTime, capitalizeFirstLetter } from '../../../utils/helper';
 
-const StatisticsChartList = ({ selectedDeviceId }) => {
+const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => {
     const [loading, setLoading] = useState(false);
     const [deviceStats, setStats] = useState([]);
     const [statOptions, setStatOptions] = useState({});
@@ -31,12 +31,14 @@ const StatisticsChartList = ({ selectedDeviceId }) => {
                 if(interfaceTypes[logInterface.name] === undefined) {
                     interfaceTypes[logInterface.name] = i;
                     interfaceList.push([{
+                        titleName: logInterface.name,
                         name: 'Tx',
                         backgroundColor: 'rgb(228,102,81,0.9)',
                         data: [],
                         fill: false
                     },
                     {
+                        titleName: logInterface.name,
                         name: 'Rx',
                         backgroundColor: 'rgb(0,216,255,0.9)',
                         data: [],
@@ -51,17 +53,8 @@ const StatisticsChartList = ({ selectedDeviceId }) => {
         for (const log of sortedData){
             // Looping through the interfaces of the log
             for (const inter of log.data.interfaces){
-                if(inter.name === 'up'){
-                    interfaceList[0][0].data.push(inter.counters.tx_bytes);
-                    interfaceList[0][1].data.push(inter.counters.rx_bytes);
-                }
-                if(inter.name === 'down'){
-                    interfaceList[1][0].data.push(inter.counters.tx_bytes);
-                    interfaceList[1][1].data.push(inter.counters.rx_bytes);
-                }
-
-                /* interfaceList[interfaceTypes[inter.name]][0].data.push(inter.counters.tx_bytes);
-                interfaceList[interfaceTypes[inter.name]][1].data.push(inter.counters.rx_bytes); */
+                interfaceList[interfaceTypes[inter.name]][0].data.push(inter.counters.tx_bytes);
+                interfaceList[interfaceTypes[inter.name]][1].data.push(inter.counters.rx_bytes);
             }
         }
 
@@ -69,28 +62,36 @@ const StatisticsChartList = ({ selectedDeviceId }) => {
             chart: {
                 id: 'chart',
                 group: 'txrx'
-              },
+            },
             xaxis: {
                 title: {
-                    text: 'Time'
+                    text: 'Time',
+                    style: {
+                        fontSize: '15px'
+                    },
                 },
-                categories
+                categories,
+                tickAmount:20
             },
             yaxis: {
+                labels: {
+                    minWidth: 40
+                },
                 title: {
-                    text: 'Data (KB)'
-                }
+                    text: 'Data (KB)',
+                    style: {
+                        fontSize: '15px'
+                    },
+                },
             },
             legend: {
                 position: 'top',
                 horizontalAlign: 'right',
-                floating: true,
-                offsetY: -20,
-                offsetX: -5
-            }
+                float: true
+            },
+            
         };
 
-        console.log(interfaceList);
         setStatOptions(options);
         setStats(interfaceList);
     }
@@ -126,12 +127,33 @@ const StatisticsChartList = ({ selectedDeviceId }) => {
         }
     }, [selectedDeviceId]);
 
+    useEffect(() => {
+        if (lastRefresh !== '' && selectedDeviceId){
+            getStatistics();
+        }
+    }, [lastRefresh])
+
 
     return (
         <div>
             {
                 deviceStats.map(
-                    (data) =>  <div key={createUuid()}><DeviceStatisticsChart key={createUuid()} data={data} options={statOptions} /></div>
+                    (data) => 
+                    <div key={createUuid()}>
+                        <DeviceStatisticsChart 
+                            key={createUuid()} 
+                            data={data} 
+                            options={{
+                                ...statOptions, 
+                                title: {
+                                    text: capitalizeFirstLetter(data[0].titleName),
+                                    align: 'left',
+                                    style: {
+                                        fontSize: '25px'
+                                    },
+                                }
+                            }} />
+                    </div>
                 )
             }
         </div>
@@ -139,7 +161,12 @@ const StatisticsChartList = ({ selectedDeviceId }) => {
 }
 
 StatisticsChartList.propTypes = {
+    lastRefresh: PropTypes.string,
     selectedDeviceId: PropTypes.string.isRequired,
 };
 
+StatisticsChartList.defaultProps = {
+    lastRefresh: ''
+}
+
 export default StatisticsChartList;

src/utils/helper.js

@@ -63,3 +63,6 @@ export const unixToTime = (dateString) => {
 }
 
 export const dateToUnix = (date) => Math.floor(new Date(date).getTime() / 1000);
+
+export const capitalizeFirstLetter = (string) => string.charAt(0).toUpperCase() + string.slice(1);
+