source: Dev/trunk/src/client/dojox/treemap/tests/test.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 6.5 KB
Line 
1<!DOCTYPE HTML>
2<html>
3
4<head>
5        <style type="text/css">
6                body, html { width:100%; height:100%; margin:0; padding:0 }
7                #borderContainer { width:100%; height:100% }
8        </style>
9
10        <style type="text/css">
11                @import "../../../dojo/resources/dojo.css";
12                @import "../themes/TreeMap.css";
13                @import "../themes/DrillDownUp.css";
14                @import "../../../dijit/themes/claro/claro.css";
15        </style>
16
17        <script type="text/javascript">
18                var djConfig = {
19                        parseOnLoad: false,
20                        async: true
21                }
22        </script>
23
24        <script type="text/javascript" src="../../../dojo/dojo.js">
25        </script>
26
27        <script type="text/javascript">
28
29                var groupByChanged, sizeByChanged, colorByChanged,
30                                thresholdChanged, neutralChanged, MyTreeMap, refreshData;
31
32                require(["dojo/ready", "dojo/dom", "dojo/_base/Color", "dojo/_base/declare", "dojo/parser",
33                        "dijit/registry",
34                        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojox/treemap/TreeMap",
35                        "dojox/color/MeanColorModel", "dojox/data/CsvStore", "dojo/store/DataStore",
36                        "dojo/store/Observable",
37                        "dijit/form/RadioButton", "dijit/form/ComboBox", "dijit/form/Button", "dojox/treemap/Keyboard",
38                        "dojox/treemap/DrillDownUp"],
39                        function(ready, dom, Color, declare, parser, registry, BorderContainer, ContentPane, TreeMap,
40                                         MeanColorModel, CsvStore, DataStore, Observable, RadioButton, ComboBox, Button, Keyboard,
41                                         DrillDownUp) {
42
43                                var colorModel = new MeanColorModel(new Color(Color.named.green), new Color(Color.named.red));
44                                var store = new DataStore({ store: new CsvStore({url: "freight.csv"}) });
45
46                                ready(function(){
47                                        MyTreeMap = declare([TreeMap, Keyboard, DrillDownUp]);
48                                        parser.parse();
49                                        var treeMap = registry.byId("treeMap");
50                                        treeMap.set("colorModel", colorModel);
51                                        treeMap.set("tooltipFunc",
52                                                        function(data, store) { return "Total Trade:" + data["Trade"]; });
53                                        treeMap.set("store", Observable(store));
54                                        treeMap.on("change", function(){
55                                                console.log("toto");
56                                        });
57                                });
58
59                                groupByChanged = function(value){
60                                        var groupBy = null;
61                                        if(dom.byId("g2").checked){
62                                                groupBy = ["Mode"];
63                                        } else if(dom.byId("g3").checked){
64                                                groupBy = ["State"];
65                                        }else if(dom.byId("g4").checked){
66                                                groupBy = ["Mode", "State"];
67                                        }
68                                        var treeMap = registry.byId("treeMap");
69                                        if(groupBy != null){
70                                                treeMap.set("groupAttrs", groupBy);
71                                        }else{
72                                                treeMap.set("groupAttrs", null);
73                                        }
74                                }
75
76                                sizeByChanged = function(value){
77                                        var sizeBy = null;
78                                        if(dom.byId("s2").checked){
79                                                sizeBy = "Trade";
80                                        }else if(dom.byId("s3").checked){
81                                                sizeBy = "Exports";
82                                        }else if(dom.byId("s4").checked){
83                                                sizeBy = "Imports";
84                                        }
85                                        var treeMap = registry.byId("treeMap");
86                                        treeMap.set("areaAttr", sizeBy);
87                                }
88
89                                colorByChanged = function(value){
90                                        var colorBy = null;
91                                        if(dom.byId("c2").checked){
92                                                colorBy = "Trade";
93                                        }else if(dom.byId("c3").checked){
94                                                colorBy = "Exports";
95                                        }else if(dom.byId("c4").checked){
96                                                colorBy = "Imports";
97                                        }
98                                        var treeMap = registry.byId("treeMap");
99                                        treeMap.set("colorAttr", colorBy);
100                                }
101
102                                thresholdChanged = function(value){
103                                        var treeMap = registry.byId("treeMap");
104                                        treeMap.set("labelThreshold", value);
105                                };
106
107                                neutralChanged = function(value){
108                                        var treeMap = registry.byId("treeMap");
109                                        if(value){
110                                                var newModel = new MeanColorModel(new Color(Color.named.green), new Color(Color.named.red));
111                                                newModel.computeNeutral = function(min, max, sum, values){
112                                                        return sum / values.length;
113                                                }
114                                                treeMap.set("colorModel", newModel);
115                                        }else{
116                                                treeMap.set("colorModel", colorModel);
117                                        }
118                                }
119                        });
120        </script>
121
122</head>
123
124<body class="claro">
125
126<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" id="borderContainer">
127        <div dojoType="dijit.layout.ContentPane" splitter="true" region="center">
128                <div id="treeMap" dojoType="MyTreeMap" labelAttr="Name" selectionMode="multiple"
129                         style="width: 100%; height: 100%;">
130                </div>
131        </div>
132        <div dojoType="dijit.layout.ContentPane" splitter="true" region="trailing"  style="width: 200px;">
133                <label>Group by:</label>
134                <br/>
135                <input type="radio" dojoType="dijit.form.RadioButton" name="groupBy" id="g1" checked value="none" onChange="groupByChanged" />
136                <label for="g1">None</label>
137                <br/>
138                <input type="radio" dojoType="dijit.form.RadioButton" name="groupBy" id="g2" value="continent" onChange="groupByChanged" />
139                <label for="g2">Mode</label>
140                <br/>
141                <input type="radio" dojoType="dijit.form.RadioButton" name="groupBy" id="g3" value="government" onChange="groupByChanged" />
142                <label for="g3">State</label>
143                <br/>
144                <input type="radio" dojoType="dijit.form.RadioButton" name="groupBy" id="g4" value="government" onChange="groupByChanged" />
145                <label for="g4">Mode then State</label>
146                <br/>
147                <br/>
148                <br/>
149                <label>Size by:</label>
150                <br/>
151                <input type="radio" dojoType="dijit.form.RadioButton" name="sizeBy" id="s1" checked value="none" onChange="sizeByChanged" />
152                <label for="s1">None</label>
153                <br/>
154                <input type="radio" dojoType="dijit.form.RadioButton" name="sizeBy" id="s2" onChange="sizeByChanged" />
155                <label for="s2">Trade</label>
156                <br/>
157                <input type="radio" dojoType="dijit.form.RadioButton" name="sizeBy" id="s3" onChange="sizeByChanged" />
158                <label for="s3">Exports</label>
159                <br/>
160                <input type="radio" dojoType="dijit.form.RadioButton" name="sizeBy" id="s4" onChange="sizeByChanged" />
161                <label for="s3">Imports</label>
162                <br/>
163                <br/>
164                <br/>
165                <label>Color by:</label>
166                <br/>
167                <input type="radio" dojoType="dijit.form.RadioButton" name="colorBy" id="c1" checked value="none" onChange="colorByChanged"/>
168                <label for="c1">None</label>
169                <br/>
170                <input type="radio" dojoType="dijit.form.RadioButton" name="colorBy" id="c2" onChange="colorByChanged" />
171                <label for="c2">Trade</label>
172                <br/>
173                <input type="radio" dojoType="dijit.form.RadioButton" name="colorBy" id="c3" onChange="colorByChanged" />
174                <label for="c3">Exports</label>
175                <br/>
176                <input type="radio" dojoType="dijit.form.RadioButton" name="colorBy" id="c4" onChange="colorByChanged" />
177                <label for="c4">Imports</label>
178                <br/>
179                <br/>
180                <br/>
181                <label>Label threshold</label>
182                <br/>
183                <select id="labelThreshold" dojoType="dijit.form.ComboBox" onChange="thresholdChanged">
184                        <option selected>NaN</option>
185                        <option>1</option>
186                        <option>2</option>
187                </select>
188                <br/>
189                <br/>
190                <br/>
191                <label>Mean/Average neutral value</label>
192                <br/>
193                <select id="neutral" dojoType="dijit.form.CheckBox" onChange="neutralChanged">
194                </select>
195        </div>
196</div>
197
198</body>
199
200</html>
Note: See TracBrowser for help on using the repository browser.