Uncertain about what title to give this post, as I'm still figuring out the goal. Working on a simple ngx chart (bar graph) to show the number of accounts in each step, sourced from Firestore. It's logging account numbers correctly, but struggling with passing the corresponding step. Data format needs to be an array of name, value pairs. Here's my code - any assistance is welcome.
import { Account } from './../../../models/account.model';
import { ChartService } from './../../../services/chart.service';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { map } from 'rxjs/operator/map';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/combineAll';
@Component({
selector: 'app-steps-chart',
templateUrl: './steps-chart.component.html',
styleUrls: ['./steps-chart.component.css']
})
export class StepsChartComponent implements OnInit {
steps = ['A', 'PA', 'PS', 'CI', 'CN'];
steps$;
chartData = [];
count = 0;
colorScheme = {
domain: ['#03a9f4', '#009688', '#f29706', '#673ab7', '#f44336']
};
// options
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Steps';
showYAxisLabel = true;
yAxisLabel = 'Accounts';
constructor(private chartService: ChartService) { }
ngOnInit() {
this.steps$ = Observable.from(this.steps);
this.chartService.getAccounts().switchMap(() => {
const accounts$ = this.steps$.map(step => {
return this.chartService.getAccountsByStep(step);
});
const combined$ = accounts$.combineAll();
return combined$;
}).map(accounts => {
console.log(accounts);
return accounts.map(a => {
return {
'name': step, // need to figure out how to get step
'value': a.length
};
});
})
.subscribe(data => {
console.log(data);
});
}
}