Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Peter van der meulen
Aurora Bot Map
Commits
a639f3cb
Verified
Commit
a639f3cb
authored
Nov 21, 2020
by
Peter van der meulen
Browse files
Add timelet in plot data
parent
a216e4a4
Changes
2
Hide whitespace changes
Inline
Side-by-side
src/Components/Map/Map.module.scss
0 → 100644
View file @
a639f3cb
.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
View file @
a639f3cb
...
...
@@ -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
,
3
0000
)
const
interval
=
window
.
setInterval
(
this
.
loadData
,
1
0000
)
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
>
);
}
}
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment