[#66124] Overview widgets for Budgets

frontend/src/app/app.module.ts

@@ -209,6 +209,7 @@ import { WorkPackageFullCreateEntryComponent } from 'core-app/features/work-pack
 import { WorkPackageFullViewEntryComponent } from 'core-app/features/work-packages/routing/wp-full-view/wp-full-view-entry.component';
 import { MyPageComponent } from './features/my-page/my-page.component';
 import { DashboardComponent } from './features/overview/dashboard.component';
+import { BudgetOverviewGraphComponent } from './shared/components/budget-graphs/overview/budget-overview-graph.component';
 
 export function initializeServices(injector:Injector) {
   return () => {
@@ -423,5 +424,7 @@ export class OpenProjectModule implements DoBootstrap {
 
     registerCustomElement('opce-my-page', MyPageComponent, { injector });
     registerCustomElement('opce-dashboard', DashboardComponent, { injector });
+
+    registerCustomElement('opce-budget-overview-graph', BudgetOverviewGraphComponent, { injector });
   }
 }

frontend/src/app/shared/components/budget-graphs/embedded/budget-embedded-graph.component.sass

@@ -0,0 +1,5 @@
+.op-budget-embedded-graph
+  &.work-packages-embedded-view--container
+    height: 100%
+    max-height: 500px
+    position: relative

frontend/src/app/shared/components/budget-graphs/embedded/budget-embedded-graph.component.ts

@@ -0,0 +1,237 @@
+import { Component, Input, SimpleChanges, OnChanges } from '@angular/core';
+import { WorkPackageTableConfiguration } from 'core-app/features/work-packages/components/wp-table/wp-table-configuration';
+import { ChartOptions } from 'chart.js';
+import { I18nService } from 'core-app/core/i18n/i18n.service';
+import { GroupObject } from 'core-app/features/hal/resources/wp-collection-resource';
+import { CommonModule } from '@angular/common';
+import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2-charts';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import PrimerColorsPlugin from '../plugin.primer-colors';
+
+export interface BudgetEmbeddedGraphDataset {
+  label:string;
+  queryProps:any;
+  queryId?:number|string;
+  groups?:GroupObject[];
+}
+interface ChartDataSet {
+  label:string;
+  data:number[];
+}
+
+@Component({
+  selector: 'op-budget-embedded-graph',
+  templateUrl: './budget-embedded-graph.html',
+  styleUrls: ['./budget-embedded-graph.component.sass'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    BaseChartDirective
+  ],
+  providers: [
+    provideCharts(withDefaultRegisterables(ChartDataLabels, PrimerColorsPlugin)),
+  ]
+})
+export class BudgetEmbeddedGraphComponent implements OnChanges {
+  @Input() public datasets:BudgetEmbeddedGraphDataset[];
+
+  @Input() public chartOptions:ChartOptions;
+
+  @Input() chartType = 'bar';
+
+  public configuration:WorkPackageTableConfiguration;
+
+  public error:string|null = null;
+
+  public chartHeight = '100%';
+
+  public chartLabels:string[] = [];
+
+  public chartData:ChartDataSet[] = [];
+
+  public internalChartOptions:ChartOptions;
+
+  public initialized = false;
+
+  public text = {
+    noResults: this.i18n.t('js.work_packages.no_results.title'),
+  };
+
+  constructor(readonly i18n:I18nService) {}
+
+  ngOnChanges(changes:SimpleChanges) {
+    if (changes.datasets) {
+      this.setChartOptions();
+      this.updateChartData();
+
+      if (!changes.datasets.firstChange) {
+        this.initialized = true;
+      }
+    } else if (changes.chartType) {
+      this.setChartOptions();
+    }
+  }
+
+  private updateChartData() {
+    let uniqLabels = _.uniq(this.datasets.reduce((array, dataset) => {
+      const groups = (dataset.groups || []).map((group) => group.value) as any;
+      return array.concat(groups);
+    }, [])) as string[];
+
+    const labelCountMaps = this.datasets.map((dataset) => {
+      const countMap = (dataset.groups || []).reduce<any>((hash, group) => ({
+        ...hash,
+        [group.value]: group.count,
+      }), {});
+
+      return {
+        label: dataset.label,
+        data: uniqLabels.map((label) => countMap[label] || 0),
+      };
+    });
+
+    uniqLabels = uniqLabels.map((label) => {
+      if (label === null) {
+        return this.i18n.t('js.placeholders.default');
+      }
+      return label;
+    });
+
+    this.setHeight();
+
+    // keep the array in order to update the labels
+    this.chartLabels.length = 0;
+    this.chartLabels.push(...uniqLabels);
+    this.chartData.length = 0;
+    this.chartData.push(...labelCountMaps);
+  }
+
+  protected setChartOptions() {
+    const bodyFontColor= getComputedStyle(document.body).getPropertyValue('--body-font-color');
+    const gridLineColor= getComputedStyle(document.body).getPropertyValue('--borderColor-muted');
+    const backdropColor= getComputedStyle(document.body).getPropertyValue('--overlay-backdrop-bgColor');
+
+    const defaults:ChartOptions = {
+      color: bodyFontColor,
+      responsive: true,
+      maintainAspectRatio: false,
+      indexAxis: this.chartType === 'horizontalBar' ? 'y' : 'x',
+      scales: {
+        r: {
+          angleLines: {
+            color: this.isRadarChart() ? gridLineColor : 'transparent',
+          },
+          grid: {
+            color: this.isRadarChart() ? gridLineColor : 'transparent',
+          },
+          pointLabels: {
+            color: this.isRadarChart() ? bodyFontColor : 'transparent',
+          },
+          ticks: {
+            color: this.isRadarChart() ? bodyFontColor : 'transparent',
+            backdropColor: this.isRadarChart() ? backdropColor : 'transparent',
+            font: {
+              weight: 'bold',
+              size: 14,
+            },
+          },
+        },
+        y: {
+          ticks: {
+            color: this.isBarChart() ? bodyFontColor : 'transparent',
+          },
+          grid: {
+            color: this.isBarChart() ? gridLineColor : 'transparent',
+          },
+          border: {
+            color: this.isBarChart() ? bodyFontColor : 'transparent',
+          },
+        },
+        x: {
+          ticks: {
+            color: this.isBarChart() ? bodyFontColor : 'transparent',
+          },
+          grid: {
+            color: this.isBarChart() ? gridLineColor : 'transparent',
+          },
+          border: {
+            color: this.isBarChart() ? bodyFontColor : 'transparent',
+          },
+        },
+      },
+      plugins: {
+        legend: {
+          // Only display legends if more than one dataset is provided.
+          display: this.datasets.length > 1,
+        },
+        datalabels: {
+          anchor: 'center',
+          align: this.chartType === 'bar' ? 'top' : 'center',
+          color: bodyFontColor,
+          font: {
+            weight: 'bold',
+            size: 14,
+          },
+        },
+      },
+    };
+
+    this.internalChartOptions = {
+      ...defaults,
+      ...this.chartOptions,
+    };
+  }
+
+  public get hasDataToDisplay() {
+    return this.chartData.length > 0 && this.chartData.some((set) => set.data.length > 0);
+  }
+
+  public get mappedChartType():string {
+    return this.chartType === 'horizontalBar' ? 'bar' : this.chartType;
+  }
+
+  public get chartDescription():string {
+    const chartDataDescriptions = _.map(this.chartLabels, (label, index) => {
+      if (this.chartData.length === 1) {
+        const allCount = this.chartData[0].data[index];
+        return `${allCount} ${label}`;
+      }
+      const labelCounts = _.map(this.chartData, (dataset) => `${dataset.data[index]} ${dataset.label}`);
+      return `${label}: ${labelCounts.join(', ')}`;
+    });
+
+    return chartDataDescriptions.join('; ');
+  }
+
+  private setHeight() {
+    if (this.chartType === 'horizontalBar' && this.datasets && this.datasets[0]) {
+      const labels:string[] = [];
+      this.datasets.forEach((d) => { d.groups!.forEach((g) => {
+        if (!labels.includes(g.value)) {
+          labels.push(g.value);
+        }
+      }); });
+      let height = labels.length * 40;
+
+      if (this.datasets.length > 1) {
+        // make some more room for the legend
+        height += 40;
+      }
+
+      // some minimum height e.g. for the labels
+      height += 40;
+
+      this.chartHeight = `${height}px`;
+    } else {
+      this.chartHeight = '100%';
+    }
+  }
+
+  private isBarChart() {
+    return this.chartType === 'bar' || this.chartType === 'horizontalBar' || this.chartType === 'line';
+  }
+
+  private isRadarChart() {
+    return this.chartType === 'radar' || this.chartType === 'polarArea';
+  }
+}

frontend/src/app/shared/components/budget-graphs/embedded/budget-embedded-graph.html

@@ -0,0 +1,15 @@
+<div class="op-budget-embedded-graph work-packages-embedded-view--container loading-indicator--location" #graphContainer [ngStyle]="{height: chartHeight}">
+  @if (hasDataToDisplay) {
+    <canvas baseChart
+      [datasets]="chartData"
+      [labels]="chartLabels"
+      [type]="mappedChartType"
+      [options]="internalChartOptions"
+      >
+      {{chartDescription}}
+    </canvas>
+  }
+  @if (!hasDataToDisplay && initialized) {
+    <op-no-results [title]="text.noResults" />
+  }
+</div>

frontend/src/app/shared/components/budget-graphs/overview/budget-overview-graph.component.sass

@@ -0,0 +1,3 @@
+budget-embedded-graph
+  margin-top: 20px
+  display: block