From b4cf68b1eb6247489e30a733556388aba05c1861 Mon Sep 17 00:00:00 2001
From: Rob Lewis <rob.y.lewis@gmail.com>
Date: Sat, 21 Oct 2023 17:48:27 -0400
Subject: [PATCH] update stats page to show both mathlib3 and mathlib4

---
 templates/mathlib_stats.html | 307 ++++++++++++++++++++++++-----------
 1 file changed, 209 insertions(+), 98 deletions(-)

diff --git a/templates/mathlib_stats.html b/templates/mathlib_stats.html
index ea1ab0c94f..620d26403c 100644
--- a/templates/mathlib_stats.html
+++ b/templates/mathlib_stats.html
@@ -74,111 +74,222 @@ <h2>Dependency graph</h2>
 <link href="https://unpkg.com/tabulator-tables@4.6.2/dist/css/tabulator.min.css" rel="stylesheet">
 <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.6.2/dist/js/tabulator.min.js"></script>
 
-<script type="text/javascript" src="{{ base_url }}/mathlib_stats/gitstats.js"></script>
 
+<script type="text/javascript" src="{{ base_url }}/mathlib4/gitstats4.js"></script>
 <script>
+    // because both gitstats files use the same variable names, rename the mathlib4 ones before importing the mathlib3 ones
+    by_year_month4 = by_year_month
+    by_year4 = by_year 
+    files_stamps4 = files_stamps
+    lines_stamps4 = lines_stamps 
+    files_by_date4 = files_by_date 
+    lines_by_date4 = lines_by_date
+</script>
+<script type="text/javascript" src="{{ base_url }}/mathlib_stats/gitstats.js"></script>
 
