fixing charts economy

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;
 

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<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) => {
+        backgroundColor: '#C2D5FB',
-          return '#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: '#255488',
-        backgroundColor: (value, ctx) => {
+        data: chartData?.filter(value => !value.dad_estimad? true : false).map(value => {
-          return '#255488'
-        },
-        data: chartData?.map(value => {
           if (!value.dad_estimado)
           return parseInt(value.custo_livre)
         }),

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;
 

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

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;
 

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 (
-    <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"/>
+            <Tab label="Acumulada Mensal"/>
+            <Tab label="Cativo x Livre Mensal"/>
+            <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 :
+          <>
+            <RenderIf isTrue={economyMenu===0}>
+              <section>
+                <GrossAnualChart title='' subtitle=''
+                  dataset='Consolidada'
 
-      <TableHeader>
+                  dataProps={anual}
-        <Tabs value={economyMenu} onChange={(e, nv) => setEconomyMenu(nv)} aria-label="">
+                  label={years} barLabel bruta
-          <Tab label="Acumulada Anual"/>
+                />
-          <Tab label="Acumulada Mensal"/>
+              </section>
-          <Tab label="Cativo x Livre Mensal"/>
+            </RenderIf>
-          <Tab label="Custo R$/MWh"/>
-        </Tabs>
-      </TableHeader>
 
-      {
+            <RenderIf isTrue={economyMenu===1}>
-        typeof window === 'undefined' || typeof window === undefined? null :
+              <section>
-        <>
+                <GrossMensalChart title='' subtitle=''
-          <RenderIf isTrue={economyMenu===0}>
+                  data1={brutaMensal}
-            <section>
+                  data2={brutaMensal}
-              <GrossAnualChart title='' subtitle=''
+                  label={yearsBrutaMensal}
-                dataset='Consolidada'
+                />
+              </section>
+            </RenderIf>
 
-                dataProps={anual}
+            <RenderIf isTrue={economyMenu===2}>
-                label={years} barLabel bruta
+              <div style={{paddingLeft: '3%'}}>
-              />
+                <FormControl sx={{ m: 1, minWidth: 120, width: 200, height: '64px' }} size="small">
-            </section>
+                  <InputLabel id="demo-select-small">Unidade</InputLabel>
-          </RenderIf>
+                  <Select
+                    labelId="demo-select-small"
+                    id="demo-select-small"
+                    value={unity}
+                    label="Unidade"
+                    sx={{height: '64px'}}
+                    onChange={value => setUnity(value.target.value)}
+                    fullWidth
+                  >
+                    <MenuItem value="">Todas</MenuItem>
+                    {/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> !!OPÇAO COM DADOS TESTES!! */}
+                    {
+                      clients.map((value) => {
+                        return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
+                      })
+                    }
+                  </Select>
+                </FormControl>
+              </div>
+              <section>
+                <CativoXLivreChart chartData={unity!==''? catLivDataState : catLiv}
+                dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
+                label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado/>
+              </section>
+            </RenderIf>
 
-          <RenderIf isTrue={economyMenu===1}>
+            <RenderIf isTrue={economyMenu===3}>
-            <section>
+              <div style={{paddingLeft: '3%'}}>
-              <GrossMensalChart title='' subtitle=''
+                <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
-                data1={brutaMensal}
+                  <InputLabel id="demo-select-small">Unidade</InputLabel>
-                data2={brutaMensal}
+                  <Select
-                label={yearsBrutaMensal}
+                    labelId="demo-select-small"
-              />
+                    id="demo-select-small"
-            </section>
+                    value={unity}
-          </RenderIf>
+                    sx={{height: '64px'}}
-
+                    label="Unidade"
-          <RenderIf isTrue={economyMenu===2}>
+                    onChange={value => setUnity(value.target.value)}
-            <div style={{paddingLeft: '7%'}}>
+                    fullWidth
-              <FormControl sx={{ m: 1, minWidth: 120, width: 200, height: '64px' }} size="small">
+                  >
-                <InputLabel id="demo-select-small">Unidade</InputLabel>
+                    <MenuItem value="">Todas</MenuItem>
-                <Select
+                    {/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
-                  labelId="demo-select-small"
+                    {
-                  id="demo-select-small"
+                      clients.map((value) => {
-                  value={unity}
+                        return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
-                  label="Unidade"
+                      })
-                  sx={{height: '64px'}}
+                    }
-                  onChange={value => setUnity(value.target.value)}
+                  </Select>
-                  fullWidth
+                </FormControl>
-                >
+              </div>
-                  <MenuItem value="">Todas</MenuItem>
+              <section>
-                  {/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> !!OPÇAO COM DADOS TESTES!! */}
+                <CostIndicatorChart title='' subtitle=''
-                  {
+                  data1={indicatorDataState?.filter((value, index) => value.mes.slice(0, 4).includes('2021'))}
-                    clients.map((value) => {
+                  data2={indicatorDataState?.filter((value, index) => value.mes.slice(0, 4).includes('2022'))}
-                      return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
+                  label={months}
-                    })
+                />
-                  }
+              </section>
-                </Select>
+            </RenderIf>
-              </FormControl>
+          </>
-            </div>
+        }
-            <section>
+      </EconomyView>
-              <CativoXLivreChart chartData={unity!==''? catLivDataState : catLiv}
+    </main>
-              dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
-              label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado/>
-            </section>
-          </RenderIf>
-
-          <RenderIf isTrue={economyMenu===3}>
-            <div style={{paddingLeft: '3%'}}>
-              <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
-                <InputLabel id="demo-select-small">Unidade</InputLabel>
-                <Select
-                  labelId="demo-select-small"
-                  id="demo-select-small"
-                  value={unity}
-                  sx={{height: '64px'}}
-                  label="Unidade"
-                  onChange={value => setUnity(value.target.value)}
-                  fullWidth
-                >
-                  <MenuItem value="">Todas</MenuItem>
-                  {/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
-                  {
-                    clients.map((value) => {
-                      return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
-                    })
-                  }
-                </Select>
-              </FormControl>
-            </div>
-            <section>
-              <CostIndicatorChart title='' subtitle=''
-                data1={indicatorDataState?.filter((value, index) => value.mes.slice(0, 4).includes('2021'))}
-                data2={indicatorDataState?.filter((value, index) => value.mes.slice(0, 4).includes('2022'))}
-                label={months}
-              />
-            </section>
-          </RenderIf>
-        </>
-      }
-
-    </EconomyView>
   )
 }
 

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;