From 84be16a757ba8e873caf805de3db2b5b9b30d1f9 Mon Sep 17 00:00:00 2001
From: mario128mex <mario128mex@gmail.com>
Date: Mon, 18 Jun 2018 15:23:27 -0500
Subject: [PATCH] web-ui: Improve the richest addresses view (fixes #16)

The percent of coins is rendered with two decimals, also, a percentage bar was added.
---
 .../richest-addresses/richest-addresses.component.html   | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/web-ui/src/app/components/richest-addresses/richest-addresses.component.html b/web-ui/src/app/components/richest-addresses/richest-addresses.component.html
index a1e5b28..b2a8617 100644
--- a/web-ui/src/app/components/richest-addresses/richest-addresses.component.html
+++ b/web-ui/src/app/components/richest-addresses/richest-addresses.component.html
@@ -23,7 +23,14 @@
             </td>
             <td>{{item.available}} {{'label.coinName' | translate}}</td>
             <td *ngIf="ticker == null || ticker.circulatingSupply == null">{{'message.unavailable' | translate}}</td>
-            <td *ngIf="ticker != null && ticker.circulatingSupply != null">{{getPercent(item)}} %</td>
+            <td *ngIf="ticker != null && ticker.circulatingSupply != null">
+              <div
+                with="100%"
+                [ngStyle]="{'background': 'linear-gradient(to right, rgb(240, 237, 255) ' + (getPercent(item)) + '%, rgba(0,0,0,0) 0%)'}"
+              >
+                {{getPercent(item) | number:'1.2-2'}} %
+              </div>
+            </td>
           </tr>
         </tbody>
       </table>