fixs

src/components/buttons/gradientButton/GradientButton.tsx

@@ -22,7 +22,6 @@ export default function GradientButton({ title, description, orange, purple, gre
   return (
     <GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange'} onClick={() => handleClick()}>
       <p>{title}</p>
-      <p>{description}</p>
     </GradientButtonView>
   )
 }

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'

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
         }

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 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 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',
+        label: 'Acumulado',
-        data: data1.map(value => value.economia_acumulada? value.economia_acumulada : 0),
+        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',
+        label: 'Estimado',
-        data: data2.map(value => value.economia_acumulada? value.economia_acumulada : 0),
+        data: data2.map(value => value.dad_estimado? value?.economia_acumulada : null),
-        // backgroundColor: '#255488'
+        backgroundColor: draw('diagonal-right-left', '#C2d5fb')
-        // backgroundColor: (value, ctx) => {
-        //   return data2[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
-        // },
       },
-      {
-        type: 'line',
-        label: ['Acumulado'],
-        backgroundColor: '#255488',
-        data: [],
-      },
-      {
-        type: 'line',
-        label: ['Estimado'],
-        backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
-        data: [],
-      }
     ],
   }
 

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,

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;
+  }
+`

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<ChartJS>(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 (
+    <CativoXLivreChartView>
+      <ChartTitle title={title} subtitle={subtitle}/>
+      <div>
+        <Chart ref={chartRef} type='bar' options={options} data={data} />
+      </div>
+    </CativoXLivreChartView>
+  )
+}

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;
+  }
+`

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 (
+    <CostIndicatorChartView>
+      {/* <RenderIf isTrue={single? true : false} >
+        <Bar
+          options={options}
+          data={graphData}
+        />
+      </RenderIf> */}
+      <ChartTitle title={title} subtitle={subtitle} />
+      <Bar
+        options={options}
+        data={data}
+      />
+    </CostIndicatorChartView>
+  )
+}

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<string>,
+  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 (
+    <GrossAnualChartView>
+      <ChartTitle title={title} subtitle={subtitle} />
+      <Bar options={options} data={data} />
+    </GrossAnualChartView>
+  )
+}

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;
+  }
+`

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 (
+    <GrossMensalChartView>
+      {/* <RenderIf isTrue={single? true : false} >
+        <Bar
+          options={options}
+          data={graphData}
+        />
+      </RenderIf> */}
+      <ChartTitle title={title} subtitle={subtitle} />
+      <ChartJs
+        options={options}
+        data={data} type={'bar'} />
+    </GrossMensalChartView>
+  )
+}

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
+  }
+
+`

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) {
         <PageTitle title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil' />
       </Header>
       <section>
-        <Chart2 title='' subtitle=''
+        <GrossMensalChart title='' subtitle=''
-        data1={graphData.filter((value, index) => value.mes.slice(3, 8).includes('2021'))}
+          data1={graphData}
-        data2={graphData.filter((value, index) => value.mes.slice(3, 8).includes('2022'))}
+          data2={graphData}
-        label={months}/>
+          label={months}
+        />
         {/* <SingleBar title='' subtitle='' dataset='Consolidada'
           dataProps={graphData}
           label={years} barLabel/> */}

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 }) {
           <InputUploadView>
             <div className="imgContainer">
               <article>
-                {imageURLS.map((imageSrc, index) => (
+                {imageURLS.map((imageSrc, index) => {
-                  <Image
+                  console.log('olá')
+                  return <Image
                     src={imageSrc}
                     key={index}
                     width={30}
                     height={30}
                     className="image"
                   />
-                ))}
+                })}
               </article>
             </div>
             <div className="update">

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" : "=", "field": "med_5min.ponto", "value": "PRAXCUENTR101P"},
-        {"type" : "between", "field": "dia_num", "value": ["2022-04-01", "2022-04-28"]}
+        {"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)
+      console.log(res)
-      router.push('/telemetria')
+      // 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" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
-          {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
       ]
     }).then(res => {
       setDiscretizedConsumptionDataReativa(res.data.data)
     }).catch(res => {
-      // console.log(res)
+      console.log(res)
-      router.push('/telemetria')
+      // 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" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
-        {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
     ]
     }).then(res => {
       setDiscretizedConsumptionData(res.data.data)
     }).catch(res => {
-      // console.log(res)
+      console.log(res)
-      router.push('/telemetria')
+      // 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)
+      console.log(res)
-      router.push('/telemetria')
+      // router.push('/telemetria')
     })
   }
 
