Commit f674f32f authored by Omar Elkadi's avatar Omar Elkadi
Browse files

Add get Byern API + Add Tooltips + update colors

parent eca5f192
<template> <template>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
<!-- <div v-for="CityHistory in CasesHistory.data['09271'].history" :key="CityHistory.date" class="weather-data"> rel="stylesheet"
<div class="cases"> />
<div> <div class="container ">
<span>{{CityHistory.date}}</span> <!-- <button v-on:click="getlCases(CoronaHisDeg.data['09271'].history)">Get Corona Data</button> -->
</div> <div class="btn-group d-flex justify-content-around p-3 mx-5 mt-5">
<div> <a type="button" class="tooltipx" @click="NewCasesHisBayern">
<span class="location">{{CityHistory.cases}}</span> <span class="tooltiptextx">Bayern</span>
</div> <i class="material-icons" style="color:#e63c54">lens</i>
</div> </a>
</div> --> <a type="button" class="tooltipx" @click="NewCasesHisDeggendorf"
<div class="container h-"> ><span class="tooltiptextx">Deggendorf</span
<!-- <button v-on:click="getlCases(CasesHistory.data['09271'].history)">Get Corona Data</button> --> ><i class="material-icons" style="color:#6f6f6e">lens</i>
<h5 class="h3 mb-0">Line chart</h5> </a>
<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>
</div> </div>
<!-- Card body --> <div class="card border-success m-2">
<div class="card-body "> <!-- Card header -->
<div class="chart"> <div class="row">
<vue3-chart-js <div class="col btn-group d-flex justify-content-around p-3 mx-5">
:id="lineChart.id" <a type="button" class="tooltipx" @click="fullView"
:type="lineChart.type" ><span class="tooltiptextx">Voller Ansicht</span
ref="chartRef" ><i class="material-icons">fullscreen</i></a
:data="lineChart.data" >
:options="lineChart.options" </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>
</div> </div>
</div>
</template> </template>
<style lang="scss"> <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"; .tooltipx:hover .tooltiptextx {
$big_icon : 36px !important; visibility: visible;
i { opacity: 1;
color: $thddonaublue; }
font-size: $big_icon;
};
</style> </style>
<script lang="ts"> <script lang="ts">
...@@ -54,65 +108,50 @@ import Vue3ChartJs from '@j-t-mcc/vue3-chartjs' ...@@ -54,65 +108,50 @@ import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'
import zoomPlugin from 'chartjs-plugin-zoom' import zoomPlugin from 'chartjs-plugin-zoom'
import dataLabels from 'chartjs-plugin-datalabels' import dataLabels from 'chartjs-plugin-datalabels'
import { onBeforeMount, ref } from 'vue' 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 // globally registered and available for all charts
Vue3ChartJs.registerGlobalPlugins([zoomPlugin]) Vue3ChartJs.registerGlobalPlugins([zoomPlugin])
export default { export default {
name: 'App', name: 'CoronaStat',
components: { components: {
Vue3ChartJs Vue3ChartJs
}, },
setup () { setup () {
const chartRef = ref(null) // ref(0) const chartRef = ref(null) // ref(0)
const cases = []
const dates = []
let dateslength = 0 let dateslength = 0
const CasesHistory = ref({ var tooltipList
const CoronaHisDeg = ref({
data: { data: {
'09271': { '09271': {
history: [] history: []
} }
} }
}) })
var CoronaStatBY = { const CoronaHisBY = ref({
data: {} data: {
} BY: {
// const cases = async () => { history: []
// 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 lineChart = { const BarChart = {
id: 'line', id: 'bar',
type: 'bar', type: 'bar',
// locally registered and available for this chart // locally registered and available for this chart
plugins: [dataLabels], plugins: [dataLabels],
data: { data: {
labels: dates, labels: [],
datasets: [ datasets: [
{ {
label: 'Neubefall', label: '',
data: cases, data: [],
borderColor: 'black', borderColor: ['Black'],
backgroundColor: ['#bdc3c7'] backgroundColor: '',
borderWidth: 0.5,
borderRadius: 2
} }
] ]
}, },
...@@ -131,7 +170,7 @@ export default { ...@@ -131,7 +170,7 @@ export default {
}, },
pan: { pan: {
enabled: true, enabled: true,
mode: 'xy' mode: 'x'
} }
}, },
datalabels: { datalabels: {
...@@ -155,54 +194,95 @@ export default { ...@@ -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 = () => { const currentMonth = () => {
lineChart.options.scales.x.min = dateslength - 30 BarChart.options.scales.x.min = dateslength - 30
lineChart.options.scales.x.max = dateslength BarChart.options.scales.x.max = dateslength
console.log('here') console.log('here')
chartRef.value.update(250) chartRef.value.update(0)
} }
const monthAxisForward = () => { const monthAxisForward = () => {
if (lineChart.options.scales.x.max <= dateslength - 30) { if (BarChart.options.scales.x.max <= dateslength - 30) {
lineChart.options.scales.x.min += 30 BarChart.options.scales.x.min += 30
lineChart.options.scales.x.max += 30 BarChart.options.scales.x.max += 30
} }
chartRef.value.update(250) chartRef.value.update(0)
} }
const monthAxisBack = () => { const monthAxisBack = () => {
if (lineChart.options.scales.x.min >= 0) { if (BarChart.options.scales.x.min >= 0) {
lineChart.options.scales.x.min -= 30 BarChart.options.scales.x.min -= 30
lineChart.options.scales.x.max -= 30 BarChart.options.scales.x.max -= 30
} }
chartRef.value.update(250) chartRef.value.update(0)
} }
const fullView = () => { const fullView = () => {
lineChart.options.scales.x.min = 0 BarChart.options.scales.x.min = 0
lineChart.options.scales.x.max = dateslength BarChart.options.scales.x.max = dateslength
chartRef.value.update(250) chartRef.value.update(0)
} }
return { return {
lineChart, BarChart,
CasesHistory,
CoronaStatBY,
currentMonth,
chartRef, chartRef,
monthAxisForward, monthAxisForward,
monthAxisBack, monthAxisBack,
fullView currentMonth,
} fullView,
}, NewCasesHisBayern,
data () { NewCasesHisDeggendorf,
// return { tooltipList
// cases: [Number]
// }
},
methods: {
async getCoronaStat () {
await axios
.get('https://api.corona-zahlen.org/germany')
.then(response => (this.CoronaStatBY = response.data))
} }
} }
} }
......
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