最初のチャートを追加する

ヒント

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

コースの各レッスンは前回のレッスンに基づいて構築されるため、このレッスンを開始する前に、前回のレッスン「A/B テストアプリケーションにチャートコンポーネントを追加する」を完了していることを確認してください。

このコースでは、 New Relicプラットフォーム用の A/B テストアプリケーションを構築します。前回は、 New Relic SDK](/docs/New Relic-solutions/build-nr-UI/sdk-component/intro-to-sdk) とそのコンポーネントライブラリについて学習しました。さて、まずチャートコンポーネントに焦点を当ててアプリケーションの構築を開始します。

作成する必要があるチャートは複数あり、最初は大変に思えるかもしれませんが、1 つずつ進めてください。一番上のグラフ、つまり最初に作成するグラフは、ニュースレターに登録したユーザーの数と、そのユーザーに表示された Web サイトのバージョンを示す折れ線グラフです。

コースワークリポジトリのadd-your-first-chart/ab-testディレクトリに変更します:

bash

$cd nru-programmability-course/add-your-first-chart/ab-test

このディレクトリには、コースのこの時点でアプリケーションに必要なコードが含まれています。各レッスンの開始時に正しいディレクトリに移動することで、カスタムコードが残され、間違ったコードがレッスン間で持ち越されることがなくなります。

nerdlets/ab-test-nerdletに、 newsletter-signups.jsという名前の新しい Javascript ファイルを追加します。

bash

$touch newsletter-signups.js

この新しいファイルで、最初のLineChartといくつかの模擬データを保持するNewsletterSignupsというコンポーネントを作成します。

import React from 'react';
import { 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 <LineChart data={[versionASignups, versionBSignups]} fullWidth />;
  }
}

nerdlets/ab-test-nerdlet/newsletter-signups.js

ここでは、テストのバージョン A と B を表す 2 つの任意のデータシリーズを作成しました。現時点では、手動で作成されたデータポイントを使用しています。将来的には、これらを New Relic からクエリされたデータに置き換えます。

グラフ内の各系列に色を指定していることに注意してください。 colorメタデータ属性は、CSS で許容される任意のカラー形式を取ります。 viz: 'main'を設定すると、 LineChartシリーズをコンポーネントのデフォルトの表示スタイルである線としてレンダリングすることになります。 LineChartコンポーネントのdataプロパティでは、2 つのシリーズを配列で渡して、両方が一緒に表現されるようにしました。最後に、チャートのfullWidthプロパティを使用して、チャートの幅を広げてビューを埋めました。

Nerdlet のindex.jsファイルで、新しいコンポーネントをインポートし、Nerdlet のrender()メソッドのデフォルトの見出しを新しいコンポーネントに置き換えます。

import React from 'react';
import NewsletterSignups from './newsletter-signups';

export default class AbTestNerdletNerdlet extends React.Component {
  render() {
    return (
      <div>
        <NewsletterSignups />
      </div>
    );
  }
}

nerdlets/ab-test-nerdlet/index.js

nru-programmability-course/add-your-first-chart/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 アプリケーションの提供を停止します。

7 つのステップで、New Relic アプリケーションに命を吹き込むことができました。アプリケーションでは、単調な「Hello world」メッセージの代わりに、2 つの模擬データシリーズを含むカラフルな折れ線グラフが表示されるようになりました。これらのデータシリーズは、デモ Web サイト内の競合する各デザインのサーバー側トラフィックを表します。次のレッスンでは、この基礎を基にして別の種類のグラフを作成します。

コース

このレッスンは、New Relic アプリケーションをゼロから構築する方法を学習するコースの一部です。準備ができたら、次のレッスン「円グラフの追加」に進んでください。

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

ヒント

コース