오픈 소스 Nerdpack 사용자 정의

Instant 옵저버빌리티 카탈로그에 있는 대부분의 Nerdpack은 오픈 소스입니다. 즉, 해당 항목을 복제하거나 분기하고, 특정 요구 사항에 맞게 사용자 정의하고, 계정에서 사용할 수 있도록 다시 게시할 수 있습니다. 이 가이드에서는 시각화를 사용하여 Nerdpack을 사용자 정의하고 이를 계정에 게시합니다. 그러나 Nerdpack을 사용자 정의하려면 동일한 단계를 따르십시오.

시작하기 전에

아직 하지 않은 경우:

뉴렐릭 계정에 가입하세요
Node.js설치
CLI를 설치하고 구성하려면 nr1 빠른 시작 의 처음 4단계를 완료하세요.

Nerdpack 보기

Victory Charts Visualizations Nerdpack을 구독하고 뉴렐릭에서 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의 일부로 설치한 Victory Charts Visualizations [원형 진행률 표시줄을] 클릭합니다.

Configure visualization properties [시각화 속성 구성] 에서 계정을 선택하고 NRQL 쿼리를 입력합니다.

이제 쿼리에 따른 백분율을 표시하는 원형 차트가 표시됩니다.

팁

진행률 표시줄 시각화를 구성하는 방법에 대한 지침 은 설명서를 읽어보세요.

이 시각화에 대해 몇 가지 사항을 확인하세요.

차트의 색상을 제어할 수 없습니다.
차트 섹션의 가장자리가 둥글게 되어 있습니다.
이 튜토리얼을 위해 이 차트가 두 가지를 제외하고 원하는 방식으로 데이터를 정확하게 표현한다고 상상해 보세요. 직선 모서리를 사용하고 차트 색상을 수동으로 제어하고 싶습니다. 현실 세계에서는 Nerdpack이 제공하는 기능이 마음에 들지만 조정할 수 있다면 더 좋을 것 같은 Nerdpack을 접할 수 있습니다. 글쎄, 당신은 그것들을 조정할 수 있고, 다음에는 그 방법을 배우게 될 것입니다!

귀하는 구독 중인 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 옵저버빌리티 공개 카탈로그의 원본 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 옵션을 추가합니다.

차트 색상을 사용자 정의할 수 있도록 개의 필드 collection 중 개를 추가하세요.string

{
  "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

로컬에서 제공되는 시각화를 열고 계정, 데이터 쿼리 및 세그먼트 색상으로 차트를 구성하세요.

팁

두 번째 색상을 추가하려면 Colors [색상] 속성의 오른쪽 상단에 있는 +를 클릭하세요.

두 개의 세그먼트가 있으므로 두 가지 색상을 추가합니다. 첫 번째 색상은 진행 섹션용입니다. 두 번째 색상은 남은 비율입니다.

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 에 대한 변경 사항을 자동으로 인식합니다. 따라서 브라우저에서 시각화를 보고 업데이트를 확인하세요.

완벽한! Instant 옵저버빌리티 카탈로그에서 오픈 소스 Circular progress bar [원형 진행률 표시줄] 시각화를 복제하고 업데이트했습니다. 남은 유일한 일은 귀하의 버전을 카탈로그에 게시하여 귀하의 계정이 이를 구독할 수 있도록 하는 것입니다.

이제 Nerdpack을 게시할 준비가 되었으므로 CTRL+C 사용하여 로컬 서버를 중지합니다.

대시보드에 사용자 정의 시각화 추가

Victory charts [Victory 차트] Nerdpack 버전을 카탈로그에 게시하세요. 그런 다음 구독하고 대시보드에서 시각화를 사용하세요.

팁

Nerdpack 저장소를 복제하기 위해 nr1 clone 사용했기 때문에 로컬 사본에는 이미 자체 UUID가 있습니다. 이는 귀하의 버전을 Instant 옵저버빌리티 카탈로그에 게시하기 위한 전제 조건입니다. 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을 구독했습니다. 이는 사실상 이 가이드의 앞부분에서 웹 UI 내에서 수행한 작업과 동일하지만 터미널에서 수행한 작업입니다.

뉴렐릭의 Apps [앱] 보기로 이동하세요.

Apps [앱] 에서 Custom visualizations [사용자 정의 시각화를] 엽니다.

여기에서 Circular progress bar [원형 진행률 표시줄] 시각화를 클릭합니다. Nerdpack을 로컬로 제공할 때와 마찬가지로 시각화의 설정 옵션을 업데이트하세요.

대시보드에 추가를 클릭합니다.

대시보드로 이동하여 새로운 맞춤형 원형 진행률 표시줄을 확인하세요.

요약

이 가이드에서는 다음을 수행합니다.

Instant 옵저버빌리티 카탈로그에서 Nerdpack을 구독했습니다.
오픈 소스 Nerdpack을 복제했습니다.
요구 사항에 맞게 기존 시각화를 편집했습니다.
나만의 맞춤형 Nerdpack을 게시하고 구독합니다.
사용자 정의 Nerdpack의 시각화를 대시보드에 추가했습니다.

이제 오픈 소스 Nerdpacks의 기반을 구축하는 방법을 알았으므로 뉴렐릭 개발자 커뮤니티의 작업을 활용하여 앱 및 시각화 생성을 빠르게 추적할 수 있습니다.

팁

원격 위치에서 자신의 버전을 유지하려면 원본 리포지터리를 포크하는 것을 고려하세요.

사용자의 편의를 위해 제공되는 기계 번역입니다.

오픈 소스 Nerdpack 사용자 정의

시작하기 전에 .css-21sua1{background:none;border:none;width:0;padding:0;}

Nerdpack 보기

팁

Nerdpack 복제

Nerdpack 사용자 정의

팁

대시보드에 사용자 정의 시각화 추가

팁

요약

팁

시작하기 전에