Ajouter des graphiques à secteurs

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 votre premier graphique, avant de commencer celle-ci.

Vous avez commencé à créer votre application de test A/B. Jusqu'à présent, il s'agit d'un graphique à ligne unique, qui représente le nombre d'abonnements que votre newsletter reçoit de chaque version de votre site Web.

Dans la conception, il y a deux graphiques à secteurs sous le graphique linéaire que vous avez déjà créé. L'un représente la distribution des utilisateurs qui reçoivent la version A et la version B. L'autre représente la distribution des requests réussies des utilisateurs qui ont obtenu la version A et la version B.

Accédez au répertoire add-pie-charts/ab-test du référentiel de cours:

bash

$cd nru-programmability-course/add-pie-charts/ab-test

Ce répertoire contient le code que nous attendons de votre application à 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 deux nouveaux fichiers Javascript :

total-subscriptions.js

total-cancellations.js

bash

$touch total-subscriptions.js total-cancellations.js

Dans total-subscriptions.js, créez un composant, appelé TotalSubscriptions, qui restitue les données d'abonnement simulées :

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

export default class TotalSubscriptions extends React.Component {
    render() {
        const subscriptionsA = {
            metadata: {
                id: 'subscriptions-A',
                name: 'Version A',
                viz: 'main',
                color: 'blue',
            },
            data: [
                { y: 259 },
            ],
        }
        const subscriptionsB = {
            metadata: {
                id: 'subscriptions-B',
                name: 'Version B',
                viz: 'main',
                color: 'green',
            },
            data: [
                { y: 318 },
            ],
        }
        return <PieChart data={[subscriptionsA, subscriptionsB]} fullWidth />
    }
}

nerdlets/ab-test-nerdlet/total-subscriptions.js

Notez que la série data est formatée différemment pour PieChart que pour LineChart. Étant donné que PieChart utilise des données unidimensionnelles, sa série ne prend que des valeurs y.

Dans total-cancellations.js, créez un composant, appelé TotalCancellations, qui restitue les données d’annulation simulées :

fileName=nerdlets/ab-test-nerdlet/total-subscriptions.js

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

export default class TotalCancellations extends React.Component {
    render() {
        const cancellationsA = {
            metadata: {
                id: 'cancellations-A',
                name: 'Version A',
                viz: 'main',
                color: 'blue',
            },
            data: [
                { y: 118 },
            ],
        }
        const cancellationsB = {
            metadata: {
                id: 'cancellations-B',
                name: 'Version B',
                viz: 'main',
                color: 'green',
            },
            data: [
                { y: 400 },
            ],
        }
        return <PieChart data={[cancellationsA, cancellationsB]} fullWidth />
    }
}

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

fileName=nerdlets/ab-test-nerdlet/index.js lineHighlight=3-4,10-11

import React from 'react';
import NewsletterSignups from './newsletter-signups';
import TotalCancellations from './total-cancellations';
import TotalSubscriptions from './total-subscriptions';

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

Accédez à la racine de votre Nerdpack à nru-programmability-course/add-pie-charts/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 PieChart affiché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.

Votre candidature commence à prendre forme. Vous avez créé un graphique linéaire et deux graphiques à secteurs. Pour l'instant, ces graphiques utilisent des données simulées, mais vous leur fournirez des données réelles dans une leçon ultérieure. Avant de vous concentrer sur les données de vos graphiques, vous apprendrez à ajouter un tableau à votre application afin de pouvoir visualiser les données d'une nouvelle manière.

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 : Ajouter des tableaux.

Cette traduction automatique est fournie pour votre commodité.

Conseil

Cours