I’ve built an angular pie-chart library in 8 hours

TL;DR: this is just my day blog of how i spent last few hours, it’s not a tutorial or technical post.
it’s 3:04 pm now and today is friday, i got some free time, humidity is high and it’s a bit hot out there.
feeling bored i decided to build a small project and put out there.
i’ve never built a library for Angular 2–6, so why not? i am going to build a simple pie chart library and publish it on npm.
let’s get started
opened my terminal, created a new folder, and then i used angular-cli to start a new angular project.
it generates some files for me and creates a package.json with some dependencies, and just starts to download/install the dependencies (using yarn).
i like yarn, so i don’t mind ng-cli taking over and just installing it as default npm client.
my internet connection is so slow so it takes so much time installing, actually i started writing this blog while waiting..
oh it’s finally over, it’s 3:14 pm now.
ng-cli is so easy that you just type 2 commands to get your started code running, now typing ‘ng serve’ and every thing works fine.

now, let’s make our great awesome piechart component, first generate empty component by this little command

now let’s include it in the view, so we’ll have to use an editor for that, personally i use atom so
we remove app.component.html (the one that contains the page up there) and just put our new generated component to show up

now it shows up in the browser with the component placeholder, awesome!

it’s 3:28 pm now
now it’s time to think about our component inputs
this is a pie chart so we’ll need data to draw, let’s break data down
each data row will have label, value, color
so it’s either 3 inputs for labels array, values array, colors array
or 1 input array of objects each contains it’s own data.
i prefer the second one.
so let’s add that input




Drawing Time
now that we have the input, all we have to do now is to draw it.
i decided to draw it more like a donut chart, so it’ll be hollow in the middle
let’s do that, it’s 4:07 pm now btw
okay i have 2 options, to draw it with css or svgs, and i don’t know drawing in svgs very well but my mind kept telling me to learn svgs and do it.
so i’ll go with svgs, sounds like i’ll do some basic math here..

so after 5 hours of nasty mathy geometry and bunch of sins and cosines i finally did the logic.
basicly i calculate each data item percentage out of total number.
let’s assume we’re drawing UEFA Champions League winners pie chart and we have 3 data items: Liverpool, real madrid and bayern, i started calclating each club percentage, then each club angle out of the 360 degree circle.
then calculate the x,y coordinates for the start and end of arcs making those angles using the angles and the origin poing.
then drawing those points using svgs arcs.
anyway that’s it after i finished

i added some legends there to make it more insightfull
it’s 10:08 pm i guess i’ll just finish some logic and add more options as inputs and that’s it
ng-packagr
Cool, i’ve found a npm package called ng-packagr, i think it’s used to help you package your component and export it to the world!
i’ll try that
oh it turned out i should have put my component in a new module
i’ve created a new module for it now to wrap it
then i created a entry point file to just export that module, actually it just has one line:
export * from './src/app/modules/ngx-piechart/ngx-piechart.module';then i eddited my package.json like in their docs https://github.com/ng-packagr/ng-packagr
Testing the package
it’s 11:11 now, i am finished packaging the piechart component into tar file
now i’ll create a new angular app and try to install locally and use the module and component.
here is the new app app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { AppComponent } from './app.component';
import { NgxPiechartModule } from 'ngx-piechart';@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxPiechartModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
then i used the component in the html file here
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to Test App
</h1>
</div><ngx-piechart
[data]="pieChartData"
[radius]="180"
[margin]="30">
</ngx-piechart>
and of course provided that data in the component, and it actually works now

Publish
i know the world is dying now to see my package, so i’ll just grant your wishes now :D
- logged in npm
- then just publish
npm publish dist
and here we go, my package is out there.
try it form here and tell me what you think https://www.npmjs.com/package/ngx-piechart
and here is my github repo, if you wanna check my code: https://github.com/ahmedBassell/ngx-piechart
i think it still needs more work, but it’s very good output for few hours.
finally thank you for reading all of this, please forgive my poor writing skills, i think it was a productive day, i guess i’ll end it with a late night run.
