Use real dates for rendering metrics chart.

By changing this chart to actually use a time axis, it provides better
axis labels and can also ensure that if the data contains any gaps those
are rendered properly instead of it looking like all missing data is
actually present.

assets/javascripts/metrics/components/UsageChart.js

@@ -1,7 +1,6 @@
 import * as echarts from "echarts";
 import debounce from "lodash-es/debounce";
 import {
-  computed,
   defineComponent,
   onMounted,
   ref,
@@ -34,33 +33,20 @@ export default defineComponent({
     hitsTotal: Number,
     activeApiKeys: Array,
     activeApiKeysTotal: Number,
+    dateFormatOptions: Object,
   },
 
   setup(props) {
-    const chartData = computed(() => {
-      const data = {
-        labels: [],
-        hits: [],
-        activeApiKeys: [],
-      };
-
-      props.hits.forEach((day) => {
-        data.labels.push(day[0]);
-        data.hits.push(day[1]);
-      });
-
-      props.activeApiKeys.forEach((day) => {
-        data.activeApiKeys.push(day[1]);
-      });
-
-      return data;
-    });
-
     const chartEl = ref();
     let chart;
     onMounted(() => {
       const colors = ["#30A64A", "#0E5FC2"];
 
+      const dateFormatter = new Intl.DateTimeFormat(
+        undefined,
+        props.dateFormatOptions,
+      );
+
       chart = echarts.init(chartEl.value);
       chart.setOption({
         animation: false,
@@ -73,10 +59,17 @@ export default defineComponent({
         },
         tooltip: {
           trigger: "axis",
+          axisPointer: {
+            label: {
+              formatter: (params) => {
+                const date = new Date(params.value);
+                return dateFormatter.format(date);
+              },
+            },
+          },
         },
         xAxis: {
-          type: "category",
-          data: chartData.value.labels,
+          type: "time",
           axisLine: {
             show: false,
           },
@@ -109,34 +102,34 @@ export default defineComponent({
             name: "Hits",
             type: "line",
             yAxisIndex: 0,
-            data: chartData.value.hits,
+            data: props.hits,
+            label: {
+              formatter: "{b}: {@score}",
+            },
           },
           {
             name: "Unique API Keys",
             type: "line",
             yAxisIndex: 1,
-            data: chartData.value.activeApiKeys,
+            data: props.activeApiKeys,
           },
         ],
       });
 
       window.addEventListener("resize", debounce(chart.resize));
     });
 
-    watch(chartData, () => {
+    watch(props, () => {
       if (chart) {
         chart.setOption({
-          xAxis: {
-            data: chartData.value.labels,
-          },
           series: [
             {
               name: "Hits",
-              data: chartData.value.hits,
+              data: props.hits,
             },
             {
               name: "Unique API Keys",
-              data: chartData.value.activeApiKeys,
+              data: props.activeApiKeys,
             },
           ],
         });

assets/javascripts/metrics/views/Metrics.js

@@ -35,6 +35,7 @@ export default defineComponent({
             v-bind:hits-total="store.hitsRecentTotal(selectedOrganization)"
             v-bind:active-api-keys="store.activeApiKeysRecentDaily(selectedOrganization)"
             v-bind:active-api-keys-total="store.activeApiKeysRecentTotal(selectedOrganization)"
+            v-bind:date-format-options="{ year: 'numeric', month: 'long', day: 'numeric' }"
             />
         </div>
         <div class="desktop:grid-col">
@@ -44,6 +45,7 @@ export default defineComponent({
             v-bind:hits-total="store.hitsTotal(selectedOrganization)"
             v-bind:active-api-keys="store.activeApiKeysMonthly(selectedOrganization)"
             v-bind:active-api-keys-total="store.activeApiKeysTotal(selectedOrganization)"
+            v-bind:date-format-options="{ year: 'numeric', month: 'long' }"
             />
         </div>
       </div>

docker-compose.ci.yml

@@ -1,4 +1,3 @@
-version: "3"
 services:
   web:
     build: