Mapear vistas de páginas por región en una aplicación personalizada

New Relic tiene herramientas poderosas y flexibles para crear aplicaciones personalizadas y completarlas con datos. Esta guía le muestra cómo crear una aplicación personalizada y completarla con datos de vistas de página empleando el lenguaje de consulta de New Relic (NRQL, pronunciado 'nurkle'). Luego haces que tus datos sean interactivos. Y por último, si tiene un poco más de tiempo y desea instalar una biblioteca React de terceros, puede mostrar los datos de vista de página que recopila en un mapa del mundo.

En esta guía, creará una aplicación para mostrar datos de vistas de página de dos maneras:

en una mesa
En un mapa

Revise la sección Before you begin para cerciorar de tener todo lo que necesita y no quedar atascado a la mitad.

Antes de que empieces

Para aprovechar al máximo esta guía, debe tener:

Una cuenta New Relic , clave de API y la herramienta de línea de comando.
New Relic Browser para completar la aplicación. Sin estos datos, no podrás completar esta guía.

Para agregar sus datos a un mapa mundial en la segunda mitad de la guía:

npm, que usará durante esta sección de la guía para instalar Leaflet, una biblioteca JavaScript React de terceros empleada para crear mapas interactivos. Si eres nuevo en React y npm, puedes ir aquí para instalar Node.js y npm.

Terminología New Relic

Los siguientes son algunos términos empleados en esta guía:

Aplicación New Relic : el producto terminado donde los datos se representan en New Relic. Esto podría parecer a un serial de gráficos interactivos o un mapa del mundo.
Nerdpack: colección estándar de JavaScript, JSON, CSS y otros archivos de New Relic que controlan la funcionalidad y el aspecto de su aplicación. Para obtener más información, consulte Estructura de archivos de Nerdpack.
Pícher: El botón en New Relic que lanza tu aplicación.
Nerdlets: New Relic React empleados para crear su aplicación. Los tres archivos predeterminados son index.js, nr1.json y styles.scss, pero puedes personalizarlos y agregar los tuyos propios.

Cree una aplicación personalizada con un gráfico de tabla

Consulta tus datos del browser

Emplee el generador de consultas para escribir una consulta NRQL para ver los datos de visualización de su página, de la siguiente manera.

En New Relic, selecciona Query your data (en la esquina superior derecha). Eso te pone en modo NRQL . Empleará NRQL para probar su consulta antes de colocar los datos en su tabla.

Copie y pegue esta consulta en un campo de consulta claro y luego seleccione Run.

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

Si tiene datos de PageView, esta consulta muestra una semana de visitas promedio a la página desglosadas por país y limitadas a mil elementos. La tabla tendrá todo el ancho y empleará la clase "gráfico" definida en el CSS.

Si no tiene ningún resultado en este momento, cerciorar de que su consulta no tenga ningún error. Si tu consulta es correcta es posible que no tengas instalado el agente del Browser .

Crear y servir un nuevo Nerdpack

Para comenzar, cree un nuevo Nerdpack y envíelo a New Relic desde su entorno de desarrollo local:

Actualiza nr1 y crea un nuevo Nerdpack para esta aplicación:
bash
```
$nr1 update
$nr1 create --type nerdpack --name pageviews-app
✔  Component created successfully!
   nerdpack pageviews-app is available at "./pageviews-app"
```

Entregue el proyecto hasta 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 los archivos de su aplicación y vea su aplicación localmente

Navegue hasta su pageviews-app para ver cómo está estructurado. Contiene una carpeta de inicio, donde puede personalizar la descripción y el ícono que se mostrarán en el iniciador de la aplicación en New Relic. También contiene nerdlets, cada uno de los cuales contiene tres archivos predeterminados: index.js, nr1.json y styles.scss. Editarás algunos de estos archivos como parte de esta guía. Para obtener más información, consulte Estructura de archivos de Nerdpack.
Ahora en tu browser, abre https://one.newrelic.com/?nerdpacks=local y luego haz clic en Apps para ver el pageview-apps Nerdpack que presentaste.
Cuando selecciona el iniciador, ve un mensaje Hello .

Codifique su ID de cuenta

Para los fines de este ejercicio y para su comodidad, codifique su ID de cuenta. En el directorio pageview-app-nerdlet , en el archivo index.js , agregue este código entre las líneas import y export . (Lea cómo encontrar su ID de cuenta aquí).

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

Importar el componente `TableChart`

Para mostrar sus datos en un gráfico de tabla, importe el componente TableChart de New Relic. Para hacerlo, en index.js, agregue este código debajo de 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

Agregar una tabla con una sola fila

Para agregar una tabla con una sola fila, en el archivo index.js , reemplace esta línea con 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

Personaliza el aspecto de tu mesa (opcional)

Puede emplear CSS estándar para personalizar el aspecto de sus componentes.

En el archivo styles.scss , agregue este CSS. Siéntete libre de personalizar este CSS a tu gusto.

.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

