NIVOと反応するビルディングチャート

執筆Leonardo Maldonado ✏️
反応生態系は非常に豊富で広大なコミュニティを持っています.多くのオープンソースライブラリを利用することで、広い範囲の問題を解決することができます.後者については、ジョブの適切なライブラリを見つけるのは難しいことができます.
反応ライブラリはしばしば作成され、数ヶ月以内に時代遅れにレンダリングされ、特定のライブラリを使用する決定は、開発チーム全体に影響を与えます.それが重要なのは任意のタスクや機能をあなたのアプリケーションに構築する計画のための右のライブラリを選択することです.データの可視化は例外ではない.
このチュートリアルでは、いくつかのグラフを構築し、反応アプリでそれらを実装することによって、反応のためのデータ可視化ライブラリNIVOを使用する方法を示します.我々はいくつかの主要なコンポーネントを強調表示し、どのように一緒にデータをより視覚的にユーザーに魅力的にするために働くかを示します.

なぜ反応チャートライブラリを使用しますか？

反応のデータの可視化のためのライブラリを使用しての最も重要な利点は、ホイールを再発明せずにグラフやグラフの多種多様を実装する機能です.あなたは、単純なバーのチャーを実装しようとしてあなたの貴重な時間の時間を費やす必要はありません.NIVOのような強力なグラフライブラリは、より良い結果を達成し、あなたの反応アプリのユニークなユーザー体験を作成する時間を節約することができます.
審美的に喜ばせる方法でデータを表すことは、あなたのアプリケーションにより新鮮で、より現代的な観察をすることができます.最近では、ほとんどの企業は、洞察力に富んだ楽しいユーザー体験を提供するためにいくつかの種類のデータの可視化機能を使用します.
独自のデータの可視化やグラフライブラリを構築するのは難しいと時間がかかる.そうするために出発した多くの開発者は、ジュースがスクイズの価値がないとわかりました.

NIVOとは

Nivo 反応アプリケーションのためのデータ可視化コンポーネントの豊富なセットです.これは、グラフや近代的な反応アプリのデータ番号を表示するために使用できるコンポーネントの様々な含まれています.
nivoはd 3の上に構築されている.JSは、サーバー側のレンダリングと宣言のような強力な余分な機能が付属しています.これは非常にカスタマイズ可能なデータ可視化ライブラリは、よく書かれたドキュメントを提供する多くの例と応答データ可視化コンポーネントです.また、ボックスの動きと移行をサポートしています.

なぜD 3の代わりにNivoを使うか。

JavaScriptアプリケーションの最も人気のあるデータ可視化ツールの一つはD 3です.JSライブラリー.D3 is a powerful chart library これは、HTML、SVG、およびCSSを使用して生活にデータをもたらすことができます.
d 3の唯一の問題.JSは、それは急な学習曲線を持っているとあなたのコードは非常に複雑になるにバインドされています.D 3 .jsは,svg,html,cssの大量使用を行う.ライブラリを正しく使うには、SVGSとDOMがどのように動作するかをよく理解しなければなりません.
私を誤解させないでください- D 3.JSは近代的なアプリケーションでデータの可視化を構築するための非常に強力で便利なライブラリです.しかし、ほとんどの時間は、単純な棒グラフを作成しようとして時間を費やす必要はありません.反応はすべて再利用性についてです、そして、Nivoはあなたが再利用可能なコンポーネントを作成するのを可能にして、そうする際に、デバッグの時間を排除します.
nivoは,建物の構成の複雑さを取り除くので,反応におけるデータ可視化のためのより良い選択である.NIVOでは、より効率的に作業することができますし、コンポーネントをカスタマイズし、簡単にデータの視覚化の多種多様を作成します.

インストール

あなたの反応アプリでnivoを使用する最初のステップは、プロジェクトにインストールすることです

yarn add @nivo/core

コアパッケージをインストールすると、ライブラリのすべてのコンポーネントが付属していません.これは不利に聞こえるかもしれませんが、実際には良いことです.
私たちは1つのコンポーネントを使用するだけで私たちのバンドルのサイズを増加させるheaveパッケージを追加したくない.代わりに、特定のコンポーネントを使用する必要がある特定のパッケージを追加できます.
私たちの最初のnivoコンポーネントパッケージを我々の反応アプリケーションに加えましょう.

棒グラフの作成

開始するには、我々はbar chart component 我々の反応アプリケーションで使用するには:

yarn add @nivo/bar

棒グラフコンポーネントには多くの機能があります.これは、データをスタックまたは並んで表示することができます.これは、垂直方向と水平方向の両方のレイアウトをサポートし、任意の有効なSVG要素をレンダリングするためにカスタマイズすることができます.
我々は、輸入するつもりですbar NIVOを使用して最初の棒グラフを作成し始めることができますので、コンポーネントを私たちのファイルに.

import { ResponsiveBar } from '@nivo/bar'

バーコンポーネントから始めるには、単一のプロップが必要です.data . The data propは、我々がResponsiveBar コンポーネント.各オブジェクトには、データをインデックスするための最も重要なプロパティと、各シリーズを決定するキープロパティが必要です.
次のオブジェクトを使用します.

const data = [
  {
    day: "Monday",
    degress: 59
  },
  {
    day: "Tuesday",
    degress: 61
  },
  {
    day: "Wednesday",
    degress: 55
  },
  {
    day: "Thursday",
    degress: 78
  },
  {
    day: "Friday",
    degress: 71
  },
  {
    day: "Saturday",
    degress: 56
  },
  {
    day: "Sunday",
    degress: 67
  }
];

これをパスdata アレイへResponsiveBar コンポーネント.The ResponsiveBar コンポーネントニーズindexBy データをインデックスする文字列とkeys プロパティは、各系列を決定するために使用する文字列の配列です.
我々は、我々を通過するつもりですdegrees プロパティをキーとし、データをインデックスにしたいdays . このようにして、コンポーネントは次のようになります.

const Bar = () => {
  return (
    <ResponsiveBar
      data={data}
      keys={["degress"]}
      indexBy="day"
      margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
      padding={0.4}
      valueScale={{ type: "linear" }}
      colors="#3182CE"
      animate={true}
      enableLabel={false}
      axisTop={null}
      axisRight={null}
      axisLeft={{
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: "degrees",
        legendPosition: "middle",
        legendOffset: -40
      }}
    />
  );
};

今、我々は美しいと強力なデータ可視化コンポーネントをNIVOを使用している!ご覧の通り、ほんの数行のコードで、このような強力な結果を達成できます.

ビルディングチャート

円グラフは、単一の円のスライスとして数値データを表示します.この種のデータ可視化は、ほとんどすべての産業で、そして、多種多様な使用ケースのために適用されます.
Nivoには1があるpie chart component , 以下のコマンドでインストールできます.

yarn add @nivo/pie

このbar コンポーネントpie コンポーネントにはいくつかの小道具が必要ですdata オブジェクトの配列とwidth and height あなたの円グラフを示すために.
The data パイコンポーネントに渡すオブジェクトは少し異なります.などの多くのプロパティを使用することができますid , label , value , and color , 円グラフをカスタマイズする.
オブジェクトには配列があり、それぞれのオブジェクトには円グラフで使用される特定のプロパティがあります.

The id プロパティは、配列の各オブジェクトに対する一意の値です

The value プロパティは、グラフに表示されるオブジェクトの値です

The color オブジェクトは、我々が我々のチャートの上で我々のオブジェクトの色として通るつもりであるストリングです

The label プロパティはオブジェクトのラベル名です

const data = [
  {
    id: "java",
    label: "java",
    value: 195,
    color: "hsl(90, 70%, 50%)"
  },
  {
    id: "erlang",
    label: "erlang",
    value: 419,
    color: "hsl(56, 70%, 50%)"
  },
  {
    id: "ruby",
    label: "ruby",
    value: 407,
    color: "hsl(103, 70%, 50%)"
  },
  {
    id: "haskell",
    label: "haskell",
    value: 474,
    color: "hsl(186, 70%, 50%)"
  },
  {
    id: "go",
    label: "go",
    value: 71,
    color: "hsl(104, 70%, 50%)"
  }
];

また、カスタマイズすることができますpie プロパティを渡すことによるpadAngle and cornerRadius . The padAngle propは私たちのチャートの各オブジェクト間の角度を決定します.The cornerRadius propは、各オブジェクトの境界半径として渡すことができる値です.
最終的なコンポーネントは次のようになります.

const Pie = () => {
  return (
    <ResponsivePie
      data={pieData}
      margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
      innerRadius={0.5}
      padAngle={0.7}
      cornerRadius={3}
      activeOuterRadiusOffset={8}
      borderWidth={1}
      borderColor={{ from: "color", modifiers: [["darker", 0.2]] }}
      arcLinkLabelsSkipAngle={10}
      arcLinkLabelsTextColor="#333333"
      arcLinkLabelsThickness={2}
      arcLinkLabelsColor={{ from: "color" }}
      arcLabelsSkipAngle={10}
      arcLabelsTextColor={{ from: "color", modifiers: [["darker", 2]] }}
    />
  );
};

最終的な結果は次のようになります.

結論

NIVOは、反応アプリケーションのデータ可視化を作成するための多くの異なるコンポーネントを提供します.その膨大なコンポーネントのリストにはcalendar component , エーChoropleth component (分割地理的領域構成要素)tree map component , そして、より多く.
このチュートリアルでは、バーや円グラフ以外のデータ可視化コンポーネントの他の種類を作成するためのテクニックのほとんどを適用できます.ここでのアイデアは、NIVOを使用して達成することができるものを垣間見ることであり、このデータ可視化ライブラリはどのように強力です.
特定のタスクのための右または間違ったグラフライブラリはありませんそれはすべてあなたが達成し、プロジェクトの要件を目指している結果に依存します.それは、ツールとNIVOで利用可能な機能は、反応で見事な、衝撃的なデータの可視化を作成するための優れたグラフライブラリを作る.
NIVOはオープンソースです、そして、それのまわりのコミュニティは非常に活発で、役に立ちます.ドキュメントはよく書かれており、わずか数分でいくつかのコンポーネントを使用する方法を学ぶことができます.一日の終わりに、コンポーネントの幅広い選択と彼らが提供する使用例の多様性は、最高の反応チャートライブラリの1つのnivoのいずれかを行います.

フル可視性の生産反応アプリ

ユーザーが再生するのが難しい問題を経験するとき、特に反応する反応アプリケーションは難しくありえます.あなたがRedux状態をモニターして、追跡することに興味があるならば、自動的にJavaScript誤りを浮上させて、遅いネットワーク要求と成分負荷時間を追跡してください.try LogRocket .

LogRocket ウェブアプリのDVRのような、文字通りあなたの反応アプリで起こるすべてを記録します.問題が発生した理由を推測する代わりに、問題が発生したときにアプリケーションがどのような状態になったかを集計およびレポートできます.また、クライアントのCPU負荷、クライアントのメモリ使用量などのメトリクスを報告し、あなたのアプリケーションのパフォーマンスを監視します.
LogRoot Reduxのミドルウェアのパッケージは、ユーザーセッションに可視性の余分な層を追加します.LogLogelはあなたのredux店からすべてのアクションと状態を記録します.
近代化する方法あなたの反応アプリをデバッグするstart monitoring for free .