Ajouter un groupe de graphiques

Conseil

Cette leçon fait partie d’un cours qui vous apprend à créer une application New Relic à partir de zéro. Si vous ne l’avez pas déjà fait, consultez la présentation.

Chaque leçon du cours s'appuie sur la précédente, alors assurez-vous d'avoir terminé la dernière leçon, Ajouter des tableaux, avant de commencer celle-ci.

Dans les leçons précédentes, vous avez ajouté une variété de graphiques à votre application de test A/B. Ces graphiques présentaient différentes facettes d’informations sur votre test A/B et se comportaient indépendamment les uns des autres. Dans cette leçon, vous allez créer une nouvelle paire de graphiques linéaires et apprendre à synchroniser leurs comportements.

Il y a un graphique linéaire sous chacun des tableaux que vous avez créés dans la dernière leçon. Ces graphiques linéaires montrent les temps de réponse spécifiques à la version pour requests d'inscription à la newsletter. Maintenant, vous allez créer deux autres graphiques linéaires, mais cette fois, vous les regrouperez avec un ChartGroup et spécifierez que leurs valeurs sont mesurées en millisecondes.

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

bash

$cd nru-programmability-course/add-a-chart-group/ab-test

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

bash

$touch page-views.js

Dans ce nouveau fichier, créez un composant appelé VersionPageViews pour contenir un LineChart, qui indique le nombre de fois qu'une page est consultée :

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

export default class VersionPageViews extends React.Component {
    render() {
        const versionPageViews = {
            metadata: {
                id: `page-views-${this.props.version}`,
                name: `Version ${this.props.version.toUpperCase()}`,
                viz: 'main',
                color: 'blue',
                units_data: {
                    y: 'MS'
                }
            },
            data: [
                { x: 0, y: 10 },
                { x: 10, y: 13 },
                { x: 20, y: 11.5 },
                { x: 30, y: 10 },
                { x: 40, y: 8.75 },
                { x: 50, y: 9 },
            ],
        }
        return <LineChart data={[versionPageViews]} fullWidth />
    }
}

nerdlets/ab-test-nerdlet/page-views.js

Notez le nouvel attribut dans les champs metadata de la série : units_data. Cet attribut décrit le type d'unité pour un axe de données spécifié. Dans ce cas, vous définissez le type d'unité pour l'axe y sur 'MS', qui signifie millisecondes. D'autres options pour les types d'unités incluent : 'PERCENTAGE', 'TIMESTAMP' et 'BYTES_PER_SECOND'.

Dans le fichier index.js de votre Nerdlet, importez votre nouveau composant et mettez à jour la méthode render() de votre Nerdlet :

import React from 'react';
import NewsletterSignups from './newsletter-signups';
import PastTests from './past-tests';
import TotalCancellations from './total-cancellations';
import TotalSubscriptions from './total-subscriptions';
import VersionPageViews from './page-views';
import VersionTotals from './totals';

export default class AbTestNerdletNerdlet extends React.Component {
    render() {
        return <div>
            <NewsletterSignups />
            <TotalSubscriptions />
            <TotalCancellations />
            <VersionTotals version='a' />
            <VersionTotals version='b' />
            <VersionPageViews version='a' />
            <VersionPageViews version='b' />
            <PastTests />
        </div>
    }
}

Dans index.js, importez ChartGroup depuis nr1 et regroupez vos VersionPageViews:

import React from 'react';
import { ChartGroup } from 'nr1';
import NewsletterSignups from './newsletter-signups';
import PastTests from './past-tests';
import TotalCancellations from './total-cancellations';
import TotalSubscriptions from './total-subscriptions';
import VersionPageViews from './page-views';
import VersionTotals from './totals';

export default class AbTestNerdletNerdlet extends React.Component {
    render() {
        return <div>
            <NewsletterSignups />
            <TotalSubscriptions />
            <TotalCancellations />
            <VersionTotals version='a' />
            <VersionTotals version='b' />
            <ChartGroup>
                <VersionPageViews version='a' />
                <VersionPageViews version='b' />
            </ChartGroup>
            <PastTests />
        </div>
    }
}

Étant donné que les tableaux sont conceptuellement liés, puisqu'ils présentent des mesures de performances contrastées sur la même tranche de temps, il est logique de les regrouper dans un ChartGroup. Cela signifie que les deux graphiques se comportent de manière synchrone. Par exemple, lorsque vous survolez un graphique, l’autre graphique affiche un indicateur de survol à la même coordonnée x.

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

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

bash

$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 :

bash

$nr1 nerdpack:serve

Affichez vos modifications dans New Relic.

Ici, vous voyez les composants LineChart synchronisés 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.

Conseil

Chacun des types de composants de graphique que vous avez utilisés dans cette leçon avait une configuration de série différente. La plupart des composants de graphique partagent le même attribut metadata , comme LineChart et PieChart, mais diffèrent dans leurs formats data .

Il est utile de connaître les différents formats data lorsque vous créez vos propres graphiques.

Votre application est désormais remplie de graphiques, mais elle n'a pas une belle apparence. Les graphiques sont empilés les uns sur les autres de manière inutile. Dans la leçon suivante, vous découvrirez les composants de l’interface utilisateur du SDK et comment vous pouvez les utiliser pour organiser vos graphiques.

Cours

Cette leçon fait partie d’un cours qui vous apprend à créer une application New Relic à partir de zéro. Lorsque vous êtes prêt, passez à la leçon suivante : ajoutez des composants d’interface utilisateur à votre application.

Cette traduction automatique est fournie pour votre commodité.

Conseil

Conseil

Cours