Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

✨ add charts

Browse Source
This commit is contained in:
joseCorte-exe 2022-05-17 13:52:44 -03:00
parent 83b035e262
commit ed10b5d050
21 changed files with 198 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/graph/Chart.tsx
View File

@ -14,6 +14,8 @@ import {
import faker from 'faker' import faker from 'faker'
import { ChartView } from './ChartView'; import { ChartView } from './ChartView';
import RenderIf from '../../utils/renderIf'; import RenderIf from '../../utils/renderIf';
import ChartTitle from './ChartTitle';
import { data } from './LineBarChart';
ChartJS.register( ChartJS.register(
CategoryScale, CategoryScale,
@ -26,15 +28,33 @@ ChartJS.register(
interface ChartInterface { interface ChartInterface {
title: string, title: string,
data?: any, subtitle: string,
data1: any,
data2: any,
single?: any single?: any
label: any
} }
export default function Chart({ title, single, data }: ChartInterface) { export default function Chart({ title, data1, data2, label, subtitle }: ChartInterface) {
const [ graphData, setGraphData ] = useState({
labels: [], const labels = label;
datasets: [],
}) const data = {
labels,
datasets: [
{
label: '2020',
data: data1.map(value => value),
backgroundColor: '#C2D5FB',
},
{
label: '2021',
data: data2.map(value => value),
backgroundColor: '#255488',
},
],
}
const options = { const options = {
responsive: true, responsive: true,
plugins: { plugins: {
@ -43,43 +63,24 @@ export default function Chart({ title, single, data }: ChartInterface) {
}, },
title: { title: {
display: true, 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 ( return (
<ChartView> <ChartView>
<RenderIf isTrue={single? true : false} > {/* <RenderIf isTrue={single? true : false} >
<Bar <Bar
options={options} options={options}
data={graphData} data={graphData}
/> />
</RenderIf> </RenderIf> */}
<ChartTitle title={title} subtitle={subtitle} />
<Bar <Bar
options={options} options={options}
data={graphData} data={data}
/> />
</ChartView> </ChartView>
) )

8
src/components/graph/ChartView.ts
View File

@ -9,5 +9,13 @@ export const ChartView = styled.div`
` `
export const ChartTitleView = styled.div` export const ChartTitleView = styled.div`
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
* {
margin: 0;
}
` `

63
src/components/graph/LineBarChart.tsx
View File

@ -12,6 +12,7 @@ import {
import { Chart } from 'react-chartjs-2'; import { Chart } from 'react-chartjs-2';
import faker from 'faker'; import faker from 'faker';
import { ChartView } from './ChartView'; import { ChartView } from './ChartView';
import ChartTitle from './ChartTitle';
ChartJS.register( ChartJS.register(
LinearScale, LinearScale,
@ -23,28 +24,6 @@ ChartJS.register(
Tooltip 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) { function triggerTooltip(chart: ChartJS | null) {
const tooltip = chart?.tooltip; const tooltip = chart?.tooltip;
@ -78,9 +57,46 @@ function triggerTooltip(chart: ChartJS | null) {
chart.update(); 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<ChartJS>(null); const chartRef = useRef<ChartJS>(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(() => { useEffect(() => {
const chart = chartRef.current; const chart = chartRef.current;
@ -89,6 +105,7 @@ export function LineBarChart() {
return ( return (
<ChartView> <ChartView>
<ChartTitle title={title} subtitle={subtitle}/>
<Chart ref={chartRef} type='bar' data={data} /> <Chart ref={chartRef} type='bar' data={data} />
</ChartView> </ChartView>
) )

90
src/components/graph/LineChart.tsx
View File

@ -41,6 +41,7 @@ import {
} from 'chart.js'; } from 'chart.js';
// import { Line } from 'react-chartjs-2'; // import { Line } from 'react-chartjs-2';
import faker from 'faker'; import faker from 'faker';
import ChartTitle from './ChartTitle';
ChartJS.register( ChartJS.register(
CategoryScale, CategoryScale,
@ -55,47 +56,15 @@ ChartJS.register(
interface ChartInterface { interface ChartInterface {
title: string, title: string,
datas: any subtitle: string,
data1: any,
data2?: any,
data3?: any,
data4?: any,
label: any,
} }
export default function LineChart({ title, datas }: ChartInterface) { export default function LineChart({ title, subtitle, data1, data2, data3, data4, label }: 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',
// },
// ],
// })
// }, [])
const options = { const options = {
responsive: true, responsive: true,
plugins: { plugins: {
@ -104,45 +73,46 @@ export default function LineChart({ title, datas }: ChartInterface) {
}, },
title: { title: {
display: true, 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 = { 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: data1.map(value => value),
// 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: data2.map(value => value),
// 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: datas, data: data3.map(value => value),
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: data4.map(value => value),
// 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 ( return (
<ChartView> <ChartView>
<ChartTitle title={title} subtitle={subtitle} />
<Line options={options} data={data} /> <Line options={options} data={data} />
</ChartView> </ChartView>
) )

28
src/components/graph/SingleBar.tsx
View File

@ -11,6 +11,9 @@ import {
import { Bar } from 'react-chartjs-2'; import { Bar } from 'react-chartjs-2';
import faker from 'faker'; import faker from 'faker';
import { ChartView } from './ChartView'; import { ChartView } from './ChartView';
import ChartTitle from './ChartTitle';
import { dataEconomiaBruta } from '../../services/economiaBruta'
ChartJS.register( ChartJS.register(
CategoryScale, CategoryScale,
@ -21,7 +24,15 @@ ChartJS.register(
Legend Legend
); );
export const options = { interface SingleBarInterface{
title: string,
subtitle: string,
dataProps: any,
label: any
}
export function SingleBar({ title, subtitle, dataProps, label }: SingleBarInterface) {
const options = {
responsive: true, responsive: true,
plugins: { plugins: {
legend: { legend: {
@ -29,27 +40,26 @@ export const options = {
}, },
title: { title: {
display: true, display: true,
text: 'Chart.js Bar Chart', text: '',
}, },
}, },
}; };
const labels = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez']; const labels = label;
export const data = { const data = {
labels, labels,
datasets: [ datasets: [
{ {
label: 'Dataset 2', label: 'Dataset 2',
data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })), data: dataProps.map(value => value),
backgroundColor: '#255488', backgroundColor: '#255488',
}, },
], ],
}; };
export function SingleBar() {
return ( return (
<ChartView> <ChartView>
<ChartTitle title={title} subtitle={subtitle} />
<Bar options={options} data={data} /> <Bar options={options} data={data} />
</ChartView> </ChartView>
) )

4
src/pages/accumulatedSavings.tsx
View File

@ -1,8 +1,10 @@
import React from 'react' import React from 'react'
import Chart from '../components/graph/Chart' import Chart from '../components/graph/Chart'
import { SingleBar } from '../components/graph/SingleBar'
import Header from '../components/header/Header' import Header from '../components/header/Header'
import PageTitle from '../components/pageTitle/PageTitle' import PageTitle from '../components/pageTitle/PageTitle'
import { EconomiaAcumulada } from '../services/economiaAcumulada'
import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView' import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView'
@ -12,7 +14,7 @@ export default function AccumulatedSavings() {
<Header name='' /> <Header name='' />
<PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' /> <PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
<section> <section>
<Chart title='Indicador de custo' /> <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' label={EconomiaAcumulada.label1} dataProps={EconomiaAcumulada.data2} />
</section> </section>
</AccumulatedSavingsView> </AccumulatedSavingsView>
) )

5
src/pages/costIndicator.tsx
View File

@ -1,8 +1,11 @@
import React from 'react' import React from 'react'
import Chart from '../components/graph/Chart' import Chart from '../components/graph/Chart'
import { SingleBar } from '../components/graph/SingleBar'
import Header from '../components/header/Header' import Header from '../components/header/Header'
import PageTitle from '../components/pageTitle/PageTitle' import PageTitle from '../components/pageTitle/PageTitle'
import { dataEconomiaBruta } from '../services/economiaBruta'
import { dataEconomiaIndicador } from '../services/economiaIndicador'
import { CostIndicatorView } from '../styles/layouts/economy/costIndicator/CostIndicatorView' import { CostIndicatorView } from '../styles/layouts/economy/costIndicator/CostIndicatorView'
export default function CostIndicator() { export default function CostIndicator() {
@ -11,7 +14,7 @@ export default function CostIndicator() {
<Header name='' /> <Header name='' />
<PageTitle title='Indicador de Custo' subtitle='Valores em R$/MWh'/> <PageTitle title='Indicador de Custo' subtitle='Valores em R$/MWh'/>
<section> <section>
<Chart title='Indicador de custo' /> <Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} />
</section> </section>
</CostIndicatorView> </CostIndicatorView>
) )

16
src/pages/dashboard.tsx
View File

@ -8,6 +8,12 @@ import Header from '../components/header/Header'
import PageTitle from '../components/pageTitle/PageTitle' import PageTitle from '../components/pageTitle/PageTitle'
import Link from 'next/link' import Link from 'next/link'
import LineChart from '../components/graph/LineChart' 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() { export default function Dashboard() {
@ -27,10 +33,14 @@ export default function Dashboard() {
<section className='dashboard'> <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>
{/* <LineChart datas={dataEconomia} /> */} <LineChart data1={EconomiaAcumulada.data2} data2={[]} data3={[]} data4={[]} title='Consumo Acumulado' subtitle='' label={EconomiaAcumulada.label1} />
</GraphCard>
<GraphCard title='Indicador de Custo' subtitle='Valores em R$/ MWh'>
<Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} />
</GraphCard>
<GraphCard title='Economia Acumulado' subtitle='Economia Acumulado' className='footerGraph' singleBar>
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' label={EconomiaAcumulada.label1} dataProps={EconomiaAcumulada.data2} />
</GraphCard> </GraphCard>
<GraphCard title='Indicador de Custo' subtitle='Valores em R$/ MWh' />
<GraphCard title='Economia Acumulado' subtitle='Economia Acumulado' className='footerGraph' singleBar />
</section> </section>
</DashboardView> </DashboardView>
) )

4
src/pages/estimatedCost.tsx
View File

@ -1,8 +1,10 @@
import React from 'react' import React from 'react'
import Chart from '../components/graph/Chart' import Chart from '../components/graph/Chart'
import { LineBarChart } from '../components/graph/LineBarChart'
import Header from '../components/header/Header' import Header from '../components/header/Header'
import PageTitle from '../components/pageTitle/PageTitle' import PageTitle from '../components/pageTitle/PageTitle'
import { ConsumoEstimado } from '../services/consumoEstimado'
import { EstimatedCostView } from '../styles/layouts/economy/estimatedCost/EstimatedCostView' import { EstimatedCostView } from '../styles/layouts/economy/estimatedCost/EstimatedCostView'
@ -12,7 +14,7 @@ export default function EstimatedCost() {
<Header name='' /> <Header name='' />
<PageTitle title='Custos Estimados' subtitle='Comparativo de Custo Estimado' /> <PageTitle title='Custos Estimados' subtitle='Comparativo de Custo Estimado' />
<section> <section>
<Chart title='Indicador de custo' /> <LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} label={ConsumoEstimado.label} title='evolução pld' subtitle='' />
</section> </section>
</EstimatedCostView> </EstimatedCostView>
) )

4
src/pages/grossSavings.tsx
View File

@ -1,8 +1,10 @@
import React from 'react' import React from 'react'
import Chart from '../components/graph/Chart' import Chart from '../components/graph/Chart'
import { SingleBar } from '../components/graph/SingleBar'
import Header from '../components/header/Header' import Header from '../components/header/Header'
import PageTitle from '../components/pageTitle/PageTitle' import PageTitle from '../components/pageTitle/PageTitle'
import { dataEconomiaBruta } from '../services/economiaBruta'
import { GrossSavingsView } from '../styles/layouts/economy/grossSavings/GrossSavings' import { GrossSavingsView } from '../styles/layouts/economy/grossSavings/GrossSavings'
@ -12,7 +14,7 @@ export default function GrossSavings() {
<Header name='' /> <Header name='' />
<PageTitle title='Economia Bruta' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' /> <PageTitle title='Economia Bruta' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
<section> <section>
<Chart title='Indicador de custo' /> <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataProps={dataEconomiaBruta.data} />
</section> </section>
</GrossSavingsView> </GrossSavingsView>
) )

39
src/pages/pld/index.tsx
View File

@ -14,6 +14,8 @@ import PageTitle from '../../components/pageTitle/PageTitle';
import Link from 'next/link'; import Link from 'next/link';
import LineChart from '../../components/graph/LineChart'; import LineChart from '../../components/graph/LineChart';
import { LineBarChart } from '../../components/graph/LineBarChart'; import { LineBarChart } from '../../components/graph/LineBarChart';
import { EconomiaAcumulada } from '../../services/economiaAcumulada';
import { EvolucaoPld } from '../../services/evolucaoPld';
export default function region() { export default function region() {
const router = useRouter() const router = useRouter()
@ -30,39 +32,6 @@ export default function region() {
console.log(page) console.log(page)
}, [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 ( return (
<main style={{ <main style={{
width: '100%', width: '100%',
@ -231,7 +200,7 @@ export default function region() {
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/> <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
<BasicButton title='Download (csv)' /> <BasicButton title='Download (csv)' />
</section> </section>
<LineBarChart /> <LineBarChart data1={EvolucaoPld.data} data2={EvolucaoPld.data1} data3={[]} label={EvolucaoPld.label} title='evolução pld' subtitle='' />
</PldGraphView> </PldGraphView>
</RenderIf> </RenderIf>
@ -243,7 +212,7 @@ export default function region() {
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/> <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
<BasicButton title='Download (csv)' /> <BasicButton title='Download (csv)' />
</section> </section>
<LineChart title='' data={data}/> <LineChart data1={EconomiaAcumulada.data3} data2={EconomiaAcumulada.data4} data3={EconomiaAcumulada.data5} data4={EconomiaAcumulada.data6} title='Consumo Acumulado' subtitle='' label={EconomiaAcumulada.label1} />
</PldGraphView> </PldGraphView>
</RenderIf> </RenderIf>
</main> </main>

16
src/services/economiaAcumulada.js
View File

@ -1,5 +1,15 @@
export const EconomiaAcumulada = { export const EconomiaAcumulada = {
data : [872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294], data : [872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294],
data1 : [1445, 1615], data1 : [1445, 1615],
label: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez'] 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',]
} }

5
src/services/economiaBruta.js
View File

@ -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']
}

6
src/services/economiaIndicador.js
View File

@ -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']
}

2
src/services/evolucaoPld.js
View File

@ -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, 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], 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'] 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']
} }

3
src/styles/layouts/consumption/ConsumptionView.ts
View File

@ -11,8 +11,5 @@ export const ConsumptionView = styled.main`
justify-content: center; justify-content: center;
align-items: center; align-items: center;
canvas {
margin: 160px 0 0 0
}
} }
` `

1
src/styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView.ts
View File

@ -12,7 +12,6 @@ export const AccumulatedSavingsView = styled.main`
align-items: center; align-items: center;
canvas { canvas {
margin: 160px 0 0 0;
} }
} }
` `

6
src/styles/layouts/economy/costIndicator/CostIndicatorView.ts
View File

@ -9,10 +9,6 @@ export const CostIndicatorView = styled.main`
section { section {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center
canvas {
margin: 160px 0 0 0;
}
} }
` `

1
src/styles/layouts/economy/estimatedCost/EstimatedCostView.ts
View File

@ -12,7 +12,6 @@ export const EstimatedCostView = styled.main`
align-items: center; align-items: center;
canvas { canvas {
margin: 160px 0 0 0;
} }
} }
` `

1
src/styles/layouts/economy/grossSavings/GrossSavings.ts
View File

@ -22,7 +22,6 @@ export const GrossSavingsView = styled.main`
align-items: center; align-items: center;
canvas { canvas {
margin: 160px 0 0 0;
} }
} }
` `

2
src/styles/layouts/pld/PldView.ts
View File

@ -168,10 +168,10 @@ export const PldGraphView = styled.main`
:first-child { :first-child {
justify-content: space-around; justify-content: space-around;
margin-bottom: 50px;
} }
:nth-child(2) { :nth-child(2) {
margin-top: 50px; margin-top: 50px;
margin-bottom: 50px;
justify-content: space-evenly; justify-content: space-evenly;
} }