Obtenga sus datos en esa tabla

Ahora que tiene una tabla, puede colocar un TableChart lleno de datos de la consulta NRQL que escribió al principio de esta guía.

Coloque este código en el 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

Vaya a New Relic y haga clic en su aplicación para ver sus datos en la tabla. (Es posible que tengas que enviar tu aplicación a New Relic nuevamente).

¡Felicidades! ¡Hiciste tu aplicación! Continúe para hacerlo interactivo y mostrar sus datos en un mapa.

Haga que su aplicación sea interactiva con un campo de texto

Una vez que confirmes que los datos llegan a New Relic desde tu aplicación, puedes comenzar a personalizarlos y hacerlos interactivos. Para hacer esto, agrega un campo de texto para filtrar sus datos. Posteriormente, emplea una biblioteca de terceros llamada Leaflet para mostrar esos datos en un mapa mundial.

Importar el componente `TextField`

Como hizo con el componente TableChart , necesita importar un componenteTextField de 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

Agregue una fila para su campo de texto

Para agregar un filtro de campo de texto encima de la tabla, coloque este código encima del div TableChart . El campo de texto tendrá un valor predeterminado de "EE.UU."

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

Construir el objeto de campo de texto

Encima de la función render() , agregue un constructor para crear el 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

Arriba de return, agregue:

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

Ahora agregue countryCode a su consulta de gráfico de tabla.

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

Vuelve a cargar tu aplicación para probar el campo de texto.

Obtenga sus datos en un mapa

Para crear el mapa, usa npm para instalar Leaflet.

Instalar `Leaflet`

En tu terminal escribe:

bash

$npm install --save leaflet react-leaflet

En su archivo nerdlets styles.scss , importe el 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

Mientras estés en styles.scss, corrige el ancho y el alto de tu 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

Agregue un archivo de configuración de paquete sitio web para `Leaflet`

Agregue un archivo de configuración del paquete sitio web .extended-webpackrc.js a la carpeta de nivel superior de su nerdpack. Esto admite el uso de datos de información de mosaico de mapas 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 desde `Leaflet`

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

Importar módulos adicionales desde New Relic

Necesita varios módulos más de New Relic para que el mapa Leaflet funcione bien. Importarlos con 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 le permite realizar múltiples consultas NRQL a la vez y es lo que llenará el mapa con datos. Spinner agrega un control giratorio de carga. Button te proporciona los componentes del botón. BlockText te proporciona componentes de texto en bloque.

Obtener datos para el mapa.

Usando latitud y longitud con códigos de país, puede colocar datos de New Relic en un 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

Personaliza los colores de los marcadores del mapa.

Encima de la función mapData , agregue este código para personalizar los colores del marcador del 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

Sentir libre de cambiar los valores del código de color HTML a su gusto. En este ejemplo, #11A600 es verde, #FFD966 es una especie de amarillo y #BF0016 es rojo.

Establece el punto central predeterminado de tu mapa

Establezca un punto central predeterminado para su mapa usando latitud y longitud.

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

Agrega una fila para tu mapa

Entre la fila del campo de texto y la fila del gráfico de la tabla, inserte una nueva fila para el contenido del 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

Vuelva a cargar su aplicación en New Relic para probar que funciona.

Reemplace "Hola" con el código del folleto

Reemplace return "Hello"; con:

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 crea un mapa mundial centrado en la latitud y longitud que usted eligió usando los datos OpenStreetMap y los colores de su marcador.

¡Recarga tu aplicación para ver los datos de páginas vistas en el mapa!

Te ofrecemos esta traducción automática para facilitar la lectura.

Mapear vistas de páginas por región en una aplicación personalizada

Antes de que empieces .css-21sua1{background:none;border:none;width:0;padding:0;}

Terminología New Relic

Cree una aplicación personalizada con un gráfico de tabla

Consulta tus datos del browser

Crear y servir un nuevo Nerdpack

Revise los archivos de su aplicación y vea su aplicación localmente

Codifique su ID de cuenta

Importar el componente TableChart

Agregar una tabla con una sola fila

Personaliza el aspecto de tu mesa (opcional)

Obtenga sus datos en esa tabla

Haga que su aplicación sea interactiva con un campo de texto

Importar el componente TextField

Agregue una fila para su campo de texto

Construir el objeto de campo de texto

Obtenga sus datos en un mapa

Instalar Leaflet

Agregue un archivo de configuración de paquete sitio web para Leaflet

Importar módulos desde Leaflet

Importar módulos adicionales desde New Relic

Obtener datos para el mapa.

Personaliza los colores de los marcadores del mapa.

Establece el punto central predeterminado de tu mapa

Agrega una fila para tu mapa

Reemplace "Hola" con el código del folleto

Antes de que empieces

Importar el componente `TableChart`

Importar el componente `TextField`

Instalar `Leaflet`

Agregue un archivo de configuración de paquete sitio web para `Leaflet`

Importar módulos desde `Leaflet`