closes #129. Add weekly and monthly dids (#220)

package.json

@@ -25,7 +25,7 @@
 		"chart.js": "3.9.1",
 		"core-js": "^3.31.0",
 		"d3": "^7.8.5",
-		"dayjs": "^1.11.0",
+		"dayjs": "^1.11.9",
 		"lodash": "^4.17.21",
 		"qrcode.vue": "^3.3.3",
 		"vee-validate": "^4.5.7",

src/assets/scss/_home.scss

@@ -52,6 +52,22 @@
   }
 }
 
-#growthwrapper {
-  height: 850px;
+#networkstats {
+  h2 {
+    padding-bottom: 10px;
+  }
+}
+
+.flex-grid-thirds {
+  display: flex;
+  justify-content: space-between;
+}
+.flex-grid-thirds .col {
+  flex: 1;
+  width: 30%;
 }
+
+.chartwrapper {
+  height: 500px;
+  padding: 10px;
+}

src/components/index.ts

@@ -4,5 +4,6 @@ export { default as Accordion } from "./Accordion.vue";
 export { default as AddContact } from "./AddContact.vue";
 export { default as AppFooter } from "./AppFooter.vue";
 export { default as AppHeader } from "./AppHeader.vue";
-export { default as SearchInput } from "./SearchInput.vue";
 export { default as PulseLoader } from "./PulseLoader.vue";
+export { default as SearchInput } from "./SearchInput.vue";
+

src/views/Home.vue

@@ -21,12 +21,25 @@
       <img src="@/assets/images/Illustration_desktop.svg" alt="desktop" />
     </div>
   </div>
+
   <div id="networkstats" class="mt-5">
-    <div class="content networkstats">
-      <h2>Network Statistics</h2>
-      <h3>Number of Verida DIDs: {{ activeDIDs }}</h3>
-      <div id="growthwrapper">
-        <canvas id="growthchart"></canvas>
+    <h2>Network Statistics</h2>
+    <h3>Total Verida DIDs: {{ activeDIDs }}</h3>
+    <div class="content networkstats flex-grid-thirds">
+      <div class="col">
+        <div class="chartwrapper">
+          <canvas id="growthchart"></canvas>
+        </div>
+      </div>
+      <div class="col">
+        <div class="chartwrapper">
+          <canvas id="weekgrowthchart"></canvas>
+        </div>
+      </div>
+      <div class="col">
+        <div class="chartwrapper">
+          <canvas id="monthgrowthchart"></canvas>
+        </div>
       </div>
     </div>
   </div>
@@ -35,6 +48,10 @@
 import { PulseLoader, SearchInput, SearchList } from "@/components";
 import { Chart, registerables } from "chart.js";
 import { csv } from "d3";
+import dayjs from "dayjs";
+import advancedFormat from "dayjs/plugin/advancedFormat";
+import isoWeek from "dayjs/plugin/isoWeek";
+import weekOfYear from "dayjs/plugin/weekOfYear";
 import { groupBy } from "lodash";
 import { defineComponent } from "vue";
 import { mapState } from "vuex";
@@ -43,6 +60,11 @@ type RawDataRow = { datetime_utc: string; activedids: string };
 type RawData = RawDataRow[];
 type NormalizedDataRow = { x: string; y: number };
 type NormalizedData = NormalizedDataRow[];
+type SortPeriod = "week" | "month";
+
+dayjs.extend(advancedFormat);
+dayjs.extend(weekOfYear);
+dayjs.extend(isoWeek);
 
 Chart.register(...registerables);
 
