diff --git a/package.json b/package.json index 48c1f94..8531239 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "axios": "^0.27.2", "chart.js": "^3.7.1", "chartjs-plugin-datalabels": "^2.0.0", + "chartjs-plugin-style": "^0.5.0", "date-fns": "^2.28.0", "eslint-plugin-react": "^7.29.4", "eslit": "^6.0.0", @@ -58,6 +59,7 @@ "react-icons": "^4.3.1", "react-input-mask": "^2.0.4", "react-pdf-thumbnail": "^0.1.0", + "sharp": "^0.30.7", "styled-components": "^5.3.5", "tinymce": "^6.0.3", "yup": "^0.32.11" diff --git a/src/components/buttons/gradientButton/GradientButton.tsx b/src/components/buttons/gradientButton/GradientButton.tsx index 27ed1aa..6f61eda 100644 --- a/src/components/buttons/gradientButton/GradientButton.tsx +++ b/src/components/buttons/gradientButton/GradientButton.tsx @@ -21,9 +21,6 @@ export default function GradientButton({ title, description, orange, purple, gre return ( handleClick()}> - - -

{description}

 diff --git a/src/components/buttons/gradientButton/GradientButtonView.ts b/src/components/buttons/gradientButton/GradientButtonView.ts index 53039a5..3e0c97c 100644 --- a/src/components/buttons/gradientButton/GradientButtonView.ts +++ b/src/components/buttons/gradientButton/GradientButtonView.ts @@ -37,33 +37,9 @@ export const GradientButtonView = styled.button` transform: scale(1.1); } - svg { - width: 404px; - left: 0; - position: absolute; - top: 0; - height: 110px; - } - - rect { - fill: none; - stroke: #fff; - stroke-width: 2; - stroke-dasharray: 422, 0; - transition: all 0.35s linear; - } - :hover { background: rgba($red, 0); letter-spacing: 1px; - - - rect { - stroke-width: 5; - stroke-dasharray: 15, 310; - stroke-dashoffset: 48; - transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); - } } * { @@ -72,21 +48,11 @@ export const GradientButtonView = styled.button` } p { - :first-child { - font-family: 'Poppins'; - font-style: normal; - font-weight: 700; - font-size: calc(20px); + font-family: 'Poppins'; + font-style: normal; + font-weight: 700; + font-size: 11px; - text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - } - :last-child { - font-family: 'Poppins'; - font-style: normal; - font-weight: 700; - font-size: 11px; - - text-transform: uppercase; - } + text-transform: uppercase; } ` diff --git a/src/components/graph/LineBarChart.tsx b/src/components/graph/LineBarChart.tsx index 17363e7..945da91 100644 --- a/src/components/graph/LineBarChart.tsx +++ b/src/components/graph/LineBarChart.tsx @@ -114,8 +114,10 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red, }, }; + console.log(label.length) + const data = data2? { - labels, + labels: label.length < 28? ['1', '2', '3', '4', '5', '6', '7', '8', '8', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'] : label, datasets: [ { type: 'line' as const, diff --git a/src/components/graph/cativoXLivreChart/index.tsx b/src/components/graph/cativoXLivreChart/index.tsx index c959a8e..1ba2fd2 100644 --- a/src/components/graph/cativoXLivreChart/index.tsx +++ b/src/components/graph/cativoXLivreChart/index.tsx @@ -93,7 +93,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data plugins: { datalabels: { display: true, - color: barLabel? 'black' : "rgba(255, 255, 255, 0)", + color: '#255488', // backgroundColor: '#255488', anchor: "end", offset: -20, @@ -107,7 +107,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data dataArr.map(data => { sum += data; }); - const result = `${(parseFloat(value)).toLocaleString('pt-br')}` + const result = `${(parseInt(value)).toLocaleString('pt-br')}` return value==null? null : result } @@ -136,7 +136,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data }, borderWidth: 2, fill: false, - data: chartData.map(value => value.economia_mensal), + data: chartData.map(value => parseInt(value.economia_mensal)), }, { type: 'bar' as const, @@ -146,7 +146,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data }, data: chartData.map(value => { if (!value.dad_estimado) - return value.custo_cativo + return parseInt(value.custo_cativo) }), }, { @@ -158,7 +158,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data }, data: chartData.map(value => { if (!value.dad_estimado) - return value.custo_livre + return parseInt(value.custo_livre) }), }, { @@ -167,7 +167,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data backgroundColor: pattern.draw('diagonal', '#C2D5FB'), data: chartData.map(value => { if (value.dad_estimado) - return value.custo_cativo + return parseInt(value.custo_cativo) }), }, { @@ -176,7 +176,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data backgroundColor: pattern.draw('diagonal', '#255488'), data: chartData.map(value => { if (value.dad_estimado) - return value.custo_livre + return parseInt(value.custo_livre) }), } ], diff --git a/src/components/graph/costIndicatorChart/index.tsx b/src/components/graph/costIndicatorChart/index.tsx index 58596c0..c1cb013 100644 --- a/src/components/graph/costIndicatorChart/index.tsx +++ b/src/components/graph/costIndicatorChart/index.tsx @@ -43,13 +43,11 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl responsive: true, scales: { x: { - stacked: true, grid: { display: false } }, y: { - stacked: true, grid: { display: false } @@ -58,7 +56,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl plugins: { datalabels: { display: true, - color: 'black', + color: '#255488', formatter: (value, ctx) => { let sum = 0; const dataArr = ctx.chart.data.datasets[0].data; diff --git a/src/components/graph/grossAnualChart/GrossAnualChart.tsx b/src/components/graph/grossAnualChart/GrossAnualChart.tsx index 58f36a8..ee7f3b1 100644 --- a/src/components/graph/grossAnualChart/GrossAnualChart.tsx +++ b/src/components/graph/grossAnualChart/GrossAnualChart.tsx @@ -6,6 +6,7 @@ import { Bar, Chart } from 'react-chartjs-2'; import { GrossAnualChartView } from './GrossAnualChartView'; import ChartTitle from '../ChartTitle'; +import { blue } from '@mui/material/colors'; ChartJS.register( CategoryScale, @@ -74,24 +75,24 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar sum += data; }); const percentage = (dataProps[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%"; - const result = `${spacement(parseInt(value).toLocaleString('pt-br'))}${percentage}\n${parseInt(value).toLocaleString('pt-br')}` + const result = `${spacement(parseInt(value).toLocaleString('pt-br'))} ${percentage}\n${parseInt(value).toLocaleString('pt-br')}` return value==null? null : result }, display: true, - color: barLabel? 'black' : "rgba(255, 255, 255, 0)", + color: '#255488', anchor: "end", offset: -60, align: "start", font: { - size: !miniature? 22 : 10 + size: !miniature? 22 : 10, } }, legend: { position: 'bottom' as const, labels: { font: { - size: 16 + size: 12, } } }, @@ -115,6 +116,8 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar { type: 'bar', label: dataset, + stacked: true, + data: dataProps.map((value, index) => { if (!value.dad_estimado) return parseFloat(value.economia_acumulada).toFixed(2) @@ -125,14 +128,12 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar }, { type: 'bar', + stacked: true, label: 'Estimado', data: dataProps.map((value, index) => { if (value.dad_estimado) return parseFloat(value.economia_acumulada).toFixed(2) }), - datalabels: { - display: false - }, backgroundColor: (value, ctx) => { return draw('diagonal-right-left', '#C2d5fb'); }, @@ -143,7 +144,7 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar return ( - + ) } diff --git a/src/components/graph/grossMensalChart/GrossMensalChart.tsx b/src/components/graph/grossMensalChart/GrossMensalChart.tsx index 47c5264..3a20a45 100644 --- a/src/components/graph/grossMensalChart/GrossMensalChart.tsx +++ b/src/components/graph/grossMensalChart/GrossMensalChart.tsx @@ -73,7 +73,7 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle, plugins: { datalabels: { display: true, - color: 'black', + color: '#255488', formatter: (value, ctx) => { let sum = 0; const dataArr = ctx.chart.data.datasets[0].data; @@ -132,7 +132,7 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle, + data={data} type={'bar'} height={'156'}/> ) } diff --git a/src/components/graph/grossMensalChart/GrossMensalChartView.ts b/src/components/graph/grossMensalChart/GrossMensalChartView.ts index 28abf0c..2302e81 100644 --- a/src/components/graph/grossMensalChart/GrossMensalChartView.ts +++ b/src/components/graph/grossMensalChart/GrossMensalChartView.ts @@ -1,14 +1,11 @@ import styled from "styled-components" export const GrossMensalChartView = styled.div` - width: 100%; + width: 90%; - div{ - /* margin-top: 10px; */ - } + transform: translateY(-25px); @media (max-width: 900px) { min-width: 20rem } - ` diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 12e3a27..b87ed41 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -2,13 +2,17 @@ import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Modal from '@mui/material/Modal'; import Typography from '@mui/material/Typography'; -import { GetServerSideProps } from 'next'; + import Image from 'next/image' import Link from 'next/link' + import { useRouter } from 'next/router' import { parseCookies } from 'nookies'; import React, { useContext, useEffect, useState } from 'react' + import { AuthContext } from '../../contexts/AuthContext'; +import { MenuContext } from '../../contexts/menu/MenuContext'; + import { api } from '../../services/api'; import RenderIf from '../../utils/renderIf'; @@ -30,6 +34,8 @@ const style = { }; export default function Sidebar() { + const {pldMenu, setPldMenu, economyMenu, setEconomyMenu} = useContext(MenuContext) + const [open, setOpen] = useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); @@ -37,6 +43,8 @@ export default function Sidebar() { const { signOut } = useContext(AuthContext) const [ economiaDrawer, setEconomiaDrawer ] = useState(false) + const [ pldDrawer, setPldDrawer ] = useState(false) + const [ notificationsCount, setNotificationsCount ] = useState(0) const [ viewModal, setViewModal ] = useState(false) @@ -81,11 +89,16 @@ export default function Sidebar() { aria-describedby="modal-modal-description" > - - Deseja realmente sair ? - - - + + + + Deseja realmente sair ? + +
+ + +
+ @@ -97,7 +110,7 @@ export default function Sidebar() { - +
setViewModal(!viewModal)} >
@@ -106,17 +119,22 @@ 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 >'}
    • -
    -
  • Economia Bruta Anual
    • -
  • Economia Bruta Mensal
    • -
  • Cativo x Livre Mensal
    • -
  • Custo R$/MWh
    • -
    +
  • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia'}
    • + {/*
    +
  • setEconomyMenu(0)} className={economyMenu===0? 'actualPathDrawer' : null}>Economia Bruta Anual
    • +
  • setEconomyMenu(1)} className={economyMenu===1? 'actualPathDrawer' : null}>Economia Bruta Mensal
    • +
  • setEconomyMenu(2)} className={economyMenu===2? 'actualPathDrawer' : null}>Cativo x Livre Mensal
    • +
  • setEconomyMenu(3)} className={economyMenu===3? 'actualPathDrawer' : null}>Custo R$/MWh
    • +
    */}
  • {'Telemetria'}
  • {'Resumo de Op. '}
  • {'Notícias'}
    • -
  • {'PLD'}
    • +
  • setPldDrawer(!pldDrawer)} className={router.pathname=='/pld'? 'actualPath' : null}>{'PLD >'}
    • +
    +
  • setPldMenu(0)} className={pldMenu==0? 'actualPathDrawer' : null}>PLD Histórico
    • +
  • setPldMenu(1)} className={pldMenu===1? 'actualPathDrawer' : null}>Valores Diários
    • +
  • setPldMenu(2)} className={pldMenu===2? 'actualPathDrawer' : null}>Valores Horários
    • +
  • {'Info Setorial'}
    • {/*
  • {'Consumo'}
    • */}
  • {'Notificações'}

    {notificationsCount}

    • @@ -124,15 +142,15 @@ export default function Sidebar() {
  • {'FAQ'}
    • - + Deseja realmente sair ?
    @@ -141,7 +159,7 @@ export default function Sidebar() {
    -     +