The new release of the Ngx-Simple-Charts library can now show donut charts in Angular 14 projects. The donut feature has its own entry point to include the code only in projects that use it.

Example

The AngularPortfolioMgr project uses the donut charts to show the sector weights of a portfolio. It need to be added to the portfolios.module.ts.

It is used in the portfolio-sector.component.html:

<div class="my-container">
   ...
   <div *ngIf="!chartsLoading" class="chart-container">
	<sc-donut-chart [chartSlices]="chartSlices"></sc-donut-chart>
   </div>
</div>

The ‘<sc-donut-chart [chartSlices]=”chartSlices”></sc-donut-chart>’ component is provided by the library. To show the donut chart. The ‘chartSlices’ are defined in the chart-slices.ts: 

export interface ChartSlices {
  title: string;
  from: string;
  yScaleWidth: number;
  xScaleHeight: number;
  chartSlices: ChartSlice[];
}

export interface ChartSlice {
  value: number;
  name: string;
  color?: string;
}

The ‘title’ of the ChartSlices sets the chart title and the ‘chartSlice’ objects define the slices that are displayed with their names and colors. The values are added and the slices calculated according to the sum. The ‘color’ property is optional and need to be in a Css color format. If the ‘color’ property is missing or empty a color is generated.

The ChartSlices object is created in the portfolio-sectors.component.ts:

@Component({
  selector: 'app-portfolio-sectors',
  templateUrl: './portfolio-sectors.component.html',
  styleUrls: ['./portfolio-sectors.component.scss']
})
export class PortfolioSectorsComponent implements OnInit {
  @Input()
  selPortfolio: Portfolio;
  chartSlices: ChartSlices = {title: '', from: '', xScaleHeight: 0,   
    yScaleWidth: 0, chartSlices: []};
  chartsLoading = true;
  
  constructor() { }

  ngOnInit(): void {
    this.chartSlices.title = this.selPortfolio.name;
    this.chartSlices.chartSlices = [];
    const valueMap = this.selPortfolio.portfolioElements
      .map(pe => ({name: pe.name, sector: pe.sector, 
         value: (pe.lastClose * pe.weight)} as CalcPortfolioElement))
      .reduce((myMap, cpe) => {
	 let myValue = myMap.get(cpe.sector);
	 myValue = !myValue ? 0 : myValue;
	 myMap.set(cpe.sector, myValue + cpe.value);
	 return myMap;  
      },new Map<string,number>());
    valueMap.forEach((myValue, myKey) => this.chartSlices.chartSlices
       .push({name: myKey, value: myValue} as ChartSlice));
    this.chartsLoading = false;
  }
}

The ‘chartSlices’ property is initialized on component creation. The method ‘ngOnInit’ is called after the properties are initialized. The ‘title’ and the ‘chartSlices’ properties are set.

The property ‘selPortfolio’ has the portfolioElements property that includes the ‘name’, ‘sector’, ‘lastClose’ and ‘weight’ properties for the sector weights. They are mapped in the CalcPortfolioElement interface with the element value is calculated.

The the portfolio elements are calculated and stored in a Map of sector name and sector value. The Map is returned and the entries are put in ‘ChartSlice’ objects and added to the ‘chartSlices’ array. The library uses the them to create the donut chart.

Conclusion

The multiple entry support of Angular helps splitting the library code between the modules of the project to keep the modules small. The used entry points need to be included in the module files. Angular with its Cli takes care of the rest.