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 `
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;