Add test history calendar view (#3139)

When viewing a particular test, it's currently possible to view prior
test statuses on a scatter plot. A scatter plot with binary is not ideal
for a multitude of reasons, so this PR re-implements it to instead show
the data on a calendar plot. Days with only passing tests are shown in
free, days with only failing tests are shown in red, and days with both
passing and failing tests are shown in green/red. Clicking on a day
takes users to the test query page with appropriate filters set for
further exploration. Further refactoring of this plot and similar plots
is yet to come, but these changes are sufficient in the short term. I
also intend to add a visual difference test for this component once I
implement visual difference testing.

Before:
<img width="500" alt="image"
src="https://github.com/user-attachments/assets/64b2e045-85b3-4494-9978-80db0761683b"
/>


After:
<img width="500" alt="image"
src="https://github.com/user-attachments/assets/68113d2a-48ee-4e33-a3ed-83a944182c2b"
/>

Author: williamjallen

jest.config.js

@@ -9,4 +9,7 @@ module.exports = {
     '^.+\\.js$': 'babel-jest',
     '^.+\\.vue$': '@vue/vue3-jest',
   },
+  transformIgnorePatterns: [
+    '/node_modules/(?!echarts|zrender)/',
+  ],
 };

package-lock.json

@@ -39,6 +39,7 @@
     "bootstrap": "^4.6.2",
     "d3": "^3.5.17",
     "daisyui": "^4.12.23",
+    "echarts": "^6.0.0",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^10.5.0",
     "flot": "^4.2.6",

package.json

@@ -216,11 +216,19 @@
 
       <!-- Graph -->
       <div
-        v-show="showgraph"
+        v-show="showgraph && graphSelection !== 'status'"
         id="graph_holder"
       />
       <div id="tooltip" />
 
+      <test-history-plot
+        v-if="graphSelection === 'status'"
+        :base-url="$baseURL"
+        :project-id="cdash.projectid"
+        :project-name="cdash.projectname"
+        :test-name="cdash.test.test"
+      />
+
       <br>
       <b>Test output</b>
       <pre
@@ -241,9 +249,16 @@
 import ApiLoader from './shared/ApiLoader';
 import QueryParams from './shared/QueryParams';
 import TextMutator from './shared/TextMutator';
+import {DateTime} from 'luxon';
+import TestHistoryPlot from './shared/TestHistoryPlot.vue';
+
 export default {
   name: 'TestDetails',
 
+  components: {
+    TestHistoryPlot,
+  },
+
   data () {
     return {
       // API results.
@@ -342,6 +357,11 @@ export default {
         }
       }
 
+      if (this.graphSelection === 'status') {
+        // The passing/failing graph is special because it loads its own data and handles rendering itself.
+        return;
+      }
+
       const testname = this.cdash.test.test;
       const buildid = this.cdash.test.buildid;
       const measurementname = this.graphSelection;
@@ -456,13 +476,12 @@ export default {
 
       const plot = $.plot(
         $('#graph_holder'), chart_data, options);
-      const date_formatter = d3.time.format('%b %d, %I:%M:%S %p');
 
       // Show tooltip on hover.
       $('#graph_holder').bind('plothover', (event, pos, item) => {
         if (item) {
-          const x = date_formatter(new Date(item.datapoint[0])),
-            y = item.datapoint[1].toFixed(2);
+          const x = DateTime.fromMillis(item.datapoint[0]).toFormat('LLL dd, hh:mm:ss a');
+          const y = item.datapoint[1].toFixed(2);
 
           $('#tooltip').html(
             `<b>${x}</b><br/>${