オープンソースのNerdpacksをカスタマイズする

Instant の可用性カタログ内のほとんどの Nerdpack はオープンです。つまり、リポジトリを複製またはフォークし、特定のニーズに合わせてカスタマイズし、自分のアカウントで使用するために再公開することができます。このガイドでは、視覚化を使用して Nerdpack をカスタマイズし、アカウントに公開します。ただし、Nerdpack をカスタマイズするには、同じ手順に従います。

あなたが始める前に

まだ行っていない場合:

New Relicアカウントにサインアップ
Node.jsをインストールする
CLI をインストールして構成するには、 nr1クイックスタートの最初の 4 つの手順を完了してください。

ナードパックを見る

Victory Charts Visualizations Nerdpack をサブスクライブし、New Relic でCircular progress bar [円形の進行状況バーの]視覚化を開きます。

one.newrelic.com > All capabilities > Appsに移動します。

カタログ内のVictory Charts Visualizations Nerdpack をクリックします。

アカウントにVictory Charts Visualizationsを追加します。

one.newrelic.com > All Capabilities > Appsに移動し、 Custom visualizationsを開きます。

Custom visualizations [カスタム視覚化]の視覚化リストから、 Victory Charts Visualizations Nerdpack の一部としてインストールしたCircular progress bar [円形進行状況バー]をクリックします。

Configure visualization properties [視覚化プロパティの構成]でアカウントを選択し、NRQL クエリを入力します。

クエリに基づいたパーセンテージを示す円形のグラフが表示されます。

ヒント

進行状況バーの視覚化を構成する方法については、ドキュメントをお読みください。

この視覚化についていくつか注意すべき点があります。

チャートの色は制御できません
チャートのセクションは角が丸い
このチュートリアルでは、次の 2 つの点を除いて、このグラフが希望どおりにデータを表していると想定します。直線を使用し、グラフの色を手動で制御します。現実世界では、このような Nerdpacks に遭遇することがあります。提供される内容は気に入っているものの、微調整できればもっと気に入るでしょう。まあ、それらを微調整することができます。次に、その方法を学びます。

購読しているバージョンではなく、調整されたバージョンのVictory Charts Visualizations Nerdpack を使用する予定なので、今すぐ当社のバージョンの購読を解除できます。

Nerdpack をクローンする

Nerdpack のカタログエントリからソースコードリポジトリを見つけて、ローカルマシンにクローンします。

UIで、 + Integrations & Agentsに移動します。

カタログ内のVictory Charts Visualizations Nerdpack をクリックします。

Nerdpack のソースコードリポジトリへ移動します。

カタログ内のすべてのオープンソース Nerdpack には、カタログ情報内にソースコードへのリンクがあります。

リポジトリをクローンします:

bash

$nr1 nerdpack:clone -r https://github.com/newrelic/nr1-victory-visualizations.git

これで、 Victory Charts Visualizations Nerdpack のローカルバージョンができました。リポジトリをコピーする際に、 git cloneではなくnr1 nerdpack:cloneを使用していることに注意してください。 nr1 nerdpack:cloneには、Instant of servability パブリックカタログ内の元の Nerdpack とローカルコピーを区別するのに役立つ組み込み機能が用意されています。具体的には、新しい Nerdpack UUID が生成されるので、自分でこれを行う必要はありません。

bash

Re-generating UUID...
Committing new UUID...

nr1-victory-visualizationsディレクトリに移動して git ログを見ると、新しいコミットが表示されます。

bash

$git log -1 -p
commit e356bb5b10c3ecc8f93bae66d5739e1676ee21ef (HEAD -> main)
Author: New Relic CLI <nr1@newrelic.com>
Date:   Tue May 25 14:29:37 2021 -0400
    "chore: Auto-generated UUID"
diff --git a/nr1.json b/nr1.json
index 054de52..7a107b5 100644
--- a/nr1.json
+++ b/nr1.json
@@ -1,6 +1,6 @@
 {
   "schemaType": "NERDPACK",
-  "id": "cf5f13d9-815f-4907-a21d-83d02fa2a4fb",
+  "id": "ab123c45-678d-9012-efg3-45hi6jkl7890",
   "displayName": "Victory charts visualizations",
   "description": "Visualizations built on top of Victory charts"
 }

