맞춤형 앱의 지역별 지도 페이지 보기

뉴렐릭은 맞춤형 앱을 구축하고 데이터를 채우기 위한 강력하고 유연한 도구를 제공합니다. 이 가이드에서는 커스텀 앱을 구축하고 뉴렐릭의 쿼리 언어(NRQL - 'nurkle'로 발음)를 사용하여 페이지 보기 데이터로 채우는 방법을 보여줍니다. 그런 다음 데이터를 대화형으로 만듭니다. 마지막으로, 시간이 좀 더 있고 타사 React 라이브러리를 설치하고 싶다면 수집한 페이지 보기 데이터를 세계 지도에 표시할 수 있습니다.

이 가이드에서는 다음 두 가지 방법으로 페이지 조회 데이터를 표시하는 앱을 빌드합니다.

테이블에
지도에서

Before you begin [시작하기 전에] 섹션을 검토하여 필요한 모든 것이 갖추어져 있는지 확인하고 중간에 막히지 않도록 하십시오.

시작하기 전에

이 가이드를 최대한 활용하려면 다음이 필요합니다.

뉴렐릭 계정, API 키, 그리고 마우스줄 도구입니다.
뉴렐릭 앱을 채우기 위한 브라우저 페이지 보기 데이터입니다. 이 데이터가 없으면 이 가이드를 완료할 수 없습니다.

가이드 후반부의 세계 지도에 데이터를 추가하려면:

npm은 가이드의 이 섹션에서 대화형 지도를 구축하는 데 사용되는 타사 JavaScript React 라이브러리인 Leaflet을 설치하는 데 사용됩니다. React 및 npm을 처음 사용하는 경우 여기로 이동하여 Node.js 및 npm을 설치할 수 있습니다.

뉴렐릭 용어

다음은 이 가이드에서 사용되는 몇 가지 용어입니다.

뉴 킹 릭: 데이터가 뉴 렐릭으로 렌더링되는 완제품입니다. 이는 일련의 대화형 차트나 세계 지도처럼 보일 수 있습니다.
Nerdpack: 뉴렐릭의 JavaScript, JSON, CSS 및 기타 파일로 구성된 표준 컬렉션으로, 애플리케이션의 기능과 모양을 제어합니다. 자세한 내용은 Nerdpack 파일 구조를 참조하세요.
Launcher: 당신의 독특한 기능을 제공하는 뉴렐릭의 버튼입니다.
Nerdlets: 뉴렐릭 React 구성요소를 빌드하는 데 사용됩니다. 세 가지 기본 파일은 index.js, nr1.json 및 styles.scss 이지만 직접 맞춤설정하고 추가할 수 있습니다.

테이블 차트로 맞춤형 앱 만들기

브라우저 데이터 쿼리

다음과 같이 쿼리 빌더를 사용하여 NRQL 쿼리를 작성하여 페이지 보기 데이터를 확인하세요.

블루렐릭에서 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개로 제한하여 표시합니다. 테이블은 전체 너비이며 CSS에 정의된 "차트" 클래스를 사용합니다.

지금까지 결과가 나오지 않으면 쿼리에 오류가 없는지 확인하세요. 귀하의 쿼리가 올바르다면 브라우저 에이전트가 설치되지 않았을 수 있습니다.

새로운 Nerdpack 생성 및 제공

시작하려면 새 Nerdpack을 생성하고 로컬 개발 환경에서 뉴렐릭에 제공하세요.

nr1 ) 업데이트하고 이 앱에 대한 새 Nerdpack을 만듭니다.
bash
```
$nr1 update
$nr1 create --type nerdpack --name pageviews-app
✔  Component created successfully!
   nerdpack pageviews-app is available at "./pageviews-app"
```

뉴렐릭에게 프로젝트를 제공하세요:

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 로 이동하여 구조화된 방식을 확인하세요. 여기에는 앱의 런처에 표시될 설명과 아이콘을 사용자 지정할 수 있는 런처 폴더가 포함되어 있습니다. 또한 nerdlets 포함되어 있으며 각각 index.js, nr1.json, styles.scss 의 세 개의 기본 파일이 포함되어 있습니다. 이 가이드의 일부로 이러한 파일 중 일부를 편집하게 될 것입니다. 자세한 내용은 Nerdpack 파일 구조를 참조하세요.
이제 브라우저에서 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`

데이터를 표 차트로 표시하려면 뉴렐릭에서 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

단일 행이 있는 테이블 추가

단일 행이 있는 테이블을 추가하려면 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

뉴렐릭로 이동하여 앱을 클릭하면 표에서 데이터를 볼 수 있습니다. (다시 뉴렐릭에 앱을 제공해야 할 수도 있습니다.)

축하해요! 앱을 만드셨어요! 계속해서 대화형으로 만들고 지도에 데이터를 표시하세요.

텍스트 필드를 사용하여 앱을 대화형으로 만들기

데이터가 앱에서 뉴렐릭으로 전송되는 것을 확인하고 나면 이를 사용자 정의하고 대화형으로 만들 수 있습니다. 이렇게 하려면 데이터를 필터링하는 텍스트 필드를 추가합니다. 나중에 Leaflet 이라는 타사 라이브러리를 사용하여 해당 데이터를 세계 지도에 표시합니다.

가져오기 `TextField`

TableChart 구성 요소에서와 마찬가지로 뉴렐릭에서 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

뉴렐릭에서 추가 모듈 가져오기

Leaflet 지도가 제대로 작동하려면 뉴렐릭의 모듈이 몇 개 더 필요합니다. 다음 코드를 사용하여 가져옵니다.

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 블록 텍스트 구성요소를 제공합니다.

지도에 대한 데이터 가져오기

국가 코드와 함께 위도와 경도를 사용하면 뉴렐릭 데이터를 지도에 표시할 수 있습니다.

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

뉴쿨릭에서 기능을 다시 로드하여 작동하는지 테스트하세요.

"Hello"를 전단지 코드로 바꿉니다.

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 like '%${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;}

뉴렐릭 용어

테이블 차트로 맞춤형 앱 만들기

브라우저 데이터 쿼리

새로운 Nerdpack 생성 및 제공

앱 파일을 검토하고 로컬에서 앱을 봅니다.

계정 ID를 하드 코딩하세요.

가져오기 TableChart

단일 행이 있는 테이블 추가

테이블 모양 맞춤설정(선택사항)

해당 테이블에 데이터를 가져옵니다.

텍스트 필드를 사용하여 앱을 대화형으로 만들기

가져오기 TextField

텍스트 필드에 행 추가

텍스트 필드 개체 만들기

지도에서 데이터 가져오기

설치 Leaflet

다음에 대한 webpack 구성 파일을 추가하십시오. Leaflet

다음에서 모듈 가져오기 Leaflet

뉴렐릭에서 추가 모듈 가져오기

지도에 대한 데이터 가져오기

지도 표시 색상 사용자 정의

지도의 기본 중심점 설정

지도에 행 추가

"Hello"를 전단지 코드로 바꿉니다.

시작하기 전에

가져오기 `TableChart`

가져오기 `TextField`

설치 `Leaflet`

다음에 대한 webpack 구성 파일을 추가하십시오. `Leaflet`

다음에서 모듈 가져오기 `Leaflet`