Agregar tablas

Cambie al directorio add-tables/ab-test del repositorio de trabajos del curso:

$
cd nru-programmability-course/add-tables/ab-test

Este directorio contiene el código que esperamos que tenga su aplicación en este punto del curso. Al navegar al directorio correcto al comienzo de cada lección, deja atrás su código personalizado, proteger así de llevar código incorrecto de una lección a la siguiente.

En nerdlets/ab-test-nerdlet, agregue un nuevo archivo Javascript llamado totals.js:

$
touch totals.js

En este nuevo archivo, cree un componente llamado VersionTotals para contener su primer TableChart y algunos datos simulados:

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 es diferente de PieChart y LineChart en tres grandes aspectos. En primer lugar, no hay atributos de metadatos color o viz en su serial. TableChart tiene una visualización estándar, por lo que ignora cosas como color, que no se aplican. En segundo lugar, el serial TableChart tiene columns metadatos atributo. columns determina los nombres de las columnas de la tabla. Finalmente, los datos del serial TableChart no emplean valores de x ni de y. En su lugar, emplean claves que coinciden con la columna de la tabla y valores que determinan lo que va en la fila.

Observe que VersionTotals toma un accesorio version y lo proporciona a los campos id y name de los metadatos del gráfico. Esto le permite emplear este mismo componente para crear una tabla para las versiones A y B y eliminar el código duplicado.

En el archivo index.js de tu Nerdlet, importa tu nuevo componente y actualiza el método render() de tu 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>
    );
  }
}

Navega hasta la raíz de tu Nerdpack en nru-programmability-course/add-tables/ab-test.

Genera un nuevo UUID para tu Nerdpack:

$
nr1 nerdpack:uuid -gf

Debido a que clonaste el repositorio de trabajos del curso que contenía un Nerdpack existente, necesitas generar tu propio identificador único. Este UUID asigna su Nerdpack a su cuenta New Relic.

Entregue su aplicación localmente:

$
nr1 nerdpack:serve

Vea sus cambios en New Relic.

Aquí verá los TableChart componentes que se muestran en su aplicación.

Cuando terminó, deje de servir su aplicación New Relic presionando CTRL+C en la ventana de terminal de su servidor local.