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

changing charts

Browse Source
This commit is contained in:
joseCorte-exe 2022-05-17 11:41:39 -03:00
parent ee4a1d8817
commit aa51b9bea4
10 changed files with 67 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/graph/ChartTitle.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from 'react'
import { ChartTitleView } from './ChartView'
interface ChartTitleInterface{
title: string,
subtitle: string,
}
export default function ChartTitle({ title, subtitle }: ChartTitleInterface) {
return (
<ChartTitleView>
<h3>{title}</h3>
<p>{subtitle}</p>
</ChartTitleView>
)
}

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

@ -1,9 +1,13 @@
import styled from "styled-components"
export const ChartView = styled.div`
width: 80%;
width: 90%;
@media (max-width: 900px) {
min-width: 20rem
}
`
export const ChartTitleView = styled.div`
`

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

@ -38,7 +38,7 @@ export const data = {
},
{
type: 'bar' as const,
label: 'Dataset 3',
label: 'Dataset 2',
backgroundColor: '#255488',
data: labels.map(() => faker.datatype.number({ min: 0, max: 140000 })),
},

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

@ -55,10 +55,10 @@ ChartJS.register(
interface ChartInterface {
title: string,
data: any
datas: any
}
export default function LineChart({ title, data }: ChartInterface) {
export default function LineChart({ title, datas }: ChartInterface) {
// const [ graphData, setGraphData ] = useState({
// labels: [],
// datasets: [],
@ -111,35 +111,35 @@ export default function LineChart({ title, data }: ChartInterface) {
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: [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],
// // 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, 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, 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)',
// // },
// ],
// };
const data = {
labels,
datasets: [
// {
// label: 'Dataset 1',
// data: [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],
// 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, 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: datas,
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, 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)',
// },
],
};
return (
<ChartView>

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

@ -17,10 +17,11 @@ interface ChartCardInterface {
consumption?: number,
className?: string,
line?: boolean | undefined,
singleBar?: any
singleBar?: any,
children?: any
}
export default function ChartCard({ title, subtitle, consumption, className, line, singleBar }: ChartCardInterface) {
export default function ChartCard({ title, subtitle, consumption, className, line, singleBar, children }: ChartCardInterface) {
const [timeCourse, setTimeCourse] = React.useState<string | null>('left');
const handleAlignment = (
@ -87,18 +88,7 @@ export default function ChartCard({ title, subtitle, consumption, className, lin
<></>
}
</div>
<RenderIf isTrue={line? true : false}>
<LineChart title='' data={data}/>
</RenderIf>
<RenderIf isTrue={line? false : true}>
<RenderIf isTrue={singleBar? true : false}>
<SingleBar/>
</RenderIf>
<RenderIf isTrue={singleBar? false : true}>
<Chart title='' />
</RenderIf>
</RenderIf>
{children}
</ChartCardView>
)
}

9
src/pages/dashboard.tsx
View File

@ -7,6 +7,7 @@ import GraphCard from '../components/graph/graphCard/ChartCard'
import Header from '../components/header/Header'
import PageTitle from '../components/pageTitle/PageTitle'
import Link from 'next/link'
import LineChart from '../components/graph/LineChart'
export default function Dashboard() {
@ -25,9 +26,11 @@ export default function Dashboard() {
</Link>
<section className='dashboard'>
<GraphCard title='Consumo' subtitle='Gráfico de Consumo' consumption={25} line />
<GraphCard title='Consumo' subtitle='Gráfico de Consumo' />
<GraphCard title='Consumo' subtitle='Gráfico de Consumo' className='footerGraph' singleBar />
<GraphCard title='Consumo' subtitle='Gráfico de Consumo' consumption={25} line>
{/* <LineChart datas={dataEconomia} /> */}
</GraphCard>
<GraphCard title='Indicador de Custo' subtitle='Valores em R$/ MWh' />
<GraphCard title='Economia Acumulado' subtitle='Economia Acumulado' className='footerGraph' singleBar />
</section>
</DashboardView>
)

1
src/services/consumoEstimado.js Normal file
View File

@ -0,0 +1 @@
export const data = [8]

1
src/services/economiaAcumulada.js Normal file
View File

@ -0,0 +1 @@
export const data = []

1
src/services/economiaBruta.js Normal file
View File

@ -0,0 +1 @@
export const dataEconomiaBruta=[872, 1.615, 2.196, 3.838, 4.814, 5.853]

1
src/services/economiaIndicador.js Normal file
View File

@ -0,0 +1 @@
export const data = []