Changeset 24488 in main


Ignore:
Timestamp:
01/17/22 23:51:22 (4 months ago)
Author:
GarthBraithwaite_STG
Message:

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

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/ibisph-view/src/main/webapp/xslt/html/DataViz.xslt

    r24448 r24488  
    408408                // $kendoGrid.getKendoGrid().dataSource.sort({field: "CategorySortOrder", dir: "asc"});
    409409                this.kendoDataSource.read();
     410
     411
     412                <xsl:call-template name="DataViz.tieGridAndChart">
     413                        <xsl:with-param name="gridContainerID"  select="concat($containerIDPrefix, '_grid')"/>
     414                        <xsl:with-param name="chartContainerID" select="concat($containerIDPrefix, '_chart')"/>
     415                </xsl:call-template>
     416
    410417        } //~~~~~~~~~~~~~~~~~~~~ End of init Function ~~~~~~~~~~~~~~~~~~~
    411418
     
    418425                <xsl:param name="gridContainerID"  select="'grid'"  ibis:doc="Value that is used as an ID for the grid.   Default = 'grid'."/>
    419426                <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 /*
    424 var data = [{ Id: 1, Name: "Object 1", Date: new Date(), Amount: 100 }, { Id: 2, Name: "Object 2", Date: new Date(), Amount: 200 }];
    425 var series = { name: "Series Name", type: "scatter", xField: "Date", yField: "Amount", data: data };
    426 */
     427
     428console.error('tieGridAndChart.gridID: ' + '<xsl:value-of select="$gridContainerID"/>');
     429
    427430                        var chart = $("#<xsl:value-of select="$chartContainerID"/>").data("kendoChart"); //get the chart
    428431                        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",
     432//console.error(grid);
     433
     434                        // GRID ROW MOUSE OVER - highlight the chart's point and show tool tip
     435                        $("#<xsl:value-of select="$gridContainerID"/> .k-selectable tr[role='row']").on("mouseenter",
    433436                                function ()
    434437                                {
    435438                                        // get the data item attached to "this" row being hovered
    436                                         var record = gridRow.dataItem(this);
     439                                        var record = grid.dataItem(this);
    437440
    438441                                        // highlight the point where the Ids match
     
    440443                                                function(point)
    441444                                                {
    442                                                         return(point.dataItem.Id == record.Id);
     445                                                        return(point.dataItem.rowID == record.rowID);
    443446                                                }
    444447                                        );
     
    448451                                                function(point)
    449452                                                {
    450                                                         return(point.dataItem.Id == record.Id);
     453                                                        return(point.dataItem.rowID == record.rowID);
    451454                                                }
    452455                                        );
     
    454457                        );
    455458
    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",
     459                        // GRID ROW MOUSE OUT - clear all chart point highlighting and hide all tool tips.
     460                        $("#<xsl:value-of select="$gridContainerID"/> .k-selectable tr[role='row']").on("mouseleave",
    458461                                function ()
    459462                                {
    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
     463                                        // get the data item attached to "this" row being hovered
     464                                        var record = grid.dataItem(this);
     465
     466                                        // TURN OFF the point where the Ids match
     467                                        chart.toggleHighlight(false,
     468                                                function(point)
     469                                                {
     470                                                        return(point.dataItem.rowID == record.rowID);
     471                                                }
     472                                        );
     473
     474// doesn't work: nothing or "series/cat/dataitem/value"                                 chart.toggleHighlight(false);
     475                                        //hide tooltips for all points in the Series the point is in
     476                                        chart.hideTooltip();
    462477                                }
    463478                        );
    464479
    465                 </script>
     480
     481                        // CHART SERIES ENTER - highlight associated grid row.
     482                        chart.bind("seriesOver",
     483                                function (e)
     484                                {
     485console.error(e);
     486                                        // get the data item attached to "this" row being hovered
     487                                        //console.error(e.dataItem.uid);
     488                                        var x = grid.table.find('tr[data-uid="' + e.dataItem.uid + '"]');
     489                                        x.css("background", e.series.color);
     490
     491                                        x.find('td').css("color", e.series.tooltip.color);
     492//console.error(x.css);
     493//                                      if(x) x.addClass("Highlight");
     494                                }
     495                        );
     496
     497                        // CHART SERIES LEAVE - deselect associated grid row.
     498                        chart.bind("seriesLeave",
     499                                function (e)
     500                                {
     501                                        var x = grid.table.find('tr[data-uid="' + e.dataItem.uid + '"]');
     502                                        x.find('td').css("color", "");
     503                                        x.css("background", "");
     504//                                      x.removeClass("Highlight");
     505                                }
     506                        );
     507
    466508        </xsl:template>
    467509
Note: See TracChangeset for help on using the changeset viewer.