Geekly Articles each Day
📜 ⬆️ ⬇️

Angular c Clarity Design System by VmWare



Having worked with Angular Material 2 , at some point I came to the conclusion that the product is damp for a flight of fancy and some things (badge, vertical tabs, data-grid) are either implemented with minimal functionality, or In progress, planned .

In the evening, when I got home, I began to look for something that could offer Thimlide as an alternative for the next project. Then I noticed that angular.io got hold of the tab Resources . That was a couple of months ago.
There, among other pretty useful things, the Angular development team added a product from an equally well-known company whose development I respect and with puppy delight is always happy to pick it up - VmWare. The guys made a very, very decent product - Clarity .

I decided for myself to write an article on the topic of Clarity, but I just didn’t want to write a review, I decided to do something like a starter kit in case anyone needed to quickly create an admin panel. Also, Highcharts , Angular Flex-layout and the ngx-translate i18n library will be actively used .
')
For impatient: github , demo

Govnokoda a lot, and if you meet like this, please understand, forgive and write a comment, I will be very grateful :)

I will not delve into the installation process of Node.js, angular-cli and put instructions under the spoiler, in case someone just started to get acquainted with Angular.

install node.js and angular / cli
We swing from here node.js and we put.
Run the command to install angular-cli:

npm install -g @angular/cli

after which we generate our project:

 ng new ngClarity


So, we already have Hello World, then we need to prepare the environment, install the packages and configure our angular:

Installation


Put the package of icons:

 npm install clarity-icons --save

Polyfill package:

 npm install @webcomponents/custom-elements@1.0.0 --save

Add all the file installed in the config .angular-cli.json

  "styles": [ "styles.css", "../node_modules/clarity-icons/clarity-icons.min.css" ], "scripts": [ "../node_modules/@webcomponents/custom-elements/custom-elements.min.js", "../node_modules/clarity-icons/clarity-icons.min.js" ],

We supplement our Angular with the module clarity-ui:

 npm install clarity-ui --save

We climb back into the config file .angular-cli.json and write the path to the clarity-ui styles:

  "styles": [ "styles.css", "../node_modules/clarity-icons/clarity-icons.min.css", "../node_modules/clarity-ui/clarity-ui.min.css" ],

Put the clarity-angular package:

 npm install clarity-angular --save

Add import to our app.module.ts:

 import { ClarityModule } from "clarity-angular";

And declare in imports:

 @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, ClarityModule ], providers: [], bootstrap: [AppComponent] })

For those who are used to access only official documentation, there is a link .

i18n


Next, I think it is worthwhile to describe the installation and configuration of the i18n module (the ngx-translate library is used), there is nothing unusual here, but nevertheless we will pay attention, maybe someone will need it:

Put the libu:

 npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save

we go to our app.module.ts and we supplement it with imports:

 import {TranslateModule, TranslateLoader} from '@ngx-translate/core'; import {TranslateHttpLoader} from '@ngx-translate/http-loader';

implementation of http trading post, which will load our translations files:

 export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http, './assets/i18n/', '.json'); }

create two files, en.json and ru.json in the / assets / i18n / directory

and put an end to this matter by adding a module to our @NgModule imports:

 TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } })

As a result, we have the initial configuration of ngx-translate, and now we can declare our TranslationService in app.component.ts, which will load json files from the / assets / i18n directory

 import {Component, OnInit} from '@angular/core'; import {TranslateService} from "@ngx-translate/core"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit{ constructor(public translate: TranslateService){} ngOnInit(){ this.translate.addLangs(["en", "ru"]); this.translate.setDefaultLang('en'); let browserLang = this.translate.getBrowserLang(); if (browserLang.match( /en|ru/ )) { this.translate.use( browserLang ); } else { this.translate.use( 'en' ); } } }

Routing


We create routing service for our project. In the / app directory, create the routing.module.ts file and configure our AppRoutingModule:

 import {NgModule}from '@angular/core'; import {Routes, RouterModule}from '@angular/router'; const appRoutes: Routes = [ { path: '', redirectTo: '/', pathMatch: 'full', } ]; @NgModule({ imports: [ RouterModule.forRoot( appRoutes ) ], exports: [ RouterModule ] }) export class AppRoutingModule {}

to initialize, in app.module.ts, add the import of AppRoutingModule to our @NgModule.

Components


Create three empty so far components: DashboardComponent, SettingsComponent and PageNotFoundComponent. Inside the app, create the pages directory, and from under it run:

 ng generate component dashboard ng generate component settings ng generate component pageNotFound

our angular / cli will create three directories with the specified names, create within the directories everything necessary for the component and update the app.module.
Sometimes angular / cli may incorrectly rezolvit paths to files, and in case of errors, you need to double-check imports and file paths in the app.module.

