Changeset 24408 in main


Ignore:
Timestamp:
01/04/22 14:11:42 (11 months ago)
Author:
GarthBraithwaite_STG
Message:

view - temp commit. Updated leaflet js comments. Added formatter to leaflet control code - not fully implemented/tested. Updated RECORD_DIMENSION_FIELD/RECORD_FIELD_NAME to NAME.

Location:
trunk/ibisph-view/src/main/webapp
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/ibisph-view/src/main/webapp/js/L.Control.Choropleth.js

    r23071 r24408  
    591591                if((null == value) || (undefined == value)) return("");
    592592
    593                 // first lookup an associated value title.  The data values passed to
    594                 // this object has formatted values in an array that is indexed via the
    595                 // value. 
     593                // if measure formatter then use it and if creates a string return it.
     594                if(this.options.legend.measureFormatter)
     595                {
     596                        var formattedValue = this.options.legend.measureFormatter(value);
     597                        if(formattedValue) return(formattedValue);
     598                }
     599
     600                // If no formatter then lookup an associated value title.  The data 
     601                // values passed to this object has formatted values in an array that
     602                // is indexed via the value. 
    596603                var title = this.choroplethLayerDataValues.valueTitlesByValue[value];
    597604
    598                 // if no formatted title found then check and adjust for decimals.  This
     605                // If no formatted title found then check and adjust for decimals.  This
    599606                // is typically needed for determinant/range values that are calculated
    600607                // and not set via actual values.
     
    602609                {
    603610                        title = String(value);
    604                         value = Number(value);
    605611                        var decimalPlace = title.indexOf(".");
    606612
    607613                        if(-1 < this.choroplethLayerDataValues.maxDecimals)
    608                                 title = String(value.toFixed(this.choroplethLayerDataValues.maxDecimals));
     614                                title = String(Number(value).toFixed(this.choroplethLayerDataValues.maxDecimals));
    609615                        else if(decimalPlace > 4)
    610616                                title = title.substring(0, decimalPlace);
     
    634640        } //~~~~~~~~~~~~~~~~~~~~~~~~~~~ End of Function ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    635641
    636        
     642
    637643        // returns the group index assoc with the choro value. If nothing matches/
    638644        // found 0 is returned which results in the default [0] cholo color.
     
    640646        // value, LCL and UCL the classification is determined here as opposed to
    641647        // the geostats mechanism that builds bounds that the value fall between.
    642 ,getChoroplethIndex: function(recordGeoID)
     648        ,getChoroplethIndex: function(recordGeoID)
    643649        {
    644650                var choroplethLayerValues = this.choroplethLayerDataValues.valuesByGeoID[recordGeoID];
  • trunk/ibisph-view/src/main/webapp/js/L.GeoJSON.Interactive.Choropleth.js

    r23075 r24408  
    7777
    7878
     79
    7980        // ================================== O V E R R I D E N   F U N C T I O N S
    8081        ,initialize: function(optionOverrides, infoLayerContainer)
     
    111112                var data =
    112113                {
    113                         values:         new Array()
    114                         ,valueTitlesByValue: new Array()
    115                         ,minValue:      10000
    116                         ,maxValue:     -10000
    117                         ,maxDecimals:   0
    118                         ,valuesByGeoID: new Array()
     114                        "values":         new Array()
     115                        ,"valueTitlesByValue": new Array()
     116                        ,"minValue":      10000
     117                        ,"maxValue":     -10000
     118                        ,"maxDecimals":   0
     119                        ,"valuesByGeoID": new Array()
    119120                };
    120121
     
    132133                                data.valuesByGeoID[recordGeoID] =
    133134                                {
    134                                         measureValue:       measureValue
    135                                         ,lowerLimit:        layer.feature.properties[scopedContext.options.dataObject.fieldName.lowerLimit]
    136                                         ,upperLimit:        layer.feature.properties[scopedContext.options.dataObject.fieldName.upperLimit]
    137                                         ,measureValueTitle: measureValueTitle
     135                                        "measureValue":       measureValue
     136                                        ,"lowerLimit":        layer.feature.properties[scopedContext.options.dataObject.fieldName.lowerLimit]
     137                                        ,"upperLimit":        layer.feature.properties[scopedContext.options.dataObject.fieldName.upperLimit]
     138                                        ,"measureValueTitle": measureValueTitle
    138139                                };
    139140
     
    167168                return(data);
    168169        } //~~~~~~~~~~~~~~~~~~~~~~~~~~~ End of Method  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     170
    169171
    170172
  • trunk/ibisph-view/src/main/webapp/js/L.GeoJSON.Interactive.js

    r23075 r24408  
    206206        } //~~~~~~~~~~~~~~~~~~~~~~~~~~~ End of Method  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    207207
    208         // real addData function that recurses and processes.
     208        // Base "addData" function that recurses and does all the processing work.
    209209        ,_addData: function(geojson)
    210210        {
     
    243243                        layer.bindContextMenu
    244244                        ({
    245                                 contextmenuInheritItems: this.options.contextmenuInheritItems
    246                                 ,contextmenuItems:       this.options.contextmenuItems
     245                                "contextmenuInheritItems": this.options.contextmenuInheritItems
     246                                ,"contextmenuItems":       this.options.contextmenuItems
    247247                        });
    248248                }
     
    288288                        var properties = layer.feature.properties;
    289289                        var geoIDPropertyName = this.options.dataObject.layerGeoIDPropertyName;
    290                         var dataValuesRecord = this.getDataValuesRecord(properties[geoIDPropertyName]);
     290                        var dataValuesRecord  = this.getDataValuesRecord(properties[geoIDPropertyName]);
    291291                        if(dataValuesRecord) $.extend(properties, dataValuesRecord);
    292292                }
     
    316316                for(var i=0; i != this.options.dataObject.data.length; i++)
    317317                {
    318                         var record = this.options.dataObject.data[i];
    319                         var recordGeoID          = record[this.options.dataObject.fieldName.geoID];             // returns [i]["Category"] = GeoCnty.1
    320 
    321                         var recordGeoIDSplit     = recordGeoID.split(".");
     318                        var record      = this.options.dataObject.data[i];
     319                        var recordGeoID = record[this.options.dataObject.fieldName.geoID];              // returns [i]["Category"] = GeoCnty.1
     320
     321                        var recordGeoIDSplit        = recordGeoID.split(".");
    322322                        var recordGeoDimensionName  = recordGeoIDSplit[0];
    323323                        var recordGeoDimensionValue = recordGeoIDSplit[1];
  • trunk/ibisph-view/src/main/webapp/js/L.LayerSets.js

    r20915 r24408  
    6262
    6363        // constructor - called when new L.Class.extend.  This set of layers is created
    64         // via the jquery.leaflet.js controller code.  This init code does most of
    65         // the work.  It adds/sets the properties then kicks things off via the
    66         // _addLayer().
     64        // via the jquery.leaflet.js controller code.  The bulk of the work happens
     65        // when the layersets are added to the map where the overridden onAdd API 
     66        // call calls  _addLayerSets.
    6767        ,initialize: function
    6868        (
     
    8585
    8686        // Sets up each of the layer sets' layers.  This code is called via the
    87         // overwritten this.onAdd which is called via super's addMap call which is
    88         // called via the addTo(map). 
    89         // - This func is responsible to create (e.g. new/instan) all the leaflet layer
    90         // objects.  Any special options can be set in this code with this code
    91         // accessing the LayerSets.options to retrieve values and putting those values
    92         // into the "options" for the new layer to be created.
    93         // - Layers are loaded and shown on the map IF the layer's "show" property is
    94         // set to true.
     87        // overridden this.onAdd which is called via super's addMap call which is
     88        // called via the addTo(map).  This func is responsible to create (e.g.
     89        // new/instan) all the leaflet layer objects that are defined within its
     90        // options.  Layers are auto loaded and shown on the map IF the layer's
     91        // "show" property is set to true.  Otherwise loading is controlled by user
     92        // interaction via L.Control.Layersets code.
    9593        ,_addLayerSets: function()
    9694        {
     
    291289
    292290        // ======================================= L E A F L E T   O V E R R I D E S
    293         // override the main onAdd to load all the layers to the map.
     291        // override the parent leaflet layerSet onAdd to load all the layers to the map.
    294292        ,onAdd: function(map)
    295293        {
  • trunk/ibisph-view/src/main/webapp/js/jquery.leaflet.js

    r23071 r24408  
    11/*------------------------------------------------------------------------------
    2         JQuery style leaflet wrapper that provides a java MVC pattern "controller"
    3         type functionality for the leaflet map.  This code creates all leaflet
    4         objects with the associated options/properties and wires together as needed. 
    5 
    6         IMPORTANT NOTE: ********* CHANGED FROM LAYER CONTROL TO LAYER SETS 7/11/2017.
    7 
    8         BASIC HOW MAPS WORK:
    9         0) XSLT code includes needed .js and .css files. 
    10         1) XSLT code creates the map container HTML element.
    11         2) XSLT code then creates the IBIS-PH map object's "options".  Each plugin
    12                 has it's own options section.  Each main object section is built via
    13                 the jquery "extend" to build the final "options".  The options start
    14                 with the least specific (base json options) then adds (merges) a more
    15                 specific "named map configuration" options, adds any page specific/
    16                 request specific options, and finally any very specific thematic options.
    17         3) XSLT built js code then calls this "controller" code (via js once the
    18                 page is processed by the browser). 
    19         4) This code then creates each leaflet plugin object based on the associated
    20                 option section. 
    21                 NOTE: each plugin merges/overwrites its default options with the more
    22                 specific options (which are passed via the object's constructor).
    23         5) For Choro maps (where the option's map "type" is set to "choropleth"):
    24                 a) Creates the choroplethLayer
    25                 b) Sets the layerSets.options.sets["choropleth"].layers[options.choroplethControl.layerSetsKey].layer;
    26                 c) Creates the Choropleth Control with its options and the above choroplethLayer.
    27                 d) Adds the Choropleth Control to the leafletMap.
    28                 e) The Choropleth Control's init code adds a choro layer "dataloaded"
    29                    listener to call: onDataAvailable.
    30                 f) When the choro layer is loaded (via an AJAX call) the layer's addData
    31                    function is called (if successful ajax call) which then fires the
    32                    "dataloaded" event which calls choro control's  onDataAvailable func.
    33                 g) The choro control's onDataAvailable sets up the data arrays, geostats,
    34                    misc arrays needed later, and calls the controls update func.
    35                 h) The choro control's update defines the geostat Determinate Values
    36                    (boundary values), and calls the choro layer's setupChoroplethLayers
    37                    with "this" being the choro control object.
    38                 i) The choro layer's setupChoroplethLayers loops each of its layers to
    39                    set the peer/group index and associated color of that layer (e.g.
    40                    sets the choro color) via the Choropleth Control's getChoroplethIndexAndColor(dataRecordGeoID)
    41                    which simply returns an index based on the value that was passed in.
    42                 *** When a different num of groups or group type or reverse colors is
    43                         selected the control's "update" is called (h) which again kicks off
    44                         the geostats groupings and builds the approp legend etc.
     2        JQuery style object instan wrapper for leaflet map creation.  This provides
     3        a java MVC pattern "controller" type functionality for the leaflet map by
     4        creating all leaflet plug in objects with the associated options/properties
     5        and wires everything together as needed. 
     6
     7
     8        BASIC LEAFLET MAP OVERVIEW:
     9        - A leaflet map consists of the main map object along with a series of
     10                leaflet plugins (javascript objects).  The main types of plugins are
     11                controls (which have some sort of visual control interface), layers
     12                (points or areas organized within layersets), and panels.
     13        - XSLT creates request specific json options for the map plugins/objects.
     14        - XSLT creates the map's HTML and javascript. 
     15        - When the page loads, the main map object is created and the plugins/objects
     16                are added to that map (which fires that object's onAdd method).
     17        - When the L.LayerSets is added to the map the standard onAdd handler is
     18                called.  This calls _addLayerSets which loops all the layetset's layers 
     19                and typically calls the loadLayerGeoJSON which then fires an ajax
     20                request to load that layer.  The ajax success handler then calls the
     21                layer's addData so that the layer can process data and sub layers etc.
     22
     23        MAP CODE BASICS:
     24        0) Page XSLT includes needed .js and .css files via DataViz.xxxxMapJavaScript
     25        1) Page XSLT creates the map container HTML element via DataViz.mapContainer.
     26        2) Page XSLT builds leaflet constructor options via the DataViz.populateKendoLeafletDataVizObject. 
     27        3) Page XSLT has a document ready that calls a dynmically built xxx.init()
     28                function (step 2) that instans the kendo and leaflet objects (options
     29                built via DataViz XSLT code).  This xxx.init() uses the standard jquery
     30                constructor plugin mechanism ($.fn.leaflet) to invoke the code below. 
     31                Example: this.leafletMap = $("#SomeMapContainerID").leaflet(this.leafletMapOptions);
     32        4) The code below creates/instans the specific leaflet objects using the
     33                full set of leaflet plugin/component options built in the previous
     34                steps.  The objects in this code includes the actual leaflet map, zoom,
     35                info panals, layer controls etc.  Things are kicked off by adding these
     36                plugin objects to the map which uses events and API calls.
     37
     38                NOTE: Each leaflet object/plugin has it's own options section within the
     39                main, supplied options.  Object/plugin options are built via the jquery
     40                using "extend" so that options can be built starting with the least
     41                specific (base json options) then adding (merges) more specific "named
     42                map configuration" options, and finally adding page specific/request
     43                specific thematic options.
     44
     45        HOW CHORO LAYER IS LOADED:
     46        Choro maps are defined with the option's map "type" set to "choropleth".
     47        a) Create the choroplethLayer (L.GeoJSON.Interactive.Choropleth). 
     48        b) Add the choro layer to the layerset via:
     49                layerSets.options.sets["choropleth"].layers[options.choroplethControl.layerSetsKey].layer;
     50        c) Create the Choropleth Control with its options and the above choroplethLayer.
     51        d) The Choropleth Control's init code (L.Control.Choropleth.initialize) adds
     52                a choro layer "dataloaded" listener on it's choro layer (a) with a
     53                callback to the control's onDataAvailable function. 
     54        e) Add the Choropleth Control to the leafletMap.  This adds the choro's
     55                legend UI.  The bulk of the actual choro code (geostats, sub layer
     56                coloring etc.) is invoked when the choro layer is loaded and the choro
     57                layer's "dataloaded" event is fired (which calls the control's registered
     58                onDataAvailable callback).
     59        f) When the choro layer is loaded (via an AJAX call) the layer's addData
     60           function is called (if successful ajax call) which then fires the
     61           "dataloaded" event which calls the choro control's onDataAvailable func.
     62        g) The choro control's onDataAvailable (event handler) is passed the just
     63                loaded layer data values.  The geostats object is then created with the
     64                supplied layer data values.  Then calls the controls update func.
     65        h) The choro control's update defines the geostat Determinate Values
     66           (boundary values), and calls the choro layer's setupChoroplethLayers
     67           with "this" being the choro control object.
     68        i) The choro layer's setupChoroplethLayers loops each of its layers to
     69           set the peer/group index and associated color of that layer (e.g.
     70           sets the choro color) via the Choropleth Control's getChoroplethIndexAndColor(dataRecordGeoID)
     71           which simply returns an index based on the value that was passed in.
     72        *** When a different num of groups or group type or reverse colors is
     73                selected the control's "update" is called (h) which again kicks off
     74                the geostats groupings and builds the approp legend etc.
     75
     76
     77on grid / datasource change
     78loop all the data fields and build a similar struct as the choro control needs then
     79call that callback func with said data which does a new geostats etc.
     80
     81not sure if each sub layer's properties have the rank set???  If so and need to clear!!!!!
     82
     83need to have geostats used for kendo as well so can filter on the peer group.
     84but this means that filter can't refire the grouping!!!  So have to have a UI
     85that says to recalc the filter.
     86 
     87the layer properties does not have a peer value
     88
    4589
    4690        map: options passed to the leaflet map object creation
  • trunk/ibisph-view/src/main/webapp/xslt/xml/Interactive.xslt

    r24395 r24408  
    3737
    3838                        RECORD_DIMENSION_FIELD
    39                                 RECORD_FIELD_NAME  - used for the data array/datasource fieldname
     39                                NAME  - used for the data array/datasource fieldname
     40                                TITLE - used for kendo chart series and cat title.
    4041                                DIMENSION_USAGE - series, category, constant
    4142                                DIMENSION_NAMES
    4243                                        DIMENSION_NAME
    43                                 TITLE - used for kendo chart series and cat title.
    4444                                DIMENSION_VALUES_COUNT - number of dimension values to determine use.
    4545                                        if count = 1 or 0 then don't have to do any special
     
    8282
    8383                <RECORD_DIMENSION_FIELD>
    84                         <DIMENSION_USAGE><xsl:value-of select="$usage"/></DIMENSION_USAGE>
    85                         <RECORD_FIELD_NAME><xsl:value-of select="$fieldName"/></RECORD_FIELD_NAME>
     84                        <NAME><xsl:value-of select="$fieldName"/></NAME>
    8685                        <TITLE>
    8786                                <xsl:call-template name="Interactive.csvDimensionsTitleList">
     
    9190                                </xsl:call-template>
    9291                        </TITLE>
     92                        <DIMENSION_USAGE><xsl:value-of select="$usage"/></DIMENSION_USAGE>
    9393                        <DIMENSION_NAMES>
    9494                                <xsl:for-each select="$dimensionUsages//DIMENSION_USAGE[USAGE=$usage]">
     
    121121                                RECORD_DIMENSION_FIELD
    122122                                        DIMENSION_USAGE category/series/constant - differs from NAME in NOT camel case and matches the DIMENSION_USAGE/NAME
    123                                         RECORD_FIELD_NAME  Category/Series/Constant - differs from usage in that it is camel case via the XSLT code when creating this struct/NAME
     123                                        NAME  Category/Series/Constant - differs from usage in that it is camel case via the XSLT code when creating this struct/NAME
    124124                                        TITLE
    125125                                        DIMENSION_NAMES
     
    187187                <xsl:if test="$dimensionUsage/USAGE">
    188188                        <RECORD_DIMENSION_FILTER>
    189                                 <RECORD_DIMENSION_FIELD_NAME><xsl:value-of select="$recordDimensionFields/RECORD_DIMENSION_FIELD[DIMENSION_NAMES/DIMENSION_NAME = $dimension/NAME]/RECORD_FIELD_NAME"/></RECORD_DIMENSION_FIELD_NAME>
     189                                <RECORD_DIMENSION_FIELD_NAME><xsl:value-of select="$recordDimensionFields/RECORD_DIMENSION_FIELD[DIMENSION_NAMES/DIMENSION_NAME = $dimension/NAME]/NAME"/></RECORD_DIMENSION_FIELD_NAME>
    190190                                <DIMENSION_NAME><xsl:value-of  select="$dimension/NAME"/></DIMENSION_NAME>
    191191                                <DIMENSION_TITLE><xsl:value-of select="ibis:getDimensionTitle($dimension)"/></DIMENSION_TITLE>
Note: See TracChangeset for help on using the changeset viewer.