feat: #862 analytics dashboard district enhancement (#876)

Author: ianliuwk1019

admin/src/app/analytics-dashboard/analytics-dashboard-chart-config.ts

@@ -1,4 +1,4 @@
-import { ApexAxisChartSeries, ApexChart, ApexDataLabels, ApexFill, ApexGrid, ApexPlotOptions, ApexTheme, ApexTitleSubtitle, ApexXAxis, ApexYAxis, ChartType } from 'ng-apexcharts';
+import { ApexAxisChartSeries, ApexChart, ApexDataLabels, ApexFill, ApexGrid, ApexLegend, ApexPlotOptions, ApexTheme, ApexTitleSubtitle, ApexXAxis, ApexYAxis, ChartType } from 'ng-apexcharts';
 
 export type ChartOptions = {
   series: ApexAxisChartSeries;
@@ -11,14 +11,40 @@ export type ChartOptions = {
   title: ApexTitleSubtitle;
   theme: ApexTheme;
   grid: ApexGrid;
+  legend: ApexLegend;
 };
 
 const COLOR_LABEL = "#304758";
 const COLOR_FILL_1 = "#123B64";
 const COLOR_FILL_2 = "#52AE1E";
 const COLOR_FILL_3 = "#2576C8";
 const COLOR_FILL_4 = "#775DD0";
+const COLOR_FILL_5 = "#005F73";
+const COLOR_FILL_6 = "#E9D8A6";
+const COLOR_FILL_7 = "#EE9B00";
+const COLOR_FILL_8 = "#CA6702";
+const COLOR_FILL_9 = "#3A0CA3";
+
 const COLOR_GRID_ROW_1 = "#f3f3f3";
+const COLOR_FILL_DST_CMMT_TOTAL = COLOR_FILL_9;
+
+// Map response codes to display labels
+export const RESPONSE_CODE_LABELS = {
+  'CONSIDERED': 'Considered',
+  'ADDRESSED': 'Addressed',
+  'IRRELEVANT': 'Not Applicable',
+  'NOT_CATEGORIZED': 'Not Categorized',
+  'TOTAL': 'Total'
+};
+
+// Map response codes to colors
+export const RESPONSE_CODE_COLORS = {
+  'CONSIDERED': COLOR_FILL_8,
+  'ADDRESSED': COLOR_FILL_7,
+  'IRRELEVANT': COLOR_FILL_6,
+  'NOT_CATEGORIZED': COLOR_FILL_5,
+  'TOTAL': COLOR_FILL_DST_CMMT_TOTAL
+};
 
 /* *** Some utility functions to help with chart configuration and display *** */
 export const maxAxis = (series) => {
@@ -189,6 +215,80 @@ export const topCommentedProjectsChartOptions = {
   },
 };
 
+// Chart options for: Comments by district and category
+export const commentsByDistrictChartOptions = {
+  title: {
+    text: "Public comments by district and category"
+  },
+  series: [
+    // Multiple series will be added dynamically - one for each category + total
+  ],
+  chart: {
+    type: 'bar' as ChartType,
+    stacked: false, // Grouped bars, not stacked
+  } as ApexChart,
+  theme: {
+    mode: 'light',
+  } as ApexTheme,
+  plotOptions: {
+    bar: {
+      horizontal: true,
+      barHeight: '70%',
+      dataLabels: {
+        position: 'right',
+      }
+    },
+  },
+  dataLabels: {
+    enabled: true,
+    position: 'right',
+    formatter: function(val: number) {
+      return '\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0' + val;
+    },
+    style: {
+      fontSize: "12px",
+      colors: [COLOR_LABEL]
+    }
+  } as ApexDataLabels,
+  xaxis: {
+    categories: [],
+    title: {
+      text: "Number of comments",
+      style: {
+        cssClass: "chart-title-label"
+      }
+    },
+    min: 0,
+  } as ApexXAxis,
+  yaxis: {
+    title: {
+      text: "District",
+      style: {
+        cssClass: "chart-title-label"
+      }
+    },
+    labels: {
+      show: true,
+      align: 'left',
+      maxWidth: 400,
+    }
+  } as ApexYAxis,
+  fill: {
+    opacity: 1,
+  },
+  grid: {
+    row: {
+      colors: [COLOR_GRID_ROW_1, "transparent"],
+      opacity: 0.5
+    },
+  },
+  legend: {
+    show: true,
+    position: 'top' as const,
+    horizontalAlign: 'left' as const,
+  }
+};
+
 // Chart options for: FOMs published for public comments in each district
 export const fomsCountByDistrictChartOptions = {
   title: {

admin/src/app/analytics-dashboard/analytics-dashboard-data.service.ts

@@ -1,6 +1,6 @@
 import { ANALYTICS_DATA_DEFAULT_SIZE } from '@admin-core/utils/constants';
 import { Injectable } from '@angular/core';
-import { AnalyticsDashboardService, ProjectCountByDistrictResponse, ProjectCountByForestClientResponse, ProjectPlanCodeFilterEnum, PublicCommentCountByProjectResponse } from '@api-client';
+import { AnalyticsDashboardService, ProjectCountByDistrictResponse, ProjectCountByForestClientResponse, ProjectPlanCodeFilterEnum, PublicCommentCountByDistrictResponse, PublicCommentCountByProjectResponse } from '@api-client';
 import { forkJoin, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 
@@ -12,6 +12,7 @@ export type AnalyticsDashboardData = {
   nonInitialPublishedProjectCount: number | ApiError // Total FOM count
   commentCountByResponseCode: Record<string, number> | ApiError
   topCommentedProjects: Array<PublicCommentCountByProjectResponse> | ApiError
+  commentCountByDistrict: Array<PublicCommentCountByDistrictResponse> | ApiError
   nonInitialPublishedProjectCountByDistrict: Array<ProjectCountByDistrictResponse> | ApiError
   uniqueForestClientCount: number | ApiError
   nonInitialPublishedProjectCountByForestClient: Array<ProjectCountByForestClientResponse> | ApiError
@@ -40,6 +41,9 @@ export class AnalyticsDashboardDataService {
       topCommentedProjects: this.api.analyticsDashboardControllerGetTopCommentedProjects(startDate, endDate, projectPlanCode, limit).pipe(
         catchError(err => this.handleApiError('topCommentedProjects', err))
       ),
+      commentCountByDistrict: this.api.analyticsDashboardControllerGetCommentCountByDistrict(startDate, endDate, projectPlanCode).pipe(
+        catchError(err => this.handleApiError('commentCountByDistrict', err))
+      ),
       nonInitialPublishedProjectCountByDistrict: this.api.analyticsDashboardControllerGetNonInitialPublishedProjectCountByDistrict(startDate, endDate, projectPlanCode).pipe(
         catchError(err => this.handleApiError('nonInitialPublishedProjectCountByDistrict', err))
       ),

admin/src/app/analytics-dashboard/analytics-dashboard.component.html

@@ -151,6 +151,38 @@ <h1 class="text-muted mb-0">Dashboard</h1>
           </div>
         </div>
       </div>
+      <div class="row">
+        <div>
+          <div id="comments-by-district" class="mt-3">
+            <!-- options: first option is 'All districts' then individual districts collected from backend -->
+            <!-- No show if there is only one district currently: ('All districts', 'district 1') -->
+            @if (districtFilterOptions.length > 2) {
+              <div class="mb-2" style="width: 20%;">
+                <label for="district-select">Show</label>
+                <select id="district-select" class="form-control" name="district-select"
+                  [(ngModel)]="selectedDistrict"
+                  (ngModelChange)="onDistrictFilterChange($event)">
+                  <option *ngFor="let opt of districtFilterOptions" [ngValue]="opt.value">{{ opt.label }}</option>
+                </select>
+              </div>
+            }
+            <apx-chart
+              #commentsByDistrictChart
+              [series]="commentsByDistrictChartOptions.series"
+              [chart]="commentsByDistrictChartOptions.chart"
+              [dataLabels]="commentsByDistrictChartOptions.dataLabels"
+              [plotOptions]="commentsByDistrictChartOptions.plotOptions"
+              [xaxis]="commentsByDistrictChartOptions.xaxis"
+              [yaxis]="commentsByDistrictChartOptions.yaxis"
+              [theme]="commentsByDistrictChartOptions.theme"
+              [fill]="commentsByDistrictChartOptions.fill"
+              [title]="commentsByDistrictChartOptions.title"
+              [grid]="commentsByDistrictChartOptions.grid"
+              [legend]="commentsByDistrictChartOptions.legend"
+            ></apx-chart>
+          </div>
+        </div>
+      </div>
     </div>
 
     <!-- Forest client activity -->

admin/src/app/analytics-dashboard/analytics-dashboard.component.ts

@@ -7,12 +7,12 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { ActivatedRoute } from '@angular/router';
 import { ProjectPlanCodeFilterEnum, ResponseCodeEnum } from '@api-client';
-import { ChartOptions, commentsByResponseCodeChartOptions, fomsCountByDistrictChartOptions, fomsCountByForestClientChartOptions, maxAxis, maxAxis as maxxAxis, topCommentedProjectsChartOptions } from 'app/analytics-dashboard/analytics-dashboard-chart-config';
+import { ChartOptions, commentsByDistrictChartOptions, commentsByResponseCodeChartOptions, fomsCountByDistrictChartOptions, fomsCountByForestClientChartOptions, maxAxis, maxAxis as maxxAxis, RESPONSE_CODE_COLORS, RESPONSE_CODE_LABELS, topCommentedProjectsChartOptions } from 'app/analytics-dashboard/analytics-dashboard-chart-config';
 import { AnalyticsDashboardData, AnalyticsDashboardDataService, ApiError } from 'app/analytics-dashboard/analytics-dashboard-data.service';
 import { DateTime } from 'luxon';
 import {
-    ChartComponent,
-    NgApexchartsModule
+  ChartComponent,
+  NgApexchartsModule
 } from 'ng-apexcharts';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 
@@ -50,19 +50,23 @@ export class AnalyticsDashboardComponent implements OnInit, AfterViewInit {
   ];
   selectedPlan: ProjectPlanCodeFilterEnum = this.planFilterOptions[0]?.value;
   selectedFcLimit: number = this.fcLimitOptions[0].value; // default
+  districtFilterOptions: Array<{ value: number | null, label: string }> = [];
+  selectedDistrict: number | null = null; // null means 'All districts'
   minDate: Date = DateTime.fromISO(FOM_GO_LIVE_DATE).startOf('day').toJSDate();
   maxDate: Date = new Date(); // today
 
   // chart Angular views
   @ViewChild("commentsByResponseCodeChart") commentsByResponseCodeChart!: ChartComponent;
   @ViewChild("topCommentedProjectsChart") topCommentedProjectsChart!: ChartComponent;
   @ViewChild("fomsCountByDistrictChart") fomsCountByDistrictChart!: ChartComponent;
+  @ViewChild("commentsByDistrictChart") commentsByDistrictChart!: ChartComponent;
   @ViewChild("fomsCountByForestClientChart") fomsCountByForestClientChart!: ChartComponent;
 
   // chart options
   commentsByResponseCodeChartOptions: Partial<ChartOptions>;
   topCommentedProjectsChartOptions: Partial<ChartOptions>;
   fomsCountByDistrictChartOptions: Partial<ChartOptions>;
+  commentsByDistrictChartOptions: Partial<ChartOptions>;
   fomsCountByForestClientChartOptions: Partial<ChartOptions>;
 
   constructor(
@@ -73,6 +77,7 @@ export class AnalyticsDashboardComponent implements OnInit, AfterViewInit {
     this.commentsByResponseCodeChartOptions = commentsByResponseCodeChartOptions;
     this.topCommentedProjectsChartOptions = topCommentedProjectsChartOptions;
     this.fomsCountByDistrictChartOptions = fomsCountByDistrictChartOptions;
+    this.commentsByDistrictChartOptions = commentsByDistrictChartOptions;
     this.fomsCountByForestClientChartOptions = fomsCountByForestClientChartOptions;
   }
 
@@ -125,6 +130,11 @@ export class AnalyticsDashboardComponent implements OnInit, AfterViewInit {
     this.applyFomsCountByForestClientChartOptions();
   }
 
+  onDistrictFilterChange(value: number | null) {
+    this.selectedDistrict = value;
+    this.applyCommentsByDistrictChartOptions();
+  }
+
   /**
    * Fetch analytics data based on the current filters from backend and apply to chart options.
    */
@@ -146,6 +156,7 @@ export class AnalyticsDashboardComponent implements OnInit, AfterViewInit {
     this.applyCommentsByResponseCodeChartOptions();
     this.applyTopCommentedProjectsChartOptions();
     this.applyFomsCountByDistrictChartOptions();
+    this.applyCommentsByDistrictChartOptions();
     this.applyFomsCountByForestClientChartOptions();
   }
 
@@ -215,6 +226,75 @@ export class AnalyticsDashboardComponent implements OnInit, AfterViewInit {
     }
   }
 
+  applyCommentsByDistrictChartOptions() {
+    const apiData = this.analyticsData().commentCountByDistrict;
+    if (apiData && !(apiData instanceof ApiError)) {
+      // Update district filter options
+      this.districtFilterOptions = [
+        { value: null, label: 'All districts' },
+        ...apiData.map(item => ({ value: item.districtId, label: item.districtName }))
+      ];
+
+      // Filter data based on selected district
+      const filteredData = this.selectedDistrict === null 
+        ? apiData 
+        : apiData.filter(item => item.districtId === this.selectedDistrict);
+
+      if (filteredData.length === 0) return;
+
+      // Collect all unique response codes across all districts
+      const allResponseCodes = new Set<string>();
+      filteredData.forEach(district => {
+        district.commentCountByCategory.forEach(cat => {
+          allResponseCodes.add(cat.responseCode);
+        });
+      });
+
+      // Build series - one for each category + total
+      const series: any[] = [];
+      const seriesColors: string[] = [];
+
+      // Add series for each category
+      allResponseCodes.forEach(responseCode => {
+        const data = filteredData.map(district => {
+          const category = district.commentCountByCategory.find(c => c.responseCode === responseCode);
+          return category ? category.publicCommentCount : 0;
+        });
+        series.push({
+          name: RESPONSE_CODE_LABELS[responseCode] || responseCode,
+          data: data
+        });
+        seriesColors.push(RESPONSE_CODE_COLORS[responseCode] || '#999999');
+      });
+
+      // Add Total series
+      const totalData = filteredData.map(district => district.totalPublicCommentCount);
+      series.push({
+        name: 'Total',
+        data: totalData
+      });
+      seriesColors.push(RESPONSE_CODE_COLORS['TOTAL']);
+
+      // Calculate max value for axis
+      const allValues = series.flatMap(s => s.data);
+      const maxValue = maxxAxis(allValues);
+
+      // Update chart
+      this.commentsByDistrictChart.updateOptions({
+        series: series,
+        xaxis: {
+          categories: filteredData.map(item => item.districtName + "\u00A0\u00A0"),
+          min: 0,
+          max: maxValue
+        },
+        colors: seriesColors,
+        chart: {
+          height: Math.max(300, filteredData.length * 80)
+        }
+      });
+    }
+  }
+
   applyFomsCountByForestClientChartOptions() {
     const apiData = this.analyticsData().nonInitialPublishedProjectCountByForestClient;
     if (apiData && !(apiData instanceof ApiError)) {