Hi Friends,
This is a sequel to my previous post about bringing charts into Angular 5 apps with ngx-charts. In this post let’s see how to build a cool ratings chart that updates realtime (Firestore duh!).
I assume you already have a copy of the (previous repo’s) code. If not kindly grab it from here.
Let’s begin.
Code for this post is available – here.
Now that we have a basic understanding of how to bring in charts in our app, let’s move on and try to create a simple real-time rating system based on the entries we stored in our firestore collection.
Open up app.component.ts file and modify it as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!--The content below is only a placeholder and can be replaced.--> <mat-form-field> <mat-select [(value)]="survey.country"> <mat-option value="India">India</mat-option> <mat-option value="USA">USA</mat-option> <mat-option value="Germany">Germany</mat-option> <mat-option value="Brazil">Brazil</mat-option> </mat-select> </mat-form-field> <mat-form-field> <mat-select [(value)]="survey.gender"> <mat-option value="Male">Male</mat-option> <mat-option value="Female">Female</mat-option> </mat-select> </mat-form-field> <mat-radio-group [(ngModel)]="survey.rating" name="rating"> <mat-radio-button value="5">5</mat-radio-button> <mat-radio-button value="4">4</mat-radio-button> <mat-radio-button value="3">3</mat-radio-button> <mat-radio-button value="2">2</mat-radio-button> <mat-radio-button value="1">1</mat-radio-button> </mat-radio-group> <button mat-raised-button color="primary" (click)="saveEntry()">Save Entry</button> <ngx-charts-bar-horizontal [view]="view" [scheme]="colorScheme" [results]="ratingData" [xAxis]="true" [yAxis]="true" [legend]="false" [showXAxisLabel]="true" [showYAxisLabel]="true" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" (select)="onSelect($event)"> </ngx-charts-bar-horizontal> <h3> Rating - {{actualRating}} </h3> |
This will introduce a horizontal bar chart in your app now (in place of the pie chart).
Now open up app.component.ts and modify it as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
import { Component, OnInit } from '@angular/core'; import { VoteService } from './vote.service'; import {NgxChartsModule} from '@swimlane/ngx-charts'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { survey = { country: '', gender: '', rating: 0 } chartdata: boolean = false; ratingsCount = []; ratingData = []; totalCount = 0; actualRating; xAxisLabel = "Number of entries"; yAxisLabel = "Rating" //Chart view: any[] = [500, 300]; colorScheme = { domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'] }; showLabels = true; constructor(private vote: VoteService) {} saveEntry() { this.vote.saveEntry(this.survey); } ngOnInit() { this.vote.getAllEntries().subscribe((results) => { this.chartdata = true; this.processData(results); }) } onSelect(event) { console.log(event); } processData(entries) { this.ratingData = []; this.ratingsCount = []; this.totalCount = 0; entries.forEach(element => { if (this.ratingsCount[element.rating]) this.ratingsCount[element.rating] += 1; else this.ratingsCount[element.rating] = 1; }); for (var key in this.ratingsCount) { let singleentry = { name: key + ' star', value: this.ratingsCount[key] } this.ratingData.push(singleentry); } for (var key in this.ratingsCount) { if (key == '5') { this.totalCount += this.ratingsCount[key] * 5; } else if (key == '4') { this.totalCount += this.ratingsCount[key] * 4; } else if (key == '3') { this.totalCount += this.ratingsCount[key] * 3; } else if (key == '2') { this.totalCount += this.ratingsCount[key] * 2; } else this.totalCount += this.ratingsCount[key]; } this.actualRating = (this.totalCount / entries.length).toFixed(2); } } |
Whoa., that’s a large amount of code right there.. Let’s break this down.
Saving the data and pulling it back is the same as the previous post. The only difference is that we are counting the number of ratings received under each entry (5 being the highest and 1 being the lowest) and storing it in a var called ratingsCount.
Now in the next step I am simply assigning weightage to each rating that I receive, for eg., 5 is the highest rating one can give in a vote, so I am assigning it 5 points , 4 points for a 4 rating and so on..
So now let’s assume a product has received 3 five-star votes, and two 3 star votes. So the rating would be
3 * 5 + 2 *3 = 21
Divide it by the total number of votes(5). So the rating would be 4.2
This is a simple average rating algorithm. This is what we have done in app.component.ts file. Now run the app. If everything goes fine, you would see something like this.
Now try adding some entries using the form above and you would see that your rating get’s changed real time along with the chart as well.
Cool.
As, I said in my previous post, charts can be used to represent a large amount of data in a concise way that could be understood with single glance. Hence the number of use cases is large. Here we have seen one such use-case.
Hope his helped you guys. If you found it helpful, kindly share it with someone and help them too.
Thanks for reading. Peace.. 
