diff --git a/css/app.css b/css/app.css
index 94dbf9f..acd0140 100644
--- a/css/app.css
+++ b/css/app.css
@@ -50,15 +50,20 @@ button {
#min-btn:hover {
background: #ffbd45;
}
-#settings-btn {
- padding: 0;
+.tabs button {
+ padding: 0;
}
-#settings-btn img {
- width: 24px;
+.tabs button,
+.tabs button.active {
+ display: inline-block;
+}
+.tabs button img {
+ width: 19px;
opacity: 0.5;
}
- #settings-btn:hover img {
+ .tabs button:hover img,
+ .tabs button.active img {
opacity: 1;
}
@@ -81,6 +86,7 @@ ul {
}
#portfolio-list.coin-list {
font-size: 16px;
+ padding-top: 9px;
}
.coin-list li {
margin: 0px 0px 15px 0px;
@@ -309,6 +315,17 @@ ul {
text-decoration: none;
color: #252525;
}
+
+ /*Portfolio*/
+ #portfolio-total-value {
+ text-align: center;
+ font-size: 1.5em;
+ font-weight: 600;
+ margin: 15px 0px;
+ }
+ #portfolioChart {
+ max-height: 480px;
+ }
/*Scrollbar*/
::-webkit-scrollbar-corner {
diff --git a/images/icons8-Home-64.png b/images/icons8-Home-64.png
new file mode 100644
index 0000000..1f15a6d
Binary files /dev/null and b/images/icons8-Home-64.png differ
diff --git a/images/icons8-Rebalance Portfolio-100.png b/images/icons8-Rebalance Portfolio-100.png
new file mode 100644
index 0000000..0f10cae
Binary files /dev/null and b/images/icons8-Rebalance Portfolio-100.png differ
diff --git a/index.html b/index.html
index 3447a96..10e51f3 100644
--- a/index.html
+++ b/index.html
@@ -15,9 +15,9 @@
@@ -89,7 +89,9 @@
Total Value:
-
+
+
+
diff --git a/js/app_common.js b/js/app_common.js
index caabdca..4d7da5f 100644
--- a/js/app_common.js
+++ b/js/app_common.js
@@ -148,23 +148,27 @@ function initData() {
append(li, span);
append(ul, li);
i++;
- }
+ } //for
//console.log(data.RAW.BTC.USD.PRICE)
sortChildren(
document.getElementById('prices'),
function(li) { return +li.getAttribute('sortorder') }
);
+ sortChildren(
+ document.getElementById('portfolio-list'),
+ function(li) { return +li.getAttribute('sortorder') }
+ );
//sort your coins
sortable('#prices', {
handle: 'span'
})[0].addEventListener('sortstop', function(e) {
// Declare variables
- var ul, li, i;
+ var ul, ulPortfolio, li, liPortfolio, i;
ul = document.getElementById("prices");
+ ulPortfolio = document.getElementById("portfolio-list");
li = ul.getElementsByTagName('li');
-
// Loop through all list items
for (i = 0; i < li.length; i++) {
li[i].setAttribute("sortorder", i);
@@ -174,7 +178,7 @@ function initData() {
order: li[i].getAttribute('sortorder')
});
//alert(settings.get(elementID + '.order'));
- }
+ } //for
//alert(settings.get('coin.'+e+'.order'));
}); //sortable
@@ -203,29 +207,31 @@ function updateData() {
let pricesDISPLAY = data.DISPLAY; // display for everything except coin symbol
let pricesRAW = data.RAW; // raw to get BTC instead of bitcoin symbol
let portfolioSum = 0;
+
// Chart labels
var chartLabels = [];
// Chart data
var chartData = [];
- // Chart colors
+ // Chart colors - need to match these colors to the coin in a future release
var chartColors = [
- '#F57C00',
- '#AFB42B',
- '#7B1FA2',
- '#512DA8',
- '#455A64',
- '#1976D2',
+ '#FF9F1C',
+ '#2EC4B6',
+ '#E71D36',
+ '#011627',
+ '#FDFFFC',
+ '#D31EE8',
'#0288D1',
- '#0288D1',
- '#D32F2F',
+ '#5FC42D',
+ '#E64A19',
'#0097A7',
+ '#FBC02D',
'#00796B',
'#388E3C',
'#689F38',
'#303F9F',
- '#FBC02D',
+ '#C2185B',
'#FFA000',
- '#E64A19',
+ '#D32F2F',
'#C2185B',
'#fff'
];
@@ -320,10 +326,16 @@ function updateData() {
chartData.push(quantityTotal);
} //for
+
+ sortChildren(
+ document.getElementById('portfolio-list'),
+ function(li) { return +li.getAttribute('sortorder') }
+ );
+
var newChartLabels = chartLabels;
// Chart
- var ctx = document.getElementById("myChart");
+ var ctx = document.getElementById("portfolioChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
@@ -331,7 +343,7 @@ function updateData() {
data: chartData,
backgroundColor: chartColors,
borderColor: '#000',
- borderWidth: 2
+ borderWidth: 0
}],
labels: newChartLabels
@@ -342,7 +354,7 @@ function updateData() {
position: 'bottom'
}
}
- });
+ }); //myChart
}); //then
}
@@ -382,6 +394,7 @@ for (let key of Object.keys(portfolio_list)) {
span = createNode('span');
sym = createNode('span');
li.setAttribute("id", "coin-"+[coin]);
+ li.setAttribute("sortorder", settings.get(li.id+'.order'));
append(li, span);
append(portfolio_ul, li);
diff --git a/main.js b/main.js
index 23044ce..a98e337 100644
--- a/main.js
+++ b/main.js
@@ -31,7 +31,7 @@ function createWindow () {
width: mainWindowState.width,
height: mainWindowState.height,
maxWidth: 360,
- minWidth: 240,
+ minWidth: 280,
minHeight: 100,
maximizable: false,
fullscreenable: false,