refactor home page to use chart.js

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: mattip

speed_pypy/templates/home.html

@@ -29,12 +29,12 @@ <h2>Comparison</h2>
   {% if show_historical %}
   <div id="historical">
     <h3>How fast is {{ default_exe.project }}?</h3>
-    <div id="baseline-comparison-plot"></div>
+    <div id="baseline-comparison-plot" style="position:relative;height:400px;"></div>
     <p class="plot-caption">Plot 1: The above plot represents {{ default_exe.project }} ({{ default_exe }}) benchmark times normalized to {{ baseline }}. Smaller is better.</p>
     <p>It depends greatly on the type of task being performed. The geometric average of all benchmarks is <span id="geomean"></span> or <strong id="geofaster"></strong> times <em>faster</em> than {{ baseline }}</p>
 
     <h3>How has PyPy performance evolved over time?</h3>
-    <div id="historical-plot"></div>
+    <div id="historical-plot" style="position:relative;height:350px;"></div>
     <p class="plot-caption">Plot 2: Speedup compared to {{ baseline }}, using the inverse of the geometric average of normalized times, out of <span id="num_of_benchs"></span> benchmarks (see <a href="http://dl.acm.org/citation.cfm?id=5673" title="How not to lie with statistics: the correct way to summarize benchmark results">paper</a> on why the geometric mean is better for normalized results).</p>
   </div>
   {% endif %}
@@ -44,172 +44,137 @@ <h3>How has PyPy performance evolved over time?</h3>
 {% block extra_script %}
 {{ block.super }}
 {% if show_historical %}
-  <link rel="stylesheet" type="text/css" href="{% static 'js/jqplot/jquery.jqplot.min.css' %}" />
-  <script type="text/javascript" src="{% static 'js/jqplot/jquery.jqplot.min.js' %}"></script>
-  <script type="text/javascript" src="{% static 'js/jqplot/jqplot.barRenderer.min.js' %}"></script>
-  <script type="text/javascript" src="{% static 'js/jqplot/jqplot.canvasAxisTickRenderer.min.js' %}"></script>
-  <script type="text/javascript" src="{% static 'js/jqplot/jqplot.categoryAxisRenderer.min.js' %}"></script>
-  <script type="text/javascript" src="{% static 'js/jqplot/jqplot.canvasAxisLabelRenderer.min.js' %}"></script>
-  <script type="text/javascript" src="{% static 'js/jqplot/jqplot.pointLabels.min.js' %}"></script>
-  <script type="text/javascript" src="{% static 'js/jqplot/jqplot.canvasTextRenderer.min.js' %}"></script>
+  <script type="text/javascript" src="{% static 'js/chart.umd.min.js' %}"></script>
 {% endif %}
 
 <script type="text/javascript">
     function updateReportTables() {
-        //Add permalink events to table rows
         $("div#reports table tbody tr").each(function() {
             $(this).click(function () {
                 window.location = $(this).find("td:eq(0) label").text();
             });
         });
-        //Add hover effect to rows
         $("div#reports table tbody tr td").hover(function() {
             $(this).parents('tr').addClass('highlight');
         }, function() {
             $(this).parents('tr').removeClass('highlight');
         });
     }
 
-    function numOrd(a, b){ return (a-b); }
+    {% if show_historical %}
+    Chart.Tooltip.positioners.cursor = function(_items, eventPosition) {
+        return {x: eventPosition.x, y: eventPosition.y};
+    };
 
     function renderplot(data) {
-        var plotoptions = {};
-        var plotdata = [new Array(), new Array()];
-        var labels = new Array();
-        var benchmarks = new Array();
         if (data === null || data.length === 0) {
             $("#baseline-comparison-plot").html(getLoadText('Error retrieving data', 0));
-            return 1;
+            return;
         }
         if (typeof data === 'string' || data instanceof String) {
             $("#baseline-comparison-plot").html(getLoadText('Error retrieving data ' + data, 0));
-            return 1;
+            return;
         }
+
+        var benchmarks = [], latestValues = [], baselineValues = [];
         var trunk_geomean = 1;
-        var tagged_data = new Array();
-        for (i in data['tagged_revs']) {
-           tagged_data[i] = new Array();
-        }
+        var tagged_data = [];
+        for (var i in data['tagged_revs']) { tagged_data[i] = []; }
+
         for (var bench in data['benchmarks']) {
-            var relative_value = 0;
-            benchname = data['benchmarks'][bench];
+            var benchname = data['benchmarks'][bench];
             var add_to_tagged_data = true;
             for (var i in data['tagged_revs']) {
                 var rev = data['tagged_revs'][i];
-                if (data['results'][benchname][rev] === 0) {
-                    add_to_tagged_data = false;
-                }
-                if (add_to_tagged_data === false) { break; }
-                relative_value = data['results'][benchname][rev]/data['results'][benchname][data['baseline']];
-                tagged_data[i].push(relative_value)
+                if (data['results'][benchname][rev] === 0) { add_to_tagged_data = false; break; }
+                tagged_data[i].push(data['results'][benchname][rev] / data['results'][benchname][data['baseline']]);
             }
-            // Only add benchmark if there are no 0 values
-            if (add_to_tagged_data === false) { continue; }
-            // First add benchmark
+            if (!add_to_tagged_data) { continue; }
             benchmarks.push(benchname);
-            // Add latest results and baseline
-            relative_value = data['results'][benchname]['latest']/data['results'][benchname][data['baseline']];
-            plotdata[0].push(relative_value);
-            plotdata[1].push(1.0);
-            labels.push(relative_value.toFixed(2));
-            if (relative_value > 0 && !isNaN(relative_value)) {
-                trunk_geomean *= relative_value;
-            }
+            var rel = data['results'][benchname]['latest'] / data['results'][benchname][data['baseline']];
+            latestValues.push(rel);
+            baselineValues.push(1.0);
+            if (rel > 0 && !isNaN(rel)) { trunk_geomean *= rel; }
         }
-        trunk_geomean = Math.pow(trunk_geomean, 1/plotdata[0].length);
-        var geofaster = 1/trunk_geomean;
+
+        trunk_geomean = Math.pow(trunk_geomean, 1 / latestValues.length);
         $('#geomean').html(trunk_geomean.toFixed(2));
-        $('#geofaster').html(geofaster.toFixed(1));
-        // Render first plot
-        plotoptions1 = {
-            legend:{show:true},
-            seriesDefaults: {
-                showMarker: false,
-                rendererOptions:{barPadding: 2, barMargin:5}
-            },
-            axesDefaults: {
-                tickRenderer: $.jqplot.CanvasAxisTickRenderer
+        $('#geofaster').html((1 / trunk_geomean).toFixed(1));
+
+        // Plot 1: per-benchmark normalized comparison
+        var wrap1 = document.getElementById('baseline-comparison-plot');
+        var canvas1 = document.createElement('canvas');
+        wrap1.appendChild(canvas1);
+        new Chart(canvas1, {
+            type: 'bar',
+            data: {
+                labels: benchmarks,
+                datasets: [
+                    {label: 'latest {{ default_exe }}', data: latestValues, backgroundColor: '#4e79a7'},
+                    {label: data['baseline'], data: baselineValues, backgroundColor: '#f28e2b'}
+                ]
             },
-            series:[
-                {
-                    label: 'latest',
-                    renderer:$.jqplot.BarRenderer,
-                    pointLabels:{labels: labels}
-                },
-                {
-                    label: data['baseline'],
-                    pointLabels:{show: false}
-                }
-            ],
-            axes: {
-                xaxis: {
-                    renderer: $.jqplot.CategoryAxisRenderer,
-                    ticks: benchmarks,
-                    tickOptions: {angle: -70}
+            options: {
+                animation: false,
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    tooltip: {position: 'cursor'}
                 },
-                yaxis:{
-                    ticks: [0, 0.5, 1, 1.5],
-                    tickOptions:{formatString: '%.2f'}
+                scales: {
+                    x: {ticks: {maxRotation: 70, minRotation: 70, autoSkip: false, font: {size: 11}}},
+                    y: {min: 0, ticks: {callback: function(v) { return v.toFixed(2); }}}
                 }
             }
-        };
-        plot1 = $.jqplot("baseline-comparison-plot", plotdata, plotoptions1);
+        });
 
-        // Prepare and render second plot
+        // Plot 2: geomean speedup over tagged revisions
         var geomeans = [1.0];
         var num_of_benchs = 0;
         for (var i in data['tagged_revs']) {
             num_of_benchs = tagged_data[i].length;
             var tempgeo = 1;
             for (var j in tagged_data[i]) {
-				value = tagged_data[i][j];
-				if (value > 0 && !isNaN(value)) {
-					tempgeo *= value;
-				}
+                var val = tagged_data[i][j];
+                if (val > 0 && !isNaN(val)) { tempgeo *= val; }
             }
-            tempgeo = Math.pow(tempgeo, 1/tagged_data[i].length);
-            tempgeo = 1/tempgeo;
-            geomeans.push(tempgeo);
-        }
-        geomeans.push(1/trunk_geomean);
-        var ticks = [data['baseline']];
-        for (var i in data['tagged_revs']) {
-            ticks.push(data['tagged_revs'][i]);
-        }
-        ticks.push('latest {{ default_exe.project }}');
-        var geolabels = new Array();
-        for (var i in geomeans) {
-            geolabels.push(geomeans[i].toFixed(2) + "x");
+            geomeans.push(1 / Math.pow(tempgeo, 1 / tagged_data[i].length));
         }
-        $('#num_of_benchs').html(num_of_benchs)
+        geomeans.push(1 / trunk_geomean);
+        $('#num_of_benchs').html(num_of_benchs);
 
-        plotoptions2 = {
-            seriesDefaults: {
-                renderer:$.jqplot.BarRenderer,
-                showMarker: false
-            },
-            axesDefaults: {
-                tickRenderer: $.jqplot.CanvasAxisTickRenderer
+        var ticks2 = [data['baseline']];
+        for (var i in data['tagged_revs']) { ticks2.push(data['tagged_revs'][i]); }
+        ticks2.push('latest {{ default_exe.project }}');
+
+        var wrap2 = document.getElementById('historical-plot');
+        var canvas2 = document.createElement('canvas');
+        wrap2.appendChild(canvas2);
+        new Chart(canvas2, {
+            type: 'bar',
+            data: {
+                labels: ticks2,
+                datasets: [{
+                    label: 'Speedup vs {{ baseline }}',
+                    data: geomeans,
+                    backgroundColor: '#4e79a7'
+                }]
             },
-            series:[
-                {
-                    pointLabels:{labels:geolabels}
-                }
-            ],
-            axes: {
-                xaxis: {
-                    renderer: $.jqplot.CategoryAxisRenderer,
-                    ticks: ticks,
-                    tickOptions: {angle: -40}
+            options: {
+                animation: false,
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    tooltip: {position: 'cursor'}
                 },
-                yaxis:{
-                    min: 0,
-                    tickOptions:{formatString:'%.1f'}
+                scales: {
+                    x: {ticks: {maxRotation: 40, minRotation: 40}},
+                    y: {min: 0, ticks: {callback: function(v) { return v.toFixed(1) + 'x'; }}}
                 }
             }
-        };
-        plot2 = $.jqplot("historical-plot", [geomeans], plotoptions2);
+        });
     }
+    {% endif %}
 
     $(function() {
         {% if show_reports %}