From ee1b5da8c73b2da4707a58fd4eaf6a91a9ec5cb6 Mon Sep 17 00:00:00 2001
From: joseCorte-exe <josecorte-corte@hotmail.com>
Date: Wed, 18 May 2022 12:32:52 -0300
Subject: [PATCH] fix dashboard view and spacing button

---
 src/components/graph/SingleBar.tsx                    |  3 ---
 src/components/graph/graphCard/ChartCardView.ts       |  2 +-
 src/components/header/HeaderView.ts                   |  5 ++++-
 src/components/sidebar/SidebarView.ts                 |  3 +++
 src/pages/chartTelemetry.tsx                          |  4 ++--
 src/pages/dashboard.tsx                               | 10 +++++-----
 src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts |  2 +-
 src/styles/layouts/dashboard/DashboardView.ts         |  2 +-
 8 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/graph/SingleBar.tsx b/src/components/graph/SingleBar.tsx
index 6738136..2990edc 100644
--- a/src/components/graph/SingleBar.tsx
+++ b/src/components/graph/SingleBar.tsx
@@ -9,12 +9,9 @@ import {
   Legend,
 } from 'chart.js';
 import { Bar } from 'react-chartjs-2';
-import faker from 'faker';
 import { ChartView } from './ChartView';
 import ChartTitle from './ChartTitle';
 
-import { dataEconomiaBruta } from '../../services/economiaBruta'
-
 ChartJS.register(
   CategoryScale,
   LinearScale,
diff --git a/src/components/graph/graphCard/ChartCardView.ts b/src/components/graph/graphCard/ChartCardView.ts
index 972e59b..7c1aed2 100644
--- a/src/components/graph/graphCard/ChartCardView.ts
+++ b/src/components/graph/graphCard/ChartCardView.ts
@@ -9,7 +9,7 @@ export const ChartCardView = styled.article`
 
   width: 100%;
   height: fit-content;
-  min-height: 34.5rem;
+  min-height: 41rem;
 
   background: #F8F8F8;
 	box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
diff --git a/src/components/header/HeaderView.ts b/src/components/header/HeaderView.ts
index bb7156a..736f6b4 100644
--- a/src/components/header/HeaderView.ts
+++ b/src/components/header/HeaderView.ts
@@ -36,7 +36,7 @@ export const HeaderView = styled.header`
     background-color: #254F7F;
     color: white;
 
-    transform: translateX(20px);
+    transform: translateX(12%);
 
     ::after {
       content: "";
@@ -58,6 +58,9 @@ export const HeaderView = styled.header`
     }
   }
   @media (max-width: 1640px) {
+    .icon {
+      transform: translateX(6%);
+    }
     input {
       height: 2rem;
     }
diff --git a/src/components/sidebar/SidebarView.ts b/src/components/sidebar/SidebarView.ts
index 96e945f..6b2994f 100644
--- a/src/components/sidebar/SidebarView.ts
+++ b/src/components/sidebar/SidebarView.ts
@@ -130,6 +130,9 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
     width: 10rem;
     height: 3rem;
 
+    margin-top: 30px;
+    margin-bottom: 20px;
+
     border-style: none;
 
     border-radius: 6px;
diff --git a/src/pages/chartTelemetry.tsx b/src/pages/chartTelemetry.tsx
index 8a780d5..1090a25 100644
--- a/src/pages/chartTelemetry.tsx
+++ b/src/pages/chartTelemetry.tsx
@@ -17,8 +17,8 @@ export default function chartTelemetry() {
     <ChatTelemetryView>
       <Header name='' />
       <PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
-      <section>
-        <LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data4} data3={[]} data4={[]} dataset1='fator de potencia' label={FatorPotencia.label1} />
+      <section className='chartContainer' >
+        <LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data4} data3={[]} data4={[]} dataset1='Fator de Potencia' label={FatorPotencia.label1} />
         <LineChart title='Consumo decretizado em 1 hora' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} dataset1='Demanda registrada' label={ConsumoDecretizadoLine.label1} />
         <SingleBar title='Consumo decretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'} />
         <LineBarChart data1={ConsumoDecretizadoLine.data1} data3={ConsumoDecretizadoLine.data} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'2021'} label={ConsumoDecretizadoLine.label1} title='Demanda Contratada X Registrada' subtitle='' red/>
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
index d3f248e..9dfb24b 100644
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@@ -25,11 +25,11 @@ export default function Dashboard() {
       <PageTitle title='Visão Geral' subtitle='Bem Vindo a Smart Energia' />
       <Link href={'pld'} >
         <section className="cardsSection" >
-            <MapCard title='R$/MWh' subtitle='abril / 22' statistic='' imgSource='/moneyIcon.svg' />
-            <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
-            <MapCard title='S' subtitle='Sul' statistic='R$ 273,54' imgSource='/SUL.svg' />
-            <MapCard title='NE' subtitle='Nordeste' statistic='R$ 273,54' imgSource='/nordeste.svg' />
-            <MapCard title='N' subtitle='Norte' statistic='R$ 273,54' imgSource='/norte.svg' />
+          <MapCard title='R$/MWh' subtitle='abril / 22' statistic='' imgSource='/moneyIcon.svg' />
+          <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
+          <MapCard title='S' subtitle='Sul' statistic='R$ 273,54' imgSource='/SUL.svg' />
+          <MapCard title='NE' subtitle='Nordeste' statistic='R$ 273,54' imgSource='/nordeste.svg' />
+          <MapCard title='N' subtitle='Norte' statistic='R$ 273,54' imgSource='/norte.svg' />
         </section>
       </Link>
 
diff --git a/src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts b/src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts
index 544ced3..d6e7406 100644
--- a/src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts
+++ b/src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts
@@ -9,7 +9,7 @@ export const ChatTelemetryView = styled.main`
 
   width: 100%;
 
-  section {
+  .chartContainer {
     display: grid;
 
     grid-template-columns: 50% 50%;
diff --git a/src/styles/layouts/dashboard/DashboardView.ts b/src/styles/layouts/dashboard/DashboardView.ts
index 43a271c..43f2b61 100644
--- a/src/styles/layouts/dashboard/DashboardView.ts
+++ b/src/styles/layouts/dashboard/DashboardView.ts
@@ -35,7 +35,7 @@ export const DashboardView = styled.main`
     display: grid;
 
     grid-template-columns: 50% 50%;
-    grid-template-rows: 50% 50%;
+    grid-template-rows: 50% 50% 50%;
 
     gap: 30px;