changing charts

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>
+  )
+}

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`
+
+`

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 })),
     },

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 = {
+  const data = {
-  //   labels,
+    labels,
-  //   datasets: [
+    datasets: [
-  //     // {
+      // {
-  //     //   label: 'Dataset 1',
+      //   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],
+      //   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)',
+      //   borderColor: 'rgb(53, 162, 235)',
-  //     //   backgroundColor: 'rgba(53, 162, 235, 0.5)',
+      //   backgroundColor: 'rgba(53, 162, 235, 0.5)',
-  //     // },
+      // },
-  //     // {
+      // {
-  //     //   label: 'Dataset 2',
+      //   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],
+      //   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)',
+      //   borderColor: 'rgb(255, 114, 32)',
-  //     //   backgroundColor: 'rgba(255, 145, 0, 0.5)',
+      //   backgroundColor: 'rgba(255, 145, 0, 0.5)',
-  //     // },
+      // },
-  //     {
+      {
-  //       label: 'Dataset 3',
+        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],
+        data: datas,
-  //       borderColor: 'rgb(109, 109, 109)',
+        borderColor: 'rgb(109, 109, 109)',
-  //       backgroundColor: 'rgba(90, 90, 90, 0.5)',
+        backgroundColor: 'rgba(90, 90, 90, 0.5)',
-  //     },
+      },
-  //     // {
+      // {
-  //     //   label: 'Dataset4',
+      //   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],
+      //   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)',
+      //   borderColor: 'rgb(255, 166, 0)',
-  //     //   backgroundColor: 'rgba(255, 187, 0, 0.5)',
+      //   backgroundColor: 'rgba(255, 187, 0, 0.5)',
-  //     // },
+      // },
-  //   ],
+    ],
-  // };
+  };
 
   return (
     <ChartView>

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}>
+      {children}
-        <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>
     </ChartCardView>
   )
 }

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' consumption={25} line>
-        <GraphCard title='Consumo' subtitle='Gráfico de Consumo' />
+          {/* <LineChart datas={dataEconomia} /> */}
-        <GraphCard title='Consumo' subtitle='Gráfico de Consumo' className='footerGraph' singleBar />
+        </GraphCard>
+        <GraphCard title='Indicador de Custo' subtitle='Valores em R$/ MWh' />
+        <GraphCard title='Economia Acumulado' subtitle='Economia Acumulado' className='footerGraph' singleBar />
       </section>
     </DashboardView>
   )

src/services/consumoEstimado.js

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

src/services/economiaAcumulada.js

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

src/services/economiaBruta.js

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

src/services/economiaIndicador.js

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