Affichage des pages de cartographie par région dans une application personnalisée

New Relic dispose d'outils puissants et flexibles pour créer des applications personnalisées et les remplir de données. Ce guide vous montre comment créer une application personnalisée et la remplir avec des données de vue de page à l'aide du langage de requête de New Relic (NRQL - prononcé « nurkle »). Ensuite, vous rendez vos données interactives. Et enfin, si vous avez un peu plus de temps et que vous souhaitez installer une bibliothèque React tierce, vous pouvez afficher les données de pages vues que vous collectez sur une carte du monde.

Dans ce guide, vous créez une application pour afficher les données de consultation de page de deux manières :

Dans un tableau
Sur une carte

Veuillez consulter la section Avant de commencer pour vous assurer que vous disposez de tout ce dont vous avez besoin et que vous ne restez pas bloqué à mi-chemin.

Avant de commencer

Afin de tirer le meilleur parti de ce guide, vous devez avoir :

Un compte New Relic, une clé API et l'outil de ligne de commande.
Données de vue de page New Relic Browser pour renseigner l'application. Sans ces données, vous ne pourrez pas terminer ce guide.

Pour ajouter vos données à une carte du monde dans la seconde moitié du guide :

npm, que vous utiliserez au cours de cette section du guide pour installer Leaflet, une bibliothèque JavaScript React tierce utilisée pour créer des cartes interactives. Si vous êtes nouveau sur React et npm, vous pouvez aller ici pour installer Node.js et npm.

Terminologie de New Relic

Voici quelques termes utilisés dans ce guide :

Application New Relic : le produit fini où les données sont rendues dans New Relic. Cela pourrait ressembler à une série de graphiques interactifs ou à une carte du monde.
Nerdpack : la collection standard de New Relic de fichiers JavaScript, JSON, CSS et autres qui contrôlent la fonctionnalité et l'apparence de votre application. Pour plus d'informations, voir la structure du fichier Nerdpack.
Lanceur : Le bouton dans New Relic qui lance votre application.
Nerdlets : composants New Relic React utilisés pour créer votre application. Les trois fichiers par défaut sont index.js, nr1.json et styles.scss, mais vous pouvez personnaliser et ajouter les vôtres.

Créez une application personnalisée avec un graphique de tableau

votre requête données de navigateur

Utilisez le générateur de requêtes pour écrire une requête NRQL afin d’afficher les données de votre page vue, comme suit.

Dans New Relic, sélectionnez interroger vos données (dans le coin supérieur droit). Cela vous met en mode NRQL . Vous utiliserez NRQL pour tester votre requête avant de déposer les données dans votre table.

Copiez et collez cette requête dans un champ de requête vide, puis sélectionnez Run.

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

Si vous disposez de données PageView, cette requête affiche une semaine de pages vues moyennes réparties par pays et limitées à mille éléments. Le tableau sera pleine largeur et utilisera la classe « chart » définie dans le CSS.

Si vous n'avez aucun résultat à ce stade, assurez-vous que votre requête ne comporte aucune erreur. Si votre requête est correcte, il se peut que l'agent Browser ne soit pas installé.

Créer et servir un nouveau Nerdpack

Pour commencer, créez un nouveau Nerdpack et diffusez-le sur New Relic à partir de votre environnement de développement local :

Mettez à jour nr1 et créez un nouveau Nerdpack pour cette application :
bash
```
$nr1 update
$nr1 create --type nerdpack --name pageviews-app
✔  Component created successfully!
   nerdpack pageviews-app is available at "./pageviews-app"
```

Servir le projet à 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!

Examinez les fichiers de votre application et affichez votre application localement

Accédez à votre pageviews-app pour voir comment il est structuré. Il contient un dossier de lancement, où vous pouvez personnaliser la description et l'icône qui seront affichées sur le lanceur de l'application dans New Relic. Il contient également nerdlets, qui contiennent chacun trois fichiers par défaut : index.js, nr1.json et styles.scss. Vous modifierez certains de ces fichiers dans le cadre de ce guide. Pour plus d'informations, voir la structure du fichier Nerdpack.
Maintenant, dans votre navigateur, ouvrez https://one.newrelic.com/?nerdpacks=local, puis cliquez sur Applications pour voir le Nerdpack pageview-apps que vous avez servi.
Lorsque vous sélectionnez le lanceur, vous voyez un message Hello .

Codez en dur votre identifiant de compte

Pour les besoins de cet exercice et pour votre commodité, codez en dur votre identifiant de compte. Dans le répertoire pageview-app-nerdlet , dans le fichier index.js , ajoutez ce code entre les lignes import et export . (Lisez comment trouver votre identifiant de compte ici).

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

Importer le `TableChart`

Pour afficher vos données dans un graphique de tableau, importez le composant TableChart depuis New Relic. Pour ce faire, dans index.js, ajoutez ce code sous 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

Ajouter un tableau avec une seule ligne

Pour ajouter un tableau avec une seule ligne, dans le fichier index.js , remplacez cette ligne par ce code 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

Personnalisez l'apparence de votre table (facultatif)

Vous pouvez utiliser CSS standard pour personnaliser l'apparence de vos composants.

Dans le fichier styles.scss , ajoutez ce CSS. N'hésitez pas à personnaliser ce CSS à votre goût.

.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

Mettez vos données dans cette table

