Remove widgets module as unused
This commit is contained in:
Tom Bloor
parent
eee8f8e949
commit
ee7b81ad3c
4 changed files with 0 additions and 1395 deletions
|
|
@ -1,20 +0,0 @@
|
||||||
import { NgModule } from '@angular/core';
|
|
||||||
import { Routes, RouterModule } from '@angular/router';
|
|
||||||
|
|
||||||
import { WidgetsComponent } from './widgets.component';
|
|
||||||
|
|
||||||
const routes: Routes = [
|
|
||||||
{
|
|
||||||
path: '',
|
|
||||||
component: WidgetsComponent,
|
|
||||||
data: {
|
|
||||||
title: 'Widgets'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
@NgModule({
|
|
||||||
imports: [RouterModule.forChild(routes)],
|
|
||||||
exports: [RouterModule]
|
|
||||||
})
|
|
||||||
export class WidgetsRoutingModule {}
|
|
||||||
|
|
@ -1,975 +0,0 @@
|
||||||
<div class="animated fadeIn">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card card-inverse card-primary">
|
|
||||||
<div class="card-block pb-0">
|
|
||||||
<div class="btn-group float-right" dropdown>
|
|
||||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
|
|
||||||
<i class="icon-settings"></i>
|
|
||||||
</button>
|
|
||||||
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
|
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h4 class="mb-0">9.823</h4>
|
|
||||||
<p>Members online</p>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper px-3" style="height:70px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="lineChart1Data"
|
|
||||||
[labels]="lineChart1Labels"
|
|
||||||
[options]="lineChart1Options"
|
|
||||||
[colors]="lineChart1Colours"
|
|
||||||
[legend]="lineChart1Legend"
|
|
||||||
[chartType]="lineChart1Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card card-inverse card-info">
|
|
||||||
<div class="card-block pb-0">
|
|
||||||
<button type="button" class="btn btn-transparent p-0 float-right">
|
|
||||||
<i class="icon-location-pin"></i>
|
|
||||||
</button>
|
|
||||||
<h4 class="mb-0">9.823</h4>
|
|
||||||
<p>Members online</p>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper px-3" style="height:70px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="lineChart2Data"
|
|
||||||
[labels]="lineChart2Labels"
|
|
||||||
[options]="lineChart2Options"
|
|
||||||
[colors]="lineChart2Colours"
|
|
||||||
[legend]="lineChart2Legend"
|
|
||||||
[chartType]="lineChart2Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card card-inverse card-warning">
|
|
||||||
<div class="card-block pb-0">
|
|
||||||
<div class="btn-group float-right">
|
|
||||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<i class="icon-settings"></i>
|
|
||||||
</button>
|
|
||||||
<div class="dropdown-menu dropdown-menu-right">
|
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h4 class="mb-0">9.823</h4>
|
|
||||||
<p>Members online</p>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper" style="height:70px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="lineChart3Data"
|
|
||||||
[labels]="lineChart3Labels"
|
|
||||||
[options]="lineChart3Options"
|
|
||||||
[colors]="lineChart3Colours"
|
|
||||||
[legend]="lineChart3Legend"
|
|
||||||
[chartType]="lineChart3Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card card-inverse card-danger">
|
|
||||||
<div class="card-block pb-0">
|
|
||||||
<div class="btn-group float-right" dropdown>
|
|
||||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
|
|
||||||
<i class="icon-settings"></i>
|
|
||||||
</button>
|
|
||||||
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
|
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h4 class="mb-0">9.823</h4>
|
|
||||||
<p>Members online</p>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper px-3" style="height:70px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="barChart1Data"
|
|
||||||
[labels]="barChart1Labels"
|
|
||||||
[options]="barChart1Options"
|
|
||||||
[colors]="barChart1Colours"
|
|
||||||
[legend]="barChart1Legend"
|
|
||||||
[chartType]="barChart1Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
</div><!--/.row-->
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-header card-header-inverse card-header-primary">
|
|
||||||
<div class="font-weight-bold">
|
|
||||||
<span>Money spent this week</span>
|
|
||||||
<span class="float-right">$1.890,65</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>
|
|
||||||
<small>Today 6:43 AM</small>
|
|
||||||
</span>
|
|
||||||
<span class="float-right">
|
|
||||||
<small>+432,50 (15,78%)</small>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper" style="height:38px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="lineChart4Data"
|
|
||||||
[labels]="lineChart4Labels"
|
|
||||||
[options]="lineChart4Options"
|
|
||||||
[colors]="lineChart4Colours"
|
|
||||||
[legend]="lineChart4Legend"
|
|
||||||
[chartType]="lineChart4Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper" style="height:38px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="barChart2Data"
|
|
||||||
[labels]="barChart2Labels"
|
|
||||||
[options]="barChart2Options"
|
|
||||||
[colors]="barChart2Colours"
|
|
||||||
[legend]="barChart2Legend"
|
|
||||||
[chartType]="barChart2Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-header card-header-inverse card-header-danger">
|
|
||||||
<div class="font-weight-bold">
|
|
||||||
<span>Money spent last week</span>
|
|
||||||
<span class="float-right">$1.890,65</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>
|
|
||||||
<small>Today 6:43 AM</small>
|
|
||||||
</span>
|
|
||||||
<span class="float-right">
|
|
||||||
<small>+432,50 (15,78%)</small>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper" style="height:38px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="lineChart5Data"
|
|
||||||
[labels]="lineChart5Labels"
|
|
||||||
[options]="lineChart5Options"
|
|
||||||
[colors]="lineChart4Colours"
|
|
||||||
[legend]="lineChart5Legend"
|
|
||||||
[chartType]="lineChart5Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper" style="height:38px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="barChart3Data"
|
|
||||||
[labels]="barChart3Labels"
|
|
||||||
[options]="barChart3Options"
|
|
||||||
[colors]="barChart2Colours"
|
|
||||||
[legend]="barChart3Legend"
|
|
||||||
[chartType]="barChart3Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-header card-header-inverse card-header-success">
|
|
||||||
<div class="font-weight-bold">
|
|
||||||
<span>SALE</span>
|
|
||||||
<span class="float-right">$1.890,65</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>
|
|
||||||
<small>Today 6:43 AM</small>
|
|
||||||
</span>
|
|
||||||
<span class="float-right">
|
|
||||||
<small>+432,50 (15,78%)</small>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper" style="height:38px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="lineChart4Data"
|
|
||||||
[labels]="lineChart4Labels"
|
|
||||||
[options]="lineChart4Options"
|
|
||||||
[colors]="lineChart4Colours"
|
|
||||||
[legend]="lineChart4Legend"
|
|
||||||
[chartType]="lineChart4Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper" style="height:38px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="barChart2Data"
|
|
||||||
[labels]="barChart2Labels"
|
|
||||||
[options]="barChart2Options"
|
|
||||||
[colors]="barChart2Colours"
|
|
||||||
[legend]="barChart2Legend"
|
|
||||||
[chartType]="barChart2Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-header card-header-inverse card-header-warning">
|
|
||||||
<div class="font-weight-bold">
|
|
||||||
<span>SALE</span>
|
|
||||||
<span class="float-right">$1.890,65</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>
|
|
||||||
<small>Today 6:43 AM</small>
|
|
||||||
</span>
|
|
||||||
<span class="float-right">
|
|
||||||
<small>+432,50 (15,78%)</small>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper" style="height:38px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="lineChart4Data"
|
|
||||||
[labels]="lineChart4Labels"
|
|
||||||
[options]="lineChart4Options"
|
|
||||||
[colors]="lineChart4Colours"
|
|
||||||
[legend]="lineChart4Legend"
|
|
||||||
[chartType]="lineChart4Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper" style="height:38px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="barChart2Data"
|
|
||||||
[labels]="barChart2Labels"
|
|
||||||
[options]="barChart2Options"
|
|
||||||
[colors]="barChart2Colours"
|
|
||||||
[legend]="barChart2Legend"
|
|
||||||
[chartType]="barChart2Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h4 m-0">89.9%</div>
|
|
||||||
<div>Lorem ipsum...</div>
|
|
||||||
<div class="progress progress-xs my-3">
|
|
||||||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h4 m-0">12.124</div>
|
|
||||||
<div>Lorem ipsum...</div>
|
|
||||||
<div class="progress progress-xs my-3">
|
|
||||||
<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h4 m-0">$98.111,00</div>
|
|
||||||
<div>Lorem ipsum...</div>
|
|
||||||
<div class="progress progress-xs my-3">
|
|
||||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h4 m-0">2 TB</div>
|
|
||||||
<div>Lorem ipsum...</div>
|
|
||||||
<div class="progress progress-xs my-3">
|
|
||||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
</div><!--/.row-->
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card card-inverse card-primary">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h4 m-0">89.9%</div>
|
|
||||||
<div>Lorem ipsum...</div>
|
|
||||||
<div class="progress progress-white progress-xs my-3">
|
|
||||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card card-inverse card-warning">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h4 m-0">12.124</div>
|
|
||||||
<div>Lorem ipsum...</div>
|
|
||||||
<div class="progress progress-white progress-xs my-3">
|
|
||||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card card-inverse card-danger">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h4 m-0">$98.111,00</div>
|
|
||||||
<div>Lorem ipsum...</div>
|
|
||||||
<div class="progress progress-white progress-xs my-3">
|
|
||||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card card-inverse card-info">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h4 m-0">2 TB</div>
|
|
||||||
<div>Lorem ipsum...</div>
|
|
||||||
<div class="progress progress-white progress-xs my-3">
|
|
||||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
</div><!--/.row-->
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-2 col-sm-4">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block text-center">
|
|
||||||
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
|
|
||||||
<div class="h2 py-3">1,123</div>
|
|
||||||
<div class="chart-wrapper " style="height:40px;width:80px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="barChart3Data"
|
|
||||||
[labels]="barChart3Labels"
|
|
||||||
[options]="barChart3Options"
|
|
||||||
[colors]="barChart3Primary"
|
|
||||||
[legend]="barChart3Legend"
|
|
||||||
[chartType]="barChart3Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-md-2 col-sm-4">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block text-center">
|
|
||||||
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
|
|
||||||
<div class="h2 py-3">1,123</div>
|
|
||||||
<div class="chart-wrapper " style="height:40px;width:80px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="barChart3Data"
|
|
||||||
[labels]="barChart3Labels"
|
|
||||||
[options]="barChart3Options"
|
|
||||||
[colors]="barChart3Danger"
|
|
||||||
[legend]="barChart3Legend"
|
|
||||||
[chartType]="barChart3Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-md-2 col-sm-4">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block text-center">
|
|
||||||
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
|
|
||||||
<div class="h2 py-3">1,123</div>
|
|
||||||
<div class="chart-wrapper " style="height:40px;width:80px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="barChart3Data"
|
|
||||||
[labels]="barChart3Labels"
|
|
||||||
[options]="barChart3Options"
|
|
||||||
[colors]="barChart3Success"
|
|
||||||
[legend]="barChart3Legend"
|
|
||||||
[chartType]="barChart3Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-md-2 col-sm-4">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block text-center">
|
|
||||||
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
|
|
||||||
<div class="h2 py-3">1,123</div>
|
|
||||||
<div class="chart-wrapper " style="height:40px;width:80px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="lineChart5Data"
|
|
||||||
[labels]="lineChart5Labels"
|
|
||||||
[options]="lineChart5Options"
|
|
||||||
[colors]="lineChart5Info"
|
|
||||||
[legend]="lineChart5Legend"
|
|
||||||
[chartType]="lineChart5Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-md-2 col-sm-4">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block text-center">
|
|
||||||
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
|
|
||||||
<div class="h2 py-3">1,123</div>
|
|
||||||
<div class="chart-wrapper " style="height:40px;width:80px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="lineChart5Data"
|
|
||||||
[labels]="lineChart5Labels"
|
|
||||||
[options]="lineChart5Options"
|
|
||||||
[colors]="lineChart5Success"
|
|
||||||
[legend]="lineChart5Legend"
|
|
||||||
[chartType]="lineChart5Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-md-2 col-sm-4">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block text-center">
|
|
||||||
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
|
|
||||||
<div class="h2 py-3">1,123</div>
|
|
||||||
<div class="chart-wrapper " style="height:40px;width:80px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="lineChart5Data"
|
|
||||||
[labels]="lineChart5Labels"
|
|
||||||
[options]="lineChart5Options"
|
|
||||||
[colors]="lineChart5Warning"
|
|
||||||
[legend]="lineChart5Legend"
|
|
||||||
[chartType]="lineChart5Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
</div><!--/.row-->
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block p-3 clearfix">
|
|
||||||
<i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--/.col-->
|
|
||||||
<div class="col-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block p-3 clearfix">
|
|
||||||
<i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-info mb-0 mt-2">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--/.col-->
|
|
||||||
<div class="col-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block p-3 clearfix">
|
|
||||||
<i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--/.col-->
|
|
||||||
<div class="col-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block p-3 clearfix">
|
|
||||||
<i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--/.col-->
|
|
||||||
<div class="col-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block p-3 clearfix">
|
|
||||||
<i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer px-3 py-2">
|
|
||||||
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--/.col-->
|
|
||||||
<div class="col-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block p-3 clearfix">
|
|
||||||
<i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-info mb-0 mt-2">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer px-3 py-2">
|
|
||||||
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--/.col-->
|
|
||||||
<div class="col-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block p-3 clearfix">
|
|
||||||
<i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer px-3 py-2">
|
|
||||||
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--/.col-->
|
|
||||||
<div class="col-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block p-3 clearfix">
|
|
||||||
<i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer px-3 py-2">
|
|
||||||
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--/.col-->
|
|
||||||
</div>
|
|
||||||
<!--/.row-->
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block p-0 clearfix">
|
|
||||||
<i class="fa fa-cogs bg-primary p-4 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--/.col-->
|
|
||||||
<div class="col-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block p-0 clearfix">
|
|
||||||
<i class="fa fa-laptop bg-info p-4 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-info mb-0 pt-3">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--/.col-->
|
|
||||||
<div class="col-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block p-0 clearfix">
|
|
||||||
<i class="fa fa-moon-o bg-warning p-4 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--/.col-->
|
|
||||||
<div class="col-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block p-0 clearfix">
|
|
||||||
<i class="fa fa-bell bg-danger p-4 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-danger mb-0 pt-3">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--/.col-->
|
|
||||||
<div class="col-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block p-0 clearfix">
|
|
||||||
<i class="fa fa-cogs bg-primary p-4 px-5 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--/.col-->
|
|
||||||
<div class="col-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block p-0 clearfix">
|
|
||||||
<i class="fa fa-laptop bg-info p-4 px-5 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-info mb-0 pt-3">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--/.col-->
|
|
||||||
<div class="col-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block p-0 clearfix">
|
|
||||||
<i class="fa fa-moon-o bg-warning p-4 px-5 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--/.col-->
|
|
||||||
<div class="col-6 col-lg-3">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block p-0 clearfix">
|
|
||||||
<i class="fa fa-bell bg-danger p-4 px-5 font-2xl mr-3 float-left"></i>
|
|
||||||
<div class="h5 text-danger mb-0 pt-3">$1.999,50</div>
|
|
||||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--/.col-->
|
|
||||||
</div>
|
|
||||||
<!--/.row-->
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-3 col-sm-6">
|
|
||||||
<div class="social-box facebook">
|
|
||||||
<i class="fa fa-facebook"></i>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<strong>89k</strong>
|
|
||||||
<span>friends</span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>459</strong>
|
|
||||||
<span>feeds</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<!--/social-box-->
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-md-3 col-sm-6">
|
|
||||||
<div class="social-box twitter">
|
|
||||||
<i class="fa fa-twitter"></i>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<strong>973k</strong>
|
|
||||||
<span>followers</span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>1.792</strong>
|
|
||||||
<span>tweets</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<!--/social-box-->
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-md-3 col-sm-6">
|
|
||||||
<div class="social-box linkedin">
|
|
||||||
<i class="fa fa-linkedin"></i>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<strong>500+</strong>
|
|
||||||
<span>contacts</span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>292</strong>
|
|
||||||
<span>feeds</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<!--/social-box-->
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-md-3 col-sm-6">
|
|
||||||
<div class="social-box google-plus">
|
|
||||||
<i class="fa fa-google-plus"></i>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<strong>894</strong>
|
|
||||||
<span>followers</span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>92</strong>
|
|
||||||
<span>circles</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<!--/social-box-->
|
|
||||||
</div><!--/.col-->
|
|
||||||
</div><!--/.row-->
|
|
||||||
|
|
||||||
<div class="card-group">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-people"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">87.500</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Visitors</small>
|
|
||||||
<div class="progress progress-xs mt-3 mb-0">
|
|
||||||
<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-user-follow"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">385</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">New Clients</small>
|
|
||||||
<div class="progress progress-xs mt-3 mb-0">
|
|
||||||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-basket-loaded"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">1238</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Products sold</small>
|
|
||||||
<div class="progress progress-xs mt-3 mb-0">
|
|
||||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-pie-chart"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">28%</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
|
|
||||||
<div class="progress progress-xs mt-3 mb-0">
|
|
||||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-speedometer"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">5:34:11</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
|
|
||||||
<div class="progress progress-xs mt-3 mb-0">
|
|
||||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-6 col-md-2">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-people"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">87.500</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Visitors</small>
|
|
||||||
<div class="progress progress-xs mt-3 mb-0">
|
|
||||||
<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-md-2">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-user-follow"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">385</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">New Clients</small>
|
|
||||||
<div class="progress progress-xs mt-3 mb-0">
|
|
||||||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-md-2">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-basket-loaded"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">1238</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Products sold</small>
|
|
||||||
<div class="progress progress-xs mt-3 mb-0">
|
|
||||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-md-2">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-pie-chart"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">28%</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
|
|
||||||
<div class="progress progress-xs mt-3 mb-0">
|
|
||||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-md-2">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-speedometer"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">5:34:11</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
|
|
||||||
<div class="progress progress-xs mt-3 mb-0">
|
|
||||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-md-2">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-speech"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">972</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Comments</small>
|
|
||||||
<div class="progress progress-xs mt-3 mb-0">
|
|
||||||
<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
</div><!--/.row-->
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-6 col-md-2">
|
|
||||||
<div class="card card-inverse card-info">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-people"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">87.500</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Visitors</small>
|
|
||||||
<div class="progress progress-white progress-xs mt-3">
|
|
||||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-md-2">
|
|
||||||
<div class="card card-inverse card-success">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-user-follow"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">385</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">New Clients</small>
|
|
||||||
<div class="progress progress-white progress-xs mt-3">
|
|
||||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-md-2">
|
|
||||||
<div class="card card-inverse card-warning">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-basket-loaded"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">1238</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Products sold</small>
|
|
||||||
<div class="progress progress-white progress-xs mt-3">
|
|
||||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-md-2">
|
|
||||||
<div class="card card-inverse card-primary">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-pie-chart"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">28%</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
|
|
||||||
<div class="progress progress-white progress-xs mt-3">
|
|
||||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-md-2">
|
|
||||||
<div class="card card-inverse card-danger">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-speedometer"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">5:34:11</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
|
|
||||||
<div class="progress progress-white progress-xs mt-3">
|
|
||||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-6 col-md-2">
|
|
||||||
<div class="card card-inverse card-info">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h1 text-muted text-right mb-4">
|
|
||||||
<i class="icon-speech"></i>
|
|
||||||
</div>
|
|
||||||
<div class="h4 mb-0">972</div>
|
|
||||||
<small class="text-muted text-uppercase font-weight-bold">Comments</small>
|
|
||||||
<div class="progress progress-white progress-xs mt-3">
|
|
||||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
</div><!--/.row-->
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,386 +0,0 @@
|
||||||
import { Component } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
templateUrl: 'widgets.component.html'
|
|
||||||
})
|
|
||||||
export class WidgetsComponent {
|
|
||||||
|
|
||||||
constructor() { }
|
|
||||||
|
|
||||||
public brandPrimary = '#20a8d8';
|
|
||||||
public brandSuccess = '#4dbd74';
|
|
||||||
public brandInfo = '#63c2de';
|
|
||||||
public brandWarning = '#f8cb00';
|
|
||||||
public brandDanger = '#f86c6b';
|
|
||||||
|
|
||||||
// convert Hex to RGBA
|
|
||||||
// public convertHex(hex: string, opacity: number){
|
|
||||||
// hex = hex.replace('#','');
|
|
||||||
// let r = parseInt(hex.substring(0,2), 16);
|
|
||||||
// let g = parseInt(hex.substring(2,4), 16);
|
|
||||||
// let b = parseInt(hex.substring(4,6), 16);
|
|
||||||
//
|
|
||||||
// let rgba = 'rgba('+r+','+g+','+b+','+opacity/100+')';
|
|
||||||
// return rgba;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// events
|
|
||||||
public chartClicked(e: any): void {
|
|
||||||
console.log(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
public chartHovered(e: any): void {
|
|
||||||
console.log(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
// lineChart1
|
|
||||||
public lineChart1Data: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [80, 59, 84, 84, 51, 55, 40],
|
|
||||||
label: 'Series A'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart1Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
|
||||||
public lineChart1Options: any = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
gridLines: {
|
|
||||||
color: 'transparent',
|
|
||||||
zeroLineColor: 'transparent'
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
fontSize: 2,
|
|
||||||
fontColor: 'transparent',
|
|
||||||
}
|
|
||||||
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false,
|
|
||||||
ticks: {
|
|
||||||
display: false,
|
|
||||||
min: 40 - 5,
|
|
||||||
max: 84 + 5,
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
borderWidth: 1
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
radius: 4,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public lineChart1Colours: Array<any> = [
|
|
||||||
{ // grey
|
|
||||||
backgroundColor: this.brandPrimary,
|
|
||||||
borderColor: 'rgba(255,255,255,.55)'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart1Legend = false;
|
|
||||||
public lineChart1Type = 'line';
|
|
||||||
|
|
||||||
// lineChart2
|
|
||||||
public lineChart2Data: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [1, 18, 9, 17, 34, 22, 11],
|
|
||||||
label: 'Series A'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart2Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
|
||||||
public lineChart2Options: any = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
gridLines: {
|
|
||||||
color: 'transparent',
|
|
||||||
zeroLineColor: 'transparent'
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
fontSize: 2,
|
|
||||||
fontColor: 'transparent',
|
|
||||||
}
|
|
||||||
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false,
|
|
||||||
ticks: {
|
|
||||||
display: false,
|
|
||||||
min: 1 - 5,
|
|
||||||
max: 34 + 5,
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
tension: 0.00001,
|
|
||||||
borderWidth: 1
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
radius: 4,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public lineChart2Colours: Array<any> = [
|
|
||||||
{ // grey
|
|
||||||
backgroundColor: this.brandInfo,
|
|
||||||
borderColor: 'rgba(255,255,255,.55)'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart2Legend = false;
|
|
||||||
public lineChart2Type = 'line';
|
|
||||||
|
|
||||||
|
|
||||||
// lineChart3
|
|
||||||
public lineChart3Data: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [78, 81, 80, 45, 34, 12, 40],
|
|
||||||
label: 'Series A'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart3Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
|
||||||
public lineChart3Options: any = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
display: false
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
borderWidth: 2
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
radius: 0,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public lineChart3Colours: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: 'rgba(255,255,255,.2)',
|
|
||||||
borderColor: 'rgba(255,255,255,.55)',
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart3Legend = false;
|
|
||||||
public lineChart3Type = 'line';
|
|
||||||
|
|
||||||
|
|
||||||
// barChart1
|
|
||||||
public barChart1Data: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [78, 81, 80, 45, 34, 12, 40, 78, 81, 80, 45, 34, 12, 40, 12, 40],
|
|
||||||
label: 'Series A'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public barChart1Labels: Array<any> = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'];
|
|
||||||
public barChart1Options: any = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
display: false,
|
|
||||||
barPercentage: 0.6,
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public barChart1Colours: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: 'rgba(255,255,255,.3)',
|
|
||||||
borderWidth: 0
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public barChart1Legend = false;
|
|
||||||
public barChart1Type = 'bar';
|
|
||||||
|
|
||||||
// lineChart4
|
|
||||||
public lineChart4Data: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [4, 18, 9, 17, 80, 22, 11],
|
|
||||||
label: 'Series A'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart4Labels: Array<any> = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
|
||||||
public lineChart4Options: any = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
display: false,
|
|
||||||
points: false,
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false,
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
elements: { point: { radius: 0 } },
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public lineChart4Colours: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: 'rgba(255,255,255,.55)',
|
|
||||||
borderWidth: 2
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart4Legend = false;
|
|
||||||
public lineChart4Type = 'line';
|
|
||||||
|
|
||||||
|
|
||||||
// barChart2
|
|
||||||
public barChart2Data: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [4, 18, 9, 17, 34, 22, 11, 3, 15, 12, 18, 9],
|
|
||||||
label: 'Series A'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public barChart2Labels: Array<any> = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
|
||||||
public barChart2Options: any = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
display: false,
|
|
||||||
barPercentage: 0.6,
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false,
|
|
||||||
ticks: {
|
|
||||||
beginAtZero: true,
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public barChart2Colours: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: 'rgba(0,0,0,.2)',
|
|
||||||
borderWidth: 0
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public barChart2Legend = false;
|
|
||||||
public barChart2Type = 'bar';
|
|
||||||
|
|
||||||
|
|
||||||
// barChart3
|
|
||||||
public barChart3Data: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [4, 18, 9, 17, 34, 22, 11, 3, 15, 12, 18, 9],
|
|
||||||
label: 'Series A'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public barChart3Labels: Array<any> = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
||||||
public barChart3Options: any = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
display: false
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public barChart3Primary: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: this.brandPrimary,
|
|
||||||
borderColor: 'transparent',
|
|
||||||
borderWidth: 1
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public barChart3Danger: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: this.brandDanger,
|
|
||||||
borderColor: 'transparent',
|
|
||||||
borderWidth: 1
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public barChart3Success: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: this.brandSuccess,
|
|
||||||
borderColor: 'transparent',
|
|
||||||
borderWidth: 1
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public barChart3Legend = false;
|
|
||||||
public barChart3Type = 'bar';
|
|
||||||
|
|
||||||
|
|
||||||
// lineChart5
|
|
||||||
public lineChart5Data: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [4, 18, 9, 17, 34, 22, 11, 3, 15, 12, 18, 9],
|
|
||||||
label: 'Series A'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart5Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
|
||||||
public lineChart5Options: any = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
display: false,
|
|
||||||
points: false,
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false,
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
elements: { point: { radius: 0 } },
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public lineChart5Info: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: this.brandInfo,
|
|
||||||
borderWidth: 2
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart5Success: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: this.brandInfo,
|
|
||||||
borderWidth: 2
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart5Warning: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: this.brandWarning,
|
|
||||||
borderWidth: 2
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart5Legend = false;
|
|
||||||
public lineChart5Type = 'line';
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
import { NgModule } from '@angular/core';
|
|
||||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
|
||||||
|
|
||||||
import { WidgetsComponent } from './widgets.component';
|
|
||||||
import { WidgetsRoutingModule } from './widgets-routing.module';
|
|
||||||
|
|
||||||
@NgModule({
|
|
||||||
imports: [
|
|
||||||
WidgetsRoutingModule,
|
|
||||||
ChartsModule
|
|
||||||
],
|
|
||||||
declarations: [ WidgetsComponent ]
|
|
||||||
})
|
|
||||||
export class WidgetsModule { }
|
|
||||||
Reference in a new issue