integrate charts
This commit is contained in:
joseCorte-exe
parent
a6feabd9de
commit
624719bd48
@ -25,38 +25,38 @@ ChartJS.register(
|
||||
Tooltip
|
||||
);
|
||||
|
||||
function triggerTooltip(chart: ChartJS | null) {
|
||||
const tooltip = chart?.tooltip;
|
||||
// function triggerTooltip(chart: ChartJS | null) {
|
||||
// const tooltip = chart?.tooltip;
|
||||
|
||||
if (!tooltip) {
|
||||
return;
|
||||
}
|
||||
// if (!tooltip) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
if (tooltip.getActiveElements().length > 0) {
|
||||
tooltip.setActiveElements([], { x: 0, y: 0 });
|
||||
} else {
|
||||
const { chartArea } = chart;
|
||||
// if (tooltip.getActiveElements().length > 0) {
|
||||
// tooltip.setActiveElements([], { x: 0, y: 0 });
|
||||
// } else {
|
||||
// const { chartArea } = chart;
|
||||
|
||||
tooltip.setActiveElements(
|
||||
[
|
||||
{
|
||||
datasetIndex: 0,
|
||||
index: 2,
|
||||
},
|
||||
{
|
||||
datasetIndex: 1,
|
||||
index: 2,
|
||||
},
|
||||
],
|
||||
{
|
||||
x: (chartArea.left + chartArea.right) / 2,
|
||||
y: (chartArea.top + chartArea.bottom) / 2,
|
||||
}
|
||||
);
|
||||
}
|
||||
// tooltip.setActiveElements(
|
||||
// [
|
||||
// {
|
||||
// datasetIndex: 0,
|
||||
// index: 2,
|
||||
// },
|
||||
// {
|
||||
// datasetIndex: 1,
|
||||
// index: 2,
|
||||
// },
|
||||
// ],
|
||||
// {
|
||||
// x: (chartArea.left + chartArea.right) / 2,
|
||||
// y: (chartArea.top + chartArea.bottom) / 2,
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
|
||||
chart.update();
|
||||
}
|
||||
// chart.update();
|
||||
// }
|
||||
|
||||
interface LineBarChartInterface {
|
||||
title: string,
|
||||
@ -119,7 +119,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
|
||||
},
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
data: data1.map(value => value),
|
||||
data: data1.map(value => value.value),
|
||||
},
|
||||
{
|
||||
type: 'bar' as const,
|
||||
@ -127,7 +127,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
|
||||
backgroundColor: (value, ctx) => {
|
||||
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
|
||||
},
|
||||
data: data3.map(value => value),
|
||||
data: data3.map(value => value.value),
|
||||
},
|
||||
{
|
||||
type: 'bar' as const,
|
||||
@ -136,7 +136,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
|
||||
backgroundColor: (value, ctx) => {
|
||||
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
|
||||
},
|
||||
data: data2.map(value => value),
|
||||
data: data2.map(value => value.value),
|
||||
},
|
||||
],
|
||||
} : {
|
||||
@ -149,13 +149,13 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
|
||||
'#f00' : '#0c9200',
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
data: data1.map(value => value),
|
||||
data: data1.map(value => value.value),
|
||||
},
|
||||
{
|
||||
type: 'bar' as const,
|
||||
label: dataset3? dataset3 : 'Dataset 2',
|
||||
backgroundColor: '#255488',
|
||||
data: data3.map(value => value),
|
||||
data: data3.map(value => value.value),
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -163,7 +163,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
|
||||
useEffect(() => {
|
||||
const chart = chartRef.current;
|
||||
|
||||
triggerTooltip(chart);
|
||||
// triggerTooltip(chart);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
||||
177
src/components/graph/LineBarChart2.tsx
Normal file
177
src/components/graph/LineBarChart2.tsx
Normal file
@ -0,0 +1,177 @@
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
LinearScale,
|
||||
CategoryScale,
|
||||
BarElement,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Legend,
|
||||
Tooltip,
|
||||
} from 'chart.js';
|
||||
import { Chart } from 'react-chartjs-2';
|
||||
import faker from 'faker';
|
||||
import { ChartView } from './ChartView';
|
||||
import ChartTitle from './ChartTitle';
|
||||
import pattern from 'patternomaly'
|
||||
|
||||
ChartJS.register(
|
||||
LinearScale,
|
||||
CategoryScale,
|
||||
BarElement,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Legend,
|
||||
Tooltip
|
||||
);
|
||||
|
||||
// function triggerTooltip(chart: ChartJS | null) {
|
||||
// const tooltip = chart?.tooltip;
|
||||
|
||||
// if (!tooltip) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// if (tooltip.getActiveElements().length > 0) {
|
||||
// tooltip.setActiveElements([], { x: 0, y: 0 });
|
||||
// } else {
|
||||
// const { chartArea } = chart;
|
||||
|
||||
// tooltip.setActiveElements(
|
||||
// [
|
||||
// {
|
||||
// datasetIndex: 0,
|
||||
// index: 2,
|
||||
// },
|
||||
// {
|
||||
// datasetIndex: 1,
|
||||
// index: 2,
|
||||
// },
|
||||
// ],
|
||||
// {
|
||||
// x: (chartArea.left + chartArea.right) / 2,
|
||||
// y: (chartArea.top + chartArea.bottom) / 2,
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
|
||||
// chart.update();
|
||||
// }
|
||||
|
||||
interface LineBarChartInterface {
|
||||
title: string,
|
||||
subtitle: string,
|
||||
data1: any,
|
||||
data2?: any,
|
||||
data3: any,
|
||||
red?: any,
|
||||
label: any,
|
||||
dataset1?: string,
|
||||
dataset2?: string,
|
||||
dataset3?: string,
|
||||
barLabel?: boolean | undefined,
|
||||
hashurado?: boolean | undefined,
|
||||
}
|
||||
|
||||
export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3, barLabel, hashurado }: LineBarChartInterface) {
|
||||
const chartRef = useRef<ChartJS>(null);
|
||||
|
||||
const currentTime = new Date();
|
||||
|
||||
|
||||
const labels = label
|
||||
|
||||
const options: any = {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
datalabels: {
|
||||
display: true,
|
||||
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
|
||||
// backgroundColor: '#255488',
|
||||
formatter: Math.round,
|
||||
anchor: "end",
|
||||
offset: -20,
|
||||
align: "start",
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom' as const,
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: '',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const data = data2? {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
type: 'line' as const,
|
||||
label: dataset1? dataset1 : 'Dataset 1',
|
||||
borderColor: red?
|
||||
'#f00' : '#0c9200',
|
||||
datalabels: {
|
||||
backgroundColor: 'white'
|
||||
},
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
data: data1.map(value => value),
|
||||
},
|
||||
{
|
||||
type: 'bar' as const,
|
||||
label: dataset2? dataset2 : 'Dataset 2',
|
||||
backgroundColor: (value, ctx) => {
|
||||
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
|
||||
},
|
||||
data: data3.map(value => value),
|
||||
},
|
||||
{
|
||||
type: 'bar' as const,
|
||||
label: dataset3? dataset3 : 'Dataset 2',
|
||||
// backgroundColor: '#255488',
|
||||
backgroundColor: (value, ctx) => {
|
||||
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#255488' : pattern.draw('diagonal', '#255488') : '#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),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const chart = chartRef.current;
|
||||
|
||||
// triggerTooltip(chart);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ChartView>
|
||||
<ChartTitle title={title} subtitle={subtitle}/>
|
||||
<div>
|
||||
<Chart ref={chartRef} type='bar' options={options} data={data} />
|
||||
</div>
|
||||
</ChartView>
|
||||
)
|
||||
}
|
||||
@ -75,25 +75,25 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
|
||||
datasets: [
|
||||
{
|
||||
label: dataset1? dataset1 : 'Dataset 1',
|
||||
data: data1.map(value => value),
|
||||
data: data1.map(value => value.value),
|
||||
borderColor: 'rgb(53, 162, 235)',
|
||||
backgroundColor: 'rgba(53, 162, 235, 0.5)',
|
||||
},
|
||||
{
|
||||
label: dataset2? dataset2 : '',
|
||||
data: data2.map(value => value),
|
||||
data: data2.map(value => value.value),
|
||||
borderColor: 'rgb(255, 114, 32)' ,
|
||||
backgroundColor: 'rgba(255, 145, 0, 0.5)' ,
|
||||
},
|
||||
{
|
||||
label: dataset3? dataset3 : '',
|
||||
data: data3.map(value => value),
|
||||
data: data3.map(value => value.value),
|
||||
borderColor: 'rgb(109, 109, 109)' ,
|
||||
backgroundColor: 'rgba(90, 90, 90, 0.5)',
|
||||
},
|
||||
{
|
||||
label: dataset4? dataset4 : '',
|
||||
data: data4.map(value => value),
|
||||
data: data4.map(value => value.value),
|
||||
borderColor: 'rgb(255, 166, 0)',
|
||||
backgroundColor: 'rgba(255, 187, 0, 0.5)',
|
||||
},
|
||||
@ -103,19 +103,19 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
|
||||
datasets: [
|
||||
{
|
||||
label: dataset1? dataset1 : 'Dataset 1',
|
||||
data: data1.map(value => value),
|
||||
data: data1.map(value => value.value),
|
||||
borderColor: 'rgb(53, 162, 235)',
|
||||
backgroundColor: 'rgba(53, 162, 235, 0.5)',
|
||||
},
|
||||
{
|
||||
label: dataset2? dataset2 : '',
|
||||
data: data2.map(value => value),
|
||||
data: data2.map(value => value.value),
|
||||
borderColor: 'rgb(255, 114, 32)' ,
|
||||
backgroundColor: 'rgba(255, 145, 0, 0.5)' ,
|
||||
},
|
||||
{
|
||||
label: dataset3? dataset3 : '',
|
||||
data: data3.map(value => value),
|
||||
data: data3.map(value => value.value),
|
||||
borderColor: 'rgb(109, 109, 109)' ,
|
||||
backgroundColor: 'rgba(90, 90, 90, 0)',
|
||||
},
|
||||
@ -125,13 +125,13 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
|
||||
datasets: [
|
||||
{
|
||||
label: dataset1? dataset1 : 'Dataset 1',
|
||||
data: data1.map(value => value),
|
||||
data: data1.map(value => value.value),
|
||||
borderColor: 'rgb(53, 162, 235)',
|
||||
backgroundColor: 'rgba(53, 162, 235, 0)',
|
||||
},
|
||||
{
|
||||
label: dataset2? dataset2 : '',
|
||||
data: data2.map(value => value),
|
||||
data: data2.map(value => value.value),
|
||||
borderColor: 'rgb(255, 114, 32)' ,
|
||||
backgroundColor: 'rgba(255, 145, 0, 0)' ,
|
||||
},
|
||||
@ -141,7 +141,7 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
|
||||
datasets: [
|
||||
{
|
||||
label: dataset1? dataset1 : 'Dataset 1',
|
||||
data: data1.map(value => value),
|
||||
data: data1.map(value => value.value),
|
||||
borderColor: 'rgb(53, 162, 235)',
|
||||
backgroundColor: 'rgba(53, 162, 235, 0)',
|
||||
},
|
||||
|
||||
@ -8,11 +8,11 @@ import { parseCookies } from 'nookies';
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
import BasicButton from '../../components/buttons/basicButton/BasicButton';
|
||||
import Chart from '../../components/graph/Chart';
|
||||
import { LineBarChart } from '../../components/graph/LineBarChart';
|
||||
import LineChart from '../../components/graph/LineChart';
|
||||
import Header from '../../components/header/Header'
|
||||
import PageTitle from '../../components/pageTitle/PageTitle';
|
||||
import { api } from '../../services/api';
|
||||
import { EconomiaAcumulada } from '../../services/economiaAcumulada';
|
||||
import { EvolucaoPld } from '../../services/evolucaoPld';
|
||||
import getAPIClient from '../../services/ssrApi';
|
||||
@ -29,18 +29,98 @@ export default function pld({tableData, graphByHourData, graphByMonthData}: pldI
|
||||
const router = useRouter()
|
||||
const { region } = router.query
|
||||
|
||||
const [date, setDate] = useState('');
|
||||
const [select, setSelect] = useState('NORDESTE');
|
||||
const [page, setPage] = useState<string>('table')
|
||||
const [age, setAge] = React.useState('');
|
||||
const [day, setDay] = useState<string>('2')
|
||||
|
||||
const [dataByDay, setDataByDay] = useState([])
|
||||
|
||||
const [sul, setSul] = useState([])
|
||||
const [norte, setNorte] = useState([])
|
||||
const [sudeste, setSudeste] = useState([])
|
||||
const [nordeste, setNordeste] = useState([])
|
||||
|
||||
const handleChange = (event: SelectChangeEvent) => {
|
||||
setAge(event.target.value);
|
||||
setSelect(event.target.value);
|
||||
};
|
||||
const handleChangeDay = (event: SelectChangeEvent) => {
|
||||
setDay(event.target.value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log(page)
|
||||
}, [page])
|
||||
const 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']
|
||||
|
||||
function handleGreen(minimo, mi, ma, maximo) {
|
||||
function getDataByDay() {
|
||||
api.post('/pld/daily', {
|
||||
"limit": 20,
|
||||
"offset": 0,
|
||||
"filters": [
|
||||
{"type" : "=", "field" : "mes_ref", "value": `${day}/2022`, "row": true},
|
||||
{"type" : "=", "field" : "pld.submercado", "value": select}
|
||||
],
|
||||
"order": [{ "field": "day_calc", "direction": "asc" }]
|
||||
}).then(res => {
|
||||
setDataByDay(res.data.data)
|
||||
}).catch(exception => console.log(exception))
|
||||
}
|
||||
|
||||
function getDataByHour() {
|
||||
api.post('/pld/schedule', {
|
||||
"limit": 20,
|
||||
"offset": 0,
|
||||
"filters": [
|
||||
{"type" : "=", "field" : "dia_num", "value": date, "row": true},
|
||||
{"type" : "=", "field" : "submercado", "value": "SUL"}
|
||||
],
|
||||
"order": [{ "field": "hour", "direction": "asc" }]
|
||||
}).then(res => {
|
||||
setSul(res.data.data)
|
||||
}).catch(exception => console.log(exception))
|
||||
|
||||
api.post('/pld/schedule', {
|
||||
"limit": 20,
|
||||
"offset": 0,
|
||||
"filters": [
|
||||
{"type" : "=", "field" : "dia_num", "value": date, "row": true},
|
||||
{"type" : "=", "field" : "submercado", "value": "SUDESTE"}
|
||||
],
|
||||
"order": [{ "field": "hour", "direction": "asc" }]
|
||||
}).then(res => {
|
||||
setSudeste(res.data.data)
|
||||
}).catch(exception => console.log(exception))
|
||||
|
||||
api.post('/pld/schedule', {
|
||||
"limit": 20,
|
||||
"offset": 0,
|
||||
"filters": [
|
||||
{"type" : "=", "field" : "dia_num", "value": date, "row": true},
|
||||
{"type" : "=", "field" : "submercado", "value": "NORTE"}
|
||||
],
|
||||
"order": [{ "field": "hour", "direction": "asc" }]
|
||||
}).then(res => {
|
||||
setNorte(res.data.data)
|
||||
}).catch(exception => console.log(exception))
|
||||
|
||||
api.post('/pld/schedule', {
|
||||
"limit": 20,
|
||||
"offset": 0,
|
||||
"filters": [
|
||||
{"type" : "=", "field" : "dia_num", "value": date, "row": true},
|
||||
{"type" : "=", "field" : "submercado", "value": "NORDESTE"}
|
||||
],
|
||||
"order": [{ "field": "hour", "direction": "asc" }]
|
||||
}).then(res => {
|
||||
setNordeste(res.data.data)
|
||||
}).catch(exception => console.log(exception))
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getDataByHour()
|
||||
getDataByDay()
|
||||
console.log(dataByDay)
|
||||
}, [date, day, select])
|
||||
|
||||
function handleCellColor(minimo, mi, ma, maximo) {
|
||||
if (minimo - mi >= 100 && minimo - mi < 200) {
|
||||
return 'green'
|
||||
} else if ( mi*2 >= 200 && mi*2 < 250 ) {
|
||||
@ -131,23 +211,65 @@ export default function pld({tableData, graphByHourData, graphByMonthData}: pldI
|
||||
<section className='toolsbar'>
|
||||
<div className='select'>
|
||||
<Select
|
||||
value={age}
|
||||
value={select}
|
||||
onChange={handleChange}
|
||||
displayEmpty
|
||||
sx={{
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<MenuItem value={0}>Norte</MenuItem>
|
||||
<MenuItem value={10}>Nordeste</MenuItem>
|
||||
<MenuItem value={20}>Sul</MenuItem>
|
||||
<MenuItem value={30}>Sudeste</MenuItem>
|
||||
<MenuItem value={'NORTE'}>Norte</MenuItem>
|
||||
<MenuItem value={'NORDESTE'}>Nordeste</MenuItem>
|
||||
<MenuItem value={'SUL'}>Sul</MenuItem>
|
||||
<MenuItem value={'SUDESTE'}>Sudeste</MenuItem>
|
||||
</Select>
|
||||
</div>
|
||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
|
||||
<Select
|
||||
value={day}
|
||||
onChange={handleChangeDay}
|
||||
displayEmpty
|
||||
sx={{
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<MenuItem value={'01'}>01</MenuItem>
|
||||
<MenuItem value={'02'}>02</MenuItem>
|
||||
<MenuItem value={'03'}>03</MenuItem>
|
||||
<MenuItem value={'04'}>04</MenuItem>
|
||||
<MenuItem value={'05'}>05</MenuItem>
|
||||
<MenuItem value={'06'}>06</MenuItem>
|
||||
<MenuItem value={'07'}>07</MenuItem>
|
||||
<MenuItem value={'08'}>08</MenuItem>
|
||||
<MenuItem value={'09'}>09</MenuItem>
|
||||
<MenuItem value={'10'}>10</MenuItem>
|
||||
<MenuItem value={'11'}>11</MenuItem>
|
||||
<MenuItem value={'12'}>12</MenuItem>
|
||||
<MenuItem value={'13'}>13</MenuItem>
|
||||
<MenuItem value={'14'}>14</MenuItem>
|
||||
<MenuItem value={'15'}>15</MenuItem>
|
||||
<MenuItem value={'16'}>16</MenuItem>
|
||||
<MenuItem value={'17'}>17</MenuItem>
|
||||
<MenuItem value={'18'}>18</MenuItem>
|
||||
<MenuItem value={'19'}>19</MenuItem>
|
||||
<MenuItem value={'20'}>20</MenuItem>
|
||||
<MenuItem value={'21'}>21</MenuItem>
|
||||
<MenuItem value={'22'}>22</MenuItem>
|
||||
<MenuItem value={'23'}>23</MenuItem>
|
||||
<MenuItem value={'24'}>24</MenuItem>
|
||||
<MenuItem value={'25'}>25</MenuItem>
|
||||
<MenuItem value={'26'}>26</MenuItem>
|
||||
<MenuItem value={'27'}>27</MenuItem>
|
||||
<MenuItem value={'28'}>28</MenuItem>
|
||||
<MenuItem value={'29'}>29</MenuItem>
|
||||
<MenuItem value={'30'}>30</MenuItem>
|
||||
</Select>
|
||||
<BasicButton title='Download (csv)' onClick={() => console.log()}/>
|
||||
</section>
|
||||
<LineBarChart data1={EvolucaoPld.data} data3={EvolucaoPld.data1} dataset1={'Economia'} dataset2={'barra1'} dataset3={'2021'} label={EvolucaoPld.label} title='Evolução PLD (R$/MWh)' subtitle='' />
|
||||
<LineBarChart
|
||||
data1={dataByDay} data3={dataByDay}
|
||||
dataset1={'Economia'} dataset2={'barra1'} dataset3={'2021'}
|
||||
label={EvolucaoPld.label}
|
||||
title='Evolução PLD (R$/MWh)' subtitle='' />
|
||||
</PldGraphView>
|
||||
</RenderIf>
|
||||
|
||||
@ -156,10 +278,13 @@ export default function pld({tableData, graphByHourData, graphByMonthData}: pldI
|
||||
<PldGraphView>
|
||||
<PageTitle title='Resumo PLD - Horas' subtitle=''/>
|
||||
<section className='toolsbar'>
|
||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2021-09-19"/>
|
||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={date} onChange={(value) => setDate(value.target.value)}/>
|
||||
<BasicButton title='Download (csv)' onClick={() => console.log()}/>
|
||||
</section>
|
||||
<LineChart data1={EconomiaAcumulada.data3} data2={EconomiaAcumulada.data4} data3={EconomiaAcumulada.data5} data4={EconomiaAcumulada.data6} dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL' title='PLD - 19/09/21' subtitle='' label={EconomiaAcumulada.label1} />
|
||||
<LineChart data1={nordeste} data2={norte} data3={sudeste} data4={sul}
|
||||
dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL'
|
||||
title={`PLD - ${date}`}
|
||||
subtitle='' label={['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']} />
|
||||
</PldGraphView>
|
||||
</RenderIf>
|
||||
</main>
|
||||
@ -173,7 +298,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
let tableData = [];
|
||||
|
||||
await apiClient.post('/pld/list').then(res => {
|
||||
tableData = res.data
|
||||
tableData = res.data.data
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
@ -10,6 +10,6 @@ export const EconomiaAcumulada = {
|
||||
|
||||
|
||||
label: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez'],
|
||||
label1: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
|
||||
label1: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],
|
||||
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',]
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user