テーブルを追加する

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

$
cd nru-programmability-course/add-tables/ab-test

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

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

$
touch totals.js

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

import React from 'react';
import { TableChart } from 'nr1';

export default class VersionTotals extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const versionATotals = {
      metadata: {
        id: `totals-${this.props.version}`,
        name: `Version ${this.props.version}`,
        columns: ['name', 'count'],
      },
      data: [
        {
          name: 'Subscriptions',
          count: 0,
        },
        {
          name: 'Page views',
          count: 0,
        },
      ],
    };
    return <TableChart data={[versionATotals]} fullWidth />;
  }
}

TableChart は、 PieChartおよびLineChartとは 3 つの大きな点で異なります。 まず、そのシリーズにはcolorまたはvizメタデータ属性がありません。 TableChartは標準的な視覚化であるため、適用されないcolorなどのものは無視されます。 次に、 TableChartシリーズにはcolumnsメタデータ属性があります。 columnsテーブル上の列の名前を決定します。 最後に、 TableChartシリーズ データでは x 値も y 値も使用されません。 代わりに、テーブル列に一致するキーと、行に何が含まれるかを決定する値を使用します。

VersionTotalsはversionプロパティを受け取り、それをチャート メタデータのidおよびnameフィールドに提供することに注意してください。 これにより、同じコンポーネントを使用してバージョン A とバージョン B のテーブルを作成し、重複コードを排除することができます。

Nerdlet のindex.jsファイルで、新しいコンポーネントをインポートし、Nerdlet のrender()メソッドを更新します。

import React from 'react';
import NewsletterSignups from './newsletter-signups';
import TotalCancellations from './total-cancellations';
import TotalSubscriptions from './total-subscriptions';
import VersionTotals from './totals';

export default class AbTestNerdletNerdlet extends React.Component {
  render() {
    return (
      <div>
        <NewsletterSignups />
        <TotalSubscriptions />
        <TotalCancellations />
        <VersionTotals version="a" />
        <VersionTotals version="b" />
      </div>
    );
  }
}

nru-programmability-course/add-tables/ab-testにある Nerdpack のルートに移動します。

Nerdpack の新しい UUID を生成します。

$
nr1 nerdpack:uuid -gf

既存の Nerdpack を含むコースワーク リポジトリを複製したため、独自の一意の識別子を生成する必要があります。 この UUID は Nerdpack を New Relic アカウントにマッピングします。

アプリケーションをローカルで提供します。

$
nr1 nerdpack:serve

New Relicで変更内容を表示します。

ここでは、アプリケーションに表示されるTableChartコンポーネントが表示されます。

完了したら、ローカル サーバーのターミナル ウィンドウでCTRL+Cを押して、New Relic アプリケーションの提供を停止します。