Next, go to our routing.module.ts and edit routes for new components:

 const appRoutes: Routes = [ { path: 'dashboard', component: DashboardComponent, }, { path: 'settings', component: SettingsComponent, }, { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ];

We build the framework of our application. Go to app.component.html and start:

 <clr-main-container> <clr-header class="header-3"> <div class="branding"> <a href="..." class="nav-link"> <span class="title">ngClarity</span> </a> </div> <div class="header-actions"> <clr-dropdown> <button class="nav-icon" clrDropdownTrigger> <clr-icon shape="world"></clr-icon> <clr-icon shape="caret down"></clr-icon> </button> <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right"> <a *ngFor="let lang of translate.getLangs()" (click)="translate.use(lang)" clrDropdownItem>{{lang}}</a> </clr-dropdown-menu> </clr-dropdown> <clr-dropdown> <button class="nav-icon" clrDropdownTrigger> <clr-icon shape="user"></clr-icon> <clr-icon shape="caret down"></clr-icon> </button> <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right"> <a href="..." clrDropdownItem>{{ 'profile' | translate }}</a> <a href="..." clrDropdownItem>{{ 'logout' | translate }}</a> </clr-dropdown-menu> </clr-dropdown> </div> </clr-header> <div class="alert alert-app-level"></div> <div class="content-container"> <div class="content-area"> <router-outlet></router-outlet> </div> <clr-vertical-nav [clrVerticalNavCollapsible]="true" [clr-nav-level]="1"> <a clrVerticalNavLink routerLink="/dashboard" routerLinkActive="active" class="nav-link"> <clr-icon clrVerticalNavIcon shape="dashboard"></clr-icon>{{ 'dashboard' | translate }} </a> <a clrVerticalNavLink routerLink="/settings" routerLinkActive="active" class="nav-link"> <clr-icon clrVerticalNavIcon shape="cog"></clr-icon>{{ 'settings' | translate }} </a> </clr-vertical-nav> </div> </clr-main-container>

We will not dwell on each of the directives; there is well-written documentation for this. The frame is less ready, then you can already work with components.

Highcharts


We install the work of comrade cebor , who created the Angulyarov directive for Highcharts: angular-highcharts

 npm install --save angular-highcharts highcharts

Next, go to our app.module, add the import and declare our module, adding it to the imports:

 import { ChartModule } from 'angular-highcharts'; @NgModule({ imports: [ ChartModule ] })

Flex Layout


Now let's take flex-layout :

 npm install @angular/flex-layout --save

and traditionally in app.module.ts

 import { FlexLayoutModule } from '@angular/flex-layout'; @NgModule({ imports: [ FlexLayoutModule ] })

Now, go to our dashboard.component.ts declare imports:

 import * as Highcharts from 'highcharts'; import * as HichartsExporting from 'highcharts/modules/exporting'; import * as Hicharts3d from 'highcharts/highcharts-3d.js'; HichartsExporting(Highcharts);//  exporting Hicharts3d(Highcharts);//  3d

In dashboard.component.html draw our blocks, where we place the graphics:

 <div style="padding: 1em;" fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxLayoutWrap fxLayoutGap="1rem" fxLayoutAlign="center"> <div class="card" fxLayout="column" fxLayout.xs="column" fxFlex="49" fxLayout.sm="column" style="padding: 5px;"> <div class="card-block" id="chart1"></div> </div> <div class="card" fxLayout="column" fxLayout.xs="column" fxFlex="49" fxLayout.sm="column" style="padding: 5px;"> <div class="card-block" id="chart2"></div> </div> </div>

and the code for the component itself, in dashboard.component.ts:

 import { Component, OnInit } from '@angular/core'; import * as Highcharts from 'highcharts'; import * as HichartsExporting from 'highcharts/modules/exporting'; import * as Hicharts3d from 'highcharts/highcharts-3d.js'; HichartsExporting(Highcharts); Hicharts3d(Highcharts); @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.css'] }) export class DashboardComponent implements OnInit { constructor() { } ngOnInit() { Highcharts.chart('chart1', { chart: { type: 'column' }, title: { text: 'Schedules work progress' }, credits: { enabled: false }, xAxis: { categories: ['line 1', 'line 2', 'line 3', 'line 4'], labels: { skew3d: true, style: { fontSize: '16px' } } }, yAxis: { allowDecimals: false, min: 0, title: { text: 'Total count', skew3d: true } }, tooltip: { headerFormat: '<b>{point.key}</b><br>', pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>' }, plotOptions: { column: { stacking: 'normal', depth: 40, dataLabels: { enabled: true, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' } } }, series: [ {name: 'Left', data: [10, 58, 23, 8]}, {name: 'Done', data: [27, 98, 44, 65]}, {name: 'Alert', data: [8, 4, 65, 78]} ] }); Highcharts.chart('chart2', { chart: { type: 'pie', options3d: { enabled: true, alpha: 45, beta: 0 } }, title: { text: 'Browser market shares at a specific website, 2014' }, credits: { enabled: false }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', depth: 35, dataLabels: { enabled: true, format: '{point.name}' } } }, series: [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }] }); } }

Now you can see what happened: demo

This completes the first part. The second part of the article will analyze the Clarity components in more detail and implement them in a project, the source code of which is here: github

Source: https://habr.com/ru/post/339294/

More articles:


All Articles