feat: add log scale button for evolution graph

Mazars-Tech · Nov 10, 2023 · a7cdce4 · a7cdce4
1 parent 5d1c10f
commit a7cdce4
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git a/ad_miner/sources/html/components/smolcard/smolcard_header.html b/ad_miner/sources/html/components/smolcard/smolcard_header.html
@@ -29,7 +29,7 @@
           <canvas id="card-chart-{{id}}" class="chart smol-evolution-chart" style="width: 80%"></canvas>
           <script>
             if (`{{evolution_chart_data}}`.length > 0) {
-              new Chart(document.querySelector('#card-chart-{{id}}'), {
+              allCharts.push(new Chart(document.querySelector('#card-chart-{{id}}'), {
                 type: 'line',
                 data: {
                   labels: `{{evolution_labels}}`,
@@ -83,7 +83,7 @@
                     },
                   },
                 }
-              });
+              }));
             }
             else {
               const elementToReplace = document.querySelector('#card-chart-{{id}}');

diff --git a/ad_miner/sources/html/templates/cards_modal_header.html b/ad_miner/sources/html/templates/cards_modal_header.html
@@ -6,7 +6,11 @@ <h5 class="modal-title" id="cardsModalLabel">Indicators of exposure</h5>
             <div class="form-check form-switch" style="margin-left: 40px; padding-top: 8px;">
                 <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" onclick="showEvolutionGraph()">
                 <label class="form-check-label" for="flexSwitchCheckDefault">Show evolution</label>
-            </div>        
+            </div>
+            <div class="form-check form-switch" id="switchLogScaleDiv" style="margin-left: 40px; padding-top: 8px;">
+                <input class="form-check-input" type="checkbox" role="switch" id="switchLogScale" onclick="changeScale()">
+                <label class="form-check-label" for="switchLogScale">Logarithmic scale</label>
+            </div>           
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">
@@ -59,4 +63,29 @@ <h5 class="modal-title" id="cardsModalLabel">Indicators of exposure</h5>
                     });
                 }
             }
+
+            // All chart list
+            var allCharts = [];
+            var logScale = false;
+
+            function changeScale() {
+                if (logScale) {
+                    allCharts.forEach(chart => {
+                        chart.options.scales.y = {
+                            type: 'linear'
+                        };
+                        chart.update();
+                    })
+                    logScale = false;
+                }
+                else {
+                    allCharts.forEach(chart => {
+                        chart.options.scales.y = {
+                            type: 'logarithmic'
+                        };
+                        chart.update();
+                    })
+                    logScale = true;
+                }
+            }
         </script>
diff --git a/ad_miner/sources/modules/main_page.py b/ad_miner/sources/modules/main_page.py
@@ -480,7 +480,11 @@ def render(
 </div>
             """
             if arguments.evolution == "":
-                modal_footer += "<script>document.querySelector('#flexSwitchCheckDefault').setAttribute('disabled', '');</script>"
+                modal_footer += """<script>
+                document.querySelector('#flexSwitchCheckDefault').setAttribute('disabled', '');
+                document.querySelector('#switchLogScaleDiv').style.display = 'none';
+                </script>
+                """
 
             page_f.write(modal_header + cardsHtml + modal_footer)
             # html = secondary.returnHtml()