Fixed re-renders of statistics chart list

src/components/InterfaceStatistics/DeviceStatisticsChart.js

@@ -2,20 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Chart from 'react-apexcharts';
 
-const DeviceStatisticsChart = ({ data, options }) => (
+const DeviceStatisticsChart = ({ chart }) => (
   <div style={{ height: '360px' }}>
-    <Chart series={data} options={options} type="line" height="100%" />
+    <Chart series={chart.data} options={chart.options} type="line" height="100%" />
   </div>
 );
 
 DeviceStatisticsChart.propTypes = {
-  data: PropTypes.instanceOf(Array),
+  chart: PropTypes.instanceOf(Object).isRequired,
-  options: PropTypes.instanceOf(Object),
-};
-
-DeviceStatisticsChart.defaultProps = {
-  data: [],
-  options: {},
 };
 
 export default DeviceStatisticsChart;

src/components/InterfaceStatistics/StatisticsChartList.js

@@ -5,11 +5,11 @@ import { v4 as createUuid } from 'uuid';
 import axiosInstance from 'utils/axiosInstance';
 import { getToken } from 'utils/authHelper';
 import { unixToTime, capitalizeFirstLetter } from 'utils/helper';
+import eventBus from 'utils/eventBus';
 import DeviceStatisticsChart from './DeviceStatisticsChart';
 
-const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => {
+const StatisticsChartList = ({ selectedDeviceId }) => {
   const { t } = useTranslation();
-  const [loading, setLoading] = useState(false);
   const [statOptions, setStatOptions] = useState({
     interfaceList: [],
     settings: {},
@@ -68,7 +68,6 @@ const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => {
       }
     }
 
-
     const options = {
       chart: {
         id: 'chart',
@@ -106,15 +105,13 @@ const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => {
       interfaceList,
       settings: options,
     };
+
     if (statOptions !== newOptions) {
       setStatOptions(newOptions);
     }
   };
 
   const getStatistics = () => {
-    if (!loading) {
-      setLoading(true);
-
       const options = {
         headers: {
           Accept: 'application/json',
@@ -130,11 +127,7 @@ const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => {
         .then((response) => {
           transformIntoDataset(response.data.data);
         })
-        .catch(() => {})
+        .catch(() => {});
-        .finally(() => {
-          setLoading(false);
-        });
-    }
   };
 
   useEffect(() => {
@@ -144,42 +137,41 @@ const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => {
   }, [selectedDeviceId]);
 
   useEffect(() => {
-    if (!loading && lastRefresh !== '' && selectedDeviceId) {
+    eventBus.on('refreshInterfaceStatistics', () => getStatistics());
-      getStatistics();
+
-    }
+    return () => {
-  }, [lastRefresh]);
+      eventBus.remove('refreshInterfaceStatistics');
+    };
+  }, []);
 
   return (
     <div>
-      {statOptions.interfaceList.map((data) => (
+      {statOptions.interfaceList.map((data) => {
-        <div key={createUuid()}>
+        const options = {
-          <DeviceStatisticsChart
+          data,
-            key={createUuid()}
+          options: {
-            data={data}
+            ...statOptions.settings,
-            options={{
+            title: {
-              ...statOptions.settings,
+              text: capitalizeFirstLetter(data[0].titleName),
-              title: {
+              align: 'left',
-                text: capitalizeFirstLetter(data[0].titleName),
+              style: {
-                align: 'left',
+                fontSize: '25px',
-                style: {
-                  fontSize: '25px',
-                },
               },
-            }}
+            },
-          />
+          }
-        </div>
+        }
-      ))}
+        return (
+          <div key={createUuid()}>
+            <DeviceStatisticsChart chart={ options } />
+          </div>
+        );
+      })}
     </div>
   );
 };
 
 StatisticsChartList.propTypes = {
-  lastRefresh: PropTypes.string,
   selectedDeviceId: PropTypes.string.isRequired,
 };
 
-StatisticsChartList.defaultProps = {
-  lastRefresh: '',
-};
-
 export default React.memo(StatisticsChartList);

src/components/InterfaceStatistics/index.js

@@ -14,13 +14,13 @@ import {
 } from '@coreui/react';
 import { cilOptions } from '@coreui/icons';
 import CIcon from '@coreui/icons-react';
+import eventBus from 'utils/eventBus';
 import StatisticsChartList from './StatisticsChartList';
 import LatestStatisticsModal from './LatestStatisticsModal';
 import styles from './index.module.scss';
 
 const DeviceStatisticsCard = ({ selectedDeviceId }) => {
   const { t } = useTranslation();
-  const [lastRefresh, setLastRefresh] = useState(new Date().toString());
   const [showLatestModal, setShowLatestModal] = useState(false);
 
   const toggleLatestModal = () => {
@@ -28,7 +28,7 @@ const DeviceStatisticsCard = ({ selectedDeviceId }) => {
   };
 
   const refresh = () => {
-    setLastRefresh(new Date().toString());
+    eventBus.dispatch('refreshInterfaceStatistics', { message: 'Refresh interface statistics' });
   };
 
   return (
@@ -55,7 +55,7 @@ const DeviceStatisticsCard = ({ selectedDeviceId }) => {
           </CRow>
         </CCardHeader>
         <CCardBody className={styles.statsBody}>
-          <StatisticsChartList selectedDeviceId={selectedDeviceId} lastRefresh={lastRefresh} />
+          <StatisticsChartList selectedDeviceId={selectedDeviceId} />
         </CCardBody>
       </CCard>
       <LatestStatisticsModal