• /
  • Log in
  • Start now

SparklineTableRowCell

Renders a table row cell showing a sparkline. Sparklines can either come from a NRQL query (thus providing accountId and query), or from a predefined data passed in the chart format. In either case, all props are 1:1 compatible with the <NrqlQuery> format type CHART.

A common case to render one row per NRQL facet, is to perform the query outside of the table, then pass the result as items (returned data from a <NrqlQuery> is an array, that can be directly used as the input items of a table). Once rendering the sparkline, you need to re-wrap the data in an array, in order to build, from a series, a new entire set of data.

Usage

import { SparklineTableRowCell } from 'nr1'

Examples

Example 1

1
function render() {
2
const items = [
3
{
4
accountId: 1,
5
query:
6
"SELECT count(*) FROM Transaction WHERE entityGuid = '…' TIMESERIES",
7
},
8
];
9
10
return (
11
<Table>
12
<TableHeader>
13
<TableHeaderCell>Sparkline</TableHeaderCell>
14
</TableHeader>
15
16
{({ item }) => (
17
<TableRow>
18
<SparklineTableRowCell
19
accountId={item.accountId}
20
query={item.query}
21
/>
22
</TableRow>
23
)}
24
</Table>
25
);
26
}

Example 2

1
<NrqlQuery
2
accountId={1}
3
query="SELECT count(*) FROM Transaction FACET entityGuid TIMESERIES UNTIL 5 MINUTES AGO"
4
>
5
{({ loading, error, data }) => {
6
if (loading || error) {
7
return null;
8
}
9
10
return (
11
<Table items={data}>
12
<TableHeader>
13
<TableHeaderCell>Entity GUID</TableHeaderCell>
14
<TableHeaderCell>Transactions</TableHeaderCell>
15
</TableHeader>
16
17
{({ item }) => (
18
<TableRow>
19
<TableRowCell>{item.metadata.name}</TableRowCell>
20
<SparklineTableRowCell data={[item]} />
21
</TableRow>
22
)}
23
</Table>
24
);
25
}}
26
</NrqlQuery>;

Props

accountIdnumber

Sets the account ID to perform the query.

classNamestring

Appends class names to the component.

Should be used only for positioning and spacing purposes.

dataobject[]

Data is an array of objects where each object represents a series to be drawn. Each series comprises visualization metadata and an array of data points.

Example 1

1
const data = [
2
{
3
metadata: {
4
id: 'series-1',
5
name: 'Serie 1',
6
color: '#a35ebf',
7
viz: 'main',
8
units_data: {
9
x: 'TIMESTAMP',
10
y: 'BYTES',
11
},
12
},
13
data: [
14
{
15
x: 1614715318098,
16
y: 21400,
17
},
18
{
19
x: 1614718918098,
20
y: 12200,
21
},
22
{
23
x: 1614722518098,
24
y: 9300,
25
},
26
{
27
x: 1614726118098,
28
y: 14500,
29
},
30
{
31
x: 1614729718098,
32
y: 27500,
33
},
34
{
35
x: 1614733318098,
36
y: 24700,
37
},
38
],
39
},
40
{
41
metadata: {
42
id: 'series-2',
43
name: 'Serie 2',
44
color: '#85c956',
45
viz: 'main',
46
units_data: {
47
x: 'TIMESTAMP',
48
y: 'BYTES',
49
},
50
},
51
data: [
52
{
53
x: 1614715318098,
54
y: 8800,
55
},
56
{
57
x: 1614718918098,
58
y: 1400,
59
},
60
{
61
x: 1614722518098,
62
y: 4600,
63
},
64
{
65
x: 1614726118098,
66
y: 5200,
67
},
68
{
69
x: 1614729718098,
70
y: 14100,
71
},
72
{
73
x: 1614733318098,
74
y: 19300,
75
},
76
],
77
},
78
{
79
metadata: {
80
id: 'events',
81
name: 'Events',
82
color: 'red',
83
viz: 'event',
84
},
85
data: [
86
{
87
x0: 1614718918098,
88
x1: 1614722518098,
89
},
90
{
91
x0: 1614729718098,
92
x1: 1614729718098,
93
},
94
],
95
},
96
];
onClickfunction

Callback fired any time the user clicks on the table cell.

function (
event: Event
) => undefined
querystring

NRQL query used for fetching data. The query is performed against the provided accountId.

styleobject

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

testIdstring

Adds a data-test-id.

Used to target the component in unit and e2e testing.

toshape|string

Location object or url string to link to.

shape

pathnamerequiredstring
searchstring
hashstring

Methods

SparklineTableRowCell.render

function () => undefined
Edit this pageCreate an issue
Copyright © 2021 New Relic Inc.

This site uses cookies 🍪

We use cookies and other similar technologies ("Cookies") on our websites and services to enhance your experience and to provide you with relevant content. By using our websites and services you are agreeing to the use of cookies. You can read more here. If you consent to our cookies, please click Yes.