Merge branch 'master' of code.webtrigon.com:kj/cac-desktop

src/app/dashboard/graph/graph.component.html

@@ -4,24 +4,23 @@
     </header>
 
     <section class="analytics">
-        <div class="card">
-            <div echarts [options]="chartOption"></div>
-        </div>
 
         <div class="card">
-            <div echarts [options]="chartOption1"></div>
+            <div echarts [options]="hiiImplementationOptions" (chartInit)="onHiiStatusChartInit($event)"></div>
         </div>
 
-        <div class="card">
-            <div echarts [options]="options"></div>
+        <div class="card number">
+            <h2>No of states</h2>
+            <div class="numericCount">{{ noOfStates }}</div>
         </div>
 
         <div class="card">
-            <div echarts [options]="chartOption4"></div>
+            <div echarts [options]="partnerTypeOptions" (chartInit)="onPartnerChartInit($event)"></div>
         </div>
 
-        <div class="card">
-            <div echarts [options]="chartOption5"></div>
+        <div class="card number">
+            <h2>No of districts</h2>
+            <div class="numericCount">{{ noOfDistricts }}</div>
         </div>
     </section>
 </div>

src/app/dashboard/graph/graph.component.scss

@@ -1,6 +1,6 @@
 .analytics {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 2fr 1fr;
     grid-gap: 20px;
 }
 
@@ -8,11 +8,30 @@
     padding: 0;
     height: 300px;
 
