plotly donut plots (#3)

* plotly donut plots

* <bot> update dependencies*.log files(s)

---------

Co-authored-by: github-actions <github-actions@github.com>

Author: dsschult

cephfs_disk_usage/server.py

@@ -100,14 +100,32 @@ class DirEntry:
     path: str
     size: int
     nfiles: int
-    children: list
+    children: list[Entry]
 
     @classmethod
     def from_entry(cls, e: Entry) -> Self:
         if not e.is_dir:
             raise Exception('is not a directory!')
         return cls(e.name, e.path, e.size, e.nfiles, [])
 
+    def child_summary(self, threshold=5) -> list[Entry]:
+        """
+        Summarize children
+
+        Args:
+            threshold: in percent (0-100)
+        """
+        ret = []
+        other = 0
+        for child in self.children:
+            if child.percent_size < threshold:
+                other += child.size
+            else:
+                ret.append(child)
+        if other:
+            ret.append(Entry("Other", "", other, percent_size=other*100.0/self.size))
+        return ret
+
 
 class POSIXFileSystem:
     def __init__(self, base_path):

cephfs_disk_usage/static/style.css

@@ -73,6 +73,13 @@ footer {
     margin-top: 2em;
 }
 
+div.piechart {
+    max-width: 43em;
+}
+article.main div.piechart {
+    max-width: 35em;
+}
+
 div.articles {
     display: flex;
     flex-wrap: wrap;

cephfs_disk_usage/templates/details.html

@@ -10,6 +10,5 @@ <h3>Path: {{ data.path }}</h3>
 {% end %}
 
 {% block scripts %}
-<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 {% module Template('piechart.js', data=data) %}
 {% end %}

cephfs_disk_usage/templates/main.html

@@ -14,7 +14,6 @@ <h3>Path: {{ path }}</h3>
 {% end %}
 
 {% block scripts %}
-<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 {% for path in paths %}
 {% module Template('piechart.js', data=paths[path]) %}
 {% end %}

cephfs_disk_usage/templates/piechart.html

@@ -1 +1 @@
-<div id="piechart-{{ data.path }}"></div>
+<div id="piechart-{{ data.path }}" class="piechart"></div>

cephfs_disk_usage/templates/piechart.js

@@ -1,21 +1,35 @@
 {% autoescape None %}
 
-<script type="text/javascript">
-{% set funcname = 'draw'+data.path.replace('.','').replace('/','').replace('-','') %}
-{% set datatable = json_encode([['Name', 'Size']]+[[row.name, row.size] for row in data.children]) %}
-google.charts.load('current', {'packages':['corechart']});
-google.charts.setOnLoadCallback({{ funcname }});
-
-function {{ funcname }}() {
+{% try %}
+{% if not piechart %}{% end %}
+{% except %}
+<script src="https://cdn.plot.ly/plotly-2.25.2.min.js" charset="utf-8"></script>
+{% set piechart = True %}
+{% end %}
 
-  var data = google.visualization.arrayToDataTable({{ datatable }});
+<script type="text/javascript">
+{% set summary = data.child_summary() %}
+var data = [{
+  values: {{ json_encode([row.size for row in summary]) }},
+  labels: {{ json_encode([row.name for row in summary]) }},
+  type: 'pie',
+  hole: .4,
+  sort: false,
+  direction: "clockwise",
+  textinfo: "label+percent",
+  textposition: "outside",
+  textfont: {
+    size: 12
+  },
+  automargin: true
+}];
 
-  var options = {
- //   title: 'My Daily Activities'
-  };
+var layout = {
+  margin: {"t": 0, "b": 0, "l": 0, "r": 0},
+  showlegend: false
+};
 
-  var chart = new google.visualization.PieChart(document.getElementById("piechart-{{ data.path }}"));
+var config = {responsive: true}
 
-  chart.draw(data, options);
-}
+Plotly.newPlot("piechart-{{ data.path }}", data, layout, config);
 </script>

dependencies-from-Dockerfile.log

@@ -14,4 +14,4 @@ tornado==6.3.3
 typing_extensions==4.7.1
 urllib3==2.0.4
 wipac-dev-tools==1.6.16
-wipac-rest-tools==1.5.2
+wipac-rest-tools==1.5.3