カスタムアプリケーションで地域別にページビューをマップする

New Relic 、アプリケーションを構築し、そこにデータを入力するための強力で柔軟なツールがあります。このガイドではNew Relicのクエリ言語 ( NRQL - 「ナークル」と発音) を使用してカスタムアプリケーションを構築し、ページビューデータを入力する方法を説明します。次に、データをインタラクティブにします。最後に、もう少し時間があり、サードパーティの React ライブラリをインストールする場合は、収集したページビューデータを世界地図上に表示できます。

このガイドでは、次の 2 つの方法でページビューデータを表示するアプリを構築します。

テーブルで
地図上で

Before you begin [始める前に]セクションを確認して、必要なものがすべて揃っていること、途中で行き詰まらないようにしてください。

あなたが始める前に

このガイドを最大限に活用するには、次のものが必要です。

New Relicアカウント、API キー、コマンドラインツール。
アプリに入力する New Relic Browser のページビューデータ。このデータがなければ、このガイドを完了することはできません。

ガイドの後半で世界地図にデータを追加するには:

npm は、ガイドのこのセクションで、インタラクティブマップの構築に使用されるサードパーティの JavaScript React ライブラリであるLeaflet をインストールするために使用します。 React と npm を初めて使用する場合は、ここからNode.js と npm をインストールできます。

New Relicの用語

このガイドで使用される用語は次のとおりです。

New Relic アプリケーション: データが New Relic でレンダリングされる完成品。これは、一連のインタラクティブなチャートや世界地図のように見えるかもしれません。
Nerdpack: アプリケーションの機能と外観を制御する JavaScript、JSON、CSS、およびその他のファイルの New Relic の標準コレクション。詳細については、 Nerdpack ファイル構造を参照してください。
ランチャー: アプリケーションをリリースするNew Relic内のボタン。
Nerdlets: アプリケーションの構築に使用される New Relic React コンポーネント。デフォルトの 3 つのファイルはindex.js 、 nr1.json 、 styles.scssですが、カスタマイズして独自のファイルを追加することもできます。

テーブルチャートを使用したアプリケーションの構築

ブラウザデータを照会する

次のように、クエリビルダーを使用してNRQLクエリを記述し、ページビューデータを表示します。

New Relic で、右上隅にあるQuery your data [データのクエリ]を選択します。これにより、 NRQLモードになります。データをテーブルにドロップする前に、NRQL を使用してクエリをテストします。

このクエリをコピーしてクリアなクエリフィールドに貼り付け、 Run [実行]を選択します。

FROM PageView SELECT count(*), average(duration) WHERE appName = 'WebPortal' FACET countryCode, regionCode SINCE 1 week ago LIMIT 1000

PageView データがある場合、このクエリでは、国別に分類され、1,000 項目に制限された 1 週間の平均ページビューが表示されます。テーブルは全幅になり、CSS で定義された「chart」クラスが使用されます。

この時点で結果がない場合は、クエリにエラーがないことを確認してください。あなたの書き込みが正しい場合は、ブラウザエージェントがインストールされていない可能性があります。

新しいNerdpackを作成して提供する

まず、新しい Nerdpack を作成し、ローカル開発環境から New Relic に提供します。

nr1を更新し、このアプリの新しい Nerdpack を作成します:
bash
```
$nr1 update
$nr1 create --type nerdpack --name pageviews-app
✔  Component created successfully!
   nerdpack pageviews-app is available at "./pageviews-app"
```

プロジェクトを New Relic に提供します。

bash

$cd pageviews-app && nr1 nerdpack:serve
Found and loaded 2 nr1.json files on PageviewsApp (00e0f043-1fc3-42cd-a8ca-7eef5fc9cd45) Nerdpack.
Nerdpack:
✔  PageviewsApp (00e0f043-1fc3-42cd-a8ca-7eef5fc9cd45) nr1.json
Launchers:
✔  pageviews-app-launcher launchers/pageviews-app-launcher/nr1.json
Nerdlets:
✔  pageviews-app-nerdlet nerdlets/pageviews-app-nerdlet/nr1.json
🛠  Built artifact files for:
⁎  00e0f043-1fc3-42cd-a8ca-7eef5fc9cd45--pageviews-app-nerdlet built ✔
✔  Nerdpack built successfully!
★  Starting as orchestrator...
✔  Server ready! Test it at: https://staging-one.newrelic.com/?nerdpacks=local
↩  Server will reload automatically if you modify any file!
🛠  Built artifact files for:
⁎  00e0f043-1fc3-42cd-a8ca-7eef5fc9cd45--pageviews-app-nerdlet built ✔
✔  Nerdpack built successfully!

