Sharkey/src/client/app/common/views/components/drive-settings.vue

174 lines
3.3 KiB
Vue
Raw Normal View History

2018-10-25 05:30:30 +03:00
<template>
<ui-card>
<div slot="title"><fa icon="cloud"/> {{ $t('@.drive') }}</div>
2018-10-25 05:30:30 +03:00
<section v-if="!fetching" class="juakhbxthdewydyreaphkepoxgxvfogn">
<div class="meter"><div :style="meterStyle"></div></div>
<p>{{ $t('max') }}: <b>{{ capacity | bytes }}</b> {{ $t('in-use') }}: <b>{{ usage | bytes }}</b></p>
2018-10-25 05:30:30 +03:00
</section>
<section>
<header>{{ $t('stats') }}</header>
2018-11-09 11:25:30 +02:00
<div ref="chart" style="margin-bottom: -16px; margin-left: -8px; color: #000;"></div>
2018-10-25 05:30:30 +03:00
</section>
</ui-card>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
2018-10-25 05:30:30 +03:00
import * as tinycolor from 'tinycolor2';
import * as ApexCharts from 'apexcharts';
export default Vue.extend({
i18n: i18n('common/views/components/drive-settings.vue'),
2018-10-25 05:30:30 +03:00
data() {
return {
fetching: true,
usage: null,
capacity: null
};
},
computed: {
meterStyle(): any {
return {
width: `${this.usage / this.capacity * 100}%`,
background: tinycolor({
h: 180 - (this.usage / this.capacity * 180),
s: 0.7,
l: 0.5
})
};
}
},
mounted() {
2018-11-09 01:13:34 +02:00
this.$root.api('drive').then(info => {
2018-10-25 05:30:30 +03:00
this.capacity = info.capacity;
this.usage = info.usage;
this.fetching = false;
this.$nextTick(() => {
this.renderChart();
});
});
},
methods: {
renderChart() {
2018-11-09 01:13:34 +02:00
this.$root.api('charts/user/drive', {
2018-10-25 05:30:30 +03:00
userId: this.$store.state.i.id,
span: 'day',
limit: 21
}).then(stats => {
const addition = [];
const deletion = [];
const now = new Date();
const y = now.getFullYear();
const m = now.getMonth();
const d = now.getDate();
for (let i = 0; i < 21; i++) {
const x = new Date(y, m, d - i);
addition.push([
x,
stats.incSize[i]
]);
deletion.push([
x,
-stats.decSize[i]
]);
}
const chart = new ApexCharts(this.$refs.chart, {
chart: {
type: 'bar',
stacked: true,
height: 150,
zoom: {
enabled: false
}
},
plotOptions: {
bar: {
columnWidth: '90%',
endingShape: 'rounded'
}
},
grid: {
clipMarkers: false,
borderColor: 'rgba(0, 0, 0, 0.1)'
},
tooltip: {
shared: true,
intersect: false
},
dataLabels: {
enabled: false
},
legend: {
show: false
},
series: [{
name: 'Additions',
data: addition
}, {
name: 'Deletions',
data: deletion
}],
xaxis: {
type: 'datetime',
labels: {
style: {
colors: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
}
},
axisBorder: {
color: 'rgba(0, 0, 0, 0.1)'
},
axisTicks: {
color: 'rgba(0, 0, 0, 0.1)'
},
crosshairs: {
width: 1,
opacity: 1
}
},
yaxis: {
labels: {
formatter: v => Vue.filter('bytes')(v, 0),
style: {
color: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
}
}
}
});
chart.render();
});
}
}
});
</script>
<style lang="stylus" scoped>
.juakhbxthdewydyreaphkepoxgxvfogn
> .meter
$size = 12px
margin-bottom 16px
background rgba(0, 0, 0, 0.1)
border-radius ($size / 2)
overflow hidden
> div
height $size
border-radius ($size / 2)
> p
margin 0
</style>