Display average forward response time in Doughnut Charts, if available.

Signed-off-by: DL6ER <dl6er@dl6er.de>

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

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
       }))
     }

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;