Skip to content

Commit b633275

Browse files
WriteMayurWriteMayur
authored
Merge pull request #21589 from brnhensley/patch-39
chore: update js -> jsx identifier
2 parents eb9ea04 + 9b90e85 commit b633275

File tree

113 files changed

+6167
-6142
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

113 files changed

+6167
-6142
lines changed

‎src/content/docs/new-relic-solutions/build-nr-ui/build-ab-app/chart-group.mdx‎

Lines changed: 72 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -34,33 +34,33 @@ There is a line graph under each of the tables you created in the last lesson. T
3434
<Step>
3535
In this new file, create a component called `VersionPageViews` to hold a `LineChart`, which shows the number of times a page is viewed:
3636

37-
```js fileName=nerdlets/ab-test-nerdlet/page-views.js
38-
import React from 'react';
39-
import { LineChart } from 'nr1';
37+
```jsx fileName=nerdlets/ab-test-nerdlet/page-views.js
38+
import React from "react";
39+
import { LineChart } from "nr1";
4040

4141
export default class VersionPageViews extends React.Component {
42-
render() {
43-
const versionPageViews = {
44-
metadata: {
45-
id: `page-views-${this.props.version}`,
46-
name: `Version ${this.props.version.toUpperCase()}`,
47-
viz: 'main',
48-
color: 'blue',
49-
units_data: {
50-
y: 'MS'
51-
}
52-
},
53-
data: [
54-
{ x: 0, y: 10 },
55-
{ x: 10, y: 13 },
56-
{ x: 20, y: 11.5 },
57-
{ x: 30, y: 10 },
58-
{ x: 40, y: 8.75 },
59-
{ x: 50, y: 9 },
60-
],
61-
}
62-
return <LineChart data={[versionPageViews]} fullWidth />
63-
}
42+
render() {
43+
const versionPageViews = {
44+
metadata: {
45+
id: `page-views-${this.props.version}`,
46+
name: `Version ${this.props.version.toUpperCase()}`,
47+
viz: "main",
48+
color: "blue",
49+
units_data: {
50+
y: "MS",
51+
},
52+
},
53+
data: [
54+
{ x: 0, y: 10 },
55+
{ x: 10, y: 13 },
56+
{ x: 20, y: 11.5 },
57+
{ x: 30, y: 10 },
58+
{ x: 40, y: 8.75 },
59+
{ x: 50, y: 9 },
60+
],
61+
};
62+
return <LineChart data={[versionPageViews]} fullWidth />;
63+
}
6464
}
6565
```
6666

@@ -70,64 +70,65 @@ There is a line graph under each of the tables you created in the last lesson. T
7070
<Step>
7171
In your Nerdlet's `index.js` file, import your new component and update your Nerdlet's `render()` method:
7272

73-
```js
74-
75-
import React from 'react';
76-
import NewsletterSignups from './newsletter-signups';
77-
import PastTests from './past-tests';
78-
import TotalCancellations from './total-cancellations';
79-
import TotalSubscriptions from './total-subscriptions';
80-
import VersionPageViews from './page-views';
81-
import VersionTotals from './totals';
73+
```jsx
74+
import React from "react";
75+
import NewsletterSignups from "./newsletter-signups";
76+
import PastTests from "./past-tests";
77+
import TotalCancellations from "./total-cancellations";
78+
import TotalSubscriptions from "./total-subscriptions";
79+
import VersionPageViews from "./page-views";
80+
import VersionTotals from "./totals";
8281

8382
export default class AbTestNerdletNerdlet extends React.Component {
84-
render() {
85-
return <div>
86-
<NewsletterSignups />
87-
<TotalSubscriptions />
88-
<TotalCancellations />
89-
<VersionTotals version='a' />
90-
<VersionTotals version='b' />
91-
<VersionPageViews version='a' />
92-
<VersionPageViews version='b' />
93-
<PastTests />
94-
</div>
95-
}
83+
render() {
84+
return (
85+
<div>
86+
<NewsletterSignups />
87+
<TotalSubscriptions />
88+
<TotalCancellations />
89+
<VersionTotals version="a" />
90+
<VersionTotals version="b" />
91+
<VersionPageViews version="a" />
92+
<VersionPageViews version="b" />
93+
<PastTests />
94+
</div>
95+
);
96+
}
9697
}
97-
9898
```
9999
</Step>
100100

101101
<Step>
102102
In `index.js`, import `ChartGroup` from `nr1` and group your `VersionPageViews`:
103103

104-
```js
105-
import React from 'react';
106-
import { ChartGroup } from 'nr1';
107-
import NewsletterSignups from './newsletter-signups';
108-
import PastTests from './past-tests';
109-
import TotalCancellations from './total-cancellations';
110-
import TotalSubscriptions from './total-subscriptions';
111-
import VersionPageViews from './page-views';
112-
import VersionTotals from './totals';
104+
```jsx
105+
import React from "react";
106+
import { ChartGroup } from "nr1";
107+
import NewsletterSignups from "./newsletter-signups";
108+
import PastTests from "./past-tests";
109+
import TotalCancellations from "./total-cancellations";
110+
import TotalSubscriptions from "./total-subscriptions";
111+
import VersionPageViews from "./page-views";
112+
import VersionTotals from "./totals";
113113

114114
export default class AbTestNerdletNerdlet extends React.Component {
115-
render() {
116-
return <div>
117-
<NewsletterSignups />
118-
<TotalSubscriptions />
119-
<TotalCancellations />
120-
<VersionTotals version='a' />
121-
<VersionTotals version='b' />
122-
<ChartGroup>
123-
<VersionPageViews version='a' />
124-
<VersionPageViews version='b' />
125-
</ChartGroup>
126-
<PastTests />
127-
</div>
128-
}
115+
render() {
116+
return (
117+
<div>
118+
<NewsletterSignups />
119+
<TotalSubscriptions />
120+
<TotalCancellations />
121+
<VersionTotals version="a" />
122+
<VersionTotals version="b" />
123+
<ChartGroup>
124+
<VersionPageViews version="a" />
125+
<VersionPageViews version="b" />
126+
</ChartGroup>
127+
<PastTests />
128+
</div>
129+
);
130+
}
129131
}
130-
131132
```
132133

133134
Because the tables are conceptually related, as they show contrasting performance metrics over the same timeslice, it makes sense to group them in a `ChartGroup`. This means that the two charts behave synchronously. For example, when you hover over one chart, the other chart shows a hover indicator at the same x coordinate.

0 commit comments

Comments
 (0)