AvocadoVenom

import { Injectable } from '@angular/core';

export interface Item {
  name: string;
  value: number;
  abs: number;
}

@Injectable({
  providedIn: 'root'

AvocadoVenom

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Item, DataService } from '../data.service';
import * as d3 from 'd3';

@Component({
  selector: 'app-pie-chart',
  template: `<div id="pie"><svg></svg></div>`,
  encapsulation: ViewEncapsulation.None
})
export class PieChartComponent implements OnInit {

AvocadoVenom

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import * as d3 from 'd3';
import { Item, DataService } from '../data.service';

@Component({
  selector: 'app-bar-chart',
  template: `<div id="bar"><svg></svg></div>`,
  encapsulation: ViewEncapsulation.None
})
export class BarChartComponent implements OnInit {

AvocadoVenom

  ngOnInit() {
    // ...
    window.addEventListener('resize', this.resize.bind(this));
  }
  
  private resize() {
    this.setSVGDimensions();
    this.setAxisScales();
    this.repaint();
  }

AvocadoVenom

private tooltip: any;  private total: number;

constructor(private service: DataService) {
  // ...
  this.total = this.dataSource.reduce((sum, it) => sum += it.abs, 0);
}

ngOnInit() {
  // ...
  this.tooltip = d3.select('#pie') // or d3.select('#bar')

AvocadoVenom

private labels: any; // Labels

private draw() {
  // ...
  this.drawLabels();
}

private repaint() {
  // ...
  this.drawLabels();

AvocadoVenom

// Labels
private labelValue: any;  private labelName: any;
private labelPercent: any;  private labelTotal: any;

private initSvg() {
  // ...
  this.labelTotal = this.mainContainer.append('text')
    .attr('text-anchor', 'middle').style('font-size', '6em')
    .attr('dy', '.5em').text(this.total);
  this.labelName = this.mainContainer.append('text')

AvocadoVenom

private arcLabel: any;
private texts: any;

private draw() {
  // ...
  this.drawLabels();
}

private setArcs() {
  // ...

AvocadoVenom

/**
 * Keep the @param nb first values of the list @param values.
 * Apply the @param reduceFn function to "concatenate" the remaining values.
 * @param values List of values/objects.
 * @param nb Final number of values in the list.
 * @param orderingFn Function to use to order the list.
 * @param reduceFn Reduction function to group exceeding items.
 */
export function summarizeList<T>(values: T[], nb: number = 10, orderingFn: (a: T, b: T) => number, reduceFn: (list: T[]) => T) {
  // From nb+ values, we trigger the grouping

AvocadoVenom

/**
 * Unflatten an array of objects.
 * 
 * @param arr An array of objects.
 * @param keyFn Key property accessor function.
 * @param parentFn Parent property accessor function.
 * @example unflatten<FlatTreeNode>(x, i => i.id, i => i.parentId);
 */
private unflatten<T>(arr: T[], keyFn: (item: T) => number, parentFn: (item: T) => number): T[] {
  const tree = [],