refactor: replace flot with highcharts (#4030)

* chore: Replace flot with highcharts

Since flot hasn't been updated since 2014 and was only used in one
place. Simplify how highcharts is initialized and used, and re-enable
pre-bs5 export functionality.

* Fix tests

* Remove some console.log statements

.pnp.cjs

@@ -45,7 +45,6 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["cypress-real-events", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:1.7.0"],\
             ["d3", "npm:7.4.4"],\
             ["eslint", "npm:8.16.0"],\
-            ["flot", "npm:4.2.2"],\
             ["highcharts", "npm:10.1.0"],\
             ["html-validate", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:7.1.1"],\
             ["jquery", "npm:3.6.0"],\
@@ -3283,15 +3282,6 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "linkType": "HARD"\
         }]\
       ]],\
-      ["flot", [\
-        ["npm:4.2.2", {\
-          "packageLocation": "./.yarn/cache/flot-npm-4.2.2-77eb146093-81910f7bc2.zip/node_modules/flot/",\
-          "packageDependencies": [\
-            ["flot", "npm:4.2.2"]\
-          ],\
-          "linkType": "HARD"\
-        }]\
-      ]],\
       ["forever-agent", [\
         ["npm:0.6.1", {\
           "packageLocation": "./.yarn/cache/forever-agent-npm-0.6.1-01dae53bf9-766ae6e220.zip/node_modules/forever-agent/",\
@@ -5188,7 +5178,6 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["cypress-real-events", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:1.7.0"],\
             ["d3", "npm:7.4.4"],\
             ["eslint", "npm:8.16.0"],\
-            ["flot", "npm:4.2.2"],\
             ["highcharts", "npm:10.1.0"],\
             ["html-validate", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:7.1.1"],\
             ["jquery", "npm:3.6.0"],\

ietf/static/js/flot.js

@@ -1 +0,0 @@
-import "flot";

ietf/static/js/highcharts-export-data.js

@@ -1 +0,0 @@
-import "highcharts/modules/export-data";

ietf/static/js/highcharts-exporting.js

@@ -1 +0,0 @@
-import "highcharts/modules/exporting";

ietf/static/js/highcharts-highcharts.js

@@ -1,3 +0,0 @@
-import * as Highcharts from "highcharts";
-
-window.Highcharts = Highcharts;

ietf/static/js/highcharts-highstock.js

@@ -1,3 +0,0 @@
-import * as Highcharts from "highcharts/highstock";
-
-window.Highcharts = Highcharts;

ietf/static/js/highcharts-offline-exporting.js

@@ -1 +0,0 @@
-import "highcharts/modules/offline-exporting";

ietf/static/js/highcharts.js

@@ -0,0 +1,13 @@
+import Highcharts from "highcharts";
+
+import Highcharts_Exporting from "highcharts/modules/exporting";
+import Highcharts_Offline_Exporting from "highcharts/modules/offline-exporting";
+import Highcharts_Export_Data from "highcharts/modules/export-data";
+import Highcharts_Accessibility from"highcharts/modules/accessibility";
+
+Highcharts_Exporting(Highcharts);
+Highcharts_Offline_Exporting(Highcharts);
+Highcharts_Export_Data(Highcharts);
+Highcharts_Accessibility(Highcharts);
+
+window.Highcharts = Highcharts;

ietf/static/js/highstock.js

@@ -0,0 +1,13 @@
+import Highcharts from "highcharts/highstock";
+
+import Highcharts_Exporting from "highcharts/modules/exporting";
+import Highcharts_Offline_Exporting from "highcharts/modules/offline-exporting";
+import Highcharts_Export_Data from "highcharts/modules/export-data";
+import Highcharts_Accessibility from"highcharts/modules/accessibility";
+
+Highcharts_Exporting(Highcharts);
+Highcharts_Offline_Exporting(Highcharts);
+Highcharts_Export_Data(Highcharts);
+Highcharts_Accessibility(Highcharts);
+
+window.Highcharts = Highcharts;

ietf/static/js/review-stats.js

@@ -1,9 +0,0 @@
-$(document)
-    .ready(function () {
-        if (window.timeSeriesData && window.timeSeriesOptions) {
-            var placeholder = $(".stats-time-graph");
-            placeholder.height(Math.round(placeholder.width() * 1 / 3));
-
-            $.plot(placeholder, window.timeSeriesData, window.timeSeriesOptions);
-        }
-    });

ietf/static/js/upload_bofreq.js

@@ -18,7 +18,6 @@ $(document)
                         var row = form.find(selector);
                         if (!row.is(".row"))
                             row = row.closest(".row");
-                        console.log("!");
                         if ($.inArray(selector, shouldBeVisible[val]) != -1)
                             row.show();
                         else
@@ -27,4 +26,4 @@ $(document)
                 }
             })
             .trigger("change");
-    });
+    });