nr1-victory-visualizations/nr1.jsonで、Nerdpack のdisplayNameを変更します:

{
  "schemaType": "NERDPACK",
  "id": "269055dd-67e8-4713-8da3-bff01c6a8687",
  "displayName": "My custom Victory Charts visualizations",
  "description": "Visualizations built on top of Victory charts"
}

nr1-victory-visualizations/nr1.json

これで、カスタム Nerdpack を提供または公開するときに、オリジナルと簡単に区別できるようになります。

Nerdpackをカスタマイズする

Circular progress bar [円形の進行状況バーの]視覚化を微調整して、直線のエッジとカスタマイズ可能な色を使用します。

Circular progress bar [円形の進行状況バーは]、いくつかの定義済みフィールドを持つVictoryPieをレンダリングします。調整するフィールドは次のとおりです。

ローカルの Nerdpack でnr1-victory-visualizations/visualizations/circular-progress-bar/nr1.jsonを開きます。

nr1.json 円形プログレスバー視覚化のメタデータファイルです。このファイルを使用して、 VictoryPieのcolorScaleフィールドに対応する構成可能なcolorScaleオプションを追加します。

collectionstringグラフの色をカスタマイズするには、のフィールドのうち個を追加します。

{
  "schemaType": "VISUALIZATION",
  "id": "circular-progress-bar",
  "displayName": "Circular progress bar",
  "description": "",
  "configuration": [
    {
      "name": "nrqlQueries",
      "title": "NRQL Queries",
      "type": "collection",
      "items": [
        {
          "name": "accountId",
          "title": "Account ID",
          "description": "Account ID to be associated with the query",
          "type": "account-id"
        },
        {
          "name": "query",
          "title": "Query",
          "description": "NRQL query for visualization",
          "type": "nrql"
        }
      ]
    },
    {
      "name": "thresholds",
      "title": "Thresholds",
      "type": "namespace",
      "items": [
        {
          "name": "criticalThreshold",
          "title": "Critical threshold",
          "description": "Value at which progress is displayed as critical",
          "type": "number"
        },
        {
          "name": "highValuesAreSuccess",
          "title": "Above threshold is success",
          "description": "If toggled on, values above the threshold display as successful. Otherwise, values at or above the threshold display as critical.",
          "type": "boolean"
        }
      ]
    },
    {
      "name": "colors",
      "title": "Colors",
      "type": "collection",
      "items": [
        {
          "name": "segmentColor",
          "title": "Segment color",
          "description": "The color of a bar segment.",
          "type": "string"
        }
      ]
    }
  ]
}

nr1.json

この更新で使用するVictoryPieフィールドはcolorScaleと呼ばれます。色の配列を受け入れ、各色をプログレスバーのセグメントに適用します。したがって、視覚化の設定オプションで、チャートに色を渡すために使用する文字列のコレクションを指定しました。

同じ視覚化ディレクトリで、 index.jsを開きます。

render()で、 VictoryPieコンポーネントのcolorScaleプロパティを設定します。

import React from 'react';
import PropTypes from 'prop-types';
import { VictoryPie, VictoryAnimation, VictoryLabel } from 'victory';
import {
  Card,
  CardBody,
  HeadingText,
  NrqlQuery,
  Spinner,
  AutoSizer,
} from 'nr1';
import NrqlQueryError from '../../src/nrql-query-error';
import { baseLabelStyles } from '../../src/theme';
import { getUniqueAggregatesAndFacets } from '../../src/utils/nrql-validation-helper';
import Colors from '../../src/colors';

const BOUNDS = {
  X: 400,
  Y: 400,
};

const LABEL_SIZE = 24;
const LABEL_PADDING = 10;
const CHART_WIDTH = BOUNDS.X;
const CHART_HEIGHT = BOUNDS.Y - LABEL_SIZE - LABEL_PADDING;

