From a3f9b5898b148cbae833ddf715929782021e06fa Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Wed, 15 Jun 2022 17:47:48 -0300 Subject: [PATCH 1/7] add create client --- .../administrativeTables/ClientsTable.tsx | 18 ++--- src/pages/administrative/clients.tsx | 79 ++++++++++++++++--- 2 files changed, 77 insertions(+), 20 deletions(-) diff --git a/src/components/administrativeTables/ClientsTable.tsx b/src/components/administrativeTables/ClientsTable.tsx index 748e87e..364a12d 100644 --- a/src/components/administrativeTables/ClientsTable.tsx +++ b/src/components/administrativeTables/ClientsTable.tsx @@ -180,7 +180,7 @@ function EnhancedTableHead(props: EnhancedTableProps) { ); } -export default function ClientTable() { +export default function ClientTable({clients}: any) { const [order, setOrder] = useState('asc'); const [orderBy, setOrderBy] = useState('status'); const [selected, setSelected] = useState([]); @@ -199,7 +199,7 @@ export default function ClientTable() { const handleSelectAllClick = (event: React.ChangeEvent) => { if (event.target.checked) { - const newSelecteds = rows.map((n) => n.name); + const newSelecteds = clients.map((n) => n.name); setSelected(newSelecteds); return; } @@ -259,20 +259,20 @@ export default function ClientTable() { rowCount={rows.length} /> - {stableSort(rows, getComparator(order, orderBy)) + {stableSort(clients, getComparator(order, orderBy)) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .map((row, index) => { - const isItemSelected = isSelected(row.clientCode); + const isItemSelected = isSelected(row.id); const labelId = `enhanced-table-checkbox-${index}`; return ( handleClick(event, row.clientCode.toString())} + onClick={(event) => handleClick(event, row.id.toString())} role="checkbox" aria-checked={isItemSelected} tabIndex={-1} - key={row.clientCode} + key={row.id} selected={isItemSelected} > @@ -290,11 +290,11 @@ export default function ClientTable() { scope="row" padding="none" > - Unidade - {row.clientCode} + Client - {row.client_id} {row.name} - {row.unity}button - {row.status} + clique aqui para ver as unidades + {row.deleted_at? 'inativo' : 'ativo'} ); })} diff --git a/src/pages/administrative/clients.tsx b/src/pages/administrative/clients.tsx index 23ac5e3..1a7b827 100644 --- a/src/pages/administrative/clients.tsx +++ b/src/pages/administrative/clients.tsx @@ -18,6 +18,9 @@ import PageTitle from '../../components/pageTitle/PageTitle'; import ConfirmModal from '../../components/modal/ConfirmModal'; import { ConfirmModalView } from '../../styles/layouts/modals/confirmModalView'; import { api } from '../../services/api'; +import { parseCookies } from 'nookies'; +import { GetServerSideProps } from 'next'; +import getAPIClient from '../../services/ssrApi'; const style = { position: 'absolute' as const, @@ -33,8 +36,8 @@ const style = { overflowY: 'scroll' }; -export default function clients() { - const [client, setClient] = useState({ +export default function clients({clients}) { + const [client, setClient] = useState({ name: String, email: String, password: String, @@ -50,7 +53,7 @@ export default function clients() { const [openModal, setOpenModal] = useState(false) function handleCreateClient({name, email, password, password_confirmation, client_id}) { - api.post('', { + api.post('/user', { name, email, password, @@ -79,19 +82,44 @@ export default function clients() { Adicionar Cliente Smart Energia
- - - - - + { + setClient({ + ...client, + name: value.target.value + }) + }} variant="outlined" /> + { + setClient({ + ...client, + email: value.target.value + }) + }} variant="outlined" /> + { + setClient({ + ...client, + password: value.target.value + }) + }} variant="outlined" /> + { + setClient({ + ...client, + password_confirmation: value.target.value + }) + }} variant="outlined" /> + { + setClient({ + ...client, + client_id: value.target.value + }) + }} variant="outlined" />

- console.log()} /> - console.log()}/> + console.log()} /> + handleCreateClient(client)}/>
- +
@@ -104,3 +132,32 @@ export default function clients() { ) } + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const apiClient = getAPIClient(ctx) + const { ['@smartAuth-token']: token } = parseCookies(ctx) + + let clients = []; + + await apiClient.get('/user').then(res => { + clients = res.data + }).catch(res => { + console.log(res) + }) + + if (!token) { + return { + redirect: { + destination: '/', + permanent: false + } + } + } + + return { + props: { + clients, + } + } +} + From 7aef4247588f1d5cb8e7c6f4aa8d939dba58b032 Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Thu, 16 Jun 2022 10:19:30 -0300 Subject: [PATCH 2/7] add delete clients and fix clients table --- .../administrativeTables/ClientsTable.tsx | 51 ++-- src/pages/administrative/clients.tsx | 163 ------------ src/pages/administrative/clients/index.tsx | 236 ++++++++++++++++++ .../administrative/notification/index.tsx | 6 +- 4 files changed, 253 insertions(+), 203 deletions(-) delete mode 100644 src/pages/administrative/clients.tsx create mode 100644 src/pages/administrative/clients/index.tsx diff --git a/src/components/administrativeTables/ClientsTable.tsx b/src/components/administrativeTables/ClientsTable.tsx index 364a12d..5232dab 100644 --- a/src/components/administrativeTables/ClientsTable.tsx +++ b/src/components/administrativeTables/ClientsTable.tsx @@ -1,12 +1,6 @@ -import DeleteIcon from '@mui/icons-material/Delete'; -import FilterListIcon from '@mui/icons-material/FilterList'; import Box from '@mui/material/Box'; import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import IconButton from '@mui/material/IconButton'; import Paper from '@mui/material/Paper'; -import { alpha } from '@mui/material/styles'; -import Switch from '@mui/material/Switch'; import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; @@ -15,11 +9,8 @@ import TableHead from '@mui/material/TableHead'; import TablePagination from '@mui/material/TablePagination'; import TableRow from '@mui/material/TableRow'; import TableSortLabel from '@mui/material/TableSortLabel'; -import Toolbar from '@mui/material/Toolbar'; -import Tooltip from '@mui/material/Tooltip'; -import Typography from '@mui/material/Typography'; import { visuallyHidden } from '@mui/utils'; -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { ClientTableView, StyledStatus } from './ClientsTableView'; @@ -30,29 +21,6 @@ interface Data { status: string, } -function createData( - clientCode: number, - name: string, - unity: string, - status: string, -): Data { - return { - clientCode, - name, - unity, - status, - }; -} - -const rows = [ - createData(9500130, 'Copel', 'clique para ver unidades', 'ativo'), - createData(9500131, 'Copel', 'clique para ver unidades', 'ativo'), - createData(9500132, 'Copel', 'clique para ver unidades', 'ativo'), - createData(9500689, 'Copel', 'clique para ver unidades', 'pendente'), - createData(9500690, 'Copel', 'clique para ver unidades', 'inativo'), - createData(9500691, 'Copel', 'clique para ver unidades', 'inativo'), -]; - function descendingComparator(a: T, b: T, orderBy: keyof T) { if (b[orderBy] < a[orderBy]) { return -1; @@ -180,7 +148,12 @@ function EnhancedTableHead(props: EnhancedTableProps) { ); } -export default function ClientTable({clients}: any) { +interface ClientsTableInterface { + clients: any, + onChange: any +} + +export default function ClientTable({clients, onChange}: ClientsTableInterface) { const [order, setOrder] = useState('asc'); const [orderBy, setOrderBy] = useState('status'); const [selected, setSelected] = useState([]); @@ -237,9 +210,13 @@ export default function ClientTable({clients}: any) { const isSelected = (code: any) => selected.indexOf(code.toString()) !== -1; + useEffect(() => { + onChange(selected) + }, [selected]) + // Avoid a layout jump when reaching the last page with empty rows. const emptyRows = - page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; + page > 0 ? Math.max(0, (1 + page) * rowsPerPage - clients.length) : 0; return ( @@ -256,7 +233,7 @@ export default function ClientTable({clients}: any) { orderBy={orderBy} onSelectAllClick={handleSelectAllClick} onRequestSort={handleRequestSort} - rowCount={rows.length} + rowCount={clients.length} /> {stableSort(clients, getComparator(order, orderBy)) @@ -313,7 +290,7 @@ export default function ClientTable({clients}: any) { ({ - name: String, - email: String, - password: String, - password_confirmation: String, - client_id: Number - }) - - const [open, setOpen] = useState(false); - const [openModalInativar, setOpenModalInativar] = useState(false) - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - - const [openModal, setOpenModal] = useState(false) - - function handleCreateClient({name, email, password, password_confirmation, client_id}) { - api.post('/user', { - name, - email, - password, - password_confirmation, - client_id - }) - } - - return ( -
- -
- -
- - -
- - -

Adicionar Cliente

- - Adicionar Cliente Smart Energia -
- { - setClient({ - ...client, - name: value.target.value - }) - }} variant="outlined" /> - { - setClient({ - ...client, - email: value.target.value - }) - }} variant="outlined" /> - { - setClient({ - ...client, - password: value.target.value - }) - }} variant="outlined" /> - { - setClient({ - ...client, - password_confirmation: value.target.value - }) - }} variant="outlined" /> - { - setClient({ - ...client, - client_id: value.target.value - }) - }} variant="outlined" /> - -

- console.log()} /> - handleCreateClient(client)}/> - - -
- -
- - - {setOpenModalInativar(value)}}> - - setOpenModalInativar(true)}/> - setOpenModalInativar(true)}/> - - -
- ) -} - -export const getServerSideProps: GetServerSideProps = async (ctx) => { - const apiClient = getAPIClient(ctx) - const { ['@smartAuth-token']: token } = parseCookies(ctx) - - let clients = []; - - await apiClient.get('/user').then(res => { - clients = res.data - }).catch(res => { - console.log(res) - }) - - if (!token) { - return { - redirect: { - destination: '/', - permanent: false - } - } - } - - return { - props: { - clients, - } - } -} - diff --git a/src/pages/administrative/clients/index.tsx b/src/pages/administrative/clients/index.tsx new file mode 100644 index 0000000..2d918c9 --- /dev/null +++ b/src/pages/administrative/clients/index.tsx @@ -0,0 +1,236 @@ +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Modal from '@mui/material/Modal'; +import TextField from '@mui/material/TextField'; +import Typography from '@mui/material/Typography'; +import React, { useState } from 'react' + +import Snackbar from '@mui/material/Snackbar'; +import MuiAlert, { AlertProps } from '@mui/material/Alert'; +import ClientsTable from '../../../components/administrativeTables/ClientsTable'; +import BasicButton from '../../../components/buttons/basicButton/BasicButton' +import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1'; +import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2'; +import Header from '../../../components/header/Header' +import InputUpload from '../../../components/inputUplaod/inputUpload'; +import { ClientsView } from '../../../styles/layouts/clients/ClientsView'; +import PageTitle from '../../../components/pageTitle/PageTitle'; +import ConfirmModal from '../../../components/modal/ConfirmModal'; +import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView'; +import { api } from '../../../services/api'; +import { parseCookies } from 'nookies'; +import { GetServerSideProps } from 'next'; +import getAPIClient from '../../../services/ssrApi'; + +const style = { + position: 'absolute' as const, + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 900, + height: 500, + bgcolor: 'background.paper', + border: '2px solid #000', + boxShadow: 24, + p: 4, + overflowY: 'scroll' +}; + +const Alert = React.forwardRef(function Alert( + props, + ref, +) { + return ; +}); + +export default function clients({clients}) { + const [client, setClient] = useState({ + name: String, + email: String, + password: String, + password_confirmation: String, + client_id: Number + }) + const [selectedClients, setSelectedClients] = useState([]) + + const [open, setOpen] = useState(false); + const [openModalInativar, setOpenModalInativar] = useState(false) + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + + const [openModal, setOpenModal] = useState(false) + + // + const [openSnackSuccess, setOpenSnackSuccess] = useState(false); + const [openSnackError, setOpenSnackError] = useState(false); + const [openSnackSuccessDelete, setOpenSnackSuccessDelete] = useState(false); + const [openSnackErrorDelete, setOpenSnackErrorDelete] = useState(false); + + const handleCloseSnack = (event?: React.SyntheticEvent | Event, reason?: string) => { + if (reason === 'clickaway') { + return; + } + + setOpenSnackError(false); + setOpenSnackSuccess(false); + }; + + const handleCloseSnackDelete = (event?: React.SyntheticEvent | Event, reason?: string) => { + if (reason === 'clickaway') { + return; + } + + setOpenSnackErrorDelete(false); + setOpenSnackSuccessDelete(false); + }; + // + + function handleCreateClient({name, email, password, password_confirmation, client_id}) { + api.post('/user', { + name, + email, + password, + password_confirmation, + client_id + }).then(res => { + setOpenSnackSuccess(true) + setOpenModalInativar(false) + window.location.reload() + }).catch(res => { + setOpenSnackError(true) + }) + } + async function handleDeleteClient(id: any) { + await id.map(client => { + api.delete(`/user/${client}`).then(res => { + setOpenSnackSuccessDelete(true) + setOpenModalInativar(false) + window.location.reload() + }).catch(res => setOpenSnackErrorDelete(true)) + }) + } + + return ( +
+ + + notificação cadastrada com sucesso! + + + + + Notificação não cadastrada! + + + + + + notificação excluida com sucesso! + + + + + Notificação não excluida! + + + + +
+ +
+ + +
+
+ { + setSelectedClients(value) + }}/> +
+ + + + +

