Add Google Charts to Observatory and use it in allocation profiler

runtime/bin/vmservice/client/lib/src/observatory_elements/heap_profile.html

Index: runtime/bin/vmservice/client/lib/src/observatory_elements/heap_profile.html
diff --git a/runtime/bin/vmservice/client/lib/src/observatory_elements/heap_profile.html b/runtime/bin/vmservice/client/lib/src/observatory_elements/heap_profile.html
index 97b34abfd48c3a6d5e0889e9cc40d352d7f0ae07..50c1af9b80a20a3c4335a0bd299eecaeb25bc414 100644
--- a/runtime/bin/vmservice/client/lib/src/observatory_elements/heap_profile.html
+++ b/runtime/bin/vmservice/client/lib/src/observatory_elements/heap_profile.html
@@ -7,42 +7,51 @@
   <div>
   <button type="button" on-click="{{refreshData}}">Refresh</button>
   </div>
-  <div>
-  <span>New Space </span>
-  <span>{{ status(true) }}</span>
+  <div class="row">
+    <div id="newPieChart" class="col-md-4" style="height: 400px">
+    </div>
+    <div id="newStatus" class="col-md-2">
+      <table class="table">
+        <tbody>
+          <tr>
+            <td>Collections</td>
+            <td>{{ formattedCollections(true) }}</td>
+          </tr>
+          <tr>
+            <td>Average Collection Time</td>
+            <td>{{ formattedAverage(true) }}</td>
+          </tr>
+          <tr>
+            <td>Cumulative Collection Time</td>
+            <td>{{ formattedTotalCollectionTime(true) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div id="oldPieChart" class="col-md-4" style="height: 400px">
+    </div>
+    <div id="oldStatus" class="col-md-2">
+      <table class="table">
+        <tbody>
+          <tr>
+            <td>Collections</td>
+            <td>{{ formattedCollections(true) }}</td>
+          </tr>
+          <tr>
+            <td>Average Collection Time</td>
+            <td>{{ formattedAverage(true) }}</td>
+          </tr>
+          <tr>
+            <td>Cumulative Collection Time</td>
+            <td>{{ formattedTotalCollectionTime(true) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
-  <div>
-  <span>Old Space </span>
-  <span>{{ status(false) }}</span>
+  <div class="row">
+    <div id="table" class="col-md-12" style="height: 800px"></div>
   </div>
-  <table class="table table-hover">
-    <thead>
-      <tr>
-        <th>Class</th>
-        <th><button on-click="{{changeSortColumn}}" data-msg="1">Current (new)</button></th>
-        <th><button on-click="{{changeSortColumn}}" data-msg="2">Allocated since GC (new)</button></th>
-        <th><button on-click="{{changeSortColumn}}" data-msg="3">Total before last GC (new)</button></th>
-        <th><button on-click="{{changeSortColumn}}" data-msg="4">Total after last GC (new)</button></th>
-        <th><button on-click="{{changeSortColumn}}" data-msg="5">Current (old)</button></th>
-        <th><button on-click="{{changeSortColumn}}" data-msg="6">Allocated since GC (old)</button></th>
-        <th><button on-click="{{changeSortColumn}}" data-msg="7">Total before last GC (old)</button></th>
-        <th><button on-click="{{changeSortColumn}}" data-msg="8">Total after last GC (old)</button></th>
-      </tr>
-    </thead>
-    <tbody>
-    <tr template repeat="{{ cls in sortedProfile }}">
-      <td><class-ref app="{{ app }}" ref="{{ cls['class'] }}"></class-ref></td>
-      <td>{{ current(cls, true) }}</td>
-      <td>{{ allocated(cls, true) }}</td>
-      <td>{{ beforeGC(cls, true) }}</td>
-      <td>{{ afterGC(cls, true) }}</td>
-      <td>{{ current(cls, false) }}</td>
-      <td>{{ allocated(cls, false) }}</td>
-      <td>{{ beforeGC(cls, false) }}</td>
-      <td>{{ afterGC(cls, false) }}</td>
-    </tr>
-    </tbody>
-  </table>
 </template>
 <script type="application/dart" src="heap_profile.dart"></script>
-</polymer-element>
+</polymer-element>