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

Merge branch 'fix/chartsFixs' into 'dev'

Browse Source 
Fix/charts fixs

See merge request kluppsoftware/smart-energia-web!107
This commit is contained in:
José Corte 2022-07-14 12:14:43 +00:00
commit 6625897a39
13 changed files with 133 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/graph/LineBarChart.tsx
View File

@ -114,7 +114,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
},
};
console.log(label.length)
console.log(data3)
const data = data2? {
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,
@ -146,7 +146,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
backgroundColor: (value, ctx) => {
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
},
data: data2.map(value => value.value),
data: data3.map(value => value.value),
},
],
} : {
@ -158,8 +158,8 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
borderColor: red?
'#f00' : '#0c9200',
borderWidth: 2,
fill: false,
data: data1.map(value => value.value),
fill: true,
data: data1.map(value => value),
},
{
type: 'bar' as const,

2
src/components/graph/costIndicatorChart/index.tsx
View File

@ -63,7 +63,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
dataArr.map(data => {
sum += data;
});
const result = `${parseInt(value).toLocaleString('pt-br')}`
const result = `${(parseFloat(value)/10).toLocaleString('pt-br').slice(0, 4)}`
return value==null? null : result
},

45
src/components/graph/grossAnualChart/GrossAnualChart.tsx
View File

