Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <title>data-grid with working date ranges</title>

  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../polymer/polymer.html"/>
  <link rel="import" href="../px-theme/px-theme-styles.html"/>
  <link rel="import" href="px-data-grid.html"/>
  <link rel="import" href="px-data-grid-paginated.html"/>

  <style is="custom-style">
    html, body {
      margin: 65px;
      font-size: 15px;
    }
  </style>

  <custom-style>
    <style is="custom-style" include="px-theme-styles"></style>
  </custom-style>
</head>

<body>
  <h2> data-grid with working date ranges </h2>
  <px-data-grid selection-mode="multi" striped editable resizable filterable ></px-data-grid>


  <script>
    /*
     * Find the grid in the DOM
     */
    const grid = document.querySelector('px-data-grid');


    /**
     * Fetches JSON from `url` asynchronously, returns a Promise with result
     */

    function getData(url) {
      return fetch("padi_APM.json").then(resp => resp.json());
    };

    grid.columns = [
      {
        name: 'Tag Name coz we like really long names',
        path: 'Tag Name coz we like really long names',
        editable: true,
        renderer: 'px-data-grid-string-renderer',
        flexGrow: 5
      },
      {
        name: 'Correlated Tags',
        path: 'Correlated Tags',
        editable: true,
        renderer: 'px-data-grid-string-renderer',
        flexGrow: 5
      },
      {
        name: 'Units',
        path: 'Units',
        renderer: 'px-data-grid-string-renderer',
        flexGrow: 5
      },
      {
        name: 'Temp',
        path: 'Temp',
        renderer: 'px-data-grid-number-renderer',
        flexGrow: 4
      },
      {
        name: 'Description',
        path: 'Description',
        renderer: 'px-data-grid-string-renderer',
        editable: true,
        flexGrow: 1
      },
      {
        name: 'Maintenance Date',
        path: 'Maintenance Date',
        type: 'date',
        editable: true,
        flexGrow: 5,
        renderer: 'px-data-grid-date-renderer',
        dateFormat: {
           'format': 'YYYY-MM-DD HH:mm:ss'
         },

        filterByTime:true,

        rendererConfig:{
          dateFormat: 'YYYY-MM-DD HH:mm:ss',
          displayFormat: 'MMMM/DD/YYYY HH:mm:ss z A',
          timezone: 'GMT',
          datePickerDateFormat : 'MM/DD/YYYY',
          datePickerTimeFormat :'HH:mm:ss'
        },
          dateRanges: [
            {
              name: 'Last 7 days',
              getRange: () => {
                return {
                  dateTo: window.moment().format(),
                  dateFrom: window.moment().subtract(7, 'd').format()
                };
              }
            },
            {
              name: 'Last 14 days',
              getRange: () => {
                return {
                  dateTo: window.moment().format(),
                  dateFrom: window.moment().subtract(14, 'd').format()
                };
              }
            },
            {
              name: 'This month',
              getRange: () => {
                return {
                  dateTo: window.moment().format(),
                  dateFrom: window.moment().subtract(31, 'd').format()
                };
              }
            },
            {
              name: 'Last month',
              getRange: () => {
                return {
                  dateTo: window.moment().subtract(1, 'M').format(),
                  dateFrom: window.moment().subtract(2, 'M').format()
                };
              }
            },
            {
            name: 'Fixed range',
            range: {
              dateTo: '2018-1-10',
              dateFrom: '2018-12-19'
            }
          }
        ]
      },
      {
        name: 'Install Date',
        path: 'Install Date',
        renderer: 'px-data-grid-date-renderer',
        type: 'date',
        editable: true,
        dateFormat: {
           'format': 'YYYY-MM-DD HH:mm:ss',
           'timezone': 'UTC'
         },

        filterByTime:true,

        rendererConfig:{
          dataFormat: 'YYYY-MM-DD HH:mm:ss',
          displayFormat: 'MM/DD/YYYY HH:mm:ss',
          timezone: 'UTC',
          datePickerDateFormat : 'MM/DD/YYYY',
          datePickerTimeFormat :'HH:mm:ss'
        }
      },
      {
        name: 'Decommission Date',
        path: 'Decommission Date',
        renderer: 'px-data-grid-date-renderer',
        type: 'date',
        editable: true,
        dateFormat: {
           'format': 'YYYY-MM-DD HH:mm:ss',
           'timezone': 'UTC'
         },

        filterByTime:true,

        rendererConfig:{
          dataFormat: 'YYYY-MM-DD HH:mm:ss',
          displayFormat: 'MM/DD/YYYY HH:mm:ss',
          timezone: 'UTC',
          datePickerDateFormat : 'MM/DD/YYYY',
          datePickerTimeFormat :'HH:mm:ss'
        }
      },
      {
        name: 'Asset',
        path: 'Asset',
        renderer: 'px-data-grid-string-renderer',
        editable: true
      },
      {
        name: 'Domain',
        path: 'Domain',
        renderer: 'px-data-grid-string-renderer',
        editable: true
      },
      {
        name: 'Location',
        path: 'Location',
        renderer: 'px-data-grid-string-renderer',
        editable: true
      },
      {
        name: 'Timezone',
        path: 'Timezone',
        renderer: 'px-data-grid-string-renderer',
        editable: true
      }
    ];


    getData('padi_APM.json').then(data => {
          grid.tableData = data;
    });


  </script>
</body>
</html>