Add timelet in plot data

parent a216e4a4
.timelet {
padding: 5px;
background: rgba(255, 255, 255, 0.9);
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
font-size: 10px;
}
......@@ -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>
);
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment