Start language radial progress

assets/profile.css

@@ -1,4 +1,4 @@
-.language {
+/* .language {
   float: left;
   width: 5rem;
   height: 5rem;
@@ -11,14 +11,40 @@
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   border: solid 2px; 
+} */
+
+.circle-progress {
+  float: left;
+  position: relative;
+  width: 7rem;
+  height: 7rem;
+}
+
+svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transform: rotate(-90deg);
+}
+
+/* .circle-progress svg {
+  transform: rotate(-90deg);
+} */
+
+.circle-progress svg circle {
+  fill:transparent;
+}
+
+.language {
+  padding-top: 2.5rem;
+  margin: auto;
+  text-align: center;
 }
 
 .language span {
   display: block;
-}
-
-
-.language span {
   font-weight: bold;
   font-size: 1.1em;
 }
@@ -60,9 +86,10 @@ img {
 .progress {
   height: 20px;
   margin-bottom: 20px;
-  /* background-color: #f5f5f5; */
+  background-color: #303030;
   border-radius: 4px;
   border: solid 1px; 
+  border-color: #424242;
   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
   box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
 }
@@ -73,9 +100,8 @@ img {
   height: 100%;
   font-size: 12px;
   line-height: 20px;  
-  /* color: #fff; */
   text-align: center;
-  background-color: #337ab7;
+  background-color: #ddca7e;
   -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
   box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
   -webkit-transition: width .6s ease;
@@ -84,7 +110,7 @@ img {
 }
 
 .progress-bar-success {
-  background-color: #ddca7e;;
+  background-color: #318245;
 }
 
 .sr-only {

assets/profile.html

@@ -1,40 +0,0 @@
-<link rel="stylesheet" href="file:///${profile.style}">
-<h3> ${profile.user} Level ${profile.level} (${profile.total_xp} XP)
-  <% if( profile.new_xp > 0 ) { %>
-    <sup>(
-      <%= profile.new_xp %>)</sup>
-    <% } %>
-</h3>
-<div style="display: block;">
-  <% for( let l in languages) { %>
-    <div class="language">
-      <%= languages[l].name %>
-        <span>
-          <%= languages[l].xp %>
-        </span>
-    </div>
-    <% } %>
-</div>
-<p/>
-<div class="machines">
-  <% for( let m in machines) { %>
-    <div class="machine">
-      <strong>
-        <%= machines[m].name %>
-      </strong>
-      <span>
-        <%= machines[m].xp %>
-      </span>
-
-      <div class="progress">
-        <div class="progress-bar progress-bar-success" style="width:50%">
-          <span class="sr-only">Level progress ${machines[m].progress}%.</span>
-        </div>
-        <div class="progress-bar progress-bar-striped progress-bar-warning" style="width: 7%;">
-          <span class="sr-only">Recent level progress 7%.</span>
-        </div>
-      </div>
-
-    </div>
-    <% } %>
-</div>

assets/profile.html.eex

@@ -0,0 +1,51 @@
+<link rel="stylesheet" href="file:///${profile.style}">
+<h3> ${profile.user} Level ${profile.level} (${profile.total_xp} XP)
+  <% if( profile.new_xp > 0 ) { %>
+    <sup>(
+      <%= profile.new_xp %>)</sup>
+    <% } %>
+</h3>
+<div style="clear: both;">
+  <% for( let l in languages) { %>
+    <div class="circle-progress">
+      <div class="language">
+        <%= languages[l].name %>
+          <span>
+            <%= languages[l].xp %>
+          </span>
+      </div>
+      <svg viewBox="0 0 100 100">
+        <circle cx="50" cy="50" r="45" stroke="#424242" stroke-width="5"></circle>
+        <circle cx="50" cy="50" r="45" stroke="#318245" stroke-width="5" stroke-dasharray="282.6" stroke-dashoffset="70.65"></circle>        
+      </svg>
+    </div>
+    <% } %>
+</div>
+<p/>
+<div class="machines">
+  <% for( let m in machines) { %>
+    <div class="machine">
+      <strong>
+        <%= machines[m].name %>
+      </strong>
+      <span class="level">
+        level <%= machines[m].level %>
+      </span>
+      <span class="xp">
+        (<%= machines[m].xp %> XP)
+      </span>
+
+      <div class="progress">
+        <div class="progress-bar progress-bar-success" style='width:${machines[m].progress}%;'>
+          <span class="sr-only">Level progress ${machines[m].progress}%.</span>
+        </div>
+        <div class="progress-bar progress-bar-striped progress-bar-warning" style='width:${machines[m].new_progress}%;'>
+          <span class="sr-only">Recent level progress ${machines[m].new_progress}%.</span>
+        </div>
+      </div>
+
+    </div>
+    <% } %>
+</div>
+
+<circle cx="60" cy="60" r="50"/>

src/code-stats-api.ts

@@ -6,7 +6,7 @@ export class CodeStatsAPI {
   private API_KEY = null;
   private USER_NAME = null;
   private UPDATE_URL = "https://codestats.net/api/";
-  //private PROFILE_URL = "https://codestats.net/api/users";
+  
   private axios = null;
 
   constructor(apiKey: string, apiURL: string, userName: string) {
@@ -67,7 +67,6 @@ export class CodeStatsAPI {
     return this.axios
       .get(`users/${this.USER_NAME}`)
       .then(response => {        
-        console.log("Got Response\n");
         return response.data;
       })
       .catch(error => {

src/profileHtmlProvider.ts

@@ -36,15 +36,18 @@ export class ProfileHtmlProvider implements TextDocumentContentProvider {
       return Math.pow(Math.ceil((level + 1) / LEVEL_FACTOR), 2);
     }
 
-    function getLevelProgress(xp: number): number {
+    function getLevelProgress(xp: number, new_xp: number): number[] {
       let level = getLevel(xp);
       let curLevelXp = getNextLevelXp(level - 1);
       let nextLevelXp = getNextLevelXp(level);
 
-      let haveXp = xp - curLevelXp;
+      let haveXp = (xp-new_xp) - curLevelXp;
+      
       let needXp = nextLevelXp - curLevelXp;
 
-      return Math.round(haveXp * 100.0 / needXp);
+      let xpP = Math.round(haveXp * 100.0 / needXp);
+      let nxpP = Math.round(new_xp * 100.0 / needXp);
+      return [ xpP, nxpP ];
     }
 
     function getSortedArray(profile: any, obj: string): any[] {
@@ -52,12 +55,15 @@ export class ProfileHtmlProvider implements TextDocumentContentProvider {
       let langs = [];
       let languages_object = profile[obj] 
       for( let lang in languages_object) {
+        let percents = getLevelProgress(languages_object[lang].xps, languages_object[lang].new_xps);
         langs.push(
           {
             name: lang,
+            level: getLevel(languages_object[lang].xps),
             xp: languages_object[lang].xps,
             new_xp: languages_object[lang].new_xps,
-            progress: getLevelProgress(languages_object[lang].xps)
+            progress: percents[0],
+            new_progress: percents[1]
           }
         );
       }
@@ -68,7 +74,7 @@ export class ProfileHtmlProvider implements TextDocumentContentProvider {
 
     return this.api.getProfile().then(profile => {
 
-      let htmlTemplate = fs.readFileSync(this.context.asAbsolutePath("assets/profile.html"));
+      let htmlTemplate = fs.readFileSync(this.context.asAbsolutePath("assets/profile.html.eex"));
 
       profile["style"] = this.context.asAbsolutePath("assets/profile.css");
       profile["level"] = getLevel(profile["total_xp"]);