OLD | NEW |
1 /* | 1 /* |
2 * Copyright 2014 Google Inc. All rights reserved. | 2 * Copyright 2014 Google Inc. All rights reserved. |
3 * | 3 * |
4 * Use of this source code is governed by a BSD-style | 4 * Use of this source code is governed by a BSD-style |
5 * license that can be found in the LICENSE file or at | 5 * license that can be found in the LICENSE file or at |
6 * https://developers.google.com/open-source/licenses/bsd | 6 * https://developers.google.com/open-source/licenses/bsd |
7 */ | 7 */ |
8 | 8 |
9 library charted.demo.interactive; | 9 library charted.demo.interactive; |
10 | 10 |
11 import 'dart:html'; | 11 import 'dart:html'; |
12 import 'package:observe/observe.dart'; | 12 import 'package:observe/observe.dart'; |
13 import 'package:charted/charts/charts.dart'; | 13 import 'package:charted/charts/charts.dart'; |
14 | 14 |
15 import 'demo_charts.dart'; | 15 import 'demo_charts.dart'; |
16 | 16 |
17 const List DIMENSION_COLUMNS = const[0, 4]; | 17 const List<int> DIMENSION_COLUMNS = const <int>[0, 4]; |
18 | 18 |
19 int customSeriesCounter = 0; | 19 int customSeriesCounter = 0; |
20 | 20 |
21 Map RENDERERS = { | 21 Map RENDERERS = { |
22 'bar-chart': 'Bar chart', | 22 'bar-chart': 'Bar chart', |
23 'line-chart': 'Line chart', | 23 'line-chart': 'Line chart', |
24 'stacked-bar-chart': 'Stacked bar chart', | 24 'stacked-bar-chart': 'Stacked bar chart', |
25 'waterfall-chart': 'Waterfall chart', | 25 'waterfall-chart': 'Waterfall chart', |
26 }; | 26 }; |
27 | 27 |
28 CartesianRenderer getRendererForType(String name) { | 28 CartesianRenderer getRendererForType(String name) { |
29 if (name == 'bar-chart') return new BarChartRenderer(); | 29 if (name == 'bar-chart') return new BarChartRenderer(); |
30 if (name == 'line-chart') return new LineChartRenderer(); | 30 if (name == 'line-chart') return new LineChartRenderer(); |
31 if (name == 'stacked-bar-chart') return new StackedBarChartRenderer(); | 31 if (name == 'stacked-bar-chart') return new StackedBarChartRenderer(); |
32 return new BarChartRenderer(); | 32 return new BarChartRenderer(); |
33 } | 33 } |
34 | 34 |
35 String getTypeForRenderer(CartesianRenderer renderer) { | 35 String getTypeForRenderer(CartesianRenderer renderer) { |
36 if (renderer is BarChartRenderer) return 'bar-chart'; | 36 if (renderer is BarChartRenderer) return 'bar-chart'; |
37 if (renderer is LineChartRenderer) return 'line-chart'; | 37 if (renderer is LineChartRenderer) return 'line-chart'; |
38 if (renderer is StackedBarChartRenderer) return 'stacked-bar-chart'; | 38 if (renderer is StackedBarChartRenderer) return 'stacked-bar-chart'; |
39 return 'bar-chart'; | 39 return 'bar-chart'; |
40 } | 40 } |
41 | 41 |
42 main() { | 42 main() { |
43 List DATA_SOURCE = ORDINAL_DATA; | 43 List<List> DATA_SOURCE = ORDINAL_DATA; |
44 ChartSeries activeSeries, | 44 ChartSeries activeSeries, |
45 defaultSeries = new ChartSeries("Default series", | 45 defaultSeries = new ChartSeries("Default series", |
46 new ObservableList.from([ 2, 3 ]), new BarChartRenderer()); | 46 new ObservableList.from([ 2, 3 ]), new BarChartRenderer()); |
47 | 47 |
48 ObservableList rows = new ObservableList.from(DATA_SOURCE.sublist(0, 10)), | 48 var rows = new ObservableList<List>.from(DATA_SOURCE.sublist(0, 10)); |
49 columns = new ObservableList.from(ORDINAL_DATA_COLUMNS), | 49 var columns = new ObservableList<ChartColumnSpec>.from(ORDINAL_DATA_COLUMNS); |
50 seriesList = new ObservableList.from([ defaultSeries ]); | 50 var seriesList = new ObservableList<ChartSeries>.from([ defaultSeries ]); |
51 | 51 |
52 ChartData data = new ChartData(columns, rows); | 52 ChartData data = new ChartData(columns, rows); |
53 ChartConfig config = new ChartConfig(seriesList, DIMENSION_COLUMNS); | 53 ChartConfig config = new ChartConfig(seriesList, DIMENSION_COLUMNS); |
54 | 54 |
55 CartesianArea area = | 55 CartesianArea area = |
56 new CartesianArea(querySelector('.chart-host'), | 56 new CartesianArea(querySelector('.chart-host'), |
57 data, config, autoUpdate: true, useTwoDimensionAxes: false); | 57 data, config, autoUpdate: true, useTwoDimensionAxes: false); |
58 | 58 |
59 area.addChartBehavior(new ChartTooltip()); | 59 area.addChartBehavior(new ChartTooltip()); |
60 config.legend = new ChartLegend(querySelector('.chart-legend-host')); | 60 config.legend = new ChartLegend(querySelector('.chart-legend-host')); |
61 | 61 |
62 area.draw(); | 62 area.draw(); |
63 | 63 |
64 /* | 64 /* |
65 * Create and hook up the control panel | 65 * Create and hook up the control panel |
66 */ | 66 */ |
67 | 67 |
68 ButtonElement addRowButton = querySelector('#add-row'), | 68 ButtonElement addRowButton = querySelector('#add-row'), |
69 removeRowButton = querySelector('#remove-row'), | 69 removeRowButton = querySelector('#remove-row'), |
70 addSeriesButton = querySelector('#add-series'), | 70 addSeriesButton = querySelector('#add-series'), |
71 removeSeriesButton = querySelector('#remove-series'); | 71 removeSeriesButton = querySelector('#remove-series'); |
72 | 72 |
73 InputElement useRTLScriptCheckBox = querySelector('#rtl-use-script'), | 73 InputElement useRTLScriptCheckBox = querySelector('#rtl-use-script'), |
74 switchAxesForRTLCheckBox = querySelector('#rtl-switch-axes'), | |
75 useRTLLayoutCheckBox = querySelector('#rtl-use-layout'); | 74 useRTLLayoutCheckBox = querySelector('#rtl-use-layout'); |
76 | 75 |
77 SelectElement seriesSelect = querySelector('#select-series'), | 76 SelectElement seriesSelect = querySelector('#select-series'), |
78 rendererSelect = querySelector('#select-renderer'); | 77 rendererSelect = querySelector('#select-renderer'); |
79 | 78 |
80 Element columnButtons = querySelector('#column-buttons'), | 79 Element columnButtons = querySelector('#column-buttons'), |
81 chartsContainer = querySelector('.chart-wrapper'); | 80 chartsContainer = querySelector('.chart-wrapper'); |
82 | 81 |
83 /* | 82 /* |
84 * RTL handling | 83 * RTL handling |
(...skipping 100 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
185 List<Element> buttons = querySelectorAll('.column-button'); | 184 List<Element> buttons = querySelectorAll('.column-button'); |
186 InputElement firstChecked; | 185 InputElement firstChecked; |
187 for (int i = 0; i < buttons.length && firstChecked == null; i++) { | 186 for (int i = 0; i < buttons.length && firstChecked == null; i++) { |
188 if ((buttons[i] as InputElement).checked) firstChecked = buttons[i]; | 187 if ((buttons[i] as InputElement).checked) firstChecked = buttons[i]; |
189 } | 188 } |
190 | 189 |
191 List measures = activeSeries.measures as List; | 190 List measures = activeSeries.measures as List; |
192 int index = buttons.indexOf(e.target) + 1; | 191 int index = buttons.indexOf(e.target) + 1; |
193 if ((e.target as InputElement).checked) { | 192 if ((e.target as InputElement).checked) { |
194 measures.add(index); | 193 measures.add(index); |
195 buttons.forEach((InputElement b) => b.disabled = false); | 194 buttons.forEach((Element b) { |
| 195 (b as InputElement).disabled = false; |
| 196 }); |
196 } else { | 197 } else { |
197 measures.remove(index); | 198 measures.remove(index); |
198 if (measures.length <= 1) firstChecked.disabled = true; | 199 if (measures.length <= 1) firstChecked.disabled = true; |
199 } | 200 } |
200 } | 201 } |
201 | 202 |
202 updateColumnsList() { | 203 updateColumnsList() { |
203 columnButtons.children.clear(); | 204 columnButtons.children.clear(); |
204 for (int i = 0; i < ORDINAL_DATA_COLUMNS.length; ++i) { | 205 for (int i = 0; i < ORDINAL_DATA_COLUMNS.length; ++i) { |
205 if (i == 0) continue; | 206 if (i == 0) continue; |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
247 | 248 |
248 | 249 |
249 /* | 250 /* |
250 * Update UI | 251 * Update UI |
251 */ | 252 */ |
252 | 253 |
253 updateColumnsList(); | 254 updateColumnsList(); |
254 updateRendererSelector(); | 255 updateRendererSelector(); |
255 updateSeriesSelector(); | 256 updateSeriesSelector(); |
256 } | 257 } |
OLD | NEW |