アプリファイルを確認し、ローカルでアプリを表示する

pageviews-appに移動して、その構造を確認してください。ランチャーフォルダーが含まれており、New Relic のアプリランチャーに表示される説明とアイコンをカスタマイズできます。また、 nerdletsも含まれており、それぞれに 3 つのデフォルトファイル ( index.js 、 nr1.json 、 styles.scssが含まれています。このガイドの一部として、これらのファイルの一部を編集します。詳細については、 Nerdpack ファイル構造を参照してください。
browserで https://one.newrelic.com/?nerdpacks=local を開き、 Apps [アプリ] をクリックして、提供した pageview-apps Nerdpack を表示します。
ランチャーを選択すると、 Helloメッセージが表示されます。

アカウントIDをハードコードする

この演習の目的と利便性のために、アカウント ID をハードコードします。 pageview-app-nerdletディレクトリのindex.jsファイルで、 import行とexport行の間にこのコードを追加します。 (アカウント ID の確認方法については、こちらをご覧ください)。

import React from 'react';

const accountId = 0; // Replace with your account ID

export default class PageViewApp extends React.Component {
  render() {
    return <h1>Hello, pageview-app-nerdlet Nerdlet!</h1>;
  }
}

pageview-app-nerdlet/index.js

インポート `TableChart`

データをテーブルグラフで表示するには、New Relic からTableChartコンポーネントをインポートします。これを行うには、 index.jsで、 import Reactの下にこのコードを追加します。

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

const accountId = 0; // Replace with your account ID

export default class PageViewApp extends React.Component {
  render() {
    return <h1>Hello, pageview-app-nerdlet Nerdlet!</h1>;
  }
}

pageview-app-nerdlet/index.js

1行のテーブルを追加する

1 行のテーブルを追加するには、 index.jsファイルで、この行を次のexportコードに置き換えます。

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

const accountId = 0; // Replace with your account ID

export default class PageViewApp extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row"></div>
      </div>
    );
  }
}

pageview-app-nerdlet/index.js

テーブルの外観をカスタマイズする（オプション）

標準 CSS を使用してコンポーネントの外観をカスタマイズできます。

styles.scssファイルにこの CSS を追加します。この CSS を好みに合わせて自由にカスタマイズしてください。

.container {
  width: 100%;
  height: 99vh;
  display: flex;
  flex-direction: column;
  .row {
    margin: 10px;
    display: flex;
    flex-direction: row;
  }
  .chart {
    height: 250px;
  }
}

pageview-app-nerdlet/styles.scss

そのテーブルにデータを入力する

テーブルが作成されたので、このガイドの冒頭で記述した NRQL クエリからのデータが入力されたTableChartをドロップできます。

このコードをrow div に挿入します。

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

const accountId = 0; // Replace with your account ID

export default class PageViewApp extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <TableChart
            accountId={accountId}
            query={`FROM PageView SELECT count(*), average(duration) WHERE appName = 'WebPortal' SINCE 1 week ago LIMIT 1000`}
            fullWidth
            className="chart"
          />
        </div>
      </div>
    );
  }
}

pageview-app-nerdlet/index.js

New Relic にアクセスし、アプリをクリックしてテーブル内のデータを確認します。 (アプリを再度 New Relic に提供する必要がある場合があります。)

おめでとう！アプリが完成しました。アプリをインタラクティブにして、データを地図上に表示してみましょう。

テキストフィールドを使ってアプリをインタラクティブにする

アプリから New Relic にデータが送信されていることを確認したら、アプリをカスタマイズしてインタラクティブにすることができます。これを行うには、データをフィルタリングするためのテキストフィールドを追加します。その後、 Leafletというサードパーティライブラリを使用して、そのデータを世界地図上に表示します。

インポート `TextField`

