Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

fixing charts economy

Browse Source
This commit is contained in:
joseCorte-exe 2022-07-20 17:07:49 -03:00
parent 5c18684b4d
commit 30d31d03a4
7 changed files with 140 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/graph/cativoXLivreChart/CativoXLivreChartView.ts
View File

@ -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;

17
src/components/graph/cativoXLivreChart/index.tsx
View File

@ -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<ChartJS>(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)
}),

2
src/components/graph/costIndicatorChart/CostIndicatorChartView.ts
View File

@ -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;

16
src/components/graph/grossAnualChart/GrossAnualChart.tsx
View File

@ -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',

2
src/components/graph/grossAnualChart/GrossAnualChartView.ts
View File

@ -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;

26
src/pages/economy/index.tsx
View File

@ -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,15 +86,15 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
}, [unity])
return (
<EconomyView>
<main style={{width: '100%'}}>
<Head>
<title>Smart Energia - PLD</title>
<title>Smart Energia - Economia</title>
</Head>
<div id='title'/>
<Header name={userName}>
<PageTitle title='Economia' subtitle='Gráficos de economia'/>
</Header>
<EconomyView>
<TableHeader>
<Tabs value={economyMenu} onChange={(e, nv) => setEconomyMenu(nv)} aria-label="">
<Tab label="Acumulada Anual"/>
@ -106,7 +103,18 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
<Tab label="Custo R$/MWh"/>
</Tabs>
</TableHeader>
{
economyMenu === 0?
<p style={{marginLeft: '3%'}}>Economia Bruta Anual - Valores em R$ x mil</p>
:
economyMenu === 1?
<p style={{marginLeft: '3%'}}>Economia Bruta Mensal - Valores em R$ x mil</p>
:
economyMenu === 2?
<p style={{marginLeft: '3%'}}>Economia Estimada x Consolidada - Valores em R$ x mil</p>
:
<p style={{marginLeft: '3%'}}>Economia Custo R$/MWH - Valores em R$ x mil</p>
}
{
typeof window === 'undefined' || typeof window === undefined? null :
<>
@ -132,7 +140,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
</RenderIf>
<RenderIf isTrue={economyMenu===2}>
<div style={{paddingLeft: '7%'}}>
<div style={{paddingLeft: '3%'}}>
<FormControl sx={{ m: 1, minWidth: 120, width: 200, height: '64px' }} size="small">
<InputLabel id="demo-select-small">Unidade</InputLabel>
<Select
@ -194,8 +202,8 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
</RenderIf>
</>
}
</EconomyView>
</main>
)
}

13
src/styles/layouts/economy/economy.ts
View File

@ -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;