Initial CoreUI commit

The initial new codebase from a template
This commit is contained in:
piratefinn 2017-04-27 15:29:31 +01:00
parent 39f90b1897
commit 6f084171dd
511 changed files with 27578 additions and 1649 deletions

View file

@ -0,0 +1,21 @@
import { NgModule } from '@angular/core';
import { Routes,
RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
const routes: Routes = [
{
path: '',
component: DashboardComponent,
data: {
title: 'Dashboard'
}
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DashboardRoutingModule {}

View file

@ -0,0 +1,940 @@
<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="card">
<div class="card-block">
<div class="row">
<div class="col-sm-5">
<h4 class="card-title mb-0">Traffic</h4>
<div class="small text-muted">November 2015</div>
</div><!--/.col-->
<div class="col-sm-7 hidden-sm-down">
<button type="button" class="btn btn-primary float-right"><i class="icon-cloud-download"></i></button>
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
<label class="btn btn-outline-secondary">
<input type="radio" name="options" id="option1"> Day
</label>
<label class="btn btn-outline-secondary active">
<input type="radio" name="options" id="option2" checked> Month
</label>
<label class="btn btn-outline-secondary">
<input type="radio" name="options" id="option3"> Year
</label>
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->
<div class="chart-wrapper" style="height:300px;margin-top:40px;">
<canvas baseChart class="chart"
[datasets]="mainChartData"
[labels]="mainChartLabels"
[options]="mainChartOptions"
[colors]="mainChartColours"
[legend]="mainChartLegend"
[chartType]="mainChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
<div class="card-footer">
<ul>
<li>
<div class="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong>
<div class="progress progress-xs mt-2">
<div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li class="hidden-sm-down">
<div class="text-muted">Unique</div>
<strong>24.093 Users (20%)</strong>
<div class="progress progress-xs mt-2">
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li>
<div class="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong>
<div class="progress progress-xs mt-2">
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li class="hidden-sm-down">
<div class="text-muted">New Users</div>
<strong>22.123 Users (80%)</strong>
<div class="progress progress-xs mt-2">
<div class="progress-bar bg-danger" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li class="hidden-sm-down">
<div class="text-muted">Bounce Rate</div>
<strong>40.15%</strong>
<div class="progress progress-xs mt-2">
<div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
</ul>
</div>
</div>
<!--/.card-->
<div class="row">
<div class="col-sm-6 col-lg-3">
<div class="social-box facebook">
<i class="fa fa-facebook"></i>
<div class="chart-wrapper">
<canvas baseChart class="chart"
[datasets]="socialChartData1"
[labels]="socialChartLabels"
[options]="socialChartOptions"
[colors]="socialChartColours"
[legend]="socialChartLegend"
[chartType]="socialChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
<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-sm-6 col-lg-3">
<div class="social-box twitter">
<i class="fa fa-twitter"></i>
<div class="chart-wrapper">
<canvas baseChart class="chart"
[datasets]="socialChartData2"
[labels]="socialChartLabels"
[options]="socialChartOptions"
[colors]="socialChartColours"
[legend]="socialChartLegend"
[chartType]="socialChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
<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-sm-6 col-lg-3">
<div class="social-box linkedin">
<i class="fa fa-linkedin"></i>
<div class="chart-wrapper">
<canvas baseChart class="chart"
[datasets]="socialChartData3"
[labels]="socialChartLabels"
[options]="socialChartOptions"
[colors]="socialChartColours"
[legend]="socialChartLegend"
[chartType]="socialChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
<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-sm-6 col-lg-3">
<div class="social-box google-plus">
<i class="fa fa-google-plus"></i>
<div class="chart-wrapper">
<canvas baseChart class="chart"
[datasets]="socialChartData4"
[labels]="socialChartLabels"
[options]="socialChartOptions"
[colors]="socialChartColours"
[legend]="socialChartLegend"
[chartType]="socialChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
<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="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
Traffic &amp; Sales
</div>
<div class="card-block">
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="row">
<div class="col-sm-6">
<div class="callout callout-info">
<small class="text-muted">New Clients</small>
<br>
<strong class="h4">9,123</strong>
<div class="chart-wrapper" style="width:100px;height:30px;">
<canvas baseChart class="chart"
[datasets]="sparklineChartData1"
[labels]="sparklineChartLabels"
[options]="sparklineChartOptions"
[colors]="sparklineChartInfo"
[legend]="sparklineChartLegend"
[chartType]="sparklineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6">
<div class="callout callout-danger">
<small class="text-muted">Recuring Clients</small>
<br>
<strong class="h4">22,643</strong>
<div class="chart-wrapper" style="width:100px;height:30px;">
<canvas baseChart class="chart"
[datasets]="sparklineChartData2"
[labels]="sparklineChartLabels"
[options]="sparklineChartOptions"
[colors]="sparklineChartDanger"
[legend]="sparklineChartLegend"
[chartType]="sparklineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->
<hr class="mt-0">
<ul class="horizontal-bars">
<li>
<div class="title">
Monday
</div>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-info" role="progressbar" style="width: 34%" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-xs">
<div class="progress-bar bg-danger" role="progressbar" style="width: 78%" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<div class="title">
Tuesday
</div>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-info" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-xs">
<div class="progress-bar bg-danger" role="progressbar" style="width: 94%" aria-valuenow="94" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<div class="title">
Wednesday
</div>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-info" role="progressbar" style="width: 12%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-xs">
<div class="progress-bar bg-danger" role="progressbar" style="width: 67%" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<div class="title">
Thursday
</div>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-info" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-xs">
<div class="progress-bar bg-danger" role="progressbar" style="width: 91%" aria-valuenow="91" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<div class="title">
Friday
</div>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-info" role="progressbar" style="width: 22%" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-xs">
<div class="progress-bar bg-danger" role="progressbar" style="width: 73%" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<div class="title">
Saturday
</div>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-info" role="progressbar" style="width: 53%" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-xs">
<div class="progress-bar bg-danger" role="progressbar" style="width: 82%" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<div class="title">
Sunday
</div>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-info" role="progressbar" style="width: 9%" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-xs">
<div class="progress-bar bg-danger" role="progressbar" style="width: 69%" aria-valuenow="69" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li class="legend">
<span class="badge badge-pill badge-info"></span> <small>New clients</small> &nbsp; <span class="badge badge-pill badge-danger"></span> <small>Recurring clients</small>
</li>
</ul>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="row">
<div class="col-sm-6">
<div class="callout callout-warning">
<small class="text-muted">Pageviews</small>
<br>
<strong class="h4">78,623</strong>
<div class="chart-wrapper" style="width:100px;height:30px;">
<canvas baseChart class="chart"
[datasets]="sparklineChartData1"
[labels]="sparklineChartLabels"
[options]="sparklineChartOptions"
[colors]="sparklineChartWarning"
[legend]="sparklineChartLegend"
[chartType]="sparklineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6">
<div class="callout callout-success">
<small class="text-muted">Organic</small>
<br>
<strong class="h4">49,123</strong>
<div class="chart-wrapper" style="width:100px;height:30px;">
<canvas baseChart class="chart"
[datasets]="sparklineChartData2"
[labels]="sparklineChartLabels"
[options]="sparklineChartOptions"
[colors]="sparklineChartSuccess"
[legend]="sparklineChartLegend"
[chartType]="sparklineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->
<hr class="mt-0">
<ul class="horizontal-bars type-2">
<li>
<i class="icon-user"></i>
<span class="title">Male</span>
<span class="value">43%</span>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-warning" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<i class="icon-user-female"></i>
<span class="title">Female</span>
<span class="value">37%</span>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-warning" role="progressbar" style="width: 37%" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<i class="icon-globe"></i>
<span class="title">Organic Search</span>
<span class="value">191,235 <span class="text-muted small">(56%)</span></span>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-success" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<i class="icon-social-facebook"></i>
<span class="title">Facebook</span>
<span class="value">51,223 <span class="text-muted small">(15%)</span></span>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<i class="icon-social-twitter"></i>
<span class="title">Twitter</span>
<span class="value">37,564 <span class="text-muted small">(11%)</span></span>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-success" role="progressbar" style="width: 11%" aria-valuenow="11" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<i class="icon-social-linkedin"></i>
<span class="title">LinkedIn</span>
<span class="value">27,319 <span class="text-muted small">(8%)</span></span>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-success" role="progressbar" style="width: 8%" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li class="divider text-center">
<button type="button" class="btn btn-sm btn-link text-muted" data-toggle="tooltip" data-placement="top" title="" data-original-title="show more"><i class="icon-options"></i></button>
</li>
</ul>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="row">
<div class="col-sm-6">
<div class="callout">
<small class="text-muted">CTR</small>
<br>
<strong class="h4">23%</strong>
<div class="chart-wrapper" style="width:100px;height:30px;">
<canvas baseChart class="chart"
[datasets]="sparklineChartData1"
[labels]="sparklineChartLabels"
[options]="sparklineChartOptions"
[colors]="sparklineChartDefault"
[legend]="sparklineChartLegend"
[chartType]="sparklineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6">
<div class="callout callout-primary">
<small class="text-muted">Bounce Rate</small>
<br>
<strong class="h4">5%</strong>
<div class="chart-wrapper" style="width:100px;height:30px;">
<canvas baseChart class="chart"
[datasets]="sparklineChartData2"
[labels]="sparklineChartLabels"
[options]="sparklineChartOptions"
[colors]="sparklineChartPrimary"
[legend]="sparklineChartLegend"
[chartType]="sparklineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->
<hr class="mt-0">
<ul class="icons-list">
<li>
<i class="icon-screen-desktop bg-primary"></i>
<div class="desc">
<div class="title">iMac 4k</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Sold this week</div>
<strong>1.924</strong>
</div>
<div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
</div>
</li>
<li>
<i class="icon-screen-smartphone bg-info"></i>
<div class="desc">
<div class="title">Samsung Galaxy Edge</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Sold this week</div>
<strong>1.224</strong>
</div>
<div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
</div>
</li>
<li>
<i class="icon-screen-smartphone bg-warning"></i>
<div class="desc">
<div class="title">iPhone 6S</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Sold this week</div>
<strong>1.163</strong>
</div>
<div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
</div>
</li>
<li>
<i class="icon-user bg-danger"></i>
<div class="desc">
<div class="title">Premium accounts</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Sold this week</div>
<strong>928</strong>
</div>
<div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
</div>
</li>
<li>
<i class="icon-social-spotify bg-success"></i>
<div class="desc">
<div class="title">Spotify Subscriptions</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Sold this week</div>
<strong>893</strong>
</div>
<div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
</div>
</li>
<li>
<i class="icon-cloud-download bg-danger"></i>
<div class="desc">
<div class="title">Ebook</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Downloads</div>
<strong>121.924</strong>
</div>
<div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
</div>
</li>
<li>
<i class="icon-camera bg-warning"></i>
<div class="desc">
<div class="title">Photos</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Uploaded</div>
<strong>12.125</strong>
</div>
<div class="actions">
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
</div>
</li>
<li class="divider text-center">
<button type="button" class="btn btn-sm btn-link text-muted" data-toggle="tooltip" data-placement="top" title="show more"><i class="icon-options"></i></button>
</li>
</ul>
</div><!--/.col-->
</div><!--/.row-->
<br>
<div class="table-responsive"></div>
<table class="table table-responsive table-hover table-outline mb-0">
<thead class="thead-default">
<tr>
<th class="text-center"><i class="icon-people"></i></th>
<th>User</th>
<th class="text-center">Country</th>
<th>Usage</th>
<th class="text-center">Payment Method</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
<div class="avatar">
<img src="assets/img/avatars/1.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/1.jpg">
<span class="avatar-status badge-success"></span>
</div>
</td>
<td>
<div>Yiorgos Avraamu</div>
<div class="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td class="text-center">
<img src="assets/img/flags/USA.png" alt="USA" style="height:24px;" src="assets/img/flags/USA.png">
</td>
<td>
<div class="clearfix">
<div class="float-left">
<strong>50%</strong>
</div>
<div class="float-right">
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<div class="progress progress-xs">
<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<i class="fa fa-cc-mastercard" style="font-size:24px"></i>
</td>
<td>
<div class="small text-muted">Last login</div>
<strong>10 sec ago</strong>
</td>
</tr>
<tr>
<td class="text-center">
<div class="avatar">
<img src="assets/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/2.jpg">
<span class="avatar-status badge-danger"></span>
</div>
</td>
<td>
<div>Avram Tarasios</div>
<div class="small text-muted">
<span>Recurring</span> | Registered: Jan 1, 2015
</div>
</td>
<td class="text-center">
<img src="assets/img/flags/Brazil.png" alt="Brazil" style="height:24px;" src="assets/img/flags/Brazil.png">
</td>
<td>
<div class="clearfix">
<div class="float-left">
<strong>10%</strong>
</div>
<div class="float-right">
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<div class="progress progress-xs">
<div class="progress-bar bg-info" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<i class="fa fa-cc-visa" style="font-size:24px"></i>
</td>
<td>
<div class="small text-muted">Last login</div>
<strong>5 minutes ago</strong>
</td>
</tr>
<tr>
<td class="text-center">
<div class="avatar">
<img src="assets/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/3.jpg">
<span class="avatar-status badge-warning"></span>
</div>
</td>
<td>
<div>Quintin Ed</div>
<div class="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td class="text-center">
<img src="assets/img/flags/India.png" alt="India" style="height:24px;" src="assets/img/flags/India.png">
</td>
<td>
<div class="clearfix">
<div class="float-left">
<strong>74%</strong>
</div>
<div class="float-right">
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<div class="progress progress-xs">
<div class="progress-bar bg-warning" role="progressbar" style="width: 74%" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<i class="fa fa-cc-stripe" style="font-size:24px"></i>
</td>
<td>
<div class="small text-muted">Last login</div>
<strong>1 hour ago</strong>
</td>
</tr>
<tr>
<td class="text-center">
<div class="avatar">
<img src="assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/4.jpg">
<span class="avatar-status badge-default"></span>
</div>
</td>
<td>
<div>Enéas Kwadwo</div>
<div class="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td class="text-center">
<img src="assets/img/flags/France.png" alt="France" style="height:24px;" src="assets/img/flags/France.png">
</td>
<td>
<div class="clearfix">
<div class="float-left">
<strong>98%</strong>
</div>
<div class="float-right">
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<div class="progress progress-xs">
<div class="progress-bar bg-danger" role="progressbar" style="width: 98%" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<i class="fa fa-paypal" style="font-size:24px"></i>
</td>
<td>
<div class="small text-muted">Last login</div>
<strong>Last month</strong>
</td>
</tr>
<tr>
<td class="text-center">
<div class="avatar">
<img src="assets/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/5.jpg">
<span class="avatar-status badge-success"></span>
</div>
</td>
<td>
<div>Agapetus Tadeáš</div>
<div class="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td class="text-center">
<img src="assets/img/flags/Spain.png" alt="Spain" style="height:24px;" src="assets/img/flags/Spain.png">
</td>
<td>
<div class="clearfix">
<div class="float-left">
<strong>22%</strong>
</div>
<div class="float-right">
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<div class="progress progress-xs">
<div class="progress-bar bg-info" role="progressbar" style="width: 22%" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<i class="fa fa-google-wallet" style="font-size:24px"></i>
</td>
<td>
<div class="small text-muted">Last login</div>
<strong>Last week</strong>
</td>
</tr>
<tr>
<td class="text-center">
<div class="avatar">
<img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/6.jpg">
<span class="avatar-status badge-danger"></span>
</div>
</td>
<td>
<div>Friderik Dávid</div>
<div class="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td class="text-center">
<img src="assets/img/flags/Poland.png" alt="Poland" style="height:24px;" src="assets/img/flags/Poland.png">
</td>
<td>
<div class="clearfix">
<div class="float-left">
<strong>43%</strong>
</div>
<div class="float-right">
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<div class="progress progress-xs">
<div class="progress-bar bg-success" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<i class="fa fa-cc-amex" style="font-size:24px"></i>
</td>
<td>
<div class="small text-muted">Last login</div>
<strong>Yesterday</strong>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->
</div>

View file

@ -0,0 +1,473 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
templateUrl: 'dashboard.component.html'
})
export class DashboardComponent implements OnInit {
// constructor( ) { }
public brandPrimary = '#20a8d8';
public brandSuccess = '#4dbd74';
public brandInfo = '#63c2de';
public brandWarning = '#f8cb00';
public brandDanger = '#f86c6b';
// dropdown buttons
public status: { isopen } = { isopen: false };
public toggleDropdown($event: MouseEvent): void {
$event.preventDefault();
$event.stopPropagation();
this.status.isopen = !this.status.isopen;
}
// convert Hex to RGBA
public convertHex(hex: string, opacity: number) {
hex = hex.replace('#', '');
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
const 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: [65, 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';
// mainChart
public random(min: number, max: number) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
public mainChartElements = 27;
public mainChartData1: Array<number> = [];
public mainChartData2: Array<number> = [];
public mainChartData3: Array<number> = [];
public mainChartData: Array<any> = [
{
data: this.mainChartData1,
label: 'Current'
},
{
data: this.mainChartData2,
label: 'Previous'
},
{
data: this.mainChartData3,
label: 'BEP'
}
];
/* tslint:disable:max-line-length */
public mainChartLabels: Array<any> = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Thursday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
/* tslint:enable:max-line-length */
public mainChartOptions: any = {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false,
},
ticks: {
callback: function(value: any) {
return value.charAt(0);
}
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
maxTicksLimit: 5,
stepSize: Math.ceil(250 / 5),
max: 250
}
}]
},
elements: {
line: {
borderWidth: 2
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
}
},
legend: {
display: false
}
};
public mainChartColours: Array<any> = [
{ // brandInfo
backgroundColor: this.convertHex(this.brandInfo, 10),
borderColor: this.brandInfo,
pointHoverBackgroundColor: '#fff'
},
{ // brandSuccess
backgroundColor: 'transparent',
borderColor: this.brandSuccess,
pointHoverBackgroundColor: '#fff'
},
{ // brandDanger
backgroundColor: 'transparent',
borderColor: this.brandDanger,
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
borderDash: [8, 5]
}
];
public mainChartLegend = false;
public mainChartType = 'line';
// social box charts
public socialChartData1: Array<any> = [
{
data: [65, 59, 84, 84, 51, 55, 40],
label: 'Facebook'
}
];
public socialChartData2: Array<any> = [
{
data: [1, 13, 9, 17, 34, 41, 38],
label: 'Twitter'
}
];
public socialChartData3: Array<any> = [
{
data: [78, 81, 80, 45, 34, 12, 40],
label: 'LinkedIn'
}
];
public socialChartData4: Array<any> = [
{
data: [35, 23, 56, 22, 97, 23, 64],
label: 'Google+'
}
];
public socialChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
public socialChartOptions: any = {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
display: false,
}],
yAxes: [{
display: false,
}]
},
elements: {
line: {
borderWidth: 2
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
}
},
legend: {
display: false
}
};
public socialChartColours: Array<any> = [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff'
}
];
public socialChartLegend = false;
public socialChartType = 'line';
// sparkline charts
public sparklineChartData1: Array<any> = [
{
data: [35, 23, 56, 22, 97, 23, 64],
label: 'Clients'
}
];
public sparklineChartData2: Array<any> = [
{
data: [65, 59, 84, 84, 51, 55, 40],
label: 'Clients'
}
];
public sparklineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
public sparklineChartOptions: any = {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
display: false,
}],
yAxes: [{
display: false,
}]
},
elements: {
line: {
borderWidth: 2
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
}
},
legend: {
display: false
}
};
public sparklineChartDefault: Array<any> = [
{
backgroundColor: 'transparent',
borderColor: '#d1d4d7',
}
];
public sparklineChartPrimary: Array<any> = [
{
backgroundColor: 'transparent',
borderColor: this.brandPrimary,
}
];
public sparklineChartInfo: Array<any> = [
{
backgroundColor: 'transparent',
borderColor: this.brandInfo,
}
];
public sparklineChartDanger: Array<any> = [
{
backgroundColor: 'transparent',
borderColor: this.brandDanger,
}
];
public sparklineChartWarning: Array<any> = [
{
backgroundColor: 'transparent',
borderColor: this.brandWarning,
}
];
public sparklineChartSuccess: Array<any> = [
{
backgroundColor: 'transparent',
borderColor: this.brandSuccess,
}
];
public sparklineChartLegend = false;
public sparklineChartType = 'line';
ngOnInit(): void {
// generate random values for mainChart
for (let i = 0; i <= this.mainChartElements; i++) {
this.mainChartData1.push(this.random(50, 200));
this.mainChartData2.push(this.random(80, 100));
this.mainChartData3.push(65);
}
}
}

View file

@ -0,0 +1,16 @@
import { NgModule } from '@angular/core';
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { DashboardComponent } from './dashboard.component';
import { DashboardRoutingModule } from './dashboard-routing.module';
@NgModule({
imports: [
DashboardRoutingModule,
ChartsModule,
BsDropdownModule
],
declarations: [ DashboardComponent ]
})
export class DashboardModule { }