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

Merge branch 'feature/graphCard' into 'dev'

Browse Source 
Feature/graph card

See merge request kluppsoftware/smart-energia-web!11
This commit is contained in:
José Corte 2022-05-06 23:47:37 +00:00
commit 89e627e1b1
15 changed files with 140 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -22,14 +22,17 @@
"@mui/material": "^5.6.4",
"@typescript-eslint/eslint-plugin": "^5.22.0",
"@typescript-eslint/parser": "^5.22.0",
"chart.js": "^3.7.1",
"eslint-plugin-react": "^7.29.4",
"eslit": "^6.0.0",
"next": "12.1.6",
"react": "18.1.0",
"react-chartjs-2": "^4.1.0",
"react-dom": "18.1.0",
"styled-components": "^5.3.5"
},
"devDependencies": {
"@types/chartjs": "^0.0.31",
"@types/node": "^17.0.31",
"@types/react": "^18.0.8",
"@types/styled-components": "^5.1.25",

11
pages/_app.tsx
View File

@ -1,13 +1,18 @@
import React from 'react'
import '../styles/globals.css'
import '../styles/globals.ts'
import { AppProps } from 'next/app'
import Sidebar from '../src/components/sidebar/Sidebar'
import { GlobalStyle } from '../styles/globals'
import { AppView } from '../styles/app/AppView'
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<AppView>
<GlobalStyle />
<Sidebar />
<Component {...pageProps} />
</>
</AppView>
)
}

5
pages/areaTest.tsx
View File

@ -1,7 +1,10 @@
import React from 'react'
import BasicButton from '../src/components/buttons/basicButton/BasicButton'
import Graph from '../src/components/graph/Graph'
export default function areaTest() {
return (
<div>areaTest</div>
// <Graph />
<BasicButton title='texto'/>
)
}

38
pages/dashboard.tsx
View File

@ -3,31 +3,25 @@ import React from 'react'
import { DashboardView } from '../styles/layouts/Dashboard/DashboardView'
import MapCard from '../src/components/mapCard/MapCard'
import GraphCard from '../src/components/graph/graphCard/GraphCard'
import Sidebar from '../src/components/sidebar/Sidebar'
export default function Dashboard() {
return (
<div style={{
'display': 'flex',
'flexDirection': 'row'
}}>
<Sidebar />
<DashboardView>
<h1>Visão Geral</h1>
<span>Bem Vindo a Smart Energia</span>
<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='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='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
</section>
<DashboardView>
<h1>Visão Geral</h1>
<span>Bem Vindo a Smart Energia</span>
<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='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='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
</section>
<section className='dashboard'>
<GraphCard title='Consumo' subtitle='Gráfico de Consumo' consumption={25} />
<GraphCard title='Consumo' subtitle='Gráfico de Consumo' />
</section>
</DashboardView>
</div>
<section className='dashboard'>
<GraphCard title='Consumo' subtitle='Gráfico de Consumo' consumption={25} />
<GraphCard title='Consumo' subtitle='Gráfico de Consumo' />
<GraphCard title='Consumo' subtitle='Gráfico de Consumo' className='footerGraph' />
</section>
</DashboardView>
)
}

8
public/assets/hamburgerModal.svg
View File

@ -1,5 +1,5 @@
<svg width="46" height="48" viewBox="0 0 46 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="28.7499" width="26" height="3" rx="1.5" fill="#3E4954"/>
<rect x="10" y="36.7499" width="26" height="3" rx="1.5" fill="#3E4954"/>
<rect x="10" y="44.7499" width="26" height="3" rx="1.5" fill="#3E4954"/>
<svg width="26" height="19" viewBox="0 0 26 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="0.118652" width="26" height="2.93413" rx="1.46706" fill="#3E4954"/>
<rect y="7.94299" width="26" height="2.93413" rx="1.46706" fill="#3E4954"/>
<rect y="15.7673" width="26" height="2.93413" rx="1.46706" fill="#3E4954"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 322 B

After

Width:  |  Height:  |  Size: 332 B

7
src/components/buttons/basicButton/BasicButtonView.ts
View File

@ -5,14 +5,15 @@ export const BasicButtonView = styled.button`
justify-content: center;
align-items: center;
width: 120px;
height: 45px;
background: #254F7F;
border-radius: 8px;
border-style: none;
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 24px;
/* identical to box height */

2
src/components/mapCard/MapCard.tsx
View File

@ -13,7 +13,7 @@ export default function MapCard({ title, subtitle, statistic, imgSource }: MapCa
return (
<MapCardView>
<Image src={imgSource} width={125} height={125} />
<Image src={imgSource} width={110} height={110} />
<div>
<h4>{title}</h4>
<span>{subtitle}</span>

4
src/components/mapCard/style.ts
View File

@ -10,8 +10,8 @@ export const MapCardView = styled.figure`
margin-right: 25px;
span {
margin-bottom: 25px;
}
margin-bottom: 25px;
}
div {
display: flex;

6
src/components/sidebar/Sidebar.tsx
View File

@ -10,9 +10,11 @@ export default function Sidebar() {
return (
<SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
<div className='hamburger' onClick={() => setViewModal(!viewModal)} >
<Image src='/assets/hamburgerModal.svg' width={100} height={100} />
<Image src='/assets/hamburgerModal.svg' width={25} height={25} />
</div>
<div className='imageNext'>
<Image src='/assets/logo.svg' width={100} height={100} />
</div>
<Image src='/assets/logo.svg' width={100} height={100} className='imageNext' />
<ul>
<li>{'Visão Geral'}</li>
<li>{'Consumo'}</li>

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

@ -6,15 +6,15 @@ interface SidebarViewInterface {
}
export const SidebarView = styled.nav<SidebarViewInterface>`
position: fixed;
position: relative;
display: flex;
align-items: center;
justify-content: center;
justify-content: flex-start;
flex-direction: column;
width: 20rem;
width: 20%;
margin: 0;
padding: 0;
@ -35,13 +35,16 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
width: 100%;
li {
width: 100%;
height: 67px;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 60px;
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 18px;
font-size: 16px;
line-height: 27px;
/* identical to box height */
@ -106,25 +109,18 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
@media (max-width: 1196px) {
align-items: flex-start;
width: 20rem;
width: 100%;
/* height: 0%; */
/* height: ${props => props.modalOpen? '100%' : null}; */
padding-top: 20px;
padding-left: 20px;
padding: 18px;
/* background-color: ${props => props.modalOpen? '#FFF' : 'transparent'}; */
border-bottom: solid black 1px;
z-index: 2;
.hamburger {
position: fixed;
top: 20px;
display: inherit;
width: 40px;
height: 40px;
/* background-color: black; */
display: flex;
cursor: pointer;
@ -132,7 +128,6 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
}
.imageNext {
display: none;
opacity: 0;
}
ul {
display: ${props => props.modalOpen? 'block' : 'none'};

9
styles/app/AppView.ts Normal file
View File

@ -0,0 +1,9 @@
import styled from 'styled-components'
export const AppView = styled.main`
display: flex;
@media (max-width: 1196px) {
flex-direction: column;
}
`

16
styles/globals.css
View File

@ -1,16 +0,0 @@
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}

28
styles/globals.ts Normal file
View File

@ -0,0 +1,28 @@
import { createGlobalStyle } from 'styled-components'
export const GlobalStyle = createGlobalStyle`
body {
margin: 0;
padding: 0;
font-family: 'Poppins';
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
`;
// html,
// body {
// padding: 0;
// margin: 0;
// font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
// Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
// }

45
styles/layouts/Dashboard/DashboardView.ts
View File

@ -16,10 +16,7 @@ export const DashboardView = styled.main`
width: 100%;
margin: 0 0 0 20rem;
padding-left: 30px;
padding-right: 30px;
padding: 30px;
span {
font-family: 'Poppins';
@ -72,34 +69,46 @@ export const DashboardView = styled.main`
.dashboard {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
grid-template-columns: 50% 50% 100%;
grid-template-rows: 50% 50%;
gap: 40px;
gap: 30px;
width: 99%;
/* flex-wrap: wrap; */
padding-right: 20px;
.footerGraph {
grid-row-start: 2;
grid-column-start: 1;
grid-column-end: 3;
}
}
@media (max-width: 1195px) {
/* align-items: center; */
width: 100%;
padding: 30px;
margin: 0;
margin-top: 80px;
margin-left: 20px;
}
@media (max-width: 1195px) {
.dashboard {
display: grid;
display: flex;
grid-template-columns: 100%;
grid-template-rows: 50% 50%;
padding: 0;
margin: 0;
gap: 40px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
grid-template-columns: 50% 50%;
grid-auto-rows: 1;
grid-auto-columns: 1;
width: 100%;
/* flex-wrap: wrap; */
}
}
`

15
yarn.lock
View File

@ -575,6 +575,11 @@
resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz#6801033be7ff87a6b7cadaf5b337c9f366a3c4b0"
integrity sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw==
"@types/chartjs@^0.0.31":
version "0.0.31"
resolved "https://registry.yarnpkg.com/@types/chartjs/-/chartjs-0.0.31.tgz#b16a687eaad3ea3e5cd3e961aee5a28e47b57949"
integrity sha512-eF1AgrIO0qP9KJYwM2dTKL2pczTjiLa0hfmZdQfKiqFq5WIvFTKPn1gkgADitF5sT4byEyq4EFdMVvuPIk6zeQ==
"@types/hoist-non-react-statics@*":
version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@ -954,6 +959,11 @@ chalk@^4.0.0:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
chart.js@^3.7.1:
version "3.7.1"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.7.1.tgz#0516f690c6a8680c6c707e31a4c1807a6f400ada"
integrity sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==
clean-stack@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@ -2352,6 +2362,11 @@ queue-microtask@^1.2.2:
resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
react-chartjs-2@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-4.1.0.tgz#2a123df16d3a987c54eb4e810ed766d3c03adf8d"
integrity sha512-AsUihxEp8Jm1oBhbEovE+w50m9PVNhz1sfwEIT4hZduRC0m14gHWHd0cUaxkFDb8HNkdMIGzsNlmVqKiOpU74g==
react-dom@18.1.0:
version "18.1.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"