Merge branch 'master' into simon/revert-info-button-color-change

backend/src/api/explorer/statistics.api.ts

@@ -6,7 +6,8 @@ class StatisticsApi {
   public async $getStatistics(interval: string | null = null): Promise<any> {
     interval = Common.getSqlInterval(interval);
 
-    let query = `SELECT UNIX_TIMESTAMP(added) AS added, channel_count, total_capacity, tor_nodes, clearnet_nodes, unannounced_nodes
+    let query = `SELECT UNIX_TIMESTAMP(added) AS added, channel_count, total_capacity,
+      tor_nodes, clearnet_nodes, unannounced_nodes, clearnet_tor_nodes
       FROM lightning_stats`;
 
     if (interval) {

frontend/src/app/components/transaction/transaction.component.html

@@ -191,12 +191,20 @@
     <br>
 
     <div class="title">
-      <h2 i18n="transaction.diagram|Transaction diagram">Diagram</h2>
+      <h2 i18n="transaction.flow|Transaction flow">Flow</h2>
     </div>
 
     <div class="box">
       <div class="graph-container" #graphContainer>
-        <tx-bowtie-graph [tx]="tx" [width]="graphWidth" [height]="graphExpanded ? (maxInOut * 15) : graphHeight" [maxStrands]="graphExpanded ? maxInOut : 24" [network]="network" [tooltip]="true"></tx-bowtie-graph>
+        <tx-bowtie-graph
+          [tx]="tx"
+          [width]="graphWidth"
+          [height]="graphExpanded ? (maxInOut * 15) : graphHeight"
+          [lineLimit]="inOutLimit"
+          [maxStrands]="graphExpanded ? maxInOut : 24"
+          [network]="network"
+          [tooltip]="true">
+        </tx-bowtie-graph>
       </div>
       <div class="toggle-wrapper" *ngIf="maxInOut > 24">
         <button class="btn btn-sm btn-primary graph-toggle" (click)="expandGraph();" *ngIf="!graphExpanded; else collapseBtn"><span i18n="show-more">Show more</span></button>

frontend/src/app/components/transaction/transaction.component.ts

@@ -50,7 +50,9 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   graphExpanded: boolean = false;
   graphWidth: number = 1000;
   graphHeight: number = 360;
+  inOutLimit: number = 150;
   maxInOut: number = 0;
+
   tooltipPosition: { x: number, y: number };
 
   @ViewChild('graphContainer')
@@ -298,7 +300,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   setupGraph() {
-    this.maxInOut = Math.min(250, Math.max(this.tx?.vin?.length || 1, this.tx?.vout?.length + 1 || 1));
+    this.maxInOut = Math.min(this.inOutLimit, Math.max(this.tx?.vin?.length || 1, this.tx?.vout?.length + 1 || 1));
     this.graphHeight = Math.min(360, this.maxInOut * 80);
   }
 

frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts

@@ -19,8 +19,6 @@ interface Xput {
   confidential?: boolean;
 }
 
-const lineLimit = 250;
-
 @Component({
   selector: 'tx-bowtie-graph',
   templateUrl: './tx-bowtie-graph.component.html',
@@ -31,7 +29,8 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   @Input() network: string;
   @Input() width = 1200;
   @Input() height = 600;
-  @Input() combinedWeight = 100;
+  @Input() lineLimit = 250;
+  @Input() maxCombinedWeight = 100;
   @Input() minWeight = 2; //
   @Input() maxStrands = 24; // number of inputs/outputs to keep fully on-screen.
   @Input() tooltip = false;
@@ -42,6 +41,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   outputs: SvgLine[];
   middle: SvgLine;
   midWidth: number;
+  combinedWeight: number;
   isLiquid: boolean = false;
   hoverLine: Xput | void = null;
   tooltipPosition = { x: 0, y: 0 };
@@ -62,20 +62,19 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   gradient: string[] = ['#105fb0', '#105fb0'];
 
   ngOnInit(): void {
-    this.isLiquid = (this.network === 'liquid' || this.network === 'liquidtestnet');
-    this.gradient = this.gradientColors[this.network];
-    this.midWidth = Math.min(50, Math.ceil(this.width / 20));
     this.initGraph();
   }
 
   ngOnChanges(): void {
-    this.isLiquid = (this.network === 'liquid' || this.network === 'liquidtestnet');
-    this.gradient = this.gradientColors[this.network];
-    this.midWidth = Math.min(50, Math.ceil(this.width / 20));
     this.initGraph();
   }
 
   initGraph(): void {
+    this.isLiquid = (this.network === 'liquid' || this.network === 'liquidtestnet');
+    this.gradient = this.gradientColors[this.network];
+    this.midWidth = Math.min(10, Math.ceil(this.width / 100));
+    this.combinedWeight = Math.min(this.maxCombinedWeight, Math.floor((this.width - (2 * this.midWidth)) / 6));
+
     const totalValue = this.calcTotalValue(this.tx);
     let voutWithFee = this.tx.vout.map(v => {
       return {
@@ -103,19 +102,19 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
       } as Xput;
     });
 
-    if (truncatedInputs.length > lineLimit) {
+    if (truncatedInputs.length > this.lineLimit) {
-      const valueOfRest = truncatedInputs.slice(lineLimit).reduce((r, v) => {
+      const valueOfRest = truncatedInputs.slice(this.lineLimit).reduce((r, v) => {
         return r + (v.value || 0);
       }, 0);
-      truncatedInputs = truncatedInputs.slice(0, lineLimit);
+      truncatedInputs = truncatedInputs.slice(0, this.lineLimit);
-      truncatedInputs.push({ type: 'input', value: valueOfRest, rest: this.tx.vin.length - lineLimit });
+      truncatedInputs.push({ type: 'input', value: valueOfRest, rest: this.tx.vin.length - this.lineLimit });
     }
-    if (voutWithFee.length > lineLimit) {
+    if (voutWithFee.length > this.lineLimit) {
-      const valueOfRest = voutWithFee.slice(lineLimit).reduce((r, v) => {
+      const valueOfRest = voutWithFee.slice(this.lineLimit).reduce((r, v) => {
         return r + (v.value || 0);
       }, 0);
-      voutWithFee = voutWithFee.slice(0, lineLimit);
+      voutWithFee = voutWithFee.slice(0, this.lineLimit);
-      voutWithFee.push({ type: 'output', value: valueOfRest, rest: outputCount - lineLimit });
+      voutWithFee.push({ type: 'output', value: valueOfRest, rest: outputCount - this.lineLimit });
     }
 
     this.inputData = truncatedInputs;
@@ -126,7 +125,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
 
     this.middle = {
       path: `M ${(this.width / 2) - this.midWidth} ${(this.height / 2) + 0.5} L ${(this.width / 2) + this.midWidth} ${(this.height / 2) + 0.5}`,
-      style: `stroke-width: ${this.combinedWeight + 0.5}; stroke: ${this.gradient[1]}`
+      style: `stroke-width: ${this.combinedWeight + 1}; stroke: ${this.gradient[1]}`
     };
   }
 
@@ -157,7 +156,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
 
   initLines(side: 'in' | 'out', xputs: Xput[], total: number, maxVisibleStrands: number): SvgLine[] {
     if (!total) {
-      const weights = xputs.map((put): number => this.combinedWeight / xputs.length);
+      const weights = xputs.map((put) => this.combinedWeight / xputs.length);
       return this.linesFromWeights(side, xputs, weights, maxVisibleStrands);
     } else {
       let unknownCount = 0;
@@ -171,19 +170,26 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
       });
       const unknownShare = unknownTotal / unknownCount;
       // conceptual weights
-      const weights = xputs.map((put): number => this.combinedWeight * (put.value == null ? unknownShare : put.value as number) / total);
+      const weights = xputs.map((put) => this.combinedWeight * (put.value == null ? unknownShare : put.value as number) / total);
       return this.linesFromWeights(side, xputs, weights, maxVisibleStrands);
     }
   }
 
-  linesFromWeights(side: 'in' | 'out', xputs: Xput[], weights: number[], maxVisibleStrands: number) {
+  linesFromWeights(side: 'in' | 'out', xputs: Xput[], weights: number[], maxVisibleStrands: number): SvgLine[] {
-    const lines = [];
+    const lineParams = weights.map((w) => {
-    // actual displayed line thicknesses
+      return {
-    const minWeights = weights.map((w) => Math.max(this.minWeight - 1, w) + 1);
+        weight: w,
+        thickness: Math.max(this.minWeight - 1, w) + 1,
+        offset: 0,
+        innerY: 0,
+        outerY: 0,
+      };
+    });
     const visibleStrands = Math.min(maxVisibleStrands, xputs.length);
-    const visibleWeight = minWeights.slice(0, visibleStrands).reduce((acc, v) => v + acc, 0);
+    const visibleWeight = lineParams.slice(0, visibleStrands).reduce((acc, v) => v.thickness + acc, 0);
     const gaps = visibleStrands - 1;
 
+    // bounds of the middle segment
     const innerTop = (this.height / 2) - (this.combinedWeight / 2);
     const innerBottom = innerTop + this.combinedWeight;
     // tracks the visual bottom of the endpoints of the previous line
@@ -192,39 +198,91 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     // gap between strands
     const spacing = (this.height - visibleWeight) / gaps;
 
-    for (let i = 0; i < xputs.length; i++) {
+    // curve adjustments to prevent overlaps
-      const weight = weights[i];
+    let offset = 0;
-      const minWeight = minWeights[i];
+    let minOffset = 0;
+    let maxOffset = 0;
+    let lastWeight = 0;
+    let pad = 0;
+    lineParams.forEach((line, i) => {
       // set the vertical position of the (center of the) outer side of the line
-      let outer = lastOuter + (minWeight / 2);
+      line.outerY = lastOuter + (line.thickness / 2);
-      const inner = Math.min(innerBottom + (minWeight / 2), Math.max(innerTop + (minWeight / 2), lastInner + (weight / 2)));
+      line.innerY = Math.min(innerBottom + (line.thickness / 2), Math.max(innerTop + (line.thickness / 2), lastInner + (line.weight / 2)));
 
       // special case to center single input/outputs
       if (xputs.length === 1) {
-        outer = (this.height / 2);
+        line.outerY = (this.height / 2);
       }
 
-      lastOuter += minWeight + spacing;
+      lastOuter += line.thickness + spacing;
-      lastInner += weight;
+      lastInner += line.weight;
-      lines.push({
+
-        path: this.makePath(side, outer, inner, minWeight),
+      // calculate conservative lower bound of the amount of horizontal offset
-        style: this.makeStyle(minWeight, xputs[i].type),
+      // required to prevent this line overlapping its neighbor
+
+      if (this.tooltip || !xputs[i].rest) {
+        const w = (this.width - Math.max(lastWeight, line.weight)) / 2; // approximate horizontal width of the curved section of the line
+        const y1 = line.outerY;
+        const y2 = line.innerY;
+        const t = (lastWeight + line.weight) / 2; // distance between center of this line and center of previous line
+
+        // slope of the inflection point of the bezier curve
+        const dx = 0.75 * w;
+        const dy = 1.5 * (y2 - y1);
+        const a = Math.atan2(dy, dx);
+
+        // parallel curves should be separated by >=t at the inflection point to prevent overlap
+        // vertical offset is always = t, contributing tCos(a)
+        // horizontal offset h will contribute hSin(a)
+        // tCos(a) + hSin(a) >= t
+        // h >= t(1 - cos(a)) / sin(a)
+        if (Math.sin(a) !== 0) {
+          // (absolute value clamped to t for sanity)
+          offset += Math.max(Math.min(t * (1 - Math.cos(a)) / Math.sin(a), t), -t);
+        }
+
+        line.offset = offset;
+        minOffset = Math.min(minOffset, offset);
+        maxOffset = Math.max(maxOffset, offset);
+        pad = Math.max(pad, line.thickness / 2);
+        lastWeight = line.weight;
+      } else {
+        // skip the offsets for consolidated lines in unfurls, since these *should* overlap a little
+      }
+    });
+
+    // normalize offsets
+    lineParams.forEach((line) => {
+      line.offset -= minOffset;
+    });
+    maxOffset -= minOffset;
+
+    return lineParams.map((line, i) => {
+      return {
+        path: this.makePath(side, line.outerY, line.innerY, line.thickness, line.offset, pad + maxOffset),
+        style: this.makeStyle(line.thickness, xputs[i].type),
         class: xputs[i].type
+      };
     });
   }
 
-    return lines;
+  makePath(side: 'in' | 'out', outer: number, inner: number, weight: number, offset: number, pad: number): string {
-  }
+    const start = (weight * 0.5);
+    const curveStart = Math.max(start + 1, pad - offset);
+    const end =  this.width / 2 - (this.midWidth * 0.9) + 1;
+    const curveEnd = end - offset - 10;
+    const midpoint = (curveStart + curveEnd) / 2;
 
-  makePath(side: 'in' | 'out', outer: number, inner: number, weight: number): string {
-    const start = side === 'in' ? (weight * 0.5) : this.width - (weight * 0.5);
-    const center =  this.width / 2 + (side === 'in' ? -(this.midWidth * 0.9) : (this.midWidth * 0.9) );
-    const midpoint = (start + center) / 2;
     // correct for svg horizontal gradient bug
     if (Math.round(outer) === Math.round(inner)) {
       outer -= 1;
     }
-    return `M ${start} ${outer} C ${midpoint} ${outer}, ${midpoint} ${inner}, ${center} ${inner}`;
+
+    if (side === 'in') {
+      return `M ${start} ${outer} L ${curveStart} ${outer} C ${midpoint} ${outer}, ${midpoint} ${inner}, ${curveEnd} ${inner} L ${end} ${inner}`;
+    } else { // mirrored in y-axis for the right hand side
+      return `M ${this.width - start} ${outer} L ${this.width - curveStart} ${outer} C ${this.width - midpoint} ${outer}, ${this.width - midpoint} ${inner}, ${this.width - curveEnd} ${inner} L ${this.width - end} ${inner}`;
+    }
   }
 
   makeStyle(minWeight, type): string {

frontend/src/app/docs/api-docs/api-docs-data.ts

@@ -40,27 +40,61 @@ export const wsApiDocsData = {
         });
   `,
     esModule: `
-const { %{0}: { websocket } } = mempoolJS();
+  const { %{0}: { websocket } } = mempoolJS();
 
-const ws = websocket.initServer({
+  const ws = websocket.initServer({
-options: ["blocks", "stats", "mempool-blocks", "live-2h-chart"],
+    options: ["blocks", "stats", "mempool-blocks", "live-2h-chart"],
-});
+  });
 
-ws.on("message", function incoming(data) {
+  ws.on("message", function incoming(data) {
-const res = JSON.parse(data.toString());
+    const res = JSON.parse(data.toString());
-if (res.block) {
+    if (res.block) {
-console.log(res.block);
+      console.log(res.block);
-}
+    }
-if (res.mempoolInfo) {
+    if (res.mempoolInfo) {
-console.log(res.mempoolInfo);
+      console.log(res.mempoolInfo);
-}
+    }
-if (res.transactions) {
+    if (res.transactions) {
-console.log(res.transactions);
+      console.log(res.transactions);
-}
+    }
-if (res["mempool-blocks"]) {
+    if (res["mempool-blocks"]) {
-console.log(res["mempool-blocks"]);
+      console.log(res["mempool-blocks"]);
-}
+    }
-});
+  });
+    `,
+    python: `import websocket
+import _thread
+import time
+import rel
+import json
+
+rel.safe_read()
+
+def on_message(ws, message):
+    print(json.loads(message))
+
+def on_error(ws, error):
+    print(error)
+
+def on_close(ws, close_status_code, close_msg):
+    print("### closed ###")
+
+def on_open(ws):
+    message = { "action": "init" }
+    ws.send(json.dumps(message))
+    message = { "action": "want", "data": ['blocks', 'stats', 'mempool-blocks', 'live-2h-chart', 'watch-mempool'] }
+    ws.send(json.dumps(message))
+
+if __name__ == "__main__":
+    ws = websocket.WebSocketApp("wss://mempool.space/api/v1/ws",
+                              on_open=on_open,
+                              on_message=on_message,
+                              on_error=on_error,
+                              on_close=on_close)
+
+    ws.run_forever(dispatcher=rel)  # Set dispatcher to automatic reconnection
+    rel.signal(2, rel.abort)  # Keyboard Interrupt
+    rel.dispatch()
     `,
   },
   codeSampleMainnet: emptyCodeSample,

frontend/src/app/docs/code-template/code-template.component.html

@@ -30,6 +30,13 @@
         <pre><code [innerText]="wrapEsModule(code)"></code></pre>
       </ng-template>
     </li>
+    <li ngbNavItem *ngIf="showCodeExample[network] && network !== 'liquid' && network !== 'liquidtestnet'" role="presentation">
+      <a ngbNavLink (click)="adjustContainerHeight( $event )" role="tab">Python</a>
+      <ng-template ngbNavContent>
+        <div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapEsModule(code)"></app-clipboard></div>
+        <pre><code [innerText]="wrapPythonTemplate(code)"></code></pre>
+      </ng-template>
+    </li>
   </ul>
   <div [ngbNavOutlet]="navCodeTemplate"></div>
   <div *ngIf="code.codeTemplate && wrapResponse(code) !== ''" class="response">

frontend/src/app/docs/code-template/code-template.component.ts

@@ -152,6 +152,7 @@ export class CodeTemplateComponent implements OnInit {
 const init = async () => {
   ${codeText}
 };
+
 init();`;
     }
   }
@@ -287,6 +288,10 @@ yarn add @mempool/liquid.js`;
     return code.codeSampleMainnet.response;
   }
 
+  wrapPythonTemplate(code: any) {
+    return ( ( this.network === 'testnet' || this.network === 'signet' ) ? ( code.codeTemplate.python.replace( "wss://mempool.space/api/v1/ws", "wss://mempool.space/" + this.network + "/api/v1/ws" ) ) : code.codeTemplate.python );
+  }
+
   replaceJSPlaceholder(text: string, code: any) {
     for (let index = 0; index < code.length; index++) {
       const textReplace = code[index];

frontend/src/app/lightning/node/node.component.html

@@ -85,9 +85,12 @@
                   {{ node.as_organization }} [ASN {{node.as_number}}]
                 </a>                
               </td>
-              <td *ngIf="!node.as_number">
+              <td *ngIf="clearnetSocketCount === 0 && torSocketCount > 0">
                 <span class="badge badge-success" placement="bottom" i18n="tor">Exclusively on Tor</span>
               </td>
+              <td *ngIf="node.sockets.length === 0">
+                <span i18n="unknown">Unknown</span>
+              </td>
             </tr>
           </tbody>
         </table>

frontend/src/app/lightning/node/node.component.ts

@@ -22,6 +22,8 @@ export class NodeComponent implements OnInit {
   error: Error;
   publicKey: string;
   channelListLoading = false;
+  clearnetSocketCount = 0;
+  torSocketCount = 0;
 
   constructor(
     private lightningApiService: LightningApiService,
@@ -47,10 +49,13 @@ export class NodeComponent implements OnInit {
             let label = '';
             if (socket.match(/(?:[0-9]{1,3}\.){3}[0-9]{1,3}/)) {
               label = 'IPv4';
+              this.clearnetSocketCount++;
             } else if (socket.indexOf('[') > -1) {
               label = 'IPv6';
+              this.clearnetSocketCount++;
             } else if (socket.indexOf('onion') > -1) {
               label = 'Tor';
+              this.torSocketCount++;
             }
             socketsObject.push({
               label: label,

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';
@@ -89,10 +89,11 @@ export class NodesNetworksChartComponent implements OnInit {
                   tor_nodes: data.map(val => [val.added * 1000, val.tor_nodes]),
                   clearnet_nodes: data.map(val => [val.added * 1000, val.clearnet_nodes]),
                   unannounced_nodes: data.map(val => [val.added * 1000, val.unannounced_nodes]),
+                  clearnet_tor_nodes: data.map(val => [val.added * 1000, val.clearnet_tor_nodes]),
                 };
                 let maxYAxis = 0;
                 for (const day of data) {
-                  maxYAxis = Math.max(maxYAxis, day.tor_nodes + day.clearnet_nodes + day.unannounced_nodes);
+                  maxYAxis = Math.max(maxYAxis, day.tor_nodes + day.clearnet_nodes + day.unannounced_nodes + day.clearnet_tor_nodes);
                 }
                 maxYAxis = Math.ceil(maxYAxis / 3000) * 3000;
                 this.prepareChartOptions(chartData, maxYAxis);
@@ -134,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,12 +253,17 @@ export class NodesNetworksChartComponent implements OnInit {
           let tooltip = `<b style="color: white; margin-left: 2px">${date}</b><br>`;
 
           for (const tick of ticks.reverse()) {
+            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
               tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}`;
             } else if (tick.seriesIndex === 2) { // Unannounced
               tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}`;
+            } else if (tick.seriesIndex === 3) { // Tor + Clearnet
+              tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}`;
             }
             tooltip += `<br>`;
             total += tick.data[1];
@@ -190,7 +284,7 @@ export class NodesNetworksChartComponent implements OnInit {
         padding: 10,
         data: [
           {
-            name: $localize`Total`,
+            name: $localize`Reachable on Darknet Only`,
             inactiveColor: 'rgb(110, 112, 121)',
             textStyle: {
               color: 'white',
@@ -198,7 +292,7 @@ export class NodesNetworksChartComponent implements OnInit {
             icon: 'roundRect',
           },
           {
-            name: $localize`Tor`,
+            name: $localize`Reachable on Clearnet and Darknet`,
             inactiveColor: 'rgb(110, 112, 121)',
             textStyle: {
               color: 'white',
@@ -206,7 +300,7 @@ export class NodesNetworksChartComponent implements OnInit {
             icon: 'roundRect',
           },
           {
-            name: $localize`Clearnet`,
+            name: $localize`Reachable on Clearnet Only`,
             inactiveColor: 'rgb(110, 112, 121)',
             textStyle: {
               color: 'white',
@@ -214,7 +308,7 @@ export class NodesNetworksChartComponent implements OnInit {
             icon: 'roundRect',
           },
           {
-            name: $localize`Unannounced`,
+            name: $localize`Unknown`,
             inactiveColor: 'rgb(110, 112, 121)',
             textStyle: {
               color: 'white',
@@ -223,10 +317,10 @@ export class NodesNetworksChartComponent implements OnInit {
           },
         ],
         selected: this.widget ? undefined : JSON.parse(this.storageService.getValue('nodes_networks_legend'))  ?? {
-          'Total': true,
+          '$localize`Reachable on Darknet Only`': true,
-          'Tor': true,
+          '$localize`Reachable on Clearnet Only`': true,
-          'Clearnet': true,
+          '$localize`Reachable on Clearnet and Darknet`': true,
-          'Unannounced': true,
+          '$localize`Unknown`': true,
         }
       },
       yAxis: data.tor_nodes.length === 0 ? undefined : [
@@ -250,7 +344,6 @@ export class NodesNetworksChartComponent implements OnInit {
               opacity: 0.25,
             },
           },
-          max: maxYAxis,
           min: 0,
           interval: 3000,
         },
@@ -274,77 +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`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,
@@ -371,6 +412,11 @@ export class NodesNetworksChartComponent implements OnInit {
         },
       }],
     };
+
+    if (isMobile()) {
+      // @ts-ignore
+      this.chartOptions.legend.left = 50;
+    }
   }
 
   onChartInit(ec): void {