From deb3f83865595acad61aea09081e1209dbbfb4cf Mon Sep 17 00:00:00 2001 From: Adwaith Rao Date: Fri, 4 Mar 2022 23:58:40 +0530 Subject: [PATCH] Set up barebones dashboard --- src/app/dashboard/graph/graph.component.html | 17 +- src/app/dashboard/graph/graph.component.scss | 29 +- src/app/dashboard/graph/graph.component.ts | 262 +++++++++++-------- 3 files changed, 180 insertions(+), 128 deletions(-) diff --git a/src/app/dashboard/graph/graph.component.html b/src/app/dashboard/graph/graph.component.html index 9456a41..b8a6e85 100644 --- a/src/app/dashboard/graph/graph.component.html +++ b/src/app/dashboard/graph/graph.component.html @@ -4,24 +4,23 @@
-
-
-
-
+
-
-
+
+

No of states

+
{{ noOfStates }}
-
+
-
-
+
+

No of districts

+
{{ noOfDistricts }}
\ No newline at end of file diff --git a/src/app/dashboard/graph/graph.component.scss b/src/app/dashboard/graph/graph.component.scss index 566493f..acaed45 100644 --- a/src/app/dashboard/graph/graph.component.scss +++ b/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; } } \ No newline at end of file diff --git a/src/app/dashboard/graph/graph.component.ts b/src/app/dashboard/graph/graph.component.ts index 9b2d7cb..9554ae5 100644 --- a/src/app/dashboard/graph/graph.component.ts +++ b/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 = []; + + 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 = new Set(); + const districtSet: Set = 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); + }); } }