About done

assets/profile.css

@@ -20,6 +20,26 @@
   height: 7rem;
 }
 
+.circle-progress .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: #ddca7e;
+  color: black;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 1;
+}
+
+.circle-progress:hover .tooltiptext {
+  visibility: visible;
+}
+
+
+
 svg {
   position: absolute;
   top: 0;

assets/profile.html.eex

@@ -5,18 +5,33 @@
       <%= profile.new_xp %>)</sup>
     <% } %>
 </h3>
+
+<div class="progress">
+  <div class="progress-bar progress-bar-success" style='width:${profile.progress}%;'>
+    <span class="sr-only">Level progress ${profile.progress - profile.new_progress}%.</span>
+  </div>
+  <div class="progress-bar progress-bar-striped progress-bar-warning" style='width:${profile.new_progress}%;'>
+    <span class="sr-only">Recent level progress ${profile.new_progress}%.</span>
+  </div>
+</div>
+
 <div style="clear: both;">
   <% for( let l in languages) { %>
     <div class="circle-progress">
       <div class="language">
         <%= languages[l].name %>
           <span>
-            <%= languages[l].xp %>
+            <%= languages[l].level %>
           </span>
       </div>
+      <span class="tooltiptext">
+        Total XP: <strong><%=languages[l].xp %></strong> <br/>
+        New XP: <%=languages[l].new_xp%>
+      </span>      
       <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>        
+        <circle cx="50" cy="50" r="45" stroke="#ddca7e" stroke-width="5" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress) * 282.6 / 100) }'></circle>
+        <circle cx="50" cy="50" r="45" stroke="#318245" stroke-width="5" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress + languages[l].new_progress) * 282.6 / 100) }'></circle>
       </svg>
     </div>
     <% } %>
@@ -37,7 +52,7 @@
 
       <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>
+          <span class="sr-only">Level progress ${machines[m].progress - machines[m].new_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>

src/profile-provider.ts

@@ -13,7 +13,7 @@ import { CodeStatsAPI } from "./code-stats-api";
 
 import template = require('lodash.template');
 
-export class ProfileHtmlProvider implements TextDocumentContentProvider {
+export class ProfileProvider implements TextDocumentContentProvider {
   onDidChange?: Event<Uri>;
 
   api: CodeStatsAPI;
@@ -41,7 +41,7 @@ export class ProfileHtmlProvider implements TextDocumentContentProvider {
       let curLevelXp = getNextLevelXp(level - 1);
       let nextLevelXp = getNextLevelXp(level);
 
-      let haveXp = (xp-new_xp) - curLevelXp;
+      let haveXp = xp - curLevelXp;
       
       let needXp = nextLevelXp - curLevelXp;
 
@@ -79,6 +79,10 @@ export class ProfileHtmlProvider implements TextDocumentContentProvider {
       profile["style"] = this.context.asAbsolutePath("assets/profile.css");
       profile["level"] = getLevel(profile["total_xp"]);
 
+      let percents = getLevelProgress(profile["total_xp"], profile["new_xp"]);
+
+      profile["progress"] = percents[0];
+      profile["new_progress"] = percents[1];
 
       let langs = getSortedArray(profile, "languages");
       

src/xp-counter.ts

@@ -6,8 +6,6 @@ import {
   Uri,
   ViewColumn,
   commands,
-  Event,
-  CancellationToken,
   StatusBarItem,
   TextDocument,
   StatusBarAlignment,
@@ -18,7 +16,7 @@ import {
 } from "vscode";
 import { Pulse } from "./pulse";
 import { CodeStatsAPI } from "./code-stats-api";
-import { ProfileHtmlProvider } from "./profileHtmlProvider";
+import { ProfileProvider } from "./profile-provider";
 
 export class XpCounter {
   private combinedDisposable: Disposable;
@@ -53,7 +51,7 @@ export class XpCounter {
       this.statusBarItem.command = "code-stats.profile";
     }
 
-    let provider = new ProfileHtmlProvider(context, this.api);
+    let provider = new ProfileProvider(context, this.api);
 
     let registration = workspace.registerTextDocumentContentProvider('code-stats', provider);