Remy's Blog. Dev Insights

When you need to represent percentages as whole numbers using   Math.round() ,  you end up with a total of 101%.  Value Percentage Rounded A 650 49.88% 50 B 230 17.65% 18 C 150 11.51% 12 D 273 20.95% 21 1303 100.00% 101 As you can see above the total in the rounded column is 101. Let's solve this problem using a well known algorithm. Step 1: We begin to sum the given values for calculating the percentages. While iterating, we copy all the properties to a destination object ( NVPPercentage ) which will be pushed to an array ( temp ) . Step 2: The insertion sort, is an efficient algorithm for sorting a small number of elements. We start for each element to calculate the percentage ( P ) and the rounded percentage ( RP ). We sum also the rounded percentages (e.g. 101). We also compare in an inner loop the current element ( CE ) with the left ones for sorting purpo...

Today, I'd like to show you how you can create a reusable chart using canvas HTML element and Angular. We are going to develop the following component : As you can see we have two series of data. The component will be used as follow: <custom-chart [data]="datasets"></custom-chart> Let's first create the service to set up the canvas 2D context and draw our chart. Chart Service We are going to create a service to set up our environment and draw on the canvas.  The data format should be: Chart Component We access the canvas reference using the @ViewChild annotation. We will use @Input annotation for data binding. We can easily add more functionality to our component, but for demonstration purpose it's enough.