Merge pull request Sunbird-cQube#232 from pandutibil/development

LO table sort indicators issue, filters sorting and other UI changes

development/ui/back-end/core/config/nvsk/micro_improvements_config.js

@@ -11,7 +11,7 @@
           isState: true,
           tooltip: {
             name: "State/UT name",
-          },
+          }
         },
       ],
       dimensions: [
@@ -21,39 +21,39 @@
           tooltip: {
             name: "Total Projects",
           },
-          includeAsMetricFilter: true,
+          includeAsMetricFilter: true
         },
         {
           name: "Program Started",
           property: "Total Micro Improvements Started",
           tooltip: {
             name: "Program Started",
           },
-          includeAsMetricFilter: true,
+          includeAsMetricFilter: true
         },
         {
           name: "Program In progress",
           property: "Total Micro Improvements In progress",
           tooltip: {
             name: "Program In progress",
           },
-          includeAsMetricFilter: true,
+          includeAsMetricFilter: true
         },
         {
           name: "Program Submitted",
           property: "Total Micro improvement submitted",
           tooltip: {
             name: "Program Submitted",
           },
-          includeAsMetricFilter: true,
+          includeAsMetricFilter: true
         },
         {
           name: "Programs Submitted with Evidence",
           property: "Total Micro improvement submitted with evidence",
           tooltip: {
             name: "Program Submitted with Evidence",
           },
-          includeAsMetricFilter: true,
+          includeAsMetricFilter: true
         },
         {
           name: "state_code",

development/ui/back-end/core/config/nvsk/nas_config.js

@@ -10,8 +10,6 @@ const dataSourceInfo = {
                     isState: true,
                     tooltip: {
                         name: "State/UT name"
-                        //valueAsName: true,
-                        //property: "Started"
                     }
                 },
                 {
@@ -105,7 +103,20 @@ const dataSourceInfo = {
                     weightedAverage: {
                         property: "Performance",
                         against: "Students Surveyed"
-                    }
+                    },
+                    level: "state"
+                },
+                {
+                    name: "District",
+                    property: "District",
+                    transposeColumn: true,
+                    isHeatMapRequired: true,
+				    color: '#002966',
+                    weightedAverage: {
+                        property: "Performance",
+                        against: "Students Surveyed"
+                    },
+                    level: "district"
                 }
             ],
             filters: [
@@ -120,7 +131,11 @@ const dataSourceInfo = {
                 {
                     name: 'State/UT',
                     column: 'State',
-                    optionValueColumn: "State Code"
+                    optionValueColumn: "State Code",
+                    level: {
+                        value: "district",
+                        property: "District"
+                    }
                 }
             ]
         },

development/ui/back-end/core/config/nvsk/nishtha_config.js

@@ -79,7 +79,10 @@ const dataSourceInfo = {
                     name: 'State/UT',
                     column: 'State',
                     optionValueColumn: "State Code",
-                    level: 'User District_Correct',
+                    level: {
+                        value: "district",
+                        property: "User District_Correct"
+                    },
                     includeAll: true
                 }
             ]