export default class CircularProgressBar extends React.Component {
  // Custom props you wish to be configurable in the UI must also be defined in
  // the nr1.json file for the visualization. See docs for more details.
  static propTypes = {
    /**
     * An array of objects consisting of a nrql `query` and `accountId`.
     * This should be a standard prop for any NRQL based visualizations.
     */
    nrqlQueries: PropTypes.arrayOf(
      PropTypes.shape({
        accountId: PropTypes.number,
        query: PropTypes.string,
      })
    ),

    /**
     * Configuration that determines what values to display as critical or
     * successful.
     */
    thresholds: PropTypes.shape({
      criticalThreshold: PropTypes.number,
      highValuesAreSuccess: PropTypes.bool,
    }),
  };

  /**
   * Restructure the data for a aggregate NRQL query with no TIMESERIES and no
   * FACET into a for our visualization works well with.
   */
  transformData = (data) => {
    const {
      data: [series],
      metadata: { color: colorFromData, name: label },
    } = data[0];

    const percent = series.y * 100;
    const color = this.getColor(percent, colorFromData);

    return {
      percent,
      label,
      series: [
        { x: 'progress', y: percent, color },
        { x: 'remainder', y: 100 - percent, color: 'transparent' },
      ],
    };
  };

  nrqlInputIsValid = (data) => {
    const { data: seriesEntries } = data[0];
    const { uniqueAggregates, uniqueFacets } = getUniqueAggregatesAndFacets(
      data
    );
    const isNonTimeseries = seriesEntries.length === 1;

    return (
      uniqueAggregates.size === 1 && uniqueFacets.size === 0 && isNonTimeseries
    );
  };

  getColor = (value, colorFromData) => {
    const { red6: red, green6: green } = Colors.base;
    const {
      thresholds: { criticalThreshold, highValuesAreSuccess },
    } = this.props;

    const threshold = parseFloat(criticalThreshold);

    if (isNaN(threshold)) {
      return colorFromData;
    }

    if (highValuesAreSuccess) {
      return value > threshold ? green : red;
    }

    return value < threshold ? green : red;
  };

  render() {
    const { nrqlQueries, colors } = this.props;
    const colorScale = Array.from(colors, (x) => x.segmentColor);

    const nrqlQueryPropsAvailable =
      nrqlQueries &&
      nrqlQueries[0] &&
      nrqlQueries[0].accountId &&
      nrqlQueries[0].query;

    if (!nrqlQueryPropsAvailable) {
      return <EmptyState />;
    }

    return (
      <AutoSizer>
        {({ width, height }) => (
          <NrqlQuery
            query={nrqlQueries[0].query}
            accountId={parseInt(nrqlQueries[0].accountId)}
            pollInterval={NrqlQuery.AUTO_POLL_INTERVAL}
          >
            {({ data, loading, error }) => {
              if (loading) {
                return <Spinner />;
              }

              if (error) {
                return (
                  <NrqlQueryError
                    title="NRQL Syntax Error"
                    description={error.message}
                  />
                );
              }

              if (!this.nrqlInputIsValid(data)) {
                return (
                  <NrqlQueryError
                    title="Unsupported NRQL query"
                    description="The provided NRQL query is not supported by this visualization. Please make sure to have exactly 1 aggregate function in the SELECT clause and no FACET or TIMESERIES clauses."
                  />
                );
              }

              const { percent, label, series } = this.transformData(data);

              return (
                <svg
                  viewBox={`0 0 ${BOUNDS.X} ${BOUNDS.Y}`}
                  width={width}
                  height={height}
                  className="CircularProgressBar"
                >
                  <VictoryPie
                    standalone={false}
                    animate={{ duration: 1000 }}
                    data={series}
                    width={CHART_WIDTH}
                    height={CHART_HEIGHT}
                    padding={10}
                    innerRadius={135}
                    cornerRadius={25}
                    labels={() => null}
                    colorScale={colorScale}
                  />
                  <VictoryAnimation duration={1000} data={percent}>
                    {(percent) => (
                      <VictoryLabel
                        textAnchor="middle"
                        verticalAnchor="middle"
                        x={CHART_WIDTH / 2}
                        y={CHART_HEIGHT / 2}
                        text={`${Math.round(percent)}%`}
                        style={{ ...baseLabelStyles, fontSize: 45 }}
                      />
                    )}
                  </VictoryAnimation>
                  <VictoryLabel
                    text={label}
                    lineHeight={1}
                    x={CHART_WIDTH / 2}
                    y={BOUNDS.Y - LABEL_SIZE}
                    textAnchor="middle"
                    style={{ ...baseLabelStyles, fontSize: LABEL_SIZE }}
                  />
                </svg>
              );
            }}
          </NrqlQuery>
        )}
      </AutoSizer>
    );
  }
}

