차트 그룹 추가

팁

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

과정의 각 단원은 마지막 단원을 바탕으로 구성되므로 이 단원을 시작하기 전에 마지막 단원인 테이블 추가를 완료했는지 확인하세요.

이전 레슨에서는 A/B 테스트 애플리케이션에 다양한 차트를 추가했습니다. 이러한 차트는 A/B 테스트에 대한 정보의 다양한 측면을 제시하며 서로 독립적으로 작동했습니다. 이 단원에서는 새로운 꺾은선형 차트 쌍을 만들고 해당 동작을 동기화하는 방법을 알아봅니다.

지난 단원에서 생성한 각 테이블 아래에는 선 그래프가 있습니다. 이 선 그래프는 뉴스레터 가입 요청에 대한 버전별 응답 시간을 보여줍니다. 이제 두 개의 선 차트를 더 작성하지만 이번에는 이를 ChartGroup 로 그룹화하고 해당 값이 밀리초 단위로 측정되도록 지정합니다.

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

bash

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

nerdlets/ab-test-nerdlet 에서 page-views.js 이라는 새 자바스크립트 파일을 추가합니다.

bash

$touch page-views.js

이 새 파일에서 페이지 조회 횟수를 표시하는 LineChart 을 보유하는 VersionPageViews 라는 구성요소를 만듭니다.

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

계열의 metadata 필드에 있는 새 속성인 units_data 을 확인하세요. 이 속성은 지정된 데이터 축의 단위 유형을 설명합니다. 이 경우 y축의 단위 유형을 밀리초를 의미하는 'MS' 로 설정합니다. 단위 유형에 대한 다른 옵션은 다음과 같습니다: 'PERCENTAGE', 'TIMESTAMP' 및 'BYTES_PER_SECOND'.

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

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

index.js 에서 nr1 에서 ChartGroup 가져오고 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>
    }
}

테이블은 개념적으로 관련되어 있으므로 동일한 타임슬라이스에 대해 대조적인 성능 지표를 표시하므로 테이블을 ChartGroup 으로 그룹화하는 것이 좋습니다. 이는 두 차트가 동기적으로 동작한다는 것을 의미합니다. 예를 들어 한 차트 위로 마우스를 가져가면 다른 차트의 동일한 x 좌표에 마우스 오버 표시기가 표시됩니다.

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

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

bash

$nr1 nerdpack:uuid -gf

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

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

bash

$nr1 nerdpack:serve

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

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

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

팁

이 단원에서 사용한 각 차트 구성 요소 유형에는 서로 다른 계열 설정이 있습니다. 대부분의 차트 구성요소는 LineChart 및 PieChart 와 같은 동일한 metadata 속성을 공유하지만 data 형식은 다릅니다.

자신만의 차트를 만들 때 다양한 data 형식을 알고 있으면 도움이 됩니다.

이제 애플리케이션이 차트로 가득 차 있지만 보기에 좋지 않습니다. 차트는 도움이 되지 않는 방식으로 서로 쌓여 있습니다. 다음 강의에서는 SDK의 사용자 인터페이스 구성 요소와 이를 사용하여 차트를 구성하는 방법에 대해 알아봅니다.

코스

이 강의는 처음부터 New Relic 제작 방법을 가르치는 과정의 일부입니다. 준비가 되면 다음 단원인 애플리케이션에 사용자 인터페이스 구성 요소 추가를 계속 진행하세요.

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

팁

팁

코스