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

add datasets(subtitle) graphs

Browse Source
This commit is contained in:
joseCorte-exe 2022-05-18 11:18:57 -03:00
parent ec82b83a16
commit 58b90676fb
10 changed files with 122 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,6 +40,7 @@ interface ChartInterface {
export default function Chart({ title, data1, data2, label, subtitle, dataset1, dataset2 }: ChartInterface) {
const labels = label;
const empty = []
const data = {
labels,
@ -49,11 +50,12 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
data: data1.map(value => value),
backgroundColor: '#C2D5FB',
},
data2?
{
label: dataset2? dataset2 : '2021',
data: data2.map(value => value),
backgroundColor: '#255488',
},
} : null
],
}

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

@ -61,7 +61,7 @@ interface LineBarChartInterface {
title: string,
subtitle: string,
data1: any,
data2: any,
data2?: any,
data3: any,
red?: any,
label: any,
@ -75,7 +75,20 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
const labels = label
const data = {
const options = {
responsive: true,
plugins: {
legend: {
position: 'bottom' as const,
},
title: {
display: true,
text: '',
},
},
};
const data = data2? {
labels,
datasets: [
{
@ -90,13 +103,32 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
{
type: 'bar' as const,
label: dataset2? dataset2 : 'Dataset 2',
backgroundColor: '#255488',
data: data2.map(value => value),
backgroundColor: '#C2D5FB',
data: data3.map(value => value),
},
{
type: 'bar' as const,
label: dataset3? dataset3 : 'Dataset 2',
backgroundColor: '#C2D5FB',
backgroundColor: '#255488',
data: data2.map(value => value),
},
],
} : {
labels,
datasets: [
{
type: 'line' as const,
label: dataset1? dataset1 : 'Dataset 1',
borderColor: red?
'#f00' : '#0c9200',
borderWidth: 2,
fill: false,
data: data1.map(value => value),
},
{
type: 'bar' as const,
label: dataset3? dataset3 : 'Dataset 2',
backgroundColor: '#255488',
data: data3.map(value => value),
},
],
@ -112,7 +144,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
<ChartView>
<ChartTitle title={title} subtitle={subtitle}/>
<div>
<Chart ref={chartRef} type='bar' data={data} />
<Chart ref={chartRef} type='bar' options={options} data={data} />
</div>
</ChartView>
)

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

@ -62,10 +62,10 @@ interface ChartInterface {
data3?: any,
data4?: any,
label: any,
dataset1: string,
dataset2: string,
dataset3: string,
dataset4: string
dataset1?: string,
dataset2?: string,
dataset3?: string,
dataset4?: string
}
export default function LineChart({ title, subtitle, data1, data2, data3, data4, label, dataset1, dataset2, dataset3, dataset4 }: ChartInterface) {
@ -73,7 +73,7 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
responsive: true,
plugins: {
legend: {
position: 'top' as const,
position: 'bottom' as const,
},
title: {
display: true,
@ -84,7 +84,7 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
const labels = label;
const data = {
const data = dataset4? {
labels,
datasets: [
{
@ -94,25 +94,73 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
{
label: dataset2? dataset2 : 'Dataset 2',
label: dataset2? dataset2 : '',
data: data2.map(value => value),
borderColor: 'rgb(255, 114, 32)',
backgroundColor: 'rgba(255, 145, 0, 0.5)',
borderColor: 'rgb(255, 114, 32)' ,
backgroundColor: 'rgba(255, 145, 0, 0.5)' ,
},
{
label: dataset3? dataset3 : 'Dataset 3',
label: dataset3? dataset3 : '',
data: data3.map(value => value),
borderColor: 'rgb(109, 109, 109)',
borderColor: 'rgb(109, 109, 109)' ,
backgroundColor: 'rgba(90, 90, 90, 0.5)',
},
{
label: dataset4? dataset4 : 'Dataset4',
label: dataset4? dataset4 : '',
data: data4.map(value => value),
borderColor: 'rgb(255, 166, 0)',
backgroundColor: 'rgba(255, 187, 0, 0.5)',
},
],
};
} : dataset3? {
labels,
datasets: [
{
label: dataset1? dataset1 : 'Dataset 1',
data: data1.map(value => value),
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
{
label: dataset2? dataset2 : '',
data: data2.map(value => value),
borderColor: 'rgb(255, 114, 32)' ,
backgroundColor: 'rgba(255, 145, 0, 0.5)' ,
},
{
label: dataset3? dataset3 : '',
data: data3.map(value => value),
borderColor: 'rgb(109, 109, 109)' ,
backgroundColor: 'rgba(90, 90, 90, 0.5)',
},
],
} : dataset2? {
labels,
datasets: [
{
label: dataset1? dataset1 : 'Dataset 1',
data: data1.map(value => value),
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
{
label: dataset2? dataset2 : '',
data: data2.map(value => value),
borderColor: 'rgb(255, 114, 32)' ,
backgroundColor: 'rgba(255, 145, 0, 0.5)' ,
},
],
} : {
labels,
datasets: [
{
label: dataset1? dataset1 : 'Dataset 1',
data: data1.map(value => value),
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
],
}
return (
<ChartView>

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

@ -28,15 +28,16 @@ interface SingleBarInterface{
title: string,
subtitle: string,
dataProps: any,
label: any
label: any,
dataset: string
}
export function SingleBar({ title, subtitle, dataProps, label }: SingleBarInterface) {
export function SingleBar({ title, subtitle, dataProps, label, dataset }: SingleBarInterface) {
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
position: 'bottom' as const,
},
title: {
display: true,
@ -51,7 +52,7 @@ export function SingleBar({ title, subtitle, dataProps, label }: SingleBarInterf
labels,
datasets: [
{
label: 'Dataset 2',
label: dataset,
data: dataProps.map(value => value),
backgroundColor: '#255488',
},

2
src/components/graph/graphCard/ChartCardView.ts
View File

@ -106,7 +106,7 @@ export const ChartCardView = styled.article`
@media (max-width: 1640px) {
font-size: 13px;
min-height: 28rem;
min-height: 32rem;
.info {
max-width: 4rem;

13
src/pages/dashboard.tsx
View File

@ -14,6 +14,8 @@ import { dataEconomiaBruta } from '../services/economiaBruta'
import { dataEconomiaIndicador } from '../services/economiaIndicador'
import { EconomiaAcumulada } from '../services/economiaAcumulada'
import Chart from '../components/graph/Chart'
import { LineBarChart } from '../components/graph/LineBarChart'
import { ConsumoEstimado } from '../services/consumoEstimado'
export default function Dashboard() {
@ -33,14 +35,17 @@ export default function Dashboard() {
<section className='dashboard'>
<GraphCard title='Consumo' subtitle='Gráfico de Consumo' consumption={25} line>
<LineChart data1={EconomiaAcumulada.data2} data2={[]} data3={[]} data4={[]} title='Consumo Acumulado' subtitle='' label={EconomiaAcumulada.label1} />
<LineChart data1={EconomiaAcumulada.data2} title='Economia Bruta' dataset1='Estimada' subtitle='' label={EconomiaAcumulada.label1} />
</GraphCard>
<GraphCard title='Economia Acumulado' subtitle='Economia Acumulado' singleBar>
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Acumulada' label={EconomiaAcumulada.label1} dataProps={EconomiaAcumulada.data2} />
</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='2020' dataset3='2021' title='Custo Estimado' subtitle='' />
</GraphCard>
<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} />
</GraphCard>
<GraphCard title='Economia Acumulado' subtitle='Economia Acumulado' className='footerGraph' singleBar>
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' label={EconomiaAcumulada.label1} dataProps={EconomiaAcumulada.data2} />
</GraphCard>
</section>
</DashboardView>
)

2
src/pages/estimatedCost.tsx
View File

@ -14,7 +14,7 @@ export default function EstimatedCost() {
<Header name='' />
<PageTitle title='Custos Estimados' subtitle='Comparativo de Custo Estimado' />
<section>
<LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} label={ConsumoEstimado.label} title='evolução pld' subtitle='' />
<LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' />
</section>
</EstimatedCostView>
)

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

@ -200,7 +200,7 @@ export default function region() {
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
<BasicButton title='Download (csv)' />
</section>
<LineBarChart data1={EvolucaoPld.data} data2={EvolucaoPld.data1} data3={[]} label={EvolucaoPld.label} title='evolução pld' subtitle='' />
<LineBarChart data1={EvolucaoPld.data} data3={EvolucaoPld.data1} dataset1={'line'} dataset2={'barra1'} dataset3={'2021'} label={EvolucaoPld.label} title='Evolução PLD (R$/MWh)' subtitle='' />
</PldGraphView>
</RenderIf>
@ -209,10 +209,10 @@ export default function region() {
<PldGraphView>
<PageTitle title='Consumo por dia' subtitle=''/>
<section className='toolsbar'>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2021-09-19"/>
<BasicButton title='Download (csv)' />
</section>
<LineChart data1={EconomiaAcumulada.data3} data2={EconomiaAcumulada.data4} data3={EconomiaAcumulada.data5} data4={EconomiaAcumulada.data6} title='Consumo Acumulado' subtitle='' label={EconomiaAcumulada.label1} />
<LineChart data1={EconomiaAcumulada.data3} data2={EconomiaAcumulada.data4} data3={EconomiaAcumulada.data5} data4={EconomiaAcumulada.data6} dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL' title='PLD - 19/09/21' subtitle='' label={EconomiaAcumulada.label1} />
</PldGraphView>
</RenderIf>
</main>

79
src/styles/layouts/dashboard/DashboardView.js
View File

@ -1,79 +0,0 @@
import styled from 'styled-components'
export const DashboardView = styled.main`
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
flex-direction: column;
width: 100%;
.cardsSection {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
width: 100%;
height: fit-content;
margin: 2rem 0 2rem 0px;
background-color: #fff;
box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.1);
border-radius: 10px;
cursor: pointer;
}
.dashboard {
display: grid;
grid-template-columns: 50% 50% 100%;
grid-template-rows: 50% 50%;
gap: 30px;
width: 99%;
padding-right: 20px;
.footerGraph {
grid-row-start: 2;
grid-column-start: 1;
grid-column-end: 3;
}
}
@media (max-width: 1195px) {
width: 100%;
padding: 30px;
margin: 0;
.dashboard {
display: flex;
padding: 0;
margin: 0;
justify-content: center;
align-items: center;
flex-wrap: wrap;
grid-template-columns: 50% 50%;
grid-auto-rows: 1;
grid-auto-columns: 1;
width: 100%;
}
}
`

2
src/styles/layouts/dashboard/DashboardView.ts
View File

@ -34,7 +34,7 @@ export const DashboardView = styled.main`
.dashboard {
display: grid;
grid-template-columns: 50% 50% 100%;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
gap: 30px;