Index: packages/charted/examples/layout/treemap_demo.dart |
diff --git a/packages/charted/examples/layout/treemap_demo.dart b/packages/charted/examples/layout/treemap_demo.dart |
new file mode 100644 |
index 0000000000000000000000000000000000000000..5733c0a77c5dbf8bfd2133f598695e7aa60f9a92 |
--- /dev/null |
+++ b/packages/charted/examples/layout/treemap_demo.dart |
@@ -0,0 +1,76 @@ |
+/* |
+ * Copyright 2015 Google Inc. All rights reserved. |
+ * |
+ * Use of this source code is governed by a BSD-style |
+ * license that can be found in the LICENSE file or at |
+ * https://developers.google.com/open-source/licenses/bsd |
+ */ |
+ |
+library charted.demo.treemap; |
+ |
+import 'dart:html'; |
+ |
+import '../../lib/layout/layout.dart'; |
+import '../../lib/selection/selection.dart'; |
+import '../../lib/charts/charts.dart'; |
+import 'dart:math'; |
+ |
+main() { |
+ |
+ // Label, parent column, value |
+ var rows = [ |
+ ['aaa', 3, 25], // p = ddd |
+ ['bbb', 2, 10], // p = ccc, leaf |
+ ['ccc', -1, 145], // root |
+ ['ddd', 2, 125], // p = ccc |
+ ['eee', 3, 30], // p = ddd |
+ ['fff', 4, 10], // p = eee, leaf |
+ ['ggg', 3, 30], // p = ddd, leaf |
+ ['hhh', 2, 10], // p = ccc, leaf |
+ ['iii', 3, 20], // p = ddd, leaf |
+ ['jjj', 3, 13], // p = ddd, leaf |
+ ['kkk', 3, 7], // p = ddd, leaf |
+ ['lll', 4, 15], // p = eee, leaf |
+ ['mmm', 4, 5], // p = eee, leaf |
+ ['nnn', 0, 13], // p = aaa, leaf |
+ ['ooo', 0, 12], // p = aaa, leaf |
+ ]; |
+ |
+ var width = 400, |
+ height = 300; |
+ |
+ var theme = new QuantumChartTheme(); |
+ var host = querySelector('.demos-container'); |
+ var scope = new SelectionScope.element(host); |
+ var root = scope.selectElements([host]); |
+ |
+ void _createTreeMap(var host, var mode) { |
+ var tree = new TreeMapLayout(); |
+ tree.mode = mode; |
+ tree.size = [width, height]; |
+ List nodes = tree.layout(rows, 1, 0, 2); |
+ var treemap = root.select(host); |
+ var div = treemap.append('div') |
+ ..style('position', 'relative') |
+ ..style('width', '${width}px') |
+ ..style('height', '${height}px'); |
+ |
+ var node = div.selectAll(".node").data(nodes); |
+ node.enter.append("div") |
+ ..styleWithCallback('left', (d, i, e) => '${d.x}px') |
+ ..styleWithCallback('top', (d, i, e) => '${d.y}px') |
+ ..styleWithCallback('width', (d, i, e) => '${max(0, d.dx - 1)}px') |
+ ..styleWithCallback('height', (d, i, e) => '${max(0, d.dy - 1)}px') |
+ ..styleWithCallback('background', (d, i, e) => d.children.isNotEmpty ? |
+ theme.getColorForKey(d.label, ChartTheme.STATE_NORMAL) : null) |
+ ..textWithCallback((d, i, e) => d.children.isNotEmpty ? null : d.label) |
+ ..classed('node'); |
+ |
+ } |
+ _createTreeMap('.squarify', TreeMapLayout.TREEMAP_LAYOUT_SQUARIFY); |
+ _createTreeMap('.slice', TreeMapLayout.TREEMAP_LAYOUT_SLICE); |
+ _createTreeMap('.dice', TreeMapLayout.TREEMAP_LAYOUT_DICE); |
+ _createTreeMap('.slicedice', TreeMapLayout.TREEMAP_LAYOUT_SLICE_DICE); |
+} |
+ |
+ |