scripts/buildperf: Add chart tabs for commit count/time

We triggered a test of an older revision to narrow down when performance
changed. The issue is that git's timestamps are granular to 1s. We'll
usually merge a set of commits at the same time so they will all have
the same timestamp for a block of them. This means that even if we use
the commit date, all the points can't be distinguished on the graph.
The author date doesn't work either as the commits are not merged in
author date order.

To solve this this patch adds the commit_count chart as a separate tab
next to the start_time chart

(From OE-Core rev: b263edd33f6c895238d81ef148c0445fcd0aa268)

Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

2 files changed, 156 insertions, 23 deletions

diff --git a/scripts/lib/build_perf/html/measurement_chart.html b/scripts/lib/build_perf/html/measurement_chart.html
index 05bd84e6ce..3cd713a2ee 100644
--- a/scripts/lib/build_perf/html/measurement_chart.html
+++ b/scripts/lib/build_perf/html/measurement_chart.html
@@ -26,26 +26,36 @@
     ]
   });
 
+  const commitCountList = rawData.map(([commit, value, time]) => {
+    return commit
+  });
+
+  const commitCountData = rawData.map(([commit, value, time]) => {
+    return updateValue(value)
+  });
+
   // Set chart options
-  const option = {
+  const option_start_time = {
     tooltip: {
       trigger: 'axis',
       enterable: true,
       position: function (point, params, dom, rect, size) {
-        return [point[0]-150, '10%'];
+        return [point[0]+20, '10%'];
       },
       formatter: function (param) {
         const value = param[0].value[1]
         const sample  = rawData.filter(([commit, dataValue]) => updateValue(dataValue) === value)
+        const formattedDate = new Date(sample[0][2] * 1000).toString().replace(/GMT[+-]\d{4}/, '').replace(/\(.*\)/, '(CEST)');
+
         // Add commit hash to the tooltip as a link
         const commitLink = `https://git.yoctoproject.org/poky/commit/?id=${sample[0][3]}`
         if ('{{ measurement.value_type.quantity }}' == 'time') {
           const hours = Math.floor(value/60)
           const minutes = Math.floor(value % 60)
           const seconds = Math.floor((value * 60) % 60)
-          return `<strong>Duration:</strong> ${hours}:${minutes}:${seconds}, <br/> <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>`
+          return `<strong>Duration:</strong> ${hours}:${minutes}:${seconds}, <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>, <br/> <strong>Start time:</strong> ${formattedDate}`
         }
-        return `<strong>Size:</strong> ${value.toFixed(2)} MB, <br/> <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>`
+        return `<strong>Size:</strong> ${value.toFixed(2)} MB, <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>, <br/> <strong>Start time:</strong> ${formattedDate}`
       ;}
     },
     xAxis: {
@@ -79,22 +89,82 @@
     ]
   };
 
+  const option_commit_count = {
+    tooltip: {
+      trigger: 'axis',
+      enterable: true,
+      position: function (point, params, dom, rect, size) {
+        return [point[0]+20, '10%'];
+      },
+      formatter: function (param) {
+        const value = param[0].value
+        const sample  = rawData.filter(([commit, dataValue]) => updateValue(dataValue) === value)
+        const formattedDate = new Date(sample[0][2] * 1000).toString().replace(/GMT[+-]\d{4}/, '').replace(/\(.*\)/, '(CEST)');
+        // Add commit hash to the tooltip as a link
+        const commitLink = `https://git.yoctoproject.org/poky/commit/?id=${sample[0][3]}`
+        if ('{{ measurement.value_type.quantity }}' == 'time') {
+          const hours = Math.floor(value/60)
+          const minutes = Math.floor(value % 60)
+          const seconds = Math.floor((value * 60) % 60)
+          return `<strong>Duration:</strong> ${hours}:${minutes}:${seconds}, <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>, <br/> <strong>Start time:</strong> ${formattedDate}`
+        }
+        return `<strong>Size:</strong> ${value.toFixed(2)} MB, <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>, <br/> <strong>Start time:</strong> ${formattedDate}`
+      ;}
+    },
+    xAxis: {
+      name: 'Commit count',
+      type: 'category',
+      data: commitCountList
+    },
+    yAxis: {
+      name: '{{ measurement.value_type.quantity }}' == 'time' ? 'Duration in minutes' : 'Disk size in MB',
+      type: 'value',
+      min: function(value) {
+        return Math.round(value.min - 0.5);
+      },
+      max: function(value) {
+        return Math.round(value.max + 0.5);
+      }
+    },
+    dataZoom: [
+      {
+        type: 'slider',
+        xAxisIndex: 0,
+        filterMode: 'none'
+      },
+    ],
+    series: [
+      {
+        name: '{{ measurement.value_type.quantity }}',
+        type: 'line',
+        step: 'start',
+        symbol: 'none',
+        data: commitCountData
+      }
+    ]
+  };
+
   // Draw chart
-  const chart_div = document.getElementById('{{ chart_elem_id }}');
-  // Set dark mode
-  let measurement_chart
-  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      measurement_chart= echarts.init(chart_div, 'dark', {
-      height: 320
-    });
-  } else {
-      measurement_chart= echarts.init(chart_div, null, {
-      height: 320
+  const draw_chart = (chart_id, option) => {
+    let chart_name
+    const chart_div = document.getElementById(chart_id);
+    // Set dark mode
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        chart_name= echarts.init(chart_div, 'dark', {
+        height: 320
+      });
+    } else {
+        chart_name= echarts.init(chart_div, null, {
+        height: 320
+      });
+    }
+    // Change chart size with browser resize
+    window.addEventListener('resize', function() {
+      chart_name.resize();
     });
+    return chart_name.setOption(option);
   }
-  // Change chart size with browser resize
-  window.addEventListener('resize', function() {
-    measurement_chart.resize();
-  });
-  measurement_chart.setOption(option);
+
+  draw_chart('{{ chart_elem_start_time_id }}', option_start_time)
+  draw_chart('{{ chart_elem_commit_count_id }}', option_commit_count)
 </script>
diff --git a/scripts/lib/build_perf/html/report.html b/scripts/lib/build_perf/html/report.html
index 537ed3ee52..28cd80e738 100644
--- a/scripts/lib/build_perf/html/report.html
+++ b/scripts/lib/build_perf/html/report.html
@@ -9,7 +9,8 @@
 {% for test in test_data %}
   {% if test.status == 'SUCCESS' %}
     {% for measurement in test.measurements %}
-      {% set chart_elem_id = test.name + '_' + measurement.name + '_chart' %}
+      {% set chart_elem_start_time_id = test.name + '_' + measurement.name + '_chart_start_time' %}
+      {% set chart_elem_commit_count_id = test.name + '_' + measurement.name + '_chart_commit_count' %}
       {% include 'measurement_chart.html' %}
     {% endfor %}
   {% endif %}
@@ -116,6 +117,22 @@ a {
 a:hover {
   color: #8080ff;
 }
+button {
+  background-color: #F3F4F6;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 10px 12px;
+  transition: 0.3s;
+  border-radius: 8px;
+  color: #3A4353;
+}
+button:hover {
+  background-color: #d6d9e0;
+}
+.tab button.active {
+  background-color: #d6d9e0;
+}
 @media (prefers-color-scheme: dark) {
   :root {
     --text: #e9e8fa;
@@ -126,6 +143,16 @@ a:hover {
     --trborder: #212936;
     --chartborder: #b1b0bf;
   }
+  button {
+    background-color: #28303E;
+    color: #fff;
+  }
+  button:hover {
+    background-color: #545a69;
+  }
+  .tab button.active {
+    background-color: #545a69;
+  }
 }
 </style>
 
@@ -233,7 +260,18 @@ a:hover {
             <tr>
               <td style="width: 75%">
                 {# Linechart #}
-                <div id="{{ test.name }}_{{ measurement.name }}_chart"></div>
+                <div class="tab {{ test.name }}_{{ measurement.name }}_tablinks">
+                  <button class="tablinks active" onclick="openChart(event, '{{ test.name }}_{{ measurement.name }}_start_time', '{{ test.name }}_{{ measurement.name }}')">Chart with start time</button>
+                  <button class="tablinks" onclick="openChart(event, '{{ test.name }}_{{ measurement.name }}_commit_count', '{{ test.name }}_{{ measurement.name }}')">Chart with commit count</button>
+                </div>
+                <div class="{{ test.name }}_{{ measurement.name }}_tabcontent">
+                  <div id="{{ test.name }}_{{ measurement.name }}_start_time" class="tabcontent" style="display: block;">
+                    <div id="{{ test.name }}_{{ measurement.name }}_chart_start_time"></div>
+                  </div>
+                  <div id="{{ test.name }}_{{ measurement.name }}_commit_count" class="tabcontent" style="display: none;">
+                    <div id="{{ test.name }}_{{ measurement.name }}_chart_commit_count"></div>
+                  </div>
+                </div>
               </td>
               <td>
                 {# Measurement statistics #}
@@ -340,6 +378,31 @@ a:hover {
       <div class="preformatted">{{ test.message }}</div>
     {% endif %}
   {% endfor %}
-</div></body>
-</html>
+</div>
 
+<script>
+function openChart(event, chartType, chartName) {
+  let i, tabcontents, tablinks
+  tabcontents = document.querySelectorAll(`.${chartName}_tabcontent > .tabcontent`);
+  tabcontents.forEach((tabcontent) => {
+    tabcontent.style.display = "none";
+  });
+
+  tablinks = document.querySelectorAll(`.${chartName}_tablinks > .tablinks`);
+  tablinks.forEach((tabLink) => {
+    tabLink.classList.remove('active');
+  });
+
+  const targetTab = document.getElementById(chartType)
+  targetTab.style.display = "block";
+
+  // Call resize on the ECharts instance to redraw the chart
+  const chartContainer = targetTab.querySelector('div')
+  echarts.init(chartContainer).resize();
+
+  event.currentTarget.classList.add('active');
+}
+</script>
+
+</body>
+</html>