원형 차트 추가

팁

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

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

A/B 테스트 애플리케이션 구축을 시작했습니다. 지금까지는 웹 사이트의 각 버전에서 뉴스레터가 받는 구독 수를 나타내는 단일 선 차트로 구성되었습니다.

디자인에는 이미 생성한 꺾은선형 차트 아래에 두 개의 원형 차트가 있습니다. 하나는 버전 A와 버전 B를 받은 사용자의 분포를 나타냅니다. 다른 하나는 버전 A와 버전 B를 받은 사용자의 성공적인 요청 분포를 나타냅니다.

교과 과정 저장소 의 add-pie-charts/ab-test 디렉터리로 변경합니다.

bash

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

이 디렉토리에는 과정의 이 시점에서 귀하의 애플리케이션이 가질 것으로 예상되는 코드가 포함되어 있습니다. 각 레슨을 시작할 때 올바른 디렉토리로 이동하면 사용자 정의 코드를 남겨두어 한 레슨에서 다음 레슨으로 잘못된 코드가 전달되는 것을 방지할 수 있습니다.

nerdlets/ab-test-nerdlet 에 두 개의 새로운 자바스크립트 파일을 추가합니다.

total-subscriptions.js

total-cancellations.js

bash

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

total-subscriptions.js 에서 모의 구독 데이터를 렌더링하는 TotalSubscriptions 라는 구성요소를 만듭니다.

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

data 계열은 PieChart 에 대해 LineChart 에 대한 형식과 다르게 형식이 지정됩니다. PieChart 1차원 데이터를 사용하기 때문에 계열은 y 값만 사용합니다.

total-cancellations.js 에서 모의 취소 데이터를 렌더링하는 TotalCancellations 라는 구성요소를 만듭니다.

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 />
    }
}

Nerdlet의 index.js 파일에서 새 구성요소를 가져오고 Nerdlet의 render() 메서드를 업데이트합니다.

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>
    }
}

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

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

bash

$nr1 nerdpack:uuid -gf

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

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

bash

$nr1 nerdpack:serve

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

여기에서는 애플리케이션에 표시된 PieChart 구성요소를 볼 수 있습니다.

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

귀하의 애플리케이션이 구체화되기 시작했습니다. 꺾은선형 차트와 두 개의 원형 차트를 만들었습니다. 지금은 이러한 차트에서 가상 데이터를 사용하지만 이후 단원에서는 실제 데이터를 제공하게 됩니다. 그러나 차트의 데이터에 초점을 맞추기 전에 새로운 방식으로 데이터를 시각화할 수 있도록 애플리케이션에 테이블을 추가하는 방법을 배우게 됩니다.

코스

이 강의는 처음부터 New Relic 제작 방법을 가르치는 과정의 일부입니다. 준비가 되면 다음 단원인 테이블 추가를 계속 진행하세요.

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

팁

코스