@ -1,12 +1,11 @@
import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { draw, generate } from 'patternomaly'
import React from 'react';
import { Bar, Chart } from 'react-chartjs-2';
import { draw } from 'patternomaly'
import React, { useEffect } from 'react';
import { Chart } from 'react-chartjs-2';
import { GrossAnualChartView } from './GrossAnualChartView';
import ChartTitle from '../ChartTitle';
import { blue } from '@mui/material/colors';
ChartJS.register(
CategoryScale,
@ -29,25 +28,20 @@ interface SingleBarInterface{
bruta?: boolean | undefined
}
export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, barLabel, miniature, bruta }: SingleBarInterface) {
export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, barLabel, miniature, bruta }: SingleBarInterface) {
function spacement(string) {
let spaces = '⠀'
let i=Math.abs(string)
const spaces = string.length===1?'' : string.length===2? '⠀⠀⠀⠀' : string.length===3? '⠀⠀⠀' : string.length===4? '⠀⠀' : string.length===5? '⠀' : ''
while (i <= 1) {
i--
spaces = spaces + `⠀`
}
console.log(string.length)
return spaces
}
const options: any = {
responsive: true,
is3D: true,
scales: {
x: {
grouped: false,
stacked: true,
font: {
size: 20
},
@ -56,6 +50,7 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar
}
},
y: {
stacked: true,
grid: {
display: false
}
@ -75,14 +70,14 @@ 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')}${spacement(parseInt(value).toLocaleString('pt-br'))}`
return value==null? null : result
},
display: true,
color: '#255488',
anchor: "end",
offset: -60,
offset: !miniature? -55 : -30,
align: "start",
font: {
size: !miniature? 22 : 10,
@ -105,7 +100,7 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar
let labels: string[];
if (bruta) {
labels = label.map(value => value.replace('2021', 'Até 2021'))
labels = [`Até ${new Date().getFullYear()-1}`, `${new Date().getFullYear()}`]
} else {
labels = label
}
@ -117,26 +112,20 @@ 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)
data: dataProps.filter(value => value.dad_estimado === false).map((value, index) => {
return parseFloat(value.economia_acumulada)
}),
backgroundColor: (value, ctx) => {
return '#255488'
},
backgroundColor: '#255488'
},
{
type: 'bar',
stacked: true,
label: 'Estimado',
data: dataProps.map((value, index) => {
data: dataProps.filter(value => value.ano === '2022').map((value, index) => {
if (value.dad_estimado)
return parseFloat(value.economia_acumulada).toFixed(2)
return parseFloat(value.economia_acumulada)
}),
backgroundColor: (value, ctx) => {
return draw('diagonal-right-left', '#C2d5fb');
},
backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
},
],
}

8
src/components/graph/grossMensalChart/GrossMensalChart.tsx
View File

@ -43,13 +43,9 @@ interface ChartInterface {
export default function GrossMensalChart({ title, data1, data2, label, subtitle, miniature }: ChartInterface) {
function spacement(string) {
let spaces = '⠀'
let i=Math.abs(string)
const spaces = string.length===1?'' : string.length===2? '⠀⠀⠀⠀' : string.length===3? '⠀⠀⠀' : string.length===4? '⠀⠀' : string.length===5? '⠀' : ''
while (i <= 1) {
i--
spaces = spaces + `⠀`
}
console.log(string.length)
return spaces
}

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

@ -119,7 +119,7 @@ export default function Sidebar() {
</div>
<ul>
<Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
<Link href='/economy'><li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia'}</li></Link>
<Link href='/economy'><li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/economy'? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia'}</li></Link>
{/* <div className='economiaDrawer drawer'>
<Link href='/economy'><li onClick={() => setEconomyMenu(0)} className={economyMenu===0? 'actualPathDrawer' : null}>Economia Bruta Anual</li></Link>
<Link href='/economy'><li onClick={() => setEconomyMenu(1)} className={economyMenu===1? 'actualPathDrawer' : null}>Economia Bruta Mensal</li></Link>

4
src/contexts/AuthContext.tsx
View File

@ -3,7 +3,7 @@ import Router from 'next/router'
import { destroyCookie, setCookie } from "nookies";
import { signInRequest } from "../services/auth";
import { logout, signInRequest } from "../services/auth";
import { api } from "../services/api";
type UserType = {
@ -37,6 +37,8 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
destroyCookie(null, 'user-role')
destroyCookie(null, 'user-id')
destroyCookie(null, '@smartAuth-token')
logout()
}
async function signIn({email, password}: SignInData) {

16
src/pages/dashboard/index.tsx
View File

@ -23,7 +23,7 @@ import { parseCookies } from 'nookies'
import { GetServerSideProps } from 'next'
import getAPIClient from '../../services/ssrApi'
import Chart2 from '../../components/graph/Chart2'
import { GrossAnulChart } from '../../components/graph/grossAnualChart/GrossAnualChart'
import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart'
import CostIndicatorChart from '../../components/graph/costIndicatorChart'
import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart'
@ -55,7 +55,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
<Link href='pld'>
<section className="cardsSection" >
<MapCard title='R$/MWh' subtitle='' date={`período - ${new Date().toLocaleDateString()}`} statistic='' imgSource='/moneyIcon.svg' />
<MapCard title='R$/MWh' subtitle='' date={`${new Date().getUTCMonth()+1}/${new Date().getUTCFullYear()}`} statistic='' imgSource='/moneyIcon.svg' />
{
mapsInfo.map(value => {
return <MapCard key={value.submarket} title='S' subtitle={value.submarket} statistic={parseFloat(value.value).toFixed(2)} imgSource='/SUL.svg' />
@ -66,13 +66,8 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
<section className='dashboard'>
<GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil'>
{/* <SingleBar title='' subtitle=''
dataset='Consolidada'
dataProps={grossAnualGraph}
label={grossAnualYears} barLabel miniature/> */}
<GrossAnulChart title='' subtitle=''
<GrossAnualChart title='' subtitle=''
dataset='Consolidada'
dataProps={grossAnualGraph}
label={grossAnualYears} barLabel bruta miniature/>
</GraphCard>
@ -93,11 +88,6 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
</GraphCard>
<GraphCard title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'>
{/* <Chart title='' subtitle=''
data1={costIndicator.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
// data1={graphData}
data2={costIndicator.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
label={costIndicator.map(value => value.mes.slice(0, 3))} miniature/> */}
<CostIndicatorChart title='' subtitle=''
data1={costIndicator.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
// data1={graphData}

9
src/pages/economy/index.tsx
View File

@ -30,11 +30,12 @@ import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { MenuContext } from '../../contexts/menu/MenuContext';
import { GrossAnulChart } from '../../components/graph/grossAnualChart/GrossAnualChart';
import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart';
import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart';
import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart';
import { ConsumoEstimado } from '../../services/consumoEstimado';
import CostIndicatorChart from '../../components/graph/costIndicatorChart';
import { EconomyView } from '../../styles/layouts/economy/economy';
export default function economy({userName, anual, years, brutaMensal, yearsBrutaMensal, catLiv, clients, indicatorCost}: any) {
const {economyMenu, setEconomyMenu} = useContext(MenuContext)
@ -86,7 +87,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
}, [unity])
return (
<main style={{width: '100%'}}>
<EconomyView style={{width: '100%'}}>
<Head>
<title>Smart Energia - PLD</title>
</Head>
@ -106,7 +107,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
<RenderIf isTrue={economyMenu===0}>
<section>
<GrossAnulChart title='' subtitle=''
<GrossAnualChart title='' subtitle=''
dataset='Consolidada'
dataProps={anual}
@ -182,7 +183,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
/>
</section>
</RenderIf>
</main>
</EconomyView>
)
}

97
src/pages/pld/index.tsx
View File

@ -83,11 +83,9 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
function getDataByDay() {
console.log(month)
api.post('/pld/daily', {
"limit": 20,
"offset": 0,
"filters": [
{"type" : "=", "field" : "mes_ref", "value": month, "row": true},
{"type" : "=", "field" : "pld.submercado", "value": select}
{"type" : "=", "field" : "year_month_formatted", "value": month},
{"type" : "=", "field" : "submarket", "value": select}
],
"order": [{ "field": "day_calc", "direction": "asc" }]
}).then(res => {
@ -185,8 +183,9 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
function htmlToCSV(html, filename) {
const data = [];
const rows = document.querySelectorAll("table tr");
// const rows = document.getElementsByClassName('tabela');
for (let i = 0; i < rows.length; i++) {
for (let i = rows.length/2; i < rows.length; i++) {
const row = [], cols: any = rows[i].querySelectorAll("td, th");
for (let j = 0; j < cols.length; j++) {
@ -196,7 +195,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
data.push(row.join(";"));
}
downloadCSVFile(data.join("\n").replace('(R$/MWh)', ''), filename);
downloadCSVFile(data.join("\n"), filename);
}
useEffect(() => {
@ -236,7 +235,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
<RenderIf isTrue={pldMenu===0}>
<PldTableView>
<table className="tg">
<table className='tg'>
<thead>
<tr>
<th className='tg-8oo6'>Mês</th>
@ -262,20 +261,6 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
}
</tbody>
</table>
{/* <section>
<article onClick={() => setPage(1)} className="btn btn-1">
<svg height='100px'>
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
</svg>
<p>Valores Diários</p>
</article>
<article onClick={() => setPage(2)} className="btn btn-1">
<svg height='100px'>
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
</svg>
<p>Valores Horários</p>
</article>
</section> */}
</PldTableView>
<PldTableMinMaxView>
<table className='tg'>
@ -318,9 +303,73 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
</tbody>
</table>
</PldTableMinMaxView>
<PldTableView display={false}>
<table className="tg tabela" style={{display: 'none'}}>
<thead>
<tr className='tr'>
<th className='tg-8oo6'>Mês</th>
<th className='tg-8oo6'>Nordeste</th>
<th className='tg-8oo6'>Norte</th>
<th className='tg-8oo6'>Sudeste</th>
<th className='tg-8oo6'>Sul</th>
</tr>
</thead>
<tbody>
{
tableData.data.map(data => {
return <>
<tr className={`${data.year_month_formatted==year_Month? 'actual' : ''} tr`}>
<td className='tg-gceh'>{data.year_month_formatted}</td>
<td className={`tg-uulg`}>{parseFloat(data.nordeste).toLocaleString('pt-br',{currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
<td className={`tg-gceh`}>{parseFloat(data.norte).toLocaleString('pt-br',{currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
<td className={`tg-gceh`}>{parseFloat(data.sudeste).toLocaleString('pt-br',{currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
<td className={`tg-uulg`}>{parseFloat(data.sul).toLocaleString('pt-br',{currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
</tr>
</>
})
}
{
tableData.result.map((data, index) => {
if (index === 0) {
return <>
<tr className='tr'>
<td style={{borderTopLeftRadius: 8}} className='tg-gceh'>Máximo</td>
<td className='tg-uulg'>{parseFloat(data.nordeste_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
<td className='tg-gceh'>{parseFloat(data.norte_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
<td className='tg-gceh'>{parseFloat(data.sudeste_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
<td className='tg-uulg'>{parseFloat(data.sul_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
</tr>
</>
} else if (index===1) {
return <>
<tr className='tr'>
<td className='tg-gceh'>Mínimo</td>
<td className='tg-uulg'>{parseFloat(data.nordeste_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
<td className='tg-gceh'>{parseFloat(data.norte_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
<td className='tg-gceh'>{parseFloat(data.sudeste_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
<td className='tg-uulg'>{parseFloat(data.sul_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
</tr>
</>
} else if (index===2) {
return <>
<tr className='tr'>
<td className='tg-gceh' style={{borderBottomColor: 'transparent'}}>Desv. Padrão</td>
<td className='tg-uulg' style={{borderBottomColor: 'transparent'}}>{parseFloat(data.nordeste_desv_pad).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td className='tg-gceh' style={{borderBottomColor: 'transparent'}}>{parseFloat(data.norte_desv_pad).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td className='tg-gceh' style={{borderBottomColor: 'transparent'}}>{parseFloat(data.sudeste_desv_pad).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td className='tg-uulg' style={{borderBottomColor: 'transparent'}}>{parseFloat(data.sul_desv_pad).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
</tr>
</>
}
})
}
</tbody>
</table>
</PldTableView>
</RenderIf>
{/* grafico de grafico por seleção de data (mês)*/}
{/* grafico de grafico por seleção de data (mês) (diario)*/}
<RenderIf isTrue={pldMenu===1}>
<PldGraphView>
<section className='toolsbar'>
@ -376,7 +425,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
</FormControl>
</section>
<LineBarChart
data1={dataByDay} data3={dataByDay}
data1={dataByDay.map(value => value.mmovel)} data3={dataByDay}
dataset1={'Média'} dataset2={'barra1'} dataset3={'Diario'}
label={dataByDay.map((value, index) => {
return value.day_formatted
@ -385,7 +434,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
</PldGraphView>
</RenderIf>
{/* grafico de grafico por seleção de data INTEIRA*/}
{/* grafico de grafico por seleção de data INTEIRA (horario)*/}
<RenderIf isTrue={pldMenu===2}>
<PldGraphView>
<section className='toolsbar2'>

8
src/pages/resumoOperacao/index.tsx
View File

@ -28,11 +28,9 @@ export default function ResumoOperacao({tableData, clients, userName, clientMont
const csvData = tableData;
const [month, setMonth] = useState('');
const [unidade, setUnidade] = useState('');
const [unidade, setUnidade] = useState(clients[0].cod_smart_unidade);
const [tableDataState, setTableDataState] = useState<any>([]);
const monthLabels = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez']
const { ['user-id']: id } = parseCookies()
const handleChangeMonth = (event: SelectChangeEvent) => {
@ -120,7 +118,7 @@ export default function ResumoOperacao({tableData, clients, userName, clientMont
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={clients.length > 1? unidade : clients[0]}
value={unidade}
label="Unidade"
onChange={handleChangeUnidade}
fullWidth
@ -192,7 +190,7 @@ export default function ResumoOperacao({tableData, clients, userName, clientMont
if (value.mes.slice(4,7) != '2020')
return <tr>
<td key={value.mes} className='tg-gceh'>{value.mes}</td>
<td key={value.cod_smart_unidade} className='tg-gceh'>{value.cod_smart_unidade}</td>
<td key={value.cod_smart_unidade} className='tg-gceh'>{value.unidade}</td>
<td key={value.operacao} className='tg-gceh'>{value.operacao}</td>
<td key={value.contraparte} className='tg-gceh'>{value.contraparte}</td>
<td key={value.montante_nf} className='tg-gceh'>{parseFloat(value.montante_nf).toLocaleString('pt-br')}</td>

13
src/services/auth.ts
View File

@ -2,10 +2,6 @@ import { api } from "./api";
export const TOKEN_KEY = "@smartAuth-token";
export const logout = () => {
localStorage.removeItem(TOKEN_KEY);
};
interface SignInRequestData {
email: string,
password: string
@ -81,3 +77,12 @@ export default async function recoverUserInformation(id) {
}
}
}
export async function logout() {
await api.post('/auth/logout', {})
// eslint-disable-next-line @typescript-eslint/no-empty-function
.then(res => {})
.catch(res => {
console.log(res)
})
}

9
src/styles/layouts/economy/economy.ts Normal file
View File

@ -0,0 +1,9 @@
import styled from 'styled-components'
export const EconomyView = styled.main`
section {
display: flex;
justify-content: center;
align-items: center;
}
`

5
src/styles/layouts/pld/PldView.ts
View File

@ -41,7 +41,6 @@ export const PldTableMinMaxView = styled.div`
word-break:normal;
}
.tg th{
border-color:#DDDFE1;
border-style:solid;
@ -208,7 +207,9 @@ export const PldTableMinMaxView = styled.div`
padding: 0!important;
}
`
export const PldTableView = styled.div`
export const PldTableView = styled.div<{display?: boolean}>`
display: ${props => props.display? 'none' : 'block'};
width: 100%;
border-radius: 8px!important;