Adding a client-side filter on plotly series (#56)

guilbaults · Jun 4, 2024 · 67018ce · 67018ce
1 parent c086052
commit 67018ce
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/locale/fr/LC_MESSAGES/djangojs.po b/locale/fr/LC_MESSAGES/djangojs.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-01-15 20:23+0000\n"
+"POT-Creation-Date: 2024-06-03 15:43+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
@@ -56,3 +56,7 @@ msgstr "Pas de données disponibles"
 #: static/custom.js:17
 msgid "Loading..."
 msgstr "Chargement..."
+
+#: static/custom.js:54
+msgid "Filter series by name (case sensitive):"
+msgstr "Filtrer les séries par nom (sensible à la casse):"
diff --git a/static/custom.js b/static/custom.js
@@ -46,6 +46,29 @@ function loadGraph(container, url){
                         content['config'] = {};
                     }
 
+                    content['config']['modeBarButtonsToAdd'] = [
+                        {
+                            name: 'Filter series',
+                            icon: Plotly.Icons.eraseshape,
+                            click: function(gd) {
+                                bootbox.prompt(gettext('Filter series by name (case sensitive):'),
+                                    function(filter_value) {
+                                    if (filter_value != null) {
+                                        var new_data = [];
+                                        for (var i = 0; i < content['data'].length; i++) {
+                                            var trace = content['data'][i];
+                                            // check if the trace name contains the filter value
+                                            if(trace['name'].includes(filter_value)){
+                                                new_data.push(trace);
+                                            }
+                                        }
+                                        Plotly.newPlot(gd, new_data, content['layout'], content['config']);
+                                    }
+                                });
+                            }
+                        }
+                    ]
+
                     Plotly.newPlot(container, content['data'], content['layout'], content['config']);
 
                     $(container_div).on('plotly_relayout', function(self, relayout_data){

diff --git a/templates/base.html b/templates/base.html
@@ -36,6 +36,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js" integrity="sha512-axd5V66bnXpNVQzm1c7u1M614TVRXXtouyWCE+eMYl8ALK8ePJEs96Xtx7VVrPBc0UraCn63U1+ARFI3ofW+aA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js" integrity="sha512-M7nHCiNUOwFt6Us3r8alutZLm9qMt4s9951uo8jqO4UwJ1hziseL6O3ndFyigx6+LREfZqnhHxYjKRJ8ZQ69DQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/6.0.0/bootbox.min.js" integrity="sha512-oVbWSv2O4y1UzvExJMHaHcaib4wsBMS5tEP3/YkMP6GmkwRJAa79Jwsv+Y/w7w2Vb/98/Xhvck10LyJweB8Jsw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/timelines-chart.min.js"></script>
     <script src="{% static '/peity-vanilla.min.js' %}"></script>
     <script src="{% static '/custom.js' %}"></script>