v.1.5.0 - Row Grouping

<!DOCTYPE html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>Row Grouping</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    zg-cell span.positive {
      color: green;
    }

    zg-cell span.negative {
      color: red;
    }

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

<body>
  <!-- The data for this grid is set via JavaScript -->
  <zing-grid caption="VoltVoyage eBike Financials 2018-2024">
    <!-- row-group combines rows based on the given indexes -->
    <!-- Comma separating indexes allows you to nest and further group -->
    <zg-column type="row-group" index="date.year,date.month"></zg-column>
    <!-- These columns are what will be shown when rows are expanded -->
    <zg-column index="date.day"></zg-column>
    <zg-column index="revenue" type="currency"></zg-column>
    <zg-column index="cost" type="currency"></zg-column>
    <!-- The aggregate column runs the "findProfit" function declared
           in JavaScript to find the value to display. Here I am using "sum"
           as the aggregate value but I will be computing my own and ignoring
          that "summed" value. -->
    <zg-column header="Profit" type="aggregate" type-aggregate-value="sum" renderer="findProfit"></zg-column>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    /**
     * Renderer function used by the "Profit" aggregate zg-column.
     * Finds the profit using the given revenue and cost entry metrics.
     * @param {Object} recordData - The key:val pair of the entire row
     * @param {Array} aggregateData - An array of just the rows values
     * @param {String} aggregateValue - The row's computed value (e.g. sum, avg, etc)
     * @returns {string} HTML string to be rendered in the cell
     */
    function findProfit(recordData, aggregateData, aggregateValue) {
      let profit = recordData.revenue - recordData.cost;
      return `
    <span class="${profit > 0 ? 'positive' : 'negative'}">
      $${profit.toFixed(2)}
    </span>
  `;
    }

    function generateData() {
      function _getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      function _daysInMonth(month, year) {
        return new Date(year, month, 0).getDate();
      }
      const startDate = new Date('January 1, 2018');
      const endDate = new Date('May 1, 2024');
      const months = [
        'January', 'February', 'March', 'April',
        'May', 'June', 'July', 'August', 'September',
        'October', 'November', 'December'
      ];
      const data = [];
      let currentDate = new Date(startDate);
      while (currentDate <= endDate) {
        const year = currentDate.getFullYear();
        const month = currentDate.getMonth();
        const days = _daysInMonth(month + 1, year);
        for (let day = 1; day <= days; day++) {
          const dateObj = {
            year,
            month: months[month],
            day
          };
          const dailyRevenue = (month >= 9 && month <= 11) ?
            (_getRandomInt(35000, 45000) / days).toFixed(2) :
            (_getRandomInt(18000, 32000) / days).toFixed(2);
          const dailyCost = (_getRandomInt(25000, 28000) / days).toFixed(2);
          data.push({
            date: dateObj,
            revenue: Number(dailyRevenue),
            cost: Number(dailyCost)
          });
        }
        currentDate.setMonth(currentDate.getMonth() + 1);
      }
      return data;
    }
    // Grab the zing-grid and insert the data (this demo has a lot of data)
    let zgRef = document.querySelector('zing-grid');
    zgRef.setData(generateData());
  </script>
</body>

</html>

<!DOCTYPE html>
<html class="zc-html">

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

<body>
  <!-- The data for this grid is set via JavaScript -->
  <zing-grid caption="VoltVoyage eBike Financials 2018-2024">
    <!-- row-group combines rows based on the given indexes -->
    <!-- Comma separating indexes allows you to nest and further group -->
    <zg-column type="row-group" index="date.year,date.month"></zg-column>
    <!-- These columns are what will be shown when rows are expanded -->
    <zg-column index="date.day"></zg-column>
    <zg-column index="revenue" type="currency"></zg-column>
    <zg-column index="cost" type="currency"></zg-column>
    <!-- The aggregate column runs the "findProfit" function declared
           in JavaScript to find the value to display. Here I am using "sum"
           as the aggregate value but I will be computing my own and ignoring
          that "summed" value. -->
    <zg-column header="Profit" type="aggregate" type-aggregate-value="sum" renderer="findProfit"></zg-column>
  </zing-grid>
</body>

</html>

zg-cell span.positive {
  color: green;
}

zg-cell span.negative {
  color: red;
}

/**
 * Renderer function used by the "Profit" aggregate zg-column.
 * Finds the profit using the given revenue and cost entry metrics.
 * @param {Object} recordData - The key:val pair of the entire row
 * @param {Array} aggregateData - An array of just the rows values
 * @param {String} aggregateValue - The row's computed value (e.g. sum, avg, etc)
 * @returns {string} HTML string to be rendered in the cell
 */
function findProfit(recordData, aggregateData, aggregateValue) {
  let profit = recordData.revenue - recordData.cost;
  return `
    <span class="${profit > 0 ? 'positive' : 'negative'}">
      $${profit.toFixed(2)}
    </span>
  `;
}

function generateData() {
  function _getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function _daysInMonth(month, year) {
    return new Date(year, month, 0).getDate();
  }
  const startDate = new Date('January 1, 2018');
  const endDate = new Date('May 1, 2024');
  const months = [
    'January', 'February', 'March', 'April',
    'May', 'June', 'July', 'August', 'September',
    'October', 'November', 'December'
  ];
  const data = [];
  let currentDate = new Date(startDate);
  while (currentDate <= endDate) {
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth();
    const days = _daysInMonth(month + 1, year);
    for (let day = 1; day <= days; day++) {
      const dateObj = {
        year,
        month: months[month],
        day
      };
      const dailyRevenue = (month >= 9 && month <= 11) ?
        (_getRandomInt(35000, 45000) / days).toFixed(2) :
        (_getRandomInt(18000, 32000) / days).toFixed(2);
      const dailyCost = (_getRandomInt(25000, 28000) / days).toFixed(2);
      data.push({
        date: dateObj,
        revenue: Number(dailyRevenue),
        cost: Number(dailyCost)
      });
    }
    currentDate.setMonth(currentDate.getMonth() + 1);
  }
  return data;
}
// Grab the zing-grid and insert the data (this demo has a lot of data)
let zgRef = document.querySelector('zing-grid');
zgRef.setData(generateData());