diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts index 63e051a1c..3cb6fff4e 100644 --- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts +++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts @@ -31,8 +31,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges { hoverIndexSerie = 0; feeLimitIndex: number; feeLevelsOrdered = []; - toggledLegends = []; - // feeLevelsFiltered = []; constructor( private vbytesPipe: VbytesPipe, @@ -64,10 +62,6 @@ 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[]) { @@ -146,18 +140,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges { 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, - }, + color: chartColors, tooltip: { show: true, trigger: 'axis', @@ -176,7 +159,10 @@ export class MempoolGraphComponent implements OnInit, OnChanges { }, formatter: (params: any) => { const legendName = (index: number) => this.feeLevelsOrdered[index]; - const colorSpan = (index: number) => `${legendName(index)}`; + const colorSpan = (index: number) => ` + + ${legendName(index)} + `; const totals = (values: any) => { let totalValueTemp = 0; const totalValueArrayTemp = []; @@ -191,8 +177,12 @@ export class MempoolGraphComponent implements OnInit, OnChanges { }; }; const { totalValue, totalValueArray } = totals(params); - const title = `
${params[0].axisValue} - ${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)}
`; + const title = `
+ ${params[0].axisValue} + + ${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)} + +
`; const itemFormatted = []; let totalParcial = 0; let progressPercentageText = ''; @@ -210,7 +200,9 @@ export class MempoolGraphComponent implements OnInit, OnChanges { ${progressPercentage.toFixed(2)} % - ${this.vbytesPipe.transform(totalParcial, 2, 'vB', 'MvB', false)} + + ${this.vbytesPipe.transform(totalParcial, 2, 'vB', 'MvB', false)} +
@@ -220,10 +212,16 @@ export class MempoolGraphComponent implements OnInit, OnChanges { activeItemClass = 'active'; } itemFormatted.push(` - ${colorSpan(index)} - ${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)} + + ${colorSpan(index)} + + + ${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)} + - ${this.vbytesPipe.transform(totalValueArray[index], 2, 'vB', 'MvB', false)} + + ${this.vbytesPipe.transform(totalValueArray[index], 2, 'vB', 'MvB', false)} +
@@ -233,7 +231,8 @@ export class MempoolGraphComponent implements OnInit, OnChanges { `); } }); - return `
+ const classActive = (this.template === 'advanced') ? 'fees-wrapper-tooltip-chart-advanced' : ''; + return `
${title} @@ -244,9 +243,13 @@ export class MempoolGraphComponent implements OnInit, OnChanges { - ${itemFormatted.reverse().join('')} + + ${itemFormatted.reverse().join('')} +
- ${progressPercentageText} + + ${progressPercentageText} +
`; } }, diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html index 29a10b0b3..c06ef4b37 100644 --- a/frontend/src/app/components/statistics/statistics.component.html +++ b/frontend/src/app/components/statistics/statistics.component.html @@ -46,7 +46,6 @@ [limitFee]="500" [height]="500" [left]="65" - [right]="85" [data]="mempoolStats" >
diff --git a/frontend/src/app/components/television/television.component.scss b/frontend/src/app/components/television/television.component.scss index 8629fbcb7..78e27750c 100644 --- a/frontend/src/app/components/television/television.component.scss +++ b/frontend/src/app/components/television/television.component.scss @@ -18,18 +18,15 @@ .chart-holder { height: 650px; width: 100%; - margin: 30px auto; + margin: 30px auto 0; } .blockchain-wrapper { - display: flex; + display: block; height: 100%; min-height: 240px; position: relative; - top: -20px; - @media(min-height: 800px) { - top: 30px; - } + top: 30px; .position-container { position: absolute; @@ -37,10 +34,6 @@ bottom: 170px; } - .chart-holder { - height: calc(100% - 220px); - } - #divider { width: 3px; height: 175px; @@ -55,27 +48,7 @@ top: -28px; } } - - @media (min-width: 1920px) { - .position-container { - transform: scale(1.3); - bottom: 210px; - } - .chart-holder { - height: calc(100% - 280px); - } - } - } -:host ::ng-deep .ct-legend { - top: 20px !important; - display: flex; - flex-direction: column-reverse; - @media(min-height: 800px){ - padding-top: 40px !important; - } -} - .tv-container { display: flex; margin-top: 0px;