How I Build A “Chart Library” For “Clarity Design System” Using Angular7 Directive
Angular7 is one of the hottest frameworks and VMware’s Clarity Design System made tremendous growth in just a few years. Using Angular7’s directive, Chart.js and keeping in mind that clarity doesn’t support inbuilt graphics library we tried to make one for the same. So let’s get started.
Let’s get started with the Installation process
Before you begin, make sure your development environment includes
Node.js® and an npm package manager.
Step 1: Install the Angular CLI
Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers…
Install the Angular CLI globally.
To install the CLI using
npm, open a terminal/console window and enter the following command:
npm install -g @angular/cli
Step 2: Create a workspace and initial application
You develop apps in the context of an Angular workspace.
To create a new workspace and initial starter app:
- Run the CLI command
ng newand provide the name “VMware clarity”, as shown here:
ng new VMware clarity
Step 3: Run the application
- Go to the workspace folder (VMware clarity).
- Launch the server by using the CLI command
ng serve, with the
cd VMware clarity
ng serve --open
ng serve the command launches the server, watches your files, and rebuilds the app as you make changes to those files.
Your app greets you with a message:
Step 4: Install Clarity Packages
npm install @clr/icons @clr/angular @clr/ui @firstname.lastname@example.org --save
Adding scripts and styles
If you are using the Angular CLI, you need to add
styles arrays and add the following:
... any other styles
... any existing scripts
Step 5: Installing Chart.js
Chart.js be installed via npm.
npm install chart.js --save
Creating a chart component
I have created a component chart by writing on the command line and enter the following command:
ng generate component chart
which results in four files: chart.component.html, chart.component.scss, chart.component.spec.ts, and chart.component.ts file.
Adding Chart Component and Clarity module in “app.module.ts” file in your application:
Import the ClarityModule into your Angular application’s module as well as Chart Component. Some features also depend upon the
BrowserAnimationsModuleso you should add it as well. Your application's main module might look like this:
Writing the code
I have imported Chart.js in chart.component.ts file and the directive we have used here is “clr-charts.” You can see the code below for chart.component.ts file and chart.component.html file :
In app.component.ts file:
Once the code is completed we can use “clr-charts” as a directive to display our charts using one directive that is “clr-charts” we can generate 6 types of charts including line chart, bar chart, pie chart, radar chart, doughnut chart, and polar area chart. In app.component.html file :
So, pretty much we are done with this, In app.component.html file, we can see we are using a single directive “clr-charts” to display all other types of graphs and that’s what makes it more easy and reliable. Save all the files and run on the command line: open a terminal/console window and enter the following command:
That’s it we are done with this, open your browser and head to http://localhost:4200/
We can see that various charts are displayed on localhost using clr-charts.
Pretty simple right :) In my next article I will be heading to the section how I generated a library for this project and published it on NPM as a package. Till that happy coding:)