Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'telemetry' into 'dev'

Browse Source 
more issus pointed

See merge request kluppsoftware/smart-energia-web!116
This commit is contained in:
José Corte 2022-07-20 03:31:30 +00:00
commit 67cd3ad8e0
23 changed files with 635 additions and 572 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/graph/Chart.tsx
View File

@ -101,7 +101,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
data: data2.map(value => value.custo_unit>0? value.custo_unit : null),
// backgroundColor: '#C2d5fb'
backgroundColor: (value, ctx) => {
return data2[value.dataIndex]?.dad_estimado == false ? '#C2d5fb' : draw('diagonal-right-left', '#C2d5fb');
return data2[value.dataIndex]?.dad_estimado == false ? '#C2d5fb' : document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null;
},
}
],

2
src/components/graph/Chart2.tsx
View File

@ -102,7 +102,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
type: 'bar',
label: 'Estimado',
data: data2.map(value => value.dad_estimado? value?.economia_acumulada : null),
backgroundColor: draw('diagonal-right-left', '#C2d5fb')
backgroundColor: document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null
},
],
}

6
src/components/graph/ChartView.ts
View File

@ -1,7 +1,11 @@
import styled from "styled-components"
export const ChartView = styled.div`
width: 100%!important;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
div{
/* margin-top: 10px; */

2
src/components/graph/DemRegXDemConChart.tsx
View File

@ -155,7 +155,7 @@ export function DemRegXDemConChart({
return (
<ChartView>
{/* <ChartTitle title={title} subtitle={subtitle}/> */}
<div>
<div style={{width: '90%'}}>
<Chart ref={chartRef} type='bar' options={options} data={data} />
</div>
</ChartView>

2
src/components/graph/DiscretizedConsumptionChart.tsx
View File

@ -98,7 +98,7 @@ export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label,
return (
<ChartView>
{/* <ChartTitle title={title} subtitle={subtitle}/> */}
<div>
<div style={{width: '90%'}}>
<Chart type='bar' options={options} data={data} />
</div>
</ChartView>

4
src/components/graph/LineBarChart.tsx
View File

@ -179,9 +179,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
return (
<ChartView>
<ChartTitle title={title} subtitle={subtitle}/>
<div>
<Chart ref={chartRef} type='bar' options={options} data={data} />
</div>
<Chart ref={chartRef} type='bar' options={options} data={data} />
</ChartView>
)
}

2
src/components/graph/SingleBar.tsx
View File

@ -104,7 +104,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel
return parseFloat(value.economia_acumulada).toFixed(2)
}),
backgroundColor: (value, ctx) => {
return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null;
},
},
{

10
src/components/graph/cativoXLivreChart/index.tsx
View File

@ -136,7 +136,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
},
borderWidth: 2,
fill: false,
data: chartData.map(value => parseInt(value.economia_mensal)),
data: chartData?.map(value => parseInt(value.economia_mensal)),
},
{
type: 'bar' as const,
@ -144,7 +144,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
backgroundColor: (value, ctx) => {
return '#C2D5FB'
},
data: chartData.map(value => {
data: chartData?.map(value => {
if (!value.dad_estimado)
return parseInt(value.custo_cativo)
}),
@ -156,7 +156,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
backgroundColor: (value, ctx) => {
return '#255488'
},
data: chartData.map(value => {
data: chartData?.map(value => {
if (!value.dad_estimado)
return parseInt(value.custo_livre)
}),
@ -165,7 +165,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
type: 'bar',
label: 'Est. Cativo',
backgroundColor: pattern.draw('diagonal', '#C2D5FB'),
data: chartData.map(value => {
data: chartData?.map(value => {
if (value.dad_estimado)
return parseInt(value.custo_cativo)
}),
@ -174,7 +174,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
type: 'bar',
label: 'Est. Livre',
backgroundColor: pattern.draw('diagonal', '#255488'),
data: chartData.map(value => {
data: chartData?.map(value => {
if (value.dad_estimado)
return parseInt(value.custo_livre)
}),

4
src/components/graph/costIndicatorChart/index.tsx
View File

@ -89,7 +89,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
datasets: [
{
label: '2021',
data: data1.map(value => value.custo_unit>0? value.custo_unit : null),
data: data1?.map(value => value.custo_unit>0? value.custo_unit : null),
// backgroundColor: '#C2d5fb'
backgroundColor: (value, ctx) => {
if (value.dad_estimado)
@ -100,7 +100,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
},
{
label: '2022',
data: data2.map(value => value.custo_unit>0? value.custo_unit : null),
data: data2?.map(value => value.custo_unit>0? value.custo_unit : null),
// backgroundColor: '#255488'
backgroundColor: (value, ctx) => {
if (value.dad_estimado)

6
src/components/graph/fatorPotenciaChart.tsx
View File

@ -82,6 +82,8 @@ export default function FatorPotenciaChart({ title, subtitle, data1, data2, labe
const labels = label;
console.log(data1)
const data = {
labels,
datasets: [
@ -106,7 +108,9 @@ export default function FatorPotenciaChart({ title, subtitle, data1, data2, labe
return (
<ChartView>
{/* <ChartTitle title={title} subtitle={subtitle} /> */}
<Line options={options} data={data} />
<div style={{width: '90%'}}>
<Line options={options} data={data} />
</div>
</ChartView>
)
}

19
src/components/graph/graphCard/ChartCard.tsx
View File

@ -33,7 +33,6 @@ export default function ChartCard({ title, subtitle, consumption, className, lin
const labels = ['0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8',];
const data = {
labels,
datasets: [
@ -43,24 +42,6 @@ export default function ChartCard({ title, subtitle, consumption, className, lin
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
// {
// label: 'Dataset 2',
// data: [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
// borderColor: 'rgb(255, 114, 32)',
// backgroundColor: 'rgba(255, 145, 0, 0.5)',
// },
// {
// label: 'Dataset 3',
// data: [1, 2, 3, 5, 7, 8, 9, 8, 9, 7, 8, 6, 4, 3, 2, 3, 3, 4, 4, 5, 5, 5, 6, 6, 7, 7, 9, 10, 11, 12, 12, 14, 15, 17, 20, 21, 18, 15, 14, 12, 11, 10, 8, 6, 7, 8, 7, 9],
// borderColor: 'rgb(109, 109, 109)',
// backgroundColor: 'rgba(90, 90, 90, 0.5)',
// },
// {
// label: 'Dataset4',
// data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
// borderColor: 'rgb(255, 166, 0)',
// backgroundColor: 'rgba(255, 187, 0, 0.5)',
// },
],
};

2
src/components/graph/grossAnualChart/GrossAnualChart.tsx
View File

@ -30,7 +30,7 @@ interface SingleBarInterface{
export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, barLabel, miniature, bruta }: SingleBarInterface) {
function spacement(string) {
const spaces = string.length===1?'' : string.length===2? '⠀⠀⠀⠀' : string.length===3? '⠀⠀⠀' : string.length===4? '⠀⠀' : string.length===5? '⠀' : ''
const spaces = string.length===1?'' : string.length===2? '' : string.length===3? ' ' : string.length===4? ' ' : string.length===5? ' ' : ''
console.log(string.length)

3
src/components/graph/grossMensalChart/GrossMensalChart.tsx
View File

@ -43,7 +43,8 @@ interface ChartInterface {
export default function GrossMensalChart({ title, data1, data2, label, subtitle, miniature }: ChartInterface) {
function spacement(string) {
const spaces = string.length===1?'' : string.length===2? '⠀⠀⠀⠀' : string.length===3? '⠀⠀⠀' : string.length===4? '⠀⠀' : string.length===5? '⠀' : ''
const spaces = string.length===1?'' : string.length===2? '' : string.length===3? ' ' : string.length===4? ' ' : string.length===5? ' ' : ''
// const spaces = string.length===1?'' : string.length===2? '⠀⠀⠀⠀' : string.length===3? '⠀⠀⠀' : string.length===4? '⠀⠀' : string.length===5? '⠀' : ''
console.log(string.length)

66
src/pages/dashboard/index.tsx
View File

@ -64,39 +64,45 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
</section>
</Link>
<section className='dashboard'>
<GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil'>
<GrossAnualChart title='' subtitle=''
dataset='Consolidada'
dataProps={grossAnualGraph}
label={grossAnualYears} barLabel bruta miniature/>
</GraphCard>
{
typeof window === 'undefined' || typeof window === undefined? null :
<>
<section className='dashboard'>
<GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil'>
<GrossAnualChart title='' subtitle=''
dataset='Consolidada'
dataProps={grossAnualGraph}
label={grossAnualYears} barLabel bruta miniature/>
</GraphCard>
<GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil' singleBar>
<GrossMensalChart title='' subtitle=''
data1={grossMensalGraph}
data2={grossMensalGraph}
label={grossMensalGraph.map((value) => value.mes)}
miniature
/>
</GraphCard>
<GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil' singleBar>
<GrossMensalChart title='' subtitle=''
data1={grossMensalGraph}
data2={grossMensalGraph}
label={grossMensalGraph.map((value) => value.mes)}
miniature
/>
</GraphCard>
<GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' singleBar>
<CativoXLivreChart chartData={acumulatedGraph}
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado miniature/>
</GraphCard>
<GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' singleBar>
<CativoXLivreChart chartData={acumulatedGraph}
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado miniature/>
</GraphCard>
<GraphCard title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'>
<CostIndicatorChart 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={months}
miniature
/>
</GraphCard>
</section>
</>
}
<GraphCard title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'>
<CostIndicatorChart 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={months}
miniature
/>
</GraphCard>
</section>
</DashboardView>
)
}

170
src/pages/economy/index.tsx
View File

@ -37,6 +37,8 @@ import { ConsumoEstimado } from '../../services/consumoEstimado';
import CostIndicatorChart from '../../components/graph/costIndicatorChart';
import { EconomyView } from '../../styles/layouts/economy/economy';
import dynamic from 'next/dynamic';
export default function economy({userName, anual, years, brutaMensal, yearsBrutaMensal, catLiv, clients, indicatorCost}: any) {
const {economyMenu, setEconomyMenu} = useContext(MenuContext)
@ -74,20 +76,20 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
}, [unity])
useEffect(() => {
api.post('/economy/estimates', unity!==''?{
api.post('/economy/MWh', unity!==''?{
"filters": [
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity}
]
}:{}).then(res => {
setIndicatorDataState(res.data.data)
console.log()
console.log('res', res.data.data)
}).catch(res => {
// console.log(res)
})
}, [unity])
return (
<EconomyView style={{width: '100%'}}>
<EconomyView>
<Head>
<title>Smart Energia - PLD</title>
</Head>
@ -105,88 +107,94 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
</Tabs>
</TableHeader>
<RenderIf isTrue={economyMenu===0}>
<section>
<GrossAnualChart title='' subtitle=''
dataset='Consolidada'
{
typeof window === 'undefined' || typeof window === undefined? null :
<>
<RenderIf isTrue={economyMenu===0}>
<section>
<GrossAnualChart title='' subtitle=''
dataset='Consolidada'
dataProps={anual}
label={years} barLabel bruta
/>
</section>
</RenderIf>
dataProps={anual}
label={years} barLabel bruta
/>
</section>
</RenderIf>
<RenderIf isTrue={economyMenu===1}>
<GrossMensalChart title='' subtitle=''
data1={brutaMensal}
data2={brutaMensal}
label={yearsBrutaMensal}
/>
</RenderIf>
<RenderIf isTrue={economyMenu===1}>
<section>
<GrossMensalChart title='' subtitle=''
data1={brutaMensal}
data2={brutaMensal}
label={yearsBrutaMensal}
/>
</section>
</RenderIf>
<RenderIf isTrue={economyMenu===2}>
<div style={{paddingLeft: '7%'}}>
<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.cod_smart_unidade}>{value.unidade}</MenuItem>
})
}
</Select>
</FormControl>
</div>
<section>
<CativoXLivreChart chartData={unity!==''? catLivDataState : catLiv}
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado/>
</section>
</RenderIf>
<RenderIf isTrue={economyMenu===2}>
<div style={{paddingLeft: '7%'}}>
<FormControl sx={{ m: 1, minWidth: 120, width: 200, height: '64px' }} size="small">
<InputLabel id="demo-select-small">Unidade</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={unity}
label="Unidade"
sx={{height: '64px'}}
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.cod_smart_unidade}>{value.unidade}</MenuItem>
})
}
</Select>
</FormControl>
</div>
<section>
<CativoXLivreChart chartData={unity!==''? catLivDataState : catLiv}
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado/>
</section>
</RenderIf>
<RenderIf isTrue={economyMenu===3}>
<div style={{paddingLeft: '7%'}}>
<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}
sx={{height: '64px'}}
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.cod_smart_unidade}>{value.unidade}</MenuItem>
})
}
</Select>
</FormControl>
</div>
<section>
<CostIndicatorChart title='' subtitle=''
data1={indicatorDataState?.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
data2={indicatorDataState?.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
label={months}
/>
</section>
</RenderIf>
</>
}
<RenderIf isTrue={economyMenu===3}>
<div style={{paddingLeft: '7%'}}>
<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.cod_smart_unidade}>{value.unidade}</MenuItem>
})
}
</Select>
</FormControl>
</div>
<section>
<CostIndicatorChart title='' subtitle=''
data1={unity!=''? indicatorDataState?.filter((value, index) => value.mes.slice(4, 8).includes('2021'))
:
indicatorCost?.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
data2={unity!=''? indicatorDataState?.filter((value, index) => value.mes.slice(4, 8).includes('2022'))
:
indicatorCost?.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
label={months}
/>
</section>
</RenderIf>
</EconomyView>
)
}

3
src/pages/news/index.tsx
View File

@ -49,7 +49,8 @@ export default function aboutUs({userName, news}: any) {
<a href='https://www.energiasmart.com.br/noticias/'
target={"_blank"}
rel={"noreferrer"}><BasicButton title='Noticias Atualizadas' onClick={() => console.log()}/></a>
rel={"noreferrer"}>Ver Mais</a>
</NewsView>
</main>
)

828
src/pages/telemetria/index.tsx
View File

@ -197,7 +197,7 @@ export default function Telemetria({userName, clients}: any) {
}, [discretization])
return(
<TelemetriaView>
<main style={{width: '100%'}}>
<Head>
<title>Smart Energia - Telemetria</title>
</Head>
@ -245,443 +245,445 @@ export default function Telemetria({userName, clients}: any) {
<Header name={userName}>
<PageTitle title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia'/>
</Header>
{/* <Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
SCDE da Câmara de Comercialização de Energia Elétrica - CCEE,
sendo que as quantidades aqui informadas são de responsabilidade do agente de medição
- Distribuidora.' imgSource='/assets/graphical.png' /> */}
<TelemetriaView>
{/* <Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
SCDE da Câmara de Comercialização de Energia Elétrica - CCEE,
sendo que as quantidades aqui informadas são de responsabilidade do agente de medição
- Distribuidora.' imgSource='/assets/graphical.png' /> */}
<RenderIf isTrue={true}>
<TableHeader>
<Tabs value={menu} onChange={(e, nv) => setMenu(nv)} aria-label="">
<Tab label={
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
discretization==='15_min'? 'Consumo discretizado em 15 minutos' :
discretization==='1_hora'? 'Consumo discretizado em 1 hora' :
'Consumo discretizado em 1 dia'}/>
<Tab label="Demanda"/>
<Tab label="Fator Potencia"/>
<Tab label="Mês Atual"/>
</Tabs>
</TableHeader>
<RenderIf isTrue={true}>
<TableHeader>
<Tabs value={menu} onChange={(e, nv) => setMenu(nv)} aria-label="">
<Tab label={
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
discretization==='15_min'? 'Consumo discretizado em 15 minutos' :
discretization==='1_hora'? 'Consumo discretizado em 1 hora' :
'Consumo discretizado em 1 dia'}/>
<Tab label="Demanda"/>
<Tab label="Fator Potencia"/>
<Tab label="Mês Atual"/>
</Tabs>
</TableHeader>
<RenderIf isTrue={menu===0}>
<ChartFilters>
<div className='input'>
<FormControl style={{ minWidth: 100, width: 200}} size="small">
<InputLabel>Unidade</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</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.unidade}</MenuItem>
})
}
</Select>
</FormControl>
</div>
<div className='input'>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem>
</Select>
</FormControl>
</div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='datePicker'>
<DesktopDatePicker
label="Data inicial"
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params}/>}
/>
<RenderIf isTrue={menu===0}>
<ChartFilters>
<div className='input'>
<FormControl style={{ minWidth: 100, width: 200}} size="small">
<InputLabel>Unidade</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 2}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</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.unidade}</MenuItem>
})
}
</Select>
</FormControl>
</div>
<div className='datePicker' style={{marginRight: 10}}>
<DesktopDatePicker
label="Data final"
inputFormat="dd/MM/yyyy"
value={endDate}
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
:
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
<div className='input'>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 2}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
{/* <MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem> */}
</Select>
</FormControl>
</div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='datePicker'>
<DesktopDatePicker
label="Data inicial"
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
/>
</div>
<div className='datePicker' style={{marginRight: 10}}>
<DesktopDatePicker
label="Data final"
inputFormat="dd/MM/yyyy"
value={endDate}
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
:
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
:
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
:
new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
}
onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>}
/>
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
:
new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
}
onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
/>
</div>
</LocalizationProvider>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
getDiscretization(unity, startDate, endDate, discretization)
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception))
}}/>
</div>
</LocalizationProvider>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
getDiscretization(unity, startDate, endDate, discretization)
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception))
}}/>
</div>
</ChartFilters>
{/* <RenderIf isTrue={discretization!=='1_dia' && discretization!=='1_mes'}> */}
<DiscretizedConsumptionChart title={
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
} subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
{/* <p style={{alignSelf: 'center', textAlign: 'center'}}>{`Mês - ${startDate}`}</p> */}
{/* </RenderIf> */}
</RenderIf>
</ChartFilters>
{/* <RenderIf isTrue={discretization!=='1_dia' && discretization!=='1_mes'}> */}
<DiscretizedConsumptionChart title={
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
} subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
{/* <p style={{alignSelf: 'center', textAlign: 'center'}}>{`Mês - ${startDate}`}</p> */}
{/* </RenderIf> */}
</RenderIf>
<RenderIf isTrue={menu===1}>
<ChartFilters>
<div className='input'>
<FormControl sx={{ minWidth: 100, width: 200 }} size="small">
<InputLabel>Unidade</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</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.unidade}</MenuItem>
})
}
</Select>
</FormControl>
</div>
<div className='input'>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem>
</Select>
</FormControl>
</div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='datePicker'>
<DesktopDatePicker
label="Data inicial"
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params}/>}
/>
<RenderIf isTrue={menu===1}>
<ChartFilters>
<div className='input'>
<FormControl style={{ minWidth: 100, width: 200}} size="small">
<InputLabel>Unidade</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 2}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</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.unidade}</MenuItem>
})
}
</Select>
</FormControl>
</div>
<div className='datePicker' style={{marginRight: 10}}>
<DesktopDatePicker
label="Data final"
inputFormat="dd/MM/yyyy"
value={endDate}
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
:
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
<div className='input'>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 2}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem>
</Select>
</FormControl>
</div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='datePicker'>
<DesktopDatePicker
label="Data inicial"
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
/>
</div>
<div className='datePicker' style={{marginRight: 10}}>
<DesktopDatePicker
label="Data final"
inputFormat="dd/MM/yyyy"
value={endDate}
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
:
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
:
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
:
new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
}
onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>}
/>
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
:
new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
}
onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
/>
</div>
</LocalizationProvider>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
getDemand(unity, startDate, endDate, discretization)
.then(result => setDemRegXDemCon(result))
.catch(exception => console.log(exception))
}}/>
</div>
</LocalizationProvider>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
getDiscretization(unity, startDate, endDate, discretization)
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception))
}}/>
</div>
</ChartFilters>
<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/>
</RenderIf>
</ChartFilters>
<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/>
</RenderIf>
<RenderIf isTrue={menu===2}>
<ChartFilters>
<div className='input'>
<FormControl sx={{ minWidth: 100, width: 200 }} size="small">
<InputLabel>Unidade</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</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.unidade}</MenuItem>
})
}
</Select>
</FormControl>
</div>
<div className='input'>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem>
</Select>
</FormControl>
</div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='datePicker'>
<DesktopDatePicker
label="Data inicial"
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params}/>}
/>
<RenderIf isTrue={menu===2}>
<ChartFilters>
<div className='input'>
<FormControl style={{ minWidth: 100, width: 200}} size="small">
<InputLabel>Unidade</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 2}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</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.unidade}</MenuItem>
})
}
</Select>
</FormControl>
</div>
<div className='datePicker' style={{marginRight: 10}}>
<DesktopDatePicker
label="Data final"
inputFormat="dd/MM/yyyy"
value={endDate}
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
:
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
<div className='input'>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 2}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem>
</Select>
</FormControl>
</div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='datePicker'>
<DesktopDatePicker
label="Data inicial"
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
/>
</div>
<div className='datePicker' style={{marginRight: 10}}>
<DesktopDatePicker
label="Data final"
inputFormat="dd/MM/yyyy"
value={endDate}
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
:
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
:
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
:
new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
}
onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>}
/>
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
:
new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
}
onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
/>
</div>
</LocalizationProvider>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
getPowerFactorData(unity, startDate, endDate, discretization)
.then(result => setFatorPotenciaData(result))
.catch(exception => console.log(exception))
}}/>
</div>
</LocalizationProvider>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
getDiscretization(unity, startDate, endDate, discretization)
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception))
}}/>
</div>
</ChartFilters>
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => parseFloat(value.dia_num))} />
</ChartFilters>
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => parseFloat(value.dia_num))} />
</RenderIf>
<RenderIf isTrue={menu===3}>
<ChartFilters>
<div className='input'>
<FormControl sx={{ minWidth: 100, width: 200 }} size="small">
<InputLabel>Unidade</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</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.unidade}</MenuItem>
})
}
</Select>
</FormControl>
</div>
<div className='input'>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem>
</Select>
</FormControl>
</div>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
getDemand(unity, startDate, endDate, discretization)
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception))
}}/>
</div>
</ChartFilters>
<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/>
</RenderIf>
</RenderIf>
<RenderIf isTrue={menu===3}>
<ChartFilters>
<div className='input'>
<FormControl sx={{ minWidth: 100, width: 200 }} size="small">
<InputLabel>Unidade</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</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.unidade}</MenuItem>
})
}
</Select>
</FormControl>
<RenderIf isTrue={startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && tableData===null && exception === false && send}>
<div className='modal'>
<div id="preloader_1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div className='input'>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem>
</Select>
</FormControl>
</div>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
getDiscretization(unity, startDate, endDate, discretization)
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception))
}}/>
</div>
</ChartFilters>
<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/>
</RenderIf>
</RenderIf>
<RenderIf isTrue={startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && tableData===null && exception === false && send}>
<div className='modal'>
<div id="preloader_1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</RenderIf>
<RenderIf isTrue={startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && tableData!==null}>
<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>
{
tableData!==null?
tableData?.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>
</tr>
</>
})
:
null
</RenderIf>
<RenderIf isTrue={startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && tableData!==null}>
<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>
{
tableData!==null?
tableData?.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>
</tr>
</>
})
:
null
}
</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/>
</RenderIf>
<Buttons>
{/* <GradientButton title='DADOS' description='CLIQUE AQUI PARA GERAR GRÁFICO DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} purple /> */}
{/* <GradientButton title='GRÁFICO' description='CLIQUE AQUI PARA GERAR GRÁFICO DO PERÍODO SELECIONADO' onClick={() => handleVerifyFields()} orange /> */}
<GradientButton title='DOWNLOADS' description={`CLIQUE AQUI PARA BAIXAR OS DADOS EM FORMATO EXCEL DO PERÍODO SELECIONADO`} green onClick={() => {
if (send) {
const html = document.querySelector("table").outerHTML;
htmlToCSV(html, "telemetria.csv");
}
</tbody>
</table>
</RenderIf>
else {
setSend(true)
getTableData()
}
}}/>
</Buttons>
<p className='paragraph'>
<i>
Fonte: Dados coletados do Sistema de Coleta de Dados
de Energia - SCDE da Câmara de Comercialização <br/>
Energia Elétrica – CCEE, sendo que as quantidades aqui
informadas são de responsabilidade <br/>do agente de
medição - Distribuidora.
</i>
</p>
<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/>
</RenderIf>
<Buttons>
{/* <GradientButton title='DADOS' description='CLIQUE AQUI PARA GERAR GRÁFICO DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} purple /> */}
{/* <GradientButton title='GRÁFICO' description='CLIQUE AQUI PARA GERAR GRÁFICO DO PERÍODO SELECIONADO' onClick={() => handleVerifyFields()} orange /> */}
<GradientButton title='DOWNLOADS' description={`CLIQUE AQUI PARA BAIXAR OS DADOS EM FORMATO EXCEL DO PERÍODO SELECIONADO`} green onClick={() => {
if (send) {
const html = document.querySelector("table").outerHTML;
htmlToCSV(html, "telemetria.csv");
}
else {
setSend(true)
getTableData()
}
}}/>
</Buttons>
<p className='paragraph'>
<i>
Fonte: Dados coletados do Sistema de Coleta de Dados
de Energia - SCDE da Câmara de Comercialização <br/>
Energia Elétrica – CCEE, sendo que as quantidades aqui
informadas são de responsabilidade <br/>do agente de
medição - Distribuidora.
</i>
</p>
</TelemetriaView>
</TelemetriaView>
</main>
)
}

1
src/services/charts/telemetry/getDemand.ts
View File

@ -10,6 +10,7 @@ export async function getDemand(
) {
const { '@smartAuth-token': token } = parseCookies()
const { data } = await api.post('https://smart-energia-api.herokuapp.com/api/telemetry/demand', {
"type": discretization,
"filters": [
{"type" : "=", "field": `med_5min.ponto`, "value": unity},
{"type" : "between", "field": "dia_num", "value": [startDate.toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString().split('/').reverse().join('-')]}

1
src/services/charts/telemetry/getPowerFactor.ts
View File

@ -9,6 +9,7 @@ export async function getPowerFactorData(
discretization: string
) {
const { data } = await api.post('http://smart-energia-api.herokuapp.com/api/telemetry/powerFactor', {
"type": discretization,
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": unity},
{"type" : "between", "field": "dia_num", "value": [startDate.toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString().split('/').reverse().join('-')]}

2
src/styles/globals.ts
View File

@ -44,7 +44,7 @@ export const GlobalStyle = createGlobalStyle`
.MuiOutlinedInput-input, .MuiInputBase-input, .MuiInputBase-inputAdornedEnd, .css-nxo287-MuiInputBase-input-MuiOutlinedInput-input {
padding: 0 0 0 15px;
width: 100%;
height: 63px!important;
height: 63px;
}
.css-1u3bzj6-MuiFormControl-root-MuiTextField-root,
.css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root,

