fix dashboard view and spacing button

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,

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

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

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;

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/>

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

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;