Ajoutez votre premier graphique

Accédez au répertoire add-your-first-chart/ab-test du référentiel de cours:

$
cd nru-programmability-course/add-your-first-chart/ab-test

Ce répertoire contient le code que votre application devrait avoir à ce stade du cours. En naviguant vers le bon répertoire au début de chaque leçon, vous laissez votre code personnalisé derrière vous, vous protégeant ainsi du transport de code incorrect d'une leçon à l'autre.

Dans nerdlets/ab-test-nerdlet, ajoutez un nouveau fichier Javascript nommé newsletter-signups.js:

$
touch newsletter-signups.js

Dans ce nouveau fichier, créez un composant appelé NewsletterSignups pour contenir votre premier LineChart et quelques données fictives :

import React from 'react';
import { LineChart } from 'nr1';

export default class NewsletterSignups extends React.Component {
  render() {
    const versionASignups = {
      metadata: {
        id: 'version-a-newsletter-signups',
        name: 'Version A',
        viz: 'main',
        color: 'blue',
      },
      data: [
        { x: 0, y: 0 },
        { x: 10, y: 10 },
        { x: 20, y: 15 },
        { x: 30, y: 5 },
        { x: 40, y: 30 },
        { x: 50, y: 25 },
      ],
    };
    const versionBSignups = {
      metadata: {
        id: 'version-b-newsletter-signups',
        name: 'Version B',
        viz: 'main',
        color: 'green',
      },
      data: [
        { x: 0, y: 20 },
        { x: 10, y: 5 },
        { x: 20, y: 25 },
        { x: 30, y: 45 },
        { x: 40, y: 50 },
        { x: 50, y: 35 },
      ],
    };
    return <LineChart data={[versionASignups, versionBSignups]} fullWidth />;
  }
}

Ici, vous avez créé deux séries de données arbitraires qui représentent les versions A et B de votre test. À l’heure actuelle, vous utilisez des points de données créés manuellement. À l'avenir, vous les remplacerez par des requêtes de données de New Relic.

Notez que vous avez spécifié une couleur pour chaque série du graphique. L'attribut de métadonnées color prend n'importe quel format de couleur acceptable par CSS. Le paramètre viz: 'main' signifie que vous souhaitez restituer la série LineChart sous forme de ligne, le style d'affichage par défaut du composant. Pour l'accessoire data dans le composant LineChart , vous avez passé les deux séries dans un éventail afin que les deux soient représentées ensemble. Enfin, vous avez utilisé l'accessoire fullWidth du graphique pour étirer la largeur du graphique afin de remplir la vue.

Dans le fichier index.js de votre Nerdlet, importez votre nouveau composant et remplacez l'en-tête par défaut de la méthode render() de votre Nerdlet par votre nouveau composant :

import React from 'react';
import NewsletterSignups from './newsletter-signups';

export default class AbTestNerdletNerdlet extends React.Component {
  render() {
    return (
      <div>
        <NewsletterSignups />
      </div>
    );
  }
}

Accédez à la racine de votre Nerdpack à nru-programmability-course/add-your-first-chart/ab-test.

Générez un nouvel UUID pour votre Nerdpack :

$
nr1 nerdpack:uuid -gf

Étant donné que vous avez cloné le référentiel de cours qui contenait un Nerdpack existant, vous devez générer votre propre identifiant unique. Cet UUID mappe votre Nerdpack à votre compte New Relic.

Présentez votre demande localement :

$
nr1 nerdpack:serve

Affichez vos modifications dans New Relic.

Ici, vous voyez le LineChart affiché dans votre application.

Une fois que vous avez terminé, arrêtez de diffuser votre application New Relic en appuyant sur CTRL+C dans la fenêtre de terminal de votre serveur local.