-    &:nth-child(3) {
-        height: 450px;
+    &.number {
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        justify-content: space-around;
+    }
+
+    h2 {
+        color: var(--secondary-text);
+        font-size: 20px;
+        text-align: center;
+        flex-grow: 1;
+        margin: 25px 0;
     }
 
-    &:nth-child(4), &:nth-child(5) {
-        margin-top: -150px;
+    .numericCount {
+        font-size: 3rem;
+        font-weight: bold;
+        text-align: center;
+        flex-grow: 2;
+        color: var(--primary);
+    }
+
+    &:nth-child(3) {
+        height: 450px;
     }
 }

src/app/dashboard/graph/graph.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { EChartsOption } from 'echarts';
+import { EChartsOption, EChartsType } from 'echarts';
+import { PartnerProfileService } from 'src/app/services/partner-profile.service';
+import { UserData } from 'src/shared/structure/user';
 
 @Component({
     selector: 'app-graph',
@@ -10,98 +12,13 @@ export class GraphComponent implements OnInit {
     primaryColor = window.getComputedStyle(document.documentElement).getPropertyValue('--primary');
     secondaryColor = window.getComputedStyle(document.documentElement).getPropertyValue('--secondary');
 
-    chartOption: EChartsOption = {
-        title: {
-            text: 'Partners registered this week',
-            left: 'center',
-            top: 15,
-            textStyle: {
-                fontSize: 15,
-                color: window.getComputedStyle(document.documentElement).getPropertyValue('--secondary-text'),
-            },
-        },
-        height: 180,
-        offset: 0,
-        xAxis: {
-            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        },
-        yAxis: {
-            type: 'value',
-        },
-        series: [
-            {
-                data: [820, 932, 901, 934, 1290, 1330, 1320],
-                type: 'line',
-                color: this.primaryColor
-            },
-        ],
-    };
-
-    chartOption4: EChartsOption = {
-        title: {
-            text: 'Goals completed',
-            left: 'center',
-            top: 15,
-            textStyle: {
-                fontSize: 15,
-                color: window.getComputedStyle(document.documentElement).getPropertyValue('--secondary-text'),
-            },
-        },
-        height: 180,
-        offset: 0,
-        xAxis: {
-            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        },
-        yAxis: {
-            type: 'value',
-        },
-        series: [
-            {
-                data: [11, 200, 300, 50, 0, 60, 0],
-                type: 'line',
-                color: this.primaryColor
-            },
-        ],
-    };
+    noOfStates = 0;
+    noOfDistricts = 0;
 
-    chartOption5: EChartsOption = {
+    hiiImplementationOptions: EChartsOption = {
+        tooltip: {},
         title: {
-            text: 'Goals missed vs completed',
-            left: 'center',
-            top: 15,
-            textStyle: {
-                fontSize: 15,
-                color: window.getComputedStyle(document.documentElement).getPropertyValue('--secondary-text'),
-            },
-        },
-        height: 180,
-        offset: 0,
-        xAxis: {
-            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        },
-        yAxis: {
-            type: 'value',
-        },
-        series: [
-            {
-                data: [220, 0, 100, 20, 0, 290, 0],
-                type: 'line',
-                color: this.secondaryColor
-            },
-            {
-                data: [11, 200, 300, 50, 0, 60, 0],
-                type: 'line',
-                color: this.primaryColor
-            }
-        ],
-    };
-
-    chartOption1: EChartsOption = {
-        title: {
-            text: 'Relative registeration count',
+            text: 'Status of HII package implementation',
             left: 'center',
             top: 15,
             textStyle: {
@@ -134,9 +51,13 @@ export class GraphComponent implements OnInit {
         animationDelayUpdate: (idx) => idx * 5,
     };
 
-    options: EChartsOption = {
+    partnerChartInstance: EChartsType | undefined;
+    hiiStatusChartInstance: EChartsType | undefined;
+
+    partnerTypeOptions: EChartsOption = {
+        tooltip: {},
         title: {
-            text: 'Partners by category',
+            text: 'Type of VP organization',
             left: 'center',
             top: 20,
             textStyle: {
@@ -154,31 +75,144 @@ export class GraphComponent implements OnInit {
                 colorLightness: [0, 1],
             },
         },
-        series: [
-            {
-                name: 'Counters',
-                type: 'pie',
-                radius: '55%',
-                center: ['50%', '50%'],
-                color: this.primaryColor,
-                data: [
-                    { value: 335, name: 'C-1' },
-                    { value: 310, name: 'C-2' },
-                    { value: 274, name: 'C-3' },
-                    { value: 235, name: 'C-4' },
-                    { value: 400, name: 'C-5' },
-                ].sort((a, b) => a.value - b.value),
-                roseType: 'radius',
-                animationType: 'scale',
-                animationEasing: 'elasticOut',
-                animationDelay: () => Math.random() * 200,
-            },
-        ],
+        series: [],
     };
 
-    constructor() { }
+    usersData: Array<UserData> = [];
+
+    constructor(private partnerProfileService: PartnerProfileService) { }
+
+    onHiiStatusChartInit(ec: EChartsType) {
+        this.hiiStatusChartInstance = ec;
+    }
+
+    onPartnerChartInit(ec: EChartsType) {
+        this.partnerChartInstance = ec;
+    }
 
     ngOnInit(): void {
+        this.partnerProfileService.getPartnersData().then(usersData => {
+            this.usersData = usersData;
+
+            const communityCountsForPartner: {
+                [community: string]: number,
+            } = {};
+
+            const communityCountsForHiiImplementation: {
+                [community: string]: {
+                    implemented: number,
+                    notImplemented: number,
+                },
+            } = {};
+
+            const stateSet: Set<string> = new Set();
+            const districtSet: Set<string> = new Set();
+
+            for (const userData of usersData) {
+                const hasImplementationData = (userData.surveyCtoData.hiiData && userData.surveyCtoData.hiiData.length > 0) ||
+                    (userData.surveyCtoData.spData && userData.surveyCtoData.spData.length > 0) ||
+                    (userData.surveyCtoData.spSchemeData && userData.surveyCtoData.spSchemeData.length > 0)
+
+                const allStates = userData.detailedProfile.states.map(state => state.name).concat([userData.detailedProfile.state])
+                const allDistricts = userData.detailedProfile.districts.map(district => district.name).concat([userData.detailedProfile.district])
+
+                if (hasImplementationData) {
+                    for (const state of allStates) {
+                        stateSet.add(state);
+                    }
+
+                    for (const district of allDistricts) {
+                        districtSet.add(district);
+                    }
+                }
+
+                for (const community of userData.detailedProfile.communities) {
+                    if (!(community.name in communityCountsForPartner)) {
+                        communityCountsForPartner[community.name] = 1;
+                    } else {
+                        communityCountsForPartner[community.name] += 1;
+                    }
+
+                    if (!(community.name in communityCountsForHiiImplementation)) {
+                        communityCountsForHiiImplementation[community.name] = {
+                            implemented: 0,
+                            notImplemented: 0,
+                        };
+                    }
+
+                    if (hasImplementationData) {
+                        communityCountsForHiiImplementation[community.name].implemented += 1;
+                    } else {
+                        communityCountsForHiiImplementation[community.name].notImplemented += 1;
+                    }
+                }
+            }
+
+            this.noOfStates = stateSet.size;
+            this.noOfDistricts = districtSet.size;
+
+            const partnerChartData: Array<{ name: string, value: number }> = Object.keys(communityCountsForPartner).map(community => {
+                return {
+                    name: community,
+                    value: communityCountsForPartner[community],
+                };
+            }).sort((a, b) => b.value - a.value);
+
+            this.partnerTypeOptions.series = [
+                {
+                    name: 'Counts',
+                    type: 'pie',
+                    radius: '55%',
+                    center: ['50%', '50%'],
+                    color: this.primaryColor,
+                    data: partnerChartData,
+                    roseType: 'radius',
+                    animationType: 'scale',
+                    animationEasing: 'elasticOut',
+                    animationDelay: () => Math.random() * 200,
+                },
+            ];
+
+            this.partnerChartInstance?.setOption(this.partnerTypeOptions);
+
+            const communities = Object.keys(communityCountsForHiiImplementation);
+
+            const orgImplementedSeries: Array<{ name: string, value: number }> = communities.map(community => {
+                return {
+                    name: community,
+                    value: communityCountsForHiiImplementation[community].implemented,
+                };
+            });
+
+            const orgNotImplementedSeries: Array<{ name: string, value: number }> = communities.map(community => {
+                return {
+                    name: community,
+                    value: communityCountsForHiiImplementation[community].notImplemented,
+                };
+            });
+
+
+            this.hiiImplementationOptions.xAxis = {
+                type: 'category',
+                data: communities.map(community => ''),  // TODO Get rid of this hack
+                alignTicks: true,
+            };
+
+            this.hiiImplementationOptions.series = [
+                {
+                    data: orgImplementedSeries,
+                    type: 'bar',
+                    color: this.primaryColor
+                },
+                {
+                    data: orgNotImplementedSeries,
+                    type: 'bar',
+                    color: this.secondaryColor
+                },
+            ];
+
+            this.hiiStatusChartInstance?.setOption(this.hiiImplementationOptions);
+        });
     }
 
 }