diff --git a/src/components/banner/BannerView.ts b/src/components/banner/BannerView.ts index 4dc7173..0ddd138 100644 --- a/src/components/banner/BannerView.ts +++ b/src/components/banner/BannerView.ts @@ -7,12 +7,12 @@ export const BannerView = styled.div` align-items: center; width: 100%; - height: 19rem; + height: 20%; .gradient { position: absolute; width: 100%; - height: 19rem; + height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(7, 23, 100, 0.6); opacity: 0.9; @@ -20,6 +20,10 @@ export const BannerView = styled.div` z-index: 1; } + h1 { + font-size: 18px; + } + .text { position: relative; margin: 0 0 0 20px; @@ -34,7 +38,7 @@ export const BannerView = styled.div` overflow: hidden; p { - font-size: 30px; + font-size: 70%; } * { @@ -42,7 +46,12 @@ export const BannerView = styled.div` } } + @media (max-width: 1640px) { + font-size: 10px; + } + @media (max-width: 1008px) { font-size: 170%; } + ` diff --git a/src/components/buttons/loginButton/LoginButtonView.ts b/src/components/buttons/loginButton/LoginButtonView.ts index 73b8132..f91b815 100644 --- a/src/components/buttons/loginButton/LoginButtonView.ts +++ b/src/components/buttons/loginButton/LoginButtonView.ts @@ -20,4 +20,9 @@ export const LoginButtonView = styled.button` cursor: pointer; color: #FFFFFF; + + @media (max-width: 1640px) { + font-size: 18px; + width: 90%; + } ` diff --git a/src/components/graph/Chart.tsx b/src/components/graph/Chart.tsx index 0fbd3e4..99db59a 100644 --- a/src/components/graph/Chart.tsx +++ b/src/components/graph/Chart.tsx @@ -13,6 +13,7 @@ import { import faker from 'faker' import { ChartView } from './ChartView'; +import RenderIf from '../../utils/renderIf'; ChartJS.register( CategoryScale, @@ -25,9 +26,11 @@ ChartJS.register( interface ChartInterface { title: string, + data?: any, + single?: any } -export default function Chart({ title }: ChartInterface) { +export default function Chart({ title, single, data }: ChartInterface) { const [ graphData, setGraphData ] = useState({ labels: [], datasets: [], @@ -68,6 +71,12 @@ export default function Chart({ title }: ChartInterface) { return ( + + + { + // setGraphData({ + // labels, + // datasets: [ + // { + // label: '2020', + // data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })), + // backgroundColor: '#C2D5FB', + // }, + // { + // label: '2021', + // data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })), + // backgroundColor: '#255488', + // }, + // ], + // }) + // }, []) + + const options = { + responsive: true, + plugins: { + legend: { + position: 'top' as const, + }, + title: { + display: true, + text: 'Chart.js Line Chart', + }, + }, + }; + + const labels = ['0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8',]; + + // const data = { + // labels, + // datasets: [ + // // { + // // label: 'Dataset 1', + // // data: [9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9], + // // borderColor: 'rgb(53, 162, 235)', + // // backgroundColor: 'rgba(53, 162, 235, 0.5)', + // // }, + // // { + // // label: 'Dataset 2', + // // data: [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6], + // // borderColor: 'rgb(255, 114, 32)', + // // backgroundColor: 'rgba(255, 145, 0, 0.5)', + // // }, + // { + // label: 'Dataset 3', + // data: [1, 2, 3, 5, 7, 8, 9, 8, 9, 7, 8, 6, 4, 3, 2, 3, 3, 4, 4, 5, 5, 5, 6, 6, 7, 7, 9, 10, 11, 12, 12, 14, 15, 17, 20, 21, 18, 15, 14, 12, 11, 10, 8, 6, 7, 8, 7, 9], + // borderColor: 'rgb(109, 109, 109)', + // backgroundColor: 'rgba(90, 90, 90, 0.5)', + // }, + // // { + // // label: 'Dataset4', + // // data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], + // // borderColor: 'rgb(255, 166, 0)', + // // backgroundColor: 'rgba(255, 187, 0, 0.5)', + // // }, + // ], + // }; + + return ( + + + + ) +} diff --git a/src/components/graph/SingleBar.tsx b/src/components/graph/SingleBar.tsx new file mode 100644 index 0000000..46fe1a5 --- /dev/null +++ b/src/components/graph/SingleBar.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + BarElement, + Title, + Tooltip, + Legend, +} from 'chart.js'; +import { Bar } from 'react-chartjs-2'; +import faker from 'faker'; +import { ChartView } from './ChartView'; + +ChartJS.register( + CategoryScale, + LinearScale, + BarElement, + Title, + Tooltip, + Legend +); + +export const options = { + responsive: true, + plugins: { + legend: { + position: 'top' as const, + }, + title: { + display: true, + text: 'Chart.js Bar Chart', + }, + }, +}; + +const labels = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez']; + +export const data = { + labels, + datasets: [ + { + label: 'Dataset 2', + data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })), + backgroundColor: '#255488', + }, + ], +}; + +export function SingleBar() { + return ( + + + + ) +} diff --git a/src/components/graph/graphCard/ChartCard.tsx b/src/components/graph/graphCard/ChartCard.tsx index 922b35c..c1d710b 100644 --- a/src/components/graph/graphCard/ChartCard.tsx +++ b/src/components/graph/graphCard/ChartCard.tsx @@ -7,15 +7,20 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import { ChartCardView } from './ChartCardView'; import Chart from '../Chart'; import ButtonGroup from '../../buttonGroup/ButtonGroup'; +import RenderIf from '../../../utils/renderIf'; +import LineChart from '../LineChart'; +import { SingleBar } from '../SingleBar'; interface ChartCardInterface { title: string, subtitle: string, consumption?: number, - className?: string + className?: string, + line?: boolean | undefined, + singleBar?: any } -export default function ChartCard({ title, subtitle, consumption, className }: ChartCardInterface) { +export default function ChartCard({ title, subtitle, consumption, className, line, singleBar }: ChartCardInterface) { const [timeCourse, setTimeCourse] = React.useState('left'); const handleAlignment = ( @@ -25,6 +30,39 @@ export default function ChartCard({ title, subtitle, consumption, className }: C setTimeCourse(newAlignment); }; + const labels = ['0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8',]; + + + const data = { + labels, + datasets: [ + { + label: 'Dataset 1', + data: [1, 2, 3, 5, 7, 8, 9, 8, 9, 7, 8, 6, 4, 3, 2, 3, 3, 4, 4, 5, 5, 5, 6, 6, 7, 7, 9, 10, 11, 12, 12, 14, 15, 17, 20, 21, 18, 15, 14, 12, 11, 10, 8, 6, 7, 8, 7, 9], + borderColor: 'rgb(53, 162, 235)', + backgroundColor: 'rgba(53, 162, 235, 0.5)', + }, + // { + // label: 'Dataset 2', + // data: [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6], + // borderColor: 'rgb(255, 114, 32)', + // backgroundColor: 'rgba(255, 145, 0, 0.5)', + // }, + // { + // label: 'Dataset 3', + // data: [1, 2, 3, 5, 7, 8, 9, 8, 9, 7, 8, 6, 4, 3, 2, 3, 3, 4, 4, 5, 5, 5, 6, 6, 7, 7, 9, 10, 11, 12, 12, 14, 15, 17, 20, 21, 18, 15, 14, 12, 11, 10, 8, 6, 7, 8, 7, 9], + // borderColor: 'rgb(109, 109, 109)', + // backgroundColor: 'rgba(90, 90, 90, 0.5)', + // }, + // { + // label: 'Dataset4', + // data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], + // borderColor: 'rgb(255, 166, 0)', + // backgroundColor: 'rgba(255, 187, 0, 0.5)', + // }, + ], + }; + return (
@@ -49,7 +87,18 @@ export default function ChartCard({ title, subtitle, consumption, className }: C <> }
- + + + + + + + + + + + + ) } diff --git a/src/components/graph/graphCard/ChartCardView.ts b/src/components/graph/graphCard/ChartCardView.ts index 8649d1d..1e1e809 100644 --- a/src/components/graph/graphCard/ChartCardView.ts +++ b/src/components/graph/graphCard/ChartCardView.ts @@ -104,4 +104,13 @@ export const ChartCardView = styled.article` } } + @media (max-width: 1640px) { + font-size: 13px; + min-height: 28rem; + + .info { + max-width: 4rem; + } + } + ` diff --git a/src/components/mapCard/MapCard.tsx b/src/components/mapCard/MapCard.tsx index fd240af..0d6dc9b 100644 --- a/src/components/mapCard/MapCard.tsx +++ b/src/components/mapCard/MapCard.tsx @@ -14,7 +14,7 @@ export default function MapCard({ title, subtitle, statistic, imgSource }: MapCa return ( - +

{title}

{subtitle} @@ -22,7 +22,7 @@ export default function MapCard({ title, subtitle, statistic, imgSource }: MapCa { statistic? <> - +

{statistic}

: diff --git a/src/components/mapCard/MapCardView.ts b/src/components/mapCard/MapCardView.ts index 36e3f69..baa393d 100644 --- a/src/components/mapCard/MapCardView.ts +++ b/src/components/mapCard/MapCardView.ts @@ -29,4 +29,9 @@ export const MapCardView = styled.figure` display: flex; } } + + @media (max-width: 1640px) { + margin-right: 0px; + font-size: 14px; + } ` diff --git a/src/components/pageTitle/PageTitleView.ts b/src/components/pageTitle/PageTitleView.ts index 3013202..0a8fde2 100644 --- a/src/components/pageTitle/PageTitleView.ts +++ b/src/components/pageTitle/PageTitleView.ts @@ -24,4 +24,8 @@ p { color: #969BA0; } + + @media (max-width: 1640px) { + font-size: 15px; + } ` diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 6a62ebb..be2909d 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -26,7 +26,7 @@ export default function Sidebar() {
  • {'Visão Geral'}
    • -
  • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia'}
    • +
  • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia >'}
  • Economia Bruta
  • Economia Acumulada
    • diff --git a/src/components/sidebar/SidebarView.ts b/src/components/sidebar/SidebarView.ts index 324b93d..96e945f 100644 --- a/src/components/sidebar/SidebarView.ts +++ b/src/components/sidebar/SidebarView.ts @@ -180,4 +180,13 @@ export const SidebarView = styled.nav` display: none; } } + + @media (max-width: 1640px) { + font-size: 14px; + ul { + li { + height: 3.5rem; + } + } + } ` diff --git a/src/pages/areaTest.tsx b/src/pages/areaTest.tsx index 13db131..520490d 100644 --- a/src/pages/areaTest.tsx +++ b/src/pages/areaTest.tsx @@ -13,6 +13,7 @@ import InputAdornment from '@mui/material/InputAdornment'; import FormHelperText from '@mui/material/FormHelperText'; import FormControl from '@mui/material/FormControl'; import TextField from '@mui/material/TextField'; +import LineChart from '../components/graph/LineChart' @@ -42,29 +43,31 @@ export default function areaTest() { }; return ( - - Password - - - {values.showPassword ? : } - - - } - label="Password" - /> - - + <> + {/* + Password + + + {values.showPassword ? : } + + + } + label="Password" + /> + */} + {/* */} + ) } diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index d9f2128..80aaffd 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -9,6 +9,7 @@ import PageTitle from '../components/pageTitle/PageTitle' import Link from 'next/link' export default function Dashboard() { + return (
    @@ -24,9 +25,9 @@ export default function Dashboard() {
    - + - +
    ) diff --git a/src/pages/forgotPassword.tsx b/src/pages/forgotPassword.tsx index 8267f08..1c8ab80 100644 --- a/src/pages/forgotPassword.tsx +++ b/src/pages/forgotPassword.tsx @@ -5,6 +5,8 @@ import { useRouter } from 'next/router' import LoginButton from '../components/buttons/loginButton/LoginButton'; import TextField from '@mui/material/TextField'; import { ForgotPasswordContainer, ForgotPasswordView } from '../styles/layouts/forgotPassword/ForgotPasswordView'; +import RenderIf from '../utils/renderIf'; +import Alert from '@mui/material/Alert'; export default function ForgotPassword() { const router = useRouter() @@ -12,15 +14,34 @@ export default function ForgotPassword() { const [password, setPassword] = useState('') const [confirmPassword, setConfirmPassword] = useState('') + const [same, setSame] = useState(false) useEffect(() => { setPassword('') setConfirmPassword('') + setSame(false) }, [rota]) + function handleChangePassword() { + if (same) { + router.push('/') + } else { + null + } + } + + useEffect(() => { + if (password == confirmPassword && password != '') { + setSame(false) + } else { + setSame(true) + } + }, [password]) + + return ( - +

    Bem-Vindo

    Estratégias Inteligentes em
    Gestão de Energia

    @@ -28,7 +49,7 @@ export default function ForgotPassword() { setPassword(value.target.value)} variant="outlined"/> setConfirmPassword(value.target.value)} variant="outlined"/> - router.push('/')} /> + handleChangePassword()} />
    Ou diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d7179e7..5a0207f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -43,7 +43,7 @@ export default function Home() { return ( - +

    Bem-Vindo

    Estratégias Inteligentes em
    Gestão de Energia

    diff --git a/src/pages/pld/index.tsx b/src/pages/pld/index.tsx index 659c93d..13672cd 100644 --- a/src/pages/pld/index.tsx +++ b/src/pages/pld/index.tsx @@ -12,6 +12,7 @@ import BasicButton from '../../components/buttons/basicButton/BasicButton'; import Chart from '../../components/graph/Chart'; import PageTitle from '../../components/pageTitle/PageTitle'; import Link from 'next/link'; +import LineChart from '../../components/graph/LineChart'; export default function region() { const router = useRouter() @@ -28,6 +29,39 @@ export default function region() { console.log(page) }, [page]) + const labels = ['0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8',]; + + + const data = { + labels, + datasets: [ + { + label: 'Dataset 1', + data: [9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9], + borderColor: 'rgb(53, 162, 235)', + backgroundColor: 'rgba(53, 162, 235, 0.5)', + }, + { + label: 'Dataset 2', + data: [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6], + borderColor: 'rgb(255, 114, 32)', + backgroundColor: 'rgba(255, 145, 0, 0.5)', + }, + { + label: 'Dataset 3', + data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], + borderColor: 'rgb(109, 109, 109)', + backgroundColor: 'rgba(90, 90, 90, 0.5)', + }, + { + label: 'Dataset4', + data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], + borderColor: 'rgb(255, 166, 0)', + backgroundColor: 'rgba(255, 187, 0, 0.5)', + }, + ], + }; + return (
    - +
    diff --git a/src/pages/verifyEmail.tsx b/src/pages/verifyEmail.tsx index d15b1d2..af04477 100644 --- a/src/pages/verifyEmail.tsx +++ b/src/pages/verifyEmail.tsx @@ -32,7 +32,7 @@ export default function VerifyEmail() { function verifyConfirmationCode() { if (code === '0000') { setTimeout(() => { - router.push('/') + router.push('/forgotPassword') }, 2500); setCodeStatus(true) } else { @@ -42,7 +42,7 @@ export default function VerifyEmail() { return ( - +

    Bem-Vindo

    Estratégias Inteligentes em
    Gestão de Energia

    diff --git a/src/styles/layouts/dashboard/DashboardView.ts b/src/styles/layouts/dashboard/DashboardView.ts index 7287a9a..c1dad75 100644 --- a/src/styles/layouts/dashboard/DashboardView.ts +++ b/src/styles/layouts/dashboard/DashboardView.ts @@ -75,4 +75,5 @@ export const DashboardView = styled.main` width: 100%; } } + ` diff --git a/src/styles/layouts/forgotPassword/ForgotPasswordView.ts b/src/styles/layouts/forgotPassword/ForgotPasswordView.ts index e6f35ce..c553d58 100644 --- a/src/styles/layouts/forgotPassword/ForgotPasswordView.ts +++ b/src/styles/layouts/forgotPassword/ForgotPasswordView.ts @@ -22,6 +22,17 @@ export const ForgotPasswordView = styled.main<{auth: string}>` padding: 100px; } + + @media (max-width: 1640px) { + font-size: 80%; + h2 { + font-size: 16px; + } + + input { + height: 1.5rem; + } + } `; export const ForgotPasswordContainer = styled.section` @@ -98,4 +109,15 @@ export const ForgotPasswordContainer = styled.section` width: 100%; margin: 0; } + + @media (max-width: 1640px) { + font-size: 80%; + h2 { + font-size: 16px; + } + + input { + height: 1.5rem; + } + } `; diff --git a/src/styles/layouts/forgotPassword/verifyEmail.ts b/src/styles/layouts/forgotPassword/verifyEmail.ts index fe7cd7a..d6ca2ab 100644 --- a/src/styles/layouts/forgotPassword/verifyEmail.ts +++ b/src/styles/layouts/forgotPassword/verifyEmail.ts @@ -98,4 +98,15 @@ export const VerifyEmailContainer = styled.section` width: 100%; margin: 0; } + + @media (max-width: 1640px) { + font-size: 80%; + h2 { + font-size: 16px; + } + + input { + height: 1.5rem; + } + } `; diff --git a/src/styles/layouts/login/LoginView.ts b/src/styles/layouts/login/LoginView.ts index 2248f55..4559bb1 100644 --- a/src/styles/layouts/login/LoginView.ts +++ b/src/styles/layouts/login/LoginView.ts @@ -98,4 +98,14 @@ export const LoginContainer = styled.section` width: 100%; margin: 0; } + @media (max-width: 1640px) { + font-size: 80%; + h2 { + font-size: 16px; + } + + input { + height: 1.5rem; + } + } `;