Add line breaks

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts

@@ -160,6 +160,7 @@ export class GfBenchmarkComparatorComponent implements OnChanges, OnDestroy {
         this.chart.options.plugins ??= {};
         this.chart.options.plugins.tooltip =
           this.getTooltipPluginConfiguration();
+
         this.chart.update();
       } else {
         this.chart = new Chart(this.chartCanvas.nativeElement, {

libs/common/src/lib/chart-helper.ts

@@ -58,11 +58,13 @@ export function getTooltipOptions<T extends ChartType>({
     callbacks: {
       label: (context) => {
         let label = (context.dataset as ControllerDatasetOptions).label ?? '';
+
         if (label) {
           label += ': ';
         }
 
         const yPoint = (context.parsed as Point).y;
+
         if (yPoint !== null) {
           if (currency) {
             label += `${yPoint.toLocaleString(locale, {
@@ -75,10 +77,12 @@ export function getTooltipOptions<T extends ChartType>({
             label += yPoint.toFixed(2);
           }
         }
+
         return label;
       },
       title: (contexts) => {
         const xPoint = (contexts[0].parsed as Point).x;
+
         if (groupBy && xPoint !== null) {
           return formatGroupedDate({ groupBy, date: xPoint });
         }
@@ -105,6 +109,7 @@ export function getTooltipPositionerMapTop(
   if (!position || !chart?.chartArea) {
     return false;
   }
+
   return {
     x: position.x,
     y: chart.chartArea.top
@@ -132,6 +137,7 @@ export function getVerticalHoverLinePlugin<T extends 'line' | 'bar'>(
       const xValue = active[0].element.x;
 
       const context = chartCanvas.nativeElement.getContext('2d');
+
       if (context) {
         context.lineWidth = width;
         context.strokeStyle = color;

libs/ui/src/lib/line-chart/line-chart.component.ts

@@ -187,6 +187,7 @@ export class GfLineChartComponent
         this.chart.options.animations = this.isAnimated
           ? animations
           : undefined;
+
         this.chart.update();
       } else {
         this.chart = new Chart(this.chartCanvas.nativeElement, {

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -340,6 +340,7 @@ export class GfPortfolioProportionChartComponent
         this.chart.options.plugins ??= {};
         this.chart.options.plugins.tooltip =
           this.getTooltipPluginConfiguration(data);
+
         this.chart.update();
       } else {
         this.chart = new Chart<'doughnut'>(this.chartCanvas.nativeElement, {
@@ -440,6 +441,7 @@ export class GfPortfolioProportionChartComponent
           const labelIndex =
             (data.datasets[context.datasetIndex - 1]?.data?.length ?? 0) +
             context.dataIndex;
+
           let symbol =
             (context.chart.data.labels?.[labelIndex] as string) ?? '';
 
@@ -452,6 +454,7 @@ export class GfPortfolioProportionChartComponent
           const name = translate(this.data[symbol]?.name);
 
           let sum = 0;
+
           for (const item of context.dataset.data) {
             sum += item;
           }
@@ -464,6 +467,7 @@ export class GfPortfolioProportionChartComponent
             return [`${name ?? symbol}`, `${percentage.toFixed(2)}%`];
           } else {
             const value = context.raw as number;
+
             return [
               `${name ?? symbol}`,
               `${value.toLocaleString(this.locale, {

libs/ui/src/lib/treemap-chart/treemap-chart.component.ts

@@ -302,6 +302,7 @@ export class GfTreemapChartComponent
         this.chart.options.plugins ??= {};
         this.chart.options.plugins.tooltip =
           this.getTooltipPluginConfiguration();
+
         this.chart.update();
       } else {
         this.chart = new Chart<'treemap'>(this.chartCanvas.nativeElement, {