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

add telemtry charts

Browse Source
This commit is contained in:
joseCorte-exe 2022-05-17 15:58:40 -03:00
parent ee47f0fd3d
commit 45e8d3ec8e
8 changed files with 96 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,22 @@
import { Router } from 'next/router'
import React from 'react'
import { GradientButtonView } from './GradientButtonView'
import { useRouter } from 'next/router'
interface GradientButtonInterface {
title: string,
description: string
orange?: undefined | null | boolean,
purple?: undefined | null | boolean,
green?: undefined | null | boolean
green?: undefined | null | boolean,
link?: any,
}
export default function GradientButton({ title, description, orange, purple, green }: GradientButtonInterface) {
export default function GradientButton({ title, description, orange, purple, green, link }: GradientButtonInterface) {
const router = useRouter()
return (
<GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange' } >
<GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange' } onClick={() => link? router.push('/chartTelemetry') : null} >
<p>{title}</p>
<p>{description}</p>
</GradientButtonView>

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

@ -63,10 +63,11 @@ interface LineBarChartInterface {
data1: any,
data2: any,
data3: any,
red: any
label: any
}
export function LineBarChart({ title, subtitle, data1, data2, data3, label }: LineBarChartInterface) {
export function LineBarChart({ title, subtitle, data1, data2, data3, label, red }: LineBarChartInterface) {
const chartRef = useRef<ChartJS>(null);
const labels = label
@ -77,11 +78,19 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label }: Li
{
type: 'line' as const,
label: 'Dataset 1',
borderColor: '#0c9200',
borderColor: red? '#f00' : '#0c9200',
borderWidth: 2,
fill: false,
data: data1.map(value => value),
},
// {
// type: 'line' as const,
// label: 'Dataset 1',
// borderColor: '#f00',
// borderWidth: 2,
// fill: false,
// data: data4.map(value => value),
// },
{
type: 'bar' as const,
label: 'Dataset 2',

23
src/pages/chartTelemetry.tsx
View File

@ -1,7 +1,28 @@
import React from 'react'
import { SingleBar } from '../components/graph/SingleBar'
import { ChatTelemetryView } from '../styles/layouts/ChatTelemetry/ChatTelemetryView'
import { useRouter } from 'next/router'
import { FatorPotencia } from '../services/fatorPotencia'
import { ConsumoDecretizadoBar } from '../services/consumoDiscretizadoBar'
import { ConsumoDecretizadoLine } from '../services/consumoDiscretizadoLine'
import LineChart from '../components/graph/LineChart'
import { LineBarChart } from '../components/graph/LineBarChart'
import Header from '../components/header/Header'
import PageTitle from '../components/pageTitle/PageTitle'
export default function chartTelemetry() {
return (
<div>chartTelemetry</div>
<ChatTelemetryView>
<Header name='' />
<PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
<section>
<LineChart title='fator potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data4} data3={[]} data4={[]} label={FatorPotencia.label1} />
<LineChart title='fator potencia' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} label={ConsumoDecretizadoLine.label1} />
<SingleBar title='Consumo decretizado' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} />
<LineBarChart data1={ConsumoDecretizadoLine.data1} data2={ConsumoDecretizadoLine.data} data3={[]} label={ConsumoDecretizadoLine.label1} title='evolução pld' subtitle='' red/>
</section>
</ChatTelemetryView>
)
}

12
src/pages/telemetria.tsx
View File

@ -1,4 +1,6 @@
import React from 'react';
import { useRouter } from 'next/router'
import Banner from '../components/banner/Banner';
import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
import GradientButton from '../components/buttons/gradientButton/GradientButton'
@ -6,11 +8,13 @@ import Header from '../components/header/Header';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import Link from 'next/link';
export default function Telemetria() {
const router = useRouter()
const [age, setAge] = React.useState('');
@ -18,8 +22,6 @@ export default function Telemetria() {
setAge(event.target.value);
};
return(
<TelemetriaView>
@ -100,9 +102,9 @@ export default function Telemetria() {
</FormControl>
<Buttons>
<GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange />
<GradientButton title='DOWNLOADS' description='Gerar gráficos com os dados selecionados' purple />
<GradientButton title='DADOS' description='Gerar gráficos com os dados selecionados' green />
<GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange link />
<GradientButton title='DOWNLOADS' description='Gerar gráficos com os dados selecionados' purple />
<GradientButton title='DADOS' description='Gerar gráficos com os dados selecionados' green />
</Buttons>
</TelemetriaView>
)

12
src/services/consumoDiscretizadoBar.js Normal file
View File

@ -0,0 +1,12 @@
export const ConsumoDecretizadoBar = {
data :
[1, 3, 4, 7, 10, 14, 17, 20, 23, 25, 28, 31, 34, 37, 40, 43, 46, 49, 53, 56, 58, 60, 63, 66,
69, 72, 76, 79, 82, 86, 90, 93, 97, 103, 106, 109, 112, 116, 120, 124, 127, 130, 134, 138, 142, 145, 148, 152,
155, 158, 161, 164, 168, 172, 176, 200, 203, 206, 209, 213, 217, 221, 223, 226, 229, 231, 234, 238, 240, 244, 248
],
label:
['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']
}

12
src/services/consumoDiscretizadoLine.js Normal file
View File

@ -0,0 +1,12 @@
export const ConsumoDecretizadoLine = {
data: [100, 120, 110, 130, 140, 130, 150, 300, 400, 410, 420, 430, 435, 440, 440, 420, 400, 420, 420, 415, 300, 280, 280, 200,
100, 120, 110, 130, 140, 130, 150, 300, 400, 410, 420, 430, 435, 440, 440, 420, 400, 420, 420, 415, 300, 280, 280, 200,
100, 120, 110, 130, 140, 130, 150, 300, 400, 410, 420, 430, 435, 440, 440, 420, 400, 420, 420, 415, 300, 280, 280, 200,
100, 120, 110, 130, 140, 130, 150, 300, 400, 410, 420, 430, 435, 440, 440, 420, 400, 420, 420, 415, 300, 280, 280, 200,],
data1: [600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 290, 290, 290,
600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 290, 290, 290,
600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 290, 290, 290,],
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',
'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',
'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', ]
}

7
src/services/fatorPotencia.js Normal file
View File

@ -0,0 +1,7 @@
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],
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/ChatTelemetry/ChatTelemetryView.ts
View File

@ -1,3 +1,19 @@
import styled from "styled-components";
export const ChatTelemetryView = styled.main``
export const ChatTelemetryView = styled.main`
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
section {
display: grid;
grid-template-columns: 50% 50%;
width: 100%;
}
`