• EnglishEspañol日本語한국어Português
  • Inicia sesiónComenzar ahora

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

En caso de que haya discrepancias entre la versión en inglés y la versión traducida, se entiende que prevalece la versión en inglés. Visita esta página para obtener más información.

Crea una propuesta

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:

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: la colección estándar de New Relic de JavaScript, JSON, CSS y otros archivos 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 navegador .

Crear y servir un nuevo Nerdpack

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

  1. 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"
  2. 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

  1. Navega hasta tu pageviews-app para ver cómo está estructurado. Contiene una carpeta de inicio, donde puedes personalizar la descripción y el ícono que se mostrará 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.

  2. 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 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 TextField

Al igual que hizo con el componente TableChart , debe importar un componenteTextField desde 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 &quot;EE.UU.&quot;

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!

Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.