Mapeie visualizações de páginas por região em um aplicativo personalizado

New Relic possui ferramentas poderosas e flexíveis para criar aplicativos personalizados e preenchê-los com dados. Este guia mostra como criar um aplicativo personalizado e preenchê-lo com dados de visualização de página usando a linguagem de consulta da New Relic (NRQL - pronuncia-se 'nurkle'). Então você torna seus dados interativos. E por último, se você tiver um pouco mais de tempo e quiser instalar uma biblioteca React de terceiros, poderá exibir os dados de visualização de página coletados em um mapa-múndi.

Neste guia, você cria um aplicativo para exibir dados de visualização de página de duas maneiras:

Em uma mesa
Em um mapa

Revise a seção Before you begin para ter certeza de que tem tudo o que precisa e não fique preso no meio do caminho.

Antes de você começar

Para aproveitar ao máximo este guia, você deve ter:

Uma conta New Relic, chave de API e ferramenta de linha de comando.
New Relic Browser para preencher o aplicativo. Sem esses dados, você não conseguirá concluir este guia.

Para adicionar seus dados a um mapa mundial na segunda metade do guia:

npm, que você usará durante esta seção do guia para instalar Leaflet, uma biblioteca JavaScript React de terceiros usada para construir mapas interativos. Se você é novo no React e no npm, pode acessar aqui para instalar o Node.js e o npm.

Terminologia New Relic

A seguir estão alguns termos usados neste guia:

Aplicativo New Relic : O produto final onde os dados são renderizados no New Relic. Pode parecer uma série de gráficos interativos ou um mapa do mundo.
Nerdpack: coleção padrão de JavaScript, JSON, CSS e outros arquivos da New Relic que controlam a funcionalidade e a aparência do seu aplicativo. Para obter mais informações, consulte Estrutura de arquivos Nerdpack.
Launcher: O botão no New Relic que inicia seu aplicativo.
Nerdlets: New Relic React usados para construir seu aplicativo. Os três arquivos padrão são index.js, nr1.json e styles.scss, mas você pode personalizar e adicionar seus próprios.

Crie um aplicativo personalizado com um gráfico de tabela

Consulte seus dados do browser

Use o criador de consulta para escrever uma consulta NRQL para ver os dados de visualização da sua página, como segue.

No New Relic, selecione Query your data (no canto superior direito). Isso coloca você no modo NRQL . Você usará NRQL para testar sua consulta antes de colocar os dados em sua tabela.

Copie e cole esta consulta em um campo de consulta limpo e selecione Run.

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

Se você tiver dados de PageView, esta consulta mostrará uma semana de média de visualizações de página divididas por país e limitada a mil itens. A tabela terá largura total e usará a classe "gráfico" definida no CSS.

Se você não tiver nenhum resultado neste momento, certifique-se de que sua consulta não contenha erros. Se sua consulta estiver correta, talvez você não tenha o agente do Browser instalado.

Crie e sirva um novo Nerdpack

Para começar, crie um novo Nerdpack e sirva-o no New Relic a partir do seu ambiente de desenvolvimento local:

Atualize nr1 e crie um novo Nerdpack para este aplicativo:
bash
```
$nr1 update
$nr1 create --type nerdpack --name pageviews-app
✔  Component created successfully!
   nerdpack pageviews-app is available at "./pageviews-app"
```

Servir o projeto até a 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!

Revise os arquivos do seu aplicativo e visualize-o localmente

Navegue até pageviews-app para ver como ele está estruturado. Ele contém uma pasta inicializadora, onde você pode personalizar a descrição e o ícone que será exibido no inicializador do aplicativo no New Relic. Ele também contém nerdlets, cada um contendo três arquivos padrão: index.js, nr1.json e styles.scss. Você editará alguns desses arquivos como parte deste guia. Para obter mais informações, consulte Estrutura de arquivos Nerdpack.
Agora, em seu navegador, abra https://one.newrelic.com/?nerdpacks=local e clique em Apps para ver o pageview-apps Nerdpack que você disponibilizou.
Ao selecionar o iniciador, você verá uma mensagem Hello .

Codifique o ID da sua conta

Para os fins deste exercício e para sua conveniência, codifique o ID da sua conta. No diretório pageview-app-nerdlet , no arquivo index.js , adicione este código entre as linhas import e export . (Leia sobre como encontrar o ID da sua conta aqui).

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

Importe o componente `TableChart`

Para mostrar seus dados em um gráfico de tabela, importe o componente TableChart do New Relic. Para fazer isso, em index.js, adicione este código em 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

Adicione uma tabela com uma única linha

Para adicionar uma tabela com uma única linha, no arquivo index.js , substitua esta linha por este código 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

Personalize a aparência da sua mesa (opcional)

Você pode usar CSS padrão para personalizar a aparência dos seus componentes.

No arquivo styles.scss , adicione este CSS. Sinta-se à vontade para personalizar este CSS ao seu gosto.

.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

Coloque seus dados nessa tabela

