グリッドを追加する

ヒント

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

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

これまでの実践レッスンでは、デザインガイドからすべてのチャートを作成しました。残念ながら、デザイン通りにレイアウトされていません。New Relic SDK は、コンポーネントを整理するための複数のソリューションを提供します。このレッスンで学習するのはGridコンポーネントです。

チャートを配置するには、チャートをGridに配置します。 Gridは、コンテンツを 12 列の行に整理するために使用するコンテナーです。 GridItemはGridの構成要素です。 GridItemのcolumnSpanを1から12の間で指定して、 GridItemが行のどの部分をカバーするかを決定します。したがって、グラフをビューの幅全体に広げたい場合は、グラフをGridItemに配置し、 columnSpanを12に設定します。 12 個のグラフを 1 行に収めたい場合は、 columnSpanに1を使用します。

列をどのように配置するかを計画したら、その計画を実現するためのコードを記述できます。

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

bash

$cd nru-programmability-course/add-a-grid/ab-test

Nerdlet のindex.jsファイルで、 GridとGridItemをインポートします。次に、各チャートをGrildItemに配置して、Nerdlet のrender()メソッドを更新します。最後に、すべてのアイテムをGridに配置します。

import React from 'react';
import { ChartGroup, Grid, GridItem } 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>
        <Grid className="wrapper">
          <GridItem columnSpan={12}>
            <NewsletterSignups />
          </GridItem>
          <GridItem columnSpan={6}>
            <TotalSubscriptions />
          </GridItem>
          <GridItem columnSpan={6}>
            <TotalCancellations />
          </GridItem>
          <GridItem columnSpan={6}>
            <VersionTotals version="a" />
          </GridItem>
          <GridItem columnSpan={6}>
            <VersionTotals version="b" />
          </GridItem>
          <ChartGroup>
            <GridItem columnSpan={6}>
              <VersionPageViews version="a" />
            </GridItem>
            <GridItem columnSpan={6}>
              <VersionPageViews version="b" />
            </GridItem>
          </ChartGroup>
          <GridItem columnSpan={12}>
            <PastTests />
          </GridItem>
        </Grid>
      </div>
    );
  }
}

各チャートのcolumnSpanはレイアウトプランと一致します。 12 列の行の半分を占めるすべてのグラフのcolumnSpanは6で、行全体を占めるすべてのグラフのcolumnSpanは12です。 ChartGroup内の各グラフはGridItemにありますが、 ChartGroup自体は含まれていないことに注意してください。 ChartGroupチャートの位置ではなく動作を接続します。

各チャートはfullWidthプロパティを使用しているため、 columnSpanを埋めます。 fullWidthは、グラフを利用可能な水平方向のスペースいっぱいに表示し、 GridItem.columnSpanはそのスペースを行の一部に制限します。 fullWidthプロパティを削除して、チャートがどのように反応するかを確認します。

技術的詳細

Gridにwrapperクラスが適用されていることに注意してください。このアプリの見栄えを良くするために、いくつかの CSS スタイルを静かに提供しました。これは CSS コースではないため、追加したすべての内容を説明するのではなく、コードスニペットで使用することを想定したスタイルのみを説明します。New Relic SDK のすべての UI コンポーネントには、CSS クラス名を指定できるclassNameプロパティが用意されていることに注意してください。

nerdlets/ab-test-nerdlet/styles.scssでスタイルを表示できます。

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 アプリケーションの提供を停止します。

わずか 6 つの手順で、A/B テストアプリケーションの読みやすさと使いやすさが大幅に向上しましたが、グラフの使いやすさをさらに向上させる手順をさらに実行できます。次のレッスンでは、各グラフにどのようなデータが表示されるかを思い出せるように、グラフに見出しを追加します。

コース

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

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

ヒント

技術的詳細

コース