Build your first custom visualization

1
import React from 'react';
2
import PropTypes from 'prop-types';
3
import {
4
  Radar,
5
  RadarChart,
6
  PolarGrid,
7
  PolarAngleAxis,
8
  PolarRadiusAxis,
9
} from 'recharts';
10
import {Card, CardBody, HeadingText, NrqlQuery, Spinner, AutoSizer} from 'nr1';
11

12
export default class MyAwesomeVisualizationVisualization extends React.Component {
13
  // Custom props you wish to be configurable in the UI must also be defined in
14
  // the nr1.json file for the visualization. See docs for more details.
15
  static propTypes = {
16
    /**
17
     * A fill color to override the default fill color. This is an example of
18
     * a custom chart configuration.
19
     */
20
    fill: PropTypes.string,
21

22
    /**
23
     * A stroke color to override the default stroke color. This is an example of
24
     * a custom chart configuration.
25
     */
26
    stroke: PropTypes.string,
27
    /**
28
     * An array of objects consisting of a nrql `query` and `accountId`.
29
     * This should be a standard prop for any NRQL based visualizations.
30
     */
31
    nrqlQueries: PropTypes.arrayOf(
32
      PropTypes.shape({
33
        accountId: PropTypes.number,
34
        query: PropTypes.string,
35
      })
36
    ),
37
  };
38

39
  /**
40
   * Restructure the data for a non-time-series, facet-based NRQL query into a
41
   * form accepted by the Recharts library's RadarChart.
42
   * (https://recharts.org/api/RadarChart).
43
   */
44
  transformData = (rawData) => {
45
    return rawData.map((entry) => ({
46
      name: entry.metadata.name,
47
      // Only grabbing the first data value because this is not time-series data.
48
      value: entry.data[0].y,
49
    }));
50
  };
51

52
  /**
53
   * Format the given axis tick's numeric value into a string for display.
54
   */
55
  formatTick = (value) => {
56
    return value.toLocaleString();
57
  };
58

59
  render() {
60
    const {nrqlQueries, stroke, fill} = this.props;
61

62
    const nrqlQueryPropsAvailable =
63
      nrqlQueries &&
64
      nrqlQueries[0] &&
65
      nrqlQueries[0].accountId &&
66
      nrqlQueries[0].query;
67

68
    if (!nrqlQueryPropsAvailable) {
69
      return <EmptyState />;
70
    }
71

72
    return (
73
      <AutoSizer>
74
        {({width, height}) => (
75
          <NrqlQuery
76
            query={nrqlQueries[0].query}
77
            accountId={parseInt(nrqlQueries[0].accountId)}
78
            pollInterval={NrqlQuery.AUTO_POLL_INTERVAL}
79
          >
80
            {({data, loading, error}) => {
81
              if (loading) {
82
                return <Spinner />;
83
              }
84

85
              if (error) {
86
                return <ErrorState />;
87
              }
88

89
              const transformedData = this.transformData(data);
90

91
              return (
92
                <RadarChart
93
                  width={width}
94
                  height={height}
95
                  data={transformedData}
96
                >
97
                  <PolarGrid />
98
                  <PolarAngleAxis dataKey="name" />
99
                  <PolarRadiusAxis tickFormatter={this.formatTick} />
100
                  <Radar
101
                    dataKey="value"
102
                    stroke={stroke || '#51C9B7'}
103
                    fill={fill || '#51C9B7'}
104
                    fillOpacity={1.0}
105
                  />
106
                </RadarChart>
107
              );
108
            }}
109
          </NrqlQuery>
110
        )}
111
      </AutoSizer>
112
    );
113
  }
114
}
115

116
const EmptyState = () => (
117
  <Card className="EmptyState">
118
    <CardBody className="EmptyState-cardBody">
119
      <HeadingText
120
        spacingType={[HeadingText.SPACING_TYPE.LARGE]}
121
        type={HeadingText.TYPE.HEADING_3}
122
      >
123
        Please provide at least one NRQL query & account ID pair
124
      </HeadingText>
125
      <HeadingText
126
        spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
127
        type={HeadingText.TYPE.HEADING_4}
128
      >
129
        An example NRQL query you can try is:
130
      </HeadingText>
131
      <code>FROM NrUsage SELECT sum(usage) FACET metric SINCE 1 week ago</code>
132
    </CardBody>
133
  </Card>
134
);
135

136
const ErrorState = () => (
137
  <Card className="ErrorState">
138
    <CardBody className="ErrorState-cardBody">
139
      <HeadingText
140
        className="ErrorState-headingText"
141
        spacingType={[HeadingText.SPACING_TYPE.LARGE]}
142
        type={HeadingText.TYPE.HEADING_3}
143
      >
144
        Oops! Something went wrong.
145
      </HeadingText>
146
    </CardBody>
147
  </Card>
148
);