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