Switch from Google charts to Charted

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

Index: runtime/observatory/lib/src/elements/isolate_summary.dart
diff --git a/runtime/observatory/lib/src/elements/isolate_summary.dart b/runtime/observatory/lib/src/elements/isolate_summary.dart
index 288a21ea61a20f07f0e3a8cad1c5d230216289d6..12ebe8146fff20cf47636f37b03ed756e476421e 100644
--- a/runtime/observatory/lib/src/elements/isolate_summary.dart
+++ b/runtime/observatory/lib/src/elements/isolate_summary.dart
@@ -4,8 +4,10 @@
 
 library isolate_summary_element;
 
+import 'dart:html';
 import 'observatory_element.dart';
-import 'package:observatory/app.dart';
+import 'package:charted/charted.dart';
+import "package:charted/charts/charts.dart";
 import 'package:observatory/service.dart';
 import 'package:polymer/polymer.dart';
 
@@ -38,28 +40,47 @@ class IsolateSharedSummaryElement extends ObservatoryElement {
 }
 
 class CounterChart {
-  var _table = new DataTable();
-  var _chart;
+  final HtmlElement _wrapper;
+  HtmlElement _areaHost;
+  HtmlElement _legendHost;
+  LayoutArea _area;
+  ChartData _data;
+  final _columns = [
+      new ChartColumnSpec(label: 'Type', type: ChartColumnSpec.TYPE_STRING),
+      new ChartColumnSpec(label: 'Percent', formatter: (v) => v.toString())
+  ];
+
+  CounterChart(this._wrapper) {
+    assert(_wrapper != null);
+    _areaHost = _wrapper.querySelector('.chart-host');
+    assert(_areaHost != null);
+    _areaHost.clientWidth;
+    _legendHost = _wrapper.querySelector('.chart-legend-host');
+    assert(_legendHost != null);
+    var series = new ChartSeries("Work", [1], new PieChartRenderer(
+      sortDataByValue: false
+    ));
+    var config = new ChartConfig([series], [0]);
+    config.minimumSize = new Rect(200, 200);
+    config.legend = new ChartLegend(_legendHost, showValues: true);
+    _data = new ChartData(_columns, []);
+    _area = new LayoutArea(_areaHost,
+                           _data,
+                           config,
+                           state: new ChartState(),
+                           autoUpdate: false);
+    _area.addChartBehavior(new Hovercard());
+    _area.addChartBehavior(new AxisLabelTooltip());
+  }
 
   void update(Map counters) {
-    if (_table.columns == 0) {
-      // Initialize.
-      _table.addColumn('string', 'Name');
-      _table.addColumn('number', 'Value');
-    }
-    _table.clearRows();
+    var rows = [];
     for (var key in counters.keys) {
       var value = double.parse(counters[key].split('%')[0]);
-      _table.addRow([key, value]);
-    }
-  }
-
-  void draw(var element) {
-    if (_chart == null) {
-      assert(element != null);
-      _chart = new Chart('PieChart', element);
+      rows.add([key, value]);
     }
-    _chart.draw(_table);
+    _area.data = new ChartData(_columns, rows);
+    _area.draw();
   }
 }
 
@@ -70,24 +91,19 @@ class IsolateCounterChartElement extends ObservatoryElement {
   @published ObservableMap counters;
   CounterChart chart;
 
+  attached() {
+    super.attached();
+    chart =
+        new CounterChart(shadowRoot.querySelector('#isolate-counter-chart'));
+  }
+
   void countersChanged(oldValue) {
     if (counters == null) {
       return;
     }
-    // Lazily create the chart.
-    if (GoogleChart.ready && chart == null) {
-      chart = new CounterChart();
-    }
     if (chart == null) {
       return;
     }
     chart.update(counters);
-    var element = shadowRoot.querySelector('#counterPieChart');
-    if (element != null) {
-      chart.draw(element);
-    }
   }
 }
-
-
-