const EmptyState = () => (
  <Card className="EmptyState">
    <CardBody className="EmptyState-cardBody">
      <HeadingText
        spacingType={[HeadingText.SPACING_TYPE.LARGE]}
        type={HeadingText.TYPE.HEADING_3}
      >
        Please provide a NRQL query & account ID pair
      </HeadingText>
      <HeadingText
        spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
        type={HeadingText.TYPE.HEADING_4}
      >
        This Visualization supports NRQL queries with a single SELECT clause
        returning a percentage value (0 to 100 rather than 0 to 1). For example:
      </HeadingText>
      <code>
        {'FROM Transaction SELECT percentage(count(*), WHERE duration < 0.1)'}
      </code>
    </CardBody>
  </Card>
);

index.js

まず、 this.props.colorsのsegmentColor値の配列であるcolorScaleという新しい定数を作成しました。次に、 VictoryPieコンポーネントのcolorScaleプロパティを設定します。最後に、色がcolorScaleによって制御されるようになったため、 VictoryPie.styleを削除しました。

Nerdpack のルートディレクトリから、ローカルサーバーを実行します。

bash

$nr1 nerdpack:serve

サーバーが起動したら、ローカルcircular-progress-barの URL を見つけます。

bash

Visualizations:
 ⁎  circular-progress-bar https://one.nr/04ERPALBYjW
 ⁎  range-chart https://one.nr/0oqQaxezJj1
 ⁎  stacked-bar-chart https://one.nr/0PLRElq3bwa

ローカルで提供されている視覚化を開き、アカウント、データクエリ、セグメントの色を使用してグラフを構成します。

ヒント

2 番目の色を追加するには、 Colors [色]プロパティの右上にある+をクリックします。

セグメントが 2 つあるため、 2 つの色を追加します。最初の色は進捗セクション用です。 2 番目の色は残りのパーセンテージを表します。

index.jsで、 VictoryPieコンポーネントのcornerRadiusプロパティを削除します。

import React from 'react';
import PropTypes from 'prop-types';
import { VictoryPie, VictoryAnimation, VictoryLabel } from 'victory';
import {
  Card,
  CardBody,
  HeadingText,
  NrqlQuery,
  Spinner,
  AutoSizer,
} from 'nr1';
import NrqlQueryError from '../../src/nrql-query-error';
import { baseLabelStyles } from '../../src/theme';
import { getUniqueAggregatesAndFacets } from '../../src/utils/nrql-validation-helper';
import Colors from '../../src/colors';

const BOUNDS = {
  X: 400,
  Y: 400,
};

const LABEL_SIZE = 24;
const LABEL_PADDING = 10;
const CHART_WIDTH = BOUNDS.X;
const CHART_HEIGHT = BOUNDS.Y - LABEL_SIZE - LABEL_PADDING;

export default class CircularProgressBar extends React.Component {
  // Custom props you wish to be configurable in the UI must also be defined in
  // the nr1.json file for the visualization. See docs for more details.
  static propTypes = {
    /**
     * An array of objects consisting of a nrql `query` and `accountId`.
     * This should be a standard prop for any NRQL based visualizations.
     */
    nrqlQueries: PropTypes.arrayOf(
      PropTypes.shape({
        accountId: PropTypes.number,
        query: PropTypes.string,
      })
    ),

    /**
     * Configuration that determines what values to display as critical or
     * successful.
     */
    thresholds: PropTypes.shape({
      criticalThreshold: PropTypes.number,
      highValuesAreSuccess: PropTypes.bool,
    }),
  };

