fixing qualifiers

This commit is contained in:
joseCorte-exe 2022-07-13 11:27:57 -03:00
parent a6bab6a6e1
commit 57d9c909a0
10 changed files with 95 additions and 65 deletions

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? { 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, 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) => { backgroundColor: (value, ctx) => {
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#255488' : pattern.draw('diagonal', '#255488') : '#255488' 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? borderColor: red?
'#f00' : '#0c9200', '#f00' : '#0c9200',
borderWidth: 2, borderWidth: 2,
fill: false, fill: true,
data: data1.map(value => value.value), data: data1.map(value => value),
}, },
{ {
type: 'bar' as const, type: 'bar' as const,

View File

@ -63,7 +63,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
dataArr.map(data => { dataArr.map(data => {
sum += 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 return value==null? null : result
}, },

View File

@ -29,15 +29,11 @@ interface SingleBarInterface{
bruta?: boolean | undefined 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) { function spacement(string) {
let spaces = '' const spaces = string.length===1?'' : string.length===2? '' : string.length===3? '' : string.length===4? '' : string.length===5? '' : ''
let i=Math.abs(string)
while (i <= 1) { console.log(string.length)
i--
spaces = spaces + ``
}
return spaces return spaces
} }
@ -75,7 +71,7 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar
sum += data; sum += data;
}); });
const percentage = (dataProps[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%"; 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 return value==null? null : result
}, },

View File

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

View File

@ -119,7 +119,7 @@ export default function Sidebar() {
</div> </div>
<ul> <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='/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'> {/* <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(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> <Link href='/economy'><li onClick={() => setEconomyMenu(1)} className={economyMenu===1? 'actualPathDrawer' : null}>Economia Bruta Mensal</li></Link>

View File

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

View File

@ -30,7 +30,7 @@ import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { MenuContext } from '../../contexts/menu/MenuContext'; 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 GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart';
import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'; import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart';
import { ConsumoEstimado } from '../../services/consumoEstimado'; import { ConsumoEstimado } from '../../services/consumoEstimado';
@ -106,7 +106,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
<RenderIf isTrue={economyMenu===0}> <RenderIf isTrue={economyMenu===0}>
<section> <section>
<GrossAnulChart title='' subtitle='' <GrossAnualChart title='' subtitle=''
dataset='Consolidada' dataset='Consolidada'
dataProps={anual} dataProps={anual}

View File

@ -83,11 +83,9 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
function getDataByDay() { function getDataByDay() {
console.log(month) console.log(month)
api.post('/pld/daily', { api.post('/pld/daily', {
"limit": 20,
"offset": 0,
"filters": [ "filters": [
{"type" : "=", "field" : "mes_ref", "value": month, "row": true}, {"type" : "=", "field" : "year_month_formatted", "value": month},
{"type" : "=", "field" : "pld.submercado", "value": select} {"type" : "=", "field" : "submarket", "value": select}
], ],
"order": [{ "field": "day_calc", "direction": "asc" }] "order": [{ "field": "day_calc", "direction": "asc" }]
}).then(res => { }).then(res => {
@ -185,8 +183,9 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
function htmlToCSV(html, filename) { function htmlToCSV(html, filename) {
const data = []; const data = [];
const rows = document.querySelectorAll("table tr"); 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"); const row = [], cols: any = rows[i].querySelectorAll("td, th");
for (let j = 0; j < cols.length; j++) { for (let j = 0; j < cols.length; j++) {
@ -196,7 +195,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
data.push(row.join(";")); data.push(row.join(";"));
} }
downloadCSVFile(data.join("\n").replace('(R$/MWh)', ''), filename); downloadCSVFile(data.join("\n"), filename);
} }
useEffect(() => { useEffect(() => {
@ -236,7 +235,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
<RenderIf isTrue={pldMenu===0}> <RenderIf isTrue={pldMenu===0}>
<PldTableView> <PldTableView>
<table className="tg"> <table className='tg'>
<thead> <thead>
<tr> <tr>
<th className='tg-8oo6'>Mês</th> <th className='tg-8oo6'>Mês</th>
@ -262,20 +261,6 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
} }
</tbody> </tbody>
</table> </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> </PldTableView>
<PldTableMinMaxView> <PldTableMinMaxView>
<table className='tg'> <table className='tg'>
@ -318,9 +303,73 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
</tbody> </tbody>
</table> </table>
</PldTableMinMaxView> </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> </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}> <RenderIf isTrue={pldMenu===1}>
<PldGraphView> <PldGraphView>
<section className='toolsbar'> <section className='toolsbar'>
@ -376,7 +425,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
</FormControl> </FormControl>
</section> </section>
<LineBarChart <LineBarChart
data1={dataByDay} data3={dataByDay} data1={dataByDay.map(value => value.mmovel)} data3={dataByDay}
dataset1={'Média'} dataset2={'barra1'} dataset3={'Diario'} dataset1={'Média'} dataset2={'barra1'} dataset3={'Diario'}
label={dataByDay.map((value, index) => { label={dataByDay.map((value, index) => {
return value.day_formatted return value.day_formatted
@ -385,7 +434,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
</PldGraphView> </PldGraphView>
</RenderIf> </RenderIf>
{/* grafico de grafico por seleção de data INTEIRA*/} {/* grafico de grafico por seleção de data INTEIRA (horario)*/}
<RenderIf isTrue={pldMenu===2}> <RenderIf isTrue={pldMenu===2}>
<PldGraphView> <PldGraphView>
<section className='toolsbar2'> <section className='toolsbar2'>

View File

@ -28,11 +28,9 @@ export default function ResumoOperacao({tableData, clients, userName, clientMont
const csvData = tableData; const csvData = tableData;
const [month, setMonth] = useState(''); const [month, setMonth] = useState('');
const [unidade, setUnidade] = useState(''); const [unidade, setUnidade] = useState(clients[0].cod_smart_unidade);
const [tableDataState, setTableDataState] = useState<any>([]); 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 { ['user-id']: id } = parseCookies()
const handleChangeMonth = (event: SelectChangeEvent) => { const handleChangeMonth = (event: SelectChangeEvent) => {
@ -120,7 +118,7 @@ export default function ResumoOperacao({tableData, clients, userName, clientMont
<Select <Select
labelId="demo-simple-select-label" labelId="demo-simple-select-label"
id="demo-simple-select" id="demo-simple-select"
value={clients.length > 1? unidade : clients[0]} value={unidade}
label="Unidade" label="Unidade"
onChange={handleChangeUnidade} onChange={handleChangeUnidade}
fullWidth fullWidth

View File

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