18
src/styles/layouts/Telemetria/TelemetriaView.ts
View File

@ -7,7 +7,7 @@ export const TelemetriaView = styled.main`
flex-direction: column;
padding: 20px;
padding: 0;
width: 100%;
.modal {
@ -95,14 +95,12 @@ export const TelemetriaView = styled.main`
table {
display: none;
}
.tg{
border-collapse:collapse;
border-spacing:0;
font-family:Poppins;
width: 100%;
}
.tg td{
border-color:#DDDFE1;
border-style:solid;
@ -113,7 +111,6 @@ export const TelemetriaView = styled.main`
padding:17px 30px;
word-break:normal;
}
.tg th{
border-color:#DDDFE1;
border-style:solid;
@ -158,7 +155,6 @@ export const TelemetriaView = styled.main`
text-align:center;
vertical-align:top
}
.tg .tg-baqh{
text-align:center;
vertical-align:top
@ -173,6 +169,10 @@ export const TelemetriaView = styled.main`
vertical-align:top
}
canvas {
align-self: center;
}
input {
width: 15rem;
@ -383,13 +383,15 @@ export const TableHeader = styled.div`
flex-direction: row;
padding: 0 40px 0 40px
/* padding: 0 40px 0 40px */
`
export const ChartFilters = styled.section`
display: flex;
align-items: center;
justify-content: center!important;
align-items: flex-start;
justify-content: flex-start!important;
margin-left: 72px;
align-self: flex-start;

19
src/styles/layouts/economy/economy.ts
View File

@ -1,9 +1,28 @@
import styled from 'styled-components'
export const EconomyView = styled.main`
width: 100%;
.MuiInputLabel-root, .MuiInputLabel-formControl {
margin-top: 11px;
}
section {
display: flex;
justify-content: center;
align-items: center;
}
input {
width: 16.6rem;
height: 63px!important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
border-radius: 6px;
border: solid gray 1px;
background-color: #F9F9F9;
}
`

35
src/styles/layouts/news/NewsView.ts
View File

@ -1,6 +1,12 @@
import styled from "styled-components";
export const NewsView = styled.main`
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
margin-bottom: 100px;
@ -71,6 +77,35 @@ export const NewsView = styled.main`
}
}
}
a {
display: flex;
justify-content: center;
align-items: center;
margin-top: 1px;
width: 140px;
height: 45px;
cursor: pointer;
background: #dadada;
border-radius: 8px;
border-style: none;
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: #000;
}
`;
export const Button = styled.div`