Skip to content

Commit 13f9030

Browse files
AramManukyanAramManukyan
committed
Dashboards charts change color
1 parent bbf3db1 commit 13f9030

7 files changed

Lines changed: 111 additions & 65 deletions

File tree

‎bower.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"jquery-flot": "~0.8.3",
1111
"flot.tooltip": "~0.8.5",
1212
"jquery-validation": "~1.14.0",
13+
"jquery.sparkline": "http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.js",
1314
"jqvmap": "~1.4.0",
1415
"metisMenu": "~2.0.3",
1516
"morrisjs": "~0.5.1",
@@ -18,7 +19,7 @@
1819
"responsive-bootstrap-toolkit": "~2.5.0",
1920
"tether": "~1.1.1",
2021
"tinycolor": "~1.2.1",
21-
"jquery.sparkline": "http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.js"
22+
"Watch.JS": "watch#*"
2223
},
2324
"overrides": {
2425
"bootstrap": {

‎src/app/_common/sidebar/customize/customize.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ $(function () {
5555
});
5656

5757
function setThemeSettings() {
58+
setThemeColor();
5859
setThemeState();
5960
setThemeControlsState();
6061

@@ -118,6 +119,15 @@ $(function () {
118119
});
119120
}
120121

122+
/************************************************
123+
* Update theme color
124+
*************************************************/
125+
function setThemeColor(){
126+
setTimeout(function(){
127+
config.colorPrimary = tinycolor($("#ref .color-primary").css("color"));
128+
}, 100);
129+
}
130+
121131
/************************************************
122132
* Storage Functions
123133
*************************************************/

‎src/app/dashboard/history/history.js‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,39 @@ $(function() {
77
// drawing visits chart
88
drawVisitsChart();
99

10+
var el = null;
11+
var item = 'visits';
12+
1013
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
1114

12-
var el = e.target;
13-
var item = $(el).attr('href').replace('#', '');
15+
el = e.target;
16+
item = $(el).attr('href').replace('#', '');
17+
switchHistoryCharts(item);
18+
19+
});
1420

15-
var chartSelector = "#dashboard-" + item + "-chart";
21+
watch(config, "colorPrimary", function(){
22+
switchHistoryCharts(item);
23+
});
1624

17-
if ($(chartSelector).has('svg').length) {
18-
$(chartSelector).empty();
19-
}
25+
});
2026

21-
switch(item){
22-
case 'visits':
23-
drawVisitsChart();
24-
break;
25-
case 'downloads':
26-
drawDownloadsChart();
27-
break;
28-
}
29-
})
27+
function switchHistoryCharts(item){
28+
var chartSelector = "#dashboard-" + item + "-chart";
3029

31-
});
30+
if ($(chartSelector).has('svg').length) {
31+
$(chartSelector).empty();
32+
}
3233

34+
switch(item){
35+
case 'visits':
36+
drawVisitsChart();
37+
break;
38+
case 'downloads':
39+
drawDownloadsChart();
40+
break;
41+
}
42+
}
3343

