jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

slice new design for top pie charts

pull/3/head
KostyaDanovsky 2015-11-12 17:17:02 +03:00
parent f64ee43138
commit abcab8e5ca
10 changed files with 112 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/app/pages/dashboard/widgets/pieCharts/_pieCharts.scss
View File

@ -1,16 +1,18 @@
.pie-charts {
color: $default-text;
.pie-chart-item {
text-align: center;
display: inline-block;
width: 25%;
&:first-child {
margin-left: 0;
position: relative;
.chart-icon {
position: absolute;
right: 0px;
top: 3px;
}
h6 {
text-transform: none;
color: #ffffff;
margin-top: 13px;
width: 100%;
}
@media screen and (max-width: 1650px) {
//todo: add other cases when on the one row two or one chart
.chart-icon {
display: none;
}
}
.chart {
@ -19,7 +21,7 @@
width: 84px;
height: 84px;
text-align: center;
color: #ffffff;
float: left;
}
.chart canvas {
position: absolute;
@ -31,13 +33,20 @@
line-height: 84px;
z-index: 2;
font-size: 16px;
color: #ffffff;
}
.percent:after {
content: '%';
margin-left: 0.1em;
font-size: .8em;
}
.description {
display: inline-block;
padding: 20px 0 0 20px;
.description-stats {
padding-top: 4px;
font-size: 24px;
}
}
.angular {
margin-top: 100px;
}

34
src/app/pages/dashboard/widgets/pieCharts/pieCharts.html
View File

@ -1,10 +1,14 @@
<div class="row">
<div class="row pie-charts">
<!-- todo: ng-repeat -->
<div class="col-sm-3">
<blur-panel>
<div class="pie-chart-item" id="chart1">
<span class="chart" rel="#41bee9" data-percent="60"> <span class="percent"></span> </span>
<h6>New Visits</h6>
<div class="chart" rel="#41bee9" data-percent="60"> <span class="percent"></span> </div>
<div class="description">
<div>New Visits</div>
<div class="description-stats">57,820</div>
</div>
<i class="chart-icon i-person"></i>
</div>
</blur-panel>
</div>
@ -12,8 +16,12 @@
<div class="col-sm-3">
<blur-panel>
<div class="pie-chart-item" id="chart2">
<span class="chart" rel="#9D498C" data-percent="60"> <span class="percent"></span> </span>
<h6>New Purchases</h6>
<div class="chart" rel="#9D498C" data-percent="60"> <span class="percent"></span> </div>
<div class="description">
<div>New Purchases</div>
<div class="description-stats">$ 89,745</div>
</div>
<i class="chart-icon i-money"></i>
</div>
</blur-panel>
</div>
@ -21,8 +29,12 @@
<div class="col-sm-3">
<blur-panel>
<div class="pie-chart-item" id="chart3">
<span class="chart" rel="#bbcb50" data-percent="60"> <span class="percent"></span> </span>
<h6>Active Users</h6>
<div class="chart" rel="#bbcb50" data-percent="60"> <span class="percent"></span> </div>
<div class="description">
<div>Active Users</div>
<div class="description-stats">178,391</div>
</div>
<i class="chart-icon i-face"></i>
</div>
</blur-panel>
</div>
@ -30,8 +42,12 @@
<div class="col-sm-3">
<blur-panel>
<div class="pie-chart-item" id="chart4">
<span class="chart" rel="#5FBCBB" data-percent="60"> <span class="percent"></span> </span>
<h6>Server Load</h6>
<div class="chart" rel="#5FBCBB" data-percent="60"> <span class="percent"></span> </div>
<div class="description">
<div>Returned Visitors</div>
<div class="description-stats">32,592</div>
</div>
<i class="chart-icon i-refresh"></i>
</div>
</blur-panel>
</div>

17
src/app/pages/dashboard/widgets/pieCharts/pieCharts.js
View File

@ -20,7 +20,9 @@ blurAdminApp.directive('pieCharts', function () {
trackColor: 'rgba(0,0,0,0)',
size: 84,
scaleLength: 0,
animation: 2000
animation: 2000,
lineWidth: 9,
lineCap: 'square',
});
});
@ -34,17 +36,16 @@ blurAdminApp.directive('pieCharts', function () {
var chart2 = window.chart = $('#chart2').find('.chart').data('easyPieChart');
var chart3 = window.chart = $('#chart3').find('.chart').data('easyPieChart');
var chart4 = window.chart = $('#chart4').find('.chart').data('easyPieChart');
chart1.update(getRandomArbitrary(60, 100));
chart2.update(getRandomArbitrary(60, 100));
chart3.update(getRandomArbitrary(60, 100));
chart4.update(getRandomArbitrary(60, 100));
chart1.update(getRandomArbitrary(60, 90));
chart2.update(getRandomArbitrary(60, 90));
chart3.update(getRandomArbitrary(60, 90));
chart4.update(getRandomArbitrary(60, 90));
}
loadPieCharts();
$timeout(function () {
loadPieCharts();
updatePieCharts();
}, 2000);
}, 1000);
}],
templateUrl: 'app/pages/dashboard/widgets/pieCharts/pieCharts.html'
};