TableChartコンポーネントの場合と同様に、New Relic からTextFieldコンポーネントをインポートする必要があります。

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

const accountId = 0; // Replace with your account ID

export default class PageViewApp extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <TableChart
            accountId={accountId}
            query={`FROM PageView SELECT count(*), average(duration) WHERE appName = 'WebPortal' SINCE 1 week ago LIMIT 1000`}
            fullWidth
            className="chart"
          />
        </div>
      </div>
    );
  }
}

pageview-app-nerdlet/index.js

テキストフィールドに行を追加する

テーブルの上にテキストフィールドフィルターを追加するには、このコードをTableChart div の上に配置します。テキストフィールドのデフォルト値は「US」になります。

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

const accountId = 0; // Replace with your account ID

export default class PageViewApp extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="row">
            <TextField
              placeholder="US"
              onChange={(event) => {
                this.setState({ countryCode: event.target.value });
              }}
            />
          </div>
          <TableChart
            accountId={accountId}
            query={`FROM PageView SELECT count(*), average(duration) WHERE appName = 'WebPortal' SINCE 1 week ago LIMIT 1000`}
            fullWidth
            className="chart"
          />
        </div>
      </div>
    );
  }
}

pageview-app-nerdlet/index.js

テキストフィールドオブジェクトを構築する

render()関数の上に、テキストフィールドオブジェクトを構築するためのconstructorを追加します。

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

const accountId = 0; // Replace with your account ID

export default class PageViewApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      countryCode: null,
    };
  }

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="row">
            <TextField
              placeholder="US"
              onChange={(event) => {
                this.setState({ countryCode: event.target.value });
              }}
            />
          </div>
          <TableChart
            accountId={accountId}
            query={`FROM PageView SELECT count(*), average(duration) WHERE appName = 'WebPortal' SINCE 1 week ago LIMIT 1000`}
            fullWidth
            className="chart"
          />
        </div>
      </div>
    );
  }
}

pageview-app-nerdlet/index.js

returnの上に以下を追加します:

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

const accountId = 0; // Replace with your account ID

export default class PageViewApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      countryCode: null,
    };
  }

  render() {
    const { countryCode } = this.state;

    return (
      <div className="container">
        <div className="row">
          <div className="row">
            <TextField
              placeholder="US"
              onChange={(event) => {
                this.setState({ countryCode: event.target.value });
              }}
            />
          </div>
          <TableChart
            accountId={accountId}
            query={`FROM PageView SELECT count(*), average(duration) WHERE appName = 'WebPortal' SINCE 1 week ago LIMIT 1000`}
            fullWidth
            className="chart"
          />
        </div>
      </div>
    );
  }
}

pageview-app-nerdlet/index.js

次に、テーブルチャートクエリにcountryCodeを追加します。

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

const accountId = 0; // Replace with your account ID

export default class PageViewApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      countryCode: null,
    };
  }

  render() {
    const { countryCode } = this.state;

    return (
      <div className="container">
        <div className="row">
          <div className="row">
            <TextField
              placeholder="US"
              onChange={(event) => {
                this.setState({ countryCode: event.target.value });
              }}
            />
          </div>
          <TableChart
            accountId={accountId}
            query={`FROM PageView SELECT count(*), average(duration) WHERE appName = 'WebPortal' ${
              countryCode ? ` WHERE countryCode LIKE '%${countryCode}%' ` : ''
            } FACET countryCode, regionCode SINCE 1 week ago LIMIT 1000`}
            fullWidth
            className="chart"
          />
        </div>
      </div>
    );
  }
}

pageview-app-nerdlet/index.js

テキストフィールドを試すには、アプリを再読み込みしてください。

データを地図上に表示する

マップを作成するには、npm を使用してLeafletをインストールします。

インストール `Leaflet`

ターミナルで次のように入力します:

bash

$npm install --save leaflet react-leaflet

nerdlets styles.scssファイルに、 Leaflet CSS をインポートします。

@import `~leaflet/dist/leaflet.css`;

.container {
  width: 100%;
  height: 99vh;
  display: flex;
  flex-direction: column;
  .row {
    margin: 10px;
    display: flex;
    flex-direction: row;
  }
  .chart {
    height: 250px;
  }
}

