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

add icons to corona stat view

parent eafcb005
No related branches found
No related tags found
No related merge requests found
<template> <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 v-for="CityHistory in CasesHistory.data['09271'].history" :key="CityHistory.date" class="weather-data">
<div class="cases"> <div class="cases">
<div> <div>
...@@ -15,10 +17,10 @@ ...@@ -15,10 +17,10 @@
<div class="card"> <div class="card">
<!-- Card header --> <!-- Card header -->
<div class="d-flex justify-content-around p-3"> <div class="d-flex justify-content-around p-3">
<button type="button" class="btn btn-outline-secondary" @click="add4">2 Monaten weiter </button> <a type="button" class="" @click="monthAxisBack"><i class="material-icons">chevron_left</i></a>
<button type="button" class="btn btn-outline-secondary" @click="minus4">2 Monten züruck</button> <a type="button" class="" @click="fullView"><i class="material-icons">fullscreen</i></a>
<button type="button" class="btn btn-outline-secondary" @click="showLastMonth">Letzte Montat</button> <a type="button" class="" @click="currentMonth"><i class="material-icons">today</i></a>
<button type="button" class="btn btn-outline-secondary" @click="fullview">Voller Ansicht</button> <a type="button" class="" @click="monthAxisForward"><i class="material-icons">chevron_right</i></a>
</div> </div>
<!-- Card body --> <!-- Card body -->
<div class="card-body "> <div class="card-body ">
...@@ -36,6 +38,16 @@ ...@@ -36,6 +38,16 @@
</div> </div>
</template> </template>
<style lang="scss">
@import "../assets/app.scss";
$big_icon : 36px !important;
i {
color: $thddonaublue;
font-size: $big_icon;
};
</style>
<script lang="ts"> <script lang="ts">
import axios from 'axios' import axios from 'axios'
import Vue3ChartJs from '@j-t-mcc/vue3-chartjs' import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'
...@@ -144,28 +156,28 @@ export default { ...@@ -144,28 +156,28 @@ export default {
} }
} }
const showLastMonth = () => { const currentMonth = () => {
lineChart.options.scales.x.min = dateslength - 30 lineChart.options.scales.x.min = dateslength - 30
lineChart.options.scales.x.max = dateslength lineChart.options.scales.x.max = dateslength
console.log('here') console.log('here')
chartRef.value.update(250) chartRef.value.update(250)
} }
const add4 = () => { const monthAxisForward = () => {
if (lineChart.options.scales.x.max <= dateslength - 30) { if (lineChart.options.scales.x.max <= dateslength - 30) {
lineChart.options.scales.x.min += 30 lineChart.options.scales.x.min += 30
lineChart.options.scales.x.max += 30 lineChart.options.scales.x.max += 30
} }
chartRef.value.update(250) chartRef.value.update(250)
} }
const minus4 = () => { const monthAxisBack = () => {
if (lineChart.options.scales.x.min >= 0) { if (lineChart.options.scales.x.min >= 0) {
lineChart.options.scales.x.min -= 30 lineChart.options.scales.x.min -= 30
lineChart.options.scales.x.max -= 30 lineChart.options.scales.x.max -= 30
} }
chartRef.value.update(250) chartRef.value.update(250)
} }
const fullview = () => { const fullView = () => {
lineChart.options.scales.x.min = 0 lineChart.options.scales.x.min = 0
lineChart.options.scales.x.max = dateslength lineChart.options.scales.x.max = dateslength
chartRef.value.update(250) chartRef.value.update(250)
...@@ -174,11 +186,11 @@ export default { ...@@ -174,11 +186,11 @@ export default {
lineChart, lineChart,
CasesHistory, CasesHistory,
CoronaStatBY, CoronaStatBY,
showLastMonth, currentMonth,
chartRef, chartRef,
add4, monthAxisForward,
minus4, monthAxisBack,
fullview fullView
} }
}, },
data () { data () {
......
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