🤖 📈 Visualise All Students Progression And also Group By Class

angular.json

@@ -914,6 +914,32 @@
     "state-convs-mgr-conversations-analytics-traffic-by-day": "libs/state/convs-mgr/conversations/analytics/traffic-by-day",
     "state-convs-mgr-conversations-chats": "libs/state/convs-mgr/conversations/chats",
     "state-convs-mgr-conversations-messages": "libs/state/convs-mgr/conversations/messages",
+    "state-convs-mgr-monitoring": {
+      "projectType": "library",
+      "root": "libs/state/convs-mgr/monitoring",
+      "sourceRoot": "libs/state/convs-mgr/monitoring/src",
+      "prefix": "app",
+      "targets": {
+        "test": {
+          "executor": "@nrwl/jest:jest",
+          "outputs": ["coverage/libs/state/convs-mgr/monitoring"],
+          "options": {
+            "jestConfig": "libs/state/convs-mgr/monitoring/jest.config.ts",
+            "passWithNoTests": true
+          }
+        },
+        "lint": {
+          "executor": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/state/convs-mgr/monitoring/**/*.ts",
+              "libs/state/convs-mgr/monitoring/**/*.html"
+            ]
+          }
+        }
+      },
+      "tags": []
+    },
     "state-convs-mgr-stories": "libs/state/convs-mgr/stories/main",
     "state-convs-mgr-stories-block-connections": "libs/state/convs-mgr/stories/block-connections",
     "state-convs-mgr-stories-blocks": "libs/state/convs-mgr/stories/blocks",

apps/conv-learning-manager/src/app/app.module.ts