pageview-app-nerdlet/styles.scss

styles.scssにいる間に、マップの幅と高さを修正します。

@import `~leaflet/dist/leaflet.css`;

.container {
  width: 100%;
  height: 99vh;
  display: flex;
  flex-direction: column;
  .row {
    margin: 10px;
    display: flex;
    flex-direction: row;
  }
  .chart {
    height: 250px;
  }
}

.containerMap {
  width: 100%;
  z-index: 0;
  height: 70vh;
}

pageview-app-nerdlet/styles.scss

webpack設定ファイルを追加する `Leaflet`

nerdpack の最上位フォルダーに webpack 設定ファイル.extended-webpackrc.jsを追加します。これは、 Leafletからのマップタイル情報データの使用をサポートします。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
          {
            loader: 'url-loader',
            options: { limit: 25000 },
          },
        ],
      },
    ],
  },
};

.extended-webpackrc.js

モジュールをインポートする `Leaflet`

index.jsで、 Leafletからモジュールをインポートします。

import React from 'react';
import { TableChart, TextField } from 'nr1';
import { Map, CircleMarker, TileLayer } from 'react-leaflet';

const accountId = 0; // Replace with your account ID

export default class PageViewApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      countryCode: null,
    };
  }

  render() {
    const { countryCode } = this.state;

    return (
      <div className="container">
        <div className="row">
          <div className="row">
            <TextField
              placeholder="US"
              onChange={(event) => {
                this.setState({ countryCode: event.target.value });
              }}
            />
          </div>
          <TableChart
            accountId={accountId}
            query={`FROM PageView SELECT count(*), average(duration) WHERE appName = 'WebPortal' ${
              countryCode ? ` WHERE countryCode LIKE '%${countryCode}%' ` : ''
            } FACET countryCode, regionCode SINCE 1 week ago LIMIT 1000`}
            fullWidth
            className="chart"
          />
        </div>
      </div>
    );
  }
}

pageview-app-nerdlet/index.js

New Relicから追加のモジュールをインポートする

Leafletマップを正常に動作させるには、New Relic のモジュールがさらにいくつか必要です。次のコードを使用してインポートします。

import React from 'react';
import {
  TableChart,
  TextField,
  NerdGraphQuery,
  Spinner,
  Button,
  BlockText,
} from 'nr1';
import { Map, CircleMarker, TileLayer } from 'react-leaflet';

const accountId = 0; // Replace with your account ID

export default class PageViewApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      countryCode: null,
    };
  }

  render() {
    const { countryCode } = this.state;

    return (
      <div className="container">
        <div className="row">
          <div className="row">
            <TextField
              placeholder="US"
              onChange={(event) => {
                this.setState({ countryCode: event.target.value });
              }}
            />
          </div>
          <TableChart
            accountId={accountId}
            query={`FROM PageView SELECT count(*), average(duration) WHERE appName = 'WebPortal' ${
              countryCode ? ` WHERE countryCode LIKE '%${countryCode}%' ` : ''
            } FACET countryCode, regionCode SINCE 1 week ago LIMIT 1000`}
            fullWidth
            className="chart"
          />
        </div>
      </div>
    );
  }
}

pageview-app-nerdlet/index.js

NerdGraphQuery 一度に複数の NRQL クエリを実行し、マップにデータを入力することができます。 Spinner読み込みスピナーを追加します。 Buttonボタンコンポーネントを提供します。 BlockTextブロックテキストコンポーネントを提供します。

マップのデータを取得する

緯度と経度を国コードとともに使用して、New Relic データを地図上に配置できます。

import React from 'react';
import {
  TableChart,
  TextField,
  NerdGraphQuery,
  Spinner,
  Button,
  BlockText,
} from 'nr1';
import { Map, CircleMarker, TileLayer } from 'react-leaflet';

const accountId = 0; // Replace with your account ID

