Switch from Google charts to Charted

runtime/observatory/lib/src/elements/heap_profile.dart

Index: runtime/observatory/lib/src/elements/heap_profile.dart
diff --git a/runtime/observatory/lib/src/elements/heap_profile.dart b/runtime/observatory/lib/src/elements/heap_profile.dart
index 25b5d5411c616edd039997f4eec52a029e9cf7a2..cf33577502a10514e93b0e24b4ea9b70f6ed1b34 100644
--- a/runtime/observatory/lib/src/elements/heap_profile.dart
+++ b/runtime/observatory/lib/src/elements/heap_profile.dart
@@ -7,6 +7,7 @@ library heap_profile_element;
 import 'dart:async';
 import 'dart:html';
 import 'observatory_element.dart';
+import 'package:charted/charted.dart';
 import 'package:observatory/app.dart';
 import 'package:observatory/service.dart';
 import 'package:observatory/elements.dart';
@@ -32,12 +33,11 @@ class HeapProfileElement extends ObservatoryElement {
   @observable String lastAccumulatorReset = '---';
 
   // Pie chart of new space usage.
-  var _newPieDataTable;
   var _newPieChart;
-
+  final _newPieChartRows = [];
   // Pie chart of old space usage.
-  var _oldPieDataTable;
   var _oldPieChart;
+  final _oldPieChartRows = [];
 
   @observable ClassSortedTable classTable;
   var _classTableBody;
@@ -48,15 +48,18 @@ class HeapProfileElement extends ObservatoryElement {
   @published Isolate isolate;
   @observable ServiceMap profile;
 
-  HeapProfileElement.created() : super.created() {
-    // Create pie chart models.
-    _newPieDataTable = new DataTable();
-    _newPieDataTable.addColumn('string', 'Type');
-    _newPieDataTable.addColumn('number', 'Size');
-    _oldPieDataTable = new DataTable();
-    _oldPieDataTable.addColumn('string', 'Type');
-    _oldPieDataTable.addColumn('number', 'Size');
+  final _pieChartColumns = [
+      new ChartColumnSpec(label: 'Type', type: ChartColumnSpec.TYPE_STRING),
+      new ChartColumnSpec(label: 'Size', formatter: (v) => v.toString())
+  ];
 
+  HeapProfileElement.created() : super.created() {
+    _newPieChartRows.add(['Used', 0]);
+    _newPieChartRows.add(['Free', 0]);
+    _newPieChartRows.add(['External', 0]);
+    _oldPieChartRows.add(['Used', 0]);
+    _oldPieChartRows.add(['Free', 0]);
+    _oldPieChartRows.add(['External', 0]);

[turnidge, 2015/09/16 17:00:28]

Couldl have a helper:

initBlahPieChartRows(_newPieChartRows)

Your call

[Cutch, 2015/09/28 20:58:17]

Done.

     // Create class table model.
     var columns = [
       new SortedTableColumn('Class'),
@@ -84,14 +87,31 @@ class HeapProfileElement extends ObservatoryElement {
     classTable.sortColumnIndex = 2;
   }
 
+  LayoutArea _makePieChart(String id, List rows) {
+    var wrapper = shadowRoot.querySelector(id);
+    var areaHost = wrapper.querySelector('.chart-host');
+    assert(areaHost != null);
+    var legendHost = wrapper.querySelector('.chart-legend-host');
+    assert(legendHost != null);
+    var series = new ChartSeries(id, [1], new PieChartRenderer());

[turnidge, 2015/09/16 17:00:28]

Just curious, what is a ChartSeries?

[Cutch, 2015/09/28 20:58:17]

It is "one or more columns of ChartData rendered together".

+    var config = new ChartConfig([series], [0]);
+    config.minimumSize = new Rect(300, 300);
+    config.legend = new ChartLegend(legendHost, showValues: true);
+    var data = new ChartData(_pieChartColumns, rows);
+    var area = new LayoutArea(areaHost,
+                              data,
+                              config,
+                              state: new ChartState(),
+                              autoUpdate: false);
+    area.addChartBehavior(new AxisLabelTooltip());
+    return area;
+  }
+
   @override
   void attached() {
     super.attached();
-    // Grab the pie chart divs.
-    _newPieChart = new Chart('PieChart',
-        shadowRoot.querySelector('#newPieChart'));
-    _oldPieChart = new Chart('PieChart',
-        shadowRoot.querySelector('#oldPieChart'));
+    _newPieChart = _makePieChart('#new-pie-chart', _newPieChartRows);
+    _oldPieChart = _makePieChart('#old-pie-chart', _oldPieChartRows);
     _classTableBody = shadowRoot.querySelector('#classTableBody');
     _subscriptionFuture =
         app.vm.listenEventStream(VM.kGCStream, _onEvent);
@@ -134,16 +154,12 @@ class HeapProfileElement extends ObservatoryElement {
 
   void _updatePieCharts() {
     assert(profile != null);
-    _newPieDataTable.clearRows();
-    _newPieDataTable.addRow(['Used', isolate.newSpace.used]);
-    _newPieDataTable.addRow(['Free',
-        isolate.newSpace.capacity - isolate.newSpace.used]);
-    _newPieDataTable.addRow(['External', isolate.newSpace.external]);
-    _oldPieDataTable.clearRows();
-    _oldPieDataTable.addRow(['Used', isolate.oldSpace.used]);
-    _oldPieDataTable.addRow(['Free',
-        isolate.oldSpace.capacity - isolate.oldSpace.used]);
-    _oldPieDataTable.addRow(['External', isolate.oldSpace.external]);
+    _newPieChartRows[0][1] = isolate.newSpace.used;
+    _newPieChartRows[1][1] = isolate.newSpace.capacity - isolate.newSpace.used;
+    _newPieChartRows[2][1] = isolate.newSpace.external;
+    _oldPieChartRows[0][1] = isolate.oldSpace.used;
+    _oldPieChartRows[1][1] = isolate.oldSpace.capacity - isolate.oldSpace.used;
+    _oldPieChartRows[2][1] = isolate.oldSpace.external;

[turnidge, 2015/09/16 17:00:28]

Consider naming the indices: 0 -> kUsedIdx, 1 -> kFreeIdx, etc.

Could have a helper function for setting this up:

_initMyPieChartRows(_newPieChartRows, isolate.newSpace)

Your call.

[Cutch, 2015/09/28 20:58:17]

Done.

   }
 
   void _updateClasses() {
@@ -268,8 +284,8 @@ class HeapProfileElement extends ObservatoryElement {
   }
 
   void _drawCharts() {
-    _newPieChart.draw(_newPieDataTable);
-    _oldPieChart.draw(_oldPieDataTable);
+    _newPieChart.draw();
+    _oldPieChart.draw();
   }
 
   @observable void changeSort(Event e, var detail, Element target) {