3444
function drawVisitsChart(){
3545
var dataVisits = [

‎src/app/dashboard/sales-breakdown/sales-breakdown.js‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,34 @@ $(function() {
44

55
if (!$dashboardSalesBreakdownChart.length) {
66
return false;
7-
}
7+
}
88

9-
Morris.Donut({
10-
element: 'dashboard-sales-breakdown-chart',
11-
data: [{ label: "Download Sales", value: 12 },
12-
{ label: "In-Store Sales", value: 30 },
13-
{ label: "Mail-Order Sales", value: 20 } ],
14-
resize: true,
15-
colors: [
16-
tinycolor(config.colorPrimary.toString()).lighten(10).toString(),
17-
tinycolor(config.colorPrimary.toString()).darken(8).toString(),
18-
config.colorPrimary.toString()
19-
],
20-
});
9+
function drawSalesChart(){
10+
11+
$dashboardSalesBreakdownChart.html('');
12+
13+
Morris.Donut({
14+
element: 'dashboard-sales-breakdown-chart',
15+
data: [{ label: "Download Sales", value: 12 },
16+
{ label: "In-Store Sales", value: 30 },
17+
{ label: "Mail-Order Sales", value: 20 } ],
18+
resize: true,
19+
colors: [
20+
tinycolor(config.colorPrimary.toString()).lighten(10).toString(),
21+
tinycolor(config.colorPrimary.toString()).darken(8).toString(),
22+
config.colorPrimary.toString()
23+
],
24+
});
2125

22-
var $sameheightContainer = $dashboardSalesBreakdownChart.closest(".sameheight-container");
26+
var $sameheightContainer = $dashboardSalesBreakdownChart.closest(".sameheight-container");
2327

24-
setSameHeights($sameheightContainer);
28+
setSameHeights($sameheightContainer);
29+
}
30+
31+
drawSalesChart();
32+
33+
watch(config, "colorPrimary", function(){
34+
drawSalesChart();
35+
});
36+
2537
})

‎src/app/dashboard/sales-by-countries/sales-by-countries.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
</div>
88
</div>
99
<div class="card-block">
10-
<div id="sales-map" style="width: 100%; height: 400px;"></div>
10+
<div id="dashboard-sales-map" style="width: 100%; height: 400px;"></div>
1111
</div>
1212
</div>

‎src/app/dashboard/sales-by-countries/sales-by-countries.js‎

Lines changed: 43 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,50 @@
11
$(function() {
22

3-
if (!$('#sales-map').length) {
3+
var $dashboardSalesMap = $('#dashboard-sales-map');
4+
5+
if (!$dashboardSalesMap.length) {
46
return false;
57
}
68

7-
var color = config.colorPrimary.toHexString();
8-
var darkColor = tinycolor(config.colorPrimary.toString()).darken(40).toHexString();
9-
var selectedColor = tinycolor(config.colorPrimary.toString()).darken(10).toHexString();
10-
11-
var sales_data = {
12-
us: 2000,
13-
ru: 2000,
14-
gb: 10000,
15-
fr: 10000,
16-
de: 10000,
17-
cn: 10000,
18-
in: 10000,
19-
sa: 10000,
20-
ca: 10000,
21-
br: 5000,
22-
au: 5000
23-
};
24-
25-
$('#sales-map').vectorMap({
26-
map: 'world_en',
27-
backgroundColor: 'transparent',
28-
color: '#E5E3E5',
29-
hoverOpacity: 0.7,
30-
selectedColor: selectedColor,
31-
enableZoom: true,
32-
showTooltip: true,
33-
values: sales_data,
34-
scaleColors: [ color, darkColor],
35-
normalizeFunction: 'linear'
9+
function drawSalesMap() {
10+
11+
$dashboardSalesMap.html('');
12+
13+
var color = config.colorPrimary.toHexString();
14+
var darkColor = tinycolor(config.colorPrimary.toString()).darken(40).toHexString();
15+
var selectedColor = tinycolor(config.colorPrimary.toString()).darken(10).toHexString();
16+
17+
var sales_data = {
18+
us: 2000,
19+
ru: 2000,
20+
gb: 10000,
21+
fr: 10000,
22+
de: 10000,
23+
cn: 10000,
24+
in: 10000,
25+
sa: 10000,
26+
ca: 10000,
27+
br: 5000,
28+
au: 5000
29+
};
30+
31+
$dashboardSalesMap.vectorMap({
32+
map: 'world_en',
33+
backgroundColor: 'transparent',
34+
color: '#E5E3E5',
35+
hoverOpacity: 0.7,
36+
selectedColor: selectedColor,
37+
enableZoom: true,
38+
showTooltip: true,
39+
values: sales_data,
40+
scaleColors: [ color, darkColor],
41+
normalizeFunction: 'linear'
42+
});
43+
}
44+
45+
drawSalesMap();
46+
47+
watch(config, "colorPrimary", function(){
48+
drawSalesMap();
3649
});
3750
});

‎src/config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
var config = window.config = {};
2-
config.colorPrimary = tinycolor($("#ref .color-primary").css("color"));
3-
42

3+
// set primary color
4+
config.colorPrimary = tinycolor($("#ref .color-primary").css("color"));
55

66
// Configure responsive bootstrap toolkit
77
config.ResponsiveBootstrapToolkitVisibilityDivs = {

0 commit comments

Comments
 (0)