Skip to content
Permalink
Browse files

Added summary bar, filtering data without regionCode

  • Loading branch information
Marek Kramski Marek Kramski
Marek Kramski authored and Marek Kramski committed Aug 30, 2019
1 parent 388bf7c commit f510172c3e34378a5531aaf6f5f50fd6b59a3212
@@ -1,3 +1,4 @@
module.exports = {
singleQuote: true
singleQuote: true,
trailingComma: "es5",
};
@@ -84,7 +84,7 @@ export default class DetailsModal extends React.Component {
</GridItem>
<GridItem columnStart={1} columnEnd={12}>
<LineChart
style={{ height: this.props.height * 0.4, width: '100%' }}
style={{ height: this.props.height * 0.28, width: '100%' }}
accountId={accountId}
query={`SELECT average(duration) FROM PageView WHERE regionCode = '${
this.props.openedFacet.name[0]
@@ -96,7 +96,7 @@ export default class DetailsModal extends React.Component {
</GridItem>
<GridItem columnStart={1} columnEnd={6}>
<LineChart
style={{ height: this.props.height * 0.3, width: '100%' }}
style={{ height: this.props.height * 0.28, width: '100%' }}
accountId={accountId}
query={`SELECT average(domProcessingDuration) FROM PageView WHERE regionCode = '${
this.props.openedFacet.name[0]
@@ -108,7 +108,7 @@ export default class DetailsModal extends React.Component {
</GridItem>
<GridItem columnStart={7} columnEnd={12}>
<LineChart
style={{ height: this.props.height * 0.3, width: '100%' }}
style={{ height: this.props.height * 0.28, width: '100%' }}
accountId={accountId}
query={`SELECT average(networkDuration) FROM PageView WHERE regionCode = '${
this.props.openedFacet.name[0]
@@ -0,0 +1,78 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
Stack,
StackItem,
SparklineChart,
BillboardChart,
HeadingText,
} from 'nr1';

export default class SummaryBar extends Component {
static propTypes = {
accountId: PropTypes.any.isRequired,
nrqlSince: PropTypes.string.isRequired,
};

render() {
return (
<Stack
alignmentType={Stack.ALIGNMENT_TYPE.FILL}
directionType={Stack.DIRECTION_TYPE.HORIZONTAL}
gapType={Stack.GAP_TYPE.TIGHT}
>
<StackItem className="inline">
<HeadingText>Overall</HeadingText>
</StackItem>
<StackItem className="inline">
<BillboardChart
className="microchart"
accountId={this.props.accountId}
query={`FROM PageView SELECT count(*) as 'Page Views' ${this.props.nrqlSince}`}
/>
<SparklineChart
className="microchart"
accountId={this.props.accountId}
query={`FROM PageView SELECT count(*) TIMESERIES ${this.props.nrqlSince}`}
/>
</StackItem>
<StackItem className="inline">
<BillboardChart
className="microchart"
accountId={this.props.accountId}
query={`FROM PageView SELECT average(duration) as 'Performance' ${this.props.nrqlSince}`}
/>
<SparklineChart
className="microchart"
accountId={this.props.accountId}
query={`FROM PageView SELECT average(duration) TIMESERIES ${this.props.nrqlSince}`}
/>
</StackItem>
<StackItem className="inline">
<BillboardChart
className="microchart"
accountId={this.props.accountId}
query={`FROM PageView SELECT average(networkDuration) as 'Network Avg.' ${this.props.nrqlSince}`}
/>
<SparklineChart
className="microchart"
accountId={this.props.accountId}
query={`FROM PageView SELECT average(networkDuration) TIMESERIES ${this.props.nrqlSince}`}
/>
</StackItem>
<StackItem className="inline" grow={true}>
<BillboardChart
className="microchart"
accountId={this.props.accountId}
query={`FROM PageView SELECT average(backendDuration) as 'Backend Avg.' ${this.props.nrqlSince}`}
/>
<SparklineChart
className="microchart"
accountId={this.props.accountId}
query={`FROM PageView SELECT average(backendDuration) TIMESERIES ${this.props.nrqlSince}`}
/>
</StackItem>
</Stack>
);
}
}

0 comments on commit f510172

Please sign in to comment.
You can’t perform that action at this time.