グラフの見出しを追加する

ヒント

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

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

チャートを整理することは、ユーザーに伝えたい情報を明確にする方法の 1 つです。見出しはまた別のものです。同じページに複数のグラフがあるため、見出しを使用してグラフに表示される情報を説明します。

設計ガイドには、各グラフに表示されるデータが詳細に記載されています。これらの詳細を使用して、グラフに役立つ見出しを作成します。

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

bash

$cd nru-programmability-course/add-chart-headings/ab-test

newsletter-signups.js 、 page-views.js 、 past-tests.js 、 total-cancellations.js 、 total-subscriptions.js 、 totals.jsでHeadingTextをインポートし、各カスタムコンポーネントのグラフの上に「わかりやすい」見出しを追加します。

import React from 'react';
import { HeadingText, 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 (
      <div>
        <HeadingText className="chartHeader">
          Newsletter subscriptions per version
        </HeadingText>
        <LineChart data={[versionASignups, versionBSignups]} fullWidth />
      </div>
    );
  }
}

import React from 'react';
import { HeadingText, 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 (
      <div>
        <HeadingText className="chartHeader">
          Version {this.props.version.toUpperCase()} - Page views
        </HeadingText>
        <LineChart data={[versionPageViews]} fullWidth />
      </div>
    );
  }
}

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

export default class PastTests extends React.Component {
  render() {
    const historicalData = {
      metadata: {
        id: 'past-tests',
        name: 'Past tests',
        columns: [
          'endDate',
          'versionADescription',
          'versionBDescription',
          'winner',
        ],
      },
      data: [
        {
          endDate: '12-15-2020',
          versionADescription: "The homepage's CTA button was green.",
          versionBDescription: "The homepage's CTA button was blue.",
          winner: 'A',
        },
        {
          endDate: '09-06-2019',
          versionADescription: "The 'Deals' page showed sales in a carousel.",
          versionBDescription: "The 'Deals' page showed sales in a grid.",
          winner: 'B',
        },
      ],
    };

    return (
      <div>
        <HeadingText className="chartHeader">Past tests</HeadingText>
        <TableChart data={[historicalData]} fullWidth />
      </div>
    );
  }
}

import React from 'react';
import { HeadingText, 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 (
      <div>
        <HeadingText className="chartHeader">
          Total cancellations per version
        </HeadingText>
        <PieChart data={[cancellationsA, cancellationsB]} fullWidth />
      </div>
    );
  }
}

import React from 'react';
import { HeadingText, 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 (
      <div>
        <HeadingText className="chartHeader">
          Total subscriptions per version
        </HeadingText>
        <PieChart data={[subscriptionsA, subscriptionsB]} fullWidth />
      </div>
    );
  }
}

import React from 'react';
import { HeadingText, 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 (
      <div>
        <HeadingText className="chartHeader">
          Version {this.props.version.toUpperCase()} - Page views vs.
          subscriptions
        </HeadingText>
        <TableChart data={[versionATotals]} fullWidth />
      </div>
    );
  }
}

各render()に新しい<div>タグが追加され、一度に複数の要素を返すことができるようになったことに注意してください。また、 chartHeaderクラスのスタイルを設定する CSS スタイルシートが提供されていることに注意してください。詳しくはnerdlets/ab-test-nerdlet/styles.scssをご覧ください。

コンポーネントが新しいコードをカプセル化するため、 index.js内の Nerdlet のrender()メソッドを変更する必要はありません。

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

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

bash

$nr1 nerdpack:uuid -gf

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

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

bash

$nr1 nerdpack:serve

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

ここで、チャートにわかりやすい見出しがあることがわかります。

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

よくやった！設計ガイドにレイアウトされているすべてのチャートを作成しました。また、グラフがわかりやすくなるように、グラフをきちんとグリッドに整理し、見出しを追加しました。グラフの見出しは各グラフが何を示しているかを理解するのに役立ちますが、A/B テストの各バージョンが何を表しているかを思い出すのに役立つ説明を追加するとよいでしょう。次のレッスンでは、各デザインバージョンの説明を追加します。

コース

このレッスンは、New Relic アプリケーションをゼロから構築する方法を学習するコースの一部です。次のレッスン「バージョンの説明を追加する」に進みます。

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

ヒント

コース