Move total MvB to the top.

Fix yAxis value. Fix yAxis value. Make disks smaller and transparent. Change opacity on mouseover stack bars. Add 4th column "sum of vsize" to tooltips table. Add toggle show/hide tier fees. Make progress active bar inline with text value. Add a break line to the timestamp text. Add colored progress bar with number.
2021-09-13 11:07:17 -03:00 · 2021-09-13 11:07:17 -03:00 · d376ba1c61
commit d376ba1c61
parent 388aa7fbe3
4 changed files with 167 additions and 43 deletions
--- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
+++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
@ -99,7 +99,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
      },
      xAxis: {
        type: 'category',
-        data: this.data.labels.map((value: any) => formatDate(value, 'MM/dd - HH:mm', this.locale)),
+        data: this.data.labels.map((value: any) => `${formatDate(value, 'M/d', this.locale)}\n${formatDate(value, 'H:mm', this.locale)}`),
      },
      yAxis: {
        type: 'value',
@ -115,7 +115,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
        {
          data: this.data.series[0],
          type: 'line',
-          smooth: true,
+          smooth: (this.template === 'advanced') ? false : true,
          showSymbol: false,
          lineStyle: {
            width: 3,
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@ -28,8 +28,11 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
    renderer: 'svg',
  };
  windowPreference: string;
-  hoverIndexSerie: -1;
+  hoverIndexSerie = 0;
  feeLimitIndex: number;
+  feeLevelsOrdered = [];
+  toggledLegends = [];
+  // feeLevelsFiltered = [];

  constructor(
    private vbytesPipe: VbytesPipe,
@ -39,6 +42,15 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
  ) { }

  ngOnInit(): void {
+    this.feeLevelsOrdered = feeLevels.map((sat, i, arr) => {
+      if (arr[i] === this.limitFee) { this.feeLimitIndex = i; }
+      if (arr[i] < this.limitFee) {
+        if (i === 0) { return '0 - 1'; }
+        return `${arr[i - 1]} - ${arr[i]}`;
+      } else {
+        return `${this.limitFee}+`;
+      }
+    });
    this.mountFeeChart();
  }

@ -52,6 +64,10 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
    myChart.on('mouseover', 'series', (serie: any) => {
      this.hoverIndexSerie = serie.seriesIndex;
    });
+    // myChart.on('legendselectchanged', (params: any) => {
+    //   this.feeLevelsFiltered = params.selected;
+    //   console.log(params.selected, this.feeLevelsOrdered);
+    // });
  }

  handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) {
@ -87,19 +103,10 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
  mountFeeChart() {
    const { labels, series } = this.mempoolVsizeFeesData;

-    const feeLevelsOrdered = feeLevels.map((sat, i, arr) => {
-      if (arr[i] === this.limitFee) { this.feeLimitIndex = i; }
-      if (arr[i] < this.limitFee) {
-        if (i === 0) { return '0 - 1'; }
-        return `${arr[i - 1]} - ${arr[i]}`;
-      } else {
-        return `${this.limitFee}+`;
-      }
-    });
-
    const seriesGraph = series.map((value: Array<number>, index: number) => {
      if (index <= this.feeLimitIndex){
        return {
+          name: this.feeLevelsOrdered[index],
          type: 'line',
          stack: 'total',
          smooth: false,
@ -110,7 +117,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
            width: 0,
            opacity: 0,
          },
-          symbolSize: (this.template === 'advanced') ? 20 : 10,
+          symbolSize: (this.template === 'advanced') ? 10 : 10,
          showSymbol: false,
          areaStyle: {
            opacity: 1,
@ -118,14 +125,15 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
          },
          emphasis: {
            focus: 'series',
-            select: {
            areaStyle: {
              opacity: 1,
-              }
+            },
+            itemStyle: {
+              opacity: 0.2,
            },
          },
          itemStyle: {
-            borderWidth: 30,
+            opacity: 0,
          },
          data: this.vbytesPipe.transform(value, 2, 'vB', 'MvB', true)
        };
@ -133,15 +141,33 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
    });

    this.mempoolVsizeFeesOptions = {
-      color: chartColors,
+      emphasis: {
+        areaStyle: {
+          opacity: 1,
+        }
+      },
+      legend: {
+        icon: 'none',
+        align: 'right',
+        inactiveColor: '#212121',
+        orient: 'vertical',
+        height: '650px',
+        selectorPosition: 'auto',
+        right: 0,
+        selectedMode: 'multiple',
+        data: this.feeLevelsOrdered,
+        show: (this.template === 'advanced') ? true : false,
+      },
      tooltip: {
+        show: true,
        trigger: 'axis',
+        alwaysShowContent: false,
        position: (pos, params, el, elRect, size) => {
          const positions = { top: (this.template === 'advanced') ? 30 : -30 };
          positions[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 60;
          return positions;
        },
-        extraCssText: `width: ${(this.template === 'advanced') ? '210px' : '200px'};
+        extraCssText: `width: ${(this.template === 'advanced') ? '275px' : '200px'};
                      background: transparent;
                      border: none;
                      box-shadow: none;`,
@ -149,22 +175,31 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
          type: 'line',
        },
        formatter: (params: any) => {
-          const legendName = (index: number) => feeLevelsOrdered[index];
+          const legendName = (index: number) => this.feeLevelsOrdered[index];
          const colorSpan = (index: number) => `<span class="indicator" style="background-color: ${chartColors[index]}"></span><span>${legendName(index)}`;
-          let total = 0;
-          params.map((item: any) => {
-            total += item.value;
-          });
+          const totals = (values: any) => {
+            let totalValue = 0;
+            const totalValueArray = [];
+            const valuesInverted = values.slice(0).reverse();
+            for (const item of valuesInverted) {
+              totalValue += item.value;
+              totalValueArray.push(totalValue);
+            }
+            return { totalValue, totalValueArray: totalValueArray.reverse() };
+          };
+          const { totalValue, totalValueArray } = totals(params);
          const title = `<div class="title">${params[0].axisValue}
-          <span class="total-value">${this.vbytesPipe.transform(total, 2, 'vB', 'MvB', false)}</span></div>`;
+          <span class="total-value">${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)}</span></div>`;
          const itemFormatted = [];
          let totalParcial = 0;
          let progressPercentageText = '';
          params.map((item: any, index: number) => {
            totalParcial += item.value;
            let progressPercentage = 0;
+            let progressPercentageSum = 0;
            if (index <= this.feeLimitIndex) {
-              progressPercentage = (item.value / total) * 100;
+              progressPercentage = (item.value / totalValue) * 100;
+              progressPercentageSum = (totalValueArray[index] / totalValue) * 100;
              let activeItemClass = '';
              if (this.hoverIndexSerie === index) {
                progressPercentageText = `<div class="total-parcial-active">
@ -176,25 +211,31 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
              itemFormatted.push(`<tr class="item ${activeItemClass}">
              <td class="indicator-container">${colorSpan(index)}</td>
              <td class="value">${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)}</td>
-              <td class="total-progress-percentage"><span color: ${chartColors[index]}">${progressPercentage.toFixed(1)} <span class="symbol">%</span></td>
+              <td class="total-progress-sum">
+                <span>${this.vbytesPipe.transform(totalValueArray[index], 2, 'vB', 'MvB', false)}</span>
+              </td>
+              <td class="total-progress-sum-bar">
+                <div>
+                  <span style="width: ${progressPercentageSum.toFixed(2)}%; background-color: ${chartColors[index]}"></span>
+                </div>
+              </td>
            </tr>`);
            }
          });
-          const progressActiveDiv = `<span class="total-value">${progressPercentageText}</span>`;
-          const advancedClass = (this.template === 'advanced') ? 'fees-wrapper-tooltip-chart-advanced' : '';
-          return `<div class="fees-wrapper-tooltip-chart ${advancedClass}">
+          return `<div class="fees-wrapper-tooltip-chart ${(this.template === 'advanced') ? 'fees-wrapper-tooltip-chart-advanced' : ''}">
            ${title}
            <table>
              <thead>
                <tr>
                  <th>Range</th>
                  <th>Size</th>
-                  <th>%</th>
+                  <th>Sum</th>
+                  <th></th>
                </tr>
              </thead>
              <tbody>${itemFormatted.reverse().join('')}</tbody>
            </table>
-            ${progressActiveDiv}
+            <span class="total-value">${progressPercentageText}</span>
          </div>`;
        }
      },
@ -209,6 +250,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
        type: 'slider',
        brushSelect: false,
        realtime: true,
+        bottom: 0,
        selectedDataBackground: {
          lineStyle: {
            color: '#fff',
@ -231,7 +273,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
          type: 'category',
          boundaryGap: false,
          axisLine: { onZero: false },
-          data: labels.map((value: any) => formatDate(value, 'MM/dd - HH:mm', this.locale)),
+          data: labels.map((value: any) => `${formatDate(value, 'M/d', this.locale)}\n${formatDate(value, 'H:mm', this.locale)}`),
        }
      ],
      yAxis: {
@ -252,3 +294,4 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
    };
  }
 }
+
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@ -46,6 +46,7 @@
              [limitFee]="500"
              [height]="500"
              [left]="65"
+              [right]="85"
              [data]="mempoolStats"
            ></app-mempool-graph>
          </div>
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@ -277,6 +277,7 @@ html:lang(ru) .card-title {
  justify-content: space-between;
  padding: 10px 15px;
  text-align: left;
+  width: 200px;
  thead {
    th {
      font-size: 9px;
@ -287,6 +288,9 @@ html:lang(ru) .card-title {
        left: -1px;
        position: relative;
      }
+      &:nth-child(4){
+        display: none;
+      }
    }
  }
  .title {
@ -327,15 +331,25 @@ html:lang(ru) .card-title {
        font-size: 9px !important;
      }
    }
+    .symbol {
+      font-size: 9px;
+    }
    .total-partial {
-      text-align: right;
      font-size: 10px;
-      width: 70px;
+      width: 58px;
+      text-align: right;
    }
    .total-percentage-bar {
      padding-left: 8px;
    }
    .total-progress-percentage {
+      width: 45px;
+      height: 5px;
+      text-align: right;
+      display: none;
+    }
+    .total-progress-sum {
+      width: 58px;
      text-align: right;
    }
  }
@ -355,6 +369,24 @@ html:lang(ru) .card-title {
      top: 2px;
    }
  }
+  thead {
+    th {
+      font-size: 9px;
+      color: #b1b1b1;
+      text-align: right;
+      &:first-child {
+        text-align: left;
+        left: -1px;
+        position: relative;
+      }
+      &:nth-child(4){
+        display: none;
+      }
+      &:nth-child(5){
+        display: none;
+      }
+    }
+  }
  .total-percentage-bar {
    margin: auto;
    width: 35px;
@ -389,6 +421,7 @@ html:lang(ru) .card-title {
 }

 .tx-wrapper-tooltip-chart {
+  width: 115px;
  .item {
    display: flex;
  }
@ -417,19 +450,65 @@ html:lang(ru) .card-title {
  }
 }

-.fees-wrapper-tooltip-chart-big,
-.tx-wrapper-tooltip-chart-big {
+.fees-wrapper-tooltip-chart-advanced,
+.tx-wrapper-tooltip-chart-advanced {
  background: rgba(#1d1f31, 0.98);
+  width: 250px;
+
+  thead {
+    th {
+      &:nth-child(4){
+        display: table-cell;
+      }
+      &:nth-child(5){
+        display: table-cell;
+      }
+    }
+  }
  .title {
    font-size: 15px;
    margin-bottom: 5px;
  }
  .item {
-    font-size: 12px;
    line-height: 1;
    .value {
+      width: 60px;
      .symbol {
-        font-size: 12px !important;
+        font-size: 10px !important;
+      }
+    }
+    .total-partial {
+      font-size: 10px;
+      width: 58px;
+      text-align: right;
+    }
+    .total-progress-percentage {
+      width: 65px;
+      height: 4px;
+      padding: 0px 5px;
+      display: table-cell !important;
+      border-radius: 4px;
+    }
+    .total-progress-sum {
+      width: 65px;
+      height: 4px;
+      padding: 0px 5px;
+      border-radius: 4px;
+    }
+    .total-progress-percentage-bar,
+    .total-progress-sum-bar {
+      width: 35px;
+      height: 4px;
+      div {
+        width: 100%;
+        border-radius: 4px;
+        display: block;
+        background: #29324c94;
+      }
+      span {
+        height: 4px;
+        border-radius: 4px;
+        display: block;
      }
    }
  }
@ -456,7 +535,8 @@ html:lang(ru) .card-title {
  }
 }

-.tx-wrapper-tooltip-chart-big {
+.tx-wrapper-tooltip-chart-advanced {
+  width: 115px;
  .indicator-container {
    .indicator {
      margin-right: 5px;