Sharkey/src/client/app/common/views/components/activity.vue

115 lines
1.7 KiB
Vue
Raw Normal View History

2018-02-15 11:33:34 +02:00
<template>
<div>
2018-11-03 09:44:05 +02:00
<div ref="chart"></div>
2018-02-15 11:33:34 +02:00
</div>
</template>
<script lang="ts">
import Vue from 'vue';
2019-02-04 02:37:15 +02:00
import ApexCharts from 'apexcharts';
2018-11-03 09:44:05 +02:00
2018-02-15 11:33:34 +02:00
export default Vue.extend({
props: {
user: {
type: Object,
required: true
},
limit: {
type: Number,
required: false,
default: 21
}
},
2018-02-15 11:33:34 +02:00
data() {
return {
fetching: true,
data: [],
peak: null
};
},
mounted() {
2018-11-09 01:13:34 +02:00
this.$root.api('charts/user/notes', {
2018-03-29 08:48:47 +03:00
userId: this.user.id,
2018-11-03 09:44:05 +02:00
span: 'day',
limit: this.limit
2018-11-03 09:44:05 +02:00
}).then(stats => {
const normal = [];
const reply = [];
const renote = [];
const now = new Date();
const y = now.getFullYear();
const m = now.getMonth();
const d = now.getDate();
for (let i = 0; i < this.limit; i++) {
2018-11-03 09:44:05 +02:00
const x = new Date(y, m, d - i);
normal.push([
x,
stats.diffs.normal[i]
]);
reply.push([
x,
stats.diffs.reply[i]
]);
renote.push([
x,
stats.diffs.renote[i]
]);
}
const chart = new ApexCharts(this.$refs.chart, {
chart: {
type: 'bar',
stacked: true,
height: 100,
sparkline: {
enabled: true
},
},
plotOptions: {
bar: {
columnWidth: '80%'
2018-11-03 09:44:05 +02:00
}
},
dataLabels: {
enabled: false
},
2018-11-03 09:44:05 +02:00
grid: {
clipMarkers: false,
padding: {
top: 0,
right: 8,
bottom: 0,
left: 8
}
},
tooltip: {
shared: true,
intersect: false
},
series: [{
name: 'Normal',
data: normal
}, {
name: 'Reply',
data: reply
}, {
name: 'Renote',
data: renote
}],
xaxis: {
type: 'datetime',
crosshairs: {
width: 1,
opacity: 1
}
}
2018-02-15 11:33:34 +02:00
});
2018-11-03 09:44:05 +02:00
chart.render();
2018-02-15 11:33:34 +02:00
});
}
});
</script>