Merge pull request #308 from FaizanMohammed326/development

legend for a single value added and filters for mobile fixed
Sunbird-cQube · Aug 1, 2022 · a495187 · a495187
2 parents 078d78d + a687d29
commit a495187
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 44 deletions.
diff --git a/development/ui/front-end/src/app/shared/components/filter-panel/filter-panel.component.ts b/development/ui/front-end/src/app/shared/components/filter-panel/filter-panel.component.ts
@@ -8,7 +8,7 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChange
 export class FilterPanelComponent implements OnInit, OnChanges {
 
   @Input() filters: any = [];
-  @Input() colSize: any = "md:col-span-3 xs:col-span-6 xmd:col-span-4";
+  @Input() colSize: any = "md:col-span-3 xs:col-span-12 xmd:col-span-4";
   @Input() resetOthers = true;
 
   @Output() filtersUpdated = new EventEmitter<any>();

diff --git a/.../shared/components/level-n-metric-filter-panel/level-n-metric-filter-panel.component.html b/.../shared/components/level-n-metric-filter-panel/level-n-metric-filter-panel.component.html
@@ -2,7 +2,7 @@
     <div class="col-span-5" *ngIf="levels && NVSK">
         <app-material-button-group [buttons]="levels" (select)="onSelectLevel($event)"></app-material-button-group>
     </div>
-    <div class="col-span-7" *ngIf="metricFilter">
+    <div class="col-span-7 xs:col-span-12" *ngIf="metricFilter">
         <ng-select class="mx-2" dropdownPosition="bottom" placeholder="{{metricFilter.name}}" [clearable]="false" [(ngModel)]="metricFilter.value" (change)="onSelectMetricFilter($event)">
             <ng-option *ngFor="let option of metricFilter.options" [value]="option.value">{{ option.label }}</ng-option>
         </ng-select>

diff --git a/development/ui/front-end/src/app/shared/components/maps/leaflet-map/leaflet-map.component.ts b/development/ui/front-end/src/app/shared/components/maps/leaflet-map/leaflet-map.component.ts
@@ -72,7 +72,7 @@ export class LeafletMapComponent implements OnInit, AfterViewInit, OnChanges {
       // var imageUrl ='https://i.stack.imgur.com/khgzZ.png',
       // imageBounds = [[80.0, -350.0], [-40.0, 400.0]];
       // L.imageOverlay(imageUrl, imageBounds, {opacity: 0.3}).addTo(this.map);
-      if(environment.config === 'NVSK' && this.level === 'district'){
+      if (environment.config === 'NVSK' && this.level === 'district') {
         this.createMarkers(this.mapData);
       }
       this.map.on('resize', () => {
@@ -125,10 +125,10 @@ export class LeafletMapComponent implements OnInit, AfterViewInit, OnChanges {
     // else {
     //   return "#fff"
     // }
-    if(environment.config === 'NVSK' && this.level === 'district' && !legend){
+    if (environment.config === 'NVSK' && this.level === 'district' && !legend) {
       return '#FFFFFF'
     }
-    else{
+    else {
       let reportTypeBoolean = false;
       if (typeof e === 'string') {
         reportTypeBoolean = true;
@@ -189,32 +189,38 @@ export class LeafletMapComponent implements OnInit, AfterViewInit, OnChanges {
           });
 
           let range = max - min;
-          // let partSize = (range / 10 % 1 === 0) ? range / 10 : Number((range / 10).toFixed(2));
-          let partSize = (range / 4 % 1 === 0) ? range / 4 : Number((range / 4).toFixed(2));
-          for (let i = 1; i <= 5; i++) {
-            if (i === 5) {
-              if(min === 0){
-                values.push(this.perCapitaReport ? 0.1 : 1);
+          if (range) {
+            let partSize = (range / 4 % 1 === 0) ? range / 4 : Number((range / 4).toFixed(2));
+            for (let i = 1; i <= 5; i++) {
+              if (i === 5) {
+                if (min === 0) {
+                  values.push(this.perCapitaReport ? 0.1 : 1);
+                }
+                else {
+                  values.push(this.perCapitaReport ? min : min.toFixed(0));
+                }
+                continue;
               }
-              else{
-                values.push(this.perCapitaReport ? min :min.toFixed(0));
+
+              if (i === 1) {
+                values.push(this.perCapitaReport ? max : max.toFixed(0));
+                continue;
+              }
+              if (this.perCapitaReport) {
+                let value = Number((max - partSize * (i - 1)).toFixed(2))
+                values.push(value)
+              }
+              else {
+                let value = Number((max - partSize * (i - 1)).toFixed(0))
+                values.push(value >= 1 ? value : 1)
               }
-              continue;
-            }
-
-            if (i === 1) {
-              values.push(this.perCapitaReport ? max :max.toFixed(0));
-              continue;
-            }
-            if(this.perCapitaReport){
-              let value = Number((max - partSize * (i - 1)).toFixed(2))
-              values.push(value)
-            }
-            else{
-              let value = Number((max - partSize * (i - 1)).toFixed(0))
-              values.push(value >= 1 ? value : 1)
             }
           }
+          else{
+            values.push(min);
+          }
+          // let partSize = (range / 10 % 1 === 0) ? range / 10 : Number((range / 10).toFixed(2));
+
         }
 
         function styleStates(feature: any) {
@@ -228,7 +234,7 @@ export class LeafletMapComponent implements OnInit, AfterViewInit, OnChanges {
             if (state.state_code == feature.properties.state_code && !state.district_code) {
               color = parent.getLayerColor(state.indicator ? (max - min ? (state.indicator - min) / (max - min) * 100 : state.indicator) : -1);
             }
-            else if(state.district_code && state.district_code == feature.properties.dtcode11){
+            else if (state.district_code && state.district_code == feature.properties.dtcode11) {
               color = parent.getLayerColor(state.indicator ? (max - min ? (state.indicator - min) / (max - min) * 100 : state.indicator) : -1);
             }
           });
@@ -250,17 +256,17 @@ export class LeafletMapComponent implements OnInit, AfterViewInit, OnChanges {
             if (state.state_code == feature.properties.state_code && !state.district_code) {
               popup = state.tooltip
             }
-            else if(state.district_code && state.district_code == feature.properties.dtcode11){
+            else if (state.district_code && state.district_code == feature.properties.dtcode11) {
               popup = state.tooltip
             }
           });
           return popup;
         }
-        
+
         this.countryGeoJSON = L.geoJSON(data['features'], {
           onEachFeature: function (feature: any, layer: any) {
-            if(!(environment.config === 'NVSK' && parent.level === 'district')){
-              if(getPopUp(feature)){
+            if (!(environment.config === 'NVSK' && parent.level === 'district')) {
+              if (getPopUp(feature)) {
                 layer.bindTooltip(getPopUp(feature), { classname: "app-leaflet-tooltip", sticky: true });
               }
             }
@@ -309,10 +315,10 @@ export class LeafletMapComponent implements OnInit, AfterViewInit, OnChanges {
         let partSize = (range / 4 % 1 === 0) ? range / 4 : Number((range / 4).toFixed(2));
         for (let i = 1; i <= 5; i++) {
           if (i === 5) {
-            if(min === 0){
+            if (min === 0) {
               values.push(1);
             }
-            else{
+            else {
               values.push(min.toFixed(0));
             }
             // values.push(min);
@@ -377,9 +383,11 @@ export class LeafletMapComponent implements OnInit, AfterViewInit, OnChanges {
       if (mapOptions.legend && mapOptions.legend.title) {
         labels.push(`<strong>${mapOptions.legend.title}:</strong>`)
       }
-      if (reportTypeIndicator === 'boolean') {
+      if(values.length <= 1 && reportTypeIndicator !== 'boolean'){
+        labels.push(`<i class="fa fa-square" style="color:${ref.getLayerColor(values[0])}"></i> ${values[0]}`);
+      }
+      else if (reportTypeIndicator === 'boolean') {
         values = ["Yes", "No"];
-
         for (let i = 0; i < values.length; i++) {
           labels.push(`<i class="fa fa-square" style="color:${ref.getLayerColor(values[i])}"></i> ${values[i]}`);
         }

diff --git a/...undational-literacy-numeracy/pages/garde-wise-resource/garde-wise-resource.component.html b/...undational-literacy-numeracy/pages/garde-wise-resource/garde-wise-resource.component.html
@@ -1,6 +1,6 @@
 <div class="grid grid-cols-12" *ngIf="!isReportLoading; else reportLoader">
     <div class="col-span-full" appFullScreen>
-        <app-filter-panel [filters]="filters" colSize="md:col-span-3 xs:col-span-6 xmd:col-span-4" (filtersUpdated)="filtersUpdated($event)"></app-filter-panel>
+        <app-filter-panel [filters]="filters" colSize="md:col-span-3 xs:col-span-12 xmd:col-span-4" (filtersUpdated)="filtersUpdated($event)"></app-filter-panel>
         <app-bar-chart title="" [options]="barChartOptions"></app-bar-chart>
     </div>
 </div>

diff --git a/...ent/ui/front-end/src/app/views/nishtha/pages/nishitha-table/nishitha-table.component.html b/...ent/ui/front-end/src/app/views/nishtha/pages/nishitha-table/nishitha-table.component.html
@@ -1,6 +1,6 @@
 <div class="grid grid-cols-12" *ngIf="stateWiseEnrollmentData && options">
     <div class="col-span-full" appFullScreen>
-        <app-filter-panel [filters]="filters" colSize="md:col-span-3 xs:col-span-6 xmd:col-span-4" (filtersUpdated)="filtersUpdated($event)"></app-filter-panel>
+        <app-filter-panel [filters]="filters" colSize="md:col-span-3 xs:col-span-12 xmd:col-span-4" (filtersUpdated)="filtersUpdated($event)"></app-filter-panel>
         <app-multi-bar-chart [title]="title" [options]="options">
         </app-multi-bar-chart>
     </div>

diff --git a/.../src/app/views/nishtha/pages/nishtha-program-detail/nishtha-program-detail.component.html b/.../src/app/views/nishtha/pages/nishtha-program-detail/nishtha-program-detail.component.html
@@ -1,7 +1,7 @@
 
 <div class="grid grid-cols-12">
     <div class="col-span-full" *ngIf="nishithaStateData" appFullScreen>
-        <app-filter-panel [filters]="filters" colSize="md:col-span-3 xs:col-span-6 xmd:col-span-4" (filtersUpdated)="filtersUpdated($event)"></app-filter-panel>
+        <app-filter-panel [filters]="filters" colSize="md:col-span-3 xs:col-span-12 xmd:col-span-4" (filtersUpdated)="filtersUpdated($event)"></app-filter-panel>
         <app-leaflet-map [mapData]="nishithaStateData"></app-leaflet-map>
         <ngx-spinner bdColor = "rgba(0, 0, 0, 0.8)" size = "medium" color = "#fff" type = "ball-scale-multiple" [fullScreen] = "true"><p style="color: white" > Loading... </p></ngx-spinner>
     </div>

diff --git a/...nt-end/src/app/views/nishtha/pages/nisitha-stacked-bar/nisitha-stacked-bar.component.html b/...nt-end/src/app/views/nishtha/pages/nisitha-stacked-bar/nisitha-stacked-bar.component.html
@@ -1,6 +1,6 @@
 <div class="grid grid-cols-12">
    <div class="col-span-full" appFullScreen>
-      <app-filter-panel [filters]="filters" colSize="md:col-span-3 xs:col-span-6 xmd:col-span-4" (filtersUpdated)="filtersUpdated($event)"></app-filter-panel>
+      <app-filter-panel [filters]="filters" colSize="md:col-span-3 xs:col-span-12 xmd:col-span-4" (filtersUpdated)="filtersUpdated($event)"></app-filter-panel>
       <div class="grid gap-4 grid-cols-12">
          <div class="xs:col-span-full xmd:col-span-6">
             <app-stacked-bar title="" [options]="enrollmentTargetChartOptions"></app-stacked-bar>

diff --git a/...nt-end/src/app/views/nishtha/pages/total-courses-table/total-courses-table.component.html b/...nt-end/src/app/views/nishtha/pages/total-courses-table/total-courses-table.component.html
@@ -1,6 +1,6 @@
 <div class="grid grid-cols-12">
     <div class="col-span-full" appFullScreen>
-        <app-filter-panel [filters]="filters" colSize="md:col-span-3 xs:col-span-6 xmd:col-span-4" (filtersUpdated)="filtersUpdated($event)"></app-filter-panel>
+        <app-filter-panel [filters]="filters" colSize="md:col-span-3 xs:col-span-12 xmd:col-span-4" (filtersUpdated)="filtersUpdated($event)"></app-filter-panel>
         <app-material-heat-chart-table [tableData]="tableData" class="nisithaTable"></app-material-heat-chart-table>
     </div>
 </div>
diff --git a/development/ui/front-end/src/app/views/quiz/quiz.component.html b/development/ui/front-end/src/app/views/quiz/quiz.component.html
@@ -21,7 +21,7 @@
                 <div class="col">
                     <div class="grid grid-cols-12">
                         <div class="col-span-full" appFullScreen>
-                            <app-filter-panel [filters]="filters" colSize="md:col-span-3 xs:col-span-9 xmd:col-span-4" (filtersUpdated)="filtersUpdated($event)"></app-filter-panel>
+                            <app-filter-panel [filters]="filters" colSize="md:col-span-3 xs:col-span-12 xmd:col-span-4" (filtersUpdated)="filtersUpdated($event)"></app-filter-panel>
                             <app-leaflet-map [mapData]="quizzesStateData"></app-leaflet-map>
                         </div>
                     </div>

diff --git a/...registry/pages/school-facilities-comparision/school-facilities-comparision.component.html b/...registry/pages/school-facilities-comparision/school-facilities-comparision.component.html
@@ -23,9 +23,9 @@
                     <app-material-button-group [buttons]="levels" (select)="onScatterSelectLevel($event)"></app-material-button-group>
                 </div>
                 <div class="md:col-span-6 xmd:col-span-9 xs:col-span-12">
-                    <app-filter-panel [filters]="axisFilters" colSize="col-span-6" [resetOthers]="false" (filtersUpdated)="scatterAxisFiltersUpdated($event)"></app-filter-panel>
+                    <app-filter-panel [filters]="axisFilters" colSize="col-span-12" [resetOthers]="false" (filtersUpdated)="scatterAxisFiltersUpdated($event)"></app-filter-panel>
                 </div>
-                <div class="md:col-span-3 xmd:col-span-6 xs:col-span-6">
+                <div class="md:col-span-3 xmd:col-span-6 xs:col-span-12">
                     <app-filter-panel [filters]="filters" colSize="col-span-12" [resetOthers]="false" (filtersUpdated)="scatterFiltersUpdated($event)"></app-filter-panel>
                 </div>
             </div>