@@ -143,78 +181,31 @@ export default function chartTelemetry({userName}) {
           <>
 
           <RenderIf isTrue={discretization!=='1_dia' && discretization!=='1_mes'}>
-            <div onClick={() => setOpenConsumoDiscretizado2(true)}>
+            <div>
               <DiscretizedConsumptionChart title={
                   discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
                   discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
                 } subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
                 <p style={{alignSelf: 'center', textAlign: 'center'}}>{`Mês - ${startDate.toString().split('-')[2]}/${startDate.toString().split('-')[1]}/${startDate.toString().split('-')[0]}`}</p>
             </div>
-            <Modal
-              open={openConsumoDiscretizado2}
-              onClose={handleCloseConsumoDiscretizado2}
-              aria-labelledby="modal-modal-title"
-              aria-describedby="modal-modal-description"
-            >
-              <Box sx={style}>
-                <DiscretizedConsumptionChart title={
-                  discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
-                  discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
-                } subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
-              </Box>
-            </Modal>
 
-            <div onClick={() => setOpenConsumoDiscretizado1(true)}>
+            <div>
               <DiscretizedConsumptionChartLine title={
                   discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
                   discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
                 } subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada'
                 label={discretizedConsumptionDataReativa.map(data => parseFloat(data.reativa).toFixed(3))} />
             </div>
-            <Modal
-              open={openConsumoDiscretizado1}
-              onClose={handleCloseConsumoDiscretizado1}
-              aria-labelledby="modal-modal-title"
-              aria-describedby="modal-modal-description"
-            >
-              <Box sx={style}>
-                <DiscretizedConsumptionChartLine title={
-                  discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
-                  discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
-                } subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => data.reativa)} />
-              </Box>
-            </Modal>
           </RenderIf>
 
-            <div onClick={() => setOpenDemandaContratada(true)}>
+            <div>
               <DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
             </div>
-            <Modal
-              open={openDemandaContratada}
-              onClose={handleCloseDemandaContratada}
-              aria-labelledby="modal-modal-title"
-              aria-describedby="modal-modal-description"
-            >
-              <Box sx={style}>
-                <DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
-              </Box>
-            </Modal>
 
-            <div onClick={() => setOpenFatorPotencia(true)}>
+            <div>
             <FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
               data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => parseFloat(value.dia_num))} />
             </div>
