From 2e98aaa4b8c084fa587fa4881b67361c5ce165d4 Mon Sep 17 00:00:00 2001
From: Ninette Adhikari <13760198+ninetteadhikari@users.noreply.github.com>
Date: Fri, 12 Apr 2024 17:33:01 +0200
Subject: oe-build-perf-report: Improve report styling and add descriptions

Styling updates are added including page margin, labels for x and y axis, tooltip, and section descriptions.

(From OE-Core rev: c7984ea57c381c6758f110ad302ca82413d8dfc5)

Signed-off-by: Ninette Adhikari <ninette@thehoodiefirm.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>
---
 scripts/lib/build_perf/html/measurement_chart.html | 28 +++++++++++-----------
 1 file changed, 14 insertions(+), 14 deletions(-)

(limited to 'scripts/lib/build_perf/html/measurement_chart.html')

diff --git a/scripts/lib/build_perf/html/measurement_chart.html b/scripts/lib/build_perf/html/measurement_chart.html
index ffec3d09db..9acb3785e2 100644
--- a/scripts/lib/build_perf/html/measurement_chart.html
+++ b/scripts/lib/build_perf/html/measurement_chart.html
@@ -13,8 +13,10 @@
   // Convert raw data to the format: [time, value]
   const data = rawData.map(([commit, value, time]) => {
     return [
-      new Date(time * 1000).getTime(), // The Date object takes values in milliseconds rather than seconds. So to use a Unix timestamp we have to multiply it by 1000.
-      Array.isArray(value) ? convertToMinute(value) : value // Assuming the array values are duration in the format [hours, minutes, seconds, milliseconds]
+      // The Date object takes values in milliseconds rather than seconds. So to use a Unix timestamp we have to multiply it by 1000.
+      new Date(time * 1000).getTime(),
+      // Assuming the array values are duration in the format [hours, minutes, seconds, milliseconds]
+      Array.isArray(value) ? convertToMinute(value) : value
     ]
   });
 
@@ -22,16 +24,18 @@
   const option = {
     tooltip: {
       trigger: 'axis',
-      position: function (pt) {
-        return [pt[0], '10%'];
-      },
-      valueFormatter: (value) => value.toFixed(2)
+      valueFormatter: (value) => {
+        const hours = Math.floor(value/60)
+        const minutes = Math.floor(value % 60)
+        const seconds = Math.floor((value * 60) % 60)
+        return hours + ':' + minutes + ':' + seconds
+      }
     },
     xAxis: {
       type: 'time',
     },
     yAxis: {
-      name: '{{ measurement.value_type.quantity }}' == 'time' ? 'Duration (minutes)' : 'Disk size (MB)',
+      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);
@@ -42,14 +46,10 @@
     },
     dataZoom: [
       {
-        type: 'inside',
-        start: 0,
-        end: 100
+        type: 'slider',
+        xAxisIndex: 0,
+        filterMode: 'none'
       },
-      {
-        start: 0,
-        end: 100
-      }
     ],
     series: [
       {
-- 
cgit v1.2.3-54-g00ecf