Merge branch 'administativePages' of https://gitlab.com/kluppsoftware/smart-energia-web into administativePages

src/components/graph/LineBarChart.tsx

@@ -25,38 +25,38 @@ ChartJS.register(
   Tooltip
 );
 
-function triggerTooltip(chart: ChartJS | null) {
+// function triggerTooltip(chart: ChartJS | null) {
-  const tooltip = chart?.tooltip;
+//   const tooltip = chart?.tooltip;
 
-  if (!tooltip) {
+//   if (!tooltip) {
-    return;
+//     return;
-  }
+//   }
 
-  if (tooltip.getActiveElements().length > 0) {
+//   if (tooltip.getActiveElements().length > 0) {
-    tooltip.setActiveElements([], { x: 0, y: 0 });
+//     tooltip.setActiveElements([], { x: 0, y: 0 });
-  } else {
+//   } else {
-    const { chartArea } = chart;
+//     const { chartArea } = chart;
 
-    tooltip.setActiveElements(
+//     tooltip.setActiveElements(
-      [
+//       [
-        {
+//         {
-          datasetIndex: 0,
+//           datasetIndex: 0,
-          index: 2,
+//           index: 2,
-        },
+//         },
-        {
+//         {
-          datasetIndex: 1,
+//           datasetIndex: 1,
-          index: 2,
+//           index: 2,
-        },
+//         },
-      ],
+//       ],
-      {
+//       {
-        x: (chartArea.left + chartArea.right) / 2,
+//         x: (chartArea.left + chartArea.right) / 2,
-        y: (chartArea.top + chartArea.bottom) / 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 (

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<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>
+  )
+}

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)',
       },

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<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(() => {
+  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']
-    console.log(page)
-  }, [page])
 
-  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={'NORTE'}>Norte</MenuItem>
-                <MenuItem value={10}>Nordeste</MenuItem>
+                <MenuItem value={'NORDESTE'}>Nordeste</MenuItem>
-                <MenuItem value={20}>Sul</MenuItem>
+                <MenuItem value={'SUL'}>Sul</MenuItem>
-                <MenuItem value={30}>Sudeste</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)
   })

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