@@ -1,92 +1,94 @@
-import { NgModule } from '@angular/core';
-
-import { AngularFireModule } from '@angular/fire/compat';
-import { AngularFireAnalyticsModule } from '@angular/fire/compat/analytics';
-import { AngularFireAuthModule } from '@angular/fire/compat/auth';
-import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
-import { AngularFireFunctionsModule } from '@angular/fire/compat/functions';
-import { ServiceWorkerModule } from '@angular/service-worker';
-import { HttpClientModule } from '@angular/common/http';
-
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-import { MaterialBricksRootModule } from '@iote/bricks-angular';
-import { NgFireModule } from '@ngfi/angular';
-import { MultiLangModule } from '@ngfi/multi-lang';
-
-import { GooglePlaceModule } from 'ngx-google-places-autocomplete';
-
-import { AuthorisationModule } from '@app/elements/base/authorisation';
-import { AppConfigurationModule } from '@app/elements/base/configuration';
-import { DateConfigurationModule } from '@app/elements/base/date-time';
-import { FirebaseConfigurationModule } from '@app/elements/base/firebase';
-
-
-import { UserStateModule } from '@app/state/user';
-import { OrgStateModule } from '@app/state/organisation';
-import { StoriesStateModule } from '@app/state/convs-mgr/stories';
-import { StoryBlocksStateModule } from '@app/state/convs-mgr/stories/blocks';
-import { StoryBlockConnectionsStateModule } from '@app/state/convs-mgr/stories/block-connections';
-import { VariablesConfigStateModule } from '@app/state/convs-mgr/stories/variables-config';
-
-import  { EnvironmentConfigModule } from '@app/admin/config/environment-config'
-
-import { AppComponent } from './app.component';
-import { AppRoutingModule } from './app.routing.module';
-
-import { environment } from '../environments/environment';
-
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule, BrowserAnimationsModule,
-    GooglePlaceModule,
-
-    AngularFireModule.initializeApp(environment.firebase),
-    AngularFireAuthModule, AngularFirestoreModule, AngularFireFunctionsModule, NgFireModule,
-    AngularFireAnalyticsModule,
-    HttpClientModule,
-
-
-    MaterialBricksRootModule.forRoot(),
-
-    UserStateModule.forRoot(),
-    AuthorisationModule.forRoot(environment, environment.production),
-    EnvironmentConfigModule.forRoot(environment),
-
-    AppConfigurationModule.forRoot(environment, environment.production),
-    DateConfigurationModule.forRoot(),
-    FirebaseConfigurationModule.forRoot(!environment.production, environment.useEmulators),
-    MultiLangModule.forRoot(true),
-    // UserNavModule,
-
-    MatProgressBarModule,
-
-    // AppConfigModule.forRoot(),
-
-    // DataModule.forRoot(),
-    OrgStateModule.forRoot(),
-    StoriesStateModule.forRoot(),
-    StoryBlocksStateModule.forRoot(),
-    StoryBlockConnectionsStateModule.forRoot(),
-    VariablesConfigStateModule.forRoot(),
-    // FlowsStateModule.forRoot(),
-    // ChatsStateModule.forRoot(),
-    // MessagingStateModule.forRoot(),
-    // CommChannelsStateModule.forRoot(),
-
-    AppRoutingModule,
-    ServiceWorkerModule.register('ngsw-worker.js', {
-      enabled: environment.production,
-      // Register the ServiceWorker as soon as the application is stable
-      // or after 30 seconds (whichever comes first).
-      registrationStrategy: 'registerWhenStable:30000'
-    })
-  ],
-  providers: [],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
+import { NgModule } from '@angular/core';
+
+import { AngularFireModule } from '@angular/fire/compat';
+import { AngularFireAnalyticsModule } from '@angular/fire/compat/analytics';
+import { AngularFireAuthModule } from '@angular/fire/compat/auth';
+import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
+import { AngularFireFunctionsModule } from '@angular/fire/compat/functions';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { HttpClientModule } from '@angular/common/http';
+
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { MaterialBricksRootModule } from '@iote/bricks-angular';
+import { NgFireModule } from '@ngfi/angular';
+import { MultiLangModule } from '@ngfi/multi-lang';
+
+import { GooglePlaceModule } from 'ngx-google-places-autocomplete';
+
+import { AuthorisationModule } from '@app/elements/base/authorisation';
+import { AppConfigurationModule } from '@app/elements/base/configuration';
+import { DateConfigurationModule } from '@app/elements/base/date-time';
+import { FirebaseConfigurationModule } from '@app/elements/base/firebase';
+
+
+import { UserStateModule } from '@app/state/user';
+import { OrgStateModule } from '@app/state/organisation';
+import { StoriesStateModule } from '@app/state/convs-mgr/stories';
+import { StoryBlocksStateModule } from '@app/state/convs-mgr/stories/blocks';
+import { StoryBlockConnectionsStateModule } from '@app/state/convs-mgr/stories/block-connections';
+import { VariablesConfigStateModule } from '@app/state/convs-mgr/stories/variables-config';
+import { ProgressMonitoringStateModule } from '@app/state/convs-mgr/monitoring';
+
+import  { EnvironmentConfigModule } from '@app/admin/config/environment-config'
+
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app.routing.module';
+
+import { environment } from '../environments/environment';
+
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule, BrowserAnimationsModule,
+    GooglePlaceModule,
+
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireAuthModule, AngularFirestoreModule, AngularFireFunctionsModule, NgFireModule,
+    AngularFireAnalyticsModule,
+    HttpClientModule,
+
+
+    MaterialBricksRootModule.forRoot(),
+
+    UserStateModule.forRoot(),
+    AuthorisationModule.forRoot(environment, environment.production),
+    EnvironmentConfigModule.forRoot(environment),
+
+    AppConfigurationModule.forRoot(environment, environment.production),
+    DateConfigurationModule.forRoot(),
+    FirebaseConfigurationModule.forRoot(!environment.production, environment.useEmulators),
+    MultiLangModule.forRoot(true),
+    // UserNavModule,
+
+    MatProgressBarModule,
+
+    // AppConfigModule.forRoot(),
+
+    // DataModule.forRoot(),
+    OrgStateModule.forRoot(),
+    StoriesStateModule.forRoot(),
+    StoryBlocksStateModule.forRoot(),
+    StoryBlockConnectionsStateModule.forRoot(),
+    VariablesConfigStateModule.forRoot(),
+    ProgressMonitoringStateModule.forRoot(),
+    // FlowsStateModule.forRoot(),
+    // ChatsStateModule.forRoot(),
+    // MessagingStateModule.forRoot(),
+    // CommChannelsStateModule.forRoot(),
+
+    AppRoutingModule,
+    ServiceWorkerModule.register('ngsw-worker.js', {
+      enabled: environment.production,
+      // Register the ServiceWorker as soon as the application is stable
+      // or after 30 seconds (whichever comes first).
+      registrationStrategy: 'registerWhenStable:30000'
+    })
+  ],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

libs/features/analytics/group-based/progress/src/lib/components/group-based-progress-chart/group-based-progress-chart.component.html

@@ -1,3 +1,11 @@
+<div class="menu">
+  <div class="menu__wrapper">
+    <div *ngFor="let group of groups" class="group">
+      <button class="group__btn" (click)="selectActiveGroup(group)">{{ group }}</button>
+    </div>
+  </div>
+</div>
+
 <div class="chart">
-  <canvas  id="chart-ctx" >{{ chart }}</canvas>
-</div>
+  <canvas id="chart-ctx">{{ chart }}</canvas>
+</div>

libs/features/analytics/group-based/progress/src/lib/components/group-based-progress-chart/group-based-progress-chart.component.scss

@@ -1,4 +1,30 @@
 #chart-ctx {
   width: 100%;
   height: 500px;
-}
+}
+
+.menu {
+  .menu__wrapper {
+    display: flex;
+    gap: 0.5rem;
+
+    .group {
+      padding: 0.3rem;
+
+      &__btn {
+        border: none;
+        padding: 0.5rem;
+        border-radius: 5px;
+        cursor: pointer;
+
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+  }
+
+  span {
+    color: white;
+  }
+}