[gui] Allow to change the outstanding reports chart resolution

web/server/vue-cli/src/components/Statistics/Overview/OutstandingReportsChart.vue

@@ -1,6 +1,9 @@
 <script>
 import _ from "lodash";
-import { endOfMonth, format, getDate, subDays, subMonths } from "date-fns";
+import {
+  endOfMonth, endOfWeek, endOfYear, format, subDays, subMonths, subWeeks,
+  subYears
+} from "date-fns";
 import { Line, mixins } from "vue-chartjs";
 import ChartDataLabels from "chartjs-plugin-datalabels";
 
@@ -17,7 +20,8 @@ export default {
   props: {
     bus: { type: Object, required: true },
     getStatisticsFilters: { type: Function, required: true },
-    lastMonth: { type: String, required: true }
+    interval: { type: String, required: true },
+    resolution: { type: String, required: true },
   },
   data() {
     return {
@@ -88,25 +92,22 @@ export default {
   },
 
   watch: {
-    lastMonth: {
+    interval: {
       handler: _.debounce(function () {
         const oldSize = this.dates.length;
-        const newSize = parseInt(this.lastMonth);
+        const newSize = parseInt(this.interval);
 
         this.setChartData();
 
-        if (newSize > oldSize || newSize === 1) {
-          let dates = this.dates;
-
-          // If the granularity is month, we need to fetch data only for new
-          // dates.
-          if (newSize !== 1 && oldSize !== 1) {
-            dates = this.dates.slice(oldSize);
-          }
-
+        if (newSize > oldSize) {
+          const dates = this.dates.slice(oldSize);
           this.fetchData(dates);
         }
       }, 500)
+    },
+    resolution() {
+      this.setChartData();
+      this.fetchData(this.dates);
     }
   },
 
@@ -127,22 +128,35 @@ export default {
 
   methods: {
     setChartData() {
-      const lastMonth = parseInt(this.lastMonth);
-      if (isNaN(lastMonth) || lastMonth <=0)
+      const interval = parseInt(this.interval);
+      if (isNaN(interval) || interval <=0)
         return;
 
-      let dateFormat = "yyyy. MMM";
+      let dateFormat = "yyyy. MMM. dd";
 
-      // If only 1 month is given, the chart can show a daily view.
-      if (lastMonth === 1) {
+      if (this.resolution === "days") {
         const today = new Date();
-        const day = getDate(today);
-        this.dates = [ ...new Array(day).keys() ].map(i => subDays(today, i));
-        dateFormat = "yyyy. MMM. dd";
-      } else {
-        const startOfCurrentMonth = endOfMonth(new Date());
-        this.dates = [ ...new Array(lastMonth).keys() ].map(i =>
-          subMonths(startOfCurrentMonth, i));
+        this.dates = [ ...new Array(interval).keys() ].map(i =>
+          subDays(today, i));
+      }
+      else if (this.resolution === "weeks") {
+        const endOfCurrentWeek = endOfWeek(new Date(), { weekStartsOn: 1 });
+        this.dates = [ ...new Array(interval).keys() ].map(i =>
+          subWeeks(endOfCurrentWeek, i));
+      }
+      else if (this.resolution === "months") {
+        const endOfCurrentMonth = endOfMonth(new Date());
+        this.dates = [ ...new Array(interval).keys() ].map(i =>
+          subMonths(endOfCurrentMonth, i));
+
+        dateFormat = "yyyy. MMM";
+      }
+      else if (this.resolution === "years") {
+        const endOfCurrentYear = endOfYear(new Date());
+        this.dates = [ ...new Array(interval).keys() ].map(i =>
+          subYears(endOfCurrentYear, i));
+
+        dateFormat = "yyyy";
       }
 
       this.chartData.labels = [ ...this.dates ].reverse().map((d, idx) => {

web/server/vue-cli/src/components/Statistics/Overview/Overview.vue

@@ -73,28 +73,43 @@
             </tooltip-help-icon>
           </v-card-title>
 
-          <div class="last-month-selector">
+          <v-form ref="form" class="interval-selector">
             <v-text-field
-              v-model="lastMonth"
-              class="last-month align-center"
+              :value="interval"
+              class="interval align-center"
               type="number"
               hide-details
               dense
               solo
+              @input="setInterval"
             >
               <template v-slot:prepend>
                 Last
               </template>
 
               <template v-slot:append-outer>
-                month(s).
+                <v-select
+                  :value="resolution"
+                  class="resolution"
+                  :items="resolutions"
+                  label="Resolution"
+                  hide-details
+                  dense
+                  solo
+                  @input="setResolution"
+                />
               </template>
             </v-text-field>
-          </div>
+
+            <div v-if="intervalError" class="red--text">
+              {{ intervalError }}
+            </div>
+          </v-form>
           <outstanding-reports-chart
             :bus="bus"
             :get-statistics-filters="getStatisticsFilters"
-            :last-month="lastMonth"
+            :interval="interval"
+            :resolution="resolution"
             :styles="{
               height: '400px',
               position: 'relative'
@@ -116,6 +131,7 @@
 </template>
 
 <script>
+import _ from "lodash";
 import { ccService, handleThriftError } from "@cc-api";
 import { DateMixin } from "@/mixins";
 import { BaseStatistics } from "@/components/Statistics";
@@ -139,11 +155,66 @@ export default {
   },
   mixins: [ BaseStatistics, DateMixin ],
   data() {
+    const defaultInterval = "7";
+
+    const resolutions = [ "days", "weeks", "months", "years" ];
+    const defaultResolution = resolutions[0];
+
+
+    let interval = this.$route.query["interval"];
+    if (this.validateIntervalValue(interval)) {
+      interval = defaultInterval;
+    }
+
+    let resolution = this.$route.query["resolution"];
+    if (!resolution || !resolutions.includes(resolution)) {
+      resolution = defaultResolution;
+    }
+
     return {
-      lastMonth: "6"
+      intervalError: null,
+      interval,
+      resolutions,
+      resolution
     };
   },
   methods: {
+    validateIntervalValue(val) {
+      if (!val || isNaN(parseInt(val))) {
+        return "Number is required!";
+      }
+
+      if (parseInt(val) > 31) {
+        return "Interval value should between 1-31!";
+      }
+
+      return null;
+    },
+
+    setInterval: _.debounce(function (val) {
+      this.intervalError = this.validateIntervalValue(val);
+      if (this.intervalError) return;
+
+      this.interval = val;
+      this.updateUrl();
+
+      this.intervalError = null;
+    }, 300),
+
+    setResolution(val) {
+      this.resolution = val;
+      this.updateUrl();
+    },
+
+    updateUrl() {
+      const queryParams = Object.assign({}, this.$route.query, {
+        interval: this.interval,
+        resolution: this.resolution
+      });
+
+      this.$router.replace({ query: queryParams }).catch(() => {});
+    },
+
     getNumberOfReports(runIds, reportFilter, cmpData) {
       return new Promise(resolve => {
         ccService.getClient().getRunResultCount(runIds, reportFilter, cmpData,
@@ -192,16 +263,19 @@ export default {
   cursor: pointer;
 }
 
-.last-month-selector {
+.interval-selector {
   position: absolute;
   right: 50px;
   top: 0px;
   z-index: 100;
 
-  .last-month {
-    width: 180px;
+  .interval {
+    width: 250px;
     border: 1px dashed grey;
     padding: 6px;
   }
+  .resolution {
+    width: 120px;
+  }
 }
 </style>