add datasets sets

src/components/graph/Chart.tsx

@@ -33,9 +33,11 @@ interface ChartInterface {
   data2: any,
   single?: any
   label: any,
+  dataset1?: string,
+  dataset2?: string
 }
 
-export default function Chart({ title, data1, data2, label, subtitle }: ChartInterface) {
+export default function Chart({ title, data1, data2, label, subtitle, dataset1, dataset2 }: ChartInterface) {
 
   const labels = label;
 
@@ -43,12 +45,12 @@ export default function Chart({ title, data1, data2, label, subtitle }: ChartInt
     labels,
     datasets: [
       {
-        label: '2020',
+        label: dataset1? dataset1 : '2020',
         data: data1.map(value => value),
         backgroundColor: '#C2D5FB',
       },
       {
-        label: '2021',
+        label: dataset2? dataset2 : '2021',
         data: data2.map(value => value),
         backgroundColor: '#255488',
       },

src/components/graph/LineBarChart.tsx

@@ -64,10 +64,13 @@ interface LineBarChartInterface {
   data2: any,
   data3: any,
   red?: any,
-  label: any
+  label: any,
+  dataset1?: string,
+  dataset2?: string,
+  dataset3?: string
 }
 
-export function LineBarChart({ title, subtitle, data1, data2, data3, label, red }: LineBarChartInterface) {
+export function LineBarChart({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3 }: LineBarChartInterface) {
   const chartRef = useRef<ChartJS>(null);
 
   const labels = label
@@ -77,29 +80,21 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red
     datasets: [
       {
         type: 'line' as const,
-        label: 'Dataset 1',
+        label: dataset1? dataset1 : 'Dataset 1',
         borderColor: red? '#f00' : '#0c9200',
         borderWidth: 2,
         fill: false,
         data: data1.map(value => value),
       },
-      // {
-      //   type: 'line' as const,
-      //   label: 'Dataset 1',
-      //   borderColor: '#f00',
-      //   borderWidth: 2,
-      //   fill: false,
-      //   data: data4.map(value => value),
-      // },
       {
         type: 'bar' as const,
-        label: 'Dataset 2',
+        label: dataset2? dataset2 : 'Dataset 2',
         backgroundColor: '#255488',
         data: data2.map(value => value),
       },
       {
         type: 'bar' as const,
-        label: 'Dataset 2',
+        label: dataset3? dataset3 : 'Dataset 2',
         backgroundColor: '#C2D5FB',
         data: data3.map(value => value),
       },

src/components/graph/LineChart.tsx

@@ -62,9 +62,13 @@ interface ChartInterface {
   data3?: any,
   data4?: any,
   label: any,
+  dataset1: string,
+  dataset2: string,
+  dataset3: string,
+  dataset4: string
 }
 
-export default function LineChart({ title, subtitle, data1, data2, data3, data4, label }: ChartInterface) {
+export default function LineChart({ title, subtitle, data1, data2, data3, data4, label, dataset1, dataset2, dataset3, dataset4 }: ChartInterface) {
   const options = {
     responsive: true,
     plugins: {
@@ -84,25 +88,25 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
     labels,
     datasets: [
       {
-        label: 'Dataset 1',
+        label: dataset1? dataset1 : 'Dataset 1',
         data: data1.map(value => value),
         borderColor: 'rgb(53, 162, 235)',
         backgroundColor: 'rgba(53, 162, 235, 0.5)',
       },
       {
-        label: 'Dataset 2',
+        label: dataset2? dataset2 : 'Dataset 2',
         data: data2.map(value => value),
         borderColor: 'rgb(255, 114, 32)',
         backgroundColor: 'rgba(255, 145, 0, 0.5)',
       },
       {
-        label: 'Dataset 3',
+        label: dataset3? dataset3 : 'Dataset 3',
         data: data3.map(value => value),
         borderColor: 'rgb(109, 109, 109)',
         backgroundColor: 'rgba(90, 90, 90, 0.5)',
       },
       {
-        label: 'Dataset4',
+        label: dataset4? dataset4 : 'Dataset4',
         data: data4.map(value => value),
         borderColor: 'rgb(255, 166, 0)',
         backgroundColor: 'rgba(255, 187, 0, 0.5)',

src/components/sidebar/Sidebar.tsx

@@ -28,17 +28,17 @@ export default function Sidebar() {
         <Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
         <li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
           <div className='economiaDrawer drawer' >
-          <Link href='/grossSavings'><li>Economia Bruta</li></Link>
+            <Link href='/grossSavings'><li>Economia Bruta</li></Link>
-          <Link href='/accumulatedSavings'><li>Economia Acumulada</li></Link>
+            <Link href='/accumulatedSavings'><li>Economia Acumulada</li></Link>
-          <Link href='/estimatedCost'><li>Custo Estimado</li></Link>
+            <Link href='/estimatedCost'><li>Custo Estimado</li></Link>
-          <Link href='/costIndicator'><li>Custo R/MWh</li></Link>
+            <Link href='/costIndicator'><li>Custo R/MWh</li></Link>
           </div>
         <Link href='/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
         <Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
         <Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
         <Link href='#'><li className={router.pathname=='/sectorialInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
         {/* <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link> */}
-        <Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificação >'}</li></Link>
+        <Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}</li></Link>
         <Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
         <Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
         <Link href='/'><button><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button></Link>

src/pages/telemetria.tsx

@@ -107,11 +107,13 @@ export default function Telemetria() {
           <GradientButton title='DADOS' description='Gerar gráficos com os dados selecionados' green />
         </Buttons>
         <p className='paragraph'>
-          Fonte: Dados coletados do Sistema de Coleta de Dados
+          <i>
-          de Energia - SCDE da Câmara de Comercialização <br/>
+            Fonte: Dados coletados do Sistema de Coleta de Dados
-          Energia Elétrica – CCEE, sendo que as quantidades aqui
+            de Energia - SCDE da Câmara de Comercialização <br/>
-          informadas são de responsabilidade <br/>do agente de
+            Energia Elétrica – CCEE, sendo que as quantidades aqui
-          medição - Distribuidora.
+            informadas são de responsabilidade <br/>do agente de
+            medição - Distribuidora.
+          </i>
         </p>
 
     </TelemetriaView>