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

Map report responsive changes and other UI fixes
Sharathnaik38 · Jul 26, 2022 · 1a5196b · 1a5196b
2 parents b444bdb + f1ae29f
commit 1a5196b
Show file tree

Hide file tree

Showing 8 changed files with 12,766 additions and 56 deletions.
diff --git a/development/ui/front-end/package-lock.json b/development/ui/front-end/package-lock.json
diff --git a/development/ui/front-end/src/app/core/components/header/header.component.html b/development/ui/front-end/src/app/core/components/header/header.component.html
@@ -30,14 +30,14 @@ <h1 class="font-medium leading-tight lg:text-4xl md:text-2xl xs:text-sm sm:text-
     </div>-->
     <div class="flex">
         <div class="headerSideWidth">
-            <div class="flex items-center bg-white">
+            <div class="flex items-center bg-white justify-around">
+                <img src="assets/images/MoE.png" class=" h-6 sm:h-9 left-logo" alt="MOI Logo" />
                 <img src="assets/images/ncert_logo_vector_modified.png" class="h-full logo" alt="NCERT Logo">
-            <img src="assets/images/MoE.png" class=" h-6 sm:h-9 left-logo" alt="MOI Logo" />
-
-
-            <a href="https://www.education.gov.in/en" class="hidden" target="_blank">
-                <img src="assets/images/moi_logo.png" class="mr-3 h-6 sm:h-9" alt="MOI Logo" />
-            </a>
+
+
+                <a href="https://www.education.gov.in/en" class="hidden" target="_blank">
+                    <img src="assets/images/moi_logo.png" class="mr-3 h-6 sm:h-9" alt="MOI Logo" />
+                </a>
 
             </div>
         </div>

