Drilldown on Row Hover

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      padding: 15px;
      position: relative;
    }

    .grid--tooltip {
      /* make sure bottom grid is not interactive */
      visibility: hidden;
      pointer-events: none;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.35s linear;
      height: 300px;
      width: 400px;
    }

    .grid--tooltip.active {
      visibility: visible;
      pointer-events: initial;
      opacity: 1;
    }

    /* we force row mode, but hide the layout controls */
    #childGrid zg-layout {
      display: none;
    }

    zing-grid[loading] {
      height: 355px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid id="mainGrid" class="active" caption="Fortune 500 Companies Drilldown (hover row for quarterly sales)">
    <zg-data data='[
          {
            "company": "Walmart",
            "stockPrice": 84.54,
            "quarterlySales": [123.18, 136.27, null, null],
            "priceSuffix": "Billions"
          },
          {
            "company": "Berkshire Hathaway",
            "stockPrice": 298300,
            "quarterlySales": [133.18, 136.27, null, null],
            "priceSuffix": "Billions"
          },
          {
            "company": "Apple",
            "stockPrice": 184.22,
            "quarterlySales": [153.68, 116.62, null, null],
            "priceSuffix": "Billions"
          },
          {
            "company": "Exxon Mobil",
            "stockPrice": 84.54,
            "quarterlySales": [123.18, 136.27, null, null],
            "priceSuffix": "Billions"
          }
        ]'></zg-data>
    <zg-colgroup>
      <zg-column index="company"></zg-column>
      <zg-column index="stockPrice" type="currency"></zg-column>
    </zg-colgroup>
  </zing-grid>

  <div class="grid--tooltip">
    <zing-grid caption="Default Text" layout="row" id="childGrid">
      <zg-colgroup>
        <zg-column index="q1"></zg-column>
        <zg-column index="q2"></zg-column>
        <zg-column index="q3"></zg-column>
        <zg-column index="q4"></zg-column>
      </zg-colgroup>
    </zing-grid>
  </div>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content

      // references to grids
      const mainGrid = document.querySelector('#mainGrid');
      const childGrid = document.querySelector('#childGrid');
      const tooltipContainer = document.querySelector('.grid--tooltip');
      const TOOLTIP_OFFSET = 15;

      // add event listener for row events
      mainGrid.addEventListener('row:mouseleave', function(e) {
        console.log('--- fire row:mouseout ---');
        tooltipContainer.classList.remove('active');
      });

      mainGrid.addEventListener('row:mouseover', function(e) {
        tooltipContainer.classList.add('active');
        console.log(e)

        // if we are on the right half of the screen 
        // set the tooltip to display to the left of the cursor

        // set tooltip placement
        tooltipContainer.style.top = `${e.detail.ZGEvent.xy[1] - TOOLTIP_OFFSET}px`;
        tooltipContainer.style.left = `${e.detail.ZGEvent.xy[0] + TOOLTIP_OFFSET}px`;

        //set tooltips position
        // cancel if its a header click
        if (e.detail.ZGData.isHeader) {
          return;
        }
        const zgData = e.detail.ZGData.data;
        // set up datastructure for childGrid
        const childData = [{
          q1: zgData.quarterlySales[0],
          q2: zgData.quarterlySales[1],
          q3: zgData.quarterlySales[2] || 'N/A',
          q4: zgData.quarterlySales[3] || 'N/A'
        }];

        // set caption
        childGrid.setCaption(`${zgData.company} 2018 Sales in ${zgData.priceSuffix}`);

        // set data for childGrid
        childGrid.setData(childData);
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>

<body class="zg-body">
  <zing-grid id="mainGrid" class="active" caption="Fortune 500 Companies Drilldown (hover row for quarterly sales)">
    <zg-data data='[
          {
            "company": "Walmart",
            "stockPrice": 84.54,
            "quarterlySales": [123.18, 136.27, null, null],
            "priceSuffix": "Billions"
          },
          {
            "company": "Berkshire Hathaway",
            "stockPrice": 298300,
            "quarterlySales": [133.18, 136.27, null, null],
            "priceSuffix": "Billions"
          },
          {
            "company": "Apple",
            "stockPrice": 184.22,
            "quarterlySales": [153.68, 116.62, null, null],
            "priceSuffix": "Billions"
          },
          {
            "company": "Exxon Mobil",
            "stockPrice": 84.54,
            "quarterlySales": [123.18, 136.27, null, null],
            "priceSuffix": "Billions"
          }
        ]'></zg-data>
    <zg-colgroup>
      <zg-column index="company"></zg-column>
      <zg-column index="stockPrice" type="currency"></zg-column>
    </zg-colgroup>
  </zing-grid>

  <div class="grid--tooltip">
    <zing-grid caption="Default Text" layout="row" id="childGrid">
      <zg-colgroup>
        <zg-column index="q1"></zg-column>
        <zg-column index="q2"></zg-column>
        <zg-column index="q3"></zg-column>
        <zg-column index="q4"></zg-column>
      </zg-colgroup>
    </zing-grid>
  </div>
</body>

</html>

.zg-body {
  padding: 15px;
  position: relative;
}

.grid--tooltip {
  /* make sure bottom grid is not interactive */
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.35s linear;
  height: 300px;
  width: 400px;
}

.grid--tooltip.active {
  visibility: visible;
  pointer-events: initial;
  opacity: 1;
}

/* we force row mode, but hide the layout controls */
#childGrid zg-layout {
  display: none;
}

// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content

  // references to grids
  const mainGrid = document.querySelector('#mainGrid');
  const childGrid = document.querySelector('#childGrid');
  const tooltipContainer = document.querySelector('.grid--tooltip');
  const TOOLTIP_OFFSET = 15;

  // add event listener for row events
  mainGrid.addEventListener('row:mouseleave', function(e) {
    console.log('--- fire row:mouseout ---');
    tooltipContainer.classList.remove('active');
  });

  mainGrid.addEventListener('row:mouseover', function(e) {
    tooltipContainer.classList.add('active');
    console.log(e)

    // if we are on the right half of the screen 
    // set the tooltip to display to the left of the cursor

    // set tooltip placement
    tooltipContainer.style.top = `${e.detail.ZGEvent.xy[1] - TOOLTIP_OFFSET}px`;
    tooltipContainer.style.left = `${e.detail.ZGEvent.xy[0] + TOOLTIP_OFFSET}px`;

    //set tooltips position
    // cancel if its a header click
    if (e.detail.ZGData.isHeader) {
      return;
    }
    const zgData = e.detail.ZGData.data;
    // set up datastructure for childGrid
    const childData = [{
      q1: zgData.quarterlySales[0],
      q2: zgData.quarterlySales[1],
      q3: zgData.quarterlySales[2] || 'N/A',
      q4: zgData.quarterlySales[3] || 'N/A'
    }];

    // set caption
    childGrid.setCaption(`${zgData.company} 2018 Sales in ${zgData.priceSuffix}`);

    // set data for childGrid
    childGrid.setData(childData);
  });
});