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

ヒント

このレッスンは、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 アプリケーションをゼロから構築する方法を学習するコースの一部です。準備ができたら、次のレッスン「アプリケーションにユーザーインターフェースコンポーネントを追加する」に進んでください。

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

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

ヒント

ヒント

コース