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

Ahmed Bassell
Aug 31, 2018 · 5 min read

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.

Ahmed Bassell

Written by

Software Engineer @instabug, (This account only reflects my own opinions).

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade