This commit is contained in:
syuilo 2018-06-09 11:40:42 +09:00
parent ccb9ed3489
commit 42a4f92cfa
2 changed files with 9 additions and 9 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<svg viewBox="0 0 21 7" preserveAspectRatio="none"> <svg viewBox="0 0 21 7">
<rect v-for="record in data" class="day" <rect v-for="record in data" class="day"
width="1" height="1" width="1" height="1"
:x="record.x" :y="record.date.weekday" :x="record.x" :y="record.date.weekday"
@ -15,7 +15,7 @@
style="pointer-events: none;"/> style="pointer-events: none;"/>
<rect class="today" <rect class="today"
width="1" height="1" width="1" height="1"
:x="data[data.length - 1].x" :y="data[data.length - 1].date.weekday" :x="data[0].x" :y="data[0].date.weekday"
rx="1" ry="1" rx="1" ry="1"
fill="none" fill="none"
stroke-width="0.1" stroke-width="0.1"
@ -33,7 +33,7 @@ export default Vue.extend({
const peak = Math.max.apply(null, this.data.map(d => d.total)); const peak = Math.max.apply(null, this.data.map(d => d.total));
let x = 0; let x = 0;
this.data.reverse().forEach(d => { this.data.slice().reverse().forEach(d => {
d.x = x; d.x = x;
d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay(); d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();

View File

@ -1,5 +1,5 @@
<template> <template>
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" preserveAspectRatio="none" @mousedown.prevent="onMousedown"> <svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" @mousedown.prevent="onMousedown">
<title>%i18n:@total%<br/>%i18n:@notes%<br/>%i18n:@replies%<br/>%i18n:@renotes%</title> <title>%i18n:@total%<br/>%i18n:@notes%<br/>%i18n:@replies%<br/>%i18n:@renotes%</title>
<polyline <polyline
:points="pointsNote" :points="pointsNote"
@ -55,7 +55,6 @@ export default Vue.extend({
}; };
}, },
created() { created() {
this.data.reverse();
this.data.forEach(d => d.total = d.notes + d.replies + d.renotes); this.data.forEach(d => d.total = d.notes + d.replies + d.renotes);
this.render(); this.render();
}, },
@ -63,10 +62,11 @@ export default Vue.extend({
render() { render() {
const peak = Math.max.apply(null, this.data.map(d => d.total)); const peak = Math.max.apply(null, this.data.map(d => d.total));
if (peak != 0) { if (peak != 0) {
this.pointsNote = this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.notes / peak)) * this.viewBoxY}`).join(' '); const data = this.data.slice().reverse();
this.pointsReply = this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.replies / peak)) * this.viewBoxY}`).join(' '); this.pointsNote = data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.notes / peak)) * this.viewBoxY}`).join(' ');
this.pointsRenote = this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.renotes / peak)) * this.viewBoxY}`).join(' '); this.pointsReply = data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.replies / peak)) * this.viewBoxY}`).join(' ');
this.pointsTotal = this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' '); this.pointsRenote = data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.renotes / peak)) * this.viewBoxY}`).join(' ');
this.pointsTotal = data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ');
} }
}, },
onMousedown(e) { onMousedown(e) {