feat(chart): allow query granularity by week

google · Jun 21, 2020 · 0cfaec6 · 0cfaec6
1 parent 45fad91
commit 0cfaec6
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git a/components/TimeSeriesBarChart.vue b/components/TimeSeriesBarChart.vue
@@ -1,13 +1,22 @@
 <template>
   <section>
-    <b-form-select hidden class="mt-4"
+    <b-form-select class="mt-4"
                    @click.native.stop=''
                    v-model="breakdownBy"
                    v-on:change="createSvg()">
       <option :value="null">None</option>
       <option :value="`judgement`">Judgement</option>
       <option :value="`feed`">Feed</option>
     </b-form-select>
+
+    <b-form-select class="mt-4"
+                   @click.native.stop=''
+                   v-model="granularity"
+                   v-on:change="createSvg()">
+      <option :value="`month`">Month</option>
+      <option :value="`week`">Week</option>
+      <option :value="`day`">Day</option>
+    </b-form-select>
     <canvas id="myChart" class="w-100" style="height:400px"></canvas>
   </section>
 </template>
@@ -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
@@ -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) {