From aa51b9bea4348090b35e5d057bc0e5e9ac9aec2e Mon Sep 17 00:00:00 2001
From: joseCorte-exe <josecorte-corte@hotmail.com>
Date: Tue, 17 May 2022 11:41:39 -0300
Subject: [PATCH] changing charts

---
 src/components/graph/ChartTitle.tsx          | 16 +++++
 src/components/graph/ChartView.ts            |  6 +-
 src/components/graph/LineBarChart.tsx        |  2 +-
 src/components/graph/LineChart.tsx           | 62 ++++++++++----------
 src/components/graph/graphCard/ChartCard.tsx | 18 ++----
 src/pages/dashboard.tsx                      |  9 ++-
 src/services/consumoEstimado.js              |  1 +
 src/services/economiaAcumulada.js            |  1 +
 src/services/economiaBruta.js                |  1 +
 src/services/economiaIndicador.js            |  1 +
 10 files changed, 67 insertions(+), 50 deletions(-)
 create mode 100644 src/components/graph/ChartTitle.tsx
 create mode 100644 src/services/consumoEstimado.js
 create mode 100644 src/services/economiaAcumulada.js
 create mode 100644 src/services/economiaBruta.js
 create mode 100644 src/services/economiaIndicador.js

diff --git a/src/components/graph/ChartTitle.tsx b/src/components/graph/ChartTitle.tsx
new file mode 100644
index 0000000..5a7cb5b
--- /dev/null
+++ b/src/components/graph/ChartTitle.tsx
@@ -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>
+  )
+}
diff --git a/src/components/graph/ChartView.ts b/src/components/graph/ChartView.ts
index 110ff26..ac1c619 100644
--- a/src/components/graph/ChartView.ts
+++ b/src/components/graph/ChartView.ts
@@ -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`
+
+`
diff --git a/src/components/graph/LineBarChart.tsx b/src/components/graph/LineBarChart.tsx
index 945860c..8a91a4f 100644
--- a/src/components/graph/LineBarChart.tsx
+++ b/src/components/graph/LineBarChart.tsx
@@ -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 })),
     },
diff --git a/src/components/graph/LineChart.tsx b/src/components/graph/LineChart.tsx
index 015bfb2..7ec790f 100644
--- a/src/components/graph/LineChart.tsx
+++ b/src/components/graph/LineChart.tsx
@@ -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>
diff --git a/src/components/graph/graphCard/ChartCard.tsx b/src/components/graph/graphCard/ChartCard.tsx
index c1d710b..87857af 100644
--- a/src/components/graph/graphCard/ChartCard.tsx
+++ b/src/components/graph/graphCard/ChartCard.tsx
@@ -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>
   )
 }
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
index 80aaffd..c575693 100644
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@@ -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>
   )
diff --git a/src/services/consumoEstimado.js b/src/services/consumoEstimado.js
new file mode 100644
index 0000000..c24bb32
--- /dev/null
+++ b/src/services/consumoEstimado.js
@@ -0,0 +1 @@
+export const data = [8]
diff --git a/src/services/economiaAcumulada.js b/src/services/economiaAcumulada.js
new file mode 100644
index 0000000..24a4a49
--- /dev/null
+++ b/src/services/economiaAcumulada.js
@@ -0,0 +1 @@
+export const data = []
diff --git a/src/services/economiaBruta.js b/src/services/economiaBruta.js
new file mode 100644
index 0000000..2c38d30
--- /dev/null
+++ b/src/services/economiaBruta.js
@@ -0,0 +1 @@
+export const dataEconomiaBruta=[872, 1.615, 2.196, 3.838, 4.814, 5.853]
diff --git a/src/services/economiaIndicador.js b/src/services/economiaIndicador.js
new file mode 100644
index 0000000..24a4a49
--- /dev/null
+++ b/src/services/economiaIndicador.js
@@ -0,0 +1 @@
+export const data = []