-            <Modal
-              open={openFatorPotencia}
-              onClose={handleCloseFatorPotencia}
-              aria-labelledby="modal-modal-title"
-              aria-describedby="modal-modal-description"
-            >
-              <Box sx={style}>
-                <FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
-                  data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => parseFloat(value.dia_num))} />
-              </Box>
-            </Modal>
           </>
         }
         </section>

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) {
         <PageTitle title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'/>
       </Header>
       <section>
-        <Chart title='' subtitle=''
+        <CostIndicatorChart title='' subtitle=''
           data1={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
           // data1={graphData}
           data2={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
-        label={months}/>
+          label={months}
+        />
       </section>
     </CostIndicatorView>
   )

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) {
         <PageTitle title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' />
       </Header>
       <section>
-        <LineBarChart2 data1={graphData} data2={graphData} data3={graphData}
+        <CativoXLivreChart data1={graphData} data2={graphData} data3={graphData}
         dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
         label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado />
       </section>

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) {
         <PageTitle title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil' />
       </Header>
       <section>
-        <SingleBar title='' subtitle=''
+        <GrossAnulChart title='' subtitle=''
         dataset='Consolidada'
 
         dataProps={graphData}
-        label={years} barLabel/>
+        label={years} barLabel bruta/>
 
       </section>
     </GrossSavingsView>

src/pages/pld/index.tsx

@@ -183,7 +183,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
       <RenderIf isTrue={page==='table'? true : false}>
         <Header name={userName}>
           <Link href='/dashboard' >{'< Voltar para Visão Geral'}</Link>
-          <PageTitle title='Tabela de consumo PLD' subtitle='Tabela de consumo PLD'/>
+          <PageTitle title='PLD Histórico' subtitle='Tabela de consumo PLD'/>
         </Header>
         <PldTableView>
           <table className="tg">
@@ -198,27 +198,14 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
             </thead>
             <tbody>
               {
-                tableData.data.sort((a, b) => {
+                tableData.data.map(data => {
-                  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 => {
                   return <>
                     <tr className={data.year_month_formatted==year_Month? 'actual' : ''}>
                       <td className='tg-gceh'>{data.year_month_formatted}</td>
-                      <td className={`tg-uulg`}>{parseFloat(data.nordeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      <td className={`tg-uulg`}>{parseFloat(data.nordeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2}).replace('R$', 'R$/MWh')}</td>
-                      <td className={`tg-gceh`}>{parseFloat(data.norte).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      <td className={`tg-gceh`}>{parseFloat(data.norte).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2}).replace('R$', 'R$/MWh')}</td>
-                      <td className={`tg-gceh`}>{parseFloat(data.sudeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      <td className={`tg-gceh`}>{parseFloat(data.sudeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2}).replace('R$', 'R$/MWh')}</td>
-                      <td className={`tg-uulg`}>{parseFloat(data.sul).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      <td className={`tg-uulg`}>{parseFloat(data.sul).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2}).replace('R$', 'R$/MWh')}</td>
                     </tr>
                   </>
                 })
@@ -286,8 +273,8 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
 
       <RenderIf isTrue={page==='perMouth'? true : false}>
         <Header name={userName}>
-          <GoBack onClick={() => setPage('table')}>{'< Voltar para tabela PLD'}</GoBack>
+          <GoBack onClick={() => setPage('table')}>{'< Voltar para PLD Histórico'}</GoBack>
-          <PageTitle title='Resumo PLD - Diários' subtitle='Evolução PLD (R$/MWh)'/>
+          <PageTitle title='Resumo PLD - Valores Diários' subtitle='Evolução PLD (R$/MWh)'/>
         </Header>
         <PldGraphView>
           <section className='toolsbar'>
@@ -348,12 +335,12 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
 
       <RenderIf isTrue={page==='perDate'? true : false}>
         <Header name={userName}>
-          {/* <Link href='/dashboard' >{'< Voltar para Visão Geral'}</Link> */}
+          <GoBack onClick={() => setPage('table')}>{'< Voltar para PLD Histórico'}</GoBack>
-          <GoBack onClick={() => setPage('table')}>{'< Voltar para tabela PLD'}</GoBack>
+          <PageTitle title='Resumo PLD - Valores Horários' subtitle='Evolução PLD (R$/MWh)'/>
-          <PageTitle title='Resumo PLD - Horas' subtitle='Gráfico de resumo PLD - Horas (Média, Diário)'/>
         </Header>
         <PldGraphView>
           <section className='toolsbar'>
+            <p>Selecione o mês: </p>
             <input type="date" data-date={date} data-date-format="DD MMMM YYYY" value={date} onChange={(value) => setDate(value.target.value)}/>
           </section>
           <LineChart data1={nordeste} data2={norte} data3={sudeste} data4={sul}

src/pages/resumoOperacao/index.tsx

@@ -93,7 +93,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
         <title>Smart Energia - Resumo de Operação</title>
       </Head>
       <Header name={userName}>
-        <PageTitle title='Resumo de Operações' subtitle='Operações detalhadas' />
+        <PageTitle title='Resumo de Operações' subtitle='Operações de compra e venda - Mensal' />
       </Header>
       <h3>Filtrar por Unidade e/ou Mês</h3>
       <div className='select'>
@@ -115,7 +115,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
           </Select>
         </FormControl>
 
-        <FormControl fullWidth sx={{mt: 2}}>
+        <FormControl fullWidth sx={{ml: 2}}>
           <InputLabel id="demo-simple-select-label">Mês</InputLabel>
           <Select
             labelId="demo-simple-select-label"
@@ -141,18 +141,14 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
             <th className='tg-8oo6'>Operação</th>
             <th className='tg-8oo6'>Montante (MWh)</th>
             <th className='tg-8oo6'>Contraparte</th>
-            <th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
             <th className='tg-8oo6'>Preço(R$/MWh)</th>
+            <th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
           </tr>
         </thead>
         <tbody>
           {
-            tableDataState.sort((a, b) => {
+            tableDataState.map((value, index) => {
-              if (parseFloat(a.mes.slice(0,2)) > parseFloat(b.mes.slice(1,2))) return 1
+              if (value.mes.slice(4,7) != '2020')
-              if (parseFloat(a.mes.slice(0,2)) < parseFloat(b.mes.slice(1,2))) return -1
-
-              return 0
-            }).map((value, index) => {
               return <>
                 <tr>
                   <td key={index} className='tg-gceh'>{value.mes}</td>

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

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;