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 (
+
+ {title}
+ {subtitle}
+
+ )
+}
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 (
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('left');
const handleAlignment = (
@@ -87,18 +88,7 @@ export default function ChartCard({ title, subtitle, consumption, className, lin
<>>
}
-
-
-
-
-
-
-
-
-
-
-
-
+ {children}
)
}
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() {
)
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 = []