October 26, 2017 at 12:11

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 imagination and some things (badge, vertical tabs, data-grid) are either implemented with minimal functionality, or In progress, planned .

    In the evening, having arrived home, he began to look for something that could offer timlida as an alternative for the next project. Then I noticed that angular.io got hold of the Resources tab . That was a couple of months ago.
    There, among other quite useful things, the Angular development team added a product from an equally well-known company, whose development I respect and with puppy enthusiasm I am always happy to poke around once again - VmWare. The guys made a very, very worthy product -Clarity .

    I decided for myself to write an article on the topic of Clarity, but I didn’t want to write a review, I decided to do something like a starter-kit in case someone needs to quickly make an admin panel. Also, Highcharts , Angular Flex-layout and i18n library ngx-translate will be actively used .

    For the impatient: github , demo

    There is a lot of govokode, and if you encounter this, please understand, forgive and write a comment, I will be very grateful :)

    I will not go into the installation process Node.js, angular-cli and put the instructions under the spoiler, in case someone just started getting to know Angular.

    install node.js and angular / cli
    Download node.js from here and install.
    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


    We put a package of icons:

    npm install clarity-icons --save

    Polyfill Package:

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

    Add everything installed in the config file .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 complement our Angular module with clarity-ui:

    npm install clarity-ui --save

    We climb back into the .angular-cli.json file in the config and add 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"
      ],

    We put the package clarity-angular:

    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 accustomed to refer only to the official documentation, there is a link .

    i18n


    Next, I think it is worth describing the installation and configuration of the i18n module (the ngx-translate library is used ), nothing unusual here, but still pay attention, maybe someone will need it

    :

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

    go to our app.module.ts and add 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 the imports of our @NgModule:

    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 a 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


    We create three currently empty components: DashboardComponent, SettingsComponent and PageNotFoundComponent. Inside the app, create the pages directory, and from 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 everything necessary for the component inside the directories, and update app.module.
    Sometimes angular / cli may incorrectly resolve file paths, and in case of errors, you need to double-check the imports and file paths in app.module.

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

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

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

    ngClarity
    {{lang}}{{ 'profile' | translate }}{{ 'logout' | translate }}
    {{ 'dashboard' | translate }}
      {{ 'settings' | translate }}

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

    Highcharts


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

    npm install --save angular-highcharts highcharts

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

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

    Flex layout


    Now let's take a look at flex-layout :

    npm install @angular/flex-layout --save

    and by tradition, in app.module.ts

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

    Now, go to our dashboard.component.ts we declare the 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 we draw our blocks where we will place the charts:


    and the code of 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: '{point.key}
    ',
        pointFormat: '{series.name}: {point.y} ({point.percentage:.0f}%)
    '
      },
      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}: {point.percentage:.1f}%'
      },
      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 it will be possible to see what eventually happened: demo

    On this, the first part ends. The second part of the article will analyze Clarity components in more detail and implement them in a project whose sources are here: github
    Tags:

    Also popular now: