From 58b90676fb40055ede6fd2f56268ce39287a91ac Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Wed, 18 May 2022 11:18:57 -0300 Subject: [PATCH] add datasets(subtitle) graphs --- src/components/graph/Chart.tsx | 4 +- src/components/graph/LineBarChart.tsx | 44 +++++++++-- src/components/graph/LineChart.tsx | 74 ++++++++++++++--- src/components/graph/SingleBar.tsx | 9 ++- .../graph/graphCard/ChartCardView.ts | 2 +- src/pages/dashboard.tsx | 13 ++- src/pages/estimatedCost.tsx | 2 +- src/pages/pld/index.tsx | 6 +- src/styles/layouts/dashboard/DashboardView.js | 79 ------------------- src/styles/layouts/dashboard/DashboardView.ts | 2 +- 10 files changed, 122 insertions(+), 113 deletions(-) delete mode 100644 src/styles/layouts/dashboard/DashboardView.js diff --git a/src/components/graph/Chart.tsx b/src/components/graph/Chart.tsx index c932f71..00988c6 100644 --- a/src/components/graph/Chart.tsx +++ b/src/components/graph/Chart.tsx @@ -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 ], } diff --git a/src/components/graph/LineBarChart.tsx b/src/components/graph/LineBarChart.tsx index 8a4eb73..fd647a7 100644 --- a/src/components/graph/LineBarChart.tsx +++ b/src/components/graph/LineBarChart.tsx @@ -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,
- +
) diff --git a/src/components/graph/LineChart.tsx b/src/components/graph/LineChart.tsx index 4e683c9..b2665b8 100644 --- a/src/components/graph/LineChart.tsx +++ b/src/components/graph/LineChart.tsx @@ -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 ( diff --git a/src/components/graph/SingleBar.tsx b/src/components/graph/SingleBar.tsx index ef62cf1..6738136 100644 --- a/src/components/graph/SingleBar.tsx +++ b/src/components/graph/SingleBar.tsx @@ -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', }, diff --git a/src/components/graph/graphCard/ChartCardView.ts b/src/components/graph/graphCard/ChartCardView.ts index 1e1e809..972e59b 100644 --- a/src/components/graph/graphCard/ChartCardView.ts +++ b/src/components/graph/graphCard/ChartCardView.ts @@ -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; diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index 9f3a437..d3f248e 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -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() {
- + + + + + + + - - -
) diff --git a/src/pages/estimatedCost.tsx b/src/pages/estimatedCost.tsx index 92675e5..8ff220e 100644 --- a/src/pages/estimatedCost.tsx +++ b/src/pages/estimatedCost.tsx @@ -14,7 +14,7 @@ export default function EstimatedCost() {
- +
) diff --git a/src/pages/pld/index.tsx b/src/pages/pld/index.tsx index f4f21e1..13459b2 100644 --- a/src/pages/pld/index.tsx +++ b/src/pages/pld/index.tsx @@ -200,7 +200,7 @@ export default function region() { - + @@ -209,10 +209,10 @@ export default function region() {
- +
- + diff --git a/src/styles/layouts/dashboard/DashboardView.js b/src/styles/layouts/dashboard/DashboardView.js deleted file mode 100644 index d428811..0000000 --- a/src/styles/layouts/dashboard/DashboardView.js +++ /dev/null @@ -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%; - } - } -` diff --git a/src/styles/layouts/dashboard/DashboardView.ts b/src/styles/layouts/dashboard/DashboardView.ts index c1dad75..43a271c 100644 --- a/src/styles/layouts/dashboard/DashboardView.ts +++ b/src/styles/layouts/dashboard/DashboardView.ts @@ -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;