1 files changed, 98 insertions, 30 deletions

diff --git a/scripts/lib/build_perf/html/measurement_chart.html b/scripts/lib/build_perf/html/measurement_chart.html
index ad4a93ed02..86435273cf 100644
--- a/scripts/lib/build_perf/html/measurement_chart.html
+++ b/scripts/lib/build_perf/html/measurement_chart.html
@@ -2,7 +2,7 @@
   // Get raw data
   const rawData = [
     {% for sample in measurement.samples %}
-      [{{ sample.commit_num }}, {{ sample.mean.gv_value() }}, {{ sample.start_time }}],
+      [{{ sample.commit_num }}, {{ sample.mean.gv_value() }}, {{ sample.start_time }}, '{{sample.commit}}'],
     {% endfor %}
   ];
 
@@ -26,27 +26,37 @@
     ]
   });
 
+  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',
-      valueFormatter: (value) => {
-        const commitNumber  = rawData.filter(([commit, dataValue, time]) => updateValue(dataValue) === value)
+      enterable: true,
+      position: function (point, params, dom, rect, size) {
+        return [point[0], '0%'];
+      },
+      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 [
-                hours + ':' + minutes + ':' + seconds + ', ' +
-                'commit number: ' + commitNumber[0][0]
-              ]
+          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 [
-          value.toFixed(2) + ' MB' + ', ' +
-          'commit number: ' + commitNumber[0][0]
-        ]
-      },
-
+        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: {
       type: 'time',
@@ -72,29 +82,87 @@
       {
         name: '{{ measurement.value_type.quantity }}',
         type: 'line',
-        step: 'start',
         symbol: 'none',
         data: data
       }
     ]
   };
 
+  const option_commit_count = {
+    tooltip: {
+      trigger: 'axis',
+      enterable: true,
+      position: function (point, params, dom, rect, size) {
+        return [point[0], '0%'];
+      },
+      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',
+        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>