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

add preliminares updates

Browse Source
This commit is contained in:
joseCorte-exe 2022-05-24 10:09:26 -03:00
parent bbf0080761
commit a5a37efa0d
22 changed files with 359 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/headerName.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

3
public/assets/sidebar/aboutUs.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="white" stroke='gray'>
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 372 B

2
src/components/banner/BannerView.ts
View File

@ -9,6 +9,8 @@ export const BannerView = styled.div`
width: 100%;
height: 20%;
margin-bottom: 30px;
.gradient {
position: absolute;
width: 100%;

10
src/components/buttons/gradientButton/GradientButton.tsx
View File

@ -11,12 +11,18 @@ interface GradientButtonInterface {
purple?: undefined | null | boolean,
green?: undefined | null | boolean,
link?: any,
onClick?: () => void
}
export default function GradientButton({ title, description, orange, purple, green, link }: GradientButtonInterface) {
export default function GradientButton({ title, description, orange, purple, green, link, onClick }: GradientButtonInterface) {
const router = useRouter()
function handleClick() {
onClick()
}
return (
<GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange' } onClick={() => link? router.push('/chartTelemetry') : null} >
<GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange' } onClick={() => link? router.push('/chartTelemetry') : handleClick()} >
<p>{title}</p>
<p>{description}</p>
</GradientButtonView>

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

@ -43,6 +43,30 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
const labels = label;
const empty = []
const options: any = {
responsive: true,
plugins: {
datalabels: {
display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
formatter: Math.round,
anchor: "end",
offset: -20,
align: "start",
font: {
size: 16
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
text: '',
},
},
};
const data = {
labels,
datasets: [
@ -60,28 +84,6 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
],
}
const options: any = {
responsive: true,
plugins: {
datalabels: {
display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
formatter: Math.round,
anchor: "end",
offset: -20,
align: "start"
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
text: '',
},
},
};
return (
<ChartView>
{/* <RenderIf isTrue={single? true : false} >

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

@ -13,7 +13,7 @@ import { Chart } from 'react-chartjs-2';
import faker from 'faker';
import { ChartView } from './ChartView';
import ChartTitle from './ChartTitle';
import { draw } from 'patternomaly'
import pattern from 'patternomaly'
ChartJS.register(
LinearScale,
@ -87,10 +87,14 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
datalabels: {
display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
// backgroundColor: '#255488',
formatter: Math.round,
anchor: "end",
offset: -20,
align: "start"
align: "start",
font: {
size: 16
}
},
legend: {
position: 'bottom' as const,
@ -110,6 +114,9 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
label: dataset1? dataset1 : 'Dataset 1',
borderColor: red?
'#f00' : '#0c9200',
datalabels: {
backgroundColor: 'white'
},
borderWidth: 2,
fill: false,
data: data1.map(value => value),
@ -118,7 +125,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
type: 'bar' as const,
label: dataset2? dataset2 : 'Dataset 2',
backgroundColor: (value, ctx) => {
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#C2D5FB' : '#C2D5FB' : '#C2D5FB'
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
},
data: data3.map(value => value),
},
@ -127,7 +134,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
label: dataset3? dataset3 : 'Dataset 2',
// backgroundColor: '#255488',
backgroundColor: (value, ctx) => {
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#255488' : '#255488' : '#255488'
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
},
data: data2.map(value => value),
},

5
src/components/graph/LineChart.tsx
View File

@ -53,7 +53,10 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
formatter: Math.round,
anchor: "end",
offset: -20,
align: "start"
align: "start",
font: {
size: 16
}
},
legend: {
position: 'bottom' as const,

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

@ -12,7 +12,7 @@ import { Bar } from 'react-chartjs-2';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { ChartView } from './ChartView';
import ChartTitle from './ChartTitle';
import { draw } from 'patternomaly'
import { draw, generate } from 'patternomaly'
ChartJS.register(
CategoryScale,
@ -32,16 +32,20 @@ interface SingleBarInterface{
dataset: string,
barLabel?: boolean | undefined,
year?: boolean | undefined,
day?: boolean | undefined,
month?: boolean | undefined,
dataset1?: string,
}
export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1, barLabel, year, day }: SingleBarInterface) {
export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1, barLabel, year, month }: SingleBarInterface) {
const currentTime = new Date();
const options: object = {
responsive: true,
series: {
downsample: {
threshold: 1000
}
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
@ -50,15 +54,21 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
dataArr.map(data => {
sum += data;
});
const percentage = (value*100 / sum).toFixed(2)+"%";
const percentage = (value*100 / sum).toFixed(0)+"%";
const result = `${value}\n ${percentage}`
return result;
console.log(value)
return value==null? null : result
},
display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
anchor: "end",
offset: -35,
align: "start"
offset: -40,
align: "start",
font: {
size: 16
}
},
legend: {
position: 'bottom' as const,
@ -77,22 +87,27 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
datasets: [
{
label: dataset,
data: dataProps.map(value => value),
data: dataProps.map((value, index) => {
return year? label[index]<=currentTime.getFullYear().toString()? value : null : month? label.indexOf(label[index])>currentTime.getMonth()? null : value : null
}),
backgroundColor: (value, ctx) => {
return year? label[value.dataIndex]<=currentTime.getFullYear().toString()? '#255488' : '#C2D5FB' : day? parseInt(label[value.dataIndex])<=currentTime.getDay()? '#255488' : '#C2D5FB' : null
return year? label[value.dataIndex]<=currentTime.getFullYear().toString()? '#255488' : 'transparent' : month? label.indexOf(label[value.dataIndex])<=currentTime.getMonth()? '#255488' : 'transparent' : null// parseInt(label[value.dataIndex])<=currentTime.getMonth()? '#255488' : draw('diagonal', '#C2D5FB') : null
},
},
{
label: dataset1,
backgroundColor: '#C2D5FB'
data: dataProps.map((value, index) => {
return year? label[index]>=currentTime.getFullYear().toString()? value : null : month? label.indexOf(label[index])<=currentTime.getMonth()? null : value : null
}),
backgroundColor: typeof window !== 'undefined'? draw('diagonal', '#C2D5FB') : null
}
],
};
}
return (
<ChartView>
<ChartTitle title={title} subtitle={subtitle} />
<Bar options={options} data={data} />
{/* <Bar options={options} data={data} /> */}
</ChartView>
)
}

10
src/components/mapCard/MapCard.tsx
View File

@ -7,9 +7,10 @@ interface MapCardInterface {
subtitle: string,
statistic?: string,
imgSource: string,
date?: string
}
export default function MapCard({ title, subtitle, statistic, imgSource }: MapCardInterface) {
export default function MapCard({ title, subtitle, statistic, imgSource, date }: MapCardInterface) {
const route = title==='R$/MWh'? '/consumption': `pld/${title.slice(0,2).toLocaleLowerCase()}-${title.slice(3,5).toLocaleLowerCase()}`
return (
@ -17,7 +18,12 @@ export default function MapCard({ title, subtitle, statistic, imgSource }: MapCa
<Image src={imgSource} width={90} height={90}/>
<div>
<h4>{title}</h4>
<span>{subtitle}</span>
<span className='footer' >{subtitle}</span>
{
date?
<span>{date}</span> :
null
}
<article>
{
statistic?

3
src/components/mapCard/MapCardView.ts
View File

@ -16,7 +16,7 @@ export const MapCardView = styled.figure<MapCardViewInterface>`
h4 {
margin-left: ${props => props.statistic? '0' : '10px'};
}
span {
.footer {
margin-left: ${props => props.statistic? '0' : '10px'};
margin-bottom: ${props => props.statistic? '25px' : '0px'};
margin-top: ${props => props.statistic? '0px' : '30px'};
@ -28,6 +28,7 @@ export const MapCardView = styled.figure<MapCardViewInterface>`
}
span {
margin-left: ${props => props.statistic? '0' : '10px'};
}
div {

4
src/components/sidebar/Sidebar.tsx
View File

@ -38,8 +38,8 @@ export default function Sidebar() {
<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='/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 >'}</li></Link>
<Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Sobre Nós >'}</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'><p>25</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='/'><button><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button></Link>
</ul>

14
src/components/sidebar/SidebarView.ts
View File

@ -33,6 +33,20 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
color: #254F7F;
}
.notification {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 32px;
border-radius: 8px;
background-color: #254F7F;
color: white;
}
ul {
display: flex;
justify-content: center;

3
src/pages/accumulatedSavings.tsx
View File

@ -6,6 +6,7 @@ import { SingleBar } from '../components/graph/SingleBar'
import Header from '../components/header/Header'
import PageTitle from '../components/pageTitle/PageTitle'
import { EconomiaAcumulada } from '../services/economiaAcumulada'
import { dataEconomiaBruta } from '../services/economiaBruta'
import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView'
@ -18,7 +19,7 @@ export default function AccumulatedSavings() {
<Header name='' />
<PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
<section>
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada' dataset1='Estimada' label={EconomiaAcumulada.label1} dataProps={EconomiaAcumulada.data2} barLabel day/>
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada' dataset1='Estimada' label={EconomiaAcumulada.label} dataProps={EconomiaAcumulada.data2} barLabel month/>
</section>
</AccumulatedSavingsView>
)

86
src/pages/chartTelemetry.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'
import React, { useState } from 'react'
import { SingleBar } from '../components/graph/SingleBar'
import { ChatTelemetryView } from '../styles/layouts/ChatTelemetry/ChatTelemetryView'
import { useRouter } from 'next/router'
@ -12,7 +12,36 @@ import Header from '../components/header/Header'
import PageTitle from '../components/pageTitle/PageTitle'
import Head from 'next/head'
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';
const style = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute' as const,
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '80%',
bgcolor: 'white',
p: 5,
};
export default function chartTelemetry() {
const [openFatorPotencia, setOpenFatorPotencia] = useState(false);
const handleCloseFatorPotencia = () => setOpenFatorPotencia(false);
const [openConsumoDiscretizado1, setOpenConsumoDiscretizado1] = useState(false);
const handleCloseConsumoDiscretizado1 = () => setOpenConsumoDiscretizado1(false);
const [openConsumoDiscretizado2, setOpenConsumoDiscretizado2] = useState(false);
const handleCloseConsumoDiscretizado2 = () => setOpenConsumoDiscretizado2(false);
const [openDemandaContratada, setOpenDemandaContratada] = useState(false);
const handleCloseDemandaContratada = () => setOpenDemandaContratada(false);
return (
<ChatTelemetryView>
@ -22,10 +51,61 @@ export default function chartTelemetry() {
<Header name='' />
<PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
<section className='chartContainer'>
<div onClick={() => setOpenFatorPotencia(true)}>
<LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data2} dataset1='Fator de Potencia' dataset2='Fator ref.' label={FatorPotencia.label1} />
</div>
<Modal
open={openFatorPotencia}
onClose={handleCloseFatorPotencia}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data4} data3={[]} data4={[]} dataset1='Fator de Potencia' label={FatorPotencia.label1} />
<LineChart title='Consumo decretizado em 1 hora' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} dataset1='Demanda registrada' label={ConsumoDecretizadoLine.label1} />
<SingleBar title='Consumo decretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'} dataset1='Estimado' day/>
</Box>
</Modal>
<div onClick={() => setOpenConsumoDiscretizado1(true)}>
<LineChart title='Consumo discretizado em 1 hora' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} dataset1='Demanda registrada' label={ConsumoDecretizadoLine.label1} />
</div>
<Modal
open={openConsumoDiscretizado1}
onClose={handleCloseConsumoDiscretizado1}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<LineChart title='Consumo discretizado em 1 hora' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} dataset1='Demanda registrada' label={ConsumoDecretizadoLine.label1} />
</Box>
</Modal>
<div onClick={() => setOpenConsumoDiscretizado2(true)}>
<SingleBar title='Consumo discretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'} dataset1='Estimado' month/>
</div>
<Modal
open={openConsumoDiscretizado2}
onClose={handleCloseConsumoDiscretizado2}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<SingleBar title='Consumo discretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'} dataset1='Estimado' month/>
</Box>
</Modal>
<div onClick={() => setOpenDemandaContratada(true)}>
<LineBarChart data1={ConsumoDecretizadoLine.data1} data3={ConsumoDecretizadoLine.data} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={ConsumoDecretizadoLine.label1} title='Demanda Contratada X Registrada' subtitle='' red/>
</div>
<Modal
open={openDemandaContratada}
onClose={handleCloseDemandaContratada}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<LineBarChart data1={ConsumoDecretizadoLine.data1} data3={ConsumoDecretizadoLine.data} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'2021'} label={ConsumoDecretizadoLine.label1} title='Demanda Contratada X Registrada' subtitle='' red/>
</Box>
</Modal>
</section>
</ChatTelemetryView>
)

7
src/pages/dashboard.tsx
View File

@ -30,7 +30,7 @@ export default function Dashboard() {
<PageTitle title='Visão Geral' subtitle='Bem Vindo a Smart Energia' />
<Link href={'pld'}>
<section className="cardsSection" >
<MapCard title='R$/MWh' subtitle='abril / 22' statistic='' imgSource='/moneyIcon.svg' />
<MapCard title='R$/MWh' subtitle='abril / 22' date='até 10/10' statistic='' imgSource='/moneyIcon.svg' />
<MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
<MapCard title='S' subtitle='Sul' statistic='R$ 273,54' imgSource='/SUL.svg' />
<MapCard title='NE' subtitle='Nordeste' statistic='R$ 273,54' imgSource='/nordeste.svg' />
@ -42,8 +42,8 @@ export default function Dashboard() {
<GraphCard title='Consumo' subtitle='Gráfico de Consumo'>
<SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataset1='Estimada' dataProps={dataEconomiaBruta.data} barLabel year/>
</GraphCard>
<GraphCard title='Economia Acumulado' subtitle='Economia Acumulado' singleBar>
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$)' dataset='Acumulada' dataset1='Estimado' label={EconomiaAcumulada.label1} dataProps={EconomiaAcumulada.data2} barLabel day/>
<GraphCard title='Economia Acumulado' subtitle='Economia Acumulada' singleBar>
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$)' dataset='Acumulada' dataset1='Estimado' label={EconomiaAcumulada.label} dataProps={EconomiaAcumulada.data2} barLabel month/>
</GraphCard>
<GraphCard title='Custos Estimados' subtitle='Custos Estimados em R$/MWh' singleBar>
<LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre' title='Custo Estimado' subtitle='(Valores em R$/MWh)' barLabel hashurado/>
@ -51,7 +51,6 @@ export default function Dashboard() {
<GraphCard title='Indicador de Custo' subtitle='Valores em R$/ MWh'>
<Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} barLabel/>
</GraphCard>
</section>
</DashboardView>

4
src/pages/pld/index.tsx
View File

@ -186,10 +186,10 @@ export default function region() {
</table>
<section>
<article onClick={() => setPage('perMouth')}>
<p>Valores Diarios: R$100,00</p>
<p>Valores Diarios</p>
</article>
<article onClick={() => setPage('perDate')}>
<p>Valores Horários: R$100,00</p>
<p>Valores Horários</p>
</article>
</section>
</PldTableView>

119
src/pages/telemetria.tsx
View File

@ -6,21 +6,29 @@ import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaV
import GradientButton from '../components/buttons/gradientButton/GradientButton'
import Header from '../components/header/Header';
import MenuItem from '@mui/material/MenuItem';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import Link from 'next/link';
import Head from 'next/head';
import { start } from 'nprogress';
import LineChart from '../components/graph/LineChart';
import { FatorPotencia } from '../services/fatorPotencia';
import RenderIf from '../utils/renderIf';
export default function Telemetria() {
const router = useRouter()
const [unity, setUnity] = React.useState('');
const [startDate, setStartDate] = React.useState('');
const [endDate, setEndDate] = React.useState('');
const [discretization, setDiscretization] = React.useState('');
const [age, setAge] = React.useState('');
const [showChart, setShowChart] = React.useState(false);
const handleChange = (event: SelectChangeEvent) => {
setAge(event.target.value);
// setAge(event.target.value);
};
return(
@ -34,80 +42,108 @@ export default function Telemetria() {
sendo que as quantidades aqui informadas são de responsabilidade do agente de medição
- Distribuidora.' imgSource='/assets/graphical.png' />
<FormControl size="small" sx={{ width: 300, mt:10 , pl:7 }} style={{}}>
<section>
<div className='select'>
<p className='title' >Unidade</p>
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
<InputLabel id="demo-select-small">Unidade</InputLabel>
<Select
value={age}
onChange={handleChange}
displayEmpty
labelId="demo-select-small"
id="demo-select-small"
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
fullWidth
>
<MenuItem value="">
<span className='titleMenuItem'>Filial 3</span>
</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
<FormControl size="small" sx={{ width: 300, mt:10 , pl:7}} >
<p className='title'>Data Inicial</p>
<Select
value={age}
onChange={handleChange}
displayEmpty
>
<MenuItem value="">
<span className='titleMenuItem'>07/09/2021</span>
<em>None</em>
</MenuItem>
<MenuItem value="">07/09/2021</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
<FormControl size="small" sx={{ width: 300, mt:10 , pl:7, }} >
<div className='select'>
<p className='title' >Data inicial</p>
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
<InputLabel id="demo-select-small">Data Inicial</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={startDate}
label="Unidade"
onChange={value => setStartDate(value.target.value)}
fullWidth
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value="">07/09/2021</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
<div className='select'>
<p className='title' >Data Final</p>
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
<InputLabel id="demo-select-small">Data Final</InputLabel>
<Select
value={age}
onChange={handleChange}
displayEmpty
inputProps={{ 'aria-label': 'Without label' }}
labelId="demo-select-small"
id="demo-select-small"
value={endDate}
label="Unidade"
onChange={value => setEndDate(value.target.value)}
fullWidth
>
<MenuItem value="">
<span className='titleMenuItem'>30/06/2000</span>
<em>None</em>
</MenuItem>
<MenuItem value="">07/09/2021</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
<FormControl size="small" sx={{ width: 280, mt:10 , pl:5, ml: 2}} >
<div className='select'>
<p className='title' >Discretização</p>
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
<InputLabel id="demo-select-small">Discretização</InputLabel>
<Select
value={age}
onChange={handleChange}
displayEmpty
inputProps={{ 'aria-label': 'Without label' }}
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Unidade"
onChange={value => setDiscretization(value.target.value)}
fullWidth
>
<MenuItem value="">
<span className='titleMenuItem'>60 min</span>
<em>None</em>
</MenuItem>
<MenuItem value="">07/09/2021</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
</section>
<RenderIf isTrue={showChart}>
<LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data2} dataset1='Fator de Potencia' dataset2='Fator ref.' label={FatorPotencia.label1} />
</RenderIf>
<Buttons>
<GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange link />
<GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple />
<GradientButton title='DADOS' description='hORÁRIOS DO MÊS ATUAL' green />
<GradientButton title='DADOS' description='hORÁRIOS DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} green />
</Buttons>
<p className='paragraph'>
<i>
@ -118,7 +154,6 @@ export default function Telemetria() {
medição - Distribuidora.
</i>
</p>
</TelemetriaView>
)
}

26
src/services/DadosTabelaResumoOperacao.js
View File

@ -1,16 +1,10 @@
{}
unidades: {
unidade1: { name: 'Unidade-2555', operacao: 'Compra', montante: '130,00', contraparte: 'cOPEL COM I5', preco: '234,67', valorNF: '38.257,15' },
unidade2: { name: 'Unidade-2', operacao: 'Compra', montante: '20,00', contraparte: 'EMEWE I5', preco: '234,67', valorNF: '38.257,15' },
unidade3: { name: 'Unidade-3', operacao: 'Compra', montante: '30,00', contraparte: 'EMEWE I5', preco: '234,67', valorNF: '38.257,15' },
unidade4: { name: 'Unidade-4', operacao: 'Compra', montante: '40,00', contraparte: 'COPEL COM I5', preco: '234,67', valorNF: '38.257,15' },
unidade5: { name: 'Unidade-5', operacao: 'Compra', montante: '500,00',contraparte: 'COPEL COM I5', preco: '234,67', valorNF: '38.257,15' },
unidade6: { name: 'Unidade-6', operacao: 'Compra', montante: '300,00', contraparte: 'COPEL COM I5', preco: '234,67', valorNF: '.965,95' }
},
]
// {
// "unidades": [
// { "value": "unidade1", "name": "Unidade-1", "operacao": "Compra", "montante": "130,00", "contraparte": "cOPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" },
// { "value": "unidade2", "name": "Unidade-2", "operacao": "Compra", "montante": "20,00", "contraparte": "EMEWE I5", "preco": "234,67", "valorNF": "38.257,15"},
// { "value": "unidade3", "name": "Unidade-3", "operacao": "Compra", "montante": "30,00", "contraparte": "EMEWE I5", "preco": "234,67", "valorNF": "38.257,15" },
// { "value": "unidade4", "name": "Unidade-4", "operacao": "Compra", "montante": "40,00", "contraparte": "COPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" },
// { "value": "unidade5", "name": "Unidade-5", "operacao": "Compra", "montante": "500,00","contraparte": "COPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" },
// { "value": "unidade6", "name": "Unidade-6", "operacao": "Compra", "montante": "300,00", "contraparte": "COPEL COM I5", "preco":"234,67", "valorNF": "965,95" }
// ]
// }

2
src/services/economiaAcumulada.js
View File

@ -1,7 +1,7 @@
export const EconomiaAcumulada = {
data : [872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294],
data1 : [1445, 1615],
data2 : [872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872, 903, 938, 985, 1021, 1055],
data2 : [872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872],
data3: [9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
data4: [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, 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],

6
src/services/economiaBruta.json Normal file
View File

@ -0,0 +1,6 @@
{
"consolidada": [],
"2020": [],
"2021": [],
"labels": [2020, 2021, 2022, 2023, 2024, 2025, 2026]
}

3
src/services/fatorPotencia.js
View File

@ -1,7 +1,8 @@
export const FatorPotencia = {
data : [1.00, 1.00, 1.00, -0.96, -0.96, 0.97, 0.98, 0.95, 0.94, 0.98, 0.95, 0.95, 0.98, 1.01, 1.05, 1.00, 1.00, 0.95, 0.97, 0.97, 0.97, 0.97, 0.97, 0.97, 0.98, 1.00, 0.97, 0.97, 0.97, 0.97, 0.97, 0.96, 0.95, 0.94, 0.95, 0.95,],
data4 : [90, 90, 90, 90, 90, 90, 90, 90, 90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90, 90, 90],
data1 : [90, 90, 90, 90, 90, 90, 90, 90, 90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90, 90, 90],
data2 : [.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98],
label1: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22'],
}

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

@ -10,6 +10,8 @@ export const TelemetriaView = styled.main`
color: black;
font-weight: 600;
font-size: 14px;
margin: 0 0 0 10px;
}
span{
@ -33,6 +35,22 @@ export const TelemetriaView = styled.main`
text-align: center;
margin-top: 60px;
}
section {
display: flex;
justify-content: center;
align-items: center;
.select {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
/* margin-top: 10px; */
}
}
`;
export const Buttons = styled.div`