Made join-address pie show text instead when there is only one address

Affects issues:
- Close #1809

Plan/common/src/main/resources/assets/plan/web/js/graphs.js

@@ -419,31 +419,43 @@ function serverPie(id, serverSeries) {
 }
 
 function joinAddressPie(id, joinAddresses) {
-    graphs.push(Highcharts.chart(id, {
-        chart: {
-            plotBackgroundColor: null,
-            plotBorderWidth: null,
-            plotShadow: false,
-            type: 'pie'
-        },
-        title: {text: ''},
-        plotOptions: {
-            pie: {
-                allowPointSelect: true,
-                cursor: 'pointer',
-                dataLabels: {
-                    enabled: false
-                },
-                showInLegend: true
-            }
-        },
-        tooltip: {
-            formatter: function () {
-                return '<b>' + this.point.name + ':</b> ' + this.y + ' (' + this.percentage.toFixed(2) + '%)';
-            }
-        },
-        series: [joinAddresses]
-    }));
+    if (joinAddresses.data.length < 2) {
+        document.getElementById(id).innerHTML = '<div class="card-body"><p></p></div>'
+        document.getElementById(id).classList.remove('chart-area');
+
+        // XSS danger appending join addresses directly, using innerText is safe.
+        for (let slice of joinAddresses.data) {
+            document.querySelector(`#${id} p`).innerText = `${slice.name}: ${slice.y}`;
+        }
+    } else {
+        document.getElementById(id).innerHTML = '';
+        document.getElementById(id).classList.add('chart-area');
+        graphs.push(Highcharts.chart(id, {
+            chart: {
+                plotBackgroundColor: null,
+                plotBorderWidth: null,
+                plotShadow: false,
+                type: 'pie'
+            },
+            title: {text: ''},
+            plotOptions: {
+                pie: {
+                    allowPointSelect: true,
+                    cursor: 'pointer',
+                    dataLabels: {
+                        enabled: false
+                    },
+                    showInLegend: true
+                }
+            },
+            tooltip: {
+                formatter: function () {
+                    return '<b>' + this.point.name + ':</b> ' + this.y + ' (' + this.percentage.toFixed(2) + '%)';
+                }
+            },
+            series: [joinAddresses]
+        }));
+    }
 }
 
 function formatTimeAmount(ms) {