Infra-Mirrors/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-01-04 12:11:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Resize chart on screen breakpoints

Browse Source
This commit is contained in:
Nelson Chan 2021-08-18 12:21:16 +08:00
parent f1e5e53e8f
commit cf5168a4e6
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/PingChart.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<LineChart :chart-data="chartData" :height="100" :options="chartOptions" /> <LineChart :chart-data="chartData" :options="chartOptions" />
</template> </template>
<script> <script>
@ -31,6 +31,19 @@ export default {
chartOptions() { chartOptions() {
return { return {
responsive: true, responsive: true,
maintainAspectRatio: false,
onResize: (chart) => {
chart.canvas.parentNode.style.position = "relative";
if (screen.width < 576) {
chart.canvas.parentNode.style.height = "275px";
} else if (screen.width < 768) {
chart.canvas.parentNode.style.height = "320px";
} else if (screen.width < 992) {
chart.canvas.parentNode.style.height = "300px";
} else {
chart.canvas.parentNode.style.height = "250px";
}
},
layout: { layout: {
padding: { padding: {
left: 10, left: 10,