  /**
   * Restructure the data for a aggregate NRQL query with no TIMESERIES and no
   * FACET into a for our visualization works well with.
   */
  transformData = (data) => {
    const {
      data: [series],
      metadata: { color: colorFromData, name: label },
    } = data[0];

    const percent = series.y * 100;
    const color = this.getColor(percent, colorFromData);

    return {
      percent,
      label,
      series: [
        { x: 'progress', y: percent, color },
        { x: 'remainder', y: 100 - percent, color: 'transparent' },
      ],
    };
  };

  nrqlInputIsValid = (data) => {
    const { data: seriesEntries } = data[0];
    const { uniqueAggregates, uniqueFacets } = getUniqueAggregatesAndFacets(
      data
    );
    const isNonTimeseries = seriesEntries.length === 1;

    return (
      uniqueAggregates.size === 1 && uniqueFacets.size === 0 && isNonTimeseries
    );
  };

  getColor = (value, colorFromData) => {
    const { red6: red, green6: green } = Colors.base;
    const {
      thresholds: { criticalThreshold, highValuesAreSuccess },
    } = this.props;

    const threshold = parseFloat(criticalThreshold);

    if (isNaN(threshold)) {
      return colorFromData;
    }

    if (highValuesAreSuccess) {
      return value > threshold ? green : red;
    }

    return value < threshold ? green : red;
  };

  render() {
    const { nrqlQueries, colors } = this.props;
    const colorScale = Array.from(colors, (x) => x.segmentColor);

    const nrqlQueryPropsAvailable =
      nrqlQueries &&
      nrqlQueries[0] &&
      nrqlQueries[0].accountId &&
      nrqlQueries[0].query;

    if (!nrqlQueryPropsAvailable) {
      return <EmptyState />;
    }

    return (
      <AutoSizer>
        {({ width, height }) => (
          <NrqlQuery
            query={nrqlQueries[0].query}
            accountId={parseInt(nrqlQueries[0].accountId)}
            pollInterval={NrqlQuery.AUTO_POLL_INTERVAL}
          >
            {({ data, loading, error }) => {
              if (loading) {
                return <Spinner />;
              }

              if (error) {
                return (
                  <NrqlQueryError
                    title="NRQL Syntax Error"
                    description={error.message}
                  />
                );
              }

              if (!this.nrqlInputIsValid(data)) {
                return (
                  <NrqlQueryError
                    title="Unsupported NRQL query"
                    description="The provided NRQL query is not supported by this visualization. Please make sure to have exactly 1 aggregate function in the SELECT clause and no FACET or TIMESERIES clauses."
                  />
                );
              }

              const { percent, label, series } = this.transformData(data);

              return (
                <svg
                  viewBox={`0 0 ${BOUNDS.X} ${BOUNDS.Y}`}
                  width={width}
                  height={height}
                  className="CircularProgressBar"
                >
                  <VictoryPie
                    standalone={false}
                    animate={{ duration: 1000 }}
                    data={series}
                    width={CHART_WIDTH}
                    height={CHART_HEIGHT}
                    padding={10}
                    innerRadius={135}
                    labels={() => null}
                    colorScale={colorScale}
                  />
                  <VictoryAnimation duration={1000} data={percent}>
                    {(percent) => (
                      <VictoryLabel
                        textAnchor="middle"
                        verticalAnchor="middle"
                        x={CHART_WIDTH / 2}
                        y={CHART_HEIGHT / 2}
                        text={`${Math.round(percent)}%`}
                        style={{ ...baseLabelStyles, fontSize: 45 }}
                      />
                    )}
                  </VictoryAnimation>
                  <VictoryLabel
                    text={label}
                    lineHeight={1}
                    x={CHART_WIDTH / 2}
                    y={BOUNDS.Y - LABEL_SIZE}
                    textAnchor="middle"
                    style={{ ...baseLabelStyles, fontSize: LABEL_SIZE }}
                  />
                </svg>
              );
            }}
          </NrqlQuery>
        )}
      </AutoSizer>
    );
  }
}

