Change naming in networks line chart + Fix y axis scaling

frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
-import { EChartsOption, graphic} from 'echarts';
+import { EChartsOption, graphic, LineSeriesOption} from 'echarts';
 import { Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { formatNumber } from '@angular/common';
@@ -135,6 +135,94 @@ export class NodesNetworksChartComponent implements OnInit {
       };
     }
 
+    const series: LineSeriesOption[] = [
+      {
+        zlevel: 1,
+        yAxisIndex: 0,
+        name: $localize`Unknown`,
+        showSymbol: false,
+        symbol: 'none',
+        data: data.unannounced_nodes,
+        type: 'line',
+        lineStyle: {
+          width: 2,
+        },
+        areaStyle: {
+          opacity: 0.5,
+        },
+        stack: 'Total',
+        color: new graphic.LinearGradient(0, 0.75, 0, 1, [
+          { offset: 0, color: '#D81B60' },
+          { offset: 1, color: '#D81B60AA' },
+        ]),
+
+        smooth: false,
+      },
+      {
+        zlevel: 1,
+        yAxisIndex: 0,
+        name: $localize`Reachable on Clearnet Only`,
+        showSymbol: false,
+        symbol: 'none',
+        data: data.clearnet_nodes,
+        type: 'line',
+        lineStyle: {
+          width: 2,
+        },
+        areaStyle: {
+          opacity: 0.5,
+        },
+        stack: 'Total',
+        color: new graphic.LinearGradient(0, 0.75, 0, 1, [
+          { offset: 0, color: '#FFB300' },
+          { offset: 1, color: '#FFB300AA' },
+        ]),
+        smooth: false,
+      },
+      {
+        zlevel: 1,
+        yAxisIndex: 0,
+        name: $localize`Reachable on Clearnet and Darknet`,
+        showSymbol: false,
+        symbol: 'none',
+        data: data.clearnet_tor_nodes,
+        type: 'line',
+        lineStyle: {
+          width: 2,
+        },
+        areaStyle: {
+          opacity: 0.5,
+        },
+        stack: 'Total',
+        color: new graphic.LinearGradient(0, 0.75, 0, 1, [
+          { offset: 0, color: '#be7d4c' },
+          { offset: 1, color: '#be7d4cAA' },
+        ]),
+        smooth: false,
+      },
+      {
+        zlevel: 1,
+        yAxisIndex: 0,
+        name: $localize`Reachable on Darknet Only`,
+        showSymbol: false,
+        symbol: 'none',
+        data: data.tor_nodes,
+        type: 'line',
+        lineStyle: {
+          width: 2,
+        },
+        areaStyle: {
+          opacity: 0.5,
+        },
+        stack: 'Total',
+        color: new graphic.LinearGradient(0, 0.75, 0, 1, [
+          { offset: 0, color: '#7D4698' },
+          { offset: 1, color: '#7D4698AA' },
+        ]),
+        smooth: false,
+      },
+    ];
+
     this.chartOptions = {
       title: title,
       animation: false,
@@ -164,8 +252,10 @@ export class NodesNetworksChartComponent implements OnInit {
           const date = new Date(ticks[0].data[0]).toLocaleDateString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
           let tooltip = `<b style="color: white; margin-left: 2px">${date}</b><br>`;
 
-          console.log(ticks);
+          for (const tick of ticks.reverse()) {
-          for (const tick of ticks) {
+            if (tick.seriesName.indexOf('ignored') !== -1) {
+              continue;
+            }
             if (tick.seriesIndex === 0) { // Tor
               tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}`;
             } else if (tick.seriesIndex === 1) { // Clearnet
@@ -194,7 +284,7 @@ export class NodesNetworksChartComponent implements OnInit {
         padding: 10,
         data: [
           {
-            name: $localize`Tor`,
+            name: $localize`Reachable on Darknet Only`,
             inactiveColor: 'rgb(110, 112, 121)',
             textStyle: {
               color: 'white',
@@ -202,7 +292,7 @@ export class NodesNetworksChartComponent implements OnInit {
             icon: 'roundRect',
           },
           {
-            name: $localize`Clearnet`,
+            name: $localize`Reachable on Clearnet and Darknet`,
             inactiveColor: 'rgb(110, 112, 121)',
             textStyle: {
               color: 'white',
@@ -210,7 +300,7 @@ export class NodesNetworksChartComponent implements OnInit {
             icon: 'roundRect',
           },
           {
-            name: $localize`Clearnet & Tor`,
+            name: $localize`Reachable on Clearnet Only`,
             inactiveColor: 'rgb(110, 112, 121)',
             textStyle: {
               color: 'white',
@@ -218,7 +308,7 @@ export class NodesNetworksChartComponent implements OnInit {
             icon: 'roundRect',
           },
           {
-            name: $localize`Unannounced`,
+            name: $localize`Unknown`,
             inactiveColor: 'rgb(110, 112, 121)',
             textStyle: {
               color: 'white',
@@ -227,10 +317,10 @@ export class NodesNetworksChartComponent implements OnInit {
           },
         ],
         selected: this.widget ? undefined : JSON.parse(this.storageService.getValue('nodes_networks_legend'))  ?? {
-          '$localize`Tor`': true,
+          '$localize`Reachable on Darknet Only`': true,
-          '$localize`Clearnet`': true,
+          '$localize`Reachable on Clearnet Only`': true,
-          '$localize`Clearnet & Tor`': true,
+          '$localize`Reachable on Clearnet and Darknet`': true,
-          '$localize`Unannounced`': true,
+          '$localize`Unknown`': true,
         }
       },
       yAxis: data.tor_nodes.length === 0 ? undefined : [
@@ -254,7 +344,6 @@ export class NodesNetworksChartComponent implements OnInit {
               opacity: 0.25,
             },
           },
-          max: maxYAxis,
           min: 0,
           interval: 3000,
         },
@@ -278,98 +367,25 @@ export class NodesNetworksChartComponent implements OnInit {
               opacity: 0.25,
             },
           },
-          max: maxYAxis,
           min: 0,
           interval: 3000,
         }
       ],
-      series: data.tor_nodes.length === 0 ? [] : [
+      series: data.tor_nodes.length === 0 ? [] : series.concat(series.map((serie) => {
-        {
+        // We create dummy duplicated series so when we use the data zoom, the y axis
-          zlevel: 1,
+        // both scales properly
-          yAxisIndex: 0,
+        const invisibleSerie = {...serie};
-          name: $localize`Unannounced`,
+        invisibleSerie.name = 'ignored' + Math.random().toString(); 
-          showSymbol: false,
+        invisibleSerie.stack = 'ignored';
-          symbol: 'none',
+        invisibleSerie.yAxisIndex = 1;
-          data: data.unannounced_nodes,
+        invisibleSerie.lineStyle = {
-          type: 'line',
+          opacity: 0,
-          lineStyle: {
+        };
-            width: 2,
+        invisibleSerie.areaStyle = {
-          },
+          opacity: 0,
-          areaStyle: {
+        };
-            opacity: 0.5,
+        return invisibleSerie;
-          },
+      })),
-          stack: 'Total',
-          color: new graphic.LinearGradient(0, 0.75, 0, 1, [
-            { offset: 0, color: '#D81B60' },
-            { offset: 1, color: '#D81B60AA' },
-          ]),
-
-          smooth: false,
-        },
-        {
-          zlevel: 1,
-          yAxisIndex: 0,
-          name: $localize`Clearnet`,
-          showSymbol: false,
-          symbol: 'none',
-          data: data.clearnet_nodes,
-          type: 'line',
-          lineStyle: {
-            width: 2,
-          },
-          areaStyle: {
-            opacity: 0.5,
-          },
-          stack: 'Total',
-          color: new graphic.LinearGradient(0, 0.75, 0, 1, [
-            { offset: 0, color: '#FFB300' },
-            { offset: 1, color: '#FFB300AA' },
-          ]),
-          smooth: false,
-        },
-        {
-          zlevel: 1,
-          yAxisIndex: 1,
-          name: $localize`Clearnet & Tor`,
-          showSymbol: false,
-          symbol: 'none',
-          data: data.clearnet_tor_nodes,
-          type: 'line',
-          lineStyle: {
-            width: 2,
-          },
-          areaStyle: {
-            opacity: 0.5,
-          },
-          stack: 'Total',
-          color: new graphic.LinearGradient(0, 0.75, 0, 1, [
-            { offset: 0, color: '#be7d4c' },
-            { offset: 1, color: '#be7d4cAA' },
-          ]),
-          smooth: false,
-        },
-        {
-          zlevel: 1,
-          yAxisIndex: 1,
-          name: $localize`Tor`,
-          showSymbol: false,
-          symbol: 'none',
-          data: data.tor_nodes,
-          type: 'line',
-          lineStyle: {
-            width: 2,
-          },
-          areaStyle: {
-            opacity: 0.5,
-          },
-          stack: 'Total',
-          color: new graphic.LinearGradient(0, 0.75, 0, 1, [
-            { offset: 0, color: '#7D4698' },
-            { offset: 1, color: '#7D4698AA' },
-          ]),
-          smooth: false,
-        },
-      ],
       dataZoom: this.widget ? null : [{
         type: 'inside',
         realtime: true,
@@ -396,6 +412,11 @@ export class NodesNetworksChartComponent implements OnInit {
         },
       }],
     };
+
+    if (isMobile()) {
+      // @ts-ignore
+      this.chartOptions.legend.left = 50;
+    }
   }
 
   onChartInit(ec): void {