feat: Add d3 with billboardjs

neighbourhoodie · Mar 7, 2024 · 4491f4f · 4491f4f
1 parent 002a6bb
commit 4491f4f
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 6 deletions.
diff --git a/scripts/lib/build_perf/html/measurement_chart_d3billboard.html 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
@@ -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/[email protected]/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 %}