Building A Dashboard With Angular - Part2

More Dashborad

The material dashboad project used for me as inspiration, thus i will implemented 3 widgets using Chartist library:
Completed Tasks Chart

import {Component, Input, AfterViewInit} from '@angular/core';
declare const Chartist:any;
@Component({
  selector: 'completed-tasks',
  template: `
       <mat-card>
        <mat-card-title>
          Completed Tasks
        </mat-card-title>
        <mat-card-content>
            <div class="ct-chart" id="completedTasksChart"></div>
        </mat-card-content>
    
      </mat-card>
  `,
})
export default class CompletedTasksComponent implements  AfterViewInit {
  @Input() data :any; 
 
  ngAfterViewInit(){           
        const  optionsCompletedTasksChart = {
            lineSmooth: Chartist.Interpolation.cardinal({
                tension: 0
            }),
            low: 0,
            high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
            chartPadding: { top: 0, right: 0, bottom: 0, left: 0}
        }
                
        var completedTasksChart = new Chartist.Line('#completedTasksChart', this.data, optionsCompletedTasksChart);
        
  }
}

Daily Sales Chart

import {Component, Input, AfterViewInit} from '@angular/core';
declare const Chartist:any;
@Component({
  selector: 'completed-tasks',
  template: `
       <mat-card>
        <mat-card-title>
          Email Subscriptions
        </mat-card-title>
        <mat-card-content>
            <div class="ct-chart" id="dailySalesChart"></div>
        </mat-card-content>

      </mat-card>
  `,
})
export default class EmailSubscriptionsComponent implements  AfterViewInit {
  @Input() data :any;   

  ngAfterViewInit(){           
        const optionsDailySalesChart = {
            lineSmooth: Chartist.Interpolation.cardinal({
                tension: 0
            }),
            low: 0,
            high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
            chartPadding: { top: 0, right: 0, bottom: 0, left: 0},
        }        
        
        var dailySalesChart = new Chartist.Line('#dailySalesChart', this.data, optionsDailySalesChart);        
  }
}

and
Email Subscriptions Chart

import {Component, Input, AfterViewInit} from '@angular/core';
declare const Chartist:any;
@Component({
  selector: 'completed-tasks',
  template: `
       <mat-card>
        <mat-card-title>
          Email Subscriptions
        </mat-card-title>
        <mat-card-content>
            <div class="ct-chart" id="emailsSubscriptionChart"></div>
        </mat-card-content>

      </mat-card>
  `,
})
export default class EmailSubscriptionsComponent implements  AfterViewInit {
  @Input() data :any;
   
  ngAfterViewInit(){
        const  optionsEmailsSubscriptionChart = {
            axisX: {
                showGrid: false
            },
            low: 0,
            high: 1000,
            chartPadding: { top: 0, right: 5, bottom: 0, left: 0}
        }
        
        
        var emailsSubscriptionChart = new Chartist.Bar('#emailsSubscriptionChart', this.data, optionsEmailsSubscriptionChart);    
  }
}

All the components getting their data through data input
Please see my first stackblitz embedd here: