Skip to content
Snippets Groups Projects
Commit 1af21d2f authored by Omar Elkadi's avatar Omar Elkadi
Browse files

add tooltip + add toasts + add 4 and 1 month toggol

parent a6b1cbb6
No related branches found
No related tags found
No related merge requests found
......@@ -6,37 +6,74 @@
<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">
<a
type="button"
class="tooltipx border-primary"
@mouseover="isHovering1 = true"
@mouseout="isHovering1 = false"
:class="{'border-bottom': isHovering1}"
@click="NewCasesHisBayern"
>
<span class="tooltiptextx">Bayern</span>
<i class="material-icons" style="color:#e63c54">lens</i>
</a>
<a type="button" class="tooltipx" @click="NewCasesHisDeggendorf"
<a
type="button"
class="tooltipx border-primary"
@click="NewCasesHisDeggendorf"
@mouseover="isHovering2 = true"
@mouseout="isHovering2 = false"
:class="{ 'border-bottom': isHovering2 }"
><span class="tooltiptextx">Deggendorf</span
><i class="material-icons" style="color:#6f6f6e">lens</i>
</a>
</div>
<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 class="row">
<div class="col btn-group d-flex justify-content-around p-3 mx-5">
<a
type="button"
class="tooltipx border-primary"
@click="fullView"
@mouseover="isHovering3 = true"
@mouseout="isHovering3 = false"
:class="{ 'border-bottom': isHovering3 }"
><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 border-primary"
@click="currentMonth"
@mouseover="isHovering4 = true"
@mouseout="isHovering4 = false"
:class="{ 'border-bottom': isHovering4 }"
><span class="tooltiptextx">Aktuell</span>
<i class="material-icons">today</i></a
>
<a
type="button"
class="tooltipx border-primary"
@click="monthAxisBack"
@mouseover="isHovering5 = true"
@mouseout="isHovering5 = false"
:class="{ 'border-bottom': isHovering5 }"
><span class="tooltiptextx">Zurück</span
><i class="material-icons">chevron_left</i></a
>
<a
type="button"
class="tooltipx border-primary"
@click="monthAxisForward"
@mouseover="isHovering6 = true"
@mouseout="isHovering6 = false"
:class="{ 'border-bottom': isHovering6 }"
><span class="tooltiptextx">Weiter</span
><i class="material-icons">chevron_right</i></a
>
</div>
</div>
<!-- Card body -->
......@@ -108,21 +145,20 @@ 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'
import Swal from 'sweetalert2'
// globally registered and available for all charts
Vue3ChartJs.registerGlobalPlugins([zoomPlugin])
export default {
name: 'CoronaStat',
name: 'Covid',
components: {
Vue3ChartJs
},
setup () {
const chartRef = ref(null) // ref(0)
let dateslength = 0
var tooltipList
let x = 0
const CoronaHisDeg = ref({
data: {
'09271': {
......@@ -188,13 +224,17 @@ export default {
},
scales: {
x: {
min: 0,
max: 500
min: 350,
max: 1000
}
}
}
}
async function NewCasesHisDeggendorf () {
onBeforeMount(async () => {
await NewCasesHisDeggendorf()
last4Months()
})
const NewCasesHisDeggendorf = async () => {
await axios
.get('https://api.corona-zahlen.org/districts/09271/history/cases')
.then(response => (CoronaHisDeg.value = response.data))
......@@ -211,14 +251,13 @@ export default {
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
dateslength = dates.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 = []
......@@ -233,21 +272,22 @@ export default {
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
dateslength = dates.length
chartRef.value.update()
}
const last4Months = () => {
x = 120
BarChart.options.scales.x.min = dateslength - x
BarChart.options.scales.x.max = dateslength
onBeforeMount(async () => {
await NewCasesHisDeggendorf()
var tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
)
tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
})
console.log('here')
chartRef.value.update(0)
}
const currentMonth = () => {
if (x === 30) {
return last4Months()
}
x = 30
BarChart.options.scales.x.min = dateslength - 30
BarChart.options.scales.x.max = dateslength
......@@ -255,16 +295,37 @@ export default {
chartRef.value.update(0)
}
const monthAxisForward = () => {
if (BarChart.options.scales.x.max <= dateslength - 30) {
BarChart.options.scales.x.min += 30
BarChart.options.scales.x.max += 30
if (BarChart.options.scales.x.max < dateslength - 30) {
BarChart.options.scales.x.min += x
BarChart.options.scales.x.max += x
} else {
Swal.fire({
text: 'Er ist ein API ! Kein Magier!',
toast: true,
position: 'bottom-end',
timer: 9000,
timerProgressBar: true,
showConfirmButton: false,
icon: 'warning'
})
}
chartRef.value.update(0)
}
const monthAxisBack = () => {
if (BarChart.options.scales.x.min >= 0) {
BarChart.options.scales.x.min -= 30
BarChart.options.scales.x.max -= 30
if (BarChart.options.scales.x.min > 0) {
BarChart.options.scales.x.min -= x
BarChart.options.scales.x.max -= x
} else {
Swal.fire({
text: 'Es gab kein Covid-19 davor!',
toast: true,
position: 'bottom-end',
timer: 9000,
timerProgressBar: true,
confirmButtonColor: '#1a4273',
showConfirmButton: false,
icon: 'warning'
})
}
chartRef.value.update(0)
}
......@@ -281,8 +342,17 @@ export default {
currentMonth,
fullView,
NewCasesHisBayern,
NewCasesHisDeggendorf,
tooltipList
NewCasesHisDeggendorf
}
},
data () {
return {
isHovering1: false,
isHovering2: false,
isHovering3: false,
isHovering4: false,
isHovering5: false,
isHovering6: false
}
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment