Ajouter une grille

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 interface utilisateur, avant de commencer celle-ci.

Dans les leçons pratiques précédentes, vous avez créé tous les graphiques de votre guide de conception. Malheureusement, ils ne sont pas disposés comme ils le sont dans la conception. Le SDK New Relic fournit plusieurs solutions pour organiser vos composants. Celui que vous découvrirez dans cette leçon est le composant Grid.

Pour organiser vos graphiques, placez-les dans un Grid. Un Grid est un conteneur que vous utilisez pour organiser votre contenu en lignes de 12 colonnes. Un GridItem est l’élément de base d’un Grid. Vous spécifiez le columnSpan d'un GridItem entre 1 et 12 pour déterminer quelle partie de la ligne le GridItem doit couvrir. Ainsi, si vous souhaitez qu'un graphique s'étende sur toute la largeur de la vue, vous devez placer le graphique dans un GridItem avec un columnSpan de 12. Si vous souhaitez que douze graphiques tiennent sur une seule ligne, utilisez un columnSpan de 1.

Une fois que vous avez planifié la manière dont vous allez organiser vos colonnes, vous pouvez écrire du code pour réaliser vos plans.

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

bash

$cd nru-programmability-course/add-a-grid/ab-test

Dans le fichier index.js de votre Nerdlet, importez Grid et GridItem. Ensuite, mettez à jour la méthode render() de votre Nerdlet en plaçant chaque graphique dans un GrildItem. Enfin, placez tous vos éléments dans un Grid:

import React from 'react';
import { ChartGroup, Grid, GridItem } 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>
            <Grid className="wrapper">
                <GridItem columnSpan={12}><NewsletterSignups /></GridItem>
                <GridItem columnSpan={6}><TotalSubscriptions /></GridItem>
                <GridItem columnSpan={6}><TotalCancellations /></GridItem>
                <GridItem columnSpan={6}><VersionTotals version='a' /></GridItem>
                <GridItem columnSpan={6}><VersionTotals version='b' /></GridItem>
                <ChartGroup>
                    <GridItem columnSpan={6}>
                        <VersionPageViews version='a' />
                    </GridItem>
                    <GridItem columnSpan={6}>
                        <VersionPageViews version='b' />
                    </GridItem>
                </ChartGroup>
                <GridItem columnSpan={12}><PastTests /></GridItem>
            </Grid>
        </div>
    }
}

Le columnSpan de chaque graphique correspond au plan de mise en page. Chaque graphique qui occupe la moitié de la ligne de 12 colonnes a un columnSpan de 6 et chaque graphique qui occupe la ligne entière a un columnSpan de 12. Notez que chacun des graphiques dans le ChartGroup, mais pas le ChartGroup lui-même, est dans un GridItem. Un ChartGroup relie les comportements des graphiques, pas leurs emplacements.

Chaque graphique remplit son columnSpan car ils utilisent la propriété fullWidth . fullWidth fait en sorte que le graphique remplisse son espace horizontal disponible et GridItem.columnSpan restreint cet espace à une fraction de la ligne. Supprimez un accessoire fullWidth et voyez comment le graphique réagit.

Détails techniques

Notez la classe wrapper appliquée à Grid. Nous avons discrètement fourni quelques styles CSS pour aider à rendre cette application superbe ! Ce n'est pas un cours CSS , nous ne couvrirons donc pas tout ce que nous avons ajouté, nous inclurons simplement les styles que nous souhaitons que vous utilisiez dans l'extrait de code. Sachez simplement que chaque composant d’interface utilisateur du SDK New Relic fournit un accessoire className dans lequel vous pouvez fournir un nom de classe CSS.

Vous pouvez visualiser les styles dans nerdlets/ab-test-nerdlet/styles.scss.

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 vos graphiques stylisés et disposés dans une grille.

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.

En seulement six étapes, vous avez considérablement amélioré la lisibilité et la convivialité de votre application de test A/B, mais vous pouvez prendre des mesures supplémentaires pour améliorer la convivialité de vos graphiques. Dans la leçon suivante, vous ajouterez des en-têtes à vos graphiques pour vous rappeler quelles données chaque graphique présente.

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 en-têtes de graphique.

Cette traduction automatique est fournie pour votre commodité.

Conseil

Détails techniques

Cours