RxJS Explained with Vega Chart visualization

npm install vega
declare var vega: any; 
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.scss']
})
export class ChartComponent implements OnInit {

view: View;
@Input() set data(values: ChartDataModel[]){
if (!this.view) {
return;
}
this.view.remove('table', this.view.data('table')).run(); this.view.insert('table', values).run();
}
constructor(private http: HttpClient) { } ngOnInit() {
this.http.get('../assets/chart-config.json')
.subscribe(s => this.vegaInit(s)); }
public vegaInit(spec: any): any {
this.view = new vega.View(vega.parse(spec))
.renderer('svg')
.initialize('#chart')
.width(400)
.height(200)
.hover()
.run();
}
}
this.subscription$ = fromEvent(document, 'click').subscribe(e => console.log('E:', e));
buttons = [ 
{id: 0, title: 'A'}, {id: 1, title: 'B'},
{id: 2, title: 'C'}, {id: 3, title: 'D'},
{id: 4, title: 'E'}, {id: 5, title: 'F'},
{id: 6, title: 'G'}, {id: 7, title: 'H'} ];
ngOnInit() { 
this.subscription$ = fromEvent(document, 'click')
.pipe( filter(event => this.isBtnIncrementEvent(event)))
.subscribe(e => console.log('E:', e)); }
private isBtnIncrementEvent(event: Event): boolean {
const idClicked = event.target['id'];
return idClicked && idClicked >= 0 && idClicked <= 7;
}
ngOnInit() { 
this.subscription$ = fromEvent(document, 'click')
.pipe(
filter(event => this.isBtnIncrementEvent(event)),
debounceTime(100))
.subscribe(e => console.log('E: ', e)); }
chartData$: Subject<ChartDataModel[]> = new Subject([ 
{category: 'A', count: 0}, {category: 'B', count: 0},
{category: 'C', count: 0}, {category: 'D', count: 0},
{category: 'E', count: 0}, {category: 'F', count: 0},
{category: 'G', count: 0}, {category: 'H', count: 0}
]);
ngOnInit() { 
this.subscription$ = fromEvent(document, 'click')
.pipe(
filter(event => this.isBtnIncrementEvent(event)), debounceTime(100),
map((event: Event) => event.target['id']) )
.subscribe(e => console.log('E: ', e)); }
ngOnInit() { 
this.subscription$ = fromEvent(document, 'click')
.pipe(
filter(event => this.isBtnIncrementEvent(event)),
debounceTime(100),
map((event: Event) => event.target['id']),
tap((index: number) => this.updateChartData(index)))
.subscribe(e => console.log('Result: ', e));
}
private updateChartData(index: number): void {
const values = this.chartData$.value;
const newCount = { ...values[index], count: +values[index].count}; values[index] = newCount; this.chartData$.next([...values]);
}

--

--

--

Senior Front End Software Engineer focused on Angular. Passionate about learning new skills and sharing my knowledge. Blog agdev.tech in progress.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Upgrade React Native Push Notification in SDK — WonderPush

Implement a free no-effort database for your next side-project.

How to: have your token on mobile in minutes

Prototype Inheritance in Javascript

Convert your Reactjs code into Nextjs

Let’s Build a MERN Stack E-Commerce Web App

JS | Trapping Rain Water | Dynamic Programming | O(n)

React Recipes: Common Redux reducer’s mutation CRUD

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
AG Dev

AG Dev

Senior Front End Software Engineer focused on Angular. Passionate about learning new skills and sharing my knowledge. Blog agdev.tech in progress.

More from Medium

Angular Service — #2

Azure AD Authentication Implementation in Angular

Internationalize your Angular applications using ngx-translate

API integration in Angular App with Proxy