109 lines
1.7 KiB
Vue
109 lines
1.7 KiB
Vue
<template>
|
|
<div class="mk-activity">
|
|
<div ref="chart"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue';
|
|
import * as ApexCharts from 'apexcharts';
|
|
|
|
export default Vue.extend({
|
|
props: ['user'],
|
|
data() {
|
|
return {
|
|
fetching: true,
|
|
data: [],
|
|
peak: null
|
|
};
|
|
},
|
|
mounted() {
|
|
(this as any).api('charts/user/notes', {
|
|
userId: this.user.id,
|
|
span: 'day',
|
|
limit: 21
|
|
}).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 < 21; i++) {
|
|
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: '90%',
|
|
endingShape: 'rounded'
|
|
}
|
|
},
|
|
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
|
|
}
|
|
}
|
|
});
|
|
|
|
chart.render();
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.mk-activity
|
|
max-width 600px
|
|
margin 0 auto
|
|
|
|
</style>
|