← Back to branch summary

~mortenoh/+junk/dhis2-detailed-import-export

« back to all changes in this revision

Viewing changes to gis/dhis-gis-geostat/mfbase/mapfish/widgets/geostat/Choropleth.js

  • Committer: larshelge at gmail
  • Date: 2009-03-03 16:46:36 UTC
  • Revision ID: larshelge@gmail.com-20090303164636-2sjlrquo7ib1gf7r
Initial check-in

Show diffs side-by-side

added added

removed removed

Lines of Context:
gis/dhis-gis-geostat/mfbase/mapfish/widgets/geostat/Choropleth.js
 
1
/*
 
2
 * Copyright (C) 2007-2008  Camptocamp
 
3
 *
 
4
 * This file is part of MapFish Client
 
5
 *
 
6
 * MapFish Client is free software: you can redistribute it and/or modify
 
7
 * it under the terms of the GNU General Public License as published by
 
8
 * the Free Software Foundation, either version 3 of the License, or
 
9
 * (at your option) any later version.
 
10
 *
 
11
 * MapFish Client is distributed in the hope that it will be useful,
 
12
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 
13
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 
14
 * GNU General Public License for more details.
 
15
 *
 
16
 * You should have received a copy of the GNU General Public License
 
17
 * along with MapFish Client.  If not, see <http://www.gnu.org/licenses/>.
 
18
 */
 
19
 
 
20
/**
 
21
 * @requires core/GeoStat/Choropleth.js
 
22
 * @requires core/Color.js
 
23
 */
 
24
 
 
25
Ext.namespace('mapfish.widgets', 'mapfish.widgets.geostat');
 
26
 
 
27
/**
 
28
 * Class: mapfish.widgets.geostat.Choropleth
 
29
 * Use this class to create a widget allowing to display choropleths
 
30
 * on the map.
 
31
 *
 
32
 * Inherits from:
 
33
 * - {Ext.FormPanel}
 
34
 */
 
