Version 2.5.24

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "2.5.23",
+  "version": "2.5.24",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "2.5.23",
+      "version": "2.5.24",
       "dependencies": {
         "@coreui/coreui": "^3.4.0",
         "@coreui/icons": "^2.0.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.5.23",
+  "version": "2.5.24",
   "dependencies": {
     "@coreui/coreui": "^3.4.0",
     "@coreui/icons": "^2.0.1",

src/components/InterfaceStatistics/StatisticsChartList.js

@@ -5,10 +5,16 @@ import { useTranslation } from 'react-i18next';
 import { v4 as createUuid } from 'uuid';
 import axiosInstance from 'utils/axiosInstance';
 import { useAuth, useDevice } from 'ucentral-libs';
-import { capitalizeFirstLetter, dateToUnix, prettyDate } from 'utils/helper';
+import {
+  capitalizeFirstLetter,
+  datesSameDay,
+  dateToUnix,
+  prettyDate,
+  unixToTime,
+} from 'utils/helper';
 import DeviceStatisticsChart from './DeviceStatisticsChart';
 
-const StatisticsChartList = ({ setOptions, section, start, end, setStart, setEnd, refreshId }) => {
+const StatisticsChartList = ({ setOptions, section, setStart, setEnd, time }) => {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const { currentToken, endpoints } = useAuth();
@@ -25,20 +31,18 @@ const StatisticsChartList = ({ setOptions, section, start, end, setStart, setEnd
       if (b.recorded > a.recorded) return -1;
       return 0;
     });
+
     const dataLength = sortedData.length;
-
-    console.log(dataLength);
-
     if (dataLength > 1000 && dataLength < 3000) {
       sortedData = sortedData.filter((dat, index) => index % 4 === 0);
     } else if (dataLength >= 3000 && dataLength < 5000) {
-      sortedData = sortedData.filter((dat, index) => index % 6 === 0);
-    } else if (dataLength >= 5000 && dataLength < 7000) {
       sortedData = sortedData.filter((dat, index) => index % 8 === 0);
+    } else if (dataLength >= 5000 && dataLength < 7000) {
+      sortedData = sortedData.filter((dat, index) => index % 12 === 0);
+    } else if (dataLength > 7000) {
+      sortedData = sortedData.filter((dat, index) => index % 20 === 0);
     }
 
-    console.log(sortedData.length);
-
     // Looping through data to build our memory graph data
     const memoryUsed = [
       {
@@ -77,10 +81,14 @@ const StatisticsChartList = ({ setOptions, section, start, end, setStart, setEnd
     const interfaceList = [];
     const categories = [];
     let i = 0;
+    const areSameDay = datesSameDay(
+      new Date(sortedData[0].recorded * 1000),
+      new Date(sortedData[sortedData.length - 1].recorded * 1000),
+    );
 
     // Just building the array for all the interfaces
     for (const log of sortedData) {
-      categories.push(prettyDate(log.recorded));
+      categories.push(areSameDay ? unixToTime(log.recorded) : prettyDate(log.recorded));
       for (const logInterface of log.data.interfaces) {
         if (interfaceTypes[logInterface.name] === undefined) {
           interfaceTypes[logInterface.name] = i;
@@ -133,7 +141,7 @@ const StatisticsChartList = ({ setOptions, section, start, end, setStart, setEnd
           },
         },
         categories,
-        tickAmount: 20,
+        tickAmount: areSameDay ? 15 : 10,
       },
       yaxis: {
         labels: {
@@ -161,6 +169,7 @@ const StatisticsChartList = ({ setOptions, section, start, end, setStart, setEnd
         curve: 'smooth',
       },
       xaxis: {
+        tickAmount: areSameDay ? 15 : 10,
         title: {
           text: 'Time',
           style: {
@@ -250,9 +259,9 @@ const StatisticsChartList = ({ setOptions, section, start, end, setStart, setEnd
     };
 
     let extraParams = '';
-    if (start !== null && end !== null) {
-      const utcStart = new Date(start).toISOString();
-      const utcEnd = new Date(end).toISOString();
+    if (time.start !== null && time.end !== null) {
+      const utcStart = new Date(time.start).toISOString();
+      const utcEnd = new Date(time.end).toISOString();
       options.params.startDate = dateToUnix(utcStart);
       options.params.endDate = dateToUnix(utcEnd);
       options.params.limit = 10000;
@@ -276,7 +285,7 @@ const StatisticsChartList = ({ setOptions, section, start, end, setStart, setEnd
     if (deviceSerialNumber) {
       getStatistics();
     }
-  }, [deviceSerialNumber, refreshId]);
+  }, [deviceSerialNumber, time.refreshId]);
 
   if (loading) {
     return (
@@ -317,15 +326,9 @@ const StatisticsChartList = ({ setOptions, section, start, end, setStart, setEnd
 StatisticsChartList.propTypes = {
   setOptions: PropTypes.func.isRequired,
   section: PropTypes.string.isRequired,
-  start: PropTypes.instanceOf(Date),
-  end: PropTypes.instanceOf(Date),
+  time: PropTypes.instanceOf(Object).isRequired,
   setStart: PropTypes.func.isRequired,
   setEnd: PropTypes.func.isRequired,
-  refreshId: PropTypes.string.isRequired,
-};
-StatisticsChartList.defaultProps = {
-  start: null,
-  end: null,
 };
 
 export default React.memo(StatisticsChartList);

src/components/InterfaceStatistics/index.js

@@ -27,7 +27,7 @@ const DeviceStatisticsCard = () => {
   const [startError, setStartError] = useState(false);
   const [end, setEnd] = useState(null);
   const [endError, setEndError] = useState(false);
-  const [refreshId, setRefreshId] = useState('1');
+  const [time, setTime] = useState({ refreshId: '0', start: null, end: null });
 
   const toggleLatestModal = () => {
     setShowLatestModal(!showLatestModal);
@@ -60,7 +60,7 @@ const DeviceStatisticsCard = () => {
   };
 
   const refresh = () => {
-    setRefreshId(createUuid());
+    setTime({ refreshId: createUuid(), start, end });
   };
 
   useEffect(() => {
@@ -131,11 +131,9 @@ const DeviceStatisticsCard = () => {
           <StatisticsChartList
             setOptions={setOptions}
             section={section}
-            start={start}
-            end={end}
+            time={time}
             setStart={setStart}
             setEnd={setEnd}
-            refreshId={refreshId}
           />
         </CCardBody>
       </CCard>

src/utils/helper.js

@@ -124,3 +124,5 @@ export const testRegex = (value, regexString) => {
   const regex = new RegExp(regexString);
   return regex.test(value);
 };
+
+export const datesSameDay = (first, second) => first.getDate() === second.getDate();