From aed20dec5ad535f0e1512d38c59b5132396c57a4 Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Mon, 15 Aug 2022 15:47:59 -0300 Subject: [PATCH] fixing --- .../AccumulatedEconomyTitle.tsx | 6 + .../AccumulatedEconomyTitleView.ts | 16 +++ src/components/graph/Chart.tsx | 125 ----------------- src/components/graph/Chart2.tsx | 124 ----------------- src/components/graph/SingleBar.tsx | 127 ------------------ src/components/graph/config.ts | 66 +++++++++ .../graph/costIndicatorChart/index.tsx | 71 ++-------- .../graph/graphCard/ChartCardView.ts | 15 --- src/pages/aboutUs/index.tsx | 3 +- src/pages/dashboard/index.tsx | 10 +- src/pages/economy/index.tsx | 33 ++--- src/pages/industryInfo/index.tsx | 4 +- .../ResumoOperacao/ResumoOperacaoView.ts | 6 + src/styles/layouts/aboutUs/AboutUsView.ts | 5 + src/styles/layouts/economy/economy.ts | 16 +-- .../layouts/industryInfo/IndustryInfoView.ts | 3 +- src/styles/layouts/pld/PldView.ts | 12 ++ 17 files changed, 142 insertions(+), 500 deletions(-) create mode 100644 src/components/accumulatedEconomyTitle/AccumulatedEconomyTitle.tsx create mode 100644 src/components/accumulatedEconomyTitle/AccumulatedEconomyTitleView.ts delete mode 100644 src/components/graph/Chart.tsx delete mode 100644 src/components/graph/Chart2.tsx delete mode 100644 src/components/graph/SingleBar.tsx create mode 100644 src/components/graph/config.ts diff --git a/src/components/accumulatedEconomyTitle/AccumulatedEconomyTitle.tsx b/src/components/accumulatedEconomyTitle/AccumulatedEconomyTitle.tsx new file mode 100644 index 0000000..d6e74ba --- /dev/null +++ b/src/components/accumulatedEconomyTitle/AccumulatedEconomyTitle.tsx @@ -0,0 +1,6 @@ +import React from 'react' +import { AccumulatedEconomyTitleView } from './AccumulatedEconomyTitleView' + +export default function AccumulatedEconomyTitle({value}: {value: string}) { + return Economia Acumulada:

R${value}

 +} diff --git a/src/components/accumulatedEconomyTitle/AccumulatedEconomyTitleView.ts b/src/components/accumulatedEconomyTitle/AccumulatedEconomyTitleView.ts new file mode 100644 index 0000000..213a806 --- /dev/null +++ b/src/components/accumulatedEconomyTitle/AccumulatedEconomyTitleView.ts @@ -0,0 +1,16 @@ +import styled from "styled-components"; + +export const AccumulatedEconomyTitleView = styled.b` + display: flex; + align-items: center; + justify-content: center; + + font-size: 17px; + + color: #254F7F; + p { + font-size: 20px; + color: #018A8A; + margin-left: 5px + } +` diff --git a/src/components/graph/Chart.tsx b/src/components/graph/Chart.tsx deleted file mode 100644 index d41ed15..0000000 --- a/src/components/graph/Chart.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import React, { useState, useEffect } from 'react' - -import { draw, generate } from 'patternomaly' - -import { Bar, Line } from 'react-chartjs-2'; -import { - Chart as ChartJS, - CategoryScale, - LinearScale, - BarElement, - Title, - Tooltip, - Legend -} from 'chart.js' - -import faker from 'faker' -import { ChartView } from './ChartView'; -import RenderIf from '../../utils/renderIf'; -import ChartTitle from './ChartTitle'; -// import { data } from './LineBarChart'; - -ChartJS.register( - CategoryScale, - LinearScale, - BarElement, - Title, - Tooltip, - Legend -) - -interface ChartInterface { - title: string, - subtitle: string, - data1: any, - data2: any, - single?: any - label: any, - dataset1?: string, - dataset2?: string, - miniature?: boolean | undefined -} - -export default function Chart({ title, data1, data2, label, subtitle, dataset1, dataset2, miniature }: ChartInterface) { - - const labels = label; - - const options: any = { - responsive: true, - scales: { - x: { - stacked: true, - grid: { - display: false - } - }, - }, - plugins: { - datalabels: { - display: true, - color: 'black', - formatter: (value, ctx) => { - let sum = 0; - const dataArr = ctx.chart.data.datasets[0].data; - dataArr.map(data => { - sum += data; - }); - const result = `${parseInt(value).toLocaleString('pt-br')}` - - return value==null? null : result - }, - anchor: "end", - align: "end", - font: { - size: !miniature? 15 : 10, - } - }, - legend: { - position: 'bottom' as const, - - }, - title: { - display: true, - text: '', - }, - }, - }; - - const data = { - labels, - datasets: [ - { - label: dataset1? dataset1 : '2021', - data: data1.map(value => value.custo_unit>0? value.custo_unit : null), - backgroundColor: '#255488' - // backgroundColor: (value, ctx) => { - // return data1[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#255488'); - // }, - }, - { - label: dataset2? dataset2 : '2022', - data: data2.map(value => value.custo_unit>0? value.custo_unit : null), - // backgroundColor: '#C2d5fb' - backgroundColor: (value, ctx) => { - return data2[value.dataIndex]?.dad_estimado == false ? '#C2d5fb' : document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null; - }, - } - ], - } - - return ( - - {/* - - */} - - - - ) -} diff --git a/src/components/graph/Chart2.tsx b/src/components/graph/Chart2.tsx deleted file mode 100644 index d8b3008..0000000 --- a/src/components/graph/Chart2.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import React from 'react' - -import { Bar, Line, Chart as ChartJs } from 'react-chartjs-2'; -import { - Chart as ChartJS, - CategoryScale, - LinearScale, - BarElement, - Title, - Tooltip, - Legend -} from 'chart.js' - -import { draw, generate } from 'patternomaly' - -import { ChartView } from './ChartView'; -import ChartTitle from './ChartTitle'; -// import { data } from './LineBarChart'; - -ChartJS.register( - CategoryScale, - LinearScale, - BarElement, - Title, - Tooltip, - Legend -) - -interface ChartInterface { - title: string, - subtitle: string, - data1: any, - data2: any, - single?: any - label: any, - dataset1?: string, - dataset2?: string, - miniature?: boolean | undefined -} - -export default function Chart({ title, data1, data2, label, subtitle, dataset1, dataset2, miniature }: ChartInterface) { - - const labels = label; - - const options: any = { - responsive: true, - scales: { - x: { - grid: { - display: false - } - }, - y: { - grid: { - display: false - } - }, - }, - plugins: { - datalabels: { - display: true, - color: 'black', - formatter: (value, ctx) => { - let sum = 0; - const dataArr = ctx.chart.data.datasets[0].data; - dataArr.map(data => { - sum += data; - }); - const percentage = data1[ctx.dataIndex]?.econ_percentual? (data1[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%" : ''; - const result = `${parseInt(value)!=0? percentage : ''}\n ${parseInt(value)!=0? parseInt(value).toLocaleString('pt-br') : ''}` - - return value==null? null : result - }, - anchor: "end", - offset: 0, - align: "end", - font: { - size: !miniature? 18 : 10, - } - }, - legend: { - position: 'bottom' as const, - - }, - title: { - display: true, - text: '', - }, - }, - }; - - const data: any = { - labels, - datasets: [ - { - type: 'bar', - label: 'Acumulado', - data: data1.map(value => value?.economia_acumulada), - backgroundColor: '#255488' - }, - { - type: 'bar', - label: 'Estimado', - data: data2.map(value => value.dad_estimado? value?.economia_acumulada : null), - backgroundColor: document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null - }, - ], - } - - return ( - - {/* - - */} - - - - ) -} diff --git a/src/components/graph/SingleBar.tsx b/src/components/graph/SingleBar.tsx deleted file mode 100644 index f34f1d8..0000000 --- a/src/components/graph/SingleBar.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js'; -import ChartDataLabels from 'chartjs-plugin-datalabels'; -import { draw, generate } from 'patternomaly' -import React from 'react'; -import { Bar } from 'react-chartjs-2'; - -import ChartTitle from './ChartTitle'; -import { ChartView } from './ChartView'; - -ChartJS.register( - CategoryScale, - LinearScale, - BarElement, - Title, - Tooltip, - Legend, - ChartDataLabels -); - -interface SingleBarInterface{ - title: string, - subtitle: string, - dataProps: any, - label: Array, - dataset: string, - barLabel?: boolean | undefined, - miniature?: boolean | undefined, - bruta?: boolean | undefined -} - -export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel, miniature, bruta }: SingleBarInterface) { - const options: object = { - responsive: true, - scales: { - x: { - font: { - size: 20 - }, - grid: { - display: false - } - }, - }, - series: { - downsample: { - threshold: 1000 - } - }, - plugins: { - datalabels: { - formatter: (value, ctx) => { - let sum = 0; - const dataArr = ctx.chart.data.datasets[0].data; - dataArr.map(data => { - sum += data; - }); - const percentage = (dataProps[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%"; - const result = ` ${parseInt(value).toLocaleString('pt-br')}\n ${percentage}` - - return value==null? null : result - }, - display: true, - color: barLabel? 'black' : "rgba(255, 255, 255, 0)", - anchor: "end", - offset: -60, - align: "start", - font: { - size: !miniature? 22 : 10 - } - }, - legend: { - position: 'bottom' as const, - labels: { - font: { - size: 16 - } - } - }, - title: { - display: false, - text: '', - }, - }, - }; - - let labels: string[]; - if (bruta) { - labels = label.map(value => value.replace('2021', 'até 2021')) - } else { - labels = label - } - - const data: any = { - labels, - datasets: [ - { - label: 'Estimado', - data: [], - backgroundColor: '#C2d5fb', - }, - { - label: dataset, - data: dataProps.map((value, index) => { - return parseFloat(value.economia_acumulada).toFixed(2) - }), - backgroundColor: (value, ctx) => { - return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null; - }, - }, - { - label: '', - data: [dataProps[0]?.economia_acumulada?dataProps[0].economia_acumulada*1.1 : 1], - backgroundColor: 'transparent', - datalabels: { - display: false - } - }, - ], - } - - return ( - - - - - ) -} diff --git a/src/components/graph/config.ts b/src/components/graph/config.ts new file mode 100644 index 0000000..03a9458 --- /dev/null +++ b/src/components/graph/config.ts @@ -0,0 +1,66 @@ +import { ChartOptions, ChartType } from "chart.js"; + +const config = (miniature: boolean | undefined): ChartOptions => { + const options: any = { + responsive: true, + scales: { + x: { + stacked: false, + grid: { + display: false + }, + ticks: { + font: { + size: !miniature? window.innerWidth/90 : window.innerWidth/110 + } + }, + }, + y: { + stacked: false, + grid: { + display: false + }, + ticks: { + font: { + size: !miniature? window.innerWidth/90 : window.innerWidth/110 + } + }, + }, + }, + plugins: { + datalabels: { + display: true, + color: '#255488', + formatter: (value, ctx) => { + let sum = 0; + const dataArr = ctx.chart.data.datasets[0].data; + dataArr.map(data => { + sum += data; + }); + const result = `${parseFloat((parseFloat(value)).toLocaleString('pt-br'))}` + + return value==null? null : result + }, + anchor: "end", + align: "end", + font: { + weight: 'bold', + size: !miniature? window.innerWidth/80 : window.innerWidth/105 + } + }, + legend: { + position: 'bottom' as const, + + }, + title: { + display: true, + text: '', + }, + }, + }; + return options +} + +export { + config +} diff --git a/src/components/graph/costIndicatorChart/index.tsx b/src/components/graph/costIndicatorChart/index.tsx index 5dc7051..bb5d02b 100644 --- a/src/components/graph/costIndicatorChart/index.tsx +++ b/src/components/graph/costIndicatorChart/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react' +import React from 'react' import { draw } from 'patternomaly' @@ -16,6 +16,7 @@ import { import { CostIndicatorChartView } from './CostIndicatorChartView'; import ChartTitle from '../ChartTitle'; import { Stack } from '@mui/material'; +import { config } from '../config'; ChartJS.register( CategoryScale, @@ -40,72 +41,18 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl const labels = label; - const options: any = { - responsive: true, - scales: { - x: { - stacked: false, - grid: { - display: false - }, - ticks: { - font: { - size: !miniature? window.innerWidth/90 : window.innerWidth/110 - } - }, - }, - y: { - stacked: false, - grid: { - display: false - }, - ticks: { - font: { - size: !miniature? window.innerWidth/90 : window.innerWidth/110 - } - }, - }, - }, - plugins: { - datalabels: { - display: true, - color: '#255488', - formatter: (value, ctx) => { - let sum = 0; - const dataArr = ctx.chart.data.datasets[0].data; - dataArr.map(data => { - sum += data; - }); - const result = `${parseFloat((parseFloat(value)).toLocaleString('pt-br'))}` + const options: any = config(miniature) - return value==null? null : result - }, - anchor: "end", - align: "end", - font: { - weight: 'bold', - size: !miniature? window.innerWidth/80 : window.innerWidth/105 - } - }, - legend: { - position: 'bottom' as const, - - }, - title: { - display: true, - text: '', - }, - }, - }; + console.log(data1?.map(value => value)) const data = { labels, datasets: [ { label: '2021', - data: data1?.map(value => value.custo_unit>0? value.custo_unit : null), - borderRadius: 8, + data: data1?.map(value => value), skipNull: true, + borderRadius: 8, datalabels: { backgroundColor: 'white', borderRadius: 8, @@ -113,7 +60,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl offset: -5 }, backgroundColor: (value, ctx) => { - if (value.dad_estimado) + if (value?.dad_estimado) return draw('diagonal-right-left', '#C2d5fb'); else return '#C2d5fb' @@ -121,11 +68,11 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl }, { label: '2022', - data: data2?.map(value => value.custo_unit>0? value.custo_unit : null), + data: data2?.map(value => value?.custo_unit), skipNull: true, borderRadius: 8, backgroundColor: (value, ctx) => { - if (value.dad_estimado) + if (value?.dad_estimado) return draw('diagonal-right-left', '#255488'); else return '#255488' diff --git a/src/components/graph/graphCard/ChartCardView.ts b/src/components/graph/graphCard/ChartCardView.ts index 351fc21..ddd8109 100644 --- a/src/components/graph/graphCard/ChartCardView.ts +++ b/src/components/graph/graphCard/ChartCardView.ts @@ -26,21 +26,6 @@ export const ChartCardView = styled.article` margin-bottom: 10px; } - b { - display: flex; - align-items: center; - justify-content: center; - - font-size: 17px; - - color: #254F7F; - p { - font-size: 20px; - color: #018A8A; - margin-left: 5px - } - } - a { font-family: 'Poppins'; font-style: normal; diff --git a/src/pages/aboutUs/index.tsx b/src/pages/aboutUs/index.tsx index 1b450b6..2d1fdb9 100644 --- a/src/pages/aboutUs/index.tsx +++ b/src/pages/aboutUs/index.tsx @@ -3,7 +3,6 @@ import Head from 'next/head' import Image from 'next/image' import { parseCookies } from 'nookies' import React from 'react' -import Banner from '../../components/banner/Banner' import Header from '../../components/header/Header' import PageTitle from '../../components/pageTitle/PageTitle' import getAPIClient from '../../services/ssrApi' @@ -38,7 +37,7 @@ export default function aboutUs({userName, text}) {
