From eadf0bb0a0d0d27ec059d6c0d8b9576dbe2bd897 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Wed, 25 Dec 2019 16:51:27 +0000
Subject: [PATCH] Display average forward response time in Doughnut Charts, if
 available.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 src/components/dashboard/GenericDoughnutChart.tsx | 12 ++++++++++--
 src/components/dashboard/UpstreamsChart.tsx       |  2 ++
 src/types/api.d.ts                                |  2 ++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/dashboard/GenericDoughnutChart.tsx b/src/components/dashboard/GenericDoughnutChart.tsx
index 398f5be..fc826fc 100644
--- a/src/components/dashboard/GenericDoughnutChart.tsx
+++ b/src/components/dashboard/GenericDoughnutChart.tsx
@@ -104,7 +104,7 @@ export class GenericDoughnutChart extends Component<
             <ul className="chart-legend">
               {this.props.labels
                 // Zip label and color together
-                .map((label, i) => [label, this.props.colors[i]])
+                .map((label, i) => [label.split(' ')[0], this.props.colors[i]])
                 // Create the list items
                 .map(([label, color], i) => (
                   <li
@@ -144,6 +144,8 @@ export interface ChartItem {
   name: string;
   ip?: string;
   percent: number;
+  responsetime?: number;
+  uncertainty?: number;
 }
 
 /**
@@ -170,7 +172,13 @@ export const transformData = (apiData: Array<ChartItem>) => {
   let i = 0;
   for (let entry of apiData) {
     data.push(entry.percent);
-    labels.push(entry.name.length !== 0 ? entry.name : entry.ip!);
+    let label = entry.name.length !== 0 ? entry.name : entry.ip!;
+    if(entry.responsetime !== undefined && entry.uncertainty !== undefined)
+    {
+      let rtime = (1e3*entry.responsetime).toFixed(1) + ' \u00B1 ' + (1e3*entry.uncertainty as number).toFixed(1);
+      label += ' (' + rtime + ' ms)';
+    }
+    labels.push(label);
     usedColors.push(
       // If we ran out of colors, make a random one
       i < colors.length
diff --git a/src/components/dashboard/UpstreamsChart.tsx b/src/components/dashboard/UpstreamsChart.tsx
index 8bfb69f..8bfbea7 100644
--- a/src/components/dashboard/UpstreamsChart.tsx
+++ b/src/components/dashboard/UpstreamsChart.tsx
@@ -25,6 +25,8 @@ const UpstreamsChart = ({
       data.upstreams.map(upstream => ({
         name: upstream.name,
         ip: upstream.ip,
+        responsetime: upstream.responsetime,
+        uncertainty: upstream.uncertainty,
         percent: (upstream.count * 100) / data.total_queries
       }))
     }
diff --git a/src/types/api.d.ts b/src/types/api.d.ts
index e897347..c815b4c 100644
--- a/src/types/api.d.ts
+++ b/src/types/api.d.ts
@@ -174,6 +174,8 @@ interface ApiUpstreams {
     name: string;
     ip: string;
     count: number;
+    responsetime: number;
+    uncertainty: number;
   }>;
   forwarded_queries: number;
   total_queries: number;