From 4491f4f77bb1f32af66c0ef55a1602689be1b9bd Mon Sep 17 00:00:00 2001
From: Ninette Adhikari <13760198+ninetteadhikari@users.noreply.github.com>
Date: Wed, 14 Feb 2024 14:11:41 +0100
Subject: [PATCH] feat: Add d3 with billboardjs

---
 .../html/measurement_chart_d3billboard.html   | 36 +++++++++++++++++++
 scripts/lib/build_perf/html/report.html       | 10 +++---
 2 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 scripts/lib/build_perf/html/measurement_chart_d3billboard.html
diff --git a/scripts/lib/build_perf/html/measurement_chart_d3billboard.html b/scripts/lib/build_perf/html/measurement_chart_d3billboard.html
new file mode 100644
index 00000000000..d04abe3af1d
--- /dev/null
+++ b/scripts/lib/build_perf/html/measurement_chart_d3billboard.html
@@ -0,0 +1,36 @@
+<script type="module">
+  // Get data 
+  const rawData = [
+        {% for sample in measurement.samples %}
+          [{{ sample.commit_num }}, {{ sample.mean.gv_value() }}],
+        {% endfor %}
+      ];
+
+  const convertToMinute = (time) => {
+    return time[0]*60 + time[1] + time[2]/60 + time[3]/3600;
+  }
+
+  // Assuming the array quantities are durations in the format [hours, minutes, seconds, milliseconds]
+  const dataX = rawData.map(([commit, quantity]) => {
+    return commit
+  });
+  dataX.unshift('commit');
+
+  const dataY = rawData.map(([commit, quantity]) => {
+    return Array.isArray(quantity) ? convertToMinute(quantity) : quantity
+  });
+  dataY.unshift('quantity');
+
+  // Example: https://naver.github.io/billboard.js/demo/#Chart.SimpleXYLineChart
+  const chart = bb.generate({
+    data: {
+      x: "commit",
+      columns: [dataX, dataY],
+      type: "line",
+    },
+    zoom: {
+      enabled: true,
+    },
+    bindto: {{chart_elem_id}}
+  });
+</script>
diff --git a/scripts/lib/build_perf/html/report.html b/scripts/lib/build_perf/html/report.html
index d1ba6f25788..2fad07d9a33 100644
--- a/scripts/lib/build_perf/html/report.html
+++ b/scripts/lib/build_perf/html/report.html
@@ -3,18 +3,16 @@
 <head>
 {# Scripts, for visualization#}
 <!--START-OF-SCRIPTS-->
-<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
-<script type="text/javascript">
-google.charts.load('current', {'packages':['corechart']});
-var chartsDrawing = 0;
-</script>
+<script src="https://cdn.jsdelivr.net/npm/d3@^6.1"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js@3.10.3/dist/billboard.css">
+<script src="https://cdn.jsdelivr.net/npm/billboard.js"></script>
 
 {# Render measurement result charts #}
 {% for test in test_data %}
   {% if test.status == 'SUCCESS' %}
     {% for measurement in test.measurements %}
       {% set chart_elem_id = test.name + '_' + measurement.name + '_chart' %}
-      {% include 'measurement_chart.html' %}
+      {% include 'measurement_chart_d3billboard.html' %}
     {% endfor %}
   {% endif %}
 {% endfor %}
