Agrega tu primer gráfico

Cambie al directorio add-your-first-chart/ab-test del repositorio de trabajos del curso:

$
cd nru-programmability-course/add-your-first-chart/ab-test

Este directorio contiene el código que su aplicación debe tener 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 newsletter-signups.js:

$
touch newsletter-signups.js

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

import React from 'react';
import { 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 <LineChart data={[versionASignups, versionBSignups]} fullWidth />;
  }
}

Aquí, creó dos seriales de datos arbitrarias que representan las versiones A y B de su prueba. En este momento, estás empleando puntos de datos creados manualmente. En el futuro, los reemplazará con consultas de datos de New Relic.

Observe que especificó un color para cada serial del gráfico. El atributo de metadatos color toma cualquier formato de color aceptable para CSS. Configurar viz: 'main' significa que desea representar el serial LineChart como una línea, el estilo de visualización predeterminado del componente. Para el accesorio data en el componente LineChart , pasaste los dos seriales en una matriz para que ambas se representen juntas. Finalmente, empleó el accesorio fullWidth del gráfico para ampliar el ancho del gráfico y llenar la vista.

En el archivo index.js de tu Nerdlet, importa tu nuevo componente y reemplaza el encabezado predeterminado en el método render() de tu Nerdlet con tu nuevo componente:

import React from 'react';
import NewsletterSignups from './newsletter-signups';

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

Navega hasta la raíz de tu Nerdpack en nru-programmability-course/add-your-first-chart/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á el LineChart mostrado 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.