From 0cfaec6ad67de3c1926beec10ea6c5089c849678 Mon Sep 17 00:00:00 2001 From: Zainan Victor Zhou Date: Sun, 21 Jun 2020 13:52:44 -0700 Subject: [PATCH] feat(chart): allow query granularity by week --- components/TimeSeriesBarChart.vue | 22 ++++++++++++++++++---- server/routers/api/stats.ts | 16 ++++++++++++++-- 2 files changed, 32 insertions(+), 6 deletions(-) diff --git a/components/TimeSeriesBarChart.vue b/components/TimeSeriesBarChart.vue index 7dfacc47..8e9ecc9d 100644 --- a/components/TimeSeriesBarChart.vue +++ b/components/TimeSeriesBarChart.vue @@ -1,6 +1,6 @@ @@ -18,14 +27,15 @@ @Component({ data() { return { - breakdownBy: null + breakdownBy: null, + granularity: "month", } } }) export default class TimeSeriesBarChart extends Vue { chart:any; breakdownBy:any = 'feed'; - + granularity:any = "month"; async mounted() { if (this.$route.query.breakdownBy) this.breakdownBy = this.$route.query.breakdownBy; await this.createSvg(); @@ -48,7 +58,8 @@ createSvg = async function () { let theme = this.computeColor(); - let url = '/api/stats/timeseries/labels?byMonth=1'; + let url = '/api/stats/timeseries/labels?'; + if (this.granularity) url += `granularity=${this.granularity}`; if (this.breakdownBy) url += `&breakdownBy=${this.breakdownBy}`; if (this.$route.query.wikiUserName) { @@ -133,6 +144,9 @@ yAxes: [{ stacked: true }] + }, + animation: { + duration: 2000 } } }); diff --git a/server/routers/api/stats.ts b/server/routers/api/stats.ts index 24c53c2e..2f6bbece 100644 --- a/server/routers/api/stats.ts +++ b/server/routers/api/stats.ts @@ -113,7 +113,7 @@ const labelsTimeSeries = async (req, res) => { groupBy[req.query.breakdownBy] = `$${req.query.breakdownBy}`; } - if (req.query.byDay) { + if (req.query.granularity === 'day') { groupBy.date = { "$dateToString": { "format": "%Y-%m-%d", @@ -125,7 +125,7 @@ const labelsTimeSeries = async (req, res) => { } }, } - } else if (req.query.byMonth) { + } else if (req.query.granularity === 'month') { groupBy.date = { "$dateToString": { "format": "%Y-%m", @@ -137,6 +137,18 @@ const labelsTimeSeries = async (req, res) => { } }, } + } else if (req.query.granularity === 'week') { + groupBy.date = { + "$dateToString": { + "format": "%Y-w%V", + "date": { + "$add": [ + new Date(0), + {"$multiply": [1000, "$timestamp"]} + ] + } + }, + } } if (req.query.wiki) {