35
 
 
36
mapfish.widgets.geostat.Choropleth = Ext.extend(Ext.FormPanel, {
 
37
 
 
38
    /**
 
39
     * APIProperty: layer
 
40
     * {<OpenLayers.Layer.Vector>} The vector layer containing the features that
 
41
     *      are styled based on statistical values. If none is provided, one will
 
42
     *      be created.
 
43
     */
 
44
    layer: null,
 
45
 
 
46
    /**
 
47
     * APIProperty: format
 
48
     * {<OpenLayers.Format>} The OpenLayers format used to get features from
 
49
     *      the HTTP request response. GeoJSON is used if none is provided.
 
50
     */
 
51
    format: null,
 
52
 
 
53
    /**
 
54
     * APIProperty: url
 
55
     * {String} The URL to the web service. If none is provided, the features
 
56
     *      found in the provided vector layer will be used.
 
57
     */
 
58
    url: null,
 
59
 
 
60
    /**
 
61
     * APIProperty: featureSelection
 
62
     * {Boolean} A boolean value specifying whether feature selection must
 
63
     *      be put in place. If true a popup will be displayed when the
 
64
     *      mouse goes over a feature.
 
65
     */
 
66
    featureSelection: true,
 
67
 
 
68
    /**
 
69
     * APIProperty: nameAttribute
 
70
     * {String} The feature attribute that will be used as the popup title.
 
71
     *      Only applies if featureSelection is true.
 
72
     */
 
73
    nameAttribute: null,
 
74
 
 
75
    /**
 
76
     * APIProperty: indicator
 
77
     * {String} (read-only) The feature attribute currently chosen
 
78
     *     Useful if callbacks are registered on 'featureselected'
 
79
     *     and 'featureunselected' events
 
80
     */
 
81
    indicator: null,
 
82
 
 
83
    /**
 
84
     * APIProperty: indicatorText
 
85
     * {String} (read-only) The raw value of the currently chosen indicator
 
86
     *     (ie. human readable)
 
87
     *     Useful if callbacks are registered on 'featureselected'
 
88
     *     and 'featureunselected' events
 
89
     */
 
90
    indicatorText: null,
 
91
 
 
92
    /**
 
93
     * Property: coreComp
 
94
     * {<mapfish.GeoStat.ProportionalSymbol>} The core component object.
 
95
     */
 
96
    coreComp: null,
 
97
 
 
98
    /**
 
99
     * Property: classificationApplied
 
100
     * {Boolean} true if the classify was applied
 
101
     */
 
102
    classificationApplied: false,
 
103
 
 
104
    /**
 
105
     * Property: ready
 
106
     * {Boolean} true if the widget is ready to accept user commands.
 
107
     */
 
108
    ready: false,
 
109
 
 
110
    /**
 
111
     * Property: border
 
112
     *     Styling border
 
113
     */
 
114
    border: false,
 
115
 
 
116
    /**
 
117
     * APIProperty: loadMask
 
118
     *     An Ext.LoadMask config or true to mask the widget while loading (defaults to false).
 
119
     */
 
120
    loadMask : false,
 
121
 
 
122
    /**
 
123
     * APIProperty: labelGenerator
 
124
     *     Generator for bin labels
 
125
     */
 
126
    labelGenerator: null,
 
127
 
 
128
    /**
 
129
     * Constructor: mapfish.widgets.geostat.Choropleth
 
130
     *
 
131
     * Parameters:
 
132
     * config - {Object} Config object.
 
133
     */
 
134
 
 
135
    /**
 
136
     * Method: initComponent
 
137
     *    Inits the component
 
138
     */
 
139
     
 
140
    selectedLevel : false,
 
141
     
 
142
    isDrillDown : false,
 
143
    
 
144
    newUrl : false,
 
145
    
 
146
    initComponent : function() {
 
147
    
 
148
    
 
149
        // DHIS
 
150
        indicatorStore = new Ext.data.JsonStore({
 
151
              url: 'http://localhost:8180/dhis-webservice/getAllIndicators.service?format=jsonmin',
 
152
              //baseParams: { format: 'jsonmin' },
 
153
              root: 'indicators',
 
154
              fields: ['id', 'name']//,
 
155
              //autoLoad: true
 
156
            });
 
157
        
 
158
        periodTypeStore = new Ext.data.JsonStore({
 
159
              url: 'http://localhost:8180/dhis-webservice/getAllPeriodTypes.service',
 
160
              baseParams: { format: 'json' },
 
161
              root: 'periodTypes',
 
162
              fields: ['id', 'name'],
 
163
              autoLoad: true
 
164
            });
 
165
            
 
166
        periodStore = new Ext.data.JsonStore({
 
167
              url: 'http://localhost:8180/dhis-webservice/getPeriodsByPeriodType.service',
 
168
              baseParams: { periodTypeId: '9', format: 'json' },
 
169
              root: 'periods',
 
170
              fields: ['id', 'startDate'],
 
171
              autoLoad: true
 
172
            });
 
173
            
 
174
        levelStore = new Ext.data.JsonStore({
 
175
              url: 'http://localhost:8180/dhis-webservice/getOrganisationUnitLevels.service',
 
176
              baseParams: { format: 'json' },
 
177
              root: 'organisationUnitLevels',
 
178
              fields: ['level', 'name'],
 
179
              autoLoad: true
 
180
            });
 
181
        // end DHIS
 
182
    
 
183
    
 
184
    
 
185
    
 
186
    
 
187
        this.items = [
 
188
        {
 
189
        
 
190
        
 
191
            // DHIS
 
192
 
 
193
            xtype: 'combo',
 
194
            id: 'indicator_cb',
 
195
            fieldLabel: 'Indicator',
 
196
            typeAhead: true,
 
197
            editable: false,
 
198
            valueField: 'id',
 
199
            displayField: 'name',
 
200
            mode: 'remote',
 
201
            forceSelection: true,
 
202
            triggerAction: 'all',
 
203
            emptyText: 'Select indicator',
 
204
            selectOnFocus: true,
 
205
            store: indicatorStore
 
206
        },
 
207
        {
 
208
            xtype: 'combo',
 
209
            id: 'periodtype_cb',
 
210
            fieldLabel: 'Period type',
 
211
            typeAhead: true,
 
212
            editable: false,
 
213
            valueField: 'id',
 
214
            displayField: 'name',
 
215
            mode: 'remote',
 
216
            forceSelection: true,
 
217
            triggerAction: 'all',
 
218
            emptyText: 'Select period type',
 
219
            selectOnFocus: true,
 
220
            store: periodTypeStore,
 
221
            listeners: {
 
222
                'select': {
 
223
                    fn: function()
 
224
                    {
 
225
                        var ptid = Ext.getCmp('periodtype_cb').getValue();
 
226
                        periodStore.baseParams = { periodTypeId: ptid, format: 'json' };
 
227
                        periodStore.reload();
 
228
                    },
 
229
                    scope: this
 
230
                }
 
231
            }
 
232
        },
 
233
 
 
234
        {
 
235
            xtype: 'combo',
 
236
            id: 'period_cb',
 
237
            fieldLabel: 'Period',
 
238
            typeAhead: true,
 
239
            editable: false,
 
240
            valueField: 'id',
 
241
            displayField: 'startDate',
 
242
            mode: 'remote',
 
243
            forceSelection: true,
 
244
            triggerAction: 'all',
 
245
            emptyText: 'Select period',
 
246
            selectOnFocus: true,
 
247
            store: periodStore
 
248
        },
 
249
        
 
250
        {
 
251
            xtype: 'combo',
 
252
            id: 'level_cb',
 
253
            fieldLabel: 'Level',
 
254
            typeAhead: true,
 
255
            editable: false,
 
256
            valueField: 'level',
 
257
            displayField: 'name',
 
258
            mode: 'remote',
 
259
            forceSelection: true,
 
260
            triggerAction: 'all',
 
261
            emptyText: 'Select level',
 
262
            selectOnFocus: true,
 
263
            store: levelStore,
 
264
            listeners: {
 
265
                'select': {
 
266
                    fn: function() {
 
267
                        this.selectedLevel = this.form.findField('level_cb').getValue();
 
268
                        this.newUrl = shapefiles[this.form.findField('level_cb').getValue()];
 
269
                        this.classify(false);
 
270
                    },
 
271
                    scope: this
 
272
                }
 
273
            }
 
274
        },
 
275
        
 
276
        {html:'<br>'},
 
277
        // end DHIS
 
278
        
 
279
 
 
280
/*
 
281
        {
 
282
        
 
283
            xtype: 'combo',
 
284
            fieldLabel: 'Indicator',
 
285
            name: 'indicator',
 
286
            editable: false,
 
287
            valueField: 'value',
 
288
            displayField: 'text',
 
289
            mode: 'local',
 
290
            emptyText: 'Select an indicator',
 
291
            triggerAction: 'all',
 
292
            store: new Ext.data.SimpleStore({
 
293
                fields: ['value', 'text'],
 
294
                data : this.indicators
 
295
            })
 
296
            
 
297
            },
 
298
*/            
 
299
            
 
300
            {
 
301
            xtype: 'combo',
 
302
            fieldLabel: 'Method',
 
303
            name: 'method',
 
304
            hiddenName: 'method',
 
305
            editable: false,
 
306
            valueField: 'value',
 
307
            displayField: 'text',
 
308
            mode: 'local',
 
309
            emptyText: 'Select a method',
 
310
            triggerAction: 'all',
 
311
            store: new Ext.data.SimpleStore({
 
312
                fields: ['value', 'text'],
 
313
                data : [['CLASSIFY_BY_EQUAL_INTERVALS', 'Equal Intervals'],
 
314
                        ['CLASSIFY_BY_QUANTILS', 'Quantils']]
 
315
            })
 
316
            
 
317
            },{
 
318
            xtype: 'combo',
 
319
            fieldLabel: 'Classes',
 
320
            name: 'numClasses',
 
321
            editable: false,
 
322
            valueField: 'value',
 
323
            displayField: 'value',
 
324
            mode: 'local',
 
325
            value: 5,
 
326
            triggerAction: 'all',
 
327
            store: new Ext.data.SimpleStore({
 
328
                fields: ['value'],
 
329
                data: [[0], [1], [2], [3], [4], [5], [6], [7], [8], [9]]
 
330
            })
 
331
            
 
332
            },{
 
333
            xtype: 'colorfield',
 
334
            fieldLabel: 'Color',
 
335
            name: 'colorA',
 
336
            width: 100,
 
337
            allowBlank: false,
 
338
            value: "#FFFF00" /*,
 
339
            listeners: {
 
340
                'valid': {
 
341
                    fn: function() {this.classify(false)},
 
342
                    scope: this
 
343
                }
 
344
            }
 
345
            */
 
346
        },{
 
347
            xtype: 'colorfield',
 
348
            fieldLabel: 'Color',
 
349
            name: 'colorB',
 
350
            width: 100,
 
351
            allowBlank: false,
 
352
            value: "#FF0000"
 
353
        },{
 
354
            xtype: 'button',
 
355
            text: 'Submit',
 
356
            handler: function() {
 
357
                this.classify(true);
 
358
            },
 
359
            scope: this
 
360
        }
 
361
        
 
362
        ];
 
363
 
 
364
        mapfish.widgets.geostat.Choropleth.superclass.initComponent.apply(this);
 
365
    },
 
366
 
 
367
    setUrl: function(url, isDrillDown) {
 
368
    
 
369
        this.url = url;
 
370
        this.isDrillDown = isDrillDown;
 
371
        this.coreComp.setUrl(this.url);
 
372
    },
 
373
 
 
374
    /**
 
375
     * Method: requestSuccess
 
376
     *      Calls onReady callback function and mark the widget as ready.
 
377
     *      Called on Ajax request success.
 
378
     */
 
379
    requestSuccess: function(request) {
 
380
        this.ready = true;
 
381
        this.classify(false);
 
382
 
 
383
        // if widget is rendered, hide the optional mask
 
384
        if (this.loadMask && this.rendered) {
 
385
            this.loadMask.hide();
 
386
        }
 
387
    },
 
388
 
 
389
    /**
 
390
     * Method: requestFailure
 
391
     *      Displays an error message on the console.
 
392
     *      Called on Ajax request failure.
 
393
     */
 
394
    requestFailure: function(request) {
 
395
        OpenLayers.Console.error('Ajax request failed');
 
396
    },
 
397
 
 
398
    /**
 
399
     * Method: getColors
 
400
     *    Retrieves the colors from form elements
 
401
     *
 
402
     * Returns:
 
403
     * {Array(<mapfish.Color>)} an array of two colors (start, end)
 
404
     */
 
405
    getColors: function() {
 
406
        var colorA = new mapfish.ColorRgb();
 
407
        colorA.setFromHex(this.form.findField('colorA').getValue());
 
408
        var colorB = new mapfish.ColorRgb();
 
409
        colorB.setFromHex(this.form.findField('colorB').getValue());
 
410
        return [colorA, colorB];
 
411
    },
 
412
 
 
413
    /**
 
414
     * Method: classify
 
415
     *
 
416
     * Parameters:
 
417
     * exception - {Boolean} If true show a message box to user if either
 
418
     *      the widget isn't ready, or no indicator is specified, or no
 
419
     *      method is specified.
 
420
     */
 
421
    classify: function(exception, wfs) {
 
422
    
 
423
//    alert("classify");
 
424
    
 
425
        if (!this.ready) {
 
426
            if (exception) {
 
427
                Ext.MessageBox.alert('Error', 'Component init not complete');
 
428
            }
 
429
            return;
 
430
        }
 
431
        
 
432
        if (this.newUrl) {
 
433
            var url = this.newUrl;
 
434
            this.newUrl = false;
 
435
            this.setUrl(url, false);
 
436
        }
 
437
        
 
438
        var options = {};
 
439
 
 
440
        if (!this.form.findField('indicator_cb').getValue() ||
 
441
            !this.form.findField('periodtype_cb').getValue() ||
 
442
            !this.form.findField('period_cb').getValue() ||
 
443
            !this.form.findField('level_cb').getValue()) {
 
444
                if (exception) {
 
445
                    Ext.MessageBox.alert('Error', 'You must choose indicator, period and level');
 
446
                }
 
447
                return;
 
448
        }
 
449
        
 
450
        getChoroplethData();
 
451
        
 
452
        // hidden
 
453
        this.indicator = 'value';
 
454
        this.indicatorText = 'Indicator';
 
455
        options.indicator = this.indicator;
 
456
 
 
457
        
 
458
        options.method = this.form.findField('method').getValue();
 
459
        if (!options.method) {
 
460
            if (exception) {
 
461
                Ext.MessageBox.alert('Error', 'You must choose a method');
 
462
            }
 
463
            return;
 
464
        }
 
465
        
 
466
        
 
467
        options.method = mapfish.GeoStat.Distribution[options.method];
 
468
        options.numClasses = this.form.findField('numClasses').getValue();
 
469
        options.colors = this.getColors();
 
470
        
 
471
        this.coreComp.updateOptions(options);
 
472
        this.coreComp.applyClassification();
 
473
        this.classificationApplied = true;
 
474
        
 
475
        if (this.isDrillDown) {
 
476
 
 
477
            this.isDrillDown = false;
 
478
          
 
479
            if (this.selectedLevel <= shapefiles.length){
 
480
                this.selectedLevel += 1;
 
481
            }
 
482
            
 
483
            this.form.findField('level_cb').setValue(this.selectedLevel);
 
484
            this.classify(true);
 
485
        }
 
486
        
 
487
    },
 
488
 
 
489
    /**
 
490
     * Method: onRender
 
491
     * Called by EXT when the component is rendered.
 
492
     */
 
493
    onRender: function(ct, position) {
 
494
        mapfish.widgets.geostat.Choropleth.superclass.onRender.apply(this, arguments);
 
495
        if(this.loadMask){
 
496
            this.loadMask = new Ext.LoadMask(this.bwrap,
 
497
                    this.loadMask);
 
498
            this.loadMask.show();
 
499
        }
 
500
 
 
501
        var coreOptions = {
 
502
            'layer': this.layer,
 
503
            'format': this.format,
 
504
            'url': this.url,
 
505
            'requestSuccess': this.requestSuccess.createDelegate(this),
 
506
            'requestFailure': this.requestFailure.createDelegate(this),
 
507
            'featureSelection': this.featureSelection,
 
508
            'nameAttribute': this.nameAttribute,
 
509
            'legendDiv': this.legendDiv,
 
510
            'labelGenerator': this.labelGenerator
 
511
        };
 
512
 
 
513
        this.coreComp = new mapfish.GeoStat.Choropleth(this.map, coreOptions);
 
514
    }
 
515
});
 
516
Ext.reg('choropleth', mapfish.widgets.geostat.Choropleth);