Open devfreddy opened 4 years ago
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}
/>
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.