export default class PageViewApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      countryCode: null,
    };
  }

  mapData() {
    const { countryCode } = this.state;
    const query = `{
      actor {
        account(id: 1606862) {
          mapData: nrql(query: "SELECT count(*) AS 'x', average(duration) AS 'y', sum(asnLatitude)/count(*) AS 'lat', sum(asnLongitude)/count(*) AS 'lng' FROM PageView FACET regionCode, countryCode WHERE appName = 'WebPortal' ${
            countryCode ? ` WHERE countryCode LIKE '%${countryCode}%' ` : ''
          } LIMIT 1000 ") {
            results
            nrql
          }
        }
      }
    }`;

    return query;
  }

  render() {
    const { countryCode } = this.state;

    return (
      <div className="container">
        <div className="row">
          <div className="row">
            <TextField
              placeholder="US"
              onChange={(event) => {
                this.setState({ countryCode: event.target.value });
              }}
            />
          </div>
          <TableChart
            accountId={accountId}
            query={`FROM PageView SELECT count(*), average(duration) WHERE appName = 'WebPortal' ${
              countryCode ? ` WHERE countryCode LIKE '%${countryCode}%' ` : ''
            } FACET countryCode, regionCode SINCE 1 week ago LIMIT 1000`}
            fullWidth
            className="chart"
          />
        </div>
      </div>
    );
  }
}

pageview-app-nerdlet/index.js

マップマーカーの色をカスタマイズする

mapData関数の上にこのコードを追加して、マップマーカーの色をカスタマイズします。

import React from 'react';
import {
  TableChart,
  TextField,
  NerdGraphQuery,
  Spinner,
  Button,
  BlockText,
} from 'nr1';
import { Map, CircleMarker, TileLayer } from 'react-leaflet';

const accountId = 0; // Replace with your account ID

export default class PageViewApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      countryCode: null,
    };
  }

  getMarkerColor(measure, apdexTarget = 1.7) {
    if (measure <= apdexTarget) {
      return '#11A600';
    } else if (measure >= apdexTarget && measure <= apdexTarget * 4) {
      return '#FFD966';
    } else {
      return '#BF0016';
    }
  }

  mapData() {
    const { countryCode } = this.state;
    const query = `{
      actor {
        account(id: 1606862) {
          mapData: nrql(query: "SELECT count(*) AS 'x', average(duration) AS 'y', sum(asnLatitude)/count(*) AS 'lat', sum(asnLongitude)/count(*) AS 'lng' FROM PageView FACET regionCode, countryCode WHERE appName = 'WebPortal' ${
            countryCode ? ` WHERE countryCode LIKE '%${countryCode}%' ` : ''
          } LIMIT 1000 ") {
            results
            nrql
          }
        }
      }
    }`;

    return query;
  }

  render() {
    const { countryCode } = this.state;

    return (
      <div className="container">
        <div className="row">
          <div className="row">
            <TextField
              placeholder="US"
              onChange={(event) => {
                this.setState({ countryCode: event.target.value });
              }}
            />
          </div>
          <TableChart
            accountId={accountId}
            query={`FROM PageView SELECT count(*), average(duration) WHERE appName = 'WebPortal' ${
              countryCode ? ` WHERE countryCode LIKE '%${countryCode}%' ` : ''
            } FACET countryCode, regionCode SINCE 1 week ago LIMIT 1000`}
            fullWidth
            className="chart"
          />
        </div>
      </div>
    );
  }
}

pageview-app-nerdlet/index.js

HTML カラーコードの値は、好みに応じて自由に変更できます。この例では、 #11A600は緑、 #FFD966は黄色、 #BF0016は赤です。

マップのデフォルトの中心点を設定する

緯度と経度を使用して、マップのデフォルトの中心点を設定します。

import React from 'react';
import {
  TableChart,
  TextField,
  NerdGraphQuery,
  Spinner,
  Button,
  BlockText,
} from 'nr1';
import { Map, CircleMarker, TileLayer } from 'react-leaflet';

const accountId = 0; // Replace with your account ID

