fixing qualifiers
This commit is contained in:
joseCorte-exe
parent
a6bab6a6e1
commit
57d9c909a0
@ -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,
|
||||
|
||||
@ -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
|
||||
},
|
||||
|
||||
@ -29,15 +29,11 @@ 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
|
||||
}
|
||||
@ -75,7 +71,7 @@ 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
|
||||
},
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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=''
|
||||
<GrossAnualChart title='' subtitle=''
|
||||
dataset='Consolidada'
|
||||
dataProps={grossAnualGraph}
|
||||
label={grossAnualYears} barLabel miniature/> */}
|
||||
<GrossAnulChart 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}
|
||||
|
||||
@ -30,7 +30,7 @@ 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';
|
||||
@ -106,7 +106,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}
|
||||
|
||||
@ -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'>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user