Adicionar uma grade

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 interface, antes de iniciar esta.

Nas lições práticas anteriores, você criou todos os gráficos do seu guia de design. Infelizmente, eles não estão dispostos como estão no design. O SDK do New Relic One oferece diversas soluções para organizar seus componentes. O que você aprenderá nesta lição é o componente Grid.

Para organizar seus gráficos, coloque-os em um Grid. Um Grid é um contêiner que você usa para organizar seu conteúdo em linhas de 12 colunas. Um GridItem é o alicerce de um Grid. Você especifica o columnSpan de um GridItem entre 1 e 12 para determinar quanto da linha o GridItem deve cobrir. Portanto, se você quiser que um gráfico se estenda por toda a largura da visualização, coloque-o em um GridItem com um columnSpan de 12. Se você quiser que doze gráficos caibam em uma única linha, use um columnSpan de 1.

Depois de planejar como organizar suas colunas, você poderá escrever algum código para concretizar seus planos.

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

bash

$cd nru-programmability-course/add-a-grid/ab-test

No arquivo index.js do seu Nerdlet, importe Grid e GridItem. Em seguida, atualize o método render() do seu Nerdlet colocando cada gráfico em um GrildItem. Finalmente, coloque todos os seus itens em um Grid:

import React from 'react';
import { ChartGroup, Grid, GridItem } 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>
            <Grid className="wrapper">
                <GridItem columnSpan={12}><NewsletterSignups /></GridItem>
                <GridItem columnSpan={6}><TotalSubscriptions /></GridItem>
                <GridItem columnSpan={6}><TotalCancellations /></GridItem>
                <GridItem columnSpan={6}><VersionTotals version='a' /></GridItem>
                <GridItem columnSpan={6}><VersionTotals version='b' /></GridItem>
                <ChartGroup>
                    <GridItem columnSpan={6}>
                        <VersionPageViews version='a' />
                    </GridItem>
                    <GridItem columnSpan={6}>
                        <VersionPageViews version='b' />
                    </GridItem>
                </ChartGroup>
                <GridItem columnSpan={12}><PastTests /></GridItem>
            </Grid>
        </div>
    }
}

O columnSpan de cada gráfico corresponde ao plano de layout. Cada gráfico que ocupa metade da linha de 12 colunas tem um columnSpan de 6 e cada gráfico que ocupa a linha inteira tem um columnSpan de 12. Observe que cada um dos gráficos no ChartGroup, mas não o ChartGroup em si, está em um GridItem. Um ChartGroup conecta os comportamentos dos gráficos, não suas localizações.

Cada gráfico preenche seu columnSpan porque usa a propriedade fullWidth. fullWidth faz com que o gráfico preencha seu espaço horizontal disponível e GridItem.columnSpan restringe esse espaço a alguma fração da linha. Remova uma propriedade fullWidth e veja como o gráfico reage.

Detalhe técnico

Observe a classe wrapper aplicada ao Grid. Fornecemos discretamente alguns estilos CSS para ajudar a tornar este aplicativo incrível! Este não é um curso CSS , então não cobriremos tudo o que adicionamos, apenas incluiremos os estilos que pretendemos que você use no trecho de código. Saiba que cada componente de interface no SDK do New Relic One fornece uma propriedade className onde você pode fornecer um nome de classe CSS.

Você pode visualizar os estilos em nerdlets/ab-test-nerdlet/styles.scss.

Navegue até a raiz do seu Nerdpack em nru-programmability-course/add-a-grid/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ê seus gráficos estilizados e organizados em uma grade.

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

Em apenas seis etapas, você melhorou significativamente a legibilidade e a usabilidade de seu aplicativo de teste A/B, mas pode tomar outras medidas para melhorar a usabilidade de seus gráficos. Na próxima lição, você adicionará títulos aos seus gráficos para se lembrar de quais dados cada gráfico apresenta.

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 títulos de gráfico.

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

Dica

Detalhe técnico

Curso