@@ -89,6 +92,8 @@ const dataSourceInfo = {
         multiBarChart: {
             pathToFile: 'diksha_nishtha_consumption-by-course.json',
             defaultLevel: "Course Name",
+            sortByProperty: 'Enrollments',
+            sortDirection: 'desc',
             columns: [
                 {
                     name: "Course Name",
@@ -174,6 +179,7 @@ const dataSourceInfo = {
             pathToFile: 'diksha_nishtha_tot-courses-medium.json',
             defaultLevel: 'State Name',
             sortByProperty: 'Total Courses',
+            sortDirection: 'desc',
             columns: [
                 {
                     name: "State/UT Name",

development/ui/front-end/src/app/shared/components/charts/bar-chart/bar-chart.component.ts

@@ -1,5 +1,4 @@
 import { Component, Input, OnChanges, OnInit, ViewChild, SimpleChanges } from '@angular/core';
-import { DecimalPipe } from '@angular/common';
 import * as Highcharts from "highcharts/highstock";
 import * as HighchartsMore from "highcharts/highcharts-more";
 
@@ -9,8 +8,7 @@ HighchartsMore2(Highcharts);
 @Component({
   selector: 'app-bar-chart',
   templateUrl: './bar-chart.component.html',
-  styleUrls: ['./bar-chart.component.scss'],
-  providers: [DecimalPipe]
+  styleUrls: ['./bar-chart.component.scss']
 })
 export class BarChartComponent implements OnInit, OnChanges {
   chart!: Highcharts.Chart;
@@ -20,7 +18,7 @@ export class BarChartComponent implements OnInit, OnChanges {
 
   @ViewChild('container') container: any;
 
-  constructor(private readonly _decimalPipe: DecimalPipe) { }
+  constructor() { }
 
   ngOnInit(): void {
   }
@@ -67,8 +65,8 @@ export class BarChartComponent implements OnInit, OnChanges {
                 enabled: true,
                 crop: false,
                 allowOverlap: true,
-                formatter: function() {
-                  return ref._decimalPipe.transform(this.y, '1.0-0', 'en-IN');
+                formatter: function(this: any) {
+                  return new Intl.NumberFormat('en-IN').format(this.y);
                 }
             }
         },

development/ui/front-end/src/app/shared/components/charts/multi-bar-chart/multi-bar-chart.component.ts

@@ -1,5 +1,4 @@
 import { Component, Input, OnChanges, OnInit, ViewChild, SimpleChanges, AfterViewInit } from '@angular/core';
-import { DecimalPipe } from '@angular/common';
 import * as Highcharts from "highcharts/highstock";
 import * as HighchartsMore from "highcharts/highcharts-more";
 import { cloneDeep } from "lodash";
@@ -10,8 +9,7 @@ HighchartsMore2(Highcharts);
 @Component({
   selector: 'app-multi-bar-chart',
   templateUrl: './multi-bar-chart.component.html',
-  styleUrls: ['./multi-bar-chart.component.scss'],
-  providers: [DecimalPipe]
+  styleUrls: ['./multi-bar-chart.component.scss']
 })
 export class MultiBarChartComponent implements OnInit, OnChanges, AfterViewInit {
   chart!: Highcharts.Chart;
@@ -29,7 +27,7 @@ export class MultiBarChartComponent implements OnInit, OnChanges, AfterViewInit
   @ViewChild('left') left: any;
   @ViewChild('right') right: any;
 
-  constructor(private readonly _decimalPipe: DecimalPipe) { }
+  constructor() { }
 
   ngOnInit(): void {
   }
@@ -42,7 +40,7 @@ export class MultiBarChartComponent implements OnInit, OnChanges, AfterViewInit
       let pageSize = (this.options?.series as any)[0].data.length < this.pageSize ? (this.options?.series as any)[0].data.length : this.pageSize;
 
       setTimeout(() => {
-        this.height = pageSize * 45 + this.pageSize;
+        this.height = pageSize * 45 + 100;
         this.totalRecords = (this.options?.series as any)[0].data.length;
       });
 
@@ -59,12 +57,17 @@ export class MultiBarChartComponent implements OnInit, OnChanges, AfterViewInit
 
   onPageChange(event: any): void {
     let originalSeries = cloneDeep(this.series);
+    this.pageSize = event.pageSize;
+    this.height = this.pageSize * 45 + 100;
     (this.options as Highcharts.Options).series = originalSeries?.map((series: any) => {
       series.data = series.data.slice(this.pageSize * event.pageIndex, this.pageSize * event.pageIndex + this.pageSize);
       return series;
     });
 
     this.updateChart(this.options);
+    setTimeout(() => {
+      window.dispatchEvent(new Event('resize'));
+    }, 100)
   }
 
   createMultiBarChart(options: Highcharts.Options | undefined): void {
@@ -100,12 +103,13 @@ export class MultiBarChartComponent implements OnInit, OnChanges, AfterViewInit
               enabled: true,
               crop: false,
               allowOverlap: true,
-              formatter: function() {
-                return ref._decimalPipe.transform(this.y, '1.0-0', 'en-IN');
+              formatter: function(this: any) {
+                return new Intl.NumberFormat('en-IN').format(this.y);
               }
           },
           pointWidth: 10,
-          pointPadding: 0
+          pointPadding: 0.2,
+          minPointLength: 10
         },
         series: {
           events: {
@@ -128,9 +132,10 @@ export class MultiBarChartComponent implements OnInit, OnChanges, AfterViewInit
         shared: true,
         formatter: function (this: any) {
           return this.points.reduce(function (s: any, point: any) {
-            return s + '<br/>' + point.series.name + ': ' + ref._decimalPipe.transform(point.y, '1.0-0', 'en-IN');
+            return s + '<br/>' + point.series.name + ': ' + new Intl.NumberFormat('en-IN').format(point.y);
           }, '<b>' + this.x + '</b>');
-        }
+        },
+        enabled: true
       },
       credits: {
         enabled: false

development/ui/front-end/src/app/shared/components/charts/pie-chart/pie-chart.component.ts

@@ -1,5 +1,4 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
-import { DecimalPipe } from '@angular/common';
 import * as Highcharts from "highcharts/highstock";
 import * as HighchartsMore from "highcharts/highcharts-more";
 

development/ui/front-end/src/app/shared/components/charts/stacked-bar/stacked-bar.component.ts

@@ -1,5 +1,4 @@
 import { Component, Input, OnChanges, OnInit, ViewChild, SimpleChanges } from '@angular/core';
-import { DecimalPipe } from '@angular/common';
 import * as Highcharts from "highcharts/highstock";
 import * as HighchartsMore from "highcharts/highcharts-more";
 
@@ -9,8 +8,7 @@ HighchartsMore2(Highcharts);
 @Component({
   selector: 'app-stacked-bar',
   templateUrl: './stacked-bar.component.html',
-  styleUrls: ['./stacked-bar.component.scss'],
-  providers: [DecimalPipe]
+  styleUrls: ['./stacked-bar.component.scss']
 })
 export class StackedBarComponent implements OnInit, OnChanges {
   chart!: Highcharts.Chart;
@@ -19,7 +17,7 @@ export class StackedBarComponent implements OnInit, OnChanges {
   @Input() options: Highcharts.Options | undefined;
   @ViewChild('container') container: any;
 
-  constructor(private readonly _decimalPipe: DecimalPipe) { }
+  constructor() { }
 
   ngOnInit(): void {
 
@@ -67,8 +65,8 @@ export class StackedBarComponent implements OnInit, OnChanges {
             enabled: true,
             crop: false,
             allowOverlap: true,
-            formatter: function () {
-              return ref._decimalPipe.transform(this.y, '1.0-0', 'en-IN');
+            formatter: function(this: any) {
+              return new Intl.NumberFormat('en-IN').format(this.y);
             }
           }
         },

development/ui/front-end/src/app/shared/components/filter-panel/filter-panel.component.scss

@@ -20,9 +20,6 @@
     .ng-select{
         overflow: visible !important;
     }
-    .ng-clear {
-        color: white;
-    }
 
     .ng-has-value .ng-arrow {
         //border-color: white transparent transparent !important;

development/ui/front-end/src/app/shared/components/tables/material-heat-chart-table/material-heat-chart-table.component.html

@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" matSort tableHeatMap>
+<table mat-table [dataSource]="dataSource" matSort tableHeatMap [matSortActive]="matSortActive" [matSortDirection]="matSortDirection" (contentChanged)="contentChanged()">
     <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element; let i = index;">{{i + 1}}. </td>
@@ -10,7 +10,7 @@
         </ng-container>
 
         <ng-template #default>
-            <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-neutral-600 xmd:text-sm md:text-md">{{ column.name }}</th>
+            <th mat-header-cell *matHeaderCellDef [mat-sort-header]="column.property" class="text-neutral-600 xmd:text-sm md:text-md">{{ column.name }}</th>
             <td mat-cell *matCellDef="let element" [ngClass]="column?.class"> {{element[column.property]}}</td>
         </ng-template>
     </ng-container>

development/ui/front-end/src/app/shared/components/tables/material-heat-chart-table/material-heat-chart-table.component.ts

@@ -1,5 +1,5 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
-import { MatSort } from '@angular/material/sort';
+import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
+import { MatSort, SortDirection } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { TableHeatMapDirective } from 'src/app/shared/directives/table-heat-map/table-heat-map.directive';
 
@@ -8,34 +8,14 @@ import { TableHeatMapDirective } from 'src/app/shared/directives/table-heat-map/
   templateUrl: './material-heat-chart-table.component.html',
   styleUrls: ['./material-heat-chart-table.component.scss']
 })
-export class MaterialHeatChartTableComponent implements OnInit {
-  _tableData: any;
-  _columns: any;
+export class MaterialHeatChartTableComponent implements OnInit, OnChanges {
   columnProperties: any[] = [];
   dataSource!: MatTableDataSource<any>;
+  matSortActive = "";
+  matSortDirection: SortDirection = "asc";
+  columns: any;
 
-  @Input() set tableData(tableData: any) {
-    if (tableData) {
-      this._tableData = tableData;
-      this.dataSource = new MatTableDataSource(tableData);
-      this.dataSource.sort = this.sort;
-    }
-  };
-
-  get tableData(): any {
-    return this._tableData;
-  }
-
-  @Input() set columns(columns: any) {
-    if (columns) {
-      this._columns = columns;
-      this.columnProperties = [...['id'], ...columns.map((column: any) => column.property)];
-    }
-  };
-
-  get columns(): any {
-    return this._columns;
-  }
+  @Input() tableData: any;
 
   @ViewChild(MatSort) sort!: MatSort;
   @ViewChild(TableHeatMapDirective) tableHeatMap!: TableHeatMapDirective;
@@ -44,4 +24,19 @@ export class MaterialHeatChartTableComponent implements OnInit {
 
   ngOnInit(): void {
   }
+
+  ngOnChanges(): void {
+    if (this.tableData) {
+      this.dataSource = new MatTableDataSource(this.tableData.data);
+      this.dataSource.sort = this.sort;
+      this.columns = this.tableData.columns;
+      this.columnProperties = [...['id'], ...this.tableData.columns.map((column: any) => column.property)];
+      this.matSortActive = this.tableData.sortByProperty;
+      this.matSortDirection = this.tableData.sortDirection;      
+    }
+  }
+
+  contentChanged(): void {
+    this.tableHeatMap.colorTheTable();
+  }
 }