- +
{ typeof window === 'undefined' || typeof window === undefined? null : @@ -139,7 +140,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta @@ -222,8 +223,6 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { await apiClient.post('/economy/grossAnnual').then(res => { anual = res.data.data - }).catch(res => { - // console.log(res) }) const years = anual.map((value) => value.ano) @@ -232,9 +231,6 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { await apiClient.post('/economy/grossMonthly').then(res => { brutaMensal = res.data.data - // console.log(graphData[0].mes) - }).catch(res => { - // console.log(res) }) const yearsBrutaMensal = brutaMensal.map((value) => value.mes) @@ -252,26 +248,17 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { "cod_smart_unidade", "codigo_scde"], "distinct": true -}).then(res => { + }).then(res => { clients = res.data.data - }).catch(res => { - // console.log(res) }) - await apiClient.post('/economy/estimates').then(res => { catLiv = res.data.data - }).catch(res => { - // console.log(res) }) - let indicatorCost = [] await apiClient.post('/economy/MWh').then(res => { indicatorCost = res.data.data - }).catch(res => { - // console.log(res) }) - if (!token) { return { redirect: { diff --git a/src/pages/industryInfo/index.tsx b/src/pages/industryInfo/index.tsx index 002eb44..18e5ce9 100644 --- a/src/pages/industryInfo/index.tsx +++ b/src/pages/industryInfo/index.tsx @@ -65,9 +65,9 @@ export default function industryInfo({userName}: any) {
-

A Smart é uma empresa de vanguarda na informação sobre o Setor Elétrico Brasileiro e mantém sólidos relacionamentos com os agentes e entidades do setor, +

A Smart é uma empresa de vanguarda na informação sobre o Setor Elétrico Brasileiro e mantém sólidos relacionamentos com os agentes e entidades do setor, a informação precisa aliada à mais de 21 anos de experiência torna a sua consultoria estratégica para consumidores e geradores

- +

Um resumo das atualizações gerais do Setor Elétrico, com dados sobre geração consumo, demanda, meteorologia baseadas em informações do ONS, CCEE, ANEEL, 10 Maiores Jornais e Revistas e CPTEC

diff --git a/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts b/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts index 532c1b9..c58497a 100644 --- a/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts +++ b/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts @@ -175,6 +175,12 @@ export const TableBodyView = styled.section` border-style:solid; border-width: 1px; + background: #F8F8F8; + box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; + -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; + -moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; + border-radius: 10px; + tr { :last-child { /* background-color: red; */ diff --git a/src/styles/layouts/aboutUs/AboutUsView.ts b/src/styles/layouts/aboutUs/AboutUsView.ts index 7a5327a..e214868 100644 --- a/src/styles/layouts/aboutUs/AboutUsView.ts +++ b/src/styles/layouts/aboutUs/AboutUsView.ts @@ -19,7 +19,12 @@ export const AboutUsView = styled.main` transform: translateY(-190px); } + p { + text-align: justify; + } + h2 { + margin-top: 40px; font-size: 16px; } diff --git a/src/styles/layouts/economy/economy.ts b/src/styles/layouts/economy/economy.ts index 6d7e755..80eec37 100644 --- a/src/styles/layouts/economy/economy.ts +++ b/src/styles/layouts/economy/economy.ts @@ -34,25 +34,13 @@ export const EconomyView = styled.main` align-items: center; justify-content: space-between; - b { - display: flex; - align-items: center; - justify-content: center; - - font-size: 17px; - p { - font-size: 20px; - text-decoration: underline; - } - } - - p { + /* p { :first-child { margin-left: '3%' } :last-child { color: #254F7F; } - } + } */ } ` diff --git a/src/styles/layouts/industryInfo/IndustryInfoView.ts b/src/styles/layouts/industryInfo/IndustryInfoView.ts index f45f611..a7b71c2 100644 --- a/src/styles/layouts/industryInfo/IndustryInfoView.ts +++ b/src/styles/layouts/industryInfo/IndustryInfoView.ts @@ -18,7 +18,7 @@ export const IndustryInfoView = styled.main` } p { - text-align: justify; + text-align: justify!important; } button{ @@ -64,6 +64,7 @@ export const IndustryInfoView = styled.main` flex-direction: row; p { + text-align: justify; width: 75% } } diff --git a/src/styles/layouts/pld/PldView.ts b/src/styles/layouts/pld/PldView.ts index 6bbc523..d3bd1d8 100644 --- a/src/styles/layouts/pld/PldView.ts +++ b/src/styles/layouts/pld/PldView.ts @@ -9,6 +9,12 @@ export const PldTableMinMaxView = styled.div` border-style:solid; border-width: 1px; + background: #F8F8F8; + box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; + -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; + -moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; + border-radius: 10px; + background-color: #FFFFFF; margin-top: 15px; @@ -218,6 +224,12 @@ export const PldTableView = styled.div<{display?: boolean}>` border-style:solid; border-width: 1px; + background: #F8F8F8; + box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; + -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; + -moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; + border-radius: 10px; + background-color: #FFFFFF; margin-top: 38px;