From 7e4a9aec58a6ee70e6a76c6ad5497af6f7d3f247 Mon Sep 17 00:00:00 2001
From: Nick Muerdter <12112+GUI@users.noreply.github.com>
Date: Thu, 18 Jul 2024 16:13:24 -0600
Subject: [PATCH] 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.
---
 .../metrics/components/UsageChart.js          | 53 ++++++++-----------
 assets/javascripts/metrics/views/Metrics.js   |  2 +
 docker-compose.ci.yml                         |  1 -
 3 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/assets/javascripts/metrics/components/UsageChart.js b/assets/javascripts/metrics/components/UsageChart.js
index c0818bdd..9af03f3d 100644
--- a/assets/javascripts/metrics/components/UsageChart.js
+++ b/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,13 +102,16 @@ 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,
           },
         ],
       });
@@ -123,20 +119,17 @@ export default defineComponent({
       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,
             },
           ],
         });
diff --git a/assets/javascripts/metrics/views/Metrics.js b/assets/javascripts/metrics/views/Metrics.js
index e991654f..4185f0b1 100644
--- a/assets/javascripts/metrics/views/Metrics.js
+++ b/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>
diff --git a/docker-compose.ci.yml b/docker-compose.ci.yml
index 466635e9..2c2adf68 100644
--- a/docker-compose.ci.yml
+++ b/docker-compose.ci.yml
@@ -1,4 +1,3 @@
-version: "3"
 services:
   web:
     build: