fixing
This commit is contained in:
parent
e7e1f1bb5b
commit
7db8830c43
@ -2,5 +2,5 @@ import React from 'react'
|
|||||||
import { AccumulatedEconomyTitleView } from './AccumulatedEconomyTitleView'
|
import { AccumulatedEconomyTitleView } from './AccumulatedEconomyTitleView'
|
||||||
|
|
||||||
export default function AccumulatedEconomyTitle({value}: {value: string}) {
|
export default function AccumulatedEconomyTitle({value}: {value: string}) {
|
||||||
return <AccumulatedEconomyTitleView>Economia Acumulada:<p>R${value}</p></AccumulatedEconomyTitleView>
|
return <AccumulatedEconomyTitleView>Economia Acumulada:<p>R${parseFloat(value).toLocaleString('pt-br',{currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</p></AccumulatedEconomyTitleView>
|
||||||
}
|
}
|
||||||
|
|||||||
@ -13,6 +13,7 @@ import { Chart } from 'react-chartjs-2';
|
|||||||
import { CativoXLivreChartView } from './CativoXLivreChartView';
|
import { CativoXLivreChartView } from './CativoXLivreChartView';
|
||||||
import ChartTitle from '../ChartTitle';
|
import ChartTitle from '../ChartTitle';
|
||||||
import pattern from 'patternomaly'
|
import pattern from 'patternomaly'
|
||||||
|
import { config } from '../config';
|
||||||
|
|
||||||
ChartJS.register(
|
ChartJS.register(
|
||||||
LinearScale,
|
LinearScale,
|
||||||
@ -76,62 +77,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, dataset1,
|
|||||||
|
|
||||||
const labels = label
|
const labels = label
|
||||||
|
|
||||||
const options: any = {
|
const options: any = config(miniature)
|
||||||
responsive: true,
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
grid: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
font: {
|
|
||||||
size: !miniature? window.innerWidth/90 : window.innerWidth/110
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
grid: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
font: {
|
|
||||||
size: !miniature? window.innerWidth/90 : window.innerWidth/110
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: {
|
|
||||||
datalabels: {
|
|
||||||
display: true,
|
|
||||||
color: '#255488',
|
|
||||||
// backgroundColor: '#255488',
|
|
||||||
anchor: "end",
|
|
||||||
offset: -20,
|
|
||||||
align: "start",
|
|
||||||
font: {
|
|
||||||
weight: 'bold',
|
|
||||||
size: !miniature? window.innerWidth/80 : window.innerWidth/105
|
|
||||||
},
|
|
||||||
formatter: (value, ctx) => {
|
|
||||||
let sum = 0;
|
|
||||||
const dataArr = ctx.chart.data.datasets[0].data;
|
|
||||||
dataArr.map(data => {
|
|
||||||
sum += data;
|
|
||||||
});
|
|
||||||
const result = `${(parseInt(value)).toLocaleString('pt-br')}`
|
|
||||||
|
|
||||||
return value==null? null : result
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
position: 'bottom' as const,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: '',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const data: any = {
|
const data: any = {
|
||||||
labels,
|
labels,
|
||||||
|
|||||||
@ -15,7 +15,6 @@ import {
|
|||||||
|
|
||||||
import { CostIndicatorChartView } from './CostIndicatorChartView';
|
import { CostIndicatorChartView } from './CostIndicatorChartView';
|
||||||
import ChartTitle from '../ChartTitle';
|
import ChartTitle from '../ChartTitle';
|
||||||
import { Stack } from '@mui/material';
|
|
||||||
import { config } from '../config';
|
import { config } from '../config';
|
||||||
|
|
||||||
ChartJS.register(
|
ChartJS.register(
|
||||||
@ -43,7 +42,8 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
|
|||||||
|
|
||||||
const options: any = config(miniature)
|
const options: any = config(miniature)
|
||||||
|
|
||||||
console.log(data1?.map(value => value))
|
console.log(data1)
|
||||||
|
console.log(data2)
|
||||||
|
|
||||||
const data = {
|
const data = {
|
||||||
labels,
|
labels,
|
||||||
@ -51,7 +51,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
|
|||||||
{
|
{
|
||||||
label: '2021',
|
label: '2021',
|
||||||
data: data1?.map(value => value),
|
data: data1?.map(value => value),
|
||||||
skipNull: true,
|
skipNull: data2?.map(value => value)?.includes(null),
|
||||||
borderRadius: 8,
|
borderRadius: 8,
|
||||||
datalabels: {
|
datalabels: {
|
||||||
backgroundColor: 'white',
|
backgroundColor: 'white',
|
||||||
@ -68,8 +68,8 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '2022',
|
label: '2022',
|
||||||
data: data2?.map(value => value?.custo_unit),
|
data: data2?.map(value => value),
|
||||||
skipNull: true,
|
skipNull: data1?.map(value => value)?.includes(null),
|
||||||
borderRadius: 8,
|
borderRadius: 8,
|
||||||
backgroundColor: (value, ctx) => {
|
backgroundColor: (value, ctx) => {
|
||||||
if (value?.dad_estimado)
|
if (value?.dad_estimado)
|
||||||
|
|||||||
@ -86,7 +86,7 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
|
|||||||
align: "start",
|
align: "start",
|
||||||
font: {
|
font: {
|
||||||
weight: 'bold',
|
weight: 'bold',
|
||||||
size: !miniature? window.innerWidth/70 : window.innerWidth/90,
|
size: !miniature? window.innerWidth/80 : window.innerWidth/105,
|
||||||
},
|
},
|
||||||
color: (value) => {
|
color: (value) => {
|
||||||
return value.dataset.label==='Consolidada'? '#fff' : '#255488'
|
return value.dataset.label==='Consolidada'? '#fff' : '#255488'
|
||||||
|
|||||||
@ -17,6 +17,7 @@ import { draw, generate } from 'patternomaly'
|
|||||||
|
|
||||||
import { GrossMensalChartView } from './GrossMensalChartView';
|
import { GrossMensalChartView } from './GrossMensalChartView';
|
||||||
import ChartTitle from '../ChartTitle';
|
import ChartTitle from '../ChartTitle';
|
||||||
|
import { config } from '../config';
|
||||||
// import { data } from './LineBarChart';
|
// import { data } from './LineBarChart';
|
||||||
|
|
||||||
ChartJS.register(
|
ChartJS.register(
|
||||||
@ -58,71 +59,16 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
|
|||||||
}
|
}
|
||||||
}, [data1])
|
}, [data1])
|
||||||
|
|
||||||
const options: any = {
|
const options: any = config(miniature)
|
||||||
responsive: true,
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
grid: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
font: {
|
|
||||||
size: !miniature? window.innerWidth/90 : window.innerWidth/110
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
grid: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
font: {
|
|
||||||
size: !miniature? window.innerWidth/90 : window.innerWidth/110
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: {
|
|
||||||
datalabels: {
|
|
||||||
display: true,
|
|
||||||
color: '#255488',
|
|
||||||
formatter: (value, ctx) => {
|
|
||||||
let sum = 0;
|
|
||||||
const dataArr = ctx.chart.data.datasets[0].data;
|
|
||||||
dataArr.map(data => {
|
|
||||||
sum += data;
|
|
||||||
});
|
|
||||||
const percentage = data1[ctx.dataIndex]?.econ_percentual? (data1[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%" : '';
|
|
||||||
const result = `${spacement(parseInt(value+3).toLocaleString('pt-br'))}${parseInt(value)!=0? percentage : ''}\n${parseInt(value)!=0? parseInt(value).toLocaleString('pt-br') : ''}`
|
|
||||||
|
|
||||||
return value==null? null : result
|
|
||||||
},
|
|
||||||
anchor: "end",
|
|
||||||
offset: 0,
|
|
||||||
align: "end",
|
|
||||||
font: {
|
|
||||||
weight: 'bold',
|
|
||||||
size: !miniature? window.innerWidth/80 : window.innerWidth/120,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
position: 'bottom' as const,
|
|
||||||
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: ''
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const data: any = {
|
const data: any = {
|
||||||
labels: data1.map(value => value.mes),
|
labels: label,
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
label: 'Consolidado',
|
label: 'Consolidado',
|
||||||
data: data1.map(value => !value.dad_estimado? value?.economia_acumulada : null),
|
data: data1.map(value => !value.dad_estimado? value?.economia_acumulada : null),
|
||||||
|
skipNull: true,
|
||||||
borderRadius: 8,
|
borderRadius: 8,
|
||||||
backgroundColor: '#255488',
|
backgroundColor: '#255488',
|
||||||
stack: '0'
|
stack: '0'
|
||||||
@ -131,6 +77,7 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
|
|||||||
type: 'bar',
|
type: 'bar',
|
||||||
label: 'Estimado',
|
label: 'Estimado',
|
||||||
data: data2.map(value => value.dad_estimado? value?.economia_acumulada : null),
|
data: data2.map(value => value.dad_estimado? value?.economia_acumulada : null),
|
||||||
|
skipNull: true,
|
||||||
borderRadius: 8,
|
borderRadius: 8,
|
||||||
backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
|
backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
|
||||||
stack: '0'
|
stack: '0'
|
||||||
|
|||||||
@ -105,9 +105,9 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
|
|||||||
|
|
||||||
<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'>
|
||||||
<CostIndicatorChart title='' subtitle=''
|
<CostIndicatorChart title='' subtitle=''
|
||||||
data1={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2021')).map(value => value?.custo_unit? value.custo_unit : null)}
|
data1={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2021')).map(value => value?.custo_unit && !!parseInt(value?.custo_unit)? value.custo_unit : null)}
|
||||||
// data1={graphData}
|
// data1={graphData}
|
||||||
data2={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2022'))}
|
data2={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2022')).map(value => value?.custo_unit && !!parseInt(value?.custo_unit)? value.custo_unit : null)}
|
||||||
label={months}
|
label={months}
|
||||||
miniature
|
miniature
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -33,6 +33,9 @@ export default function economy({userName, anual, years, brutaMensal, catLiv, cl
|
|||||||
const [catLivDataState, setCatLivDataState] = useState(null);
|
const [catLivDataState, setCatLivDataState] = useState(null);
|
||||||
const [indicatorDataState, setIndicatorDataState] = useState(null);
|
const [indicatorDataState, setIndicatorDataState] = useState(null);
|
||||||
|
|
||||||
|
const currentYear = new Date().getUTCFullYear()
|
||||||
|
const previousYear = new Date().getUTCFullYear()-1
|
||||||
|
|
||||||
const months = [
|
const months = [
|
||||||
'Jan',
|
'Jan',
|
||||||
'Fev',
|
'Fev',
|
||||||
@ -159,7 +162,6 @@ export default function economy({userName, anual, years, brutaMensal, catLiv, cl
|
|||||||
fullWidth
|
fullWidth
|
||||||
>
|
>
|
||||||
<MenuItem value="default">Todas</MenuItem>
|
<MenuItem value="default">Todas</MenuItem>
|
||||||
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> !!OPÇAO COM DADOS TESTES!! */}
|
|
||||||
{
|
{
|
||||||
clients.map((value) => {
|
clients.map((value) => {
|
||||||
return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
|
return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
|
||||||
@ -200,8 +202,8 @@ export default function economy({userName, anual, years, brutaMensal, catLiv, cl
|
|||||||
</div>
|
</div>
|
||||||
<section>
|
<section>
|
||||||
<CostIndicatorChart title='' subtitle=''
|
<CostIndicatorChart title='' subtitle=''
|
||||||
data1={indicatorDataState?.filter((value, index) => value.mes.slice(0, 4).includes('2021'))}
|
data1={indicatorDataState?.filter(value => value?.mes.slice(0, 4).includes(previousYear)).map(value => value?.custo_unit && !!parseInt(value?.custo_unit)? value.custo_unit : null)}
|
||||||
data2={indicatorDataState?.filter((value, index) => value.mes.slice(0, 4).includes('2022'))}
|
data2={indicatorDataState?.filter(value => value?.mes.slice(0, 4).includes(currentYear)).map(value => value?.custo_unit && !!parseInt(value?.custo_unit)? value.custo_unit : null)}
|
||||||
label={months}
|
label={months}
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -19,6 +19,8 @@ import { api } from '../services/api';
|
|||||||
import { LoginContainer, LoginView } from '../styles/layouts/login/LoginView';
|
import { LoginContainer, LoginView } from '../styles/layouts/login/LoginView';
|
||||||
import Dashboard from './dashboard';
|
import Dashboard from './dashboard';
|
||||||
import MuiAlert, { AlertProps } from '@mui/material/Alert';
|
import MuiAlert, { AlertProps } from '@mui/material/Alert';
|
||||||
|
import { GetServerSideProps } from 'next';
|
||||||
|
import { parseCookies } from 'nookies';
|
||||||
|
|
||||||
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
|
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
|
||||||
props,
|
props,
|
||||||
@ -165,3 +167,16 @@ export default function Home() {
|
|||||||
</LoginView>
|
</LoginView>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||||
|
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||||
|
|
||||||
|
if (token) {
|
||||||
|
return {
|
||||||
|
redirect: {
|
||||||
|
destination: '/dashboard',
|
||||||
|
permanent: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user