machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Invert graph legends order. (#532)

Browse Source 
* Invert graph legends order.

* Reorder graph legends if inverted-graph is true.
This commit is contained in:
Miguel Medeiros 2021-05-23 06:51:29 -03:00 committed by GitHub
parent d055fabfeb
commit 4dcda2cf47
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/app/components/statistics/chartist.component.scss
View File

@ -1,6 +1,11 @@
.ct-legend{ .ct-legend{
top: 130px; top: 130px;
display: flex;
flex-direction: column-reverse;
@media (min-width: 653px) { @media (min-width: 653px) {
top: 90px; top: 90px;
} }
}
.ct-legend.inverted{
flex-direction: column;
} }

6
frontend/src/app/components/statistics/chartist.component.ts
View File

@ -72,7 +72,7 @@ export class ChartistComponent implements OnInit, OnChanges, OnDestroy {
// @ts-ignore // @ts-ignore
public chart: ChartInterfaces; public chart: ChartInterfaces;
private element: HTMLElement; private element: HTMLElement;
constructor( constructor(
element: ElementRef, element: ElementRef,
@ -367,6 +367,10 @@ Chartist.plugins.legend = function (options: any) {
function createLegendElement() { function createLegendElement() {
const legendElement = document.createElement('ul'); const legendElement = document.createElement('ul');
legendElement.className = 'ct-legend'; legendElement.className = 'ct-legend';
const inverted = localStorage.getItem('inverted-graph') === 'true';
if (inverted){
legendElement.classList.add('inverted');
}
if (chart instanceof Chartist.Pie) { if (chart instanceof Chartist.Pie) {
legendElement.classList.add('ct-legend-inside'); legendElement.classList.add('ct-legend-inside');
} }

2
frontend/src/app/components/television/television.component.scss
View File

@ -69,6 +69,8 @@
} }
:host ::ng-deep .ct-legend { :host ::ng-deep .ct-legend {
top: 20px !important; top: 20px !important;
display: flex;
flex-direction: column-reverse;
@media(min-height: 800px){ @media(min-height: 800px){
padding-top: 40px !important; padding-top: 40px !important;
} }