Merge branch 'telemetry' into 'dev'
Telemetry See merge request kluppsoftware/smart-energia-web!123
This commit is contained in:
José Corte
commit
1c3c9c33c7
@ -92,12 +92,22 @@ export function DemRegXDemConChart({
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
@ -140,8 +150,9 @@ export function DemRegXDemConChart({
|
||||
{
|
||||
type: 'bar' as const,
|
||||
label: 'Demanda Registrada',
|
||||
backgroundColor: '#255488',
|
||||
data: data2?.map(value => value.dem_reg),
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#255488',
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -154,7 +165,6 @@ export function DemRegXDemConChart({
|
||||
|
||||
return (
|
||||
<ChartView>
|
||||
{/* <ChartTitle title={title} subtitle={subtitle}/> */}
|
||||
<div style={{width: '90%'}}>
|
||||
<Chart ref={chartRef} type='bar' options={options} data={data} />
|
||||
</div>
|
||||
|
||||
@ -40,12 +40,22 @@ export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label,
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
@ -68,6 +78,7 @@ export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label,
|
||||
{
|
||||
type: 'line' as const,
|
||||
label: 'reativa',
|
||||
borderRadius: 8,
|
||||
borderColor: '#F00' ,
|
||||
fill: false,
|
||||
borderDash: [5, 5],
|
||||
@ -78,8 +89,9 @@ export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label,
|
||||
{
|
||||
type: 'bar' as const,
|
||||
label: 'consumo',
|
||||
backgroundColor: '#74acec',
|
||||
data: dataProps.map(value => value.consumo),
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#74acec',
|
||||
},
|
||||
// {
|
||||
// type: 'line' as const,
|
||||
@ -97,7 +109,6 @@ export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label,
|
||||
|
||||
return (
|
||||
<ChartView>
|
||||
{/* <ChartTitle title={title} subtitle={subtitle}/> */}
|
||||
<div style={{width: '90%'}}>
|
||||
<Chart type='bar' options={options} data={data} />
|
||||
</div>
|
||||
|
||||
@ -70,6 +70,7 @@ export default function DiscretizedConsumptionChartLine({ title, subtitle, data1
|
||||
datasets: [
|
||||
{
|
||||
label: dataset1,
|
||||
borderRadius: 8,
|
||||
data: data1.map(value => value.reativa),
|
||||
borderColor: 'rgb(53, 162, 235)',
|
||||
backgroundColor: 'rgba(53, 162, 235, 0)',
|
||||
@ -77,6 +78,7 @@ export default function DiscretizedConsumptionChartLine({ title, subtitle, data1
|
||||
{
|
||||
label: 'base',
|
||||
data: data1.map(value => 500),
|
||||
borderRadius: 8,
|
||||
borderColor: 'rgb(0, 0, 0)',
|
||||
fill: false,
|
||||
backgroundColor: 'rgba(255, 145, 0, 0)' ,
|
||||
@ -85,6 +87,7 @@ export default function DiscretizedConsumptionChartLine({ title, subtitle, data1
|
||||
{
|
||||
label: 'tolerância',
|
||||
data: data1.map(value => 525),
|
||||
borderRadius: 8,
|
||||
borderColor: 'rgb(255, 0, 0)',
|
||||
fill: false,
|
||||
backgroundColor: 'rgba(255, 145, 0, 0)' ,
|
||||
|
||||
@ -88,7 +88,22 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
|
||||
@ -50,7 +50,22 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
|
||||
@ -82,12 +82,22 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, dataset1,
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: !miniature? 16 : 10
|
||||
}
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: !miniature? 16 : 10
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
@ -141,48 +151,50 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, dataset1,
|
||||
{
|
||||
type: 'bar' as const,
|
||||
label: 'Cativo',
|
||||
backgroundColor: '#C2D5FB',
|
||||
data: chartData?.map(value => {
|
||||
if (!value.dad_estimado)
|
||||
return parseInt(value.custo_cativo)
|
||||
}),
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#C2D5FB',
|
||||
stack: 'cativo'
|
||||
},
|
||||
{
|
||||
type: 'bar' as const,
|
||||
label: 'Livre',
|
||||
backgroundColor: '#255488',
|
||||
data: chartData?.filter(value => !value.dad_estimad? true : false).map(value => {
|
||||
if (!value.dad_estimado)
|
||||
return parseInt(value.custo_livre)
|
||||
}),
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#255488',
|
||||
stack: 'livre'
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
label: 'Est. Cativo',
|
||||
backgroundColor: pattern.draw('diagonal', '#C2D5FB'),
|
||||
data: chartData?.map(value => {
|
||||
if (value.dad_estimado)
|
||||
return parseInt(value.custo_cativo)
|
||||
}),
|
||||
borderRadius: 8,
|
||||
backgroundColor: pattern.draw('diagonal', '#C2D5FB'),
|
||||
stack: 'cativo'
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
label: 'Est. Livre',
|
||||
backgroundColor: pattern.draw('diagonal', '#255488'),
|
||||
data: chartData?.map(value => {
|
||||
if (value.dad_estimado)
|
||||
return parseInt(value.custo_livre)
|
||||
}),
|
||||
borderRadius: 8,
|
||||
backgroundColor: pattern.draw('diagonal', '#255488'),
|
||||
stack: 'livre'
|
||||
}
|
||||
],
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = chartRef.current;
|
||||
|
||||
// triggerTooltip(chart);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<CativoXLivreChartView>
|
||||
<ChartTitle title={title} subtitle={subtitle}/>
|
||||
|
||||
@ -45,12 +45,22 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: !miniature? 16 : 10
|
||||
}
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: !miniature? 16 : 10
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
@ -90,36 +100,32 @@ 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'
|
||||
borderRadius: 8,
|
||||
backgroundColor: (value, ctx) => {
|
||||
if (value.dad_estimado)
|
||||
return draw('diagonal-right-left', '#C2d5fb');
|
||||
else
|
||||
return '#C2d5fb'
|
||||
},
|
||||
stack: '0'
|
||||
},
|
||||
{
|
||||
label: '2022',
|
||||
data: data2?.map(value => value.custo_unit>0? value.custo_unit : null),
|
||||
// backgroundColor: '#255488'
|
||||
borderRadius: 8,
|
||||
backgroundColor: (value, ctx) => {
|
||||
if (value.dad_estimado)
|
||||
return draw('diagonal-right-left', '#255488');
|
||||
else
|
||||
return '#255488'
|
||||
},
|
||||
stack: '0'
|
||||
}
|
||||
],
|
||||
}
|
||||
|
||||
return (
|
||||
<CostIndicatorChartView>
|
||||
{/* <RenderIf isTrue={single? true : false} >
|
||||
<Bar
|
||||
options={options}
|
||||
data={graphData}
|
||||
/>
|
||||
</RenderIf> */}
|
||||
<ChartTitle title={title} subtitle={subtitle} />
|
||||
<Bar
|
||||
options={options}
|
||||
|
||||
@ -50,12 +50,22 @@ export default function FatorPotenciaChart({ title, subtitle, data1, data2, labe
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
|
||||
@ -1,50 +1,17 @@
|
||||
import React from 'react'
|
||||
import Link from 'next/link';
|
||||
|
||||
import ToggleButton from '@mui/material/ToggleButton';
|
||||
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
|
||||
|
||||
import { ChartCardView } from './ChartCardView';
|
||||
import Chart from '../Chart';
|
||||
import ButtonGroup from '../../buttonGroup/ButtonGroup';
|
||||
import RenderIf from '../../../utils/renderIf';
|
||||
import LineChart from '../LineChart';
|
||||
import { SingleBar } from '../SingleBar';
|
||||
|
||||
interface ChartCardInterface {
|
||||
title: string,
|
||||
subtitle: string,
|
||||
consumption?: number,
|
||||
className?: string,
|
||||
line?: boolean | undefined,
|
||||
singleBar?: any,
|
||||
children?: any
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
export default function ChartCard({ title, subtitle, consumption, className, line, singleBar, children }: ChartCardInterface) {
|
||||
const [timeCourse, setTimeCourse] = React.useState<string | null>('left');
|
||||
|
||||
const handleAlignment = (
|
||||
event: React.MouseEvent<HTMLElement>,
|
||||
newAlignment: string | null,
|
||||
) => {
|
||||
setTimeCourse(newAlignment);
|
||||
};
|
||||
|
||||
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: [
|
||||
{
|
||||
label: 'Dataset 1',
|
||||
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(53, 162, 235)',
|
||||
backgroundColor: 'rgba(53, 162, 235, 0.5)',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default function ChartCard({ title, subtitle, consumption, className, children }: ChartCardInterface) {
|
||||
return (
|
||||
<ChartCardView className={className} >
|
||||
<div className='content' >
|
||||
@ -53,7 +20,6 @@ export default function ChartCard({ title, subtitle, consumption, className, lin
|
||||
<h2>{title}</h2>
|
||||
<span style={{display:'block'}}>{subtitle}</span>
|
||||
</div>
|
||||
{/* <ButtonGroup /> */}
|
||||
</div>
|
||||
{
|
||||
consumption?
|
||||
|
||||
@ -3,7 +3,7 @@ import styled from 'styled-components';
|
||||
export const ChartCardView = styled.article`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@ import ChartDataLabels from 'chartjs-plugin-datalabels';
|
||||
import { draw } from 'patternomaly'
|
||||
import React, { useEffect } from 'react';
|
||||
import { Chart } from 'react-chartjs-2';
|
||||
import 'chartjs-plugin-style';
|
||||
|
||||
import { GrossAnualChartView } from './GrossAnualChartView';
|
||||
import ChartTitle from '../ChartTitle';
|
||||
@ -14,7 +15,7 @@ ChartJS.register(
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ChartDataLabels
|
||||
ChartDataLabels,
|
||||
);
|
||||
|
||||
interface SingleBarInterface{
|
||||
@ -40,18 +41,25 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
font: {
|
||||
size: 30
|
||||
},
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: !miniature? 16 : 10
|
||||
}
|
||||
},
|
||||
},
|
||||
y: {
|
||||
stacked: true,
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: !miniature? 16 : 10
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
series: {
|
||||
@ -74,7 +82,7 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
|
||||
},
|
||||
display: true,
|
||||
anchor: "end",
|
||||
offset: !miniature?20 : 10,
|
||||
offset: !miniature? 5 : 5,
|
||||
align: "start",
|
||||
font: {
|
||||
size: !miniature? 30 : 10,
|
||||
@ -85,11 +93,6 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom' as const,
|
||||
labels: {
|
||||
font: {
|
||||
size: 12,
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
display: false,
|
||||
@ -116,6 +119,7 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
|
||||
data: dataProps.filter(value => value.dad_estimado === false).map((value, index) => {
|
||||
return parseFloat(value.economia_acumulada)
|
||||
}),
|
||||
borderRadius: 10,
|
||||
backgroundColor: '#255488',
|
||||
},
|
||||
{
|
||||
@ -124,8 +128,9 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
|
||||
label: 'Estimado',
|
||||
data: dataProps.filter(value => value.ano === '2022').map((value, index) => {
|
||||
if (value.dad_estimado)
|
||||
return parseFloat(value.economia_acumulada)
|
||||
return parseFloat(value.economia_acumulada)
|
||||
}),
|
||||
borderRadius: 10,
|
||||
backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
|
||||
},
|
||||
],
|
||||
|
||||
@ -55,12 +55,22 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: !miniature? 16 : 10
|
||||
}
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: !miniature? 16 : 10
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
@ -103,25 +113,23 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
|
||||
type: 'bar',
|
||||
label: 'Consolidado',
|
||||
data: data1.map(value => !value.dad_estimado? value?.economia_acumulada : null),
|
||||
backgroundColor: '#255488'
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#255488',
|
||||
stack: '0'
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
label: 'Estimado',
|
||||
data: data2.map(value => value.dad_estimado? value?.economia_acumulada : null),
|
||||
backgroundColor: draw('diagonal-right-left', '#C2d5fb')
|
||||
borderRadius: 8,
|
||||
backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
|
||||
stack: '0'
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
return (
|
||||
<GrossMensalChartView>
|
||||
{/* <RenderIf isTrue={single? true : false} >
|
||||
<Bar
|
||||
options={options}
|
||||
data={graphData}
|
||||
/>
|
||||
</RenderIf> */}
|
||||
<ChartTitle title={title} subtitle={subtitle} />
|
||||
<ChartJs
|
||||
options={options}
|
||||
|
||||
@ -51,6 +51,9 @@ export default class MyDocument extends Document {
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin='true' />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
|
||||
|
||||
<script type="text/javascript" src="Chart.js"></script>
|
||||
|
||||
<script type="text/javascript" src="chartjs-plugin-style.js"></script>
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
|
||||
@ -11,7 +11,7 @@ import { AboutUsView } from '../../styles/layouts/aboutUs/AboutUsView'
|
||||
|
||||
export default function aboutUs({userName, text}) {
|
||||
return (
|
||||
<AboutUsView>
|
||||
<main style={{width: '100%'}}>
|
||||
<Head>
|
||||
<title>Smart Energia - Sobre nós</title>
|
||||
</Head>
|
||||
@ -19,19 +19,21 @@ export default function aboutUs({userName, text}) {
|
||||
<Header name={userName}>
|
||||
<PageTitle title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia'/>
|
||||
</Header>
|
||||
{/* <Banner title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia' imgSource='/assets/banners/aboutUsBanner.png' /> */}
|
||||
<AboutUsView>
|
||||
{/* <Banner title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia' imgSource='/assets/banners/aboutUsBanner.png' /> */}
|
||||
|
||||
<section dangerouslySetInnerHTML={{__html: text[0]?.about}}/>
|
||||
<article>
|
||||
<aside>
|
||||
<h2>Apoio a projetos sociais</h2>
|
||||
<div>
|
||||
<Image src='/assets/stamps/whiteStamp.png' width={200} height={200} />
|
||||
<Image src='/assets/stamps/blueStamp.png' width={200} height={200} />
|
||||
</div>
|
||||
</aside>
|
||||
</article>
|
||||
</AboutUsView>
|
||||
<section dangerouslySetInnerHTML={{__html: text[0]?.about}}/>
|
||||
<article>
|
||||
<aside>
|
||||
<h2>Apoio a projetos sociais</h2>
|
||||
<div>
|
||||
<Image src='/assets/stamps/whiteStamp.png' width={200} height={200} />
|
||||
<Image src='/assets/stamps/blueStamp.png' width={200} height={200} />
|
||||
</div>
|
||||
</aside>
|
||||
</article>
|
||||
</AboutUsView>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -75,7 +75,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
|
||||
label={grossAnualYears} barLabel bruta miniature/>
|
||||
</GraphCard>
|
||||
|
||||
<GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil' singleBar>
|
||||
<GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil'>
|
||||
<GrossMensalChart title='' subtitle=''
|
||||
data1={grossMensalGraph}
|
||||
data2={grossMensalGraph}
|
||||
@ -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>
|
||||
<GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil'>
|
||||
<CativoXLivreChart chartData={acumulatedGraph}
|
||||
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
|
||||
label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado miniature/>
|
||||
|
||||
@ -63,7 +63,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
|
||||
useEffect(() => {
|
||||
api.post('/economy/estimates', unity!==''?{
|
||||
"filters": [
|
||||
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity}
|
||||
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity!=="default"? null : unity}
|
||||
]
|
||||
}:{}).then(res => {
|
||||
setCatLivDataState(res.data.data)
|
||||
@ -75,7 +75,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
|
||||
useEffect(() => {
|
||||
api.post('/economy/MWh', unity!==''?{
|
||||
"filters": [
|
||||
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity}
|
||||
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity!=="default"? null : unity}
|
||||
]
|
||||
}:{}).then(res => {
|
||||
setIndicatorDataState(res.data.data)
|
||||
@ -152,7 +152,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
|
||||
onChange={value => setUnity(value.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">Todas</MenuItem>
|
||||
<MenuItem value="default">Todas</MenuItem>
|
||||
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> !!OPÇAO COM DADOS TESTES!! */}
|
||||
{
|
||||
clients.map((value) => {
|
||||
@ -182,7 +182,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
|
||||
onChange={value => setUnity(value.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">Todas</MenuItem>
|
||||
<MenuItem value="default">Todas</MenuItem>
|
||||
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
|
||||
{
|
||||
clients.map((value) => {
|
||||
|
||||
@ -12,28 +12,30 @@ import { FaqView } from '../../styles/layouts/commonQuestions/FaqView'
|
||||
|
||||
export default function commonQuestions({faqData, userName}) {
|
||||
return (
|
||||
<FaqView>
|
||||
<main style={{width: '100%'}}>
|
||||
<Head>
|
||||
<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' >
|
||||
{
|
||||
faqData.length<1?
|
||||
<p>Nenhuma pergunta no momento!</p>
|
||||
<FaqView>
|
||||
{/* <Banner title='Perguntas Frequentes' subtitle='Aqui estão algumas das perguntas que mais recebemos!' imgSource='/assets/banners/faq1.png'/> */}
|
||||
<section className='CommonQuestionsSection' >
|
||||
{
|
||||
faqData.length!==0?
|
||||
faqData.map((value, index ) => {
|
||||
return <>
|
||||
<CommonQuestionsCard key={index} question={value.question} answer={value.answer}/>
|
||||
<hr />
|
||||
</>
|
||||
})
|
||||
:
|
||||
faqData.map((value, index ) => {
|
||||
return <>
|
||||
<CommonQuestionsCard key={index} question={value.question} answer={value.answer}/>
|
||||
<hr />
|
||||
</>
|
||||
})
|
||||
}
|
||||
</section>
|
||||
</FaqView>
|
||||
<p>Nenhuma pergunta no momento!</p>
|
||||
}
|
||||
</section>
|
||||
</FaqView>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
@ -47,7 +49,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
await apiClient.get('/faq').then(res => {
|
||||
faqData = res.data.data
|
||||
}).catch(res => {
|
||||
// console.log(res)
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
if (!token) {
|
||||
|
||||
@ -44,7 +44,7 @@ export default function industryInfo({userName}: any) {
|
||||
}
|
||||
|
||||
return (
|
||||
<IndustryInfoView>
|
||||
<main style={{width: '100%'}}>
|
||||
<Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
|
||||
<Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}>
|
||||
Pdf baixado Sucesso!
|
||||
@ -61,11 +61,13 @@ export default function industryInfo({userName}: any) {
|
||||
<Header name={userName}>
|
||||
<PageTitle title='Info setorial' subtitle='Baixe o pdf para ver o info setorial'/>
|
||||
</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>
|
||||
<button onClick={() => handleDownloadPdf()}>Clique aqui para baixar o arquivo em PDF</button>
|
||||
<IndustryInfoView>
|
||||
{/* <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>
|
||||
<button onClick={() => handleDownloadPdf()}>Clique aqui para baixar o arquivo em PDF</button>
|
||||
|
||||
</IndustryInfoView>
|
||||
</IndustryInfoView>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -46,10 +46,9 @@ export default function aboutUs({userName, news}: any) {
|
||||
</>
|
||||
})
|
||||
}
|
||||
|
||||
<a href='https://www.energiasmart.com.br/noticias/'
|
||||
target={"_blank"}
|
||||
rel={"noreferrer"}>Ver Mais</a>
|
||||
rel={"noreferrer"}>Ver todas as notícias</a>
|
||||
|
||||
</NewsView>
|
||||
</main>
|
||||
|
||||
@ -12,28 +12,30 @@ import Banner from '../../components/banner/Banner'
|
||||
|
||||
export default function Notifications({notificationData, userName}: any) {
|
||||
return (
|
||||
<FaqView>
|
||||
<main style={{width: '100%'}}>
|
||||
<Head>
|
||||
<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' >
|
||||
{
|
||||
notificationData.length!=0?
|
||||
notificationData.map((value, index ) => {
|
||||
return <>
|
||||
<NotificationQuestionsCard key={index} title={value.title} body={value.body}/>
|
||||
<hr />
|
||||
</>
|
||||
})
|
||||
:
|
||||
<p style={{alignSelf: 'center'}}>Você não tem notificações!</p>
|
||||
}
|
||||
</section>
|
||||
</FaqView>
|
||||
<FaqView>
|
||||
{/* <Banner title='Notificações' subtitle='Aqui estão as notificações publicadas para você!' imgSource='/assets/banners/notificacoes.jpg'/> */}
|
||||
<section className='CommonQuestionsSection' >
|
||||
{
|
||||
notificationData.length!=0?
|
||||
notificationData.map((value, index ) => {
|
||||
return <>
|
||||
<NotificationQuestionsCard key={index} title={value.title} body={value.body}/>
|
||||
<hr />
|
||||
</>
|
||||
})
|
||||
:
|
||||
<p style={{alignSelf: 'center'}}>Você não tem notificações!</p>
|
||||
}
|
||||
</section>
|
||||
</FaqView>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -144,25 +144,6 @@ export default function Telemetria({userName, clients}: any) {
|
||||
setOpenSnackSuccess(false)
|
||||
})
|
||||
}
|
||||
|
||||
function handleVerifyFields() {
|
||||
if (unity != '' && startDate.toLocaleDateString() != '' && endDate.toLocaleDateString() != '' && discretization != '') {
|
||||
router.push({
|
||||
pathname: '/chartTelemetry',
|
||||
query: {
|
||||
'startDate': startDate.toLocaleDateString(),
|
||||
'endDate': endDate.toLocaleDateString(),
|
||||
discretization,
|
||||
unity
|
||||
},
|
||||
})
|
||||
return true
|
||||
} else {
|
||||
setOpenSnackFields(true)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
async function getChartData() {
|
||||
const html = document.querySelector("table")?.outerHTML;
|
||||
await api.post('/telemetry/demand', {
|
||||
@ -195,12 +176,6 @@ export default function Telemetria({userName, clients}: any) {
|
||||
getChartData()
|
||||
}, [send])
|
||||
|
||||
useEffect(() => {
|
||||
// getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
|
||||
// .then(result => setDiscretizedConsumptionData(result))
|
||||
// .catch(exception => console.log(exception))
|
||||
}, [discretization])
|
||||
|
||||
return(
|
||||
<main style={{width: '100%'}}>
|
||||
<Head>
|
||||
@ -243,7 +218,7 @@ export default function Telemetria({userName, clients}: any) {
|
||||
severity="error"
|
||||
sx={{ width: '100%' }}
|
||||
>
|
||||
Verifique os campos!
|
||||
Verifique os campos e tente novamente!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
|
||||
@ -351,9 +326,10 @@ export default function Telemetria({userName, clients}: any) {
|
||||
</LocalizationProvider>
|
||||
<div className='select'>
|
||||
<BasicButton title='Selecionar!' onClick={() => {
|
||||
setSend(true)
|
||||
getDiscretization(unity, startDate, endDate, discretization)
|
||||
.then(result => setDiscretizedConsumptionData(result))
|
||||
.catch(exception => console.log(exception))
|
||||
.then(result => {setDiscretizedConsumptionData(result); setSend(false)})
|
||||
.catch(exception => {setSend(false); setOpenSnackFields(true)})
|
||||
}}/>
|
||||
</div>
|
||||
</ChartFilters>
|
||||
@ -447,9 +423,10 @@ export default function Telemetria({userName, clients}: any) {
|
||||
</LocalizationProvider>
|
||||
<div className='select'>
|
||||
<BasicButton title='Selecionar!' onClick={() => {
|
||||
setSend(true)
|
||||
getDemand(unity, startDate, endDate, discretization)
|
||||
.then(result => setDemRegXDemCon(result))
|
||||
.catch(exception => console.log(exception))
|
||||
.then(result => {setDemRegXDemCon(result); setSend(false)})
|
||||
.catch(exception => {setSend(false); setOpenSnackFields(true)})
|
||||
}}/>
|
||||
</div>
|
||||
</ChartFilters>
|
||||
@ -539,9 +516,10 @@ export default function Telemetria({userName, clients}: any) {
|
||||
</LocalizationProvider>
|
||||
<div className='select'>
|
||||
<BasicButton title='Selecionar!' onClick={() => {
|
||||
setSend(true)
|
||||
getPowerFactorData(unity, startDate, endDate, discretization)
|
||||
.then(result => setFatorPotenciaData(result))
|
||||
.catch(exception => console.log(exception))
|
||||
.then(result => {setFatorPotenciaData(result); setSend(false)})
|
||||
.catch(exception => {setSend(false); setOpenSnackFields(true)})
|
||||
}}/>
|
||||
</div>
|
||||
</ChartFilters>
|
||||
@ -598,11 +576,12 @@ export default function Telemetria({userName, clients}: any) {
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
<div className='select'>
|
||||
<div style={{marginBottom: '8px'}}>
|
||||
<BasicButton title='Selecionar!' onClick={() => {
|
||||
setSend(true)
|
||||
getDemand(unity, startDate, endDate, discretization)
|
||||
.then(result => setDiscretizedConsumptionData(result))
|
||||
.catch(exception => console.log(exception))
|
||||
.then(result => {setDiscretizedConsumptionData(result); setSend(false)})
|
||||
.catch(exception => {setSend(false); setOpenSnackFields(true)})
|
||||
}}/>
|
||||
</div>
|
||||
</ChartFilters>
|
||||
|
||||
@ -12,6 +12,7 @@ export const TableView = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
img{
|
||||
margin-left:30rem;
|
||||
}
|
||||
|
||||
@ -7,9 +7,19 @@ export const TelemetriaView = styled.main`
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
padding: 0;
|
||||
padding: 15px 0 0 0;
|
||||
width: 100%;
|
||||
|
||||
background: #F8F8F8;
|
||||
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) ;
|
||||
border-radius: 20px;
|
||||
|
||||
background-color: #FFFFFF;
|
||||
|
||||
/* margin-top: 10px; */
|
||||
|
||||
.modal {
|
||||
position: absolute;
|
||||
|
||||
@ -191,7 +201,7 @@ export const TelemetriaView = styled.main`
|
||||
.MuiInputLabel-outlined {
|
||||
margin-top: 11px;
|
||||
}
|
||||
.Mui-focused {
|
||||
.Mui-focused, .MuiInputLabel-shrink {
|
||||
margin-top: 0!important;
|
||||
}
|
||||
}
|
||||
@ -226,23 +236,7 @@ export const TelemetriaView = styled.main`
|
||||
flex-wrap: wrap;
|
||||
|
||||
.select {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
flex-direction: column;
|
||||
/* height: 10em; */
|
||||
|
||||
:nth-child(1) {
|
||||
label {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
:nth-child(2) {
|
||||
label {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
margin-bottom: 17px;// input margin bottom
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -5,6 +5,14 @@ export const AboutUsView = styled.main`
|
||||
|
||||
font-weight: 300;
|
||||
|
||||
background: #F8F8F8;
|
||||
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) ;
|
||||
border-radius: 20px;
|
||||
|
||||
background-color: #FFFFFF;
|
||||
|
||||
article {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
@ -8,6 +8,14 @@ export const FaqView = styled.main`
|
||||
|
||||
width: 100%;
|
||||
|
||||
background: #F8F8F8;
|
||||
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) ;
|
||||
border-radius: 20px;
|
||||
|
||||
background-color: #FFFFFF;
|
||||
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
font-size: calc(90% + 2rem);
|
||||
|
||||
@ -22,23 +22,10 @@ export const EconomyView = styled.main`
|
||||
.MuiInputLabel-outlined {
|
||||
margin-top: 11px;
|
||||
}
|
||||
.Mui-focused {
|
||||
.Mui-focused, .MuiInputLabel-shrink {
|
||||
margin-top: 0!important;
|
||||
}
|
||||
|
||||
.chartBox {
|
||||
}
|
||||
|
||||
/* 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;
|
||||
} */
|
||||
`
|
||||
|
||||
@ -5,6 +5,14 @@ export const IndustryInfoView = styled.main`
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
background: #F8F8F8;
|
||||
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) ;
|
||||
border-radius: 20px;
|
||||
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.title {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
@ -11,6 +11,14 @@ export const NewsView = styled.main`
|
||||
|
||||
margin-bottom: 100px;
|
||||
|
||||
background: #F8F8F8;
|
||||
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) ;
|
||||
border-radius: 20px;
|
||||
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.description {
|
||||
a {
|
||||
display: none;
|
||||
@ -84,7 +92,7 @@ export const NewsView = styled.main`
|
||||
align-items: center;
|
||||
margin-top: 1px;
|
||||
|
||||
width: 140px;
|
||||
width: 170px;
|
||||
height: 45px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
@ -428,6 +428,16 @@ export const PldGraphView = styled.main`
|
||||
|
||||
width: 100%;
|
||||
|
||||
background: #F8F8F8;
|
||||
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) ;
|
||||
border-radius: 20px;
|
||||
|
||||
background-color: #FFFFFF;
|
||||
|
||||
margin-top: 38px;
|
||||
|
||||
.MuiOutlinedInput-input {
|
||||
height: 30px;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user