add label on top of the bar in charts

package.json

@@ -28,6 +28,7 @@
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
     "chart.js": "^3.7.1",
+    "chartjs-plugin-datalabels": "^2.0.0",
     "eslint-plugin-react": "^7.29.4",
     "eslit": "^6.0.0",
     "faker": "5.5.3",

src/components/graph/Chart.tsx

@@ -34,10 +34,11 @@ interface ChartInterface {
   single?: any
   label: any,
   dataset1?: string,
-  dataset2?: string
+  dataset2?: string,
+  barLabel?: boolean | undefined
 }
 
-export default function Chart({ title, data1, data2, label, subtitle, dataset1, dataset2 }: ChartInterface) {
+export default function Chart({ title, data1, data2, label, subtitle, dataset1, dataset2, barLabel }: ChartInterface) {
 
   const labels = label;
   const empty = []
@@ -59,9 +60,17 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
     ],
   }
 
-  const options = {
+  const options: any = {
     responsive: true,
     plugins: {
+      datalabels: {
+        display: true,
+        color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
+        formatter: Math.round,
+        anchor: "end",
+        offset: -20,
+        align: "start"
+      },
       legend: {
         position: 'bottom' as const,
       },

src/components/graph/LineBarChart.tsx

@@ -67,17 +67,26 @@ interface LineBarChartInterface {
   label: any,
   dataset1?: string,
   dataset2?: string,
-  dataset3?: string
+  dataset3?: string,
+  barLabel?: boolean | undefined
 }
 
-export function LineBarChart({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3 }: LineBarChartInterface) {
+export function LineBarChart({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3, barLabel }: LineBarChartInterface) {
   const chartRef = useRef<ChartJS>(null);
 
   const labels = label
 
-  const options = {
+  const options: any = {
     responsive: true,
     plugins: {
+      datalabels: {
+        display: true,
+        color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
+        formatter: Math.round,
+        anchor: "end",
+        offset: -20,
+        align: "start"
+      },
       legend: {
         position: 'bottom' as const,
       },

src/components/graph/LineChart.tsx

@@ -1,33 +1,9 @@
 import React, { useState, useEffect } from 'react'
 
 import { Bar, Line } from 'react-chartjs-2';
-// import {
-//   Chart as ChartJS,
-//   CategoryScale,
-//   LinearScale,
-//   BarElement,
-//   Title,
-//   Tooltip,
-//   Legend,
-//   PointElement,
-//   registerables
-// } from 'chart.js'
 
-// import Chart from 'chart.js/auto'
-
-// import faker from 'faker'
 import { ChartView } from './ChartView';
 
-// ChartJS.register(
-//   CategoryScale,
-//   LinearScale,
-//   BarElement,
-//   Title,
-//   Tooltip,
-//   Legend,
-//   PointElement,
-// )
-
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -39,8 +15,6 @@ import {
   Legend,
   ScatterDataPoint,
 } from 'chart.js';
-// import { Line } from 'react-chartjs-2';
-import faker from 'faker';
 import ChartTitle from './ChartTitle';
 
 ChartJS.register(
@@ -65,13 +39,22 @@ interface ChartInterface {
   dataset1?: string,
   dataset2?: string,
   dataset3?: string,
-  dataset4?: string
+  dataset4?: string,
+  barLabel?: boolean | undefined
 }
 
-export default function LineChart({ title, subtitle, data1, data2, data3, data4, label, dataset1, dataset2, dataset3, dataset4 }: ChartInterface) {
+export default function LineChart({ title, subtitle, data1, data2, data3, data4, label, dataset1, dataset2, dataset3, dataset4, barLabel }: ChartInterface) {
-  const options = {
+  const options: any = {
     responsive: true,
     plugins: {
+      datalabels: {
+        display: true,
+        color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
+        formatter: Math.round,
+        anchor: "end",
+        offset: -20,
+        align: "start"
+      },
       legend: {
         position: 'bottom' as const,
       },

src/components/graph/SingleBar.tsx

@@ -9,6 +9,7 @@ import {
   Legend,
 } from 'chart.js';
 import { Bar } from 'react-chartjs-2';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { ChartView } from './ChartView';
 import ChartTitle from './ChartTitle';
 
@@ -18,7 +19,8 @@ ChartJS.register(
   BarElement,
   Title,
   Tooltip,
-  Legend
+  Legend,
+  ChartDataLabels
 );
 
 interface SingleBarInterface{
@@ -26,13 +28,23 @@ interface SingleBarInterface{
   subtitle: string,
   dataProps: any,
   label: any,
-  dataset: string
+  dataset: string,
+  barLabel?: boolean | undefined,
 }
 
-export function SingleBar({ title, subtitle, dataProps, label, dataset }: SingleBarInterface) {
+export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel }: SingleBarInterface) {
-  const options = {
+
+  const options: any = {
     responsive: true,
     plugins: {
+      datalabels: {
+        display: true,
+        color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
+        formatter: Math.round,
+        anchor: "end",
+        offset: -20,
+        align: "start"
+      },
       legend: {
         position: 'bottom' as const,
       },
@@ -59,6 +71,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset }: Single
     <ChartView>
       <ChartTitle title={title} subtitle={subtitle} />
       <Bar options={options} data={data} />
+      {/* <Bar options={options} data={data} /> */}
     </ChartView>
   )
 }

src/components/sidebar/Sidebar.tsx

@@ -28,10 +28,10 @@ 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 className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta</li></Link>
-            <Link href='/accumulatedSavings'><li>Economia Acumulada</li></Link>
+            <Link href='/accumulatedSavings'><li className={router.pathname=='/accumulatedSavings'? 'actualPathDrawer' : null}>Economia Acumulada</li></Link>
-            <Link href='/estimatedCost'><li>Custo Estimado</li></Link>
+            <Link href='/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Custo Estimado</li></Link>
-            <Link href='/costIndicator'><li>Custo R/MWh</li></Link>
+            <Link href='/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>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>

src/components/sidebar/SidebarView.ts

@@ -30,6 +30,9 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
 
     color: #254F7F;
   }
+  .actualPathDrawer {
+    color: #254F7F;
+  }
 
   ul {
     display: flex;

src/pages/accumulatedSavings.tsx

@@ -18,7 +18,7 @@ export default function AccumulatedSavings() {
       <Header name='' />
       <PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
       <section>
-        <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada' label={EconomiaAcumulada.label1}  dataProps={EconomiaAcumulada.data2} />
+        <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada' label={EconomiaAcumulada.label1}  dataProps={EconomiaAcumulada.data2} barLabel />
       </section>
     </AccumulatedSavingsView>
   )

src/pages/costIndicator.tsx

@@ -18,7 +18,7 @@ export default function CostIndicator() {
       <Header name='' />
       <PageTitle title='Indicador de Custo' subtitle='Valores em R$/MWh'/>
       <section>
-        <Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} />
+        <Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} barLabel />
       </section>
     </CostIndicatorView>
   )

src/pages/estimatedCost.tsx

@@ -18,7 +18,7 @@ export default function EstimatedCost() {
       <Header name='' />
       <PageTitle title='Custos Estimados' subtitle='Comparativo de Custo Estimado' />
       <section>
-        <LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre' label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' />
+        <LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre' label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' barLabel />
       </section>
     </EstimatedCostView>
   )

src/pages/grossSavings.tsx

@@ -18,7 +18,7 @@ export default function GrossSavings() {
       <Header name='' />
       <PageTitle title='Economia Bruta' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
       <section>
-        <SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataProps={dataEconomiaBruta.data} />
+        <SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataProps={dataEconomiaBruta.data} barLabel />
       </section>
     </GrossSavingsView>
   )

yarn.lock

@@ -1841,6 +1841,10 @@ chart.js@^3.7.1:
   version "3.7.1"
   resolved "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz"
 
+chartjs-plugin-datalabels@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.0.0.tgz#caacefb26803d968785071eab012dde8746c5939"
+
 chownr@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"