Adicionar um grupo de gráficos

Dica

Esta lição faz parte de um curso que ensina como construir um aplicativo New Relic do zero. Se ainda não o fez, confira a Visão Geral.

Cada lição do curso se baseia na anterior, portanto, certifique-se de ter concluído a última lição, Adicionar tabelas, antes de iniciar esta.

Nas lições anteriores, você adicionou uma variedade de gráficos ao seu aplicativo de teste A/B. Esses gráficos apresentavam diferentes facetas de informações sobre seu teste A/B e se comportavam de forma independente umas das outras. Nesta lição, você criará um novo par de gráficos de linhas e aprenderá como sincronizar seus comportamentos.

Há um gráfico de linhas abaixo de cada uma das tabelas que você criou na última lição. Esses gráficos de linha mostram o tempo de resposta específico da versão para solicitações de inscrição em boletins informativos. Agora, você criará mais dois gráficos de linhas, mas, desta vez, agrupá-los-á com um ChartGroup e especificará que seus valores serão medidos em milissegundos.

Mude para o diretório add-a-chart-group/ab-test do repositório de cursos:

bash

$cd nru-programmability-course/add-a-chart-group/ab-test

Em nerdlets/ab-test-nerdlet, adicione um novo arquivo Javascript chamado page-views.js:

bash

$touch page-views.js

Neste novo arquivo, crie um componente chamado VersionPageViews para armazenar um LineChart, que mostra o número de vezes que uma página é visualizada:

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

nerdlets/ab-test-nerdlet/page-views.js

Observe o novo atributo nos campos metadata da série: units_data. Este atributo descreve o tipo de unidade para um eixo de dados especificado. Nesse caso, você define o tipo de unidade do eixo y como 'MS', que significa milissegundos. Outras opções para tipos de unidade incluem: 'PERCENTAGE', 'TIMESTAMP' e 'BYTES_PER_SECOND'.

No arquivo index.js do seu Nerdlet, importe seu novo componente e atualize o método render() do seu Nerdlet:

import React from 'react';
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>
            <NewsletterSignups />
            <TotalSubscriptions />
            <TotalCancellations />
            <VersionTotals version='a' />
            <VersionTotals version='b' />
            <VersionPageViews version='a' />
            <VersionPageViews version='b' />
            <PastTests />
        </div>
    }
}

Em index.js, importe ChartGroup de nr1 e agrupe seu VersionPageViews:

import React from 'react';
import { ChartGroup } 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>
            <NewsletterSignups />
            <TotalSubscriptions />
            <TotalCancellations />
            <VersionTotals version='a' />
            <VersionTotals version='b' />
            <ChartGroup>
                <VersionPageViews version='a' />
                <VersionPageViews version='b' />
            </ChartGroup>
            <PastTests />
        </div>
    }
}

Como as tabelas são conceitualmente relacionadas, pois apresentam métricas de desempenho contrastantes no mesmo intervalo de tempo, faz sentido agrupá-las em um ChartGroup. Isso significa que os dois gráficos se comportam de forma síncrona. Por exemplo, quando você passa o mouse sobre um gráfico, o outro gráfico mostra um indicador de foco na mesma coordenada x.

Navegue até a raiz do seu Nerdpack em nru-programmability-course/add-a-chart-group/ab-test.

Gere um novo UUID para o seu Nerdpack:

bash

$nr1 nerdpack:uuid -gf

Como você clonou o repositório de cursos que continha um Nerdpack existente, você precisa gerar seu próprio identificador exclusivo. Este UUID mapeia seu Nerdpack para sua conta New Relic.

Sirva seu aplicativo localmente:

bash

$nr1 nerdpack:serve

Veja suas alterações no New Relic.

Aqui você vê os LineChart componentes sincronizados em seu aplicativo.

Quando terminar, pare de servir seu aplicativo New Relic pressionando CTRL+C na janela do terminal do seu servidor local.

Dica

Cada um dos tipos de componentes gráficos que você usou nesta lição teve diferentes séries de configuração. A maioria dos componentes do gráfico compartilham o mesmo atributo metadata , como LineChart e PieChart, mas diferem em seus formatos data.

É útil conhecer os diferentes formatos de data ao criar seus próprios gráficos.

Agora seu aplicativo está cheio de gráficos, mas não parece ótimo. Os gráficos estão empilhados uns sobre os outros de uma forma inútil. Na próxima lição, você aprenderá sobre os componentes da interface do usuário do SDK e como usá-los para organizar seus gráficos.

Curso

Esta lição faz parte de um curso que ensina como construir um aplicativo New Relic do zero. Quando estiver pronto, passe para a próxima lição: Adicione componentes de interface do usuário ao seu aplicativo.

Esta tradução de máquina é fornecida para sua comodidade.

Dica

Dica

Curso