Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
P
PStA WP2 OmarElkadi1
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package Registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Omar Elkadi
PStA WP2 OmarElkadi1
Commits
f674f32f
Commit
f674f32f
authored
3 years ago
by
Omar Elkadi
Browse files
Options
Downloads
Patches
Plain Diff
Add get Byern API + Add Tooltips + update colors
parent
eca5f192
No related branches found
Branches containing commit
No related tags found
No related merge requests found
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
src/views/CoronaStat.vue
+186
-106
186 additions, 106 deletions
src/views/CoronaStat.vue
with
186 additions
and
106 deletions
src/views/CoronaStat.vue
+
186
−
106
View file @
f674f32f
<
template
>
<link
href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel=
"stylesheet"
>
<!--
<div
v-for=
"CityHistory in CasesHistory.data['09271'].history"
:key=
"CityHistory.date"
class=
"weather-data"
>
<div
class=
"cases"
>
<div>
<span>
{{
CityHistory
.
date
}}
</span>
</div>
<div>
<span
class=
"location"
>
{{
CityHistory
.
cases
}}
</span>
</div>
</div>
</div>
-->
<div
class=
"container h-"
>
<!--
<button
v-on:click=
"getlCases(CasesHistory.data['09271'].history)"
>
Get Corona Data
</button>
-->
<h5
class=
"h3 mb-0"
>
Line chart
</h5>
<div
class=
"card"
>
<!-- Card header -->
<div
class=
"d-flex justify-content-around p-3"
>
<a
type=
"button"
class=
""
@
click=
"monthAxisBack"
><i
class=
"material-icons"
>
chevron_left
</i></a>
<a
type=
"button"
class=
""
@
click=
"fullView"
><i
class=
"material-icons"
>
fullscreen
</i></a>
<a
type=
"button"
class=
""
@
click=
"currentMonth"
><i
class=
"material-icons"
>
today
</i></a>
<a
type=
"button"
class=
""
@
click=
"monthAxisForward"
><i
class=
"material-icons"
>
chevron_right
</i></a>
<link
href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel=
"stylesheet"
/>
<div
class=
"container "
>
<!--
<button
v-on:click=
"getlCases(CoronaHisDeg.data['09271'].history)"
>
Get Corona Data
</button>
-->
<div
class=
"btn-group d-flex justify-content-around p-3 mx-5 mt-5"
>
<a
type=
"button"
class=
"tooltipx"
@
click=
"NewCasesHisBayern"
>
<span
class=
"tooltiptextx"
>
Bayern
</span>
<i
class=
"material-icons"
style=
"color:#e63c54"
>
lens
</i>
</a>
<a
type=
"button"
class=
"tooltipx"
@
click=
"NewCasesHisDeggendorf"
><span
class=
"tooltiptextx"
>
Deggendorf
</span
><i
class=
"material-icons"
style=
"color:#6f6f6e"
>
lens
</i>
</a>
</div>
<!-- Card body -->
<div
class=
"card-body "
>
<div
class=
"chart"
>
<vue3-chart-js
:id=
"lineChart.id"
:type=
"lineChart.type"
ref=
"chartRef"
:data=
"lineChart.data"
:options=
"lineChart.options"
/>
<div
class=
"card border-success m-2"
>
<!-- Card header -->
<div
class=
"row"
>
<div
class=
"col btn-group d-flex justify-content-around p-3 mx-5"
>
<a
type=
"button"
class=
"tooltipx"
@
click=
"fullView"
><span
class=
"tooltiptextx"
>
Voller Ansicht
</span
><i
class=
"material-icons"
>
fullscreen
</i></a
>
</div>
<div
class=
"col btn-group d-flex justify-content-around p-3 mx-5"
>
<a
type=
"button"
class=
"tooltipx"
@
click=
"currentMonth"
><span
class=
"tooltiptextx"
>
Dieser Monat
</span
><i
class=
"material-icons"
>
today
</i></a
>
<a
type=
"button"
class=
"tooltipx"
@
click=
"monthAxisBack"
><span
class=
"tooltiptextx"
>
Monat zurück
</span
><i
class=
"material-icons"
>
chevron_left
</i></a
>
<a
type=
"button"
class=
"tooltipx"
@
click=
"monthAxisForward"
><span
class=
"tooltiptextx"
>
Monat Weiter
</span
><i
class=
"material-icons"
>
chevron_right
</i></a
>
</div>
</div>
<!-- Card body -->
<div
class=
"card-body "
>
<div
class=
"chart"
>
<vue3-chart-js
:id=
"BarChart.id"
:type=
"BarChart.type"
ref=
"chartRef"
:data=
"BarChart.data"
:options=
"BarChart.options"
/>
</div>
</div>
</div>
</div>
</div>
</
template
>
<
style
lang=
"scss"
>
@import
"../assets/app.scss"
;
$big_icon
:
36px
!
important
;
i
{
color
:
$thddonaublue
;
font-size
:
$big_icon
;
}
.tooltipx
{
position
:
relative
;
display
:
inline-block
;
}
.tooltipx
.tooltiptextx
{
visibility
:
hidden
;
width
:
120px
;
background-color
:
$thdblue
;
color
:
$thdlightgrey
;
text-align
:
center
;
border-radius
:
6px
;
padding
:
5px
0
;
position
:
absolute
;
z-index
:
1
;
bottom
:
120%
;
left
:
50%
;
margin-left
:
-60px
;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity
:
0
;
transition
:
opacity
2s
;
}
.
tooltipx
.
tooltiptextx
:
:
after
{
content
:
""
;
position
:
absolute
;
top
:
100%
;
left
:
50%
;
margin-left
:
-5px
;
border-width
:
5px
;
border-style
:
solid
;
border-color
:
$thdblue
transparent
transparent
transparent
;
}
@import
"../assets/app.scss"
;
$big_icon
:
36px
!
important
;
i
{
color
:
$thddonaublue
;
font-size
:
$big_icon
;
};
.tooltipx
:hover
.tooltiptextx
{
visibility
:
visible
;
opacity
:
1
;
}
</
style
>
<
script
lang=
"ts"
>
...
...
@@ -54,65 +108,50 @@ import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'
import
zoomPlugin
from
'
chartjs-plugin-zoom
'
import
dataLabels
from
'
chartjs-plugin-datalabels
'
import
{
onBeforeMount
,
ref
}
from
'
vue
'
import
'
bootstrap/dist/js/bootstrap.bundle
'
import
{
bootstrap
}
from
'
bootstrap/dist/js/bootstrap
'
// globally registered and available for all charts
Vue3ChartJs
.
registerGlobalPlugins
([
zoomPlugin
])
export
default
{
name
:
'
App
'
,
name
:
'
CoronaStat
'
,
components
:
{
Vue3ChartJs
},
setup
()
{
const
chartRef
=
ref
(
null
)
// ref(0)
const
cases
=
[]
const
dates
=
[]
let
dateslength
=
0
const
CasesHistory
=
ref
({
var
tooltipList
const
CoronaHisDeg
=
ref
({
data
:
{
'
09271
'
:
{
history
:
[]
}
}
})
var
CoronaStatBY
=
{
data
:
{}
}
// const cases = async () => {
// return await getlCases(CasesHistory.value.data['09271'].history)
// }
async
function
getCoronaStat
()
{
await
axios
.
get
(
'
https://api.corona-zahlen.org/districts/09271/history/cases
'
)
.
then
(
response
=>
(
CasesHistory
.
value
=
response
.
data
))
}
onBeforeMount
(
async
()
=>
{
await
getCoronaStat
()
const
his
=
CasesHistory
.
value
.
data
[
'
09271
'
].
history
his
.
forEach
(
element
=>
{
// lineChart.data.labels.push(element.date.substr(0, 10))
// lineChart.data.datasets[0].data.push(element.cases)
cases
.
push
(
element
.
cases
)
dates
.
push
(
element
.
date
.
substr
(
0
,
10
))
})
dateslength
=
cases
.
length
chartRef
.
value
.
update
(
1
)
const
CoronaHisBY
=
ref
({
data
:
{
BY
:
{
history
:
[]
}
}
})
const
line
Chart
=
{
id
:
'
line
'
,
const
Bar
Chart
=
{
id
:
'
bar
'
,
type
:
'
bar
'
,
// locally registered and available for this chart
plugins
:
[
dataLabels
],
data
:
{
labels
:
dates
,
labels
:
[]
,
datasets
:
[
{
label
:
'
Neubefall
'
,
data
:
cases
,
borderColor
:
'
black
'
,
backgroundColor
:
[
'
#bdc3c7
'
]
label
:
''
,
data
:
[],
borderColor
:
[
'
Black
'
],
backgroundColor
:
''
,
borderWidth
:
0.5
,
borderRadius
:
2
}
]
},
...
...
@@ -131,7 +170,7 @@ export default {
},
pan
:
{
enabled
:
true
,
mode
:
'
x
y
'
mode
:
'
x
'
}
},
datalabels
:
{
...
...
@@ -155,54 +194,95 @@ export default {
}
}
}
async
function
NewCasesHisDeggendorf
()
{
await
axios
.
get
(
'
https://api.corona-zahlen.org/districts/09271/history/cases
'
)
.
then
(
response
=>
(
CoronaHisDeg
.
value
=
response
.
data
))
const
his
=
CoronaHisDeg
.
value
.
data
[
'
09271
'
].
history
var
cases
=
[]
var
dates
=
[]
his
.
forEach
(
element
=>
{
// BarChart.data.labels.push(element.date.substr(0, 10))
// BarChart.data.datasets[0].data.push(element.cases)
cases
.
push
(
element
.
cases
)
dates
.
push
(
element
.
date
.
substr
(
0
,
10
))
})
BarChart
.
data
.
datasets
[
0
].
data
=
cases
BarChart
.
data
.
datasets
[
0
].
backgroundColor
=
'
rgba(111,111,110,1)
'
BarChart
.
data
.
labels
=
dates
BarChart
.
data
.
datasets
[
0
].
label
=
'
Deggendorf Covid-19 Neubefälleverlauf
'
dateslength
=
cases
.
length
chartRef
.
value
.
update
(
1
)
}
const
NewCasesHisBayern
=
async
()
=>
{
await
axios
.
get
(
'
https://api.corona-zahlen.org/states/BY/history/cases
'
)
.
then
(
response
=>
(
CoronaHisBY
.
value
=
response
.
data
))
const
his
=
CoronaHisBY
.
value
.
data
.
BY
.
history
console
.
log
(
his
)
var
cases
=
[]
var
dates
=
[]
his
.
forEach
(
element
=>
{
// lineChart.data.labels.push(element.date.substr(0, 10))
// lineChart.data.datasets[0].data.push(element.cases)
cases
.
push
(
element
.
cases
)
dates
.
push
(
element
.
date
.
substr
(
0
,
10
))
})
BarChart
.
data
.
datasets
[
0
].
data
=
cases
BarChart
.
data
.
labels
=
dates
BarChart
.
data
.
datasets
[
0
].
backgroundColor
=
'
rgba(231,61,85,1)
'
BarChart
.
data
.
datasets
[
0
].
label
=
'
Bayer Covid-19 Neubefälleverlauf
'
dateslength
=
cases
.
length
chartRef
.
value
.
update
()
}
onBeforeMount
(
async
()
=>
{
await
NewCasesHisDeggendorf
()
var
tooltipTriggerList
=
[].
slice
.
call
(
document
.
querySelectorAll
(
'
[data-bs-toggle="tooltip"]
'
)
)
tooltipList
=
tooltipTriggerList
.
map
(
function
(
tooltipTriggerEl
)
{
return
new
bootstrap
.
Tooltip
(
tooltipTriggerEl
)
})
})
const
currentMonth
=
()
=>
{
line
Chart
.
options
.
scales
.
x
.
min
=
dateslength
-
30
line
Chart
.
options
.
scales
.
x
.
max
=
dateslength
Bar
Chart
.
options
.
scales
.
x
.
min
=
dateslength
-
30
Bar
Chart
.
options
.
scales
.
x
.
max
=
dateslength
console
.
log
(
'
here
'
)
chartRef
.
value
.
update
(
25
0
)
chartRef
.
value
.
update
(
0
)
}
const
monthAxisForward
=
()
=>
{
if
(
line
Chart
.
options
.
scales
.
x
.
max
<=
dateslength
-
30
)
{
line
Chart
.
options
.
scales
.
x
.
min
+=
30
line
Chart
.
options
.
scales
.
x
.
max
+=
30
if
(
Bar
Chart
.
options
.
scales
.
x
.
max
<=
dateslength
-
30
)
{
Bar
Chart
.
options
.
scales
.
x
.
min
+=
30
Bar
Chart
.
options
.
scales
.
x
.
max
+=
30
}
chartRef
.
value
.
update
(
25
0
)
chartRef
.
value
.
update
(
0
)
}
const
monthAxisBack
=
()
=>
{
if
(
line
Chart
.
options
.
scales
.
x
.
min
>=
0
)
{
line
Chart
.
options
.
scales
.
x
.
min
-=
30
line
Chart
.
options
.
scales
.
x
.
max
-=
30
if
(
Bar
Chart
.
options
.
scales
.
x
.
min
>=
0
)
{
Bar
Chart
.
options
.
scales
.
x
.
min
-=
30
Bar
Chart
.
options
.
scales
.
x
.
max
-=
30
}
chartRef
.
value
.
update
(
25
0
)
chartRef
.
value
.
update
(
0
)
}
const
fullView
=
()
=>
{
line
Chart
.
options
.
scales
.
x
.
min
=
0
line
Chart
.
options
.
scales
.
x
.
max
=
dateslength
chartRef
.
value
.
update
(
25
0
)
Bar
Chart
.
options
.
scales
.
x
.
min
=
0
Bar
Chart
.
options
.
scales
.
x
.
max
=
dateslength
chartRef
.
value
.
update
(
0
)
}
return
{
lineChart
,
CasesHistory
,
CoronaStatBY
,
currentMonth
,
BarChart
,
chartRef
,
monthAxisForward
,
monthAxisBack
,
fullView
}
},
data
()
{
// return {
// cases: [Number]
// }
},
methods
:
{
async
getCoronaStat
()
{
await
axios
.
get
(
'
https://api.corona-zahlen.org/germany
'
)
.
then
(
response
=>
(
this
.
CoronaStatBY
=
response
.
data
))
currentMonth
,
fullView
,
NewCasesHisBayern
,
NewCasesHisDeggendorf
,
tooltipList
}
}
}
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment