fixing
This commit is contained in:
joseCorte-exe
parent
309c2b456a
commit
a8dd640f39
@ -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 } from 'patternomaly'
|
||||
import React, { useEffect } from 'react';
|
||||
import { Chart } from 'react-chartjs-2';
|
||||
import 'chartjs-plugin-style';
|
||||
import { draw } from 'patternomaly';
|
||||
import { Chart } from 'react-chartjs-2';
|
||||
|
||||
import { GrossAnualChartView } from './GrossAnualChartView';
|
||||
import ChartTitle from '../ChartTitle';
|
||||
import { GrossAnualChartView } from './GrossAnualChartView';
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
@ -83,6 +82,9 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
|
||||
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')}${spacement(parseInt(value).toLocaleString('pt-br'))}`
|
||||
|
||||
console.log(value == null ? null : result)
|
||||
console.log(dataProps)
|
||||
|
||||
return value == null ? null : result
|
||||
},
|
||||
display: true,
|
||||
@ -106,7 +108,7 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
|
||||
},
|
||||
};
|
||||
|
||||
const labels: string[] = label.filter(function(item, pos) {
|
||||
const labels: string[] = label.filter((item, pos) => {
|
||||
return label.indexOf(item) == pos;
|
||||
});
|
||||
|
||||
@ -141,11 +143,8 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
|
||||
return 0
|
||||
})
|
||||
},
|
||||
data: [null].concat(dataProps.filter(value => value.dad_estimado === true).map((value, index) => {
|
||||
if (value.dad_estimado)
|
||||
return parseFloat(value.economia_acumulada)
|
||||
else
|
||||
return 0
|
||||
data: [].concat(dataProps.filter(value => value.dad_estimado === true).map((value, index) => {
|
||||
return parseFloat(value?.economia_acumulada)
|
||||
})),
|
||||
borderRadius: 10,
|
||||
backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
|
||||
|
||||
@ -1,23 +1,16 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
import { Bar, Line, Chart as ChartJs } from 'react-chartjs-2'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
BarElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend
|
||||
BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title,
|
||||
Tooltip
|
||||
} from 'chart.js'
|
||||
import { Chart as ChartJs } from 'react-chartjs-2'
|
||||
|
||||
import document from 'next/document'
|
||||
|
||||
import { draw, generate } from 'patternomaly'
|
||||
import { draw } from 'patternomaly'
|
||||
|
||||
import { GrossMensalChartView } from './GrossMensalChartView'
|
||||
import ChartTitle from '../ChartTitle'
|
||||
import { config } from '../config'
|
||||
import { GrossMensalChartView } from './GrossMensalChartView'
|
||||
// import { data } from './LineBarChart';
|
||||
|
||||
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
|
||||
@ -80,7 +73,7 @@ export default function GrossMensalChart({
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
stacked: false,
|
||||
stacked: true,
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
@ -91,7 +84,7 @@ export default function GrossMensalChart({
|
||||
}
|
||||
},
|
||||
y: {
|
||||
stacked: false,
|
||||
stacked: true,
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
|
||||
@ -1,39 +1,37 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import Banner from '../../components/banner/Banner';
|
||||
import { TelemetriaView, Buttons, TableHeader, ChartFilters} from '../../styles/layouts/Telemetria/TelemetriaView';
|
||||
import GradientButton from '../../components/buttons/gradientButton/GradientButton'
|
||||
import Header from '../../components/header/Header';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Select from '@mui/material/Select';
|
||||
import Head from 'next/head';
|
||||
import GradientButton from '../../components/buttons/gradientButton/GradientButton';
|
||||
import Header from '../../components/header/Header';
|
||||
import { Buttons, ChartFilters, TableHeader, TelemetriaView } from '../../styles/layouts/Telemetria/TelemetriaView';
|
||||
|
||||
import RenderIf from '../../utils/renderIf';
|
||||
import MuiAlert, { AlertProps } from '@mui/material/Alert';
|
||||
import Snackbar from '@mui/material/Snackbar';
|
||||
import { GetServerSideProps } from 'next';
|
||||
import { parseCookies } from 'nookies';
|
||||
import { api } from '../../services/api';
|
||||
import Snackbar from '@mui/material/Snackbar'
|
||||
import MuiAlert, { AlertProps } from '@mui/material/Alert'
|
||||
import getAPIClient from '../../services/ssrApi';
|
||||
import { DemRegXDemConChart } from '../../components/graph/DemRegXDemConChart';
|
||||
import getAPIClient from '../../services/ssrApi';
|
||||
import RenderIf from '../../utils/renderIf';
|
||||
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
import Tab from '@mui/material/Tab';
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
|
||||
import TextField from '@mui/material/TextField';
|
||||
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
|
||||
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||||
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
|
||||
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
||||
import { format } from 'date-fns';
|
||||
import BasicButton from '../../components/buttons/basicButton/BasicButton';
|
||||
import { DiscretizedConsumptionChart } from '../../components/graph/DiscretizedConsumptionChart';
|
||||
import FatorPotenciaChart from '../../components/graph/fatorPotenciaChart';
|
||||
import PageTitle from '../../components/pageTitle/PageTitle';
|
||||
import { getDemand } from '../../services/charts/telemetry/getDemand';
|
||||
import { getDiscretization } from '../../services/charts/telemetry/getDiscretization';
|
||||
import { getPowerFactorData } from '../../services/charts/telemetry/getPowerFactor';
|
||||
import { getDemand } from '../../services/charts/telemetry/getDemand';
|
||||
import PageTitle from '../../components/pageTitle/PageTitle';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
|
||||
props,
|
||||
@ -555,18 +553,22 @@ export default function Telemetria({userName, clients}: any) {
|
||||
</div>
|
||||
</RenderIf>
|
||||
|
||||
<RenderIf isTrue={menu===2}>
|
||||
<table className="tg">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className='tg-8oo6'>Unidade</th>
|
||||
<th className='tg-8oo6'>Ponto</th>
|
||||
<th className='tg-8oo6'>Numero do dia</th>
|
||||
<th className='tg-8oo6'>Dia formatado</th>
|
||||
<th className='tg-8oo6'>Hora</th>
|
||||
<th className='tg-8oo6'>Minuto</th>
|
||||
<th className='tg-8oo6'>f_ref</th>
|
||||
<th className='tg-8oo6'>Consumo</th>
|
||||
<th className='tg-8oo6'>Reativa</th>
|
||||
<th className='tg-8oo6'>fp</th>
|
||||
<th className='tg-8oo6'>dem contratada</th>
|
||||
<th className='tg-8oo6'>dem registrada</th>
|
||||
<th className='tg-8oo6'>dem tolerancia</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -575,90 +577,19 @@ export default function Telemetria({userName, clients}: any) {
|
||||
fatorPotenciaData?.map((value, index) => {
|
||||
return <>
|
||||
<tr>
|
||||
<td key={index} className='tg-gceh'>{value.ponto}</td>
|
||||
<td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td>
|
||||
<td key={index} className='tg-uulg'>{value.day_formatted}</td>
|
||||
<td key={index} className='tg-gceh'>{value.hora}</td>
|
||||
<td key={index} className='tg-gceh'>{value.f_ref}</td>
|
||||
<td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td key={index} className='tg-gceh'>{parseFloat(value.fp)}</td>
|
||||
</tr>
|
||||
</>
|
||||
})
|
||||
:
|
||||
null
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</RenderIf>
|
||||
<RenderIf isTrue={menu===1}>
|
||||
<table className="tg">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className='tg-8oo6'>Ponto</th>
|
||||
<th className='tg-8oo6'>Numero do dia</th>
|
||||
<th className='tg-8oo6'>Dia formatado</th>
|
||||
<th className='tg-8oo6'>Hora</th>
|
||||
{/* <th className='tg-8oo6'>Minuto</th> não temos */}
|
||||
<th className='tg-8oo6'>Consumo</th>
|
||||
<th className='tg-8oo6'>Reativa</th>
|
||||
<th className='tg-8oo6'>dem contratada</th>
|
||||
<th className='tg-8oo6'>dem registrada</th>
|
||||
<th className='tg-8oo6'>dem tolerancia</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
demRegXDemCon!==null?
|
||||
demRegXDemCon?.map((value, index) => {
|
||||
return <>
|
||||
<tr>
|
||||
<td key={index} className='tg-gceh'>{value.ponto}</td>
|
||||
<td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td>
|
||||
<td key={index} className='tg-uulg'>{value.day_formatted}</td>
|
||||
<td key={index} className='tg-gceh'>{value.hora}</td>
|
||||
{/* <td key={index} className='tg-gceh'>{value.minut}</td> */}
|
||||
<td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td key={index} className='tg-gceh'>{value.dem_cont}</td>
|
||||
<td key={index} className='tg-gceh'>{value.dem_reg}</td>
|
||||
<td key={index} className='tg-gceh'>{value.dem_tolerancia}</td>
|
||||
</tr>
|
||||
</>
|
||||
})
|
||||
:
|
||||
null
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</RenderIf>
|
||||
<RenderIf isTrue={menu===0}>
|
||||
<table className="tg">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className='tg-8oo6'>Ponto</th>
|
||||
<th className='tg-8oo6'>Numero do dia</th>
|
||||
<th className='tg-8oo6'>Dia formatado</th>
|
||||
<th className='tg-8oo6'>Hora</th>
|
||||
<th className='tg-8oo6'>Minuto</th>
|
||||
<th className='tg-8oo6'>Consumo</th>
|
||||
<th className='tg-8oo6'>Reativa</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
discretizedConsumptionData!==null?
|
||||
discretizedConsumptionData?.map((value, index) => {
|
||||
return <>
|
||||
<tr>
|
||||
<td key={index} className='tg-gceh'>{value.ponto}</td>
|
||||
<td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td>
|
||||
<td key={index} className='tg-uulg'>{value.day_formatted}</td>
|
||||
<td key={index} className='tg-gceh'>{value.hora}</td>
|
||||
<td key={index} className='tg-gceh'>{unity}</td>
|
||||
<td key={index} className='tg-gceh'>{value?.ponto}</td>
|
||||
<td key={index} className='tg-gceh'>{parseFloat(value?.dia_num)}</td>
|
||||
<td key={index} className='tg-uulg'>{value?.day_formatted}</td>
|
||||
<td key={index} className='tg-gceh'>{value?.hora}</td>
|
||||
<td key={index} className='tg-gceh'>{value.minut}</td>
|
||||
<td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td key={index} className='tg-gceh'>{value?.f_ref}</td>
|
||||
<td key={index} className='tg-uulg'>{parseFloat(value?.consumo).toLocaleString('pt-br', { style: 'currency', currency: 'BRL', minimumFractionDigits: 2 })}</td>
|
||||
<td key={index} className='tg-gceh'>{parseFloat(value?.reativa).toLocaleString('pt-br', { style: 'currency', currency: 'BRL', minimumFractionDigits: 2 })}</td>
|
||||
<td key={index} className='tg-gceh'>{parseFloat(value?.fp)}</td>
|
||||
<td key={index} className='tg-gceh'>{value?.dem_cont}</td>
|
||||
<td key={index} className='tg-gceh'>{value?.dem_reg}</td>
|
||||
<td key={index} className='tg-gceh'>{value?.dem_tolerancia}</td>
|
||||
</tr>
|
||||
</>
|
||||
})
|
||||
@ -667,7 +598,6 @@ export default function Telemetria({userName, clients}: any) {
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</RenderIf>
|
||||
|
||||
<RenderIf isTrue={showChart}>
|
||||
<DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={demRegXDemCon?.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user