import React from 'react';
import { TableChart, LineChart, navigation, PlatformStateContext } from 'nr1';
 
export default class MyNerdlet extends React.Component {
 
    constructor(props) {
        super(props);
        this.accountId = <YOUR_ACCOUNT_ID>;    //My New Relic account ID
        this.openEntity = this.openEntity.bind(this);
    }
 
    openEntity(entityGuid) {
        navigation.openStackedEntity(entityGuid);
    }
 
    render(){
        const style = {
            height: '45vh',
            margin: '20px'
        };
        const nrql = `SELECT count(*) as 'transactions', apdex(duration) as 'apdex', percentile(duration, 99, 90, 70) FROM Transaction facet appName, entityGuid limit 25`;
        const trxOverT = `SELECT count(*) as 'transactions' FROM Transaction facet appName limit 25 TIMESERIES`;
        //return the JSX we're rendering
        return <PlatformStateContext.Consumer>
          {(platformUrlState) => {
              //console.debug here for learning purposes
              console.debug(platformUrlState); //eslint-disable-line
              const { duration } = platformUrlState.timeRange;
              const since = ` SINCE ${duration/60/1000} MINUTES AGO`;
              return <div style={{height: '100vh'}}>
                  <TableChart style={style} fullWidth={true} accountId={this.accountId}
                    query={nrql + since}
                    onClickTable={(dataEl, row, chart) => {
                        //for learning purposes, we'll write to the console.
                        console.debug("onClickTable", [dataEl, row, chart]) //eslint-disable-line
                        this.openEntity(row.entityGuid)
                    }}
                    />
                  <LineChart style={style} fullWidth={true} accountId={this.accountId}
                    query={trxOverT + since}
                    onClickLine={(...args) => {
                        //for learning purposes, we'll write to the console.
                        console.debug("onClickLine", args) //eslint-disable-line
                    }}
                    />
              </div>;
          }}
        </PlatformStateContext.Consumer>;
    }
}