Adicionar Cliente

+ + Adicionar Cliente Smart Energia +
+ { + setClient({ + ...client, + name: value.target.value + }) + }} variant="outlined" /> + { + setClient({ + ...client, + email: value.target.value + }) + }} variant="outlined" /> + { + setClient({ + ...client, + password: value.target.value + }) + }} variant="outlined" /> + { + setClient({ + ...client, + password_confirmation: value.target.value + }) + }} variant="outlined" /> + { + setClient({ + ...client, + client_id: value.target.value + }) + }} variant="outlined" /> + +

+ console.log()} /> + handleCreateClient(client)}/> + + + {setOpenModalInativar(value)}}> + + + handleDeleteClient(selectedClients)}/> + setOpenModalInativar(true)}/> + + +
+ ) +} + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const apiClient = getAPIClient(ctx) + const { ['@smartAuth-token']: token } = parseCookies(ctx) + + let clients = []; + + await apiClient.get('/user').then(res => { + clients = res.data + }).catch(res => { + console.log(res) + }) + + if (!token) { + return { + redirect: { + destination: '/', + permanent: false + } + } + } + + return { + props: { + clients, + } + } +} + diff --git a/src/pages/administrative/notification/index.tsx b/src/pages/administrative/notification/index.tsx index 0abed49..0be9966 100644 --- a/src/pages/administrative/notification/index.tsx +++ b/src/pages/administrative/notification/index.tsx @@ -147,10 +147,10 @@ export default function notification({clients, notifications}) {
- - - + +
+ setSelectedNotifications(value)}/> Date: Thu, 16 Jun 2022 10:26:20 -0300 Subject: [PATCH 3/7] fix tables style --- src/components/administrativeTables/ClientsTable.tsx | 6 +++--- src/components/administrativeTables/FaqTable.tsx | 7 +++---- src/components/administrativeTables/NotificationsTable.tsx | 6 +++--- .../{ClientsTableView.ts => TableView.ts} | 2 +- 4 files changed, 10 insertions(+), 11 deletions(-) rename src/components/administrativeTables/{ClientsTableView.ts => TableView.ts} (96%) diff --git a/src/components/administrativeTables/ClientsTable.tsx b/src/components/administrativeTables/ClientsTable.tsx index 5232dab..7216450 100644 --- a/src/components/administrativeTables/ClientsTable.tsx +++ b/src/components/administrativeTables/ClientsTable.tsx @@ -12,7 +12,7 @@ import TableSortLabel from '@mui/material/TableSortLabel'; import { visuallyHidden } from '@mui/utils'; import React, { useState, useEffect } from 'react'; -import { ClientTableView, StyledStatus } from './ClientsTableView'; +import { TableView, StyledStatus } from './TableView'; interface Data { clientCode: number, @@ -219,7 +219,7 @@ export default function ClientTable({clients, onChange}: ClientsTableInterface) page > 0 ? Math.max(0, (1 + page) * rowsPerPage - clients.length) : 0; return ( - + - + ); } diff --git a/src/components/administrativeTables/FaqTable.tsx b/src/components/administrativeTables/FaqTable.tsx index 0b5878c..5d61b09 100644 --- a/src/components/administrativeTables/FaqTable.tsx +++ b/src/components/administrativeTables/FaqTable.tsx @@ -16,11 +16,10 @@ import TablePagination from '@mui/material/TablePagination'; import TableRow from '@mui/material/TableRow'; import TableSortLabel from '@mui/material/TableSortLabel'; import { visuallyHidden } from '@mui/utils'; -import { GetServerSideProps } from 'next'; import React, { useState } from 'react'; import getAPIClient from '../../services/ssrApi'; -import { ClientTableView, StyledStatus } from './ClientsTableView'; +import { TableView, StyledStatus } from './TableView'; interface Data { question: string, @@ -234,7 +233,7 @@ export default function FaqTable({questionData}: any) { page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; return ( - +
- + ); } diff --git a/src/components/administrativeTables/NotificationsTable.tsx b/src/components/administrativeTables/NotificationsTable.tsx index 084ff35..4d874c6 100644 --- a/src/components/administrativeTables/NotificationsTable.tsx +++ b/src/components/administrativeTables/NotificationsTable.tsx @@ -21,7 +21,7 @@ import Typography from '@mui/material/Typography'; import { visuallyHidden } from '@mui/utils'; import React, { useState, useEffect } from 'react'; -import { ClientTableView, StyledStatus } from './ClientsTableView'; +import { TableView, StyledStatus } from './TableView'; interface Data { notification: string, @@ -248,7 +248,7 @@ export default function NotificationsTable({notifications, onChange}: Notificati }, [selected]) return ( - +
- + ); } diff --git a/src/components/administrativeTables/ClientsTableView.ts b/src/components/administrativeTables/TableView.ts similarity index 96% rename from src/components/administrativeTables/ClientsTableView.ts rename to src/components/administrativeTables/TableView.ts index 08d8daf..e0fadf3 100644 --- a/src/components/administrativeTables/ClientsTableView.ts +++ b/src/components/administrativeTables/TableView.ts @@ -1,6 +1,6 @@ import styled from "styled-components"; -export const ClientTableView = styled.main` +export const TableView = styled.main` width: 100%; color: #6A707E; From b045a2e541bdcd6882d728bf6a7d600768b93f1d Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Fri, 17 Jun 2022 11:52:26 -0300 Subject: [PATCH 4/7] starting clients charts --- .../administrativeTables/ClientsTable.tsx | 2 +- src/components/graph/Chart.tsx | 8 +- src/components/inputUplaod/inputUpload.tsx | 2 +- src/components/sidebar/Sidebar.tsx | 2 +- src/pages/_app.tsx | 1 - src/pages/administrative/clients/index.tsx | 7 +- src/pages/administrative/faq/index.tsx | 14 +- src/pages/administrative/index.tsx | 51 ------- .../administrative/notification/index.tsx | 6 +- src/pages/costIndicator.tsx | 51 ++++++- src/pages/faq.tsx | 12 +- src/pages/index.tsx | 1 - src/pages/notifications.tsx | 14 +- src/pages/pld/index.tsx | 143 +++++++----------- src/pages/resumoOperacao.tsx | 2 +- 15 files changed, 132 insertions(+), 184 deletions(-) diff --git a/src/components/administrativeTables/ClientsTable.tsx b/src/components/administrativeTables/ClientsTable.tsx index 7216450..a56a973 100644 --- a/src/components/administrativeTables/ClientsTable.tsx +++ b/src/components/administrativeTables/ClientsTable.tsx @@ -45,7 +45,7 @@ function getComparator( : (a, b) => -descendingComparator(a, b, orderBy); } -function stableSort(array: readonly T[], comparator: (a: T, b: T) => number) { +function stableSort(array: any, comparator: (a: T, b: T) => number) { const stabilizedThis = array.map((el, index) => [el, index] as [T, number]); stabilizedThis.sort((a, b) => { const order = comparator(a[0], b[0]); diff --git a/src/components/graph/Chart.tsx b/src/components/graph/Chart.tsx index f532103..4b2a681 100644 --- a/src/components/graph/Chart.tsx +++ b/src/components/graph/Chart.tsx @@ -71,14 +71,14 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1, labels, datasets: [ { - label: dataset1? dataset1 : '2020', - data: data1.map(value => value), + label: dataset1? dataset1 : '2021', + data: data1.map(value => value.custo_unit), backgroundColor: '#C2D5FB', }, data2? { - label: dataset2? dataset2 : '2021', - data: data2.map(value => value), + label: dataset2? dataset2 : '2022', + data: data2.map(value => value.custo_unit), backgroundColor: '#255488', } : null ], diff --git a/src/components/inputUplaod/inputUpload.tsx b/src/components/inputUplaod/inputUpload.tsx index 5eb22ab..dad71d1 100644 --- a/src/components/inputUplaod/inputUpload.tsx +++ b/src/components/inputUplaod/inputUpload.tsx @@ -16,7 +16,7 @@ export default function InputUpload() { function onImageChange(e: any) { setImages([...e.target.files]); - console.log(e); + // console.log(e); } return ( diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 1f08998..271bf62 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -37,7 +37,7 @@ export default function Sidebar() { const { ['user-role']: role } = parseCookies() - console.log(role) + // console.log(role) useEffect(() => { setViewModal(false) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index ed63084..9a5ef4a 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -59,7 +59,6 @@ function MyApp({ Component, pageProps }: AppProps) { <> - : null diff --git a/src/pages/administrative/clients/index.tsx b/src/pages/administrative/clients/index.tsx index 2d918c9..7a612e6 100644 --- a/src/pages/administrative/clients/index.tsx +++ b/src/pages/administrative/clients/index.tsx @@ -213,9 +213,11 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { let clients = []; await apiClient.get('/user').then(res => { - clients = res.data - }).catch(res => { console.log(res) + clients = res.data.data + console.log(clients) + }).catch(res => { + // console.log(res) }) if (!token) { @@ -233,4 +235,3 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { } } } - diff --git a/src/pages/administrative/faq/index.tsx b/src/pages/administrative/faq/index.tsx index 6f2cae5..3d28598 100644 --- a/src/pages/administrative/faq/index.tsx +++ b/src/pages/administrative/faq/index.tsx @@ -109,16 +109,14 @@ export default function Sidebar({faqData}: any) { export const getServerSideProps: GetServerSideProps = async (ctx) => { const apiClient = getAPIClient(ctx) const { ['@smartAuth-token']: token } = parseCookies(ctx) - console.log('teste') + let faqData = []; - -await apiClient.get('/faq').then(res => { - faqData = res.data -}).catch(res => { - console.log(res) -}) - console.table(faqData); + await apiClient.get('/faq').then(res => { + faqData = res.data.data + }).catch(res => { + // console.log(res) + }) if (!token) { return { diff --git a/src/pages/administrative/index.tsx b/src/pages/administrative/index.tsx index 9aeb2e6..d270917 100644 --- a/src/pages/administrative/index.tsx +++ b/src/pages/administrative/index.tsx @@ -19,57 +19,6 @@ export default function clients() { return (
- -
- - -
- setOpenModal(true)}/> - setOpenModalInativar(true)}/> -
- -
- {/* */} - -
- - - {setOpenModal(value)}}> - - -
- - - - - console.log()}/> - -
- - - - {setOpenModalInativar(value)}}> - - setOpenModalInativar(true)}/> - setOpenModalInativar(true)}/> - -
) } diff --git a/src/pages/administrative/notification/index.tsx b/src/pages/administrative/notification/index.tsx index 0be9966..50751fc 100644 --- a/src/pages/administrative/notification/index.tsx +++ b/src/pages/administrative/notification/index.tsx @@ -252,13 +252,13 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { await apiClient.get('/user').then(res => { clients = res.data }).catch(res => { - console.log(res) + // console.log(res) }) await apiClient.get('/notification').then(res => { - notifications = res.data + notifications = res.data.data }).catch(res => { - console.log(res) + // console.log(res) }) if (!token) { diff --git a/src/pages/costIndicator.tsx b/src/pages/costIndicator.tsx index 8a35d0b..405c453 100644 --- a/src/pages/costIndicator.tsx +++ b/src/pages/costIndicator.tsx @@ -1,4 +1,6 @@ +import { GetServerSideProps } from 'next' import Head from 'next/head' +import { parseCookies } from 'nookies' import React from 'react' import Chart from '../components/graph/Chart' @@ -7,9 +9,23 @@ import Header from '../components/header/Header' import PageTitle from '../components/pageTitle/PageTitle' import { dataEconomiaBruta } from '../services/economiaBruta' import { dataEconomiaIndicador } from '../services/economiaIndicador' +import getAPIClient from '../services/ssrApi' import { CostIndicatorView } from '../styles/layouts/economy/costIndicator/CostIndicatorView' -export default function CostIndicator() { +function addMissingMonths(data) { + console.log(data[0].mes.slice(1, 1)) +} + +function verifyDataByYear(data) { + if (data.length === 12) + return true + else + return false +} + +export default function CostIndicator({graphData}: any) { + console.log(graphData.filter((value, index) => value.mes.slice(3, 7).includes('2021')).map(value => value.custo_unit)) + return ( @@ -18,8 +34,39 @@ export default function CostIndicator() {
- + value.mes.slice(3, 7).includes('2021'))} + data2={graphData.filter((value, index) => value.mes.slice(3, 7).includes('2022'))} + label={['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez']} barLabel />
) } + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const apiClient = getAPIClient(ctx) + const { ['@smartAuth-token']: token } = parseCookies(ctx) + + let graphData = []; + + await apiClient.post('/economy/MWh').then(res => { + graphData = res.data.data + console.log(graphData[0].mes) + }).catch(res => { + console.log(res) + }) + + if (!token) { + return { + redirect: { + destination: '/', + permanent: false + } + } + } + + return { + props: { + graphData, + } + } +} diff --git a/src/pages/faq.tsx b/src/pages/faq.tsx index c1e3a41..e7b90d4 100644 --- a/src/pages/faq.tsx +++ b/src/pages/faq.tsx @@ -34,16 +34,14 @@ export default function commonQuestions({faqData}) { export const getServerSideProps: GetServerSideProps = async (ctx) => { const apiClient = getAPIClient(ctx) const { ['@smartAuth-token']: token } = parseCookies(ctx) - console.log('teste') let faqData = []; -await apiClient.get('/faq').then(res => { - faqData = res.data -}).catch(res => { - console.log(res) -}) - console.table(faqData); + await apiClient.get('/faq').then(res => { + faqData = res.data + }).catch(res => { + // console.log(res) + }) if (!token) { return { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e51acfe..6229b84 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -101,7 +101,6 @@ export default function Home() {

+55(41) 3012-5900
www.energiasmart.com.br

- ) } diff --git a/src/pages/notifications.tsx b/src/pages/notifications.tsx index 2c1e8f7..c321efc 100644 --- a/src/pages/notifications.tsx +++ b/src/pages/notifications.tsx @@ -34,16 +34,14 @@ export default function Notifications({notificationData}: any) { export const getServerSideProps: GetServerSideProps = async (ctx) => { const apiClient = getAPIClient(ctx) const { ['@smartAuth-token']: token } = parseCookies(ctx) - console.log('teste') + let notificationData = []; - -await apiClient.get('/notification').then(res => { - notificationData = res.data -}).catch(res => { - console.log(res) -}) - console.table(notificationData); + await apiClient.get('/notification').then(res => { + notificationData = res.data + }).catch(res => { + // console.log(res) + }) if (!token) { return { diff --git a/src/pages/pld/index.tsx b/src/pages/pld/index.tsx index 75b29fb..7284c72 100644 --- a/src/pages/pld/index.tsx +++ b/src/pages/pld/index.tsx @@ -1,8 +1,10 @@ import MenuItem from '@mui/material/MenuItem'; import Select, { SelectChangeEvent } from '@mui/material/Select'; +import { GetServerSideProps } from 'next'; import Head from 'next/head'; import Link from 'next/link'; import { useRouter } from 'next/router' +import { parseCookies } from 'nookies'; import React, { useEffect, useState } from 'react' import BasicButton from '../../components/buttons/basicButton/BasicButton'; @@ -13,10 +15,17 @@ import Header from '../../components/header/Header' import PageTitle from '../../components/pageTitle/PageTitle'; import { EconomiaAcumulada } from '../../services/economiaAcumulada'; import { EvolucaoPld } from '../../services/evolucaoPld'; +import getAPIClient from '../../services/ssrApi'; import { GoBack, PldGraphView, PldTableView } from '../../styles/layouts/pld/PldView' import RenderIf from '../../utils/renderIf' -export default function region() { +interface pldInterface { + tableData: any, + graphByHourData: any, + graphByMonthData: any +} + +export default function pld({tableData, graphByHourData, graphByMonthData}: pldInterface) { const router = useRouter() const { region } = router.query @@ -68,97 +77,19 @@ export default function region() {
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + { + tableData.map(data => { + return <> + + + + + + + + + }) + } @@ -234,3 +165,31 @@ export default function region() { ) } + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const apiClient = getAPIClient(ctx) + const { ['@smartAuth-token']: token } = parseCookies(ctx) + + let tableData = []; + + await apiClient.post('/pld/list').then(res => { + tableData = res.data + }).catch(res => { + console.log(res) + }) + + if (!token) { + return { + redirect: { + destination: '/', + permanent: false + } + } + } + + return { + props: { + tableData, + } + } +} diff --git a/src/pages/resumoOperacao.tsx b/src/pages/resumoOperacao.tsx index a64cb7b..43eadd5 100644 --- a/src/pages/resumoOperacao.tsx +++ b/src/pages/resumoOperacao.tsx @@ -49,7 +49,7 @@ export default function ResumoOperacao() { // data.unidades.map((value) => { // console.log(`olha o valor ${value.name}`) // }) - console.log(unidade) + // console.log(unidade) console.log(data.unidades.filter((value, index)=> value.value.includes(unidade))) }, [month, unidade]) From b7ea5538869efedb2e6fa87fc2b5fb8c3a016f2d Mon Sep 17 00:00:00 2001 From: Alex Santos Date: Fri, 17 Jun 2022 11:53:45 -0300 Subject: [PATCH 5/7] update Graph --- .../administrativeTables/FaqTable.tsx | 13 ++- src/components/modal/ConfirmModal.tsx | 4 +- src/pages/administrative/faq/index.tsx | 105 ++++++++++++++++-- .../administrative/notification/index.tsx | 7 +- src/pages/grossSavings.tsx | 39 +++++++ 5 files changed, 152 insertions(+), 16 deletions(-) diff --git a/src/components/administrativeTables/FaqTable.tsx b/src/components/administrativeTables/FaqTable.tsx index 0b5878c..e8bb8ce 100644 --- a/src/components/administrativeTables/FaqTable.tsx +++ b/src/components/administrativeTables/FaqTable.tsx @@ -17,7 +17,7 @@ import TableRow from '@mui/material/TableRow'; import TableSortLabel from '@mui/material/TableSortLabel'; import { visuallyHidden } from '@mui/utils'; import { GetServerSideProps } from 'next'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import getAPIClient from '../../services/ssrApi'; import { ClientTableView, StyledStatus } from './ClientsTableView'; @@ -28,6 +28,11 @@ interface Data { status: string, } +interface FaqTableInterface{ + questionData: any, + onChange: any +} + function createData( question: string, answer: string, @@ -170,7 +175,7 @@ function EnhancedTableHead(props: EnhancedTableProps) { ); } -export default function FaqTable({questionData}: any) { +export default function FaqTable({questionData, onChange}: FaqTableInterface) { const [order, setOrder] = useState('asc'); const [orderBy, setOrderBy] = useState('status'); const [selected, setSelected] = useState([]); @@ -229,6 +234,10 @@ export default function FaqTable({questionData}: any) { const isSelected = (name: string) => selected.indexOf(name) !== -1; + useEffect(() => { + onChange(selected) + }, [selected]) + // Avoid a layout jump when reaching the last page with empty rows. const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; diff --git a/src/components/modal/ConfirmModal.tsx b/src/components/modal/ConfirmModal.tsx index b38e561..6158dc2 100644 --- a/src/components/modal/ConfirmModal.tsx +++ b/src/components/modal/ConfirmModal.tsx @@ -12,8 +12,8 @@ const style = { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', - width: '30%', - height: '30%', + width: 900, + height: 500, bgcolor: 'background.paper', border: '2px solid #254F7F', boxShadow: 24, diff --git a/src/pages/administrative/faq/index.tsx b/src/pages/administrative/faq/index.tsx index d1874ad..01d82b6 100644 --- a/src/pages/administrative/faq/index.tsx +++ b/src/pages/administrative/faq/index.tsx @@ -10,7 +10,10 @@ import Link from 'next/link' import { useRouter } from 'next/router' import React, { useEffect, useState } from 'react' import { api } from '../../../services/api'; - +import ConfirmModal from '../../../components/modal/ConfirmModal'; +import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView'; +import Snackbar from '@mui/material/Snackbar'; +import MuiAlert, { AlertProps } from '@mui/material/Alert'; import FaqTable from '../../../components/administrativeTables/FaqTable'; import BasicButton from '../../../components/buttons/basicButton/BasicButton'; @@ -23,6 +26,7 @@ import getAPIClient from '../../../services/ssrApi'; import { GetServerSideProps } from 'next'; import { parseCookies } from 'nookies'; + const style = { position: 'absolute' as const, top: '50%', @@ -36,14 +40,69 @@ const style = { p: 4, }; +const Alert = React.forwardRef(function Alert( + props, + ref, +) { + return ; +}); + + type FaqInterface = { question: string; answer: string; } +export default function Sidebar({faqData} : any ) { -export default function Sidebar({faqData}) { + const [openModalInativar, setOpenModalInativar] = useState(false) + const [openSnackSuccess, setOpenSnackSuccess] = useState(false); + const [openSnackError, setOpenSnackError] = useState(false); + const [openSnackSuccessDelete, setOpenSnackSuccessDelete] = useState(false); + const [openSnackErrorDelete, setOpenSnackErrorDelete] = useState(false); + + + + const handleCloseSnack = (event?: React.SyntheticEvent | Event, reason?: string) => { + if (reason === 'clickaway') { + return; + } + + setOpenSnackError(false); + setOpenSnackSuccess(false); + }; + + + const handleCloseSnackDelete = (event?: React.SyntheticEvent | Event, reason?: string) => { + if (reason === 'clickaway') { + return; + } + + setOpenSnackErrorDelete(false); + setOpenSnackSuccessDelete(false); + }; + + async function handleDeleteNotification(id: any) { + await id.map((value) => { + api.delete(`/faq/${value}`).then(res => { + setOpenSnackSuccessDelete(true) + setOpenModalInativar(false) + window.location.reload() + }).catch(res => setOpenSnackErrorDelete(true)) + }) + } + + + + const [faq, setFaq] = useState({ + question: '', + answer : '', + + }) + + const [selectedfaq, setSelectedfaq] = useState([]) + async function handleRegisterNewFaq({question, answer}: FaqInterface) { await api.post('/faq', { "question": question, @@ -52,10 +111,7 @@ export default function Sidebar({faqData}) { }).then(res => console.log(res.data)) } - const [faq, setFaq] = useState({ - question: '', - answer: '', - }) + const [open, setOpen] = React.useState(false); @@ -69,9 +125,32 @@ export default function Sidebar({faqData}) { + + + Notificação cadastrada com sucesso! + + + + + Notificação não cadastrada! + + + + + + notificação excluida com sucesso! + + + + + Notificação não excluida! + + +
- + +
- + setSelectedfaq(value)}/> + + {setOpenModalInativar(value)}}> + + + handleDeleteNotification(selectedfaq)}/> + setOpenModalInativar(false)}/> + + @@ -115,7 +202,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { await apiClient.get('/faq').then(res => { - faqData = res.data + faqData = res.data.data }).catch(res => { console.log(res) }) diff --git a/src/pages/administrative/notification/index.tsx b/src/pages/administrative/notification/index.tsx index dc142d6..aa7573b 100644 --- a/src/pages/administrative/notification/index.tsx +++ b/src/pages/administrative/notification/index.tsx @@ -29,7 +29,7 @@ import MuiAlert, { AlertProps } from '@mui/material/Alert'; import BasicButton from '../../../components/buttons/basicButton/BasicButton'; import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView'; import ConfirmModal from '../../../components/modal/ConfirmModal'; -import { JsxElement } from 'typescript'; + const style = { position: 'absolute' as const, @@ -61,6 +61,7 @@ interface NotificationInterface { users: object[] } +// teste export default function notification({clients, notifications}) { const [notification, setNotification] = useState({ @@ -127,7 +128,7 @@ export default function notification({clients, notifications}) { - notificação cadastrada com sucesso! + Notificação cadastrada com sucesso! @@ -257,7 +258,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { }) await apiClient.get('/notification').then(res => { - notifications = res.data + notifications = res.data.data }).catch(res => { console.log(res) }) diff --git a/src/pages/grossSavings.tsx b/src/pages/grossSavings.tsx index a8c2985..ac461e7 100644 --- a/src/pages/grossSavings.tsx +++ b/src/pages/grossSavings.tsx @@ -1,3 +1,4 @@ +import { GetServerSideProps } from 'next' import Head from 'next/head' import React from 'react' @@ -6,6 +7,7 @@ import { SingleBar } from '../components/graph/SingleBar' import Header from '../components/header/Header' import PageTitle from '../components/pageTitle/PageTitle' import { dataEconomiaBruta } from '../services/economiaBruta' +import getAPIClient from '../services/ssrApi' import { GrossSavingsView } from '../styles/layouts/economy/grossSavings/GrossSavings' @@ -23,3 +25,40 @@ export default function GrossSavings() { ) } +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const apiClient = getAPIClient(ctx) + const { ['@smartAuth-token']: token } = parseCookies(ctx) + + let clients = []; + let notifications = []; + + await apiClient.get('/user').then(res => { + clients = res.data + }).catch(res => { + console.log(res) + }) + + await apiClient.get('/economy/grossAnnual').then(res => { + grossSaving = res.data + grossSaving.map(value) + + }).catch(res => { + console.log(res) + }) + + if (!token) { + return { + redirect: { + destination: '/', + permanent: false + } + } + } + + return { + props: { + clients, + grossSaving + } + } +} From a6feabd9de8f6d9cbb1d2d6fe44a8e3c15b66696 Mon Sep 17 00:00:00 2001 From: Alex Santos Date: Fri, 17 Jun 2022 16:18:50 -0300 Subject: [PATCH 6/7] update graph --- src/components/graph/SingleBar.tsx | 18 +++++------ src/components/modal/ConfirmModal.tsx | 2 +- src/components/modal/Modal.tsx | 2 +- src/pages/accumulatedSavings.tsx | 41 +++++++++++++++++++++-- src/pages/administrative/faq/index.tsx | 4 --- src/pages/dashboard.tsx | 29 +++++++++++++++-- src/pages/grossSavings.tsx | 45 +++++++++++++++++--------- 7 files changed, 104 insertions(+), 37 deletions(-) diff --git a/src/components/graph/SingleBar.tsx b/src/components/graph/SingleBar.tsx index 1585ff6..1bb3815 100644 --- a/src/components/graph/SingleBar.tsx +++ b/src/components/graph/SingleBar.tsx @@ -20,13 +20,16 @@ ChartJS.register( interface SingleBarInterface{ title: string, subtitle: string, - dataProps: Array, + dataProps: any, label: Array, dataset: string, barLabel?: boolean | undefined, year?: boolean | undefined, month?: boolean | undefined, dataset1?: string, + + + } export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1, barLabel, year, month }: SingleBarInterface) { @@ -79,19 +82,14 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1 { label: dataset, data: dataProps.map((value, index) => { - return year? label[index]<=currentTime.getFullYear().toString()? value : null : month? label.indexOf(label[index])>currentTime.getMonth()? null : value : null + return value.economia_acumulada }), backgroundColor: (value, ctx) => { - return year? label[value.dataIndex]<=currentTime.getFullYear().toString()? '#255488' : 'transparent' : month? label.indexOf(label[value.dataIndex])<=currentTime.getMonth()? '#255488' : 'transparent' : null// parseInt(label[value.dataIndex])<=currentTime.getMonth()? '#255488' : draw('diagonal', '#C2D5FB') : null + console.log(dataProps[value.dataIndex]) + return dataProps[value.dataIndex].dad_estimado == false ? '#255488' : '#C2d5fb' }, }, - { - label: dataset1, - data: dataProps.map((value, index) => { - return year? label[index]>=currentTime.getFullYear().toString()? value : null : month? label.indexOf(label[index])<=currentTime.getMonth()? null : value : null - }), - backgroundColor: typeof window !== 'undefined'? draw('diagonal', '#C2D5FB') : null - } + ], } diff --git a/src/components/modal/ConfirmModal.tsx b/src/components/modal/ConfirmModal.tsx index 6158dc2..7164eac 100644 --- a/src/components/modal/ConfirmModal.tsx +++ b/src/components/modal/ConfirmModal.tsx @@ -12,7 +12,7 @@ const style = { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', - width: 900, + width: 600, height: 500, bgcolor: 'background.paper', border: '2px solid #254F7F', diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx index a6b7957..1288582 100644 --- a/src/components/modal/Modal.tsx +++ b/src/components/modal/Modal.tsx @@ -13,7 +13,7 @@ const style = { left: '50%', transform: 'translate(-50%, -50%)', width: '80%', - height: '550px', + height: '200px', bgcolor: 'background.paper', border: '2px solid #254F7F', boxShadow: 24, diff --git a/src/pages/accumulatedSavings.tsx b/src/pages/accumulatedSavings.tsx index 1134f8f..6131c3f 100644 --- a/src/pages/accumulatedSavings.tsx +++ b/src/pages/accumulatedSavings.tsx @@ -1,4 +1,6 @@ +import { GetServerSideProps } from 'next' import Head from 'next/head' +import { parseCookies } from 'nookies' import React from 'react' import Chart from '../components/graph/Chart' @@ -7,9 +9,10 @@ import Header from '../components/header/Header' import PageTitle from '../components/pageTitle/PageTitle' import { EconomiaAcumulada } from '../services/economiaAcumulada' import { dataEconomiaBruta } from '../services/economiaBruta' +import getAPIClient from '../services/ssrApi' import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView' -export default function AccumulatedSavings() { +export default function AccumulatedSavings({graphData, years}: any) { return ( @@ -19,8 +22,42 @@ export default function AccumulatedSavings() {
+ dataset1='Estimada' dataProps={graphData} + label={years} barLabel month/>
) } + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const apiClient = getAPIClient(ctx) + const { ['@smartAuth-token']: token } = parseCookies(ctx) + + let graphData = []; + + await apiClient.post('/economy/grossMonthly').then(res => { + graphData = res.data.data + console.log(graphData[0].mes) + }).catch(res => { + console.log(res) + }) + + const years = graphData.map((value) => value.mes) + + if (!token) { + return { + redirect: { + destination: '/', + permanent: false + } + } + } + + + return { + props: { + graphData, + years, + } + } +} diff --git a/src/pages/administrative/faq/index.tsx b/src/pages/administrative/faq/index.tsx index ebf726e..592ac3a 100644 --- a/src/pages/administrative/faq/index.tsx +++ b/src/pages/administrative/faq/index.tsx @@ -55,7 +55,6 @@ type FaqInterface = { } export default function Sidebar({faqData} : any ) { -<<<<<<< HEAD const [openModalInativar, setOpenModalInativar] = useState(false) const [openSnackSuccess, setOpenSnackSuccess] = useState(false); @@ -104,9 +103,6 @@ export default function Sidebar({faqData} : any ) { const [selectedfaq, setSelectedfaq] = useState([]) -======= -export default function Sidebar({faqData}: any) { ->>>>>>> b045a2e541bdcd6882d728bf6a7d600768b93f1d async function handleRegisterNewFaq({question, answer}: FaqInterface) { await api.post('/faq', { "question": question, diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index d6f4f37..37b50a3 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -22,7 +22,7 @@ import { parseCookies } from 'nookies' import { GetServerSideProps } from 'next' import getAPIClient from '../services/ssrApi' -export default function Dashboard() { +export default function Dashboard({grossAnualGraph, grossAnualYears} : any) { return ( @@ -44,7 +44,10 @@ export default function Dashboard() {
- + @@ -66,8 +69,24 @@ export default function Dashboard() { } export const getServerSideProps: GetServerSideProps = async (ctx) => { + const apiClient = getAPIClient(ctx) const { ['@smartAuth-token']: token } = parseCookies(ctx) + let grossAnualGraph = []; + + + + await apiClient.post('/economy/grossAnnual').then(res => { + grossAnualGraph = res.data.data + console.log(grossAnualGraph[0]) + }).catch(res => { + console.log(res) + }) + + + + const grossAnualYears = grossAnualGraph.map((value) => value.ano) + if (!token) { return { redirect: { @@ -77,7 +96,11 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { } } + return { - props: {} + props: { + grossAnualGraph, + grossAnualYears, + } } } diff --git a/src/pages/grossSavings.tsx b/src/pages/grossSavings.tsx index ac461e7..adf3d8a 100644 --- a/src/pages/grossSavings.tsx +++ b/src/pages/grossSavings.tsx @@ -1,5 +1,6 @@ import { GetServerSideProps } from 'next' import Head from 'next/head' +import { parseCookies } from 'nookies' import React from 'react' import Chart from '../components/graph/Chart' @@ -11,7 +12,19 @@ import getAPIClient from '../services/ssrApi' import { GrossSavingsView } from '../styles/layouts/economy/grossSavings/GrossSavings' -export default function GrossSavings() { +function addMissingMonths(data) { + console.log(data[0].mes.slice(1, 1)) +} + +function verifyDataByYear(data) { + if (data.length === 12) + return true + else + return false +} + + +export default function GrossSavings({graphData, years}: any) { return ( @@ -20,7 +33,12 @@ export default function GrossSavings() {
- + +
) @@ -29,23 +47,17 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { const apiClient = getAPIClient(ctx) const { ['@smartAuth-token']: token } = parseCookies(ctx) - let clients = []; - let notifications = []; - - await apiClient.get('/user').then(res => { - clients = res.data - }).catch(res => { - console.log(res) - }) - - await apiClient.get('/economy/grossAnnual').then(res => { - grossSaving = res.data - grossSaving.map(value) + let graphData = []; + await apiClient.post('/economy/grossAnnual').then(res => { + graphData = res.data.data + console.log(graphData[0]) }).catch(res => { console.log(res) }) + const years = graphData.map((value) => value.ano) + console.log(years) if (!token) { return { redirect: { @@ -55,10 +67,11 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { } } + return { props: { - clients, - grossSaving + graphData, + years, } } } From 624719bd481f4dc849180c4d121d0cfd939a4bc9 Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Fri, 17 Jun 2022 16:24:23 -0300 Subject: [PATCH 7/7] 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',] }
2101xxxxxxxxxxxxxxxx
2102xxxxxxxxxxxxxxxx
2103xxxxxxxxxxxxxxxx
2104xxxxxxxxxxxxxxxx
2105xxxxxxxxxxxxxxxx
2106xxxxxxxxxxxxxxxx
2107xxxxxxxxxxxxxxxx
2108xxxxxxxxxxxxxxxx
2109xxxxxxxxxxxxxxxx
2110xxxxxxxxxxxxxxxx
2111xxxxxxxxxxxxxxxx
2112xxxxxxxxxxxxxxxx
2021xxxxxxxxxxxxxxxx
{data.year_month_formatted}{data.nordeste}{data.norte}{data.sudeste}{data.sul}
Mín xxxx