mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
traffic chart component
This commit is contained in:
nixa
parent
1b08462bb9
commit
f721a044a1
6 changed files with 319 additions and 3 deletions
|
|
@ -2,13 +2,13 @@ import {Component, ViewEncapsulation} from 'angular2/core';
|
|||
|
||||
import {PopularApp} from './popularApp';
|
||||
import {PieChart} from './pieChart';
|
||||
import {TrafficChart} from './trafficChart';
|
||||
import {BaCard} from '../../theme/components';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'dashboard',
|
||||
pipes: [],
|
||||
directives: [PopularApp, PieChart, BaCard],
|
||||
directives: [PopularApp, PieChart, TrafficChart, BaCard],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
styles: [require('./dashboard.scss')],
|
||||
template: require('./dashboard.html')
|
||||
|
|
|
|||
|
|
@ -1,9 +1,16 @@
|
|||
<div class="row">
|
||||
<div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||||
<div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12">
|
||||
<pie-chart></pie-chart>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<ba-card class="col-lg-6 col-md-12 col-sm-12"
|
||||
title="Acquisition Channels" baCardClass="popular-app medium-card">
|
||||
<traffic-chart></traffic-chart>
|
||||
</ba-card>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xlg-9 col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<div class="row">
|
||||
|
|
|
|||
1
src/app/pages/dashboard/trafficChart/index.ts
Normal file
1
src/app/pages/dashboard/trafficChart/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './trafficChart.component';
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import {Component, ViewEncapsulation, ElementRef} from 'angular2/core';
|
||||
import {layoutColors} from "../../../theme";
|
||||
import {DOM} from "angular2/src/platform/dom/dom_adapter";
|
||||
|
||||
@Component({
|
||||
selector: 'traffic-chart',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
styles: [require('./trafficChart.scss')],
|
||||
template: require('./trafficChart.html')
|
||||
})
|
||||
export class TrafficChart {
|
||||
|
||||
palette = layoutColors.bgColorPalette;
|
||||
doughnutData = [
|
||||
{
|
||||
value: 2000,
|
||||
color: this.palette.white,
|
||||
highlight: this.palette.whiteDark,
|
||||
label: 'Ad Campaigns',
|
||||
percentage: 87,
|
||||
order: 0,
|
||||
},
|
||||
{
|
||||
value: 400,
|
||||
color: this.palette.gossip,
|
||||
highlight: this.palette.gossipDark,
|
||||
label: 'Other',
|
||||
percentage: 17,
|
||||
order: 1,
|
||||
},
|
||||
{
|
||||
value: 1200,
|
||||
color: this.palette.silverTree,
|
||||
highlight: this.palette.silverTreeDark,
|
||||
label: 'Direct Traffic',
|
||||
percentage: 38,
|
||||
order: 2,
|
||||
},
|
||||
{
|
||||
value: 1000,
|
||||
color: this.palette.surfieGreen,
|
||||
highlight: this.palette.surfieGreenDark,
|
||||
label: 'Referral Traffic',
|
||||
percentage: 70,
|
||||
order: 3,
|
||||
},
|
||||
{
|
||||
value: 1500,
|
||||
color: this.palette.blueStone,
|
||||
highlight: this.palette.blueStoneDark,
|
||||
label: 'Search engines',
|
||||
percentage: 22,
|
||||
order: 4,
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
constructor(private _elementRef:ElementRef) {
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
let el = DOM.querySelector(this._elementRef.nativeElement, '.chart-area');
|
||||
new Chart(el.getContext('2d')).Doughnut(this.doughnutData, {
|
||||
segmentShowStroke: false,
|
||||
percentageInnerCutout : 64,
|
||||
responsive: true
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
29
src/app/pages/dashboard/trafficChart/trafficChart.html
Normal file
29
src/app/pages/dashboard/trafficChart/trafficChart.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<div class="channels-block">
|
||||
|
||||
<div class="chart-bg"></div>
|
||||
<div class="traffic-chart" id="trafficChart">
|
||||
<div class="canvas-holder">
|
||||
<canvas class="chart-area" width="300px" height="300px"></canvas>
|
||||
<div class="traffic-text">
|
||||
1,900,128
|
||||
<span>Views Total</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="traffic-legend"></div>
|
||||
</div>
|
||||
|
||||
<div class="channels-info">
|
||||
<div>
|
||||
<div class="channels-info-item" *ngFor="#item of doughnutData">
|
||||
<div class="legend-color" style="background-color: {{ item.color }}"></div>
|
||||
<p>{{ item.label }}<span class="channel-number">+{{ item.percentage }}%</span></p>
|
||||
<div class="progress progress-sm channel-progress">
|
||||
<div class="progress-bar" role="progressbar"
|
||||
[attr.aria-valuenow]="item.percentage" aria-valuemin="0" aria-valuemax="100" style="width: {{ item.percentage }}%">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
209
src/app/pages/dashboard/trafficChart/trafficChart.scss
Normal file
209
src/app/pages/dashboard/trafficChart/trafficChart.scss
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
@import '../../../theme/sass/conf/conf';
|
||||
|
||||
.chart-area {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.channels-block {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.channels-info {
|
||||
display: inline-block;
|
||||
width: calc(100% - 400px);
|
||||
margin-left: 70px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
.small-container {
|
||||
.channels-info {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.channels-info-item {
|
||||
p {
|
||||
margin-bottom: 9px;
|
||||
font-size: 18px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.channel-number{
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.traffic-chart {
|
||||
width: 300px;
|
||||
position: relative;
|
||||
min-height: 300px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.traffic-legend {
|
||||
display: inline-block;
|
||||
padding: 70px 0 0 0px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.traffic-legend ul.doughnut-legend {
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: 12px;
|
||||
margin-bottom: 12px;
|
||||
line-height: 16px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 120px;
|
||||
span {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-holder {
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
float: left;
|
||||
//canvas{
|
||||
// border: 10px solid rgba(0, 0, 0, 0.34902);
|
||||
// border-radius: 180px;
|
||||
//}
|
||||
}
|
||||
|
||||
.traffic-text {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
//color: $danger;
|
||||
span {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
color: $default-text;
|
||||
}
|
||||
}
|
||||
|
||||
.channel-change {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.channel-progress {
|
||||
height: 4px;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
.progress-bar{
|
||||
height: 4px;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.legend-color{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.25);
|
||||
position: relative;
|
||||
top: 27px;
|
||||
border-radius: 15px;
|
||||
left: -45px;
|
||||
}
|
||||
|
||||
.traffic-chart canvas{
|
||||
border: 10px solid rgba(0,0,0,0.0);
|
||||
border-radius: 150px;
|
||||
}
|
||||
|
||||
.chart-bg{
|
||||
background-color: $view-total;
|
||||
position: absolute;
|
||||
border-radius: 100px;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: $resM) {
|
||||
div.channels-info{
|
||||
display: block;
|
||||
width: calc(100% - 88px);
|
||||
margin-top: -65px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.panel.medium-panel.traffic-panel{
|
||||
height: auto;
|
||||
}
|
||||
.traffic-chart{
|
||||
position: inherit;
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.chart-bg{
|
||||
left: calc(50% - 90px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1465px) and (min-width: 1199px){
|
||||
.channels-info{
|
||||
display: none;
|
||||
}
|
||||
.traffic-chart{
|
||||
position: inherit;
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.chart-bg{
|
||||
left: calc(50% - 90px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 380px){
|
||||
|
||||
.traffic-chart{
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.canvas-holder{
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.chart-bg {
|
||||
top: 30px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 320px){
|
||||
.chart-bg {
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
width: 142px;
|
||||
height: 142px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body.badmin-transparent{
|
||||
.traffic-chart canvas{
|
||||
border: 10px solid rgba(0,0,0,0.35);
|
||||
box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
|
||||
border-radius: 150px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue