Make the tooltip in the report graphs nicer.

Author: gjong

src/components/dashboard/balance-chart.tsx

@@ -41,6 +41,21 @@ const BalanceChart = ({ range } : { range: DateRange }) => {
                                        }
                                    }
                                }
+                           },
+                           plugins: {
+                               tooltip: {
+                                   callbacks: {
+                                       title: (context: any) => {
+                                           console.log(context)
+                                           return context[0].dataset.label + ': ' + new Intl.DateTimeFormat(localStorage.getItem('language') || 'en')
+                                               .format(context[0].parsed.x)
+                                       },
+                                       label: (context: any) => {
+                                           const value = context.parsed.y.toFixed(2)
+                                           return `${ (RestAPI.user() as any).defaultCurrency?.symbol }${ value }`
+                                       }
+                                   }
+                               }
                            }
                        }
                    ) }

src/components/dashboard/budget-balance.tsx

@@ -64,6 +64,15 @@ function BudgetBalance({ range } : Readonly<{ range : DateRange }>) {
                 legend: {
                     position: 'bottom',
                     display: true
+                },
+                tooltip: {
+                    callbacks: {
+                        label: (context: any) => {
+                            const label = context.dataset.label || ''
+                            const value = context.parsed.y.toFixed(2)
+                            return `${label}: ${(RestAPI.user() as any).defaultCurrency?.symbol}${value}`
+                        }
+                    }
                 }
             }
         }

src/components/dashboard/categories-balance.tsx

@@ -49,6 +49,16 @@ const CategoriesBalance = ({ range } : { range: DateRange }) => {
                         }
                     }
                 }
+            },
+            plugins: {
+                tooltip: {
+                    callbacks: {
+                        label: (context: any) => {
+                            const value = context.parsed.y.toFixed(2)
+                            return `${(RestAPI.user() as any).defaultCurrency?.symbol}${value}`
+                        }
+                    }
+                }
             }
         }
     )

src/components/reports/budget-monthly/chart.component.tsx

@@ -22,6 +22,18 @@ const BudgetChart = ({ dataSet, currencySymbol = '' } : { dataSet: ChartData, cu
                        plugins: {
                            legend: {
                                display: true
+                           },
+                           tooltip: {
+                               callbacks: {
+                                   title: (context: any) => {
+                                       const date = new Date(context[0].parsed.x)
+                                       return date.toLocaleString(localStorage.getItem('language') || 'en', { month: 'long' })
+                                   },
+                                   label: (context: any) => {
+                                       const value = context.parsed.y.toFixed(2)
+                                       return `${context.dataset.label}: ${currencySymbol}${value}`
+                                   }
+                               }
                            }
                        }
                    }) }

src/components/reports/category-monthly/montly-categorized-chart.tsx

@@ -89,6 +89,20 @@ const CategoryGraph = ({ categories, year, currencySymbol }: CategoryGraphProps)
                                callback: (value : any) => `${currencySymbol}${value}`
                            }
                        }
+                   },
+                   plugins: {
+                       tooltip: {
+                           callbacks: {
+                               title: (context: any) => {
+                                   const date = new Date(context[0].parsed.x)
+                                   return date.toLocaleString(localStorage.getItem('language') || 'en', { month: 'long' })
+                               },
+                               label: (context: any) => {
+                                   const value = context.parsed.y.toFixed(2)
+                                   return `${context.dataset.label}: ${currencySymbol}${value}`
+                               }
+                           }
+                       }
                    }
                }) }/>
     )

src/components/reports/income-expense/year-balance-chart.tsx

@@ -135,7 +135,17 @@ const YearBalanceChart = ({ year, currencySymbol, currency } : YearBalanceChartP
                    },
                    plugins: {
                        tooltip: {
-                           mode: 'point'
+                           mode: 'point',
+                           callbacks: {
+                               title: (context: any) => {
+                                   const date = new Date(context[0].parsed.x)
+                                   return date.toLocaleString(localStorage.getItem('language') || 'en', { month: 'long' })
+                               },
+                               label: (context: any) => {
+                                   const value = context.parsed.y.toFixed(2)
+                                   return `${context.dataset.label}: ${currencySymbol}${value}`
+                               }
+                           }
                        },
                        legend: {
                            position: 'bottom',