From 58649ed0197b7f4f1d5cb9df38f8d411074e361c Mon Sep 17 00:00:00 2001
From: b0ink <40929320+b0ink@users.noreply.github.com>
Date: Wed, 3 Dec 2025 10:30:53 +1100
Subject: [PATCH 1/3] refactor: init summary task status chart component
 migration

---
 src/app/doubtfire-angular.module.ts           |  2 +
 src/app/doubtfire-angularjs.module.ts         |  6 ++
 .../units/states/analytics/analytics.tpl.html |  1 +
 .../summary-task-status-chart.component.html  | 18 ++++
 .../summary-task-status-chart.component.scss  |  0
 .../summary-task-status-chart.component.ts    | 99 +++++++++++++++++++
 6 files changed, 126 insertions(+)
 create mode 100644 src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.html
 create mode 100644 src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.scss
 create mode 100644 src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.ts

diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts
index fa5708f4d9..09bf6851f4 100644
--- a/src/app/doubtfire-angular.module.ts
+++ b/src/app/doubtfire-angular.module.ts
@@ -296,6 +296,7 @@ import {PortfoliosAssessmentComponent} from './units/states/portfolios/directive
 import {UnitGroupsComponent} from './units/states/groups/unit-groups/unit-groups.component';
 import {RolloverComponent} from './units/states/rollover/rollover.component';
 import {ProjectGroupsComponent} from './projects/states/groups/project-groups/project-groups.component';
