Merge branch 'fix/chartsFixs' into 'dev'
add changes See merge request kluppsoftware/smart-energia-web!103
This commit is contained in:
José Corte
commit
9a5dfcdbe2
@ -8,7 +8,9 @@ export const BasicButtonView = styled.button`
|
||||
|
||||
width: 140px;
|
||||
height: 45px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
background: #254F7F;
|
||||
border-radius: 8px;
|
||||
border-style: none;
|
||||
@ -16,6 +18,13 @@ export const BasicButtonView = styled.button`
|
||||
font-family: 'Poppins';
|
||||
font-size: 90%;
|
||||
|
||||
transition: all 350ms ease-in;
|
||||
|
||||
:hover {
|
||||
transform: scale(1.02);
|
||||
opacity: 0.9;
|
||||
box-shadow: rgb(0, 0, 0, 0.2) 0px 2px 4px -1px;
|
||||
}
|
||||
|
||||
color: #FFFFFF;
|
||||
`
|
||||
|
||||
@ -21,6 +21,9 @@ export default function GradientButton({ title, description, orange, purple, gre
|
||||
|
||||
return (
|
||||
<GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange'} onClick={() => handleClick()}>
|
||||
<svg>
|
||||
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
|
||||
</svg>
|
||||
<p></p>
|
||||
<p>{description}</p>
|
||||
</GradientButtonView>
|
||||
|
||||
@ -6,7 +6,6 @@ export const GradientButtonView = styled.button`
|
||||
align-items: center;
|
||||
|
||||
flex-direction: column;
|
||||
border-radius: 2px;
|
||||
|
||||
width: 30%;
|
||||
min-width: 240px;
|
||||
@ -30,8 +29,43 @@ export const GradientButtonView = styled.button`
|
||||
|
||||
box-shadow: 0.5px 3px 10px rgba(119, 119, 119, 0.1);
|
||||
|
||||
border-radius: 8px!important;
|
||||
border-style: none;
|
||||
|
||||
:hover {
|
||||
transition: all 0.2s linear;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 404px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
rect {
|
||||
fill: none;
|
||||
stroke: #fff;
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: 422, 0;
|
||||
transition: all 0.35s linear;
|
||||
}
|
||||
|
||||
:hover {
|
||||
background: rgba($red, 0);
|
||||
letter-spacing: 1px;
|
||||
|
||||
|
||||
rect {
|
||||
stroke-width: 5;
|
||||
stroke-dasharray: 15, 310;
|
||||
stroke-dashoffset: 48;
|
||||
transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@ -60,9 +60,7 @@ ChartJS.register(
|
||||
interface LineBarChartInterface {
|
||||
title: string,
|
||||
subtitle: string,
|
||||
data1: any,
|
||||
data2?: any,
|
||||
data3: any,
|
||||
chartData: any,
|
||||
red?: any,
|
||||
label: any,
|
||||
dataset1?: string,
|
||||
@ -73,7 +71,7 @@ interface LineBarChartInterface {
|
||||
miniature?: boolean | undefined,
|
||||
}
|
||||
|
||||
export function CativoXLivreChart({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3, barLabel, hashurado, miniature }: LineBarChartInterface) {
|
||||
export function CativoXLivreChart({ title, subtitle, chartData, label, red, dataset1, dataset2, dataset3, barLabel, hashurado, miniature }: LineBarChartInterface) {
|
||||
const chartRef = useRef<ChartJS>(null);
|
||||
|
||||
const labels = label
|
||||
@ -109,7 +107,7 @@ export function CativoXLivreChart({ title, subtitle, data1, data2, data3, label,
|
||||
dataArr.map(data => {
|
||||
sum += data;
|
||||
});
|
||||
const result = `${(parseInt(value)/1000).toLocaleString('pt-br')}`
|
||||
const result = `${(parseFloat(value)).toLocaleString('pt-br')}`
|
||||
|
||||
return value==null? null : result
|
||||
}
|
||||
@ -138,36 +136,48 @@ export function CativoXLivreChart({ title, subtitle, data1, data2, data3, label,
|
||||
},
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
data: data1.map(value => value.economia_mensal),
|
||||
data: chartData.map(value => value.economia_mensal),
|
||||
},
|
||||
{
|
||||
type: 'bar' as const,
|
||||
label: 'Cativo',
|
||||
backgroundColor: (value, ctx) => {
|
||||
return hashurado? data1[value.dataIndex]?.dad_estimado == false? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
|
||||
return '#C2D5FB'
|
||||
},
|
||||
data: data3.map(value => value.custo_cativo),
|
||||
data: chartData.map(value => {
|
||||
if (!value.dad_estimado)
|
||||
return value.custo_cativo
|
||||
}),
|
||||
},
|
||||
{
|
||||
type: 'bar' as const,
|
||||
label: 'Livre',
|
||||
// backgroundColor: '#255488',
|
||||
backgroundColor: (value, ctx) => {
|
||||
return hashurado? data1[value.dataIndex]?.dad_estimado == false? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
|
||||
return '#255488'
|
||||
},
|
||||
data: data2.map(value => value.custo_livre),
|
||||
data: chartData.map(value => {
|
||||
if (!value.dad_estimado)
|
||||
return value.custo_livre
|
||||
}),
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
label: 'Est. Livre',
|
||||
backgroundColor: pattern.draw('diagonal', '#255488'),
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
type: 'bar',
|
||||
label: 'Est. Cativo',
|
||||
backgroundColor: pattern.draw('diagonal', '#C2D5FB'),
|
||||
data: [],
|
||||
data: chartData.map(value => {
|
||||
if (value.dad_estimado)
|
||||
return value.custo_cativo
|
||||
}),
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
label: 'Est. Livre',
|
||||
backgroundColor: pattern.draw('diagonal', '#255488'),
|
||||
data: chartData.map(value => {
|
||||
if (value.dad_estimado)
|
||||
return value.custo_livre
|
||||
}),
|
||||
}
|
||||
],
|
||||
}
|
||||
|
||||
@ -49,6 +49,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
|
||||
}
|
||||
},
|
||||
y: {
|
||||
stacked: true,
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
@ -91,17 +92,23 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
|
||||
{
|
||||
label: '2021',
|
||||
data: data1.map(value => value.custo_unit>0? value.custo_unit : null),
|
||||
backgroundColor: '#C2d5fb'
|
||||
// backgroundColor: (value, ctx) => {
|
||||
// return data1[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#255488');
|
||||
// },
|
||||
// backgroundColor: '#C2d5fb'
|
||||
backgroundColor: (value, ctx) => {
|
||||
if (value.dad_estimado)
|
||||
return draw('diagonal-right-left', '#C2d5fb');
|
||||
else
|
||||
return '#C2d5fb'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '2022',
|
||||
data: data2.map(value => value.custo_unit>0? value.custo_unit : null),
|
||||
// backgroundColor: '#255488'
|
||||
backgroundColor: (value, ctx) => {
|
||||
return data2[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#255488');
|
||||
if (value.dad_estimado)
|
||||
return draw('diagonal-right-left', '#255488');
|
||||
else
|
||||
return '#255488'
|
||||
},
|
||||
}
|
||||
],
|
||||
|
||||
@ -2,7 +2,7 @@ import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title
|
||||
import ChartDataLabels from 'chartjs-plugin-datalabels';
|
||||
import { draw, generate } from 'patternomaly'
|
||||
import React from 'react';
|
||||
import { Bar } from 'react-chartjs-2';
|
||||
import { Bar, Chart } from 'react-chartjs-2';
|
||||
|
||||
import { GrossAnualChartView } from './GrossAnualChartView';
|
||||
import ChartTitle from '../ChartTitle';
|
||||
@ -40,11 +40,13 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar
|
||||
|
||||
return spaces
|
||||
}
|
||||
const options: object = {
|
||||
|
||||
const options: any = {
|
||||
responsive: true,
|
||||
is3D: true,
|
||||
scales: {
|
||||
x: {
|
||||
grouped: false,
|
||||
font: {
|
||||
size: 20
|
||||
},
|
||||
@ -102,7 +104,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 = label.map(value => value.replace('2021', 'Até 2021'))
|
||||
} else {
|
||||
labels = label
|
||||
}
|
||||
@ -111,26 +113,29 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Estimado',
|
||||
data: [],
|
||||
backgroundColor: '#C2d5fb',
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
label: dataset,
|
||||
data: dataProps.map((value, index) => {
|
||||
if (!value.dad_estimado)
|
||||
return parseFloat(value.economia_acumulada).toFixed(2)
|
||||
}),
|
||||
backgroundColor: (value, ctx) => {
|
||||
return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
|
||||
return '#255488'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
data: [dataProps[0]?.economia_acumulada?dataProps[0].economia_acumulada*1.1 : 1],
|
||||
backgroundColor: 'transparent',
|
||||
type: 'bar',
|
||||
label: 'Estimado',
|
||||
data: dataProps.map((value, index) => {
|
||||
if (value.dad_estimado)
|
||||
return parseFloat(value.economia_acumulada).toFixed(2)
|
||||
}),
|
||||
datalabels: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
backgroundColor: (value, ctx) => {
|
||||
return draw('diagonal-right-left', '#C2d5fb');
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
@ -138,7 +143,7 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar
|
||||
return (
|
||||
<GrossAnualChartView>
|
||||
<ChartTitle title={title} subtitle={subtitle} />
|
||||
<Bar options={options} data={data} />
|
||||
<Chart options={options} data={data} type='bar'/>
|
||||
</GrossAnualChartView>
|
||||
)
|
||||
}
|
||||
|
||||
@ -11,6 +11,8 @@ import {
|
||||
Legend
|
||||
} from 'chart.js'
|
||||
|
||||
import document from 'next/document';
|
||||
|
||||
import { draw, generate } from 'patternomaly'
|
||||
|
||||
import { GrossMensalChartView } from './GrossMensalChartView';
|
||||
@ -79,7 +81,7 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
|
||||
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') : ''}`
|
||||
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
|
||||
},
|
||||
|
||||
@ -110,15 +110,15 @@ export default function Sidebar() {
|
||||
<Link href='/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Cativo x Livre Mensal</li></Link>
|
||||
<Link href='/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R$/MWh</li></Link>
|
||||
</div>
|
||||
<Link href='/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
|
||||
<Link href='/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria'}</li></Link>
|
||||
<Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
|
||||
<Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
|
||||
<Link href='/pld'><li className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li></Link>
|
||||
<Link href='/industryInfo'><li className={router.pathname=='/industryInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
|
||||
<Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias'}</li></Link>
|
||||
<Link href='/pld'><li className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD'}</li></Link>
|
||||
<Link href='/industryInfo'><li className={router.pathname=='/industryInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial'}</li></Link>
|
||||
{/* <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link> */}
|
||||
<Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification' style={{display: notificationsCount<=0||notificationsCount===undefined? 'none' : 'inherit'}}><p>{notificationsCount}</p></div></li></Link>
|
||||
<Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
|
||||
<Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
|
||||
<Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações'}<div className='notification' style={{display: notificationsCount<=0||notificationsCount===undefined? 'none' : 'inherit'}}><p>{notificationsCount}</p></div></li></Link>
|
||||
<Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós'}</li></Link>
|
||||
<Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ'}</li></Link>
|
||||
<button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>
|
||||
<Modal
|
||||
open={open}
|
||||
|
||||
@ -1,16 +1,23 @@
|
||||
import { GetServerSideProps } from 'next'
|
||||
import Head from 'next/head'
|
||||
import { parseCookies } from 'nookies'
|
||||
import React from 'react'
|
||||
import React, { useState } from 'react'
|
||||
|
||||
// material ui imports
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Select from '@mui/material/Select';
|
||||
|
||||
import Chart from '../../components/graph/Chart'
|
||||
import CostIndicatorChart from '../../components/graph/costIndicatorChart'
|
||||
import Header from '../../components/header/Header'
|
||||
import PageTitle from '../../components/pageTitle/PageTitle'
|
||||
import getAPIClient from '../../services/ssrApi'
|
||||
import { CostIndicatorView } from '../../styles/layouts/economy/costIndicator/CostIndicatorView'
|
||||
|
||||
export default function CostIndicator({graphData, userName}: any) {
|
||||
export default function CostIndicator({graphData, userName, clients}: any) {
|
||||
const [unity, setUnity] = useState('');
|
||||
|
||||
const months = [
|
||||
'Jan',
|
||||
'Fev',
|
||||
@ -34,10 +41,28 @@ export default function CostIndicator({graphData, userName}: any) {
|
||||
<Header name={userName}>
|
||||
<PageTitle title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'/>
|
||||
</Header>
|
||||
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
|
||||
<InputLabel id="demo-select-small">Unidade</InputLabel>
|
||||
<Select
|
||||
labelId="demo-select-small"
|
||||
id="demo-select-small"
|
||||
value={unity}
|
||||
label="Unidade"
|
||||
onChange={value => setUnity(value.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">Todas</MenuItem>
|
||||
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
|
||||
{
|
||||
clients.map((value) => {
|
||||
return <MenuItem key={1} value={value.codigo_scde}>{value.cod_smart_unidade}</MenuItem>
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<section>
|
||||
<CostIndicatorChart title='' subtitle=''
|
||||
data1={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
|
||||
// data1={graphData}
|
||||
data2={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
|
||||
label={months}
|
||||
/>
|
||||
@ -50,9 +75,25 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const apiClient = getAPIClient(ctx)
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
const { ['user-name']: userName } = parseCookies(ctx)
|
||||
const { ['user-client_id']: id } = parseCookies(ctx)
|
||||
|
||||
let graphData = [];
|
||||
|
||||
let clients = [];
|
||||
|
||||
await apiClient.post('/units', {
|
||||
"filters": [
|
||||
{"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]},
|
||||
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": id}
|
||||
],
|
||||
"fields": ["cod_smart_unidade", "codigo_scde"],
|
||||
"distinct": true
|
||||
}).then(res => {
|
||||
clients = res.data.data
|
||||
}).catch(res => {
|
||||
// console.log(res)
|
||||
})
|
||||
|
||||
await apiClient.post('/economy/MWh').then(res => {
|
||||
graphData = res.data.data
|
||||
}).catch(res => {
|
||||
@ -70,6 +111,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
|
||||
return {
|
||||
props: {
|
||||
clients,
|
||||
graphData,
|
||||
userName
|
||||
}
|
||||
|
||||
@ -54,7 +54,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
|
||||
|
||||
<Link href='pld'>
|
||||
<section className="cardsSection" >
|
||||
<MapCard title='R$/MWh' subtitle='' date='período' statistic='' imgSource='/moneyIcon.svg' />
|
||||
<MapCard title='R$/MWh' subtitle='' date={`período - ${new Date().toLocaleDateString()}`} 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' />
|
||||
@ -84,7 +84,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
|
||||
</GraphCard>
|
||||
|
||||
<GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' singleBar>
|
||||
<CativoXLivreChart data1={acumulatedGraph} data2={acumulatedGraph} data3={acumulatedGraph}
|
||||
<CativoXLivreChart chartData={acumulatedGraph}
|
||||
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
|
||||
label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado miniature/>
|
||||
</GraphCard>
|
||||
|
||||
@ -1,17 +1,24 @@
|
||||
import { GetServerSideProps } from 'next'
|
||||
import Head from 'next/head'
|
||||
import { parseCookies } from 'nookies'
|
||||
import React from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
|
||||
|
||||
import { LineBarChart2 } from '../../components/graph/LineBarChart2'
|
||||
// material ui imports
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Select from '@mui/material/Select';
|
||||
|
||||
import Header from '../../components/header/Header'
|
||||
import PageTitle from '../../components/pageTitle/PageTitle'
|
||||
import { ConsumoEstimado } from '../../services/consumoEstimado'
|
||||
import getAPIClient from '../../services/ssrApi'
|
||||
import { EstimatedCostView } from '../../styles/layouts/economy/estimatedCost/EstimatedCostView'
|
||||
|
||||
export default function EstimatedCost({graphData, userName}: any) {
|
||||
export default function EstimatedCost({graphData, userName, clients}: any) {
|
||||
const [unity, setUnity] = useState('');
|
||||
|
||||
return (
|
||||
<EstimatedCostView>
|
||||
<Head>
|
||||
@ -20,8 +27,27 @@ export default function EstimatedCost({graphData, userName}: any) {
|
||||
<Header name={userName}>
|
||||
<PageTitle title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' />
|
||||
</Header>
|
||||
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
|
||||
<InputLabel id="demo-select-small">Unidade</InputLabel>
|
||||
<Select
|
||||
labelId="demo-select-small"
|
||||
id="demo-select-small"
|
||||
value={unity}
|
||||
label="Unidade"
|
||||
onChange={value => setUnity(value.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">Todas</MenuItem>
|
||||
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> !!OPÇAO COM DADOS TESTES!! */}
|
||||
{
|
||||
clients.map((value) => {
|
||||
return <MenuItem key={1} value={value.codigo_scde}>{value.cod_smart_unidade}</MenuItem>
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<section>
|
||||
<CativoXLivreChart data1={graphData} data2={graphData} data3={graphData}
|
||||
<CativoXLivreChart chartData={graphData}
|
||||
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
|
||||
label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado />
|
||||
</section>
|
||||
@ -33,8 +59,23 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const apiClient = getAPIClient(ctx)
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
const { ['user-name']: userName } = parseCookies(ctx)
|
||||
const { ['user-client_id']: id } = parseCookies(ctx)
|
||||
|
||||
let graphData = [];
|
||||
let clients = [];
|
||||
|
||||
await apiClient.post('/units', {
|
||||
"filters": [
|
||||
{"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]},
|
||||
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": id}
|
||||
],
|
||||
"fields": ["cod_smart_unidade", "codigo_scde"],
|
||||
"distinct": true
|
||||
}).then(res => {
|
||||
clients = res.data.data
|
||||
}).catch(res => {
|
||||
// console.log(res)
|
||||
})
|
||||
|
||||
await apiClient.post('/economy/estimates').then(res => {
|
||||
graphData = res.data.data
|
||||
@ -53,6 +94,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
|
||||
return {
|
||||
props: {
|
||||
clients,
|
||||
graphData,
|
||||
userName
|
||||
}
|
||||
|
||||
@ -18,7 +18,6 @@ export default function commonQuestions({faqData, userName}) {
|
||||
<title>Smart Energia - FAQ</title>
|
||||
</Head>
|
||||
<Header name={userName}>
|
||||
<PageTitle title='Perguntas Frequentes' subtitle='Aqui estão algumas das perguntas que mais recebemos!' />
|
||||
</Header>
|
||||
<Banner title='Perguntas Frequentes' subtitle='Aqui estão algumas das perguntas que mais recebemos!' imgSource='/assets/banners/faq1.png'/>
|
||||
<section className='CommonQuestionsSection' >
|
||||
|
||||
@ -59,7 +59,6 @@ export default function industryInfo({userName}: any) {
|
||||
<title>Smart Energia - Info de Setor</title>
|
||||
</Head>
|
||||
<Header name={userName}>
|
||||
<PageTitle title='Info Setorial' subtitle='Clique em "Baixar PDF", para fazer download do PDF' />
|
||||
</Header>
|
||||
<Banner title='Info setorial' subtitle='Baixe o pdf para ver o info setorial' imgSource='/assets/banners/infoSetorial.jpg'/>
|
||||
<p>Um resumo das atualizações gerais do Setor Elétrico, com dados sobre geração consumo, demanda, meteorologia baseadas em informações do ONS, CCEE, ANEEL, 10 Maiores Jornais e Revistas e CPTEC</p>
|
||||
|
||||
@ -17,7 +17,6 @@ export default function Notifications({notificationData, userName}: any) {
|
||||
<title>Smart Energia - Notificações</title>
|
||||
</Head>
|
||||
<Header name={userName}>
|
||||
<PageTitle title='Notificações' subtitle='Aqui estão as notificações publicadas para você!' />
|
||||
</Header>
|
||||
<Banner title='Notificações' subtitle='Aqui estão as notificações publicadas para você!' imgSource='/assets/banners/notificacoes.jpg'/>
|
||||
<section className='CommonQuestionsSection' >
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import Fab from '@mui/material/Fab';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
@ -16,9 +17,19 @@ import PageTitle from '../../components/pageTitle/PageTitle';
|
||||
import { api } from '../../services/api';
|
||||
import { EvolucaoPld } from '../../services/evolucaoPld';
|
||||
import getAPIClient from '../../services/ssrApi';
|
||||
import { GoBack, PldGraphView, PldTableView } from '../../styles/layouts/pld/PldView'
|
||||
import { GoBack, PldGraphView, PldTableView, TableHeader } from '../../styles/layouts/pld/PldView'
|
||||
import RenderIf from '../../utils/renderIf'
|
||||
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
import Tab from '@mui/material/Tab';
|
||||
|
||||
import NavigationIcon from '@mui/icons-material/Navigation';
|
||||
|
||||
import TextField from '@mui/material/TextField';
|
||||
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
|
||||
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||||
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
||||
|
||||
interface pldInterface {
|
||||
tableData: any,
|
||||
graphByHourData: any,
|
||||
@ -30,11 +41,14 @@ interface pldInterface {
|
||||
export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||
const dateFormated = new Date()
|
||||
|
||||
const year_Month = `0${dateFormated.getMonth()}/${dateFormated.getFullYear()}`
|
||||
const year_Month = `0${dateFormated.getMonth()+1}/${dateFormated.getFullYear()}`
|
||||
|
||||
const [date, setDate] = useState(`${dateFormated.getFullYear()}-${dateFormated.getMonth()}-${dateFormated.getUTCDate()}`);
|
||||
const [date, setDate] = useState<any>(new Date());
|
||||
const [select, setSelect] = useState('SUDESTE');
|
||||
const [page, setPage] = useState<string>('table')
|
||||
|
||||
// rendering page
|
||||
const [page, setPage] = useState<number>(0)
|
||||
|
||||
const [month, setMonth] = useState<string>((dateFormated.getUTCMonth()+1).toString())
|
||||
|
||||
const [dataByDay, setDataByDay] = useState([])
|
||||
@ -43,6 +57,12 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||
const [norte, setNorte] = useState([])
|
||||
const [sudeste, setSudeste] = useState([])
|
||||
const [nordeste, setNordeste] = useState([])
|
||||
const [ pageYPosition, setPageYPosition ] = useState(0);
|
||||
|
||||
function getPageYAfterScroll(){
|
||||
setPageYPosition(window.scrollY);
|
||||
console.log(window.scrollY)
|
||||
}
|
||||
|
||||
const handleChange = (event: SelectChangeEvent) => {
|
||||
setSelect(event.target.value);
|
||||
@ -51,6 +71,12 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||
setMonth(event.target.value);
|
||||
};
|
||||
|
||||
const handleChangeDate = (newValue: Date | null) => {
|
||||
setDate(newValue)
|
||||
|
||||
console.log(newValue.toLocaleDateString().replace('/', '-').split('-').reverse().join('-'))
|
||||
};
|
||||
|
||||
function getDataByDay() {
|
||||
api.post('/pld/daily', {
|
||||
"limit": 20,
|
||||
@ -169,22 +195,43 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||
downloadCSVFile(data.join("\n"), filename);
|
||||
}
|
||||
|
||||
// const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
|
||||
// setPages(newValue);
|
||||
// };
|
||||
|
||||
useEffect(() => {
|
||||
getDataByHour()
|
||||
getDataByDay()
|
||||
console.log(month)
|
||||
}, [date, month, select])
|
||||
|
||||
useEffect(() => {
|
||||
window?.addEventListener('scroll', getPageYAfterScroll);
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<main style={{width: '100%',}}>
|
||||
<Head>
|
||||
<title>Smart Energia - PLD</title>
|
||||
</Head>
|
||||
<RenderIf isTrue={page==='table'? true : false}>
|
||||
<div id='title'/>
|
||||
<Header name={userName}>
|
||||
<Link href='/dashboard' >{'< Voltar para Visão Geral'}</Link>
|
||||
<PageTitle title='PLD Histórico' subtitle='Tabela de consumo PLD'/>
|
||||
</Header>
|
||||
<TableHeader>
|
||||
<Tabs value={page} onChange={(e, nv) => setPage(nv)} aria-label="">
|
||||
<Tab label="Pld Histórico"/>
|
||||
<Tab label="Valores Diários"/>
|
||||
<Tab label="Valores Horários"/>
|
||||
</Tabs>
|
||||
<div className='btnDownload'>
|
||||
<BasicButton onClick={() => {
|
||||
const html = document.querySelector("table").outerHTML;
|
||||
htmlToCSV(html, "tabela_PLD.csv");
|
||||
}} title='Download'/>
|
||||
</div>
|
||||
</TableHeader>
|
||||
<RenderIf isTrue={page===0}>
|
||||
<PldTableView>
|
||||
<table className="tg">
|
||||
<thead>
|
||||
@ -202,20 +249,20 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||
return <>
|
||||
<tr className={data.year_month_formatted==year_Month? 'actual' : ''}>
|
||||
<td className='tg-gceh'>{data.year_month_formatted}</td>
|
||||
<td className={`tg-uulg`}>{parseFloat(data.nordeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td className={`tg-gceh`}>{parseFloat(data.norte).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td className={`tg-gceh`}>{parseFloat(data.sudeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td className={`tg-uulg`}>{parseFloat(data.sul).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td className={`tg-uulg`}>{parseFloat(data.nordeste).toLocaleString('pt-br',{currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td className={`tg-gceh`}>{parseFloat(data.norte).toLocaleString('pt-br',{currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td className={`tg-gceh`}>{parseFloat(data.sudeste).toLocaleString('pt-br',{currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td className={`tg-uulg`}>{parseFloat(data.sul).toLocaleString('pt-br',{currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
</tr>
|
||||
</>
|
||||
})
|
||||
}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td ></td>
|
||||
<td ></td>
|
||||
<td ></td>
|
||||
<td ></td>
|
||||
<td style={{borderColor: 'transparent'}}></td>
|
||||
<td style={{borderColor: 'transparent'}}></td>
|
||||
<td style={{borderColor: 'transparent'}}></td>
|
||||
<td style={{borderColor: 'transparent'}}></td>
|
||||
<td style={{borderColor: 'transparent'}}></td>
|
||||
</tr>
|
||||
{
|
||||
tableData.result.map((data, index) => {
|
||||
@ -254,28 +301,25 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className='btnDownload'>
|
||||
<BasicButton onClick={() => {
|
||||
const html = document.querySelector("table").outerHTML;
|
||||
htmlToCSV(html, "tabela_PLD.csv");
|
||||
}} title='Download'/>
|
||||
</div>
|
||||
<section>
|
||||
<article onClick={() => setPage('perMouth')}>
|
||||
<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('perDate')}>
|
||||
<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>
|
||||
</RenderIf>
|
||||
|
||||
<RenderIf isTrue={page==='perMouth'? true : false}>
|
||||
<Header name={userName}>
|
||||
<GoBack onClick={() => setPage('table')}>{'< Voltar para PLD Histórico'}</GoBack>
|
||||
<PageTitle title='Resumo PLD - Valores Diários' subtitle='Evolução PLD - Valores em R$/MWh'/>
|
||||
</Header>
|
||||
{/* grafico de grafico por seleção de data (mês)*/}
|
||||
<RenderIf isTrue={page===1}>
|
||||
<PldGraphView>
|
||||
<section className='toolsbar'>
|
||||
<div className='select'>
|
||||
@ -319,7 +363,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||
|
||||
return 0
|
||||
}).map((data, index) => {
|
||||
return <MenuItem key={index} value={data.mes_ref.slice(2, 4)}>{data.mes_ref.slice(2, 4)}</MenuItem>
|
||||
return <MenuItem key={index} value={data.mes_ref.slice(2, 4)}>{data.mes_ref}</MenuItem>
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
@ -333,22 +377,36 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
|
||||
</PldGraphView>
|
||||
</RenderIf>
|
||||
|
||||
<RenderIf isTrue={page==='perDate'? true : false}>
|
||||
<Header name={userName}>
|
||||
<GoBack onClick={() => setPage('table')}>{'< Voltar para PLD Histórico'}</GoBack>
|
||||
<PageTitle title='Resumo PLD - Valores Horários' subtitle='Evolução PLD - Valores em R$/MWh'/>
|
||||
</Header>
|
||||
{/* grafico de grafico por seleção de data INTEIRA*/}
|
||||
<RenderIf isTrue={page===2}>
|
||||
<PldGraphView>
|
||||
<section className='toolsbar2'>
|
||||
<p>Selecione o mês: </p>
|
||||
<input type="date" data-date={date} data-date-format="DD MMMM YYYY" value={date} onChange={(value) => setDate(value.target.value)}/>
|
||||
<p>Selecione a data: </p>
|
||||
{/* <input type="date" data-date={date} data-date-format="DD MMMM YYYY" value={date} onChange={(value) => setDate(value.target.value)}/> */}
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns} localeText={'pt-BR'} adapterLocale='pt-BR'>
|
||||
<div className='select datePicker'>
|
||||
<DesktopDatePicker
|
||||
label="Data"
|
||||
inputFormat="dd/MM/yyyy"
|
||||
value={date}
|
||||
onChange={handleChangeDate}
|
||||
renderInput={(params) => <TextField {...params}/>}
|
||||
/>
|
||||
</div>
|
||||
</LocalizationProvider>
|
||||
</section>
|
||||
<LineChart data1={nordeste} data2={norte} data3={sudeste} data4={sul}
|
||||
dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL'
|
||||
title={date? `Período - ${date.toString().split("-")[2]}/${date.toString().split("-")[1]}/${date.toString().split("-")[0]}` : null}
|
||||
subtitle='' label={['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']} />
|
||||
title={date? `Período - ${date.toLocaleDateString()}` : null}
|
||||
subtitle='' label={['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']}
|
||||
/>
|
||||
</PldGraphView>
|
||||
</RenderIf>
|
||||
{pageYPosition > 300 && <a href="#title" style={{position: 'fixed', right: '50px', bottom: '100px'}}>
|
||||
<Fab sx={{backgroundColor: "#254F7F"}} aria-label="add">
|
||||
<NavigationIcon />
|
||||
</Fab>
|
||||
</a>}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@ import { api } from '../../services/api';
|
||||
// import { dados } from '../services/DadosTabelaResumoOperacao';
|
||||
import data from '../../services/dados.json'
|
||||
import getAPIClient from '../../services/ssrApi';
|
||||
import { Pagination, TableView } from '../../styles/layouts/ResumoOperacao/ResumoOperacaoView';
|
||||
import { Pagination, TableHeader, TableView } from '../../styles/layouts/ResumoOperacao/ResumoOperacaoView';
|
||||
|
||||
export default function ResumoOperacao({tableData, clientsData, userName, clientMonth}: any) {
|
||||
const csvData = tableData;
|
||||
@ -60,6 +60,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log(month)
|
||||
if (unidade!=='' || month!==''){
|
||||
api.post('/operation/summary', month && !unidade? {
|
||||
"filters": [
|
||||
@ -95,6 +96,8 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
|
||||
<Header name={userName}>
|
||||
<PageTitle title='Resumo de Operações' subtitle='Operações de compra e venda - Mensal' />
|
||||
</Header>
|
||||
<TableHeader>
|
||||
<article>
|
||||
<h3>Filtrar por Unidade e/ou Mês</h3>
|
||||
<div className='select'>
|
||||
<FormControl fullWidth>
|
||||
@ -133,6 +136,14 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<BasicButton title='Baixar CSV' onClick={() => {
|
||||
const html = document.querySelector("table").outerHTML;
|
||||
htmlToCSV(html, "resumo_operacao.csv");
|
||||
}}/>
|
||||
</article>
|
||||
</TableHeader>
|
||||
<table className="tg">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -149,8 +160,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
|
||||
{
|
||||
tableDataState.map((value, index) => {
|
||||
if (value.mes.slice(4,7) != '2020')
|
||||
return <>
|
||||
<tr>
|
||||
return <tr>
|
||||
<td key={index} className='tg-gceh'>{value.mes}</td>
|
||||
<td key={index} className='tg-gceh'>{value.cod_smart_unidade}</td>
|
||||
<td key={index} className='tg-gceh'>{value.operacao}</td>
|
||||
@ -159,16 +169,12 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
|
||||
<td key={index} className='tg-gceh'>{parseFloat(value.preco_nf).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
<td key={index} className='tg-gceh'>{parseFloat(value.nf_c_icms).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
|
||||
</tr>
|
||||
</>
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className='btn'>
|
||||
<BasicButton title='Baixar CSV' onClick={() => {
|
||||
const html = document.querySelector("table").outerHTML;
|
||||
htmlToCSV(html, "resumo_operacao.csv");
|
||||
}}/>
|
||||
|
||||
</div>
|
||||
</TableView>
|
||||
)
|
||||
|
||||
@ -23,6 +23,13 @@ import getAPIClient from '../../services/ssrApi';
|
||||
import router from 'next/router';
|
||||
import { DemRegXDemConChart } from '../../components/graph/DemRegXDemConChart';
|
||||
|
||||
import TextField from '@mui/material/TextField';
|
||||
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 Stack from '@mui/material/Stack';
|
||||
import BasicButton from '../../components/buttons/basicButton/BasicButton';
|
||||
|
||||
const style = {
|
||||
position: 'absolute' as const,
|
||||
top: '50%',
|
||||
@ -44,8 +51,8 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
|
||||
|
||||
export default function Telemetria({userName, clients}: any) {
|
||||
const [unity, setUnity] = useState('');
|
||||
const [startDate, setStartDate] = useState('');
|
||||
const [endDate, setEndDate] = useState('');
|
||||
const [startDate, setStartDate] = useState(new Date());
|
||||
const [endDate, setEndDate] = useState(new Date());
|
||||
const [discretization, setDiscretization] = useState('');
|
||||
|
||||
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
|
||||
@ -110,8 +117,19 @@ export default function Telemetria({userName, clients}: any) {
|
||||
|
||||
const [demRegXDemCon, setDemRegXDemCon] = useState(null);
|
||||
|
||||
const [value, setValue] = React.useState<Date | null>(
|
||||
new Date(),
|
||||
);
|
||||
|
||||
const handleChangeStartDate = (newValue: Date | null) => {
|
||||
setStartDate(newValue)
|
||||
};
|
||||
const handleChangeEndDate = (newValue: Date | null) => {
|
||||
setEndDate(newValue)
|
||||
};
|
||||
|
||||
async function getTableData() {
|
||||
if (startDate!=='' && endDate!=='' && send)
|
||||
if (startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && send)
|
||||
setOpen(true)
|
||||
await api.post('/telemetry/powerFactor', {
|
||||
"type": discretization,
|
||||
@ -137,12 +155,12 @@ export default function Telemetria({userName, clients}: any) {
|
||||
}
|
||||
|
||||
function handleVerifyFields() {
|
||||
if (unity != '' && startDate != '' && endDate != '' && discretization != '') {
|
||||
if (unity != '' && startDate.toLocaleDateString() != '' && endDate.toLocaleDateString() != '' && discretization != '') {
|
||||
router.push({
|
||||
pathname: '/chartTelemetry',
|
||||
query: {
|
||||
startDate,
|
||||
endDate,
|
||||
'startDate': startDate.toLocaleDateString(),
|
||||
'endDate': endDate.toLocaleDateString(),
|
||||
discretization,
|
||||
unity
|
||||
},
|
||||
@ -256,17 +274,40 @@ export default function Telemetria({userName, clients}: any) {
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<div className='select'>
|
||||
{/* <div className='select'>
|
||||
<p className='title' >Data inicial</p>
|
||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={startDate}
|
||||
onChange={(value) => setStartDate(value.target.value)} min="2021-01-01"/>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className='select'>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<div className='select datePicker'>
|
||||
<p className='title' >Data inicial</p>
|
||||
<DesktopDatePicker
|
||||
label="Date desktop"
|
||||
inputFormat="dd/MM/yyyy"
|
||||
value={startDate}
|
||||
onChange={handleChangeStartDate}
|
||||
renderInput={(params) => <TextField {...params}/>}
|
||||
/>
|
||||
</div>
|
||||
<div className='select datePicker'>
|
||||
<p className='title' >Data final</p>
|
||||
<DesktopDatePicker
|
||||
label="Date desktop"
|
||||
inputFormat="dd/MM/yyyy"
|
||||
value={endDate}
|
||||
onChange={handleChangeEndDate}
|
||||
renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>}
|
||||
/>
|
||||
</div>
|
||||
</LocalizationProvider>
|
||||
|
||||
{/* <div className='select'>
|
||||
<p className='title' >Data final</p>
|
||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={endDate}
|
||||
onChange={(value) => setEndDate(value.target.value)} min="2021-01-01"/>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className='select'>
|
||||
<p className='title' >Discretização</p>
|
||||
@ -291,13 +332,13 @@ export default function Telemetria({userName, clients}: any) {
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
<button className='sendButton' onClick={() => {
|
||||
<BasicButton title='Selecionar!' onClick={() => {
|
||||
setSend(true)
|
||||
getTableData()
|
||||
}}>Selecionar!</button>
|
||||
}}/>
|
||||
</section>
|
||||
|
||||
<RenderIf isTrue={startDate!=='' && endDate!=='' && tableData===null && exception === false && send}>
|
||||
<RenderIf isTrue={startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && tableData===null && exception === false && send}>
|
||||
<div className='modal'>
|
||||
<div id="preloader_1">
|
||||
<span></span>
|
||||
@ -308,7 +349,7 @@ export default function Telemetria({userName, clients}: any) {
|
||||
</div>
|
||||
</div>
|
||||
</RenderIf>
|
||||
<RenderIf isTrue={startDate!=='' && endDate!=='' && tableData!==null}>
|
||||
<RenderIf isTrue={startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && tableData!==null}>
|
||||
<table className="tg">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
17
src/services/charts/telemetry/getDemand.ts
Normal file
17
src/services/charts/telemetry/getDemand.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { api } from "../../api"
|
||||
|
||||
export async function getDemand(
|
||||
unity: string,
|
||||
startDate: string,
|
||||
endDate: string,
|
||||
discretization: string
|
||||
) {
|
||||
const { data } = await api.post('/telemetry/demand', {
|
||||
"filters": [
|
||||
{"type" : "=", "field": `${discretization}.ponto`, "value": unity},
|
||||
{"type" : "between", "field": ["dia_num"], "value": [startDate, endDate]}
|
||||
]
|
||||
})
|
||||
|
||||
return data.data
|
||||
}
|
||||
18
src/services/charts/telemetry/getDiscretization.ts
Normal file
18
src/services/charts/telemetry/getDiscretization.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import { api } from "../../api"
|
||||
|
||||
export async function getDiscretization(
|
||||
unity: string,
|
||||
startDate: string,
|
||||
endDate: string,
|
||||
discretization: string
|
||||
) {
|
||||
const { data } = await api.post('/telemetry/discretization', {
|
||||
"type": discretization,
|
||||
"filters": [
|
||||
{"type" : "=", "field": "med_5min.ponto", "value": unity}
|
||||
]
|
||||
}
|
||||
)
|
||||
|
||||
return data.data
|
||||
}
|
||||
17
src/services/charts/telemetry/getPowerFactor.ts
Normal file
17
src/services/charts/telemetry/getPowerFactor.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { api } from "../../api"
|
||||
|
||||
export async function getPowerFactorData(
|
||||
unity: string,
|
||||
startDate: string,
|
||||
endDate: string,
|
||||
discretization: string
|
||||
) {
|
||||
const { data } = await api.post('/telemetry/powerFactor', {
|
||||
"filters": [
|
||||
{"type" : "=", "field": `${discretization}.ponto`, "value": unity},
|
||||
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
|
||||
]
|
||||
})
|
||||
|
||||
return data.data
|
||||
}
|
||||
@ -39,4 +39,55 @@ export const GlobalStyle = createGlobalStyle`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.datePicker {
|
||||
.css-1u3bzj6-MuiFormControl-root-MuiTextField-root,
|
||||
.css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root,
|
||||
.css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root,
|
||||
.css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root,
|
||||
.MuiOutlinedInput-notchedOutline,
|
||||
.css-1d3z3hw-MuiOutlinedInput-notchedOutline,
|
||||
.MuiOutlinedInput-input,
|
||||
.MuiInputBase-input,
|
||||
.MuiInputBase-inputAdornedEnd,
|
||||
.css-nxo287-MuiInputBase-input-MuiOutlinedInput-input{
|
||||
/* background-color: red!important; */
|
||||
/* border: none!important;
|
||||
outline: 0 */
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.MuiFormControl-root,
|
||||
.MuiTextField-root,
|
||||
.css-1u3bzj6-MuiFormControl-root-MuiTextField-root {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.MuiOutlinedInput-input,
|
||||
.MuiInputBase-input,
|
||||
.MuiInputBase-inputAdornedEnd,
|
||||
.css-nxo287-MuiInputBase-input-MuiOutlinedInput-input {
|
||||
border: none;
|
||||
outline: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.MuiOutlinedInput-input,
|
||||
.MuiInputBase-input .MuiInputBase-inputAdornedEnd,
|
||||
.css-nxo287-MuiInputBase-input-MuiOutlinedInput-input {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.MuiButtonBase-root,
|
||||
.MuiIconButton-root,
|
||||
.MuiIconButton-edgeEnd,
|
||||
.MuiIconButton-sizeMedium,
|
||||
.css-1yq5fb3-MuiButtonBase-root-MuiIconButton-root {
|
||||
margin-bottom: 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
@ -20,15 +20,6 @@ export const TableView = styled.div`
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.select{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
margin-bottom: 25px;
|
||||
|
||||
width: 30rem;
|
||||
}
|
||||
|
||||
.tg{
|
||||
border-collapse:collapse;
|
||||
border-spacing:0;
|
||||
@ -81,7 +72,7 @@ export const TableView = styled.div`
|
||||
color:#6a707e;
|
||||
font-size:14px;
|
||||
text-align:center;
|
||||
vertical-align:top
|
||||
vertical-align:top;
|
||||
}
|
||||
.tg .tg-0tzy{
|
||||
color:#abafb3;
|
||||
@ -120,8 +111,39 @@ export const TableView = styled.div`
|
||||
.teste {
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
table, th:last-child{
|
||||
border: transparent;
|
||||
border-top-right-radius: 20px;
|
||||
}
|
||||
|
||||
table, th:first-child {
|
||||
border: transparent;
|
||||
border-top-left-radius: 20px;
|
||||
}
|
||||
|
||||
.radius {
|
||||
background-color: red!important;
|
||||
}
|
||||
`;
|
||||
|
||||
export const TableHeader = styled.section`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
width: 100%;
|
||||
|
||||
margin-bottom: 25px;
|
||||
|
||||
.select{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
width: 30rem;
|
||||
}
|
||||
`
|
||||
|
||||
export const Pagination = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -215,8 +215,8 @@ export const TelemetriaView = styled.main`
|
||||
|
||||
.select {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@ -12,8 +12,7 @@ export const AboutUsView = styled.main`
|
||||
|
||||
aside {
|
||||
position: relative;
|
||||
/* margin-bottom: 150px; */
|
||||
|
||||
bottom: 220px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@ -3,10 +3,16 @@ import styled from "styled-components"
|
||||
export const PldTableView = styled.main`
|
||||
width: 100%;
|
||||
|
||||
border-radius: 8px!important;
|
||||
|
||||
table {
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-radius: 8px!important;
|
||||
}
|
||||
}
|
||||
|
||||
.actual {
|
||||
@ -134,6 +140,8 @@ export const PldTableView = styled.main`
|
||||
align-items: center;
|
||||
|
||||
article {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -143,13 +151,53 @@ export const PldTableView = styled.main`
|
||||
|
||||
margin: 40px;
|
||||
|
||||
border-radius: 20px;
|
||||
background: #255488;
|
||||
color: white;
|
||||
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ;
|
||||
-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ;
|
||||
-moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ;
|
||||
background: #F8F8F8;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
background: darken($red, 1.5%);
|
||||
|
||||
background: linear-gradient(200.69deg, #254f7f 9%, #3183e0 98%), #FFFFFF;
|
||||
|
||||
:hover {
|
||||
transition: all 0.2s linear;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
rect {
|
||||
fill: none;
|
||||
stroke: #fff;
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: 422, 0;
|
||||
transition: all 0.35s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-1:hover {
|
||||
background: rgba($red, 0);
|
||||
letter-spacing: 1px;
|
||||
|
||||
|
||||
rect {
|
||||
stroke-width: 5;
|
||||
stroke-dasharray: 15, 310;
|
||||
stroke-dashoffset: 48;
|
||||
transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -161,7 +209,13 @@ export const PldTableView = styled.main`
|
||||
}
|
||||
|
||||
.btnDownload{
|
||||
margin-top: 25px;
|
||||
width: fit-content;
|
||||
margin-bottom: 15px;
|
||||
:hover {
|
||||
position: relative;
|
||||
transition: all 0.2s linear;
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
@ -277,3 +331,15 @@ export const NewTableLine = styled.section`
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
`
|
||||
|
||||
export const TableHeader = styled.label`
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
padding: 0 40px 0 40px
|
||||
`
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user