diff --git a/package.json b/package.json index 5980268..04bec83 100644 --- a/package.json +++ b/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", diff --git a/pages/_app.tsx b/pages/_app.tsx index b81b5d2..edfa29c 100644 --- a/pages/_app.tsx +++ b/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 ( - <> + + + - + ) } diff --git a/pages/areaTest.tsx b/pages/areaTest.tsx index cb503ad..03ffc5b 100644 --- a/pages/areaTest.tsx +++ b/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 ( -
areaTest
+ // + ) } diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index f6312c7..7758e39 100644 --- a/pages/dashboard.tsx +++ b/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 ( -
- - -

Visão Geral

- Bem Vindo a Smart Energia -
- - - - - -
+ +

Visão Geral

+ Bem Vindo a Smart Energia +
+ + + + + +
-
- - -
- -
+
+ + + +
+ ) } diff --git a/public/assets/hamburgerModal.svg b/public/assets/hamburgerModal.svg index c5bae58..0027fb2 100644 --- a/public/assets/hamburgerModal.svg +++ b/public/assets/hamburgerModal.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/src/components/buttons/basicButton/BasicButtonView.ts b/src/components/buttons/basicButton/BasicButtonView.ts index 7d12ea4..5c66b88 100644 --- a/src/components/buttons/basicButton/BasicButtonView.ts +++ b/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 */ diff --git a/src/components/mapCard/MapCard.tsx b/src/components/mapCard/MapCard.tsx index 1d858b1..f308a4a 100644 --- a/src/components/mapCard/MapCard.tsx +++ b/src/components/mapCard/MapCard.tsx @@ -13,7 +13,7 @@ export default function MapCard({ title, subtitle, statistic, imgSource }: MapCa return ( - +

{title}

{subtitle} diff --git a/src/components/mapCard/style.ts b/src/components/mapCard/style.ts index d3a58d4..f33a672 100644 --- a/src/components/mapCard/style.ts +++ b/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; diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index d00a2a9..a632be8 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -10,9 +10,11 @@ export default function Sidebar() { return (
setViewModal(!viewModal)} > - + +
+
+
-
  • {'Visão Geral'}
  • {'Consumo'}
    • diff --git a/src/components/sidebar/SidebarView.ts b/src/components/sidebar/SidebarView.ts index 76960f6..31c5720 100644 --- a/src/components/sidebar/SidebarView.ts +++ b/src/components/sidebar/SidebarView.ts @@ -6,15 +6,15 @@ interface SidebarViewInterface { } export const SidebarView = styled.nav` - 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` 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` @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` } .imageNext { display: none; - opacity: 0; } ul { display: ${props => props.modalOpen? 'block' : 'none'}; diff --git a/styles/app/AppView.ts b/styles/app/AppView.ts new file mode 100644 index 0000000..f20a055 --- /dev/null +++ b/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; + } +` diff --git a/styles/globals.css b/styles/globals.css deleted file mode 100644 index e5e2dcc..0000000 --- a/styles/globals.css +++ /dev/null @@ -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; -} diff --git a/styles/globals.ts b/styles/globals.ts new file mode 100644 index 0000000..4b3e974 --- /dev/null +++ b/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; +// } + + diff --git a/styles/layouts/Dashboard/DashboardView.ts b/styles/layouts/Dashboard/DashboardView.ts index 393083c..28837b2 100644 --- a/styles/layouts/Dashboard/DashboardView.ts +++ b/styles/layouts/Dashboard/DashboardView.ts @@ -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; */ } } ` diff --git a/yarn.lock b/yarn.lock index a86a962..fcbd8cf 100644 --- a/yarn.lock +++ b/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"