From 4dcda2cf47da0acc3452595f8650d5be76901520 Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Sun, 23 May 2021 06:51:29 -0300
Subject: [PATCH] Invert graph legends order. (#532)

* Invert graph legends order.

* Reorder graph legends if inverted-graph is true.
---
 .../src/app/components/statistics/chartist.component.scss   | 5 +++++
 .../src/app/components/statistics/chartist.component.ts     | 6 +++++-
 .../src/app/components/television/television.component.scss | 2 ++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/statistics/chartist.component.scss b/frontend/src/app/components/statistics/chartist.component.scss
index 6eceb7edc..e3c813602 100644
--- a/frontend/src/app/components/statistics/chartist.component.scss
+++ b/frontend/src/app/components/statistics/chartist.component.scss
@@ -1,6 +1,11 @@
 .ct-legend{
     top: 130px;
+    display: flex;
+    flex-direction: column-reverse;
     @media (min-width: 653px) {
         top: 90px;
     }
+}
+.ct-legend.inverted{
+    flex-direction: column;
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/statistics/chartist.component.ts b/frontend/src/app/components/statistics/chartist.component.ts
index 924a4a598..d87c464f7 100644
--- a/frontend/src/app/components/statistics/chartist.component.ts
+++ b/frontend/src/app/components/statistics/chartist.component.ts
@@ -72,7 +72,7 @@ export class ChartistComponent implements OnInit, OnChanges, OnDestroy {
   // @ts-ignore
   public chart: ChartInterfaces;
 
-  private element: HTMLElement;
+  private element: HTMLElement;  
 
   constructor(
     element: ElementRef,
@@ -367,6 +367,10 @@ Chartist.plugins.legend = function (options: any) {
         function createLegendElement() {
             const legendElement = document.createElement('ul');
             legendElement.className = 'ct-legend';
+            const inverted = localStorage.getItem('inverted-graph') === 'true';
+            if (inverted){
+                legendElement.classList.add('inverted');
+            }
             if (chart instanceof Chartist.Pie) {
                 legendElement.classList.add('ct-legend-inside');
             }
diff --git a/frontend/src/app/components/television/television.component.scss b/frontend/src/app/components/television/television.component.scss
index ed9cfbb5c..d7b105bfb 100644
--- a/frontend/src/app/components/television/television.component.scss
+++ b/frontend/src/app/components/television/television.component.scss
@@ -69,6 +69,8 @@
 }
 :host ::ng-deep .ct-legend {
   top: 20px !important;
+  display: flex;
+  flex-direction: column-reverse;
   @media(min-height: 800px){
     padding-top: 40px !important;
   }