From 624719bd481f4dc849180c4d121d0cfd939a4bc9 Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Fri, 17 Jun 2022 16:24:23 -0300 Subject: [PATCH] integrate charts --- src/components/graph/LineBarChart.tsx | 68 +++++----- src/components/graph/LineBarChart2.tsx | 177 +++++++++++++++++++++++++ src/components/graph/LineChart.tsx | 20 +-- src/pages/pld/index.tsx | 159 +++++++++++++++++++--- src/services/economiaAcumulada.js | 2 +- 5 files changed, 364 insertions(+), 62 deletions(-) create mode 100644 src/components/graph/LineBarChart2.tsx diff --git a/src/components/graph/LineBarChart.tsx b/src/components/graph/LineBarChart.tsx index 60285ea..e73ba23 100644 --- a/src/components/graph/LineBarChart.tsx +++ b/src/components/graph/LineBarChart.tsx @@ -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 ( diff --git a/src/components/graph/LineBarChart2.tsx b/src/components/graph/LineBarChart2.tsx new file mode 100644 index 0000000..3b8472a --- /dev/null +++ b/src/components/graph/LineBarChart2.tsx @@ -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(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 ( + + +
+ +
+ + ) +} diff --git a/src/components/graph/LineChart.tsx b/src/components/graph/LineChart.tsx index 15376c2..09e27a9 100644 --- a/src/components/graph/LineChart.tsx +++ b/src/components/graph/LineChart.tsx @@ -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)', }, diff --git a/src/pages/pld/index.tsx b/src/pages/pld/index.tsx index 7284c72..e4358d2 100644 --- a/src/pages/pld/index.tsx +++ b/src/pages/pld/index.tsx @@ -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('table') - const [age, setAge] = React.useState(''); + const [day, setDay] = useState('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
- + console.log()}/>
- + @@ -156,10 +278,13 @@ export default function pld({tableData, graphByHourData, graphByMonthData}: pldI
- + setDate(value.target.value)}/> console.log()}/>
- + @@ -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) }) diff --git a/src/services/economiaAcumulada.js b/src/services/economiaAcumulada.js index 6b63044..90a1b42 100644 --- a/src/services/economiaAcumulada.js +++ b/src/services/economiaAcumulada.js @@ -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',] }