From 30d31d03a4576fb69644043532a936d4cca0c5f1 Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Wed, 20 Jul 2022 17:07:49 -0300 Subject: [PATCH] fixing charts economy --- .../CativoXLivreChartView.ts | 2 +- .../graph/cativoXLivreChart/index.tsx | 17 +- .../CostIndicatorChartView.ts | 2 +- .../graph/grossAnualChart/GrossAnualChart.tsx | 16 +- .../grossAnualChart/GrossAnualChartView.ts | 2 +- src/pages/economy/index.tsx | 208 +++++++++--------- src/styles/layouts/economy/economy.ts | 13 ++ 7 files changed, 140 insertions(+), 120 deletions(-) diff --git a/src/components/graph/cativoXLivreChart/CativoXLivreChartView.ts b/src/components/graph/cativoXLivreChart/CativoXLivreChartView.ts index cf181f0..4b548dc 100644 --- a/src/components/graph/cativoXLivreChart/CativoXLivreChartView.ts +++ b/src/components/graph/cativoXLivreChart/CativoXLivreChartView.ts @@ -17,7 +17,7 @@ export const ChartTitleView = styled.div` display: flex; justify-content: center; align-items: center; - margin-top: 50px; + margin-top: 30px; flex-direction: column; diff --git a/src/components/graph/cativoXLivreChart/index.tsx b/src/components/graph/cativoXLivreChart/index.tsx index d4e79e6..5732a2b 100644 --- a/src/components/graph/cativoXLivreChart/index.tsx +++ b/src/components/graph/cativoXLivreChart/index.tsx @@ -66,12 +66,12 @@ interface LineBarChartInterface { dataset1?: string, dataset2?: string, dataset3?: string, - barLabel?: boolean | undefined, - hashurado?: boolean | undefined, miniature?: boolean | undefined, + barLabel?: boolean | undefined, + hashurado?: boolean | undefined } -export function CativoXLivreChart({ title, subtitle, chartData, label, red, dataset1, dataset2, dataset3, barLabel, hashurado, miniature }: LineBarChartInterface) { +export function CativoXLivreChart({ title, subtitle, chartData, label, dataset1, dataset2, dataset3, barLabel, hashurado, miniature }: LineBarChartInterface) { const chartRef = useRef(null); const labels = label @@ -141,9 +141,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data { type: 'bar' as const, label: 'Cativo', - backgroundColor: (value, ctx) => { - return '#C2D5FB' - }, + backgroundColor: '#C2D5FB', data: chartData?.map(value => { if (!value.dad_estimado) return parseInt(value.custo_cativo) @@ -152,11 +150,8 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data { type: 'bar' as const, label: 'Livre', - // backgroundColor: '#255488', - backgroundColor: (value, ctx) => { - return '#255488' - }, - data: chartData?.map(value => { + backgroundColor: '#255488', + data: chartData?.filter(value => !value.dad_estimad? true : false).map(value => { if (!value.dad_estimado) return parseInt(value.custo_livre) }), diff --git a/src/components/graph/costIndicatorChart/CostIndicatorChartView.ts b/src/components/graph/costIndicatorChart/CostIndicatorChartView.ts index 3e2124e..fe75412 100644 --- a/src/components/graph/costIndicatorChart/CostIndicatorChartView.ts +++ b/src/components/graph/costIndicatorChart/CostIndicatorChartView.ts @@ -17,7 +17,7 @@ export const ChartTitleView = styled.div` display: flex; justify-content: center; align-items: center; - margin-top: 50px; + margin-top: 30px; flex-direction: column; diff --git a/src/components/graph/grossAnualChart/GrossAnualChart.tsx b/src/components/graph/grossAnualChart/GrossAnualChart.tsx index 85fe2ab..96bcb1e 100644 --- a/src/components/graph/grossAnualChart/GrossAnualChart.tsx +++ b/src/components/graph/grossAnualChart/GrossAnualChart.tsx @@ -43,7 +43,7 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba x: { stacked: true, font: { - size: 20 + size: 30 }, grid: { display: false @@ -75,13 +75,16 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba return value==null? null : result }, display: true, - color: '#255488', anchor: "end", - offset: !miniature? -55 : -30, + offset: !miniature?20 : -30, align: "start", font: { - size: !miniature? 22 : 10, - } + size: !miniature? 30 : 10, + }, + color: (value) => { + console.log(value.dataset.label) + return value.dataset.label==='Consolidada'? '#fff' : '#255488' + }, }, legend: { position: 'bottom' as const, @@ -96,6 +99,7 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba text: '', }, }, + }; let labels: string[]; @@ -115,7 +119,7 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba data: dataProps.filter(value => value.dad_estimado === false).map((value, index) => { return parseFloat(value.economia_acumulada) }), - backgroundColor: '#255488' + backgroundColor: '#255488', }, { type: 'bar', diff --git a/src/components/graph/grossAnualChart/GrossAnualChartView.ts b/src/components/graph/grossAnualChart/GrossAnualChartView.ts index ef7a227..078f017 100644 --- a/src/components/graph/grossAnualChart/GrossAnualChartView.ts +++ b/src/components/graph/grossAnualChart/GrossAnualChartView.ts @@ -17,7 +17,7 @@ export const ChartTitleView = styled.div` display: flex; justify-content: center; align-items: center; - margin-top: 50px; + margin-top: 30px; flex-direction: column; diff --git a/src/pages/economy/index.tsx b/src/pages/economy/index.tsx index d2b0b9e..0a168d6 100644 --- a/src/pages/economy/index.tsx +++ b/src/pages/economy/index.tsx @@ -37,8 +37,6 @@ import { ConsumoEstimado } from '../../services/consumoEstimado'; import CostIndicatorChart from '../../components/graph/costIndicatorChart'; import { EconomyView } from '../../styles/layouts/economy/economy'; -import dynamic from 'next/dynamic'; - export default function economy({userName, anual, years, brutaMensal, yearsBrutaMensal, catLiv, clients, indicatorCost}: any) { const {economyMenu, setEconomyMenu} = useContext(MenuContext) @@ -69,7 +67,6 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta ] }:{}).then(res => { setCatLivDataState(res.data.data) - console.log() }).catch(res => { // console.log(res) }) @@ -89,113 +86,124 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta }, [unity]) return ( - +
- Smart Energia - PLD + Smart Energia - Economia
+ + + setEconomyMenu(nv)} aria-label=""> + + + + + + + { + economyMenu === 0? +

Economia Bruta Anual - Valores em R$ x mil

+ : + economyMenu === 1? +

Economia Bruta Mensal - Valores em R$ x mil

+ : + economyMenu === 2? +

Economia Estimada x Consolidada - Valores em R$ x mil

+ : +

Economia Custo R$/MWH - Valores em R$ x mil

+ } + { + typeof window === 'undefined' || typeof window === undefined? null : + <> + +
+ - setEconomyMenu(nv)} aria-label=""> - - - - - - + dataProps={anual} + label={years} barLabel bruta + /> +
+ - { - typeof window === 'undefined' || typeof window === undefined? null : - <> - -
- +
+ +
+ - dataProps={anual} - label={years} barLabel bruta - /> -
- + +
+ + Unidade + + +
+
+ +
+ - -
- -
- - - -
- - Unidade - - -
-
- -
- - - -
- - Unidade - - -
-
- value.mes.slice(0, 4).includes('2021'))} - data2={indicatorDataState?.filter((value, index) => value.mes.slice(0, 4).includes('2022'))} - label={months} - /> -
- - - } - - + +
+ + Unidade + + +
+
+ value.mes.slice(0, 4).includes('2021'))} + data2={indicatorDataState?.filter((value, index) => value.mes.slice(0, 4).includes('2022'))} + label={months} + /> +
+ + + } + +
) } diff --git a/src/styles/layouts/economy/economy.ts b/src/styles/layouts/economy/economy.ts index e101aaa..2b112b5 100644 --- a/src/styles/layouts/economy/economy.ts +++ b/src/styles/layouts/economy/economy.ts @@ -3,6 +3,16 @@ import styled from 'styled-components' export const EconomyView = styled.main` width: 100%; + 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: 20px; + + background-color: #FFFFFF; + + margin-top: 10px; + .MuiInputLabel-root, .MuiInputLabel-formControl { margin-top: 11px; } @@ -13,6 +23,9 @@ export const EconomyView = styled.main` align-items: center; } + .chartBox { + } + input { width: 16.6rem; height: 63px!important;