diff --git a/src/components/graph/Chart.tsx b/src/components/graph/Chart.tsx index 99db59a..cdd39b2 100644 --- a/src/components/graph/Chart.tsx +++ b/src/components/graph/Chart.tsx @@ -14,6 +14,8 @@ import { import faker from 'faker' import { ChartView } from './ChartView'; import RenderIf from '../../utils/renderIf'; +import ChartTitle from './ChartTitle'; +import { data } from './LineBarChart'; ChartJS.register( CategoryScale, @@ -26,15 +28,33 @@ ChartJS.register( interface ChartInterface { title: string, - data?: any, + subtitle: string, + data1: any, + data2: any, single?: any + label: any } -export default function Chart({ title, single, data }: ChartInterface) { - const [ graphData, setGraphData ] = useState({ - labels: [], - datasets: [], - }) +export default function Chart({ title, data1, data2, label, subtitle }: ChartInterface) { + + const labels = label; + + const data = { + labels, + datasets: [ + { + label: '2020', + data: data1.map(value => value), + backgroundColor: '#C2D5FB', + }, + { + label: '2021', + data: data2.map(value => value), + backgroundColor: '#255488', + }, + ], + } + const options = { responsive: true, plugins: { @@ -43,43 +63,24 @@ export default function Chart({ title, single, data }: ChartInterface) { }, title: { display: true, - text: title, + text: '', }, }, }; - const labels = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez']; - - useEffect(() => { - setGraphData({ - labels, - datasets: [ - { - label: '2020', - data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })), - backgroundColor: '#C2D5FB', - }, - { - label: '2021', - data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })), - backgroundColor: '#255488', - }, - ], - }) - }, []) - return ( - + {/* - + */} + ) diff --git a/src/components/graph/ChartView.ts b/src/components/graph/ChartView.ts index ac1c619..126131f 100644 --- a/src/components/graph/ChartView.ts +++ b/src/components/graph/ChartView.ts @@ -9,5 +9,13 @@ export const ChartView = styled.div` ` export const ChartTitleView = styled.div` + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + * { + margin: 0; + } ` diff --git a/src/components/graph/LineBarChart.tsx b/src/components/graph/LineBarChart.tsx index 8a91a4f..e549fe1 100644 --- a/src/components/graph/LineBarChart.tsx +++ b/src/components/graph/LineBarChart.tsx @@ -12,6 +12,7 @@ import { import { Chart } from 'react-chartjs-2'; import faker from 'faker'; import { ChartView } from './ChartView'; +import ChartTitle from './ChartTitle'; ChartJS.register( LinearScale, @@ -23,28 +24,6 @@ ChartJS.register( Tooltip ); -const labels = ['1', '2', '3', '4', '5', '6', '7', '8', '8', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30']; - -export const data = { - labels, - datasets: [ - { - type: 'line' as const, - label: 'Dataset 1', - borderColor: '#C2D5FB', - borderWidth: 2, - fill: false, - data: labels.map(() => faker.datatype.number({ min: 0, max: 140000 })), - }, - { - type: 'bar' as const, - label: 'Dataset 2', - backgroundColor: '#255488', - data: labels.map(() => faker.datatype.number({ min: 0, max: 140000 })), - }, - ], -}; - function triggerTooltip(chart: ChartJS | null) { const tooltip = chart?.tooltip; @@ -78,9 +57,46 @@ function triggerTooltip(chart: ChartJS | null) { chart.update(); } -export function LineBarChart() { +interface LineBarChartInterface { + title: string, + subtitle: string, + data1: any, + data2: any, + data3: any, + label: any +} + +export function LineBarChart({ title, subtitle, data1, data2, data3, label }: LineBarChartInterface) { const chartRef = useRef(null); + const labels = label + + const data = { + labels, + datasets: [ + { + type: 'line' as const, + label: 'Dataset 1', + borderColor: '#0c9200', + borderWidth: 2, + fill: false, + data: data1.map(value => value), + }, + { + type: 'bar' as const, + label: 'Dataset 2', + backgroundColor: '#255488', + data: data2.map(value => value), + }, + { + type: 'bar' as const, + label: 'Dataset 2', + backgroundColor: '#C2D5FB', + data: data3.map(value => value), + }, + ], + }; + useEffect(() => { const chart = chartRef.current; @@ -89,6 +105,7 @@ export function LineBarChart() { return ( + ) diff --git a/src/components/graph/LineChart.tsx b/src/components/graph/LineChart.tsx index 7ec790f..9560c98 100644 --- a/src/components/graph/LineChart.tsx +++ b/src/components/graph/LineChart.tsx @@ -41,6 +41,7 @@ import { } from 'chart.js'; // import { Line } from 'react-chartjs-2'; import faker from 'faker'; +import ChartTitle from './ChartTitle'; ChartJS.register( CategoryScale, @@ -55,47 +56,15 @@ ChartJS.register( interface ChartInterface { title: string, - datas: any + subtitle: string, + data1: any, + data2?: any, + data3?: any, + data4?: any, + label: any, } -export default function LineChart({ title, datas }: ChartInterface) { - // const [ graphData, setGraphData ] = useState({ - // labels: [], - // datasets: [], - // }) - // const options = { - // responsive: true, - // plugins: { - // legend: { - // position: 'bottom' as const, - // }, - // title: { - // display: true, - // text: title, - // }, - // }, - // }; - - // const labels = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez']; - - // useEffect(() => { - // setGraphData({ - // labels, - // datasets: [ - // { - // label: '2020', - // data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })), - // backgroundColor: '#C2D5FB', - // }, - // { - // label: '2021', - // data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })), - // backgroundColor: '#255488', - // }, - // ], - // }) - // }, []) - +export default function LineChart({ title, subtitle, data1, data2, data3, data4, label }: ChartInterface) { const options = { responsive: true, plugins: { @@ -104,45 +73,46 @@ export default function LineChart({ title, datas }: ChartInterface) { }, title: { display: true, - text: 'Chart.js Line Chart', + text: '', }, }, }; - 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 labels = label; 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 1', + data: data1.map(value => value), + borderColor: 'rgb(53, 162, 235)', + backgroundColor: 'rgba(53, 162, 235, 0.5)', + }, + { + label: 'Dataset 2', + data: data2.map(value => value), + borderColor: 'rgb(255, 114, 32)', + backgroundColor: 'rgba(255, 145, 0, 0.5)', + }, { label: 'Dataset 3', - data: datas, + data: data3.map(value => value), 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)', - // }, + { + label: 'Dataset4', + data: data4.map(value => value), + borderColor: 'rgb(255, 166, 0)', + backgroundColor: 'rgba(255, 187, 0, 0.5)', + }, ], }; return ( + ) diff --git a/src/components/graph/SingleBar.tsx b/src/components/graph/SingleBar.tsx index 46fe1a5..ef62cf1 100644 --- a/src/components/graph/SingleBar.tsx +++ b/src/components/graph/SingleBar.tsx @@ -11,6 +11,9 @@ import { import { Bar } from 'react-chartjs-2'; import faker from 'faker'; import { ChartView } from './ChartView'; +import ChartTitle from './ChartTitle'; + +import { dataEconomiaBruta } from '../../services/economiaBruta' ChartJS.register( CategoryScale, @@ -21,35 +24,42 @@ ChartJS.register( Legend ); -export const options = { - responsive: true, - plugins: { - legend: { - position: 'top' as const, - }, - title: { - display: true, - text: 'Chart.js Bar Chart', - }, - }, -}; +interface SingleBarInterface{ + title: string, + subtitle: string, + dataProps: any, + label: any +} -const labels = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez']; - -export const data = { - labels, - datasets: [ - { - label: 'Dataset 2', - data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })), - backgroundColor: '#255488', +export function SingleBar({ title, subtitle, dataProps, label }: SingleBarInterface) { + const options = { + responsive: true, + plugins: { + legend: { + position: 'top' as const, + }, + title: { + display: true, + text: '', + }, }, - ], -}; + }; -export function SingleBar() { + const labels = label; + + const data = { + labels, + datasets: [ + { + label: 'Dataset 2', + data: dataProps.map(value => value), + backgroundColor: '#255488', + }, + ], + }; return ( + ) diff --git a/src/pages/accumulatedSavings.tsx b/src/pages/accumulatedSavings.tsx index 3cd015e..9a2d043 100644 --- a/src/pages/accumulatedSavings.tsx +++ b/src/pages/accumulatedSavings.tsx @@ -1,8 +1,10 @@ import React from 'react' import Chart from '../components/graph/Chart' +import { SingleBar } from '../components/graph/SingleBar' import Header from '../components/header/Header' import PageTitle from '../components/pageTitle/PageTitle' +import { EconomiaAcumulada } from '../services/economiaAcumulada' import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView' @@ -12,7 +14,7 @@ export default function AccumulatedSavings() {
- +
) diff --git a/src/pages/costIndicator.tsx b/src/pages/costIndicator.tsx index e71e30d..ed32b1e 100644 --- a/src/pages/costIndicator.tsx +++ b/src/pages/costIndicator.tsx @@ -1,8 +1,11 @@ import React from 'react' import Chart from '../components/graph/Chart' +import { SingleBar } from '../components/graph/SingleBar' import Header from '../components/header/Header' import PageTitle from '../components/pageTitle/PageTitle' +import { dataEconomiaBruta } from '../services/economiaBruta' +import { dataEconomiaIndicador } from '../services/economiaIndicador' import { CostIndicatorView } from '../styles/layouts/economy/costIndicator/CostIndicatorView' export default function CostIndicator() { @@ -11,7 +14,7 @@ export default function CostIndicator() {
- +
) diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index 7c7e769..9f3a437 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -8,6 +8,12 @@ import Header from '../components/header/Header' import PageTitle from '../components/pageTitle/PageTitle' import Link from 'next/link' import LineChart from '../components/graph/LineChart' +import { SingleBar } from '../components/graph/SingleBar' + +import { dataEconomiaBruta } from '../services/economiaBruta' +import { dataEconomiaIndicador } from '../services/economiaIndicador' +import { EconomiaAcumulada } from '../services/economiaAcumulada' +import Chart from '../components/graph/Chart' export default function Dashboard() { @@ -27,10 +33,14 @@ export default function Dashboard() {
- {/* */} + + + + + + + - -
) diff --git a/src/pages/estimatedCost.tsx b/src/pages/estimatedCost.tsx index 06070e7..92675e5 100644 --- a/src/pages/estimatedCost.tsx +++ b/src/pages/estimatedCost.tsx @@ -1,8 +1,10 @@ import React from 'react' import Chart from '../components/graph/Chart' +import { LineBarChart } from '../components/graph/LineBarChart' import Header from '../components/header/Header' import PageTitle from '../components/pageTitle/PageTitle' +import { ConsumoEstimado } from '../services/consumoEstimado' import { EstimatedCostView } from '../styles/layouts/economy/estimatedCost/EstimatedCostView' @@ -12,7 +14,7 @@ export default function EstimatedCost() {
- +
) diff --git a/src/pages/grossSavings.tsx b/src/pages/grossSavings.tsx index 638f2ad..7e3aaf3 100644 --- a/src/pages/grossSavings.tsx +++ b/src/pages/grossSavings.tsx @@ -1,8 +1,10 @@ import React from 'react' import Chart from '../components/graph/Chart' +import { SingleBar } from '../components/graph/SingleBar' import Header from '../components/header/Header' import PageTitle from '../components/pageTitle/PageTitle' +import { dataEconomiaBruta } from '../services/economiaBruta' import { GrossSavingsView } from '../styles/layouts/economy/grossSavings/GrossSavings' @@ -12,7 +14,7 @@ export default function GrossSavings() {
- +
) diff --git a/src/pages/pld/index.tsx b/src/pages/pld/index.tsx index 1db412a..f4f21e1 100644 --- a/src/pages/pld/index.tsx +++ b/src/pages/pld/index.tsx @@ -14,6 +14,8 @@ import PageTitle from '../../components/pageTitle/PageTitle'; import Link from 'next/link'; import LineChart from '../../components/graph/LineChart'; import { LineBarChart } from '../../components/graph/LineBarChart'; +import { EconomiaAcumulada } from '../../services/economiaAcumulada'; +import { EvolucaoPld } from '../../services/evolucaoPld'; export default function region() { const router = useRouter() @@ -30,39 +32,6 @@ export default function region() { console.log(page) }, [page]) - 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: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], - 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 (
- + @@ -243,7 +212,7 @@ export default function region() { - +
diff --git a/src/services/economiaAcumulada.js b/src/services/economiaAcumulada.js index 4e3ba0d..bbc1388 100644 --- a/src/services/economiaAcumulada.js +++ b/src/services/economiaAcumulada.js @@ -1,5 +1,15 @@ export const EconomiaAcumulada = { -data : [872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294], -data1 : [1445, 1615], -label: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez'] + data : [872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294], + data1 : [1445, 1615], + data2 : [872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872, 903, 938, 985, 1021, 1055], + + data3: [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], + data4: [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], + data5: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], + data6: [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], + + + label: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez'], + label1: ['1', '2', '3', '4', '5', '6', '7', '8', '8', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'], + label3: ['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',] } diff --git a/src/services/economiaBruta.js b/src/services/economiaBruta.js index 2c38d30..86a9bba 100644 --- a/src/services/economiaBruta.js +++ b/src/services/economiaBruta.js @@ -1 +1,4 @@ -export const dataEconomiaBruta=[872, 1.615, 2.196, 3.838, 4.814, 5.853] +export const dataEconomiaBruta = { + data: [872, 1615, 2196, 2930, 3838, 4814, 5853], + labels: ['até 2020', '2021', '2022', '2023', '2024', '2025', '2026'] +} diff --git a/src/services/economiaIndicador.js b/src/services/economiaIndicador.js index 24a4a49..23e4a8e 100644 --- a/src/services/economiaIndicador.js +++ b/src/services/economiaIndicador.js @@ -1 +1,5 @@ -export const data = [] +export const dataEconomiaIndicador = { + data1: [591, 552, 527, 1138, 529, 478, 456, 515, 526, 731, 890, 742], + data2: [714, 683, 547, 575, 660, 628, 699, 751, 819, 700], + labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez'] +} diff --git a/src/services/evolucaoPld.js b/src/services/evolucaoPld.js index 1addf7e..1a400d6 100644 --- a/src/services/evolucaoPld.js +++ b/src/services/evolucaoPld.js @@ -5,4 +5,4 @@ export const EvolucaoPld = { data1 :[97.00, 98.00, 99.00, 100.00, 105.00, 113.00, 116.00, 120.00, 123.00, 120.00, 120.00, 118.00, 113.00, 101.00, 100.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00], label: ['1', '2', '3', '4', '5', '6', '7', '8', '8', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'] - } +} diff --git a/src/styles/layouts/consumption/ConsumptionView.ts b/src/styles/layouts/consumption/ConsumptionView.ts index 2a6c7ee..05f8ad7 100644 --- a/src/styles/layouts/consumption/ConsumptionView.ts +++ b/src/styles/layouts/consumption/ConsumptionView.ts @@ -11,8 +11,5 @@ export const ConsumptionView = styled.main` justify-content: center; align-items: center; - canvas { - margin: 160px 0 0 0 - } } ` diff --git a/src/styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView.ts b/src/styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView.ts index 28f0617..8ea5176 100644 --- a/src/styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView.ts +++ b/src/styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView.ts @@ -12,7 +12,6 @@ export const AccumulatedSavingsView = styled.main` align-items: center; canvas { - margin: 160px 0 0 0; } } ` diff --git a/src/styles/layouts/economy/costIndicator/CostIndicatorView.ts b/src/styles/layouts/economy/costIndicator/CostIndicatorView.ts index 33845ce..0932f97 100644 --- a/src/styles/layouts/economy/costIndicator/CostIndicatorView.ts +++ b/src/styles/layouts/economy/costIndicator/CostIndicatorView.ts @@ -9,10 +9,6 @@ export const CostIndicatorView = styled.main` section { display: flex; justify-content: center; - align-items: center; - - canvas { - margin: 160px 0 0 0; - } + align-items: center } ` diff --git a/src/styles/layouts/economy/estimatedCost/EstimatedCostView.ts b/src/styles/layouts/economy/estimatedCost/EstimatedCostView.ts index 26709e4..d6a9d70 100644 --- a/src/styles/layouts/economy/estimatedCost/EstimatedCostView.ts +++ b/src/styles/layouts/economy/estimatedCost/EstimatedCostView.ts @@ -12,7 +12,6 @@ export const EstimatedCostView = styled.main` align-items: center; canvas { - margin: 160px 0 0 0; } } ` diff --git a/src/styles/layouts/economy/grossSavings/GrossSavings.ts b/src/styles/layouts/economy/grossSavings/GrossSavings.ts index 69727be..15d10ac 100644 --- a/src/styles/layouts/economy/grossSavings/GrossSavings.ts +++ b/src/styles/layouts/economy/grossSavings/GrossSavings.ts @@ -22,7 +22,6 @@ export const GrossSavingsView = styled.main` align-items: center; canvas { - margin: 160px 0 0 0; } } ` diff --git a/src/styles/layouts/pld/PldView.ts b/src/styles/layouts/pld/PldView.ts index 52be951..fdfce8b 100644 --- a/src/styles/layouts/pld/PldView.ts +++ b/src/styles/layouts/pld/PldView.ts @@ -168,10 +168,10 @@ export const PldGraphView = styled.main` :first-child { justify-content: space-around; - margin-bottom: 50px; } :nth-child(2) { margin-top: 50px; + margin-bottom: 50px; justify-content: space-evenly; }