円グラフを追加する

ヒント

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

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

A/B テストアプリケーションの構築を開始しました。これまでのところ、これは単一の折れ線グラフで構成されており、Web サイトの各バージョンからニュースレターが受け取るサブスクリプションの数を表しています。

デザインでは、すでに作成した折れ線グラフの下に 2 つの円グラフがあります。 1 つはバージョン A とバージョン B を受信したユーザーの分布を表します。もう 1 つはバージョン A とバージョン B を受信したユーザーからの成功したリクエストの分布を表します。

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

bash

$cd nru-programmability-course/add-pie-charts/ab-test

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

nerdlets/ab-test-nerdletに、2 つの新しい Javascript ファイルを追加します。

total-subscriptions.js

total-cancellations.js

bash

$touch total-subscriptions.js total-cancellations.js

total-subscriptions.jsで、モックされたサブスクリプションデータをレンダリングするTotalSubscriptionsというコンポーネントを作成します。

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

export default class TotalSubscriptions extends React.Component {
    render() {
        const subscriptionsA = {
            metadata: {
                id: 'subscriptions-A',
                name: 'Version A',
                viz: 'main',
                color: 'blue',
            },
            data: [
                { y: 259 },
            ],
        }
        const subscriptionsB = {
            metadata: {
                id: 'subscriptions-B',
                name: 'Version B',
                viz: 'main',
                color: 'green',
            },
            data: [
                { y: 318 },
            ],
        }
        return <PieChart data={[subscriptionsA, subscriptionsB]} fullWidth />
    }
}

nerdlets/ab-test-nerdlet/total-subscriptions.js

シリーズdataは、 PieChartの場合とLineChartの場合でフォーマットが異なることに注意してください。 PieChart一次元データを使用するため、その系列は y 値のみを取得します。

total-cancellations.jsで、モックされたキャンセルデータをレンダリングするTotalCancellationsというコンポーネントを作成します。

fileName=nerdlets/ab-test-nerdlet/total-subscriptions.js

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

export default class TotalCancellations extends React.Component {
    render() {
        const cancellationsA = {
            metadata: {
                id: 'cancellations-A',
                name: 'Version A',
                viz: 'main',
                color: 'blue',
            },
            data: [
                { y: 118 },
            ],
        }
        const cancellationsB = {
            metadata: {
                id: 'cancellations-B',
                name: 'Version B',
                viz: 'main',
                color: 'green',
            },
            data: [
                { y: 400 },
            ],
        }
        return <PieChart data={[cancellationsA, cancellationsB]} fullWidth />
    }
}

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

fileName=nerdlets/ab-test-nerdlet/index.js lineHighlight=3-4,10-11

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

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

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

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

bash

$nr1 nerdpack:uuid -gf

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

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

bash

$nr1 nerdpack:serve

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

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

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

アプリケーションが形になり始めています。折れ線グラフと 2 つの円グラフを作成しました。現時点では、これらのグラフでは模擬データを使用していますが、後のレッスンで実際のデータを提供します。ただし、グラフ内のデータに焦点を当てる前に、アプリケーションにテーブルを追加して、新しい方法でデータを視覚化する方法を学びます。

コース

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

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

ヒント

コース