+import {SummaryTaskStatusChartComponent} from './visualisations/summary-task-status-chart/summary-task-status-chart.component';
 
 @NgModule({
   // Components we declare
@@ -440,6 +441,7 @@ import {ProjectGroupsComponent} from './projects/states/groups/project-groups/pr
     RolloverComponent,
     ProjectGroupsComponent,
     GroupMemberContributionAssignerComponent,
+    SummaryTaskStatusChartComponent,
   ],
   // Services we provide
   providers: [
diff --git a/src/app/doubtfire-angularjs.module.ts b/src/app/doubtfire-angularjs.module.ts
index 4855d04ad6..0aed2df656 100644
--- a/src/app/doubtfire-angularjs.module.ts
+++ b/src/app/doubtfire-angularjs.module.ts
@@ -209,6 +209,7 @@ import {PortfolioAddExtraFilesStepComponent} from './projects/states/portfolio/d
 import {UnitGroupsComponent} from './units/states/groups/unit-groups/unit-groups.component';
 import {ProjectGroupsComponent} from './projects/states/groups/project-groups/project-groups.component';
 import {GroupMemberContributionAssignerComponent} from './groups/group-member-contribution-assigner/group-member-contribution-assigner.component';
+import {SummaryTaskStatusChartComponent} from './visualisations/summary-task-status-chart/summary-task-status-chart.component';
 
 export const DoubtfireAngularJSModule = angular.module('doubtfire', [
   'doubtfire.config',
@@ -559,3 +560,8 @@ DoubtfireAngularJSModule.directive(
   'fGroupMemberContributionAssigner',
   downgradeComponent({component: GroupMemberContributionAssignerComponent}),
 );
+
+DoubtfireAngularJSModule.directive(
+  'fSummaryTaskStatusChart',
+  downgradeComponent({component: SummaryTaskStatusChartComponent}),
+);
diff --git a/src/app/units/states/analytics/analytics.tpl.html b/src/app/units/states/analytics/analytics.tpl.html
index abc07aea56..c518a36708 100644
--- a/src/app/units/states/analytics/analytics.tpl.html
+++ b/src/app/units/states/analytics/analytics.tpl.html
@@ -20,4 +20,5 @@ <h3 class="panel-title">
     <unit-achievement-stats unit="unit" ng-if="activeTab === tabs.achievementStats"></unit-achievement-stats>
   </div> -->
   <f-unit-analytics [unit]="unit"></f-unit-analytics>
+  <f-summary-task-status-chart [unit]="unit"></f-summary-task-status-chart>
 </div>
diff --git a/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.html b/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.html
new file mode 100644
index 0000000000..b178a4e20a
--- /dev/null
+++ b/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.html
@@ -0,0 +1,18 @@
+<div class="h-[500px]">
+  <ngx-charts-bar-vertical-normalized
+    [scheme]="colorScheme"
+    [results]="data"
+    [gradient]="gradient"
+    [xAxis]="showXAxis"
+    [yAxis]="showYAxis"
+    [legend]="showLegend"
+    [showXAxisLabel]="showXAxisLabel"
+    [showYAxisLabel]="showYAxisLabel"
+    [xAxisLabel]="xAxisLabel"
+    [yAxisLabel]="yAxisLabel"
+    [animations]="animations"
+    (select)="onSelect($event)"
+    [tooltipDisabled]="false"
+  >
+  </ngx-charts-bar-vertical-normalized>
+</div>
diff --git a/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.scss b/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.ts b/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.ts
new file mode 100644
index 0000000000..a47368b3cc
--- /dev/null
+++ b/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.ts
@@ -0,0 +1,99 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Unit} from 'src/app/api/models/unit';
+import {TaskService} from 'src/app/api/services/task.service';
+import {GradeService} from 'src/app/common/services/grade.service';
+
+const actualData = {
+  '1.1P': {'1': 7, '2': 5, '9': 3, '10': 1},
+  '1.2P': {'1': 7, '2': 5, '7': 1, '8': 1, '4': 1, '9': 1},
+  '1.3P': {'1': 7, '2': 6, '9': 3},
+  '1.4C': {'1': 10, '2': 5, '9': 1},
+  '2.1P': {'1': 10, '2': 5, '9': 1},
+  '2.2P': {'1': 10, '2': 5, '5': 1},
+  '2.3P': {'1': 10, '2': 5, '9': 1},
+  '2.4P': {'1': 10, '2': 6},
+  '2.5C': {'1': 11, '2': 4, '9': 1},
+  '3.1P': {'1': 11, '2': 5},
+  '3.2P': {'1': 11, '2': 4, '10': 1},
+  '3.3P': {'1': 11, '2': 4, '10': 1},
+  '3.4C': {'1': 12, '2': 3, '5': 1},
+  '3.5C': {'1': 12, '2': 2, '8': 1, '7': 1},
+  '3.6D': {'1': 15, '2': 1},
+  '4.1P': {'1': 11, '2': 2, '10': 1, '9': 1, '5': 1},
+  '4.2C': {'1': 12, '2': 2, '10': 1, '9': 1},
+  '4.3C': {'1': 12, '2': 2, '9': 2},
+  'T1': {'1': 11, '2': 2, '9': 3},
+  '5.1P': {'1': 14, '2': 1, '10': 1},
+  '5.2P': {'1': 14, '2': 1, '5': 1},
+  '5.3C': {'1': 14, '2': 2},
+  '5.4C': {'1': 14, '8': 1, '10': 1},
+  '5.5D': {'1': 15, '2': 1},
+  '6.1P': {'1': 14, '9': 2},
+  '7.1P': {'1': 16},
+  '7.2D': {'1': 16},
+  '8.1P': {'1': 16},
+  '8.2P': {'1': 16},
+  'T2': {'1': 16},
+  '9.1P': {'1': 16},
+  '9.2C': {'1': 16},
+  '10.1H': {'1': 16},
+  '10.2H': {'1': 16},
+  '11.1P': {'1': 16},
+  '6.2D': {'1': 16},
+  'T10': {'1': 16},
+};
+
+@Component({
+  selector: 'f-summary-task-status-chart',
+  templateUrl: './summary-task-status-chart.component.html',
+  styleUrl: './summary-task-status-chart.component.scss',
+})
+export class SummaryTaskStatusChartComponent implements OnInit {
+  @Input() unit: Unit;
+
+  data = [];
+
+  // view: any[] = [700, 400];
+
+  // options
+  showXAxis: boolean = true;
+  showYAxis: boolean = true;
+  gradient: boolean = false;
+  showLegend: boolean = true;
+  showXAxisLabel: boolean = true;
+  xAxisLabel: string = 'Task';
+  showYAxisLabel: boolean = true;
+  yAxisLabel: string = 'Status';
+  animations: boolean = true;
+
+  colorScheme = {
+    domain: ['#5AA454', '#C7B42C', '#AAAAAA'],
+  };
+
+  constructor(
+    private gradeService: GradeService,
+    private taskService: TaskService,
+  ) {}
+
+  statusLabelsArr = Array.from(this.taskService.statusLabels.values());
+
+  ngOnInit(): void {
+    this.colorScheme.domain = [...this.taskService.statusColors.values()];
+
+    const data = Object.entries(actualData).map(([taskDef, counts]) => ({
+      name: taskDef,
+      series: this.statusLabelsArr.map((label, idx) => ({
+        name: label,
+        value: counts[String(idx)] ?? 0,
+      })),
+    }));
+
+    this.data = data;
+
+    console.log(data);
+  }
+
+  onSelect(event) {
+    console.log(event);
+  }
+}

From efe8a4fc66181e5b89f6f52e2532f18a334e8f40 Mon Sep 17 00:00:00 2001
From: b0ink <40929320+b0ink@users.noreply.github.com>
Date: Wed, 3 Dec 2025 11:21:33 +1100
Subject: [PATCH 2/3] feat: add campus filtering

---
 .../summary-task-status-chart.component.html  |   7 +
 .../summary-task-status-chart.component.ts    | 157 +++++++++++++-----
 2 files changed, 121 insertions(+), 43 deletions(-)

diff --git a/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.html b/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.html
index b178a4e20a..4b07dbd1cb 100644
--- a/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.html
+++ b/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.html
@@ -1,4 +1,11 @@
 <div class="h-[500px]">
+  <mat-form-field appearance="outline">
+    <mat-select [(ngModel)]="campusFilter" (selectionChange)="refreshData()">
+      <mat-option value="all">All</mat-option>
+      <mat-option value="Geelong">Geelong</mat-option>
+      <mat-option value="Online">Online</mat-option>
+    </mat-select>
+  </mat-form-field>
   <ngx-charts-bar-vertical-normalized
     [scheme]="colorScheme"
     [results]="data"
diff --git a/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.ts b/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.ts
index a47368b3cc..79407c54bb 100644
--- a/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.ts
+++ b/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.ts
@@ -1,46 +1,87 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Injector, Input, OnInit, ViewContainerRef} from '@angular/core';
 import {Unit} from 'src/app/api/models/unit';
 import {TaskService} from 'src/app/api/services/task.service';
 import {GradeService} from 'src/app/common/services/grade.service';
-
+import {TooltipService} from '@swimlane/ngx-charts';
 const actualData = {
-  '1.1P': {'1': 7, '2': 5, '9': 3, '10': 1},
-  '1.2P': {'1': 7, '2': 5, '7': 1, '8': 1, '4': 1, '9': 1},
-  '1.3P': {'1': 7, '2': 6, '9': 3},
-  '1.4C': {'1': 10, '2': 5, '9': 1},
-  '2.1P': {'1': 10, '2': 5, '9': 1},
-  '2.2P': {'1': 10, '2': 5, '5': 1},
-  '2.3P': {'1': 10, '2': 5, '9': 1},
-  '2.4P': {'1': 10, '2': 6},
-  '2.5C': {'1': 11, '2': 4, '9': 1},
-  '3.1P': {'1': 11, '2': 5},
-  '3.2P': {'1': 11, '2': 4, '10': 1},
-  '3.3P': {'1': 11, '2': 4, '10': 1},
-  '3.4C': {'1': 12, '2': 3, '5': 1},
-  '3.5C': {'1': 12, '2': 2, '8': 1, '7': 1},
-  '3.6D': {'1': 15, '2': 1},
-  '4.1P': {'1': 11, '2': 2, '10': 1, '9': 1, '5': 1},
-  '4.2C': {'1': 12, '2': 2, '10': 1, '9': 1},
-  '4.3C': {'1': 12, '2': 2, '9': 2},
-  'T1': {'1': 11, '2': 2, '9': 3},
-  '5.1P': {'1': 14, '2': 1, '10': 1},
-  '5.2P': {'1': 14, '2': 1, '5': 1},
-  '5.3C': {'1': 14, '2': 2},
-  '5.4C': {'1': 14, '8': 1, '10': 1},
-  '5.5D': {'1': 15, '2': 1},
-  '6.1P': {'1': 14, '9': 2},
-  '7.1P': {'1': 16},
-  '7.2D': {'1': 16},
-  '8.1P': {'1': 16},
-  '8.2P': {'1': 16},
-  'T2': {'1': 16},
-  '9.1P': {'1': 16},
-  '9.2C': {'1': 16},
-  '10.1H': {'1': 16},
-  '10.2H': {'1': 16},
-  '11.1P': {'1': 16},
-  '6.2D': {'1': 16},
-  'T10': {'1': 16},
+  'Geelong': {
+    '1.1P': {'1': 4, '2': 3, '9': 3, '10': 1},
+    '1.2P': {'1': 4, '2': 3, '7': 1, '8': 1, '4': 1, '9': 1},
+    '1.3P': {'1': 4, '2': 4, '9': 3},
+    '1.4C': {'1': 6, '2': 4, '9': 1},
+    '2.1P': {'1': 7, '2': 3, '9': 1},
+    '2.2P': {'1': 7, '2': 3, '5': 1},
+    '2.3P': {'1': 7, '2': 3, '9': 1},
+    '2.4P': {'1': 7, '2': 4},
+    '2.5C': {'1': 7, '2': 3, '9': 1},
+    '3.1P': {'1': 8, '2': 3},
+    '3.2P': {'1': 8, '2': 3},
+    '3.3P': {'1': 8, '2': 2, '10': 1},
+    '3.4C': {'1': 8, '2': 2, '5': 1},
+    '3.5C': {'1': 8, '2': 1, '8': 1, '7': 1},
+    '3.6D': {'1': 11},
+    '4.1P': {'1': 8, '2': 1, '10': 1, '5': 1},
+    '4.2C': {'1': 8, '2': 1, '10': 1, '9': 1},
+    '4.3C': {'1': 8, '2': 1, '9': 2},
+    'T1': {'1': 8, '2': 1, '9': 2},
+    '5.1P': {'1': 10, '2': 1},
+    '5.2P': {'1': 10, '2': 1},
+    '5.3C': {'1': 10, '2': 1},
+    '5.4C': {'1': 10, '8': 1},
+    '5.5D': {'1': 11},
+    '6.1P': {'1': 10, '9': 1},
+    '7.1P': {'1': 11},
+    '7.2D': {'1': 11},
+    '8.1P': {'1': 11},
+    '8.2P': {'1': 11},
+    'T2': {'1': 11},
+    '9.1P': {'1': 11},
+    '9.2C': {'1': 11},
+    '10.1H': {'1': 11},
+    '10.2H': {'1': 11},
+    '11.1P': {'1': 11},
+    '6.2D': {'1': 11},
+    'T10': {'1': 11},
+  },
+  'Online': {
+    '1.1P': {'1': 3, '2': 2},
+    '1.2P': {'1': 3, '2': 2},
+    '1.3P': {'1': 3, '2': 2},
+    '1.4C': {'1': 4, '2': 1},
+    '2.1P': {'1': 3, '2': 2},
+    '2.2P': {'1': 3, '2': 2},
+    '2.3P': {'1': 3, '2': 2},
+    '2.4P': {'1': 3, '2': 2},
+    '2.5C': {'1': 4, '2': 1},
+    '3.1P': {'1': 3, '2': 2},
+    '3.2P': {'1': 3, '2': 1, '10': 1},
+    '3.3P': {'1': 3, '2': 2},
+    '3.4C': {'1': 4, '2': 1},
+    '3.5C': {'1': 4, '2': 1},
+    '3.6D': {'1': 4, '2': 1},
+    '4.1P': {'1': 3, '2': 1, '9': 1},
+    '4.2C': {'1': 4, '2': 1},
+    '4.3C': {'1': 4, '2': 1},
+    'T1': {'1': 3, '2': 1, '9': 1},
+    '5.1P': {'1': 4, '10': 1},
+    '5.2P': {'1': 4, '5': 1},
+    '5.3C': {'1': 4, '2': 1},
+    '5.4C': {'1': 4, '10': 1},
+    '5.5D': {'1': 4, '2': 1},
+    '6.1P': {'1': 4, '9': 1},
+    '7.1P': {'1': 5},
+    '7.2D': {'1': 5},
+    '8.1P': {'1': 5},
+    '8.2P': {'1': 5},
+    'T2': {'1': 5},
+    '9.1P': {'1': 5},
+    '9.2C': {'1': 5},
+    '10.1H': {'1': 5},
+    '10.2H': {'1': 5},
+    '11.1P': {'1': 5},
+    '6.2D': {'1': 5},
+    'T10': {'1': 5},
+  },
 };
 
 @Component({
@@ -73,14 +114,46 @@ export class SummaryTaskStatusChartComponent implements OnInit {
   constructor(
     private gradeService: GradeService,
     private taskService: TaskService,
-  ) {}
+    private chartToolTipService: TooltipService,
+    private viewContainerRef: ViewContainerRef,
+    private injectorObj: Injector,
+  ) {
+    this.chartToolTipService = this.injectorObj.get(TooltipService);
+    this.viewContainerRef = this.injectorObj.get(ViewContainerRef);
+  }
 
   statusLabelsArr = Array.from(this.taskService.statusLabels.values());
 
+  campusFilter: string = 'all';
+
   ngOnInit(): void {
+    this.chartToolTipService.injectionService.setRootViewContainer(this.viewContainerRef);
+
     this.colorScheme.domain = [...this.taskService.statusColors.values()];
+    this.refreshData();
+  }
 
-    const data = Object.entries(actualData).map(([taskDef, counts]) => ({
+  refreshData() {
+    const mergedData: Record<string, Record<string, number>> = {};
+
+    // combine all campuses
+    Object.values(actualData).forEach((campusData) => {
+      Object.entries(campusData).forEach(([taskDef, counts]) => {
+        mergedData[taskDef] = mergedData[taskDef] || {};
+        Object.entries(counts).forEach(([status, value]) => {
+          mergedData[taskDef][status] = (mergedData[taskDef][status] || 0) + value;
+        });
+      });
+    });
+
+    // if a campus filter is set, use only that campus
+    const dataSource =
+      this.campusFilter && this.campusFilter !== 'all' && actualData[this.campusFilter]
+        ? actualData[this.campusFilter]
+        : mergedData;
+
+    // build chart series
+    const data = Object.entries(dataSource).map(([taskDef, counts]) => ({
       name: taskDef,
       series: this.statusLabelsArr.map((label, idx) => ({
         name: label,
@@ -89,8 +162,6 @@ export class SummaryTaskStatusChartComponent implements OnInit {
     }));
 
     this.data = data;
-
-    console.log(data);
   }
 
   onSelect(event) {

From d11e545531d626ba0f5e4c4b0dd97a471512b588 Mon Sep 17 00:00:00 2001
From: b0ink <40929320+b0ink@users.noreply.github.com>
Date: Wed, 3 Dec 2025 11:53:05 +1100
Subject: [PATCH 3/3] chore: add gh reference

---
 .../summary-task-status-chart.component.ts                       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.ts b/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.ts
index 79407c54bb..3d6ef66ce0 100644
--- a/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.ts
+++ b/src/app/visualisations/summary-task-status-chart/summary-task-status-chart.component.ts
@@ -118,6 +118,7 @@ export class SummaryTaskStatusChartComponent implements OnInit {
     private viewContainerRef: ViewContainerRef,
     private injectorObj: Injector,
   ) {
+    // https://github.com/swimlane/ngx-charts/issues/1428#issuecomment-659237562
     this.chartToolTipService = this.injectorObj.get(TooltipService);
     this.viewContainerRef = this.injectorObj.get(ViewContainerRef);
   }