Agora que você tem uma tabela, pode descartar um TableChart preenchido com dados da consulta NRQL que você escreveu no início deste guia.

Coloque este código na div row .

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

Vá para New Relic e clique no seu aplicativo para ver seus dados na tabela. (Talvez seja necessário veicular seu aplicativo no New Relic novamente.)

Parabéns! Você fez seu aplicativo! Continue para torná-lo interativo e mostrar seus dados em um mapa.

Torne seu aplicativo interativo com um campo de texto

Depois de confirmar que os dados estão chegando ao New Relic a partir do seu aplicativo, você pode começar a personalizá-los e torná-los interativos. Para fazer isso, você adiciona um campo de texto para filtrar seus dados. Mais tarde, você usará uma biblioteca de terceiros chamada Leaflet para mostrar esses dados em um mapa mundial.

Importe o componente `TextField`

Assim como fez com o componente TableChart , você precisa importar um componenteTextField do New Relic.

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

Adicione uma linha ao seu campo de texto

Para adicionar um filtro de campo de texto acima da tabela, coloque este código acima da div TableChart . O campo de texto terá um valor padrão de “EUA”.

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

Construa o objeto de campo de texto

Acima da função render() , adicione um constructor para criar o objeto de campo de texto.

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

Acima de return, adicione:

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

Agora adicione countryCode à sua consulta de gráfico de tabela.

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

Recarregue seu aplicativo para testar o campo de texto.

Coloque seus dados em um mapa

Para criar o mapa, você usa npm para instalar Leaflet.

Instalar `Leaflet`

No seu terminal, digite:

bash

$npm install --save leaflet react-leaflet

No arquivo styles.scss dos nerdlets, importe o CSS Leaflet :

@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

Enquanto estiver em styles.scss, corrija a largura e a altura do seu mapa:

@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

Adicione um arquivo de configuração do webpack para `Leaflet`

Adicione um arquivo de configuração do webpack .extended-webpackrc.js à pasta de nível superior do seu nerdpack. Isso suporta o uso de dados de informações de blocos de mapa de Leaflet.

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

.extended-webpackrc.js

Importar módulos de `Leaflet`

Em index.js, importe módulos de 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

Importe módulos adicionais do New Relic

Você precisa de vários outros módulos do New Relic para fazer o mapa Leaflet funcionar bem. Importe-os com este código:

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 permite fazer várias consultas NRQL de uma só vez e é o que preencherá o mapa com dados. Spinner adiciona um controle giratório de carregamento. Button fornece componentes de botão. BlockText fornece componentes de texto em bloco.

Obtenha dados para o mapa

Usando latitude e longitude com códigos de país, você pode colocar dados do New Relic em um mapa.

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

Personalize as cores dos marcadores do mapa

Acima da função mapData , adicione este código para personalizar as cores dos marcadores do mapa.

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

Sinta-se à vontade para alterar os valores do código de cores HTML de acordo com sua preferência. Neste exemplo, #11A600 é verde, #FFD966 é meio amarelo e #BF0016 é vermelho.

Defina o ponto central padrão do seu mapa

Defina um ponto central padrão para o seu mapa usando latitude e longitude.

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

Adicione uma linha ao seu mapa

Entre a linha do campo de texto e a linha do gráfico da tabela, insira uma nova linha para o conteúdo do mapa usando 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

Recarregue seu aplicativo no New Relic para testar se ele funciona.

Substitua "Olá" pelo código do folheto

Substitua return "Hello"; por:

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

Este código cria um mapa-múndi centrado na latitude e longitude que você escolheu usando os dados OpenStreetMap e as cores do seu marcador.

Atualize seu aplicativo para ver os dados de visualização de página no mapa!

Esta tradução de máquina é fornecida para sua comodidade.

Mapeie visualizações de páginas por região em um aplicativo personalizado

Antes de você começar .css-21sua1{background:none;border:none;width:0;padding:0;}

Terminologia New Relic

Crie um aplicativo personalizado com um gráfico de tabela

Consulte seus dados do browser

Crie e sirva um novo Nerdpack

Revise os arquivos do seu aplicativo e visualize-o localmente

Codifique o ID da sua conta

Importe o componente TableChart

Adicione uma tabela com uma única linha

Personalize a aparência da sua mesa (opcional)

Coloque seus dados nessa tabela

Torne seu aplicativo interativo com um campo de texto

Importe o componente TextField

Adicione uma linha ao seu campo de texto

Construa o objeto de campo de texto

Coloque seus dados em um mapa

Instalar Leaflet

Adicione um arquivo de configuração do webpack para Leaflet

Importar módulos de Leaflet

Importe módulos adicionais do New Relic

Obtenha dados para o mapa

Personalize as cores dos marcadores do mapa

Defina o ponto central padrão do seu mapa

Adicione uma linha ao seu mapa

Substitua "Olá" pelo código do folheto

Antes de você começar

Importe o componente `TableChart`

Importe o componente `TextField`

Instalar `Leaflet`

Adicione um arquivo de configuração do webpack para `Leaflet`

Importar módulos de `Leaflet`