diff --git a/development/ui/front-end/src/app/shared/components/charts/bar-chart/bar-chart.component.ts b/development/ui/front-end/src/app/shared/components/charts/bar-chart/bar-chart.component.ts
@@ -125,6 +125,9 @@ export class BarChartComponent implements OnInit, OnChanges {
       },
       series: [],
       tooltip: {
+        style: {
+          fontSize: '1rem'
+        },
         formatter: function(this: any) {
           return `${this.series.name}<br><span style="padding: 5px; background: ${this.color}"></span>${this.x}: ${new Intl.NumberFormat('en-IN').format(this.y)}`;
         }

diff --git a/...digital-learning/pages/qr-coverage-across-states/qr-coverage-across-states.component.html b/...digital-learning/pages/qr-coverage-across-states/qr-coverage-across-states.component.html
@@ -1,13 +1,13 @@
 <div class="grid grid-cols-12">
     <div class="col-span-full" appFullScreen>
         <div class="grid gap-2 grid-cols-12 bg-white">
-            <div class="xs:col-span-full xmd:col-span-5 md:col-span-5">
+            <div class="xs:col-span-full xmd:col-span-5 md:col-span-5 xl:col-span-4">
                 <app-leaflet-map [mapData]="ETBProgramStatsByLocation"></app-leaflet-map>
             </div>
-            <div class="xs:col-span-full xmd:col-span-7 md:col-span-7 justify-self-end">
+            <div class="xs:col-span-full xmd:col-span-7 md:col-span-7 xl:col-span-8">
                 <div class="grid gap-2 grid-cols-3">
                     <div class="col-span-2">
-                        <app-bar-chart title="" [options]="barChartOptions"></app-bar-chart>
+                        <app-bar-chart title="" [options]="barChartOptions" height="90vh"></app-bar-chart>
                     </div>
                     <div class="col-span-1">
                         <app-gauge-chart [options]="gaugeChartOptions"></app-gauge-chart>

diff --git a/...s/digital-learning/pages/qr-coverage-across-states/qr-coverage-across-states.component.ts b/...s/digital-learning/pages/qr-coverage-across-states/qr-coverage-across-states.component.ts
@@ -59,16 +59,16 @@ export class QRCoverageAcrossStatesComponent implements OnInit {
 
       this.barChartOptions = {
         chart: {
-          events: {
-            load: function(this: any) {
-              let categoryHeight = 16;
-              this.update({
-                chart: {
-                  height: categoryHeight * this.pointCount + (this.chartHeight - this.plotHeight)
-                }
-              })
-            }
-          }
+          // events: {
+          //   load: function(this: any) {
+          //     let categoryHeight = 20;
+          //     this.update({
+          //       chart: {
+          //         height: categoryHeight * this.pointCount + (this.chartHeight - this.plotHeight)
+          //       }
+          //     })
+          //   }
+          // }
         },
         xAxis: {
           categories: result.map((record: any) => {

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,5 +1,9 @@
-<app-filter-panel [filters]="filters" (filtersUpdated)="filtersUpdated($event)"></app-filter-panel>
-<app-bar-chart title="" [options]="barChartOptions"*ngIf="!isReportLoading; else reportLoader"></app-bar-chart>
+<div class="grid grid-cols-12" *ngIf="!isReportLoading; else reportLoader">
+    <div class="col-span-full" appFullScreen>
+        <app-filter-panel [filters]="filters" (filtersUpdated)="filtersUpdated($event)"></app-filter-panel>
+        <app-bar-chart title="" [options]="barChartOptions"></app-bar-chart>
+    </div>
+</div>
 <ng-template #reportLoader>
     <p class="p-2" *ngIf="isReportLoading">Loading...</p>
 </ng-template>
diff --git a/...onal-literacy-numeracy/pages/grade-wise-bar-and-pie/grade-wise-bar-and-pie.component.html b/...onal-literacy-numeracy/pages/grade-wise-bar-and-pie/grade-wise-bar-and-pie.component.html
@@ -1,5 +1,9 @@
-<app-filter-panel [filters]="filters" (filtersUpdated)="filtersUpdated($event)"></app-filter-panel>
-<app-bar-chart title="" [options]="barChartOptions"*ngIf="!isReportLoading; else reportLoader"></app-bar-chart>
+<div class="grid grid-cols-12" *ngIf="!isReportLoading; else reportLoader">
+    <div class="col-span-full" appFullScreen>
+        <app-filter-panel [filters]="filters" (filtersUpdated)="filtersUpdated($event)"></app-filter-panel>
+        <app-bar-chart title="" [options]="barChartOptions"></app-bar-chart>
+    </div>
+</div>
 <ng-template #reportLoader>
     <p class="p-2" *ngIf="isReportLoading">Loading...</p>
 </ng-template>
diff --git a/development/ui/front-end/src/assets/styles/_common.scss b/development/ui/front-end/src/assets/styles/_common.scss
@@ -25,3 +25,96 @@ body {
     overflow: hidden auto;
     background: white;
 }
+
+.leaflet-container {
+    font-size: 0.75rem;
+}
+
+// .highcharts-tooltip text, .highcharts-tooltip text tspan {
+//     font-size: 2rem;
+// }
+
+@media(min-width: 1920px) {
+    .leaflet-container {
+        font-size: 1rem;
+    }
+
+    .leaflet-control-container {
+        a {
+            .leaflet-control-zoom-in, .leaflet-control-zoom-out {
+                width: 40px;
+                height: 40px;
+                line-height: 40px;
+                font-size: 2rem;
+            }
+        }
+    }
+}
+
+@media(min-width: 2048px) {
+    .leaflet-container {
+        font-size: 1rem;
+    }
+
+    .leaflet-control-container {
+        a {
+            .leaflet-control-zoom-in, .leaflet-control-zoom-out {
+                width: 50px;
+                height: 50px;
+                line-height: 50px;
+                font-size: 2.25rem;
+            }
+        }
+    }
+}
+
+@media(min-width: 2560px) {
+    .leaflet-container {
+        font-size: 1.5rem;
+    }
+
+    .leaflet-control-container {
+        a {
+            &.leaflet-control-zoom-in, &.leaflet-control-zoom-out {
+                width: 60px;
+                height: 60px;
+                line-height: 60px;
+                font-size: 2.5rem;
+            }
+        }
+    }
+}
+
+@media(min-width: 3840px) {
+    .leaflet-container {
+        font-size: 2rem;
+    }
+
+    .leaflet-control-container {
+        a {
+            &.leaflet-control-zoom-in, &.leaflet-control-zoom-out {
+                width: 80px;
+                height: 80px;
+                line-height: 80px;
+                font-size: 3rem;
+            }
+        }
+    }
+}
+
+@media(min-width: 4096px) {
+    .leaflet-container {
+        font-size: 2.5rem;
+    }
+
+    .leaflet-control-container {
+        a {
+            &.leaflet-control-zoom-in, &.leaflet-control-zoom-out {
+                width: 100px;
+                height: 100px;
+                line-height: 100px;
+                font-size: 3.5rem;
+            }
+        }
+    }
+}