From 0c8d6d63a7163b1d3088734b183a3117a851b9c4 Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Wed, 6 Jul 2022 17:22:28 -0300 Subject: [PATCH] fixs --- .../buttons/gradientButton/GradientButton.tsx | 1 - .../gradientButton/GradientButtonView.ts | 2 +- src/components/graph/Chart.tsx | 1 + src/components/graph/Chart2.tsx | 37 ++-- src/components/graph/SingleBar.tsx | 10 +- .../CativoXLivreChartView.ts | 27 +++ .../graph/cativoXLivreChart/index.tsx | 189 ++++++++++++++++++ .../CostIndicatorChartView.ts | 27 +++ .../graph/costIndicatorChart/index.tsx | 125 ++++++++++++ .../graph/grossAnualChart/GrossAnualChart.tsx | 143 +++++++++++++ .../grossAnualChart/GrossAnualChartView.ts | 27 +++ .../grossMensalChart/GrossMensalChart.tsx | 136 +++++++++++++ .../grossMensalChart/GrossMensalChartView.ts | 14 ++ src/pages/accumulatedSavings/index.tsx | 10 +- src/pages/administrative/clients/index.tsx | 16 +- src/pages/chartTelemetry/index.tsx | 155 +++++++------- src/pages/costIndicator/index.tsx | 12 +- src/pages/estimatedCost/index.tsx | 3 +- src/pages/grossSavings/index.tsx | 5 +- src/pages/pld/index.tsx | 35 +--- src/pages/resumoOperacao/index.tsx | 14 +- .../ResumoOperacao/ResumoOperacaoView.ts | 9 +- src/styles/layouts/pld/PldView.ts | 12 ++ 23 files changed, 843 insertions(+), 167 deletions(-) create mode 100644 src/components/graph/cativoXLivreChart/CativoXLivreChartView.ts create mode 100644 src/components/graph/cativoXLivreChart/index.tsx create mode 100644 src/components/graph/costIndicatorChart/CostIndicatorChartView.ts create mode 100644 src/components/graph/costIndicatorChart/index.tsx create mode 100644 src/components/graph/grossAnualChart/GrossAnualChart.tsx create mode 100644 src/components/graph/grossAnualChart/GrossAnualChartView.ts create mode 100644 src/components/graph/grossMensalChart/GrossMensalChart.tsx create mode 100644 src/components/graph/grossMensalChart/GrossMensalChartView.ts diff --git a/src/components/buttons/gradientButton/GradientButton.tsx b/src/components/buttons/gradientButton/GradientButton.tsx index 8873d16..e635c4e 100644 --- a/src/components/buttons/gradientButton/GradientButton.tsx +++ b/src/components/buttons/gradientButton/GradientButton.tsx @@ -22,7 +22,6 @@ export default function GradientButton({ title, description, orange, purple, gre return ( handleClick()}>

{title}

-

{description}

 ) } diff --git a/src/components/buttons/gradientButton/GradientButtonView.ts b/src/components/buttons/gradientButton/GradientButtonView.ts index ee5e7cc..6bffed5 100644 --- a/src/components/buttons/gradientButton/GradientButtonView.ts +++ b/src/components/buttons/gradientButton/GradientButtonView.ts @@ -20,7 +20,7 @@ export const GradientButtonView = styled.button` color: #FFFFFF; background: ${ props => props.color==='orange'? - 'linear-gradient(200.86deg, #ff7f59 8.03%, #df4b1f 91.97%),#FFFFFF' + 'linear-gradient(200.86deg, #e7992f 8.03%, #e7992f 91.97%),#FFFFFF' : props.color === 'purple'? 'linear-gradient(200.69deg, #254f7f 9%, #254f7f 98%), #FFFFFF' diff --git a/src/components/graph/Chart.tsx b/src/components/graph/Chart.tsx index 83413eb..36016c2 100644 --- a/src/components/graph/Chart.tsx +++ b/src/components/graph/Chart.tsx @@ -48,6 +48,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1, responsive: true, scales: { x: { + stacked: true, grid: { display: false } diff --git a/src/components/graph/Chart2.tsx b/src/components/graph/Chart2.tsx index 85ec46d..00bc95f 100644 --- a/src/components/graph/Chart2.tsx +++ b/src/components/graph/Chart2.tsx @@ -50,6 +50,11 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1, display: false } }, + y: { + grid: { + display: false + } + }, }, plugins: { datalabels: { @@ -61,8 +66,8 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1, 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') : ''}` + 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 }, @@ -89,34 +94,16 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1, datasets: [ { type: 'bar', - label: dataset1? dataset1 : '2021', - data: data1.map(value => value.economia_acumulada? value.economia_acumulada : 0), + label: 'Acumulado', + data: data1.map(value => value?.economia_acumulada), backgroundColor: '#255488' - // backgroundColor: (value, ctx) => { - // return data1[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb'); - // }, }, { type: 'bar', - label: dataset2? dataset2 : '2022', - data: data2.map(value => value.economia_acumulada? value.economia_acumulada : 0), - // backgroundColor: '#255488' - // backgroundColor: (value, ctx) => { - // return data2[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb'); - // }, + label: 'Estimado', + data: data2.map(value => value.dad_estimado? value?.economia_acumulada : null), + backgroundColor: draw('diagonal-right-left', '#C2d5fb') }, - { - type: 'line', - label: ['Acumulado'], - backgroundColor: '#255488', - data: [], - }, - { - type: 'line', - label: ['Estimado'], - backgroundColor: draw('diagonal-right-left', '#C2d5fb'), - data: [], - } ], } diff --git a/src/components/graph/SingleBar.tsx b/src/components/graph/SingleBar.tsx index aebf803..bcd9179 100644 --- a/src/components/graph/SingleBar.tsx +++ b/src/components/graph/SingleBar.tsx @@ -25,9 +25,10 @@ interface SingleBarInterface{ dataset: string, barLabel?: boolean | undefined, miniature?: boolean | undefined, + bruta?: boolean | undefined } -export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel, miniature }: SingleBarInterface) { +export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel, miniature, bruta }: SingleBarInterface) { const options: object = { responsive: true, scales: { @@ -82,7 +83,12 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel }, }; - const labels = label; + let labels: string[]; + if (bruta) { + labels = label.map(value => value.replace('2021', 'até 2021')) + } else { + labels = label + } const data: any = { labels, diff --git a/src/components/graph/cativoXLivreChart/CativoXLivreChartView.ts b/src/components/graph/cativoXLivreChart/CativoXLivreChartView.ts new file mode 100644 index 0000000..cf181f0 --- /dev/null +++ b/src/components/graph/cativoXLivreChart/CativoXLivreChartView.ts @@ -0,0 +1,27 @@ +import styled from "styled-components" + +export const CativoXLivreChartView = styled.div` + width: 90%; + + div{ + /* margin-top: 10px; */ + } + + @media (max-width: 900px) { + min-width: 20rem + } + +` + +export const ChartTitleView = styled.div` + display: flex; + justify-content: center; + align-items: center; + margin-top: 50px; + + flex-direction: column; + + * { + margin: 0; + } +` diff --git a/src/components/graph/cativoXLivreChart/index.tsx b/src/components/graph/cativoXLivreChart/index.tsx new file mode 100644 index 0000000..d283563 --- /dev/null +++ b/src/components/graph/cativoXLivreChart/index.tsx @@ -0,0 +1,189 @@ +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 { CativoXLivreChartView } from './CativoXLivreChartView'; +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, + miniature?: boolean | undefined, +} + +export function CativoXLivreChart({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3, barLabel, hashurado, miniature }: LineBarChartInterface) { + const chartRef = useRef(null); + + const labels = label + + const options: any = { + responsive: true, + scales: { + x: { + grid: { + display: false + } + }, + y: { + grid: { + display: false + } + }, + }, + plugins: { + datalabels: { + display: true, + color: barLabel? 'black' : "rgba(255, 255, 255, 0)", + // backgroundColor: '#255488', + anchor: "end", + offset: -20, + align: "start", + font: { + size: !miniature? 15 : 10 + }, + formatter: (value, ctx) => { + let sum = 0; + const dataArr = ctx.chart.data.datasets[0].data; + dataArr.map(data => { + sum += data; + }); + const result = `${(parseInt(value)/1000).toLocaleString('pt-br')}` + + return value==null? null : result + } + }, + legend: { + position: 'bottom' as const, + }, + title: { + display: true, + text: '', + }, + }, + }; + + const data: any = { + labels, + datasets: [ + { + type: 'line' as const, + label: dataset1? dataset1 : 'Dataset 1', + borderColor: '#0c9200', + datalabels: { + backgroundColor: 'white', + borderRadius: 8, + opacity: .8 + }, + borderWidth: 2, + fill: false, + data: data1.map(value => value.economia_mensal), + }, + { + type: 'bar' as const, + label: 'Cativo', + backgroundColor: (value, ctx) => { + return hashurado? data1[value.dataIndex]?.dad_estimado == false? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB' + }, + data: data3.map(value => value.custo_cativo), + }, + { + type: 'bar' as const, + label: 'Livre', + // backgroundColor: '#255488', + backgroundColor: (value, ctx) => { + return hashurado? data1[value.dataIndex]?.dad_estimado == false? '#255488' : pattern.draw('diagonal', '#255488') : '#255488' + }, + data: data2.map(value => value.custo_livre), + }, + { + type: 'line', + label: 'Est. Livre', + backgroundColor: pattern.draw('diagonal', '#255488'), + data: [], + }, + { + type: 'line', + label: 'Est. Cativo', + backgroundColor: pattern.draw('diagonal', '#C2D5FB'), + data: [], + } + ], + } + + useEffect(() => { + const chart = chartRef.current; + + // triggerTooltip(chart); + }, []); + + return ( + + +
+ +
+ + ) +} diff --git a/src/components/graph/costIndicatorChart/CostIndicatorChartView.ts b/src/components/graph/costIndicatorChart/CostIndicatorChartView.ts new file mode 100644 index 0000000..3e2124e --- /dev/null +++ b/src/components/graph/costIndicatorChart/CostIndicatorChartView.ts @@ -0,0 +1,27 @@ +import styled from "styled-components" + +export const CostIndicatorChartView = styled.div` + width: 90%; + + div{ + /* margin-top: 10px; */ + } + + @media (max-width: 900px) { + min-width: 20rem + } + +` + +export const ChartTitleView = styled.div` + display: flex; + justify-content: center; + align-items: center; + margin-top: 50px; + + flex-direction: column; + + * { + margin: 0; + } +` diff --git a/src/components/graph/costIndicatorChart/index.tsx b/src/components/graph/costIndicatorChart/index.tsx new file mode 100644 index 0000000..3a1d80b --- /dev/null +++ b/src/components/graph/costIndicatorChart/index.tsx @@ -0,0 +1,125 @@ +import React, { useState, useEffect } from 'react' + +import { draw } from 'patternomaly' + +import { Bar } from 'react-chartjs-2'; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + BarElement, + Title, + Tooltip, + Legend +} from 'chart.js' + +import { CostIndicatorChartView } from './CostIndicatorChartView'; +import ChartTitle from '../ChartTitle'; + +ChartJS.register( + CategoryScale, + LinearScale, + BarElement, + Title, + Tooltip, + Legend +) + +interface ChartInterface { + title: string, + subtitle: string, + data1: any, + data2: any, + single?: any + label: any, + miniature?: boolean | undefined +} + +export default function CostIndicatorChart({ title, data1, data2, label, subtitle, miniature }: ChartInterface) { + + const labels = label; + + const options: any = { + responsive: true, + scales: { + x: { + stacked: true, + 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 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: '2021', + data: data1.map(value => value.custo_unit>0? value.custo_unit : null), + backgroundColor: '#C2d5fb' + // backgroundColor: (value, ctx) => { + // return data1[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#255488'); + // }, + }, + { + label: '2022', + data: data2.map(value => value.custo_unit>0? value.custo_unit : null), + // backgroundColor: '#255488' + backgroundColor: (value, ctx) => { + return data2[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#255488'); + }, + } + ], + } + + return ( + + {/* + + */} + + + + ) +} diff --git a/src/components/graph/grossAnualChart/GrossAnualChart.tsx b/src/components/graph/grossAnualChart/GrossAnualChart.tsx new file mode 100644 index 0000000..0fab1c4 --- /dev/null +++ b/src/components/graph/grossAnualChart/GrossAnualChart.tsx @@ -0,0 +1,143 @@ +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 { GrossAnualChartView } from './GrossAnualChartView'; +import ChartTitle from '../ChartTitle'; + +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 GrossAnulChart({ title, subtitle, dataProps, label, dataset, barLabel, miniature, bruta }: SingleBarInterface) { + function spacement(string) { + let spaces = '⠀' + let i=Math.abs(string) + + while (i <= 1) { + i-- + spaces = spaces + `⠀` + } + + return spaces + } + const options: object = { + responsive: true, + scales: { + x: { + font: { + size: 20 + }, + grid: { + display: false + } + }, + y: { + 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 = `${spacement(parseInt(value).toLocaleString('pt-br'))}${percentage}\n${parseInt(value).toLocaleString('pt-br')}` + + 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' : draw('diagonal-right-left', '#C2d5fb'); + }, + }, + { + 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/grossAnualChart/GrossAnualChartView.ts b/src/components/graph/grossAnualChart/GrossAnualChartView.ts new file mode 100644 index 0000000..ef7a227 --- /dev/null +++ b/src/components/graph/grossAnualChart/GrossAnualChartView.ts @@ -0,0 +1,27 @@ +import styled from "styled-components" + +export const GrossAnualChartView = styled.div` + width: 90%; + + div{ + /* margin-top: 10px; */ + } + + @media (max-width: 900px) { + min-width: 20rem + } + +` + +export const ChartTitleView = styled.div` + display: flex; + justify-content: center; + align-items: center; + margin-top: 50px; + + flex-direction: column; + + * { + margin: 0; + } +` diff --git a/src/components/graph/grossMensalChart/GrossMensalChart.tsx b/src/components/graph/grossMensalChart/GrossMensalChart.tsx new file mode 100644 index 0000000..09beafa --- /dev/null +++ b/src/components/graph/grossMensalChart/GrossMensalChart.tsx @@ -0,0 +1,136 @@ +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 { GrossMensalChartView } from './GrossMensalChartView'; +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, + + miniature?: boolean | undefined +} + +export default function GrossMensalChart({ title, data1, data2, label, subtitle, miniature }: ChartInterface) { + function spacement(string) { + let spaces = '⠀' + let i=Math.abs(string) + + while (i <= 1) { + i-- + spaces = spaces + `⠀` + } + + return spaces + } + + 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 = `⠀${spacement(parseInt(value+3).toLocaleString('pt-br'))}${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: data1.map(value => value.mes), + 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: draw('diagonal-right-left', '#C2d5fb') + }, + ], + } + + return ( + + {/* + + */} + + + + ) +} diff --git a/src/components/graph/grossMensalChart/GrossMensalChartView.ts b/src/components/graph/grossMensalChart/GrossMensalChartView.ts new file mode 100644 index 0000000..28abf0c --- /dev/null +++ b/src/components/graph/grossMensalChart/GrossMensalChartView.ts @@ -0,0 +1,14 @@ +import styled from "styled-components" + +export const GrossMensalChartView = styled.div` + width: 100%; + + div{ + /* margin-top: 10px; */ + } + + @media (max-width: 900px) { + min-width: 20rem + } + +` diff --git a/src/pages/accumulatedSavings/index.tsx b/src/pages/accumulatedSavings/index.tsx index c9ff3c5..a3080b5 100644 --- a/src/pages/accumulatedSavings/index.tsx +++ b/src/pages/accumulatedSavings/index.tsx @@ -4,6 +4,7 @@ import { parseCookies } from 'nookies' import React from 'react' import Chart2 from '../../components/graph/Chart2' +import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart' import Header from '../../components/header/Header' import PageTitle from '../../components/pageTitle/PageTitle' @@ -35,10 +36,11 @@ export default function AccumulatedSavings({graphData, years, userName}: any) {
- value.mes.slice(3, 8).includes('2021'))} - data2={graphData.filter((value, index) => value.mes.slice(3, 8).includes('2022'))} - label={months}/> + {/* */} diff --git a/src/pages/administrative/clients/index.tsx b/src/pages/administrative/clients/index.tsx index 0bb0f38..ad271d2 100644 --- a/src/pages/administrative/clients/index.tsx +++ b/src/pages/administrative/clients/index.tsx @@ -99,10 +99,6 @@ export default function clients({ clients, userName }) { setOpenSnackSuccessDelete(false) } - function onChange(e) { - setLogo(e.target.files[0]) - } - function handleCreateClient({ name, email, @@ -149,12 +145,15 @@ export default function clients({ clients, userName }) { newImageUrls.push(URL.createObjectURL(image)) ) setImageURLs(newImageUrls) + + console.log('ola') }, [images]) function onImageChange(e: any) { + console.log('olá'); setImages([...e.target.files]) setLogo(e.target.files[0]) - // console.log(e); + console.log(e.target.files[0]); } return ( @@ -315,15 +314,16 @@ export default function clients({ clients, userName }) {
- {imageURLS.map((imageSrc, index) => ( - { + console.log('olá') + return - ))} + })}
diff --git a/src/pages/chartTelemetry/index.tsx b/src/pages/chartTelemetry/index.tsx index 2c5ae95..100a52a 100644 --- a/src/pages/chartTelemetry/index.tsx +++ b/src/pages/chartTelemetry/index.tsx @@ -42,18 +42,6 @@ const style = { }; export default function chartTelemetry({userName}) { - const [openFatorPotencia, setOpenFatorPotencia] = useState(false); - const handleCloseFatorPotencia = () => setOpenFatorPotencia(false); - - const [openConsumoDiscretizado1, setOpenConsumoDiscretizado1] = useState(false); - const handleCloseConsumoDiscretizado1 = () => setOpenConsumoDiscretizado1(false); - - const [openConsumoDiscretizado2, setOpenConsumoDiscretizado2] = useState(false); - const handleCloseConsumoDiscretizado2 = () => setOpenConsumoDiscretizado2(false); - - const [openDemandaContratada, setOpenDemandaContratada] = useState(false); - const handleCloseDemandaContratada = () => setOpenDemandaContratada(false); - const [fatorPotenciaData, setFatorPotenciaData] = useState(null); const [demRegXDemCon, setDemRegXDemCon] = useState(null); const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState(null); @@ -65,44 +53,94 @@ export default function chartTelemetry({userName}) { const {startDate, endDate, unity, discretization} = router.query + // async function getChartsData() { + // await api.post('/telemetry/powerFactor', { + // "filters": [ + // {"type" : "=", "field": "med_5min.ponto", "value": unity}, + // {"type" : "between", "field": "dia_num", "value": ["2022-04-01", "2022-04-28"]} + // ] + // }).then(res => { + // console.log(res.data.data) + // setFatorPotenciaData(res.data.data) + // }).catch(res => { + // // console.log(res) + // router.push('/telemetria') + // }) + + // await api.post('/telemetry/discretization', { + // "type": discretization? discretization : "5_min", + // "filters": [ + // {"type" : "=", "field": "med_5min.ponto", "value": unity}, + // {"type" : "between", "field": "dia_num", "value": [startDate, endDate]} + // ] + // }).then(res => { + // setDiscretizedConsumptionDataReativa(res.data.data) + // }).catch(res => { + // // console.log(res) + // router.push('/telemetria') + // }) + + // await api.post('/telemetry/discretization', { + // "type": discretization? discretization : "5_min", + // "filters": [ + // {"type" : "=", "field": "med_5min.ponto", "value": unity}, + // {"type" : "between", "field": "dia_num", "value": [startDate, endDate]} + // ] + // }).then(res => { + // setDiscretizedConsumptionData(res.data.data) + // }).catch(res => { + // // console.log(res) + // router.push('/telemetria') + // }) + + // await api.post('/telemetry/demand', { + // "filters": [ + // {"type" : "=", "field": "med_5min.ponto", "value": unity}, + // {"type" : "between", "field": "dia_num", "value": [startDate, endDate]} + // ] + // }).then(res => { + // setDemRegXDemCon(res.data.data) + // }).catch(res => { + // // console.log(res) + // router.push('/telemetria') + // }) + // } async function getChartsData() { await api.post('/telemetry/powerFactor', { "filters": [ - {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}, - {"type" : "between", "field": "dia_num", "value": ["2022-04-01", "2022-04-28"]} + {"type" : "=", "field": "med_5min.ponto", "value": "PRAXCUENTR101P"}, + {"type" : "between", "field": "dia_num", "value": ["2022-01-01", "2022-01-31"]} ] }).then(res => { console.log(res.data.data) setFatorPotenciaData(res.data.data) }).catch(res => { - // console.log(res) - router.push('/telemetria') + console.log(res) + // router.push('/telemetria') }) await api.post('/telemetry/discretization', { - "type": discretization? discretization : "5_min", + "type": "1_mes", "filters": [ - {"type" : "=", "field": "med_5min.ponto", "value": unity}, - {"type" : "between", "field": "dia_num", "value": [startDate, endDate]} - ] + {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"} + ] }).then(res => { setDiscretizedConsumptionDataReativa(res.data.data) }).catch(res => { - // console.log(res) - router.push('/telemetria') + console.log(res) + // router.push('/telemetria') }) await api.post('/telemetry/discretization', { - "type": discretization? discretization : "5_min", + "type": "1__mes", "filters": [ - {"type" : "=", "field": "med_5min.ponto", "value": unity}, - {"type" : "between", "field": "dia_num", "value": [startDate, endDate]} - ] + {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"} + ] }).then(res => { setDiscretizedConsumptionData(res.data.data) }).catch(res => { - // console.log(res) - router.push('/telemetria') + console.log(res) + // router.push('/telemetria') }) await api.post('/telemetry/demand', { @@ -113,8 +151,8 @@ export default function chartTelemetry({userName}) { }).then(res => { setDemRegXDemCon(res.data.data) }).catch(res => { - // console.log(res) - router.push('/telemetria') + console.log(res) + // router.push('/telemetria') }) } @@ -143,79 +181,32 @@ export default function chartTelemetry({userName}) { <> -
setOpenConsumoDiscretizado2(true)}> +
value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>

{`Mês - ${startDate.toString().split('-')[2]}/${startDate.toString().split('-')[1]}/${startDate.toString().split('-')[0]}`}

- - - value.minut)} dataset={'Consumo'} dataset1='Estimado' month/> - - -
setOpenConsumoDiscretizado1(true)}> +
parseFloat(data.reativa).toFixed(3))} />
- - - data.reativa)} /> - - -
setOpenDemandaContratada(true)}> +
value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
- - - value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/> - - -
setOpenFatorPotencia(true)}> +
parseFloat(value.dia_num))} />
- - - parseFloat(value.dia_num))} /> - - - + }
diff --git a/src/pages/costIndicator/index.tsx b/src/pages/costIndicator/index.tsx index 27c6a87..7ed6485 100644 --- a/src/pages/costIndicator/index.tsx +++ b/src/pages/costIndicator/index.tsx @@ -4,6 +4,7 @@ import { parseCookies } from 'nookies' import React from 'react' import Chart from '../../components/graph/Chart' +import CostIndicatorChart from '../../components/graph/costIndicatorChart' import Header from '../../components/header/Header' import PageTitle from '../../components/pageTitle/PageTitle' import getAPIClient from '../../services/ssrApi' @@ -34,11 +35,12 @@ export default function CostIndicator({graphData, userName}: any) {
- value.mes.slice(4, 8).includes('2021'))} - // data1={graphData} - data2={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2022'))} - label={months}/> + value.mes.slice(4, 8).includes('2021'))} + // data1={graphData} + data2={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2022'))} + label={months} + />
) diff --git a/src/pages/estimatedCost/index.tsx b/src/pages/estimatedCost/index.tsx index 8965cdf..61f77b9 100644 --- a/src/pages/estimatedCost/index.tsx +++ b/src/pages/estimatedCost/index.tsx @@ -2,6 +2,7 @@ import { GetServerSideProps } from 'next' import Head from 'next/head' import { parseCookies } from 'nookies' import React from 'react' +import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart' import { LineBarChart2 } from '../../components/graph/LineBarChart2' import Header from '../../components/header/Header' @@ -20,7 +21,7 @@ export default function EstimatedCost({graphData, userName}: any) {
-
diff --git a/src/pages/grossSavings/index.tsx b/src/pages/grossSavings/index.tsx index f49affc..50d7afc 100644 --- a/src/pages/grossSavings/index.tsx +++ b/src/pages/grossSavings/index.tsx @@ -4,6 +4,7 @@ import { parseCookies } from 'nookies' import React from 'react' import Chart from '../../components/graph/Chart' +import { GrossAnulChart } from '../../components/graph/grossAnualChart/GrossAnualChart' import { SingleBar } from '../../components/graph/SingleBar' import Header from '../../components/header/Header' import PageTitle from '../../components/pageTitle/PageTitle' @@ -22,11 +23,11 @@ export default function GrossSavings({graphData, years, userName}: any) {
- + label={years} barLabel bruta/>
diff --git a/src/pages/pld/index.tsx b/src/pages/pld/index.tsx index 1ea6db7..09a3ced 100644 --- a/src/pages/pld/index.tsx +++ b/src/pages/pld/index.tsx @@ -183,7 +183,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
{'< Voltar para Visão Geral'} - +
@@ -198,27 +198,14 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) { { - tableData.data.sort((a, b) => { - if (parseFloat(a.year_month_formatted.slice(0,2)) > parseFloat(b.year_month_formatted.slice(1,2))) return 1 - if (parseFloat(a.year_month_formatted.slice(0,2)) < parseFloat(b.year_month_formatted.slice(1,2))) return -1 - - return 0 - }).sort((a, b) => { - if (parseFloat(a.year_month_formatted.slice(3,7)) > parseFloat(b.year_month_formatted.slice(3,7))) return 1 - if (parseFloat(a.year_month_formatted.slice(3,7)) < parseFloat(b.year_month_formatted.slice(3,7))) return -1 - - console.log(a.year_month_formatted.slice(3,7)) - console.log(b.year_month_formatted.slice(3,7)) - - return 0 - }).map(data => { + tableData.data.map(data => { return <> - - - - + + + + }) @@ -286,8 +273,8 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
- setPage('table')}>{'< Voltar para tabela PLD'} - + setPage('table')}>{'< Voltar para PLD Histórico'} +
@@ -348,12 +335,12 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
- {/* {'< Voltar para Visão Geral'} */} - setPage('table')}>{'< Voltar para tabela PLD'} - + setPage('table')}>{'< Voltar para PLD Histórico'} +
+