@@ -119,12 +141,66 @@ export default defineComponent({
 
       return results;
     },
-    makeChart(normalizedData: NormalizedData) {
-      new Chart("growthchart", {
+    getNormalizeDataOverPeriod(
+      normalizedDailyData: NormalizedData,
+      period: SortPeriod
+    ): NormalizedData {
+      const dataGroupedByPeriod = groupBy(normalizedDailyData, (row) => {
+        let day = dayjs(row.x, "YYYY-MM-DD");
+
+        // Careful that this string sorts correctly over year boundries
+        if (period == "week") {
+          return day.format("YYYY WW"); // 2 digit week of year
+        } else {
+          return day.format("YYYY MM"); // 2 digit month of year
+        }
+      });
+
+      const normalizedPeriodicData: NormalizedData = [];
+      for (const groupKey of Object.keys(dataGroupedByPeriod).sort()) {
+        const periodData = dataGroupedByPeriod[groupKey];
+
+        // periodData has a row for each day, sorted by date.
+        // Get the last row
+        const lastDayData = periodData[periodData.length - 1];
+        const firstDayData = periodData[0];
+        const day = dayjs(firstDayData.x, "YYYY-MM-DD");
+
+        let displayStr: string;
+        if (period == "week") {
+          displayStr = day.format("DD MMM YYYY");
+        } else {
+          displayStr = day.format("MMM YYYY");
+        }
+        normalizedPeriodicData.push({ x: displayStr, y: lastDayData.y });
+      }
+
+      return normalizedPeriodicData;
+    },
+    makeDIDByDateChart(
+      normalizedData: NormalizedData,
+      targetCSSID: string,
+      title: string
+    ) {
+      new Chart(targetCSSID, {
         type: "line",
         options: {
           responsive: true,
           maintainAspectRatio: false,
+          plugins: {
+            title: {
+              display: true,
+              text: title,
+              position: "top",
+              font: {
+                size: 18,
+                weight: "bold",
+              },
+            },
+            legend: {
+              display: false,
+            },
+          },
         },
         data: {
           datasets: [
@@ -139,12 +215,69 @@ export default defineComponent({
         },
       });
     },
+    makeDIDBarChart(
+      normalizedData: NormalizedData,
+      targetCSSID: string,
+      title: string
+    ) {
+      new Chart(targetCSSID, {
+        type: "bar",
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          backgroundColor: "rgb(67, 229, 216)",
+          plugins: {
+            title: {
+              display: true,
+              text: title,
+              position: "top",
+              font: {
+                size: 18,
+                weight: "bold",
+              },
+            },
+            legend: {
+              display: false,
+            },
+          },
+        },
+        data: {
+          datasets: [
+            {
+              label: "Verida DIDs",
+              data: normalizedData,
+              borderColor: "rgb(67, 229, 216)",
+            },
+          ],
+        },
+      });
+    },
     handleStatsData(data: RawData) {
-      const normalizedData = this.normalizeData(data);
-      const mostRecentRecord = normalizedData[normalizedData.length - 1];
+      const normalizedDailyData = this.normalizeData(data);
+      const mostRecentRecord =
+        normalizedDailyData[normalizedDailyData.length - 1];
       this.activeDIDs = mostRecentRecord.y;
 
-      this.makeChart(normalizedData);
+      // Daily data
+      this.makeDIDBarChart(
+        normalizedDailyData,
+        "growthchart",
+        "Total Verida DIDs, Daily"
+      );
+
+      // Weekly data
+      this.makeDIDBarChart(
+        this.getNormalizeDataOverPeriod(normalizedDailyData, "week"),
+        "weekgrowthchart",
+        "Total Verida DIDs, Weekly"
+      );
+
+      // Monthly data
+      this.makeDIDBarChart(
+        this.getNormalizeDataOverPeriod(normalizedDailyData, "month"),
+        "monthgrowthchart",
+        "Total Verida DIDs, Monthly"
+      );
     },
   },
   computed: {

yarn.lock

@@ -5957,10 +5957,10 @@ dayjs@^1.10.7:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
   integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
 
-dayjs@^1.11.0:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.2.tgz#fa0f5223ef0d6724b3d8327134890cfe3d72fbe5"
-  integrity sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw==
+dayjs@^1.11.9:
+  version "1.11.9"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.9.tgz#9ca491933fadd0a60a2c19f6c237c03517d71d1a"
+  integrity sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==
 
 deasync@^0.1.15:
   version "0.1.26"