私たちのユーザーは多くのデータを収集し、Tulip分析しています。2016年にアナリティクス製品を構築した際、チャート作成にPlotlyを選択しました。しかし、Plotlyは私たちの現在のReactテクノロジースタックと相性が悪いため、私たちのチームはPlotlyをRechartsに置き換えるために努力してきました。このブログ投稿は、私たちがどのようにRechartsを使用し、社内のチャート・ライブラリでそれを拡張しているかについての一連の投稿の始まりです。
データから実用的な洞察を得ることは、私たちのプラットフォームの中核をなす要素です。Tulip使えば、オペレーターと機械の両方から業務データを収集するアプリを作成できます。データの構造や種類だけでなく、ユースケースは多岐にわたります。
お客様がデータを探索し、生成されたインサイトを日々のプロセスに統合できるよう、強力なインサイト機能とアラートを新たに作成しました。お客様がデータからインサイトを生成できるようにすることが、Tulip 中核です。
既存のチャートソリューションが機能開発の妨げになっていました。
私たちが製品を作ったとき、Plotlyを使うことにしました。それ以来、多くのことが変わりました。私たちはPlotlyをフォークし、多くのバグについてデフォルトの動作を改善しましたが、それ以来フォークの更新を怠っています。多くの重要なアップデートを逃しただけでなく、データ処理とビジュアライゼーションを結合してしまいました。このことが、予測などの新機能の追加を妨げていることが判明しました。
Tulip Analyticsの枠を超えたチャート作成を可能にするため、内部チャートライブラリを作成したいと考えています。アナリティクス製品のオーバーホールに取り組むにあたり、コア部分から着手し、将来的にアナリティクス・プラットフォームだけでなく、製品全体で再利用できる内部チャート・ライブラリにチャートを抽出することにしました。
データ処理とビジュアライゼーションを切り離すことで、高度な処理機能を追加し、独立してチャートを反復することができます。さらに、チャートは製品全体で使用される可能性があるため、一貫したユーザー・エクスペリエンスを提供することができます。
リチャートは拡張性があり、使いやすい。
最初の調査の後、候補をVisxとRechartsの2つに絞りました：
Visxは、React用の表現力豊かな低レベルの視覚化プリミティブのコレクションで、オープンソースであり、説得力のある主張を持っています：
visxは複数のパッケージに分かれています。小さく始めて、必要なものだけを使いましょう。
意図的に意見なし。独自の状態管理、アニメーションライブラリ、CSS-in-JSソリューションを持ってきてください。あなたのReactアプリは、アニメーション、テーマ設定、スタイリングがどのように行われるかについて、すでに意見を持っている可能性が高いです。
チャートライブラリではありません。ビジュアライゼーション・プリミティブを使い始めると、あなたのユースケースに最適化された独自のチャート・ライブラリを構築することになるでしょう。自分でコントロール
調査中、私たちはVisxがパワフルであることを確信しましたが、使い方が簡単でないことにも気づきました。最初にブログ記事で紹介した下のチャートは、今のところ、Reactに馴染みのある簡単なライブラリが欲しいということを思い出させるものです。そうすることで、新機能の開発が妨げられなくなり、将来的にはVisxで単一のReactコンポーネントチャートを移行できるようになります。
Rechartsは使いやすく、私たちのReactコードベースにぴったりです。Rechartsのデフォルトの動作は、Plotlyからの素早い移行を可能にし、高度なビジュアライゼーション機能を追加することを妨げません。
Rechartsのほとんどのコンポーネントは、Reactコンポーネントを渡してデフォルトのレンダリング動作をオーバーライドすることができます：
レジェンドの上書き
ツールチップカーソルのオーバーライド
私たちの内部チャートライブラリはRechartsの機能を超えており、拡張が必要です。
私たちの製品で直接 Recharts を使用する代わりに、私たちのユースケースをターゲットにしたシンプルなインターフェイスを公開するチャート・ライブラリに依存関係をカプセル化します。次のブログ記事で、これらのユースケースを掘り下げ、どのように実装したかを共有します。
国際化
私たちの製品には言語設定と翻訳があるため、チャート内のカテゴリのラベルを翻訳することは必須条件です。ツールチップ、凡例、軸の目盛りでは、翻訳とカスタムフォーマットを尊重する必要があります。
時系列
Rechartsのデフォルトの時系列の目盛りは、私たちの要求には十分ではありません。目盛りはきれいに分布しておらず、さらにそのフォーマットに影響を与えたいのです。さらに、軸上の目盛りを選択するインターフェースは単純ではなく、プロパティの組み合わせによってはバグ的な動作になります。その代わりに、我々のチャート・ライブラリは、正しい軸のタイプを自動的に検出し、それに応じて目盛りをプロットする必要があります。
ツールチップ
折れ線グラフのデフォルトのツールチップは、複数の時系列をうまく扱うことができません。それどころか、ツール・チップがチャートからはみ出し、一度に多くのデータ・ポイントを表示します。その代わりに、カーソルに最も近いデータ・ポイントだけを表示し、ツール・チップがチャートからはみ出ないようにしたいのです。
高度なチャート
Rechartsは視覚化だけをターゲットにしているのでシンプルです。ヒストグラム、パレート図、管理図など、プロットする前にデータを処理したり集約したりする高度なチャートも提供したいと考えています。
Recharts リポジトリに積極的に貢献しています。
ユーザーのためのプラットフォームを構築し続ける中で、私たちはコミュニティとオープンソース開発の重要性を認識しています。新しいチャートライブラリを作成し、Tulip視覚化とデータ処理のための高度な機能を提供し続ける一方で、私たちはRecharts開発者コミュニティへの還元を確実に行っています。私たちのチームのメンバーはRechartsに直接貢献し、作業を組織し、ライブラリの方向性を形成しています。
新しいチャート体験は、よりエキサイティングなアナリティクスと機械学習機能とともに、すべてのTulip お客様にご利用いただけます。詳しくはブログをご覧ください。