source: main/trunk/ibisph-view/src/main/webapp/xslt/html/DataViz.xslt @ 24448

Last change on this file since 24448 was 24448, checked in by GarthBraithwaite_STG, 13 months ago

view - temp commit of IndicatorContentJavaScript?.xslt code working.
File size: 20.2 KB
Line 
1<?xml version="1.0" encoding="ISO-8859-1"?>
2
3<xsl:stylesheet version="3.0"
4        xmlns:xsl ="http://www.w3.org/1999/XSL/Transform" 
5        xmlns:xs  ="http://www.w3.org/2001/XMLSchema"
6        xmlns:ibis="http://www.ibisph.org"
7
8        exclude-result-prefixes="ibis xs xsl"
9>
10
11        <ibis:doc>
12                <name>html/DataViz</name>
13                <summary>DataViz HTML structures and assoc javascript init code.</summary>
14                <description>
15                        Helper templates that provide standalone creation of HTML dataviz
16                        containers and DataViz js object.  The DataViz object contains
17                        localized Kendo objects and Leaflet map object javascript which
18                        keeps all the javascript code bundled within and keeps the namespace
19                        a little cleaner etc.
20
21                        Uses/must import in the Page.xslt:
22                        - json/Dataset.xslt
23                        - json/Kendo.xslt
24                        - json/LeafletMap.xslt
25                </description>
26        </ibis:doc>
27
28
29        <xsl:param name="MapName"   ibis:doc="XSLT transformation injects http request param value (if exists)."/>
30        <xsl:param name="ChartName" ibis:doc="same as above but for overridding/setting chart name."/>
31        <xsl:param name="GridName"  ibis:doc="same but for grid name."/>
32
33        <xsl:param name="DataViz.noneName" select="'None'" ibis:doc="No chart/map/grid name."/>
34
35
36        <xsl:function name="ibis:DataViz.getMapName" as="xs:string"
37                ibis:doc="localizes checking the MapName param.  This code should be
38                        used for all map names so that the override param is checked.
39                        Rules:
40                        1) Use page request URL/HTTP request parameter via the request
41                                params model map. 
42                        2) Else use supplied chart name param.
43                        3) Else use the none name.
44                "
45        >
46                <xsl:param name="mapName" ibis:doc="Map name unless param override."/>
47
48                <xsl:choose>
49                        <xsl:when test="string-length($MapName) != 0">
50                                <xsl:sequence select="$MapName"/>
51                        </xsl:when>
52                        <xsl:when test="string-length($mapName) != 0">
53                                <xsl:sequence select="$mapName"/>
54                        </xsl:when>
55                        <xsl:otherwise><xsl:sequence select="$DataViz.noneName"/></xsl:otherwise>
56                </xsl:choose>
57        </xsl:function>
58
59        <xsl:function name="ibis:DataViz.showMap" as="xs:boolean"
60                ibis:doc="Checks the param map name if exists uses.  Else use the
61                        supplied mapname.  Returns if the value is not the none value.
62                        Prior to 5/2021 and 1/2019 had code that tested series, constant but
63                        implemented the map dimension inclusion so this isn't needed.
64                "
65        >
66                <xsl:param name="mapName" ibis:doc="Map config name to test."/>
67                <xsl:sequence select="ibis:DataViz.getMapName($mapName) != $DataViz.noneName"/>
68        </xsl:function>
69
70
71        <xsl:function name="ibis:DataViz.getChartName" as="xs:string"
72                ibis:doc="localizes checking the ChartName param.  Rules:
73                        1) page request URL/HTTP request parameter via the request params
74                                model map and the Java servlet transformation. 
75                        2) Supplied chart name param.
76                        3) none.
77                "
78        >
79                <xsl:param name="chartName" ibis:doc="Chart name unless param override."/>
80
81                <xsl:choose>
82                        <xsl:when test="string-length($ChartName) != 0">
83                                <xsl:sequence select="$ChartName"/>
84                        </xsl:when>
85                        <xsl:when test="string-length($chartName) != 0">
86                                <xsl:sequence select="$chartName"/>
87                        </xsl:when>
88                        <xsl:otherwise><xsl:sequence select="$DataViz.noneName"/></xsl:otherwise>
89                </xsl:choose>
90        </xsl:function>
91
92        <xsl:function name="ibis:DataViz.showChart" as="xs:boolean"
93                ibis:doc="localizes checking the supplied chartName against the 'None' value."
94        >
95                <xsl:param name="chartName" ibis:doc="Chart name to test."/>
96                <xsl:sequence select="ibis:DataViz.getChartName($chartName) != $DataViz.noneName"/>
97        </xsl:function>
98
99
100        <xsl:template name="DataViz.chartContainer" ibis:doc="Kendo chart container HTML code.">
101                <xsl:param name="containerID" select="'chart'" ibis:doc="Value that is used as an ID for chart.  Default = 'chart'."/>
102                <xsl:param name="title"/>
103                <xsl:param name="defaultContent"><img src="image/processing.gif" class="Wait"/></xsl:param>
104                <xsl:param name="footerContent" ibis:doc="typically chart narrative."/>
105
106                <figure class="DataViz Chart">
107                        <xsl:if test="boolean($title)"><h3><xsl:value-of select="$title"/></h3></xsl:if>
108                        <div id="{$containerID}"><xsl:copy-of select="$defaultContent"/></div>
109                        <xsl:if test="boolean($footerContent)">
110                        <footer>
111                                <xsl:copy-of select="$footerContent"/>
112                        </footer>
113                        </xsl:if>
114                </figure>
115        </xsl:template>
116
117       
118        <xsl:template name="DataViz.gridContainer" ibis:doc="Kendo Grid container HTML code.">
119                <xsl:param name="containerID" select="'grid'" ibis:doc="Value that is used as an ID for the grid.  Default = 'grid'."/>
120                <xsl:param name="title"/>
121                <xsl:param name="valueAttributeNames"/>
122                <xsl:param name="valueAttributes"/>
123
124                <figure class="DataViz Grid ScrollableContainer">
125                        <xsl:if test="0 != string-length($title)"><h3><xsl:value-of select="$title"/></h3></xsl:if>
126                        <div id="{$containerID}"></div>
127                        <xsl:call-template name="DataViz.valueAttributeFootnote">
128                                <xsl:with-param name="valueAttributeNames" select="$valueAttributeNames"/>
129                                <xsl:with-param name="valueAttributes"     select="$valueAttributes"/>
130                        </xsl:call-template>
131                </figure>
132
133                <!-- GARTH TODO: needed for PDF export - needs dejavue fonts installed to work.
134                        <script type="x/kendo-template" id="page-template">
135                          <div class="page-template">
136                                <div class="header">
137                                  <div style="float: right">Page #: pageNum # of #: totalPages #</div>
138                                  Multi-page grid with automatic page breaking
139                                </div>
140                                <div class="watermark">KENDO UI</div>
141                                <div class="footer">
142                                  Page #: pageNum # of #: totalPages #
143                                </div>
144                          </div>
145                        </script>
146                -->
147        </xsl:template>
148
149
150        <xsl:template name="DataViz.mapContainer" ibis:doc="Leaflet map container HTML code.">
151                <xsl:param name="containerID" select="'map'" ibis:doc="Value that is used as an ID for map.  Default = 'map'."/>
152                <xsl:param name="title"/>
153                <xsl:param name="defaultContent"></xsl:param>
154                <xsl:param name="footerContent" ibis:doc="typically map narrative."/>
155
156                <figure class="DataViz Map">
157                        <xsl:if test="boolean($title)"><h3><xsl:value-of select="$title"/></h3></xsl:if>
158                        <div id="{$containerID}"><xsl:copy-of select="$defaultContent"/></div>
159                        <xsl:if test="boolean($footerContent)">
160                        <footer>
161                                <xsl:copy-of select="$footerContent"/>
162                        </footer>
163                        </xsl:if>
164                </figure>
165        </xsl:template>
166
167
168        <xsl:template name="DataViz.baseLeafletMapJavaScript">
169                <script type="text/javascript" src="js/leaflet-src.js"/>
170                <script type="text/javascript" src="js/jquery.leaflet.js"/>
171
172                <script type="text/javascript" src="js/L.GeoJSON.Interactive.js"/>
173                <script type="text/javascript" src="js/L.LayerSets.js"/>
174                <script type="text/javascript" src="js/L.Control.LayerSets.js"/>
175                <script type="text/javascript" src="js/L.Control.Zoom.Min.js"/>
176                <script type="text/javascript" src="js/L.Map.ContextMenu.js"/>
177        </xsl:template>
178
179
180        <xsl:template name="DataViz.choroplethMapJavaScript">
181                <xsl:call-template name="DataViz.baseLeafletMapJavaScript"/>
182
183                <script type="text/javascript" src="js/geostats.js"/>
184                <script type="text/javascript" src="js/L.GeoJSON.Interactive.Choropleth.js"/>
185                <script type="text/javascript" src="js/L.Control.Choropleth.js"/>
186        </xsl:template>
187
188        <xsl:template name="DataViz.selectionMapJavaScript">
189                <xsl:call-template name="DataViz.baseLeafletMapJavaScript"/>
190
191                <script type="text/javascript" src="js/L.GeoJSON.Interactive.Selection.js"/>
192        </xsl:template>
193
194
195        <xsl:template name="DataViz.valueAttributeFootnote">
196                <xsl:param name="valueAttributeNames"/>
197                <xsl:param name="valueAttributes"/>
198
199                <xsl:if test="0 != count($valueAttributeNames)">
200                        <footer class="Footnotes ValueAttribute">
201                                <ul>
202                                        <xsl:for-each select="$valueAttributes//VALUE_ATTRIBUTE">
203                                                <xsl:sort select="SORT_ORDER" order="ascending" data-type="number"/>
204                                                <xsl:if test="exists(current()[NAME = $valueAttributeNames])">
205                                        <li>
206                                                <span><xsl:value-of select="CODE"/></span> 
207                                                <span><xsl:value-of select="DEFINITION"/></span>
208                                        </li>
209                                                </xsl:if>
210                                        </xsl:for-each>
211                                </ul>
212                        </footer>
213                </xsl:if>
214        </xsl:template>
215
216
217        <xsl:template name="DataViz.populateKendoLeafletDataVizObject" 
218                ibis:doc="The KendoLeafletDataVizObject provides encapsulation of the
219                        objects and properites so that multiples can be instantiated on the
220                        same page AND so that core functionality can be provided (via the
221                        prototype mechanism). 
222
223                        This code dynamically adds the kendo and leaflet objects to a base
224                        javascript object referenced by the dataVizObjectName value.
225
226                        NOTE: One of the kludgy downsides is the need to set properties like
227                        the data records using an external reference because 'this' is not
228                        the object's context at the point of dynamic attachment.  Could put
229                        off the setting of those values in the init call but then need to
230                        keep track of all the properties and proper instan order.  As such
231                        it is easier to do an external reference to the data records.
232                ."
233        >
234                <xsl:param name="dataVizObjectName" select="'leafletKendoDataViz'"/>
235                <xsl:param name="containerIDPrefix" select="'dataViz'"/>
236
237                <xsl:param name="baseExportFilename" select="$containerIDPrefix"/> 
238
239                <xsl:param name="dimensions"/>
240                <xsl:param name="dimensionUsages"/>
241                <xsl:param name="datasetRecords"/>
242                <xsl:param name="recordDimensionFields"/>
243                <xsl:param name="recordAncillaryValueFields"/>
244                <xsl:param name="valueAttributes"/>
245
246                <xsl:param name="measure"/>
247                <xsl:param name="measureTitle" select="$measure/TITLE"/>
248                <xsl:param name="measureValueType"/>
249
250                <xsl:param name="showMap" select="false()"/>
251                <xsl:param name="mapName"/>
252                <xsl:param name="geoDimensionName"/>
253
254                <xsl:param name="showChart" select="false()"/>
255                <xsl:param name="chartName"/>
256                <xsl:param name="chartTitle"/>
257
258                <xsl:param name="showGrid" select="false()"/>
259                <xsl:param name="gridName" select="'IndicatorProfileGrid'"/>
260                <xsl:param name="showValueAttributeColumn" select="false()"/>
261                <xsl:param name="showLabelColumn"          select="false()"/>
262                <xsl:param name="showNoteColumn"           select="false()"/>
263                <xsl:param name="datasetRecordTotalValues"/>
264
265                <xsl:variable name="externalDataVizRecordsReference"         select="concat($dataVizObjectName, '.records')"/>
266                <xsl:variable name="externalDataVizKendoDataSourceReference" select="concat($dataVizObjectName, '.kendoDataSource')"/>
267
268        <xsl:value-of select="$dataVizObjectName"/>.htmlContainerIDPrefix = "<xsl:value-of select="$containerIDPrefix"/>";
269        <xsl:value-of select="$dataVizObjectName"/>.baseExportFilename    = "<xsl:value-of select="$baseExportFilename"/>";
270        <xsl:value-of select="$externalDataVizRecordsReference"/> =
271        [<xsl:text>&#10;</xsl:text>
272                <xsl:call-template name="Dataset.datasetRecordsJSON">
273                        <xsl:with-param name="dimensions"                                       select="$dimensions"/>
274                        <xsl:with-param name="datasetRecords"                           select="$datasetRecords"/>
275                        <xsl:with-param name="recordDimensionFields"            select="$recordDimensionFields"/>
276                        <xsl:with-param name="recordAncillaryValueFields"       select="$recordAncillaryValueFields"/>
277                        <xsl:with-param name="valueAttributes"                          select="$valueAttributes"/>
278                        <xsl:with-param name="measureValueType"                         select="$measureValueType"/>
279                </xsl:call-template>
280        ];
281
282        <xsl:value-of select="$dataVizObjectName"/>.kendoDataSource = new kendo.data.DataSource
283        (
284                <xsl:call-template name="Kendo.dataSourceConstructorJSON">
285<xsl:with-param name="datasetRecordsJSONJavascriptVariableName" select="$externalDataVizRecordsReference"/>
286                        <xsl:with-param name="recordDimensionFields"            select="$recordDimensionFields"/>
287                        <xsl:with-param name="recordAncillaryValueFields"       select="$recordAncillaryValueFields"/>
288                        <xsl:with-param name="measureValueType"                         select="$measureValueType"/>
289                </xsl:call-template>
290        );
291
292                <xsl:if test="$showMap">
293        <xsl:value-of select="$dataVizObjectName"/>.leafletMapOptions = $.extend
294        (
295                true, {}
296                ,<xsl:call-template name="LeafletMap.baseJSON"/>
297                ,<xsl:call-template name="LeafletMap.namedConfigurationJSON">
298                        <xsl:with-param name="configurationName" select="$mapName"/>
299                </xsl:call-template>
300                ,<xsl:call-template name="LeafletMap.requestJSON"> 
301                        <xsl:with-param name="mapType" select="'choropleth'"/>
302                </xsl:call-template>
303                ,<xsl:call-template name="LeafletMap.choroplethJSON">
304                        <xsl:with-param name="datasetRecordsJSONJavascriptVariableName" select="$externalDataVizRecordsReference"/>
305                        <xsl:with-param name="geoDimension"    select="$dimensions/DIMENSION[NAME = $geoDimensionName]"/>
306                        <xsl:with-param name="recordDimensionFields" select="$recordDimensionFields"/>
307                        <xsl:with-param name="legendTitle"     select="$measureTitle"/>
308<!--
309<xsl:with-param name="kendoDataSource"  select="concat($dataVizObjectName, '.kendoDataSource')"/>
310
311                        <xsl:with-param name="legendMeasureFormatter">
312
313Can put the number formatter into the datasource which is NOT standard
314or can inject it and have future expandability/options???  Though not likely 
315needed as it's only for choros
316
317
318        ,"getFormattedNumber": function(number, patternName)
319        {
320                var name    = patternName ? patternName : "measure";
321                var pattern = this.options.formatPattern[name];
322                if(pattern) return(this.toString(number, pattern);
323console.error('kendo .getFormattedValue no pattern match.  number: " +number+ ", patternName: " +patternName+ ", lookup name: " +name);
324                return(number);
325        }
326                        </xsl:with-param>
327-->
328                        <xsl:with-param name="reverseColors"   select="$measure/DESIRABLE_VALUE = 'HIGH'"/>
329                        <xsl:with-param name="desirableValue"  select="$measure/DESIRABLE_VALUE"/>
330                        <xsl:with-param name="betterWorseComparisonValue" select="NULL"/>
331                        <xsl:with-param name="mapRecordDimensionFilters">
332                                <xsl:call-template name="Interactive.mapRecordDimensionFilters">
333                                        <xsl:with-param name="geoDimensionName" select="$geoDimensionName"/>
334                                        <xsl:with-param name="dimensions"       select="$dimensions"/>
335                                        <xsl:with-param name="dimensionUsages"  select="$dimensionUsages"/>
336                                        <xsl:with-param name="recordDimensionFields" select="$recordDimensionFields"/>
337                                </xsl:call-template>
338                        </xsl:with-param>
339                </xsl:call-template>
340        );
341                </xsl:if>
342
343
344                <xsl:if test="$showGrid">
345        <xsl:value-of select="$dataVizObjectName"/>.kendoGridOptions = $.extend
346        (
347                true, {}
348                ,<xsl:call-template name="Kendo.baseGridJSON"/>
349                ,<xsl:call-template name="Kendo.namedConfigurationJSON">
350                        <xsl:with-param name="configurationName" select="$gridName"/>
351                </xsl:call-template>
352                ,<xsl:call-template name="Kendo.requestGridJSON">
353                        <xsl:with-param name="kendoDataSourceJavascriptVariableName" select="$externalDataVizKendoDataSourceReference"/>
354<!-- not needed unless using KendoLeafletDataViz.getGridDataSourceViewItems
355                        <xsl:with-param name="dataVizObjectName" select="$dataVizObjectName"/>
356-->
357                        <xsl:with-param name="measure"          select="$measure"/>
358                        <xsl:with-param name="measureTitle" select="$measureTitle"/>
359                        <xsl:with-param name="recordDimensionFields"      select="$recordDimensionFields"/>
360                        <xsl:with-param name="recordAncillaryValueFields" select="$recordAncillaryValueFields"/>
361                        <xsl:with-param name="showValueAttributeColumn" select="$showValueAttributeColumn"/>
362                        <xsl:with-param name="showLabelColumn"          select="$showLabelColumn"/>
363                        <xsl:with-param name="showNoteColumn"           select="$showNoteColumn"/>
364                        <xsl:with-param name="datasetRecordTotalValues" select="$datasetRecordTotalValues"/>
365                        <xsl:with-param name="baseExportFilename"               select="$baseExportFilename"/> 
366                </xsl:call-template>
367        );
368                </xsl:if>
369
370                <xsl:if test="$showChart">
371        <xsl:value-of select="$dataVizObjectName"/>.kendoChartOptions = $.extend
372        (
373                true, {}
374                ,<xsl:call-template name="Kendo.baseChartJSON"/>
375                ,<xsl:call-template name="Kendo.namedConfigurationJSON">
376                        <xsl:with-param name="configurationName" select="$chartName"/>
377                </xsl:call-template>
378                ,<xsl:call-template name="Kendo.requestChartJSON">
379<xsl:with-param name="kendoDataSourceJavascriptVariableName" select="$externalDataVizKendoDataSourceReference"/>
380                        <xsl:with-param name="title"         select="$chartTitle"/>
381                        <xsl:with-param name="seriesTitle"   select="$recordDimensionFields/RECORD_DIMENSION_FIELD[DIMENSION_USAGE='series']/TITLE"/>
382                        <xsl:with-param name="categoryTitle" select="$recordDimensionFields/RECORD_DIMENSION_FIELD[DIMENSION_USAGE='category']/TITLE"/>
383                        <xsl:with-param name="valueTitle"    select="$measureTitle"/>
384                        <xsl:with-param name="measureValueType" select="$measureValueType"/>
385
386                        <xsl:with-param name="seriesFieldName"    select="$recordDimensionFields/RECORD_DIMENSION_FIELD[DIMENSION_USAGE='series']/NAME"/>
387                        <xsl:with-param name="categoryFieldName"  select="$recordDimensionFields/RECORD_DIMENSION_FIELD[DIMENSION_USAGE='category']/NAME"/>
388                        <xsl:with-param name="includeDatasetSeries" select="1 lt number($recordDimensionFields/RECORD_DIMENSION_FIELD[DIMENSION_USAGE='series']/DIMENSION_VALUES_COUNT)"/>
389
390                        <xsl:with-param name="recordAncillaryValueFields" select="$recordAncillaryValueFields"/>
391
392                        <xsl:with-param name="baseExportFilename" select="$baseExportFilename"/> 
393
394                </xsl:call-template>
395        );
396                </xsl:if>
397
398        <xsl:value-of select="$dataVizObjectName"/>.init = function()
399        {
400                if(this.leafletMapOptions) this.leafletMap = $("<xsl:value-of select="concat('#', $containerIDPrefix, '_map')"/>").leaflet(this.leafletMapOptions);
401                if(this.kendoChartOptions) this.kendoChart = $("<xsl:value-of select="concat('#', $containerIDPrefix, '_chart')"/>").kendoChart(this.kendoChartOptions);
402                if(this.kendoGridOptions)  this.kendoGrid  = $("<xsl:value-of select="concat('#', $containerIDPrefix, '_grid')"/>").kendoGrid(this.kendoGridOptions);
403
404                // "read" fires the "change" event of the dataSource and any objects
405                // that ref the data source will be bound.  This needs to occur
406                // after the grid and chart are created because .autoBind = false.
407                // Can also fire load by issuing a sort:
408                // $kendoGrid.getKendoGrid().dataSource.sort({field: "CategorySortOrder", dir: "asc"});
409                this.kendoDataSource.read();
410        } //~~~~~~~~~~~~~~~~~~~~ End of init Function ~~~~~~~~~~~~~~~~~~~
411
412        //~~~~~~~~~~~~~~~~~~~ End of Dynamic DataViz Population ~~~~~~~~~~~~~~~~~~~~
413
414        </xsl:template>
415
416
417        <xsl:template name="DataViz.tieGridAndChart" ibis:doc="">
418                <xsl:param name="gridContainerID"  select="'grid'"  ibis:doc="Value that is used as an ID for the grid.   Default = 'grid'."/>
419                <xsl:param name="chartContainerID" select="'chart'" ibis:doc="Value that is used as an ID for the chart.  Default = 'chart'."/>
420                <xsl:param name="hideToolTipName"  select="'Series'" ibis:doc=".  Default = 'Series'."/>
421
422                <script>
423/*
424var data = [{ Id: 1, Name: "Object 1", Date: new Date(), Amount: 100 }, { Id: 2, Name: "Object 2", Date: new Date(), Amount: 200 }];
425var series = { name: "Series Name", type: "scatter", xField: "Date", yField: "Amount", data: data };
426*/
427                        var chart = $("#<xsl:value-of select="$chartContainerID"/>").data("kendoChart"); //get the chart
428                        var grid  = $("#<xsl:value-of select="$gridContainerID"/>").data("kendoGrid"); //get the Grid
429//                      var gridRowElement = $("#<xsl:value-of select="$gridContainerID"/> tr[role='row']");
430
431                        // mouse over/on - highlight the chart's point and show tool tip
432                        $("#<xsl:value-of select="$gridContainerID"/> .k-grid-content tr[role='row']").on("mouseenter mouseover",
433                                function ()
434                                {
435                                        // get the data item attached to "this" row being hovered
436                                        var record = gridRow.dataItem(this);
437
438                                        // highlight the point where the Ids match
439                                        chart.toggleHighlight(true,
440                                                function(point)
441                                                {
442                                                        return(point.dataItem.Id == record.Id);
443                                                }
444                                        );
445
446                                        // show the tooltip for the point where the Ids match
447                                        chart.showTooltip(
448                                                function(point)
449                                                {
450                                                        return(point.dataItem.Id == record.Id);
451                                                }
452                                        );
453                                }
454                        );
455
456                        // mouse out/off - clear all chart point highlighting and hide all tool tips.
457                        $("#<xsl:value-of select="$gridContainerID"/> .k-grid-content tr[role='row']").on("mouseleave",
458                                function ()
459                                {
460                                        chart.toggleHighlight(false, "Series"); //remove all highlights for the Series the point is in
461                                        chart.hideTooltip("<xsl:value-of select="$hideToolTipName"/>"); //hide tooltips for all points in the Series the point is in
462                                }
463                        );
464
465                </script>
466        </xsl:template>
467
468</xsl:stylesheet>
469<!-- ============================= End of File ============================= -->
Note: See TracBrowser for help on using the repository browser.