Testing AG Grid functionality

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ag-Grid React Example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style> html, body, #root { margin: 0; padding: 0; height: 100%; } </style>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="root">Loading ag-Grid React example&hellip;</div>
    
    <script>
        var appLocation = '';
        var boilerplatePath = '';
        var systemJsMap = {"ag-grid":"https:\/\/unpkg.com\/ag-grid@18.1.1\/dist\/ag-grid.js","ag-grid\/main":"https:\/\/unpkg.com\/ag-grid@18.1.1\/dist\/ag-grid.js","ag-grid-enterprise":"https:\/\/unpkg.com\/ag-grid-enterprise@18.1.1\/","ag-grid-react":"npm:ag-grid-react@18.1.0\/","ag-grid-angular":"npm:ag-grid-angular@18.1.0\/","ag-grid-vue":"npm:ag-grid-vue@18.1.0\/"}    </script>

    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>

    <script>
      System.import('index.jsx').catch( function(err) { console.error(err); })
    </script>
</body>
</html>

.tp-gold {
  background-color: gold;
}

.tp-silver {
  background-color: silver;
}

.tp-bronze {
  background-color: burlywood;
}
.grid-wrapper {
    height: 100%;
    padding-top: 26px;
    box-sizing: border-box;
}

.button-bar {
    position: absolute;
    top: 0;
    left: 0;
    margin: -3px;
}

"use strict";

import React, {
  Component
}
from "react";
import {
  render
}
from "react-dom";
import {
  AgGridReact
}
from "ag-grid-react";
//import "ag-grid-enterprise";
//import { LicenseManager } from 'ag-grid-enterprise/main';
//LicenseManager.setLicenseKey('Accelerize_Inc._CAKE_2Devs4_SaaS_31_July_2018__MTUzMjk5MTYwMDAwMA==bbb1d15ec180cdadf8ed16c8f4406b52');

class GridExample extends Component {
  constructor(props) {
    super(props);

    this.state = {
      columnDefs: [{
        headerName: "Source",
        field: "source",
        width: 150,
        suppressToolPanel: true
      }, {
        headerName: "Clicks",
        field: "clicks",
        width: 90,
        //  hide: true
      }, {
        headerName: "Conversions",
        field: "conversions",
        width: 120,
        //    hide: true
      }, {
        headerName: "Revenue",
        field: "revenue",
        //    valueFormatter: currencyFormatter,
        cellClass: "number-cell",
        width: 90
      }, {
        headerName: "Conversion Rate",
        field: "conversion_rate",
        valueGetter: function aPlusBValueGetter(params) {
          return parseFloat(((params.data.conversions / params.data.clicks) * 100).toFixed(2)) + "%";
        },
        width: 130,
      }],
      defaultColDef: {
        enableValue: false,
        enableRowGroup: false,
        enablePivot: false
      },
      rowData: JSON.parse(`[{"source":"Facebook","clicks":312,"conversions":89,"revenue":2038},{"source":"Google","clicks":423,"conversions":54,"revenue":1538}]`)
    };
  }

  sizeToFit() {
    this.gridApi.sizeColumnsToFit();
  }
  toggleCounts() {
    this.gridColumnApi.setColumnsVisible(["clicks", "conversions"], true)
  }
  autoSizeAll() {
    var allColumnIds = [];
    this.gridColumnApi.getAllColumns().forEach(function(column) {
      allColumnIds.push(column.colId);
    });
    this.gridColumnApi.autoSizeColumns(allColumnIds);
  }
  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    //const httpRequest = new XMLHttpRequest();
    //const updateData = data => {
    //  this.setState({ rowData: data });
    //};
    params.api.sizeColumnsToFit();
    // httpRequest.open("GET", "https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinners.json");
    // httpRequest.send();
    // httpRequest.onreadystatechange = () => {
    //   if (httpRequest.readyState === 4 && httpRequest.status === 200) {
    //     updateData(JSON.parse(httpRequest.responseText));
    //   }
    // };
    //updateData([{"source":"Facebook","clicks":312,"conversions":89,"revenue":2038},{"source":"Google","clicks":423,"conversions":54,"revenue":1538}]);
  }


  render() {
    return ( < div style = {
        {
          width: "100%",
          height: "100%"
        }
      } >
      < div id = "myGrid"
      style = {
        {
          boxSizing: "border-box",
          height: "100%",
          width: "100%",
          marginTop: "20px"
        }
      }
      className = "ag-theme-balham" >
      < AgGridReact columnDefs = {
        this.state.columnDefs
      }
      defaultColDef = {
        this.state.defaultColDef
      }
      enableSorting = {
        true
      }
      enableColResize = {
        true
      }
      showToolPanel = {
        false
      }
      enableFilter = {
        true
      }
      onGridReady = {
        this.onGridReady.bind(this)
      }
      rowData = {
        this.state.rowData
      }
      /> < /div> < div class = "button-bar" >
      < button onClick = {
        this.sizeToFit.bind(this)
      } > Size to Fit < /button> < button onClick = {
        this.autoSizeAll.bind(this)
      } > Auto - Size All < /button> < button onClick = {
        this.toggleCounts.bind(this)
      } > Show / Hide Counts < /button> < /div> < /div>
    );
  }
}

function currencyFormatter(params) {
  return "$" + formatNumber(params.value);
}

function formatNumber(number) {
  return Math.floor(number)
    .toString()
    .replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
}
render( < GridExample / > , document.querySelector("#root"));


//Revenue Focus vs Count focus https://www.ag-grid.com/javascript-grid-column-moving/
//Cel styling to make a cohort https://www.ag-grid.com/javascript-grid-cell-styling/
//column api example https://www.ag-grid.com/javascript-grid-column-definitions/

(function(global) {
    // simplified version of Object.assign for es3
    function assign() {
        var result = {};
        for (var i = 0, len = arguments.length; i < len; i++) {
            var arg = arguments[i];
            for (var prop in arg) {
                result[prop] = arg[prop];
            }
        }
        return result;
    }

    System.config({
        transpiler: 'plugin-babel',
        defaultExtension: 'js',
        paths: {
            'npm:': 'https://unpkg.com/'
        },
        map: assign(
            {
                // babel transpiler
                'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
                'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',

                // react
                react: 'npm:react@16.0.0',
                'react-dom': 'npm:react-dom@16.0.0',
                'react-dom-factories': 'npm:react-dom-factories',
                redux: 'npm:redux@3.6.0',
                'react-redux': 'npm:react-redux@5.0.6',
                'prop-types': 'npm:prop-types',

                app: appLocation + 'app'
            },
            systemJsMap
        ), // systemJsMap comes from index.html

        packages: {
            react: {
                main: './umd/react.production.min.js'
            },
            'react-dom': {
                main: './umd/react-dom.production.min.js'
            },
            'prop-types': {
                main: './prop-types.min.js',
                defaultExtension: 'js'
            },
            redux: {
                main: './dist/redux.min.js',
                defaultExtension: 'js'
            },
            'react-redux': {
                main: './dist/react-redux.min.js',
                defaultExtension: 'js'
            },
            app: {
                defaultExtension: 'jsx'
            },
            'ag-grid-react': {
                main: './main.js',
                defaultExtension: 'js'
            },
            'ag-grid-enterprise': {
                main: './main.js',
                defaultExtension: 'js'
            }
        },
        meta: {
            '*.jsx': {
                babelOptions: {
                    react: true
                }
            }
        }
    });
})(this);