-var color = Chart.helpers.color;
-var blue = 'rgb(54, 162, 235)'
-
-function makeBarChart(id, title, data) {
-    var barChartData = {
-        labels: data.labels,
-        datasets: [{
-            backgroundColor: color(blue).alpha(0.5).rgbString(),
-            borderColor: blue,
-            borderWidth: 1,
-            data: data.data
-        }]
-    };
+<script>
 
-    var ctx = document.getElementById(id).getContext('2d');
-    new Chart(ctx, {
-        type: 'bar',
-        data: barChartData,
-        options: {
-            responsive: true,
-            legend: {
-                display: false,
-            },
-            title: {
-                display: true,
-                text: title
-            }
+    var color = Chart.helpers.color;
+    var blue ='#377eb8'
+    var red = '#ff0029'
+    
+    function pad_mathlib4_data(mathlib3_data, mathlib4_data) {
+      missing_len = mathlib3_data.labels.length - mathlib4_data.labels.length 
+      mathlib4_data.data = Array(missing_len).fill(0).concat(mathlib4_data.data)
+    }
+    
+    function pad_mathlib4_array(index, mathlib3_lines, mathlib4_lines) {
+      missing_len = mathlib3_lines[index].length - mathlib4_lines[index].length 
+      alert(missing_len)
+      mathlib4_lines[index] = Array(missing_len).fill(0).concat(mathlib4_lines[index])
+    }
+    
+    function merge_timestamps_and_values(mathlib3_ts, mathlib3_vals, mathlib4_ts, mathlib4_vals) {
+      // Initialize arrays for merged timestamps, mathlib3 values, and mathlib4 values
+      const mergedTimestamps = [];
+      const mergedMathlib3Vals = [];
+      const mergedMathlib4Vals = [];
+    
+      // Initialize variables to track the previous values
+      let prevMathlib3Val = 0;
+      let prevMathlib4Val = 0;
+    
+      // Initialize index variables for both arrays
+      let index3 = 0;
+      let index4 = 0;
+    
+      // Merge timestamps and values with previous values
+      while (index3 < mathlib3_ts.length && index4 < mathlib4_ts.length) {
+        const timestamp3 = mathlib3_ts[index3];
+        const timestamp4 = mathlib4_ts[index4];
+    
+        if (timestamp3 < timestamp4) {
+          // Timestamp from mathlib3 is earlier
+          mergedTimestamps.push(timestamp3);
+          mergedMathlib3Vals.push(mathlib3_vals[index3]);
+          mergedMathlib4Vals.push(prevMathlib4Val);
+          prevMathlib3Val = mathlib3_vals[index3];
+          index3++;
+        } else if (timestamp4 < timestamp3) {
+          // Timestamp from mathlib4 is earlier
+          mergedTimestamps.push(timestamp4);
+          mergedMathlib4Vals.push(mathlib4_vals[index4]);
+          mergedMathlib3Vals.push(prevMathlib3Val);
+          prevMathlib4Val = mathlib4_vals[index4];
+          index4++;
+        } else {
+          // Timestamps are equal
+          mergedTimestamps.push(timestamp3);
+          mergedMathlib3Vals.push(mathlib3_vals[index3]);
+          mergedMathlib4Vals.push(mathlib4_vals[index4]);
+          prevMathlib3Val = mathlib3_vals[index3];
+          prevMathlib4Val = mathlib4_vals[index4];
+          index3++;
+          index4++;
         }
-    });
-}
-
-colors = ['#377eb8',
-    '#ff0029',  '#66a61e', '#984ea3', '#00d2d5', '#ff7f00',
-    '#af8d00', '#7f80cd', '#b3e900', '#c42e60', '#a65628', '#f781bf',
-    '#8dd3c7', '#bebada', '#fb8072']
-
-function makeLineChart(id, title, stamps, datas, show_title = true,
-    show_legend = true) {
-    var ctx = document.getElementById(id).getContext('2d');
-    var datasets = []
-    colidx = 0
-    for (const [name, data] of Object.entries(datas)) {
-        datasets.push(
-           { label: name,
-             fill: false,
-             borderColor: colors[colidx],
-             data: data,
-             cubicInterpolationMode: 'monotone',
-             pointRadius: 1,
-           })
-        colidx = colidx + 1
-    };
-    new Chart(ctx, {
-        type: 'line',
-        data: {
-            labels: stamps,
-            datasets : datasets
-        },
-        options: {
-            title: {
-                display: show_title,
-                text: title
+      }
+    
+      // If there are remaining elements in either array, add them
+      while (index3 < mathlib3_ts.length) {
+        mergedTimestamps.push(mathlib3_ts[index3]);
+        mergedMathlib3Vals.push(mathlib3_vals[index3]);
+        mergedMathlib4Vals.push(prevMathlib4Val);
+        prevMathlib3Val = mathlib3_vals[index3];
+        index3++;
+      }
+    
+      while (index4 < mathlib4_ts.length) {
+        mergedTimestamps.push(mathlib4_ts[index4]);
+        mergedMathlib4Vals.push(mathlib4_vals[index4]);
+        mergedMathlib3Vals.push(prevMathlib3Val);
+        prevMathlib4Val = mathlib4_vals[index4];
+        index4++;
+      }
+    
+      return {
+        mergedTimestamps,
+        mergedMathlib3Vals,
+        mergedMathlib4Vals,
+      };
+    }
+    
+    
+    function makeBarChart(id, title, mathlib3_data, mathlib4_data) {
+        var barChartData = {
+            labels: mathlib3_data.labels,
+            datasets: [{
+                backgroundColor: color(blue).alpha(0.5).rgbString(),
+                borderColor: blue,
+                borderWidth: 1,
+                data: mathlib3_data.data
             },
-            legend: {
-                display: show_legend,
+            {
+                backgroundColor: color(red).alpha(0.5).rgbString(),
+                borderColor: red,
+                borderWidth: 1,
+                data: mathlib4_data.data
+            }]
+        };
+    
+        var ctx = document.getElementById(id).getContext('2d');
+        new Chart(ctx, {
+            type: 'bar',
+            data: barChartData,
+            options: {
+                responsive: true,
+                legend: {
+                    display: false,
+                },
+                title: {
+                    display: true,
+                    text: title
+                }
+            }
+        });
+    }
+    
+    colors = [blue, red]
+    
+    function makeLineChart(id, title, stamps, mathlib3_datas, mathlib4_datas, show_title = true,
+        show_legend = true) {
+        var ctx = document.getElementById(id).getContext('2d');
+        var datasets = []
+        colidx = 0
+        for (const [name, data] of Object.entries(mathlib3_datas)) {
+            datasets.push(
+               { label: name + " (mathlib3)",
+                 fill: false,
+                 borderColor: colors[colidx],
+                 data: data,
+                 cubicInterpolationMode: 'monotone',
+                 pointRadius: 1,
+               })
+            colidx = colidx + 1
+        };
+        for (const [name, data] of Object.entries(mathlib4_datas)) {
+            datasets.push(
+               { label: name + " (mathlib4)",
+                 fill: false,
+                 borderColor: colors[colidx],
+                 data: data,
+                 cubicInterpolationMode: 'monotone',
+                 pointRadius: 1,
+               })
+            colidx = colidx + 1
+        };
+        new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: stamps,
+                datasets : datasets
             },
-            scales: {
-                xAxes: [{
-                    type: 'time',
-                    time: {
-                        unit: 'month',
-                        parser: moment.unix,
-                    },
-                }]
+            options: {
+                title: {
+                    display: show_title,
+                    text: title
+                },
+                legend: {
+                    display: show_legend,
+                },
+                scales: {
+                    xAxes: [{
+                        type: 'time',
+                        time: {
+                            unit: 'month',
+                            parser: moment.unix,
+                        },
+                    }]
+                },
             },
-        },
-    });
-}
-window.onload = function() {
-    makeBarChart('by_year_month', 'Commits by month', by_year_month)
-    makeBarChart('by_year', 'Commits by year', by_year)
-
-    makeLineChart('lines_by_authors', 'Number of lines by author', stamps, lines_by_authors)
-    makeLineChart('commits_by_authors', 'Number of commits by author', stamps, commits_by_authors)
-    makeLineChart('files_by_date', 'Number of files', files_stamps,
-        files_by_date, true, false)
-    makeLineChart('lines_by_date', 'Number of lines', lines_stamps,
-        lines_by_date, true, false)
-
-    var table = new Tabulator("#authors_table", {
-        data: authors, //set initial table data
-        layout:"fitColumns",
-        layoutColumnsOnNewData:true,
-        responsiveLayout:true,
-        columns: authors_cols,
-        height: "600px",
-    });
-    table.redraw(true);
-
-};
-
-
+        });
+    }
+    
+    
+    window.onload = function() {
+        pad_mathlib4_data(by_year_month, by_year_month4)
+        pad_mathlib4_data(by_year, by_year4)
+        // pad_mathlib4_array('Number of lines', lines_by_date, lines_by_date4)
+        // pad_mathlib4_array('Number of files', files_by_date, files_by_date4)
+    
+        makeBarChart('by_year_month', 'Commits by month', by_year_month, by_year_month4)
+        makeBarChart('by_year', 'Commits by year', by_year, by_year4)
+    
+        files_data = merge_timestamps_and_values(files_stamps, files_by_date['Number of files'], files_stamps4, files_by_date4['Number of files'])
+    
+        lines_data = merge_timestamps_and_values(lines_stamps, lines_by_date['Number of lines'], lines_stamps4, lines_by_date4['Number of lines'])
+    
+        // makeLineChart('lines_by_authors', 'Number of lines by author', stamps, lines_by_authors)
+        // makeLineChart('commits_by_authors', 'Number of commits by author', stamps, commits_by_authors)
+        makeLineChart('files_by_date', 'Number of files', files_data.mergedTimestamps,
+        {'Number of files' : files_data.mergedMathlib3Vals}, {'Number of files' : files_data.mergedMathlib4Vals}, true, false)
+        makeLineChart('lines_by_date', 'Number of lines', lines_data.mergedTimestamps,
+        {'Number of lines' : lines_data.mergedMathlib3Vals}, {'Number of lines' : lines_data.mergedMathlib4Vals}, true, false)
+        // makeLineChart('lines_by_date', 'Number of lines', lines_data[0],
+        // lines_data[1],lines_data[2], true, false)
+    
+    
+    };
+    
+    
 </script>
 {% endblock %}