当社のユーザーは大量のデータを収集し、Tulip分析を行っています。2016年にアナリティクス製品を開発した際、グラフ表示機能にはPlotlyを採用しました。しかし、Plotlyは現在のReact技術スタックとの相性が良くないため、チームではPlotlyをRechartsに置き換えるべく尽力してきました。本ブログ記事は、当社がRechartsをどのように活用し、社内用グラフライブラリとして拡張しているかについて紹介する連載記事の第一弾となります。
データから実用的な知見を引き出すことは、当社のプラットフォームの中核をなす機能です。Tulip を使用すれば、オペレーターや機械から業務データを収集するアプリを作成できます。その活用シーンは多岐にわたり、収集するデータの構造や種類も多岐にわたります。
お客様がデータを分析し、そこから得られた知見を日々の業務プロセスに組み込めるよう、当社は強力な新たな分析機能とアラート機能を開発しました。データから知見を引き出すことを可能にすることこそが、Tulip の中核です。
従来のチャート作成ソリューションが、機能開発の妨げとなっていました。
製品を開発する際、私たちはPlotlyを採用しました。それ以来、状況は大きく変わりました。当初、多くのバグやデフォルトの動作を改善するためにPlotlyをフォークしましたが、その後、そのフォークの更新を怠ってしまいました。その結果、重要な更新を数多く取り逃しただけでなく、データ処理と可視化が密接に結びついてしまいました。これが原因で、予測機能などの新機能の追加が妨げられることとなりました。
Tulip 場面でもグラフ表示機能を活用できるようにするため、社内のグラフライブラリを構築したいと考えています。分析製品の全面的な見直しに着手するにあたり、私たちはまず中核部分から着手し、グラフ機能を抽出して、将来的には分析プラットフォームだけでなく製品全体で再利用可能な社内用グラフライブラリとして独立させることにしました。
データ処理と可視化を分離することで、高度な処理機能を追加し、チャートを個別に改良することが可能になります。さらに、チャートが製品全体で利用される可能性があるため、一貫したユーザー体験を提供できるようになります。
Rechartsは拡張性が高く、使いやすいです。
予備調査の結果、候補をVisxとRechartsの2つに絞り込みました：
Visxは、React向けの表現力豊かな低レベルな可視化プリミティブのコレクションであり、オープンソースとして公開されています。その魅力は以下の通りです：
パッケージのサイズを小さく抑えてください。visxは複数のパッケージに分かれています。まずは最小限の構成から始め、必要なものだけを使用してください。
あえて特定の仕様を押し付けません。状態管理、アニメーションライブラリ、CSS-in-JSソリューションなどは、ご自身で用意してください。おそらく、あなたのReactアプリには、アニメーション、テーマ設定、スタイリングのやり方について、すでに独自の仕様があることでしょう。visxは、そこに新たな仕様を追加しないよう配慮しており、あらゆる既存のソリューションと統合可能です。
これは単なるチャート作成ライブラリではありません。可視化プリミティブを使い始めると、やがて自分のユースケースに合わせて最適化された独自のチャート作成ライブラリを構築することになるでしょう。すべてはあなた次第です。
調査を進める中で、Visxが強力なツールであることは確信しましたが、その一方で、使い方が決して簡単ではないことも分かりました。以前のブログ記事でも触れた通り、以下の図が示すように、現時点ではReactに馴染みのある、使いやすいライブラリを求めています。そうすることで新機能の開発がスムーズに進み、将来的には個々のReactコンポーネントのチャートをVisxに移行することも可能になるでしょう。
私たちが発見したRechartsは、使いやすく、Reactのコードベースにシームレスに統合できます。Rechartsのデフォルトの動作により、Plotlyからの移行がスムーズに行え、高度な可視化機能の追加を妨げる障害が取り除かれました。
Rechartsのほとんどのコンポーネントでは、Reactコンポーネントを渡すことでデフォルトのレンダリング動作を上書きすることができ、これにより既存のコンポーネントライブラリを活用できるようになります：
凡例の上書き
ツールチップカーソルの上書き
当社の内部チャートライブラリは、Rechartsの機能を超えるものであり、拡張機能が必要です
製品内でRechartsを直接使用するのではなく、依存関係をチャート作成ライブラリにカプセル化し、当社のユースケースに合わせたシンプルなインターフェースを提供しています。今後のブログ記事では、これらのユースケースについて詳しく解説し、その実装方法をご紹介します。
国際化
当社製品には言語設定と翻訳機能が備わっているため、グラフ内のカテゴリラベルの翻訳は必須です。ツールチップ、凡例、および軸の目盛において、翻訳内容とカスタム書式設定が正しく反映される必要があります。
時系列
時系列データに対するRechartsのデフォルトの目盛り設定では、要件を満たすことができません。目盛りの配置が不自然である上、その書式設定をさらに調整したいと考えています。さらに、軸上の目盛りを選択するためのインターフェースは直感的ではなく、プロパティの組み合わせによっては不具合が生じることもあります。その代わりに、当チャートライブラリでは適切な軸タイプを自動的に検出し、それに応じて目盛りをプロットできるようにすべきです。
ツールチップ
折れ線のグラフのデフォルトのツールチップは、複数の時系列データを適切に処理できません。その結果、ツールチップがグラフからはみ出し、一度に多くのデータポイントが表示されてしまいます。そこで、カーソルに最も近いデータポイントのみを表示し、ツールチップがグラフの範囲を超えないようにしたいと考えています。
高度なチャート
Rechartsは可視化に特化しているため、シンプルな仕様となっています。私たちは、ヒストグラム、パレート図、管理図など、データをプロットする前に処理や集計を行う高度なチャートも提供したいと考えています。
私たちはRechartsリポジトリに積極的に貢献しています。
ユーザーのためのプラットフォーム構築を進める中で、私たちはコミュニティとオープンソース開発の重要性を深く認識しています。新しいチャートライブラリの開発や、Tulip高度な可視化・データ処理機能の継続的な導入に取り組む一方で、Rechartsの開発者コミュニティへの還元も確実に実施しています。当社のチームメンバーはRechartsへの直接的な貢献者として、作業の調整やライブラリの方向性の決定に携わっています。
新しいチャート機能に加え、さらに魅力的な分析機能や機械学習機能も、すべてのTulip にご利用いただけます。詳細については、当社のブログ記事をご覧ください →