Ajouter des en-têtes de graphique

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 une grille, avant de commencer celle-ci.

L'organisation des graphiques est une façon de clarifier les informations que vous essayez de transmettre à votre utilisateur. Les titres en sont un autre. Étant donné que vous avez plusieurs graphiques sur la même page, utilisez des titres pour décrire les informations qu’ils présentent.

Le guide de conception détaille les données affichées par chaque graphique. Utilisez ces détails pour créer des titres utiles pour vos graphiques.

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

bash

$cd nru-programmability-course/add-chart-headings/ab-test

Dans newsletter-signups.js, page-views.js, past-tests.js, total-cancellations.js, total-subscriptions.js et totals.js, importez HeadingText et ajoutez un titre descriptif au-dessus du graphique dans chacun de vos composants personnalisés :

import React from 'react';
import { HeadingText, 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 <div>
            <HeadingText className="chartHeader">
                Newsletter subscriptions per version
            </HeadingText>
            <LineChart data={[versionASignups, versionBSignups]} fullWidth />
        </div>
    }
}

import React from 'react';
import { HeadingText, 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 <div>
            <HeadingText className="chartHeader">
                Version {this.props.version.toUpperCase()} - Page views
            </HeadingText>
            <LineChart data={[versionPageViews]} fullWidth />
        </div>
    }
}

import React from 'react';
import { HeadingText, TableChart } from 'nr1';

export default class PastTests extends React.Component {
    render() {
        const historicalData = {
            metadata: {
                id: 'past-tests',
                name: 'Past tests',
                columns: ['endDate', 'versionADescription', 'versionBDescription', 'winner'],
            },
            data: [
                {
                    "endDate": "12-15-2020",
                    "versionADescription": "The homepage's CTA button was green.",
                    "versionBDescription": "The homepage's CTA button was blue.",
                    "winner": "A"
                },
                {
                    "endDate": "09-06-2019",
                    "versionADescription": "The 'Deals' page showed sales in a carousel.",
                    "versionBDescription": "The 'Deals' page showed sales in a grid.",
                    "winner": "B"
                }
            ],
        }

        return <div>
            <HeadingText className="chartHeader">
                Past tests
            </HeadingText>
            <TableChart data={[historicalData]} fullWidth />
        </div>
    }
}

import React from 'react';
import { HeadingText, 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 <div>
            <HeadingText className="chartHeader">
                Total cancellations per version
            </HeadingText>
            <PieChart data={[cancellationsA, cancellationsB]} fullWidth />
        </div>
    }
}

import React from 'react';
import { HeadingText, 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 <div>
            <HeadingText className="chartHeader">
                Total subscriptions per version
            </HeadingText>
            <PieChart data={[subscriptionsA, subscriptionsB]} fullWidth />
        </div>
    }
}

import React from 'react';
import { HeadingText, TableChart } from 'nr1';

export default class VersionTotals extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const versionATotals = {
            metadata: {
                id: `totals-${this.props.version}`,
                name: `Version ${this.props.version}`,
                columns: ['name', 'count'],
            },
            data: [
                {
                    name: 'Subscriptions',
                    count: 0
                },
                {
                    name: 'Page views',
                    count: 0
                },
            ],
        }
        return <div>
            <HeadingText className="chartHeader">
                Version {this.props.version.toUpperCase()} - Page views vs. subscriptions
            </HeadingText>
            <TableChart data={[versionATotals]} fullWidth />
        </div>
    }
}

Notez la nouvelle tag <div> dans chaque render(), qui vous permet de renvoyer plusieurs éléments à la fois. N'oubliez pas non plus que nous vous avons fourni une feuille de style CSS qui stylise la classe chartHeader . Vous pouvez regarder nerdlets/ab-test-nerdlet/styles.scss pour en voir plus.

Vous n'avez pas besoin de modifier la méthode render() de votre Nerdlet dans index.js car vos composants encapsulent le nouveau code.

Accédez à la racine de votre Nerdpack à nru-programmability-course/add-a-grid/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 que vos graphiques ont des titres descriptifs.

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.

Bien joué! Vous avez créé tous les graphiques qui sont présentés dans votre guide de conception. Vous les avez également organisés dans une grille soignée et ajouté des titres pour que les graphiques soient intelligibles. Bien que les en-têtes de graphique vous aident à comprendre ce que chaque graphique montre, il serait intéressant d'ajouter des descriptions pour vous aider à vous souvenir de ce que représente chaque version de votre test A/B. Dans la prochaine leçon, vous ajouterez une description pour chaque version de conception.

Cours

Cette leçon fait partie d’un cours qui vous apprend à créer une application New Relic à partir de zéro. Passez à la leçon suivante : ajoutez des descriptions de versions.

Cette traduction automatique est fournie pour votre commodité.

Conseil

Cours