Selecione o mês:

setDate(value.target.value)}/>
Smart Energia - Resumo de Operação
- +

Filtrar por Unidade e/ou Mês

@@ -115,7 +115,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client - + Mês
- + { - tableDataState.sort((a, b) => { - if (parseFloat(a.mes.slice(0,2)) > parseFloat(b.mes.slice(1,2))) return 1 - if (parseFloat(a.mes.slice(0,2)) < parseFloat(b.mes.slice(1,2))) return -1 - - return 0 - }).map((value, index) => { + tableDataState.map((value, index) => { + if (value.mes.slice(4,7) != '2020') return <> diff --git a/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts b/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts index af7db9a..f74c34b 100644 --- a/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts +++ b/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts @@ -2,10 +2,13 @@ import styled from 'styled-components' export const TableView = styled.div` display: flex; + padding: 2.5rem; + justify-content: center; flex-direction: column; align-items: flex-start; + width: 100%; height: 100%; @@ -19,11 +22,11 @@ export const TableView = styled.div` .select{ display: flex; - flex-direction: column; + flex-direction: row; margin-bottom: 25px; - width: 20rem; + width: 30rem; } .tg{ @@ -40,7 +43,7 @@ export const TableView = styled.div` font-family:Poppins; font-size: 10px; overflow:hidden; - padding:17px 30px; + padding: 17px 20px; word-break:normal; } diff --git a/src/styles/layouts/pld/PldView.ts b/src/styles/layouts/pld/PldView.ts index 8c4fef1..9f2acbf 100644 --- a/src/styles/layouts/pld/PldView.ts +++ b/src/styles/layouts/pld/PldView.ts @@ -180,6 +180,18 @@ export const PldGraphView = styled.main` width: 20rem; } + .toolsbar { + display: flex; + justify-content: center; + align-items: flex-start!important; + + flex-direction: column; + + p { + margin: 0; + } + } + input { width: 20rem; height: 3.5rem;
{data.year_month_formatted}{parseFloat(data.nordeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}{parseFloat(data.norte).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}{parseFloat(data.sudeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}{parseFloat(data.sul).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}{parseFloat(data.nordeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2}).replace('R$', 'R$/MWh')}{parseFloat(data.norte).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2}).replace('R$', 'R$/MWh')}{parseFloat(data.sudeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2}).replace('R$', 'R$/MWh')}{parseFloat(data.sul).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2}).replace('R$', 'R$/MWh')}
Montante (MWh) ContraparteValorNF/Crédito(R$) Preço(R$/MWh)ValorNF/Crédito(R$)
{value.mes}