const EmptyState = () => (
  <Card className="EmptyState">
    <CardBody className="EmptyState-cardBody">
      <HeadingText
        spacingType={[HeadingText.SPACING_TYPE.LARGE]}
        type={HeadingText.TYPE.HEADING_3}
      >
        Please provide a NRQL query & account ID pair
      </HeadingText>
      <HeadingText
        spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
        type={HeadingText.TYPE.HEADING_4}
      >
        This Visualization supports NRQL queries with a single SELECT clause
        returning a percentage value (0 to 100 rather than 0 to 1). For example:
      </HeadingText>
      <code>
        {'FROM Transaction SELECT percentage(count(*), WHERE duration < 0.1)'}
      </code>
    </CardBody>
  </Card>
);

index.js

これにより、バーの角が丸くなるのではなく、デフォルトの 90 度に戻ります。ローカルサーバーが実行中の場合、 index.jsへの変更は自動的に認識されます。したがって、更新を確認するには、 browserで視覚化を表示してください。

完璧！ Instant のアクセシビリティカタログから、オープンソースCircular progress bar [の円形プログレスバー]の視覚化を複製して更新しました。残っているのは、自分のバージョンをカタログに公開して、自分のアカウントがそれを購読できるようにすることです。

Nerdpack を公開する準備ができたので、 CTRL+Cを使用してローカルサーバーを停止します。

ダッシュボードにカスタム視覚化を追加する

Victory charts [Victory チャート]Nerdpack の独自のバージョンをカタログに公開します。次に、それをサブスクライブして、ダッシュボードで視覚化を使用します。

ヒント

nr1 cloneを使用して Nerdpack のリポジトリを複製したため、ローカルコピーにはすでに独自の UUID があります。これは、Instant of servability カタログにバージョンを公開するための前提条件です。 git cloneを使用してコピーした場合は、Nerdpack の UUID を手動で更新する必要があります。

bash

$nr1 nerdpack:uuid -gf
The new generated id is ab123c45-678d-9012-efg3-45hi6jkl7890

ルートディレクトリから、Nerdpackを公開します。

bash

$nr1 nerdpack:publish

Nerdpack を購読する:

bash

$nr1 nerdpack:subscribe

ここでは、CLI を使用して Nerdpack をサブスクライブしました。これは、このガイドの前半で Web UI 内で実行したアクションと実質的に同じですが、ターミナルから実行します。

New Relic のApps [アプリ]ビューに移動します。

Apps [アプリ]から、Custom visualizations [カスタム視覚化]を開きます。

ここから、Circular progress bar [円形の進行状況バーの]視覚化をクリックします。 Nerdpack をローカルで提供していたときと同じように、視覚化の設定オプションを更新します。

[ダッシュボードに追加] をクリックします。

ダッシュボードに移動して、新しくカスタマイズされた円形の進行状況バーを確認します。

概要

このガイドでは、次のことを行います。

Instant of etherbaibility カタログから Nerdpack を購読しました。
オープンソースの Nerdpack をクローンしました。
ニーズに合わせて既存の視覚化を編集しました。
独自のカスタム Nerdpack を公開および購読します。
カスタム Nerdpack からの視覚化をダッシュボードに追加しました。

オープンソースの Nerdpacks の基盤を構築する方法がわかったので、New Relic 開発者コミュニティの成果を利用して、アプリと視覚化の作成を迅速に進めることができます。

ヒント

独自のバージョンをリモートリポジトリで維持したい場合は、元のリポジトリをフォークすることを検討してください。

この機械翻訳は、参考として提供されています。

オープンソースのNerdpacksをカスタマイズする

あなたが始める前に .css-21sua1{background:none;border:none;width:0;padding:0;}

ナードパックを見る

ヒント

Nerdpack をクローンする

Nerdpackをカスタマイズする

ヒント

ダッシュボードにカスタム視覚化を追加する

ヒント

概要

ヒント

あなたが始める前に