Switch from Google charts to Charted

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

 // Copyright (c) 2014, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 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';
 import 'package:polymer/polymer.dart';
 
 class ClassSortedTable extends SortedTable {
 
   ClassSortedTable(columns) : super(columns);
 
   @override
   dynamic getSortKeyFor(int row, int col) {
     if (col == 0) {
       // Use class name as sort key.
       return rows[row].values[col].name;
     }
     return super.getSortKeyFor(row, col);
   }
 }
 
 @CustomTag('heap-profile')
 class HeapProfileElement extends ObservatoryElement {
   @observable String lastServiceGC = '---';
   @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;
 
   @published bool autoRefresh = false;
   var _subscriptionFuture;
 
   @published Isolate isolate;
   @observable ServiceMap profile;
 
+  final _pieChartColumns = [
+      new ChartColumnSpec(label: 'Type', type: ChartColumnSpec.TYPE_STRING),
+      new ChartColumnSpec(label: 'Size', formatter: (v) => v.toString())
+  ];
+
   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');
-
+    _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'),
       new SortedTableColumn(''),  // Spacer column.
       new SortedTableColumn.withFormatter('Accumulated Size (New)',
                                           Utils.formatSize),
       new SortedTableColumn.withFormatter('Accumulated Instances',
                                           Utils.formatCommaSeparated),
       new SortedTableColumn.withFormatter('Current Size',
                                           Utils.formatSize),
       new SortedTableColumn.withFormatter('Current Instances',
                                           Utils.formatCommaSeparated),
       new SortedTableColumn(''),  // Spacer column.
       new SortedTableColumn.withFormatter('Accumulator Size (Old)',
                                           Utils.formatSize),
       new SortedTableColumn.withFormatter('Accumulator Instances',
                                           Utils.formatCommaSeparated),
       new SortedTableColumn.withFormatter('Current Size',
                                           Utils.formatSize),
       new SortedTableColumn.withFormatter('Current Instances',
                                           Utils.formatCommaSeparated)
     ];
     classTable = new ClassSortedTable(columns);
     // By default, start with accumulated new space bytes.
     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);
   }
 
   @override
   void detached() {
     cancelFutureSubscription(_subscriptionFuture);
     _subscriptionFuture = null;
     super.detached();
@@ skipping 22 matching lines @@
       refreshAutoPending = false;
       // Keep refreshing if at least one GC event was received while waiting.
       if (refreshAutoQueued) {
         refreshAuto();
       }
     }).catchError(app.handleException);
   }
 
   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() {
     for (ServiceMap clsAllocations in profile['members']) {
       Class cls = clsAllocations['class'];
       if (cls == null) {
         continue;
       }
       cls.newSpace.update(clsAllocations['new']);
       cls.oldSpace.update(clsAllocations['old']);
@@ skipping 104 matching lines @@
     assert(_classTableBody.children.length == classTable.sortedRows.length);
     // Fill table.
     for (var i = 0; i < classTable.sortedRows.length; i++) {
       var rowIndex = classTable.sortedRows[i];
       var tr = _classTableBody.children[i];
       _fillClassTableDomRow(tr, rowIndex);
     }
   }
 
   void _drawCharts() {
-    _newPieChart.draw(_newPieDataTable);
-    _oldPieChart.draw(_oldPieDataTable);
+    _newPieChart.draw();
+    _oldPieChart.draw();
   }
 
   @observable void changeSort(Event e, var detail, Element target) {
     if (target is TableCellElement) {
       if (classTable.sortColumnIndex != target.cellIndex) {
         classTable.sortColumnIndex = target.cellIndex;
         classTable.sortDescending = true;
       } else {
         classTable.sortDescending = !classTable.sortDescending;
       }
@@ skipping 83 matching lines @@
   }
 
   @observable String formattedTotalCollectionTime(bool newSpace) {
     if (profile == null) {
       return '';
     }
     var heap = newSpace ? isolate.newSpace : isolate.oldSpace;
     return '${Utils.formatSeconds(heap.totalCollectionTimeInSeconds)} secs';
   }
 }