Adicionar gráficos de pizza

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, Adicione seu primeiro gráfico, antes de iniciar esta.

Você começou a construir seu aplicativo de teste A/B. Até o momento, consiste em um gráfico de linha única, que representa o número de assinaturas que sua newsletter recebe de cada versão do seu site.

No design, há dois gráficos de pizza abaixo do gráfico de linhas que você já criou. Um representa a distribuição do usuário que recebeu a versão A e a versão B. O outro representa a distribuição das solicitações bem-sucedidas do usuário que recebeu a versão A e a versão B.

Mude para o diretório add-pie-charts/ab-test do repositório de cursos:

bash

$cd nru-programmability-course/add-pie-charts/ab-test

Este diretório contém o código que esperamos que seu aplicativo tenha neste ponto do curso. Ao navegar para o diretório correto no início de cada lição, você deixa seu código personalizado para trás, protegendo-se assim de carregar código incorreto de uma lição para outra.

Em nerdlets/ab-test-nerdlet, adicione dois novos arquivos Javascript:

total-subscriptions.js

total-cancellations.js

bash

$touch total-subscriptions.js total-cancellations.js

Em total-subscriptions.js, crie um componente chamado TotalSubscriptions, que renderiza dados de assinatura simulados:

import React from 'react';
import { PieChart } from 'nr1';

export default class TotalSubscriptions extends React.Component {
    render() {
        const subscriptionsA = {
            metadata: {
                id: 'subscriptions-A',
                name: 'Version A',
                viz: 'main',
                color: 'blue',
            },
            data: [
                { y: 259 },
            ],
        }
        const subscriptionsB = {
            metadata: {
                id: 'subscriptions-B',
                name: 'Version B',
                viz: 'main',
                color: 'green',
            },
            data: [
                { y: 318 },
            ],
        }
        return <PieChart data={[subscriptionsA, subscriptionsB]} fullWidth />
    }
}

nerdlets/ab-test-nerdlet/total-subscriptions.js

Observe que a série data está formatada de maneira diferente para PieChart e para LineChart. Como PieChart usa dados unidimensionais, sua série assume apenas valores de y.

Em total-cancellations.js, crie um componente chamado TotalCancellations, que renderiza dados simulados de cancelamento:

fileName=nerdlets/ab-test-nerdlet/total-subscriptions.js

import React from 'react';
import { PieChart } from 'nr1';

export default class TotalCancellations extends React.Component {
    render() {
        const cancellationsA = {
            metadata: {
                id: 'cancellations-A',
                name: 'Version A',
                viz: 'main',
                color: 'blue',
            },
            data: [
                { y: 118 },
            ],
        }
        const cancellationsB = {
            metadata: {
                id: 'cancellations-B',
                name: 'Version B',
                viz: 'main',
                color: 'green',
            },
            data: [
                { y: 400 },
            ],
        }
        return <PieChart data={[cancellationsA, cancellationsB]} fullWidth />
    }
}

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

fileName=nerdlets/ab-test-nerdlet/index.js lineHighlight=3-4,10-11

import React from 'react';
import NewsletterSignups from './newsletter-signups';
import TotalCancellations from './total-cancellations';
import TotalSubscriptions from './total-subscriptions';

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

Navegue até a raiz do seu Nerdpack em nru-programmability-course/add-pie-charts/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 PieChart componentes exibidos em seu aplicativo.

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

Seu aplicativo está começando a tomar forma. Você criou um gráfico de linhas e dois gráficos de pizza. Por enquanto, esses gráficos usam dados simulados, mas você fornecerá dados reais em uma lição posterior. Antes de se concentrar nos dados dos seus gráficos, no entanto, você aprenderá como adicionar uma tabela ao seu aplicativo para poder visualizar os dados de uma nova maneira.

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: Adicionar tabelas.

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

Dica

Curso