Changeset 24488 in main

Timestamp:

01/17/22 23:51:22 (21 months ago)

Author:

GarthBraithwaite_STG

Message:

view - temp saving basic code of DataViz?.xslt grid and chart tied interaction

File:

• trunk/ibisph-view/src/main/webapp/xslt/html/DataViz.xslt (modified) (5 diffs)

trunk/ibisph-view/src/main/webapp/xslt/html/DataViz.xslt

@@ -408 +408 @@
                 // $kendoGrid.getKendoGrid().dataSource.sort({field: "CategorySortOrder", dir: "asc"});
                 this.kendoDataSource.read();
+
+
+                <xsl:call-template name="DataViz.tieGridAndChart">
+                        <xsl:with-param name="gridContainerID"  select="concat($containerIDPrefix, '_grid')"/>
+                        <xsl:with-param name="chartContainerID" select="concat($containerIDPrefix, '_chart')"/>
+                </xsl:call-template>
+
         } //~~~~~~~~~~~~~~~~~~~~ End of init Function ~~~~~~~~~~~~~~~~~~~
 
@@ -418 +425 @@
                 <xsl:param name="gridContainerID"  select="'grid'"  ibis:doc="Value that is used as an ID for the grid.   Default = 'grid'."/>
                 <xsl:param name="chartContainerID" select="'chart'" ibis:doc="Value that is used as an ID for the chart.  Default = 'chart'."/>
-                <xsl:param name="hideToolTipName"  select="'Series'" ibis:doc=".  Default = 'Series'."/>
-
-                <script>
-/*
-var data = [{ Id: 1, Name: "Object 1", Date: new Date(), Amount: 100 }, { Id: 2, Name: "Object 2", Date: new Date(), Amount: 200 }];
-var series = { name: "Series Name", type: "scatter", xField: "Date", yField: "Amount", data: data };
-*/
+
+console.error('tieGridAndChart.gridID: ' + '<xsl:value-of select="$gridContainerID"/>');
+
                         var chart = $("#<xsl:value-of select="$chartContainerID"/>").data("kendoChart"); //get the chart
                         var grid  = $("#<xsl:value-of select="$gridContainerID"/>").data("kendoGrid"); //get the Grid
-//                      var gridRowElement = $("#<xsl:value-of select="$gridContainerID"/> tr[role='row']");
-
-                        // mouse over/on - highlight the chart's point and show tool tip
-                        $("#<xsl:value-of select="$gridContainerID"/> .k-grid-content tr[role='row']").on("mouseenter mouseover", 
+//console.error(grid);
+
+                        // GRID ROW MOUSE OVER - highlight the chart's point and show tool tip
+                        $("#<xsl:value-of select="$gridContainerID"/> .k-selectable tr[role='row']").on("mouseenter", 
                                 function () 
                                 {
                                         // get the data item attached to "this" row being hovered
-                                        var record = gridRow.dataItem(this); 
+                                        var record = grid.dataItem(this); 
 
                                         // highlight the point where the Ids match
@@ -440 +443 @@
                                                 function(point) 
                                                 { 
-                                                        return(point.dataItem.Id == record.Id); 
+                                                        return(point.dataItem.rowID == record.rowID); 
                                                 }
                                         );
@@ -448 +451 @@
                                                 function(point) 
                                                 { 
-                                                        return(point.dataItem.Id == record.Id); 
+                                                        return(point.dataItem.rowID == record.rowID); 
                                                 }
                                         ); 
@@ -454 +457 @@
                         );
 
-                        // mouse out/off - clear all chart point highlighting and hide all tool tips.
-                        $("#<xsl:value-of select="$gridContainerID"/> .k-grid-content tr[role='row']").on("mouseleave", 
+                        // GRID ROW MOUSE OUT - clear all chart point highlighting and hide all tool tips.
+                        $("#<xsl:value-of select="$gridContainerID"/> .k-selectable tr[role='row']").on("mouseleave", 
                                 function () 
                                 {
-                                        chart.toggleHighlight(false, "Series"); //remove all highlights for the Series the point is in
-                                        chart.hideTooltip("<xsl:value-of select="$hideToolTipName"/>"); //hide tooltips for all points in the Series the point is in
+                                        // get the data item attached to "this" row being hovered
+                                        var record = grid.dataItem(this); 
+
+                                        // TURN OFF the point where the Ids match
+                                        chart.toggleHighlight(false, 
+                                                function(point) 
+                                                { 
+                                                        return(point.dataItem.rowID == record.rowID); 
+                                                }
+                                        );
+
+// doesn't work: nothing or "series/cat/dataitem/value"                                 chart.toggleHighlight(false);
+                                        //hide tooltips for all points in the Series the point is in
+                                        chart.hideTooltip();
                                 }
                         );
 
-                </script>
+
+                        // CHART SERIES ENTER - highlight associated grid row.
+                        chart.bind("seriesOver", 
+                                function (e) 
+                                {
+console.error(e);
+                                        // get the data item attached to "this" row being hovered
+                                        //console.error(e.dataItem.uid);
+                                        var x = grid.table.find('tr[data-uid="' + e.dataItem.uid + '"]');
+                                        x.css("background", e.series.color);
+
+                                        x.find('td').css("color", e.series.tooltip.color);
+//console.error(x.css);
+//                                      if(x) x.addClass("Highlight");
+                                }
+                        );
+
+                        // CHART SERIES LEAVE - deselect associated grid row.
+                        chart.bind("seriesLeave", 
+                                function (e) 
+                                {
+                                        var x = grid.table.find('tr[data-uid="' + e.dataItem.uid + '"]');
+                                        x.find('td').css("color", "");
+                                        x.css("background", "");
+//                                      x.removeClass("Highlight");
+                                }
+                        );
+
         </xsl:template>