ietf/stats/tests.py

@@ -209,7 +209,7 @@ class StatisticsTests(TestCase):
             {"label": "late", "color": "#b42222", "data": [[expected_js_timestamp, 0]]}
         ])
         q = PyQuery(r.content)
-        self.assertTrue(q('.stats-time-graph'))
+        self.assertTrue(q('#stats-time-graph'))
 
         # check non-stacked chart
         url = urlreverse(ietf.stats.views.review_stats, kwargs={ "stats_type": "time" })
@@ -219,7 +219,7 @@ class StatisticsTests(TestCase):
         self.assertEqual(r.status_code, 200)
         self.assertEqual(json.loads(r.context['data']), [{"color": "#3d22b3", "data": [[expected_js_timestamp, 0]]}])
         q = PyQuery(r.content)
-        self.assertTrue(q('.stats-time-graph'))
+        self.assertTrue(q('#stats-time-graph'))
 
         # check reviewer level
         url = urlreverse(ietf.stats.views.review_stats, kwargs={ "stats_type": "completion", "acronym": review_req.team.acronym })

ietf/templates/doc/charter/change_state.html

@@ -61,7 +61,6 @@
         $(document).ready(function () {
             function stateChanged() {
                 var v = $(this).val();
-                console.log(v);
                 $("#id_message").val(info_msg[v] || "");
 
                 if ($.inArray(+v, statesForBallotWoExtern) != -1)

ietf/templates/doc/stats/highstock.html

@@ -4,9 +4,7 @@
 {% load static %}
 {% load ietf_filters %}
 {% block js %}
-    <script src="{% static 'ietf/js/highcharts-highstock.js' %}"></script>
+    <script src="{% static 'ietf/js/highstock.js' %}"></script>
-    <script src="{% static 'ietf/js/highcharts-exporting.js' %}"></script>
-    <script src="{% static 'ietf/js/highcharts-offline-exporting.js' %}"></script>
     <script>
         $(function () {
             var chart;
@@ -25,4 +23,4 @@
 {% block content %}
     {% origin %}
     <div id="chart"></div>
-{% endblock %}
+{% endblock %}

ietf/templates/person/profile.html

@@ -165,11 +165,11 @@
 {% endblock %}
 {% block js %}
     <script src="{% static "ietf/js/list.js" %}"></script>
-    <script src="{% static 'ietf/js/highcharts-highstock.js' %}"></script>
+    <script src="{% static 'ietf/js/highstock.js' %}"></script>
-    <script src="{% static 'ietf/js/highcharts-exporting.js' %}"></script>
     <script>
-            $(function () {
+        $(function () {
-                {% for person in persons %}
+            {% for person in persons %}
+                {% if person.has_drafts %}
                     $.getJSON('{% url "ietf.doc.views_stats.chart_conf_person_drafts" id=person.id %}', function (conf) {
                         // Create the chart
                         chart = Highcharts.stockChart('chart-{{ forloop.counter }}', conf);
@@ -179,7 +179,8 @@
                             chart.hideLoading();
                         });
                     });
-                {% endfor %}
+                {% endif %}
-            });
+            {% endfor %}
+        });
     </script>
-{% endblock %}
+{% endblock %}

ietf/templates/stats/document_stats.html

@@ -79,9 +79,7 @@
     {% include content_template %}
 {% endblock %}
 {% block js %}
-    <script src="{% static 'ietf/js/highcharts-highcharts.js' %}"></script>
+    <script src="{% static 'ietf/js/highcharts.js' %}"></script>
-    <script src="{% static 'ietf/js/highcharts-exporting.js' %}"></script>
-    <script src="{% static 'ietf/js/highcharts-offline-exporting.js' %}"></script>
     <script src="{% static 'ietf/js/stats.js' %}"></script>
     <script src="{% static "ietf/js/list.js" %}"></script>
 {% endblock %}

ietf/templates/stats/document_stats_format.html

@@ -27,7 +27,6 @@
         },
         tooltip: {
             formatter: function () {
-                console.log(this);
                 var s = '<b>' + this.points[0].key + '</b>';
 
                 $.each(this.points, function () {
@@ -61,4 +60,4 @@
             {% endfor %}
         </tbody>
     {% endif %}
-</table>
+</table>

ietf/templates/stats/document_stats_formlang.html

@@ -27,7 +27,6 @@
         },
         tooltip: {
             formatter: function () {
-                console.log(this);
                 var s = '<b>' + this.points[0].key + '</b>';
 
                 $.each(this.points, function () {
@@ -61,4 +60,4 @@
             {% endfor %}
         </tbody>
     {% endif %}
-</table>
+</table>

ietf/templates/stats/meeting_stats.html

@@ -28,10 +28,7 @@
     <div class="document-stats">{% include content_template %}</div>
 {% endblock %}
 {% block js %}
-    <script src="{% static 'ietf/js/highcharts-highcharts.js' %}"></script>
+    <script src="{% static 'ietf/js/highcharts.js' %}"></script>
-    <script src="{% static 'ietf/js/highcharts-exporting.js' %}"></script>
-    <script src="{% static 'ietf/js/highcharts-export-data.js' %}"></script>
-    <script src="{% static 'ietf/js/highcharts-offline-exporting.js' %}"></script>
     <script src="{% static 'ietf/js/stats.js' %}"></script>
     <script src="{% static "ietf/js/list.js" %}"></script>
 {% endblock %}

ietf/templates/stats/review_stats.html

@@ -274,11 +274,10 @@
             <h2>
                 Counts per month
             </h2>
-            <div class="stats-time-graph">
+            <div id="stats-time-graph">
             </div>
             <script>
             var timeSeriesData = {{ data|safe }};
-            console.log(timeSeriesData);
             var timeSeriesOptions = {
                 xaxis: {
                     mode: "time",
@@ -333,9 +332,39 @@ href="{{ t.reviewer_stats_url }}">
         <script src="{% static 'ietf/js/datepicker.js' %}">
         </script>
         {% if stats_type == "time" %}
-            <script src="{% static 'ietf/js/flot.js' %}">
+        <script src="{% static 'ietf/js/highcharts.js' %}"></script>
-            </script>
+        <script>
-            <script src="{% static 'ietf/js/review-stats.js' %}">
+            $(document)
-            </script>
+                .ready(function () {
+                    if (window.timeSeriesData) {
+                        series = window.timeSeriesData.map(({label, data, color}) => ({
+                                name: label,
+                                data: data,
+                                color: color,
+                                type: "column"
+                        }));
+                        Highcharts.chart("stats-time-graph", {
+                            xAxis: {
+                                type: 'datetime',
+                            },
+                            yAxis: {
+                                title: undefined,
+                            },
+                            credits: {
+                                enabled: false,
+                            },
+                            title: {
+                                text: undefined,
+                            },
+                            plotOptions: {
+                                column: {
+                                    stacking: 'normal',
+                                }
+                            },
+                            series: series
+                        });
+                    }
+                });
+        </script>
         {% endif %}
-    {% endblock %}
+    {% endblock %}

package.json

@@ -12,7 +12,6 @@
     "bootstrap-icons": "1.8.2",
     "caniuse-lite": "1.0.30001342",
     "d3": "7.4.4",
-    "flot": "4.2.2",
     "highcharts": "10.1.0",
     "jquery": "3.6.0",
     "jquery-ui-dist": "1.13.1",
@@ -78,13 +77,9 @@
         "ietf/static/js/edit-milestones.js",
         "ietf/static/js/edit_action_holders.js",
         "ietf/static/js/edit_authors.js",
-        "ietf/static/js/flot.js",
         "ietf/static/js/fullcalendar.js",
-        "ietf/static/js/highcharts-export-data.js",
+        "ietf/static/js/highcharts.js",
-        "ietf/static/js/highcharts-exporting.js",
+        "ietf/static/js/highstock.js",
-        "ietf/static/js/highcharts-highcharts.js",
-        "ietf/static/js/highcharts-highstock.js",
-        "ietf/static/js/highcharts-offline-exporting.js",
         "ietf/static/js/ietf.js",
         "ietf/static/js/ipr-edit.js",
         "ietf/static/js/ipr-search.js",
@@ -97,7 +92,6 @@
         "ietf/static/js/meeting-interim-request.js",
         "ietf/static/js/moment.js",
         "ietf/static/js/password_strength.js",
-        "ietf/static/js/review-stats.js",
         "ietf/static/js/room_params.js",
         "ietf/static/js/select2.js",
         "ietf/static/js/session_details_form.js",

yarn.lock

@@ -2729,13 +2729,6 @@ browserlist@latest:
   languageName: node
   linkType: hard
 
-"flot@npm:4.2.2":
-  version: 4.2.2
-  resolution: "flot@npm:4.2.2"
-  checksum: 81910f7bc2b3808bcfc914c25d8c8119254b4401ce638ecef68568b29975bb22e25230f01cab9751c6a282b0b659b2a6d06d65f4b4d79257c47f2e966629f8b4
-  languageName: node
-  linkType: hard
-
 "forever-agent@npm:~0.6.1":
   version: 0.6.1
   resolution: "forever-agent@npm:0.6.1"
@@ -4377,7 +4370,6 @@ browserlist@latest:
     cypress-real-events: 1.7.0
     d3: 7.4.4
     eslint: 8.16.0
-    flot: 4.2.2
     highcharts: 10.1.0
     html-validate: 7.1.1
     jquery: 3.6.0