export default class PageViewApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      countryCode: null,
    };
  }

  getMarkerColor(measure, apdexTarget = 1.7) {
    if (measure <= apdexTarget) {
      return '#11A600';
    } else if (measure >= apdexTarget && measure <= apdexTarget * 4) {
      return '#FFD966';
    } else {
      return '#BF0016';
    }
  }

  mapData() {
    const { countryCode } = this.state;
    const query = `{
      actor {
        account(id: 1606862) {
          mapData: nrql(query: "SELECT count(*) AS 'x', average(duration) AS 'y', sum(asnLatitude)/count(*) AS 'lat', sum(asnLongitude)/count(*) AS 'lng' FROM PageView FACET regionCode, countryCode WHERE appName = 'WebPortal' ${
            countryCode ? ` WHERE countryCode LIKE '%${countryCode}%' ` : ''
          } LIMIT 1000 ") {
            results
            nrql
          }
        }
      }
    }`;

    return query;
  }

  render() {
    const { countryCode } = this.state;
    const defaultMapCenter = [10.5731, -7.5898];

    return (
      <div className="container">
        <div className="row">
          <div className="row">
            <TextField
              placeholder="US"
              onChange={(event) => {
                this.setState({ countryCode: event.target.value });
              }}
            />
          </div>
          <TableChart
            accountId={accountId}
            query={`FROM PageView SELECT count(*), average(duration) WHERE appName = 'WebPortal' ${
              countryCode ? ` WHERE countryCode LIKE '%${countryCode}%' ` : ''
            } FACET countryCode, regionCode SINCE 1 week ago LIMIT 1000`}
            fullWidth
            className="chart"
          />
        </div>
      </div>
    );
  }
}

pageview-app-nerdlet/index.js

マップに行を追加する

テキストフィールド行とテーブルチャート行の間に、 NerdGraphQueryを使用してマップコンテンツ用の新しい行を挿入します。

import React from 'react';
import {
  TableChart,
  TextField,
  NerdGraphQuery,
  Spinner,
  Button,
  BlockText,
} from 'nr1';
import { Map, CircleMarker, TileLayer } from 'react-leaflet';

const accountId = 0; // Replace with your account ID

export default class PageViewApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      countryCode: null,
    };
  }

  getMarkerColor(measure, apdexTarget = 1.7) {
    if (measure <= apdexTarget) {
      return '#11A600';
    } else if (measure >= apdexTarget && measure <= apdexTarget * 4) {
      return '#FFD966';
    } else {
      return '#BF0016';
    }
  }

  mapData() {
    const { countryCode } = this.state;
    const query = `{
      actor {
        account(id: 1606862) {
          mapData: nrql(query: "SELECT count(*) AS 'x', average(duration) AS 'y', sum(asnLatitude)/count(*) AS 'lat', sum(asnLongitude)/count(*) AS 'lng' FROM PageView FACET regionCode, countryCode WHERE appName = 'WebPortal' ${
            countryCode ? ` WHERE countryCode LIKE '%${countryCode}%' ` : ''
          } LIMIT 1000 ") {
            results
            nrql
          }
        }
      }
    }`;

    return query;
  }

  render() {
    const { countryCode } = this.state;
    const defaultMapCenter = [10.5731, -7.5898];

    return (
      <div className="container">
        <div className="row">
          <div className="row">
            <TextField
              placeholder="US"
              onChange={(event) => {
                this.setState({ countryCode: event.target.value });
              }}
            />
          </div>
          <div className="row">
            <NerdGraphQuery query={this.mapData()}>
              {({ loading, error, data }) => {
                if (loading) {
                  return <Spinner fillContainer />;
                }
                if (error) {
                  return 'Error';
                }
                const { results } = data.actor.account.mapData;
                console.debug(results);
                return 'Hello';
              }}
            </NerdGraphQuery>
          </div>
          <TableChart
            accountId={accountId}
            query={`FROM PageView SELECT count(*), average(duration) WHERE appName = 'WebPortal' ${
              countryCode ? ` WHERE countryCode LIKE '%${countryCode}%' ` : ''
            } FACET countryCode, regionCode SINCE 1 week ago LIMIT 1000`}
            fullWidth
            className="chart"
          />
        </div>
      </div>
    );
  }
}

pageview-app-nerdlet/index.js

アプリケーションが動作するかどうかをテストするには、New Relic でアプリケーションを再ロードします。

「Hello」をLeafletコードに置き換えます

return "Hello";を次のものに置き換えます:

import React from 'react';
import {
  TableChart,
  TextField,
  NerdGraphQuery,
  Spinner,
  Button,
  BlockText,
} from 'nr1';
import { Map, CircleMarker, TileLayer } from 'react-leaflet';

