<!-- ============================================================== --> <!-- Start Page Content --> <!-- ============================================================== --> <div class="row"> <div class="col-12"> <!-- You can find this in the dashboard-component --> <app-project-counter></app-project-counter> </div> </div> <!-- ============================================================== --> <!-- chart and stats --> <!-- ============================================================== --> <div class="row"> <!-- chart component --> <div class="col-lg-8"> <div class="card"> <div class="card-body"> <div class="d-flex flex-wrap m-b-30"> <div> <h4 class="card-title">Monthly Earning</h4> </div> <div class="ml-auto"> <ul class="list-inline"> <li> <h6 class="text-muted text-success"> <i class="fa fa-circle font-10 m-r-10 "></i>Sales</h6> </li> <li> <h6 class="text-muted text-info"> <i class="fa fa-circle font-10 m-r-10"></i>Earning (k)</h6> </li> </ul> </div> </div> <div style="height:350px;"> <canvas baseChart [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions" [colors]="lineChartColors" [legend]="lineChartLegend" [chartType]="lineChartType"> </canvas> </div> </div> </div> </div> <!-- other chart component --> <div class="col-lg-4"> <div class="card card-inverse card-info"> <div class="card-body"> <div class="d-flex"> <div class="m-r-20 align-self-center"> <h1 class="text-white"> <i class="ti-light-bulb"></i> </h1> </div> <div> <h3 class="card-title">Sales Analytics</h3> <h6 class="card-subtitle">March 2017</h6> </div> </div> <div class="row"> <div class="col-6 align-self-center"> <h2 class="font-light text-white"> <sup> <small> <i class="ti-arrow-up"></i> </small> </sup>35487</h2> </div> <div class="col-6 p-t-10 p-b-20 text-right"> <div style="height: 84px; width: 100px"> <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend" [chartType]="barChartType"> </canvas> </div> </div> </div> </div> </div> <div class="card card-inverse card-success"> <div class="card-body"> <div class="d-flex"> <div class="m-r-20 align-self-center"> <h1 class="text-white"> <i class="ti-pie-chart"></i> </h1> </div> <div> <h3 class="card-title">Bandwidth usage</h3> <h6 class="card-subtitle">March 2017</h6> </div> </div> <div class="row"> <div class="col-6 align-self-center"> <h2 class="font-light text-white">50 GB</h2> </div> <div class="col- ml-auto p-r-20"> <canvas baseChart width="120px" height="120px" [data]="pieChartData" [labels]="pieChartLabels" [chartType]="pieChartType" [legend]="lineChartLegend" [colors]="[{backgroundColor: ['#1cadbf', '#1f5f67', '#ffffff'], borderColor:['#26dad2', '#26dad2', '#26dad2'] }]"> </canvas> </div> </div> </div> </div> </div> </div> <!-- ============================================================== --> <!-- Report and Comments --> <!-- ============================================================== --> <!-- Row --> <div class="row"> <div class="col-lg-6"> <!-- You can find this in the dashboard-component --> <app-earning-report></app-earning-report> </div> <div class="col-lg-6"> <!-- You can find this in the dashboard-component --> <app-recent-comment></app-recent-comment> </div> </div> <!-- Row --> <!-- ============================================================== --> <!-- Carousel widgets --> <!-- You can find this in the dashboard-component --> <!-- ============================================================== --> <social-slider></social-slider> <!-- ============================================================== --> <!-- Activity widgets --> <!-- You can find this in the dashboard-component --> <!-- ============================================================== --> <div class="row"> <!-- Column --> <div class="col-lg-8 col-xlg-9"> <app-activity-timeline></app-activity-timeline> </div> <div class="col-lg-4 col-xlg-3"> <app-profile-box></app-profile-box> </div> </div>