Add timelet in plot data

src/Components/Map/Map.module.scss

+.timelet {
+  padding: 5px;
+  background: rgba(255, 255, 255, 0.9);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  font-size: 10px;
+}

src/Components/Map/Map.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Plot from 'react-plotly.js';
 import { Data, Layout } from 'plotly.js';
 import {auroraDataToGraphData} from '../../repositories/auroraData';
+import MapStyle from './Map.module.scss';
 
 interface iPlotState {
   data?: Data[];
@@ -35,7 +36,7 @@ export default class Map extends React.Component<{}, iPlotState> {
   }
 
   loadData = async () => {
-   const { data, lastUpdateAt } = await auroraDataToGraphData();
+    const { data, lastUpdateAt } = await auroraDataToGraphData();
     this.setState({ data, lastUpdateAt });
   }
 
@@ -44,7 +45,7 @@ export default class Map extends React.Component<{}, iPlotState> {
   }
 
   setIntervals = () => {
-    const interval = window.setInterval(this.loadData, 30000)
+    const interval = window.setInterval(this.loadData, 10000)
     this.setState({ interval })
   }
 
@@ -91,14 +92,27 @@ export default class Map extends React.Component<{}, iPlotState> {
 
   render() {
     const { data, lastUpdateAt } = this.state;
-    if (!data && lastUpdateAt) return (<div>loading</div>)
+
+    if (!data || !lastUpdateAt) return (<div>loading</div>)
+
+    const date = new Date(lastUpdateAt)
+    const hours = ('0' + date.getUTCHours()).slice(-2)
+    const minutes = ('0' + date.getUTCMinutes()).slice(-2)
+    const seconds = ('0' + date.getUTCSeconds()).slice(-2)
 
     return (
-      <Plot
-        data={data!}
-        layout={this.layout()}
-        config={{ scrollZoom: false }}
-      />
+      <div>
+        <Plot
+          data={data}
+          layout={this.layout()}
+          config={{ scrollZoom: false }}
+        />
+        <div className={MapStyle.timelet}>
+          Last update:
+          { " " }
+          { hours }:{ minutes }:{ seconds } UTC
+        </div>
+      </div>
     );
   }
 }