const accountId = 0; // Replace with your account ID

export default class PageViewApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      countryCode: null,
    };
  }

  getMarkerColor(measure, apdexTarget = 1.7) {
    if (measure <= apdexTarget) {
      return '#11A600';
    } else if (measure >= apdexTarget && measure <= apdexTarget * 4) {
      return '#FFD966';
    } else {
      return '#BF0016';
    }
  }

  mapData() {
    const { countryCode } = this.state;
    const query = `{
      actor {
        account(id: 1606862) {
          mapData: nrql(query: "SELECT count(*) AS 'x', average(duration) AS 'y', sum(asnLatitude)/count(*) AS 'lat', sum(asnLongitude)/count(*) AS 'lng' FROM PageView FACET regionCode, countryCode WHERE appName = 'WebPortal' ${
            countryCode ? ` WHERE countryCode LIKE '%${countryCode}%' ` : ''
          } LIMIT 1000 ") {
            results
            nrql
          }
        }
      }
    }`;

    return query;
  }

  render() {
    const { countryCode } = this.state;
    const defaultMapCenter = [10.5731, -7.5898];

    return (
      <div className="container">
        <div className="row">
          <div className="row">
            <TextField
              placeholder="US"
              onChange={(event) => {
                this.setState({ countryCode: event.target.value });
              }}
            />
          </div>
          <div className="row">
            <NerdGraphQuery query={this.mapData()}>
              {({ loading, error, data }) => {
                if (loading) {
                  return <Spinner fillContainer />;
                }
                if (error) {
                  return 'Error';
                }
                const { results } = data.actor.account.mapData;
                console.debug(results);

                return (
                  <Map
                    className="containerMap"
                    center={defaultMapCenter}
                    zoom={2}
                    zoomControl
                  >
                    <TileLayer
                      attribution='&copy OpenStreetMap contributors'
                      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                    {results.map((pt, i) => {
                      const center = [pt.lat, pt.lng];
                      return (
                        <CircleMarker
                          key={`circle-${i}`}
                          center={center}
                          color={this.getMarkerColor(pt.y)}
                          radius={Math.log(pt.x) * 3}
                          onClick={() => {
                            alert(JSON.stringify(pt));
                          }}
                        />
                      );
                    })}
                  </Map>
                );
              }}
            </NerdGraphQuery>
          </div>
          <TableChart
            accountId={accountId}
            query={`FROM PageView SELECT count(*), average(duration) WHERE appName = 'WebPortal' ${
              countryCode ? ` WHERE countryCode LIKR '%${countryCode}%' ` : ''
            } FACET countryCode, regionCode SINCE 1 week ago LIMIT 1000`}
            fullWidth
            className="chart"
          />
        </div>
      </div>
    );
  }
}

pageview-app-nerdlet/index.js

このコードは、 OpenStreetMapデータとマーカーの色を使用して、選択した緯度と経度を中心とした世界地図を作成します。

アプリを再読み込みして、マップ上のページビューデータを確認してください。

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

カスタムアプリケーションで地域別にページビューをマップする

あなたが始める前に .css-21sua1{background:none;border:none;width:0;padding:0;}

New Relicの用語

テーブルチャートを使用したアプリケーションの構築

ブラウザデータを照会する

新しいNerdpackを作成して提供する

アプリファイルを確認し、ローカルでアプリを表示する

アカウントIDをハードコードする

インポート TableChart

1行のテーブルを追加する

テーブルの外観をカスタマイズする（オプション）

そのテーブルにデータを入力する

テキストフィールドを使ってアプリをインタラクティブにする

インポート TextField

テキストフィールドに行を追加する

テキストフィールドオブジェクトを構築する

データを地図上に表示する

インストール Leaflet

webpack設定ファイルを追加する Leaflet

モジュールをインポートする Leaflet

New Relicから追加のモジュールをインポートする

マップのデータを取得する

マップマーカーの色をカスタマイズする

マップのデフォルトの中心点を設定する

マップに行を追加する

「Hello」をLeafletコードに置き換えます

あなたが始める前に

インポート `TableChart`

インポート `TextField`

インストール `Leaflet`

webpack設定ファイルを追加する `Leaflet`

モジュールをインポートする `Leaflet`