차트 제목 추가

팁

이 강의는 처음부터 New Relic 제작 방법을 가르치는 과정의 일부입니다. 아직 확인하지 않았다면 개요를 확인하세요.

과정의 각 단원은 마지막 단원을 기반으로 하므로 이 단원을 시작하기 전에 마지막 단원인 그리드 추가를 완료했는지 확인하세요.

차트 구성은 사용자에게 전달하려는 정보를 명확하게 하는 한 가지 방법입니다. 제목은 또 다른 것입니다. 같은 페이지에 여러 차트가 있으므로 제목을 사용하여 표시되는 정보를 설명하세요.

디자인 가이드에서는 각 차트에 어떤 데이터가 표시되는지 자세히 설명합니다. 이러한 세부 정보를 사용하여 차트에 유용한 제목을 만드세요.

코스워크 저장소 의 add-chart-headings/ab-test 디렉토리로 변경합니다.

bash

$cd nru-programmability-course/add-chart-headings/ab-test

newsletter-signups.js, page-views.js, past-tests.js, total-cancellations.js, total-subscriptions.js 및 totals.js 에서 HeadingText 가져오고 각 맞춤 구성요소의 차트 위에 기술 제목을 추가합니다.

import React from 'react';
import { HeadingText, 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 <div>
            <HeadingText className="chartHeader">
                Newsletter subscriptions per version
            </HeadingText>
            <LineChart data={[versionASignups, versionBSignups]} fullWidth />
        </div>
    }
}

import React from 'react';
import { HeadingText, 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 <div>
            <HeadingText className="chartHeader">
                Version {this.props.version.toUpperCase()} - Page views
            </HeadingText>
            <LineChart data={[versionPageViews]} fullWidth />
        </div>
    }
}

import React from 'react';
import { HeadingText, TableChart } from 'nr1';

export default class PastTests extends React.Component {
    render() {
        const historicalData = {
            metadata: {
                id: 'past-tests',
                name: 'Past tests',
                columns: ['endDate', 'versionADescription', 'versionBDescription', 'winner'],
            },
            data: [
                {
                    "endDate": "12-15-2020",
                    "versionADescription": "The homepage's CTA button was green.",
                    "versionBDescription": "The homepage's CTA button was blue.",
                    "winner": "A"
                },
                {
                    "endDate": "09-06-2019",
                    "versionADescription": "The 'Deals' page showed sales in a carousel.",
                    "versionBDescription": "The 'Deals' page showed sales in a grid.",
                    "winner": "B"
                }
            ],
        }

        return <div>
            <HeadingText className="chartHeader">
                Past tests
            </HeadingText>
            <TableChart data={[historicalData]} fullWidth />
        </div>
    }
}

import React from 'react';
import { HeadingText, 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 <div>
            <HeadingText className="chartHeader">
                Total cancellations per version
            </HeadingText>
            <PieChart data={[cancellationsA, cancellationsB]} fullWidth />
        </div>
    }
}

import React from 'react';
import { HeadingText, 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 <div>
            <HeadingText className="chartHeader">
                Total subscriptions per version
            </HeadingText>
            <PieChart data={[subscriptionsA, subscriptionsB]} fullWidth />
        </div>
    }
}

import React from 'react';
import { HeadingText, 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 <div>
            <HeadingText className="chartHeader">
                Version {this.props.version.toUpperCase()} - Page views vs. subscriptions
            </HeadingText>
            <TableChart data={[versionATotals]} fullWidth />
        </div>
    }
}

여러 요소를 한 번에 반환할 수 있는 각 render() 의 새로운 <div> 태그를 확인하세요. 또한 chartHeader 클래스의 스타일을 지정하는 CSS 스타일시트를 제공했다는 점을 기억하세요. 자세한 내용은 nerdlets/ab-test-nerdlet/styles.scss 참조하세요.

구성요소가 새 코드를 캡슐화하므로 index.js 에서 Nerdlet의 render() 메서드를 수정할 필요가 없습니다.

nru-programmability-course/add-a-grid/ab-test 에서 Nerdpack의 루트로 이동합니다.

Nerdpack에 대한 새 UUID를 생성하십시오.

bash

$nr1 nerdpack:uuid -gf

기존 Nerdpack이 포함된 교과 과정 저장소를 복제했으므로 고유한 식별자를 생성해야 합니다. 이 UUID는 Nerdpack을 New Relic 계정에 매핑합니다.

애플리케이션을 로컬로 제공합니다.

bash

$nr1 nerdpack:serve

New Relic 에서 변경사항을 확인하세요.

여기에서는 차트에 기술 제목이 있는 것을 볼 수 있습니다.

작업이 끝나면 로컬 서버의 터미널 창에서 CTRL+C 눌러 New Relic 피규어 제공을 중지하세요.

잘하셨어요! 디자인 가이드에 배치된 모든 차트를 만들었습니다. 또한 차트를 깔끔한 그리드로 구성하고 제목을 추가하여 차트를 쉽게 이해할 수 있도록 했습니다. 차트 제목은 각 차트가 표시하는 내용을 이해하는 데 도움이 되지만 A/B 테스트의 각 버전이 무엇을 나타내는지 기억하는 데 도움이 되는 설명을 추가하는 것이 좋습니다. 다음 단원에서는 각 디자인 버전에 대한 설명을 추가하게 됩니다.

코스

이 강의는 처음부터 New Relic 제작 방법을 가르치는 과정의 일부입니다. 다음 단원인 버전 설명 추가로 계속 진행하세요.

사용자의 편의를 위해 제공되는 기계 번역입니다.

팁

코스