チャートグループを追加する

ヒント

このレッスンは、New Relic アプリケーションをゼロから構築する方法を学習するコースの一部です。まだご覧になっていない方は、概要をご覧ください。

コースの各レッスンは前回のレッスンに基づいて構築されるため、このレッスンを開始する前に、前回のレッスン「テーブルの追加」を完了していることを確認してください。

前のレッスンでは、A/B テストアプリケーションにさまざまなグラフを追加しました。これらのグラフは、A/B テストに関するさまざまな側面の情報を示しており、互いに独立して動作していました。このレッスンでは、新しい折れ線グラフのペアを作成し、それらの動作を同期する方法を学習します。

前回のレッスンで作成した各表の下に折れ線グラフがあります。これらの折れ線グラフは、ニュースレターのサインアップリクエストのバージョン固有の応答時間を示しています。ここで、さらに 2 つの折れ線グラフを作成しますが、今回は、それらを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という名前の新しい Javascript ファイルを追加します。

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にグループ化するのが適切です。これは、2 つのチャートが同期して動作することを意味します。たとえば、1 つのグラフにマウスポインターを合わせると、他のグラフの同じ 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 アプリケーションをゼロから構築する方法を学習するコースの一部です。準備ができたら、次のレッスン「アプリケーションにユーザーインターフェースコンポーネントを追加する」に進んでください。

この機械翻訳は、参考として提供されています。

チャートグループを追加する

ヒント

ヒント

コース