[view] Outstanding reports char day view

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

@@ -1,6 +1,6 @@
 <script>
 import _ from "lodash";
-import { endOfMonth, format, subMonths } from "date-fns";
+import { endOfMonth, format, getDate, subDays, subMonths } from "date-fns";
 import { Line, mixins } from "vue-chartjs";
 import ChartDataLabels from "chartjs-plugin-datalabels";
 
@@ -99,8 +99,16 @@ export default {
 
         this.setChartData();
 
-        if (newSize > oldSize) {
-          this.fetchData(this.dates.slice(oldSize));
+        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);
+          }
+
+          this.fetchData(dates);
         }
       }, 500)
     }
@@ -127,13 +135,22 @@ export default {
       if (isNaN(lastMonth) || lastMonth <=0)
         return;
 
-      const startOfCurrentMonth = endOfMonth(new Date());
-
-      this.dates = [ ...new Array(lastMonth).keys() ].map(i =>
-        subMonths(startOfCurrentMonth, i));
+      let dateFormat = "yyyy. MMM";
+
+      // If only 1 month is given, the chart can show a daily view.
+      if (lastMonth === 1) {
+        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.chartData.labels = [ ...this.dates ].reverse().map((d, idx) => {
-        const date = format(d, "yyyy MMM");
+        const date = format(d, dateFormat);
         if (idx === this.dates.length - 1)
           return `${date} (Current)`;
         return date;

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

@@ -86,7 +86,7 @@
               </template>
 
               <template v-slot:append-outer>
-                months.
+                month(s).
               </template>
             </v-text-field>
           </div>
@@ -202,7 +202,7 @@ export default {
   position: absolute;
   right: 50px;
   top: 0px;
-  z-index: 1000;
+  z-index: 100;
 
   .last-month {
     width: 180px;