Maintenant que vous avez une table, vous pouvez supprimer un TableChart rempli avec les données de la requête NRQL que vous avez écrite au tout début de ce guide.

Mettez ce code dans le 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

Accédez à New Relic et cliquez sur votre application pour voir vos données dans le tableau. (Vous devrez peut-être à nouveau diffuser votre application sur New Relic.)

Félicitations! Vous avez créé votre application ! Continuez à la rendre interactive et à afficher vos données sur une carte.

Rendez votre application interactive avec un champ de texte

Une fois que vous avez confirmé que les données parviennent à New Relic depuis votre application, vous pouvez commencer à la personnaliser et à la rendre interactive. Pour ce faire, vous ajoutez un champ de texte pour filtrer vos données. Plus tard, vous utilisez une bibliothèque tierce appelée Leaflet pour afficher ces données sur une carte du monde.

Importer le `TextField`

Comme vous l'avez fait avec le composant TableChart , vous devez importer un composantTextField depuis 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

Ajoutez une ligne pour votre champ de texte

Pour ajouter un filtre de champ de texte au-dessus du tableau, placez ce code au-dessus du div TableChart . Le champ de texte aura une valeur par défaut de « US ».

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

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

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

pageview-app-nerdlet/index.js

Construire l'objet champ de texte

Au-dessus de la fonction render() , ajoutez un constructor pour créer l'objet de champ de texte.

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

Au-dessus de return, ajoutez :

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

Ajoutez maintenant countryCode à votre requête de graphique de tableau.

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

Rechargez votre application pour tester le champ de texte.

Affichez vos données sur une carte

Pour créer la carte, vous utilisez npm pour installer Leaflet.

Installation `Leaflet`

Dans votre terminal, tapez :

bash

$npm install --save leaflet react-leaflet

Dans votre fichier nerdlets styles.scss , importez le 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

Pendant que vous êtes dans styles.scss, fixez la largeur et la hauteur de votre carte :

@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

Ajoutez un fichier de configuration webpack pour `Leaflet`

Ajoutez un fichier de configuration webpack .extended-webpackrc.js au dossier de niveau supérieur de votre nerdpack. Cela prend en charge votre utilisation des données d'informations de mosaïque de cartes 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

Importer des modules depuis `Leaflet`

Dans index.js, importez les modules depuis 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

Importer des modules supplémentaires depuis New Relic

Vous avez besoin de plusieurs modules supplémentaires de New Relic pour que la carte Leaflet fonctionne bien. Importez-les avec ce code :

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 vous permet de faire plusieurs requêtes NRQL à la fois et c'est ce qui remplira la carte avec des données. Spinner ajoute un spinner de chargement. Button vous donne des composants de bouton. BlockText vous donne des composants de texte en bloc.

Obtenir des données pour la carte

En utilisant la latitude et la longitude avec les codes de pays, vous pouvez placer les données New Relic sur une carte.

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

Personnaliser les couleurs des marqueurs de carte

Au-dessus de la fonction mapData , ajoutez ce code pour personnaliser les couleurs des marqueurs de carte.

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

N'hésitez pas à modifier les valeurs du code couleur HTML à votre goût. Dans cet exemple, #11A600 est vert, #FFD966 est en quelque sorte jaune et #BF0016 est rouge.

Définissez le point central par défaut de votre carte

Définissez un point central par défaut pour votre carte en utilisant la latitude et la 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

Ajoutez une ligne pour votre carte

Entre la ligne du champ de texte et la ligne du graphique du tableau, insérez une nouvelle ligne pour le contenu de la carte en utilisant 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

Rechargez votre application dans New Relic pour tester qu'elle fonctionne.

Remplacez « Bonjour » par le code du Leaflet

Remplacez return "Hello"; par :

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

Ce code crée une carte du monde centrée sur la latitude et la longitude que vous avez choisies en utilisant les données OpenStreetMap et les couleurs de votre marqueur.

Rechargez votre application pour voir les données de pages vues sur la carte !

Cette traduction automatique est fournie pour votre commodité.

Affichage des pages de cartographie par région dans une application personnalisée

Avant de commencer .css-21sua1{background:none;border:none;width:0;padding:0;}

Terminologie de New Relic

Créez une application personnalisée avec un graphique de tableau

votre requête données de navigateur

Créer et servir un nouveau Nerdpack

Examinez les fichiers de votre application et affichez votre application localement

Codez en dur votre identifiant de compte

Importer le TableChart

Ajouter un tableau avec une seule ligne

Personnalisez l'apparence de votre table (facultatif)

Mettez vos données dans cette table

Rendez votre application interactive avec un champ de texte

Importer le TextField

Ajoutez une ligne pour votre champ de texte

Construire l'objet champ de texte

Affichez vos données sur une carte

Installation Leaflet

Ajoutez un fichier de configuration webpack pour Leaflet

Importer des modules depuis Leaflet

Importer des modules supplémentaires depuis New Relic

Obtenir des données pour la carte

Personnaliser les couleurs des marqueurs de carte

Définissez le point central par défaut de votre carte

Ajoutez une ligne pour votre carte

Remplacez « Bonjour » par le code du Leaflet

Avant de commencer

Importer le `TableChart`

Importer le `TextField`

Installation `Leaflet`

Ajoutez un fichier de configuration webpack pour `Leaflet`

Importer des modules depuis `Leaflet`