Ajouter des tableaux

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

$
cd nru-programmability-course/add-tables/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 un nouveau fichier Javascript nommé totals.js:

$
touch totals.js

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

import React from 'react';
import { 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 <TableChart data={[versionATotals]} fullWidth />;
  }
}

TableChart est différent de PieChart et LineChart de trois manières principales. Tout d'abord, il n'y a pas d'attribut color ou viz métadonnées dans sa série. TableChart a une visualisation standard, il ignore donc des choses comme color, qui ne s'appliquent pas. Deuxièmement, les séries TableChart ont l'attribut columns métadonnées. columns détermine les noms des colonnes de la table. Enfin, les données de la série TableChart n’utilisent ni les valeurs x ni les valeurs y. Au lieu de cela, ils utilisent des clés qui correspondent à la colonne du tableau et des valeurs qui déterminent ce qui entre dans la ligne.

Notez que VersionTotals prend un accessoire version et le fournit aux champs id et name des métadonnées du graphique. Cela vous permet d'utiliser ce même composant pour créer une table pour les versions A et B et éliminer le code en double.

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 TotalCancellations from './total-cancellations';
import TotalSubscriptions from './total-subscriptions';
import VersionTotals from './totals';

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

Accédez à la racine de votre Nerdpack à nru-programmability-course/add-tables/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 les composants TableChart 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.