feat(ChartComparison): Chart Comparison Group

[devfreddy]

This is a series of Charts that are adjusting their output based on a common input. Think of this like the ChartGroup component but with an input.

[devfreddy]

First pass at an implementation for this:

Component

import React from 'react';
import PropTypes from 'prop-types';

import { Grid, GridItem } from 'nr1';

/*
 * Example Usage:
 * 
 * <ChartComparison
 *   chart={ScatterChart}
 *   compareOver="hour"
 *   timeRange={{ begin_time: 1580156528000, end_time: 1580156528000, duration: 0 }}
 *   accountId={1}
 *   query={SELECT count(*) FROM `Synthetics` TIMESERIES AUTO FACET jobType}
 * />
 */

export default class ChartComparison extends React.Component {

  static propTypes = {

    /*
     * An NR1 (or other) Chart component that accepts props "accountId" and "query"
     */
    chart: PropTypes.Component,

    /*
     * NRQL compatible timeRange interval:
     * 'minute'
     * 'hour'
     * 'day'
     * 'week'
     * 'month'
     * 'year' ???
     */
    compareOver: PropTypes.string,

    /*
     * TimeRange
     */
    timeRange: PropTypes.shapeOf({
      begin_time: PropTypes.number,
      end_time: PropTypes.number,
      duration: PropTypes.number
    }),

    /*
     * An NR1 accountId to be used with the Chart component
     */
    accountId: PropTypes.string,

    /*
     * The NRQL query you want us to manage the timeRange on
     * Exclude the SINCE clause
     * 
     * TO DO - Strip any SINCE clause out of this for the user
     */
    query: PropTypes.string
  }

  constructor(props) {
    super(props);
  }

  render () {
    const { chart, compareOver, accountId, query } = this.props;

    // TO DO:

    // const charts = [];

    // Generate array of charts needed
      // Calculate number of charts
      // (end_time - begin_time) / (compareOver converted to milliseconds)

      // range(0...numberOfCharts).map
      // const nrqlWithTimeRange = baseNrql + timeRangeToNrql(timeRange with begin_time and end_time to match first comparison chart)

    return (
      <div class="my-cool-wrapper-class">
        <Grid>
          {/* For each item in above array of charts */}
            <GridItem>
              {<chart accountId={accountId} query={query}></chart>}
            </GridItem>
        </Grid>
      </div>
    )
  }
}

Sample Usage

  <ChartComparison
    chart={ScatterChart}
    compareOver="hour"
    timeRange={{ begin_time: 1580156528000, end_time: 1580156528000, duration: 0 }}
    accountId={1}
    query={SELECT count(*) FROM `Synthetics` TIMESERIES AUTO FACET jobType}
  />