Merge branch 'feature/graphCard' into 'dev'

Feature/graph card

See merge request kluppsoftware/smart-energia-web!11

package.json

@@ -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",

pages/_app.tsx

@@ -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>
   )
 }
 

pages/areaTest.tsx

@@ -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'/>
   )
 }

pages/dashboard.tsx

@@ -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={{
+    <DashboardView>
-      'display': 'flex',
+      <h1>Visão Geral</h1>
-      'flexDirection': 'row'
+      <span>Bem Vindo a Smart Energia</span>
-    }}>
+      <section className="cardsSection" >
-      <Sidebar />
+        <MapCard title='R$/MWh' subtitle='abril / 22' statistic='' imgSource='/moneyIcon.svg' />
-      <DashboardView>
+        <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
-        <h1>Visão Geral</h1>
+        <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
-        <span>Bem Vindo a Smart Energia</span>
+        <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
-        <section className="cardsSection" >
+        <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
-          <MapCard title='R$/MWh' subtitle='abril / 22' statistic='' imgSource='/moneyIcon.svg' />
+      </section>
-          <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'>
+      <section className='dashboard'>
-          <GraphCard title='Consumo' subtitle='Gráfico de Consumo' consumption={25} />
+        <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' />
-        </section>
+        <GraphCard title='Consumo' subtitle='Gráfico de Consumo' className='footerGraph' />
-      </DashboardView>
+      </section>
-    </div>
+    </DashboardView>
   )
 }

public/assets/hamburgerModal.svg

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

src/components/buttons/basicButton/BasicButtonView.ts

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

src/components/mapCard/MapCard.tsx

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

src/components/mapCard/style.ts

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

src/components/sidebar/Sidebar.tsx

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

src/components/sidebar/SidebarView.ts

@@ -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%;
+      display: flex;
-      height: 67px;
+      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: 18px;
-    padding-left: 20px;
 
-    /* background-color: ${props => props.modalOpen? '#FFF' : 'transparent'}; */
+    border-bottom: solid black 1px;
 
     z-index: 2;
 
     .hamburger {
-      position: fixed;
+      display: flex;
-      top: 20px;
-
-      display: inherit;
-      width: 40px;
-      height: 40px;
-
-      /* background-color: black; */
 
       cursor: pointer;
 
@@ -132,7 +128,6 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
     }
     .imageNext {
       display: none;
-      opacity: 0;
     }
     ul {
       display: ${props => props.modalOpen? 'block' : 'none'};

styles/app/AppView.ts

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

styles/globals.css

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

styles/globals.ts

@@ -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;
+// }
+
+

styles/layouts/Dashboard/DashboardView.ts

@@ -16,10 +16,7 @@ export const DashboardView = styled.main`
 
   width: 100%;
 
-  margin: 0 0 0 20rem;
+  padding: 30px;
-
-  padding-left: 30px;
-  padding-right: 30px;
 
   span {
     font-family: 'Poppins';
@@ -72,34 +69,46 @@ export const DashboardView = styled.main`
   .dashboard {
     display: grid;
 
-    grid-template-columns: 50% 50%;
+    grid-template-columns: 50% 50% 100%;
-    grid-template-rows: 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%;
+      padding: 0;
-      grid-template-rows: 50% 50%;
+      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; */
     }
   }
 `

yarn.lock

@@ -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"