43
src/assets/css/_icons.scss Normal file
View File

@ -0,0 +1,43 @@
$images-root: '../img/';
@mixin svg-icon($url, $width:'', $height:'') {
display: inline-block;
background: url($url) no-repeat center;
background-size: contain;
vertical-align: middle;
@if ($width != '') {
width: $width + px;
}
@if ($height != '') {
height: $height + px;
}
}
@mixin svg-icon-class($iconName, $width:'', $height:'') {
.#{'i-' + $iconName} {
@include svg-icon($images-root + $iconName + '.svg', $width, $height);
}
}
@include svg-icon-class('face', 80, 80);
@include svg-icon-class('money', 80, 80);
@include svg-icon-class('person', 80, 80);
@include svg-icon-class('refresh', 80, 80);
@mixin png-icon($url, $width, $height) {
display: inline-block;
width: $width + px;
height: $height + px;
background: url($url) no-repeat center center;
background-size: $width + px $height + px;
}
@mixin png-icon-class($iconName, $width, $height) {
.#{'i-' + $iconName} {
@include png-icon($images-root + $iconName + '.png', $width, $height);
}
}
//@include icon-png-class('arrival-icon', 11, 11);

2
src/assets/css/_variables.scss
View File

@ -34,7 +34,7 @@ $panel-bg-hover: #fff;
$disabled: #bdbdbd;
$disabled-bg: #e6e6e6;
$default-text: #585858;
$default-text: #7b7b7b;
$help-text: #949494;
$border: #dddddd;

1
src/assets/css/main.scss
View File

@ -6,6 +6,7 @@
"buttons.scss",
"table.scss",
"layout.scss",
"icons.scss",
"../../app/components/widgets/widgets.scss",
"../../app/pages/buttons/buttonsPage.scss",
"../../app/pages/icons/iconsPage.scss",

3
src/assets/img/face.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
<path fill="#DDDDDD" d="M23.99 4C12.94 4 4 12.95 4 24s8.94 20 19.99 20C35.04 44 44 35.05 44 24S35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16zm7-18c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm-14 0c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm7 13c4.66 0 8.61-2.91 10.21-7H13.79c1.6 4.09 5.55 7 10.21 7z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 457 B

3
src/assets/img/money.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
<path fill="#DDDDDD" d="M23.6 21.8c-4.54-1.18-6-2.39-6-4.29 0-2.18 2.01-3.71 5.4-3.71 3.56 0 4.88 1.7 5 4.2h4.42c-.13-3.45-2.24-6.59-6.42-7.62V6h-6v4.32c-3.88.85-7 3.35-7 7.22 0 4.62 3.83 6.92 9.4 8.26 5.01 1.2 6 2.95 6 4.83 0 1.37-.97 3.57-5.4 3.57-4.12 0-5.75-1.85-5.96-4.2h-4.41c.25 4.38 3.52 6.83 7.37 7.66V42h6v-4.3c3.89-.75 7-3 7-7.11 0-5.66-4.86-7.6-9.4-8.79z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 464 B

3
src/assets/img/person.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
<path fill="#DDDDDD" d="M24 24c4.42 0 8-3.59 8-8 0-4.42-3.58-8-8-8s-8 3.58-8 8c0 4.41 3.58 8 8 8zm0 4c-5.33 0-16 2.67-16 8v4h32v-4c0-5.33-10.67-8-16-8z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 249 B

3
src/assets/img/refresh.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
<path fill="#DDDDDD" d="M35.3 12.7C32.41 9.8 28.42 8 24 8 15.16 8 8.02 15.16 8.02 24S15.16 40 24 40c7.45 0 13.69-5.1 15.46-12H35.3c-1.65 4.66-6.07 8-11.3 8-6.63 0-12-5.37-12-12s5.37-12 12-12c3.31 0 6.28 1.38 8.45 3.55L26 22h14V8l-4.7 4.7z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 336 B