Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

fix dashboard view and spacing button

Browse Source
This commit is contained in:
joseCorte-exe 2022-05-18 12:32:52 -03:00
parent 8e6a7b3a85
commit ee1b5da8c7
8 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/graph/SingleBar.tsx
View File

@ -9,12 +9,9 @@ import {
Legend, Legend,
} from 'chart.js'; } from 'chart.js';
import { Bar } from 'react-chartjs-2'; import { Bar } from 'react-chartjs-2';
import faker from 'faker';
import { ChartView } from './ChartView'; import { ChartView } from './ChartView';
import ChartTitle from './ChartTitle'; import ChartTitle from './ChartTitle';
import { dataEconomiaBruta } from '../../services/economiaBruta'
ChartJS.register( ChartJS.register(
CategoryScale, CategoryScale,
LinearScale, LinearScale,

2
src/components/graph/graphCard/ChartCardView.ts
View File

@ -9,7 +9,7 @@ export const ChartCardView = styled.article`
width: 100%; width: 100%;
height: fit-content; height: fit-content;
min-height: 34.5rem; min-height: 41rem;
background: #F8F8F8; background: #F8F8F8;
box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ;

5
src/components/header/HeaderView.ts
View File

@ -36,7 +36,7 @@ export const HeaderView = styled.header`
background-color: #254F7F; background-color: #254F7F;
color: white; color: white;
transform: translateX(20px); transform: translateX(12%);
::after { ::after {
content: ""; content: "";
@ -58,6 +58,9 @@ export const HeaderView = styled.header`
} }
} }
@media (max-width: 1640px) { @media (max-width: 1640px) {
.icon {
transform: translateX(6%);
}
input { input {
height: 2rem; height: 2rem;
} }

3
src/components/sidebar/SidebarView.ts
View File

@ -130,6 +130,9 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
width: 10rem; width: 10rem;
height: 3rem; height: 3rem;
margin-top: 30px;
margin-bottom: 20px;
border-style: none; border-style: none;
border-radius: 6px; border-radius: 6px;

4
src/pages/chartTelemetry.tsx
View File

@ -17,8 +17,8 @@ export default function chartTelemetry() {
<ChatTelemetryView> <ChatTelemetryView>
<Header name='' /> <Header name='' />
<PageTitle title='Telemetria - Graficos' subtitle='Gráficos' /> <PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
<section> <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='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} /> <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'} /> <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/> <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/>

10
src/pages/dashboard.tsx
View File

@ -25,11 +25,11 @@ export default function Dashboard() {
<PageTitle title='Visão Geral' subtitle='Bem Vindo a Smart Energia' /> <PageTitle title='Visão Geral' subtitle='Bem Vindo a Smart Energia' />
<Link href={'pld'} > <Link href={'pld'} >
<section className="cardsSection" > <section className="cardsSection" >
<MapCard title='R$/MWh' subtitle='abril / 22' statistic='' imgSource='/moneyIcon.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='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='S' subtitle='Sul' statistic='R$ 273,54' imgSource='/SUL.svg' />
<MapCard title='NE' subtitle='Nordeste' statistic='R$ 273,54' imgSource='/nordeste.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='N' subtitle='Norte' statistic='R$ 273,54' imgSource='/norte.svg' />
</section> </section>
</Link> </Link>

2
src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts
View File

@ -9,7 +9,7 @@ export const ChatTelemetryView = styled.main`
width: 100%; width: 100%;
section { .chartContainer {
display: grid; display: grid;
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;

2
src/styles/layouts/dashboard/DashboardView.ts
View File

@ -35,7 +35,7 @@ export const DashboardView = styled.main`
display: grid; display: grid;
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%; grid-template-rows: 50% 50% 50%;
gap: 30px; gap: 30px;