グラフライブラリ 0. 企画、データ構造

この記事は韓国語から翻訳したものです。不十分な部分があれば、いつでもフィードバックをいただければありがたいです！ (オリジナル記事, 同じく私が作成しました。)

グラフライブラリを実装するために必要な企画と資料構造についてまとめてみました。 (project repo, library repo)

企画

まず、私たちのプロジェクト企画に合うようにグラフライブラリを実装するため必要な機能を整理してみたところ、上のように大きく二つに分かれました。シンプルモードと詳細モード。シンプルモードは単純にグラフだけを提供し、詳細モードでは軸とタッチすると価格表がオーバーレイされる機能を提供します。ここでは詳細モードを先に実装し、シンプルモードは詳細モードで入れた機能を削除するオプションを追加する方法で実装することにしました。また、このライブラリをオープンソースとして配布することを目標にしました。

これに基づいて実装の順番を定義してみます、

1.カスタムビューを作る
2.グラフ軸を描く
3.グラフを描く
4.デザインを施す
5.タッチとインタラクションを実装する
6.配布する

上記の順番でブログポスティングをしようと思います。

データ構造

interface ChartData {
    val x: Float
    val y: Float
    val valid: Boolean
}

まず、プロジェクトのUseCaseに合わせてデータを定義してみました。x,y座標を持っていて、validはそのデータが有効なデータかどうかを示します。(私たちのプロジェクトでは売り切れの場合、validがfalseになります)validがfalseの場合、その部分だけグラフラインの色を変更できるようにしました。また、x,yの値は企画に合わせてFloatで固定するようにしました。

interface ChartDataset {
    val showXAxis: Boolean
    val showYAxis: Boolean
    val isInteractive: Boolean
    val graphMode: GraphMode
    val data: List<ChartData>
    val gridLines: List<GridLine>
}

計画に基づいて、グラフライブラリから受け取るデータを定義してみました。シンプルモードと詳細モードのためにX軸、Y軸の活性化の有無、グラフのインタラクションの有無、グラフのモード(グラフを表示する期間の選択)、データ、そして目盛りのリストを追加しました。

enum class GraphMode {
    DAY,
    WEEK,
    MONTH,
    QUARTER
}

interface GridLine {
    val name: String
    val value: Float
}

結果的にチャートデータをこのように構築したことを見ると、とても残念な気がします。最初に企画する段階では誰でも使えるように汎用的なライブラリを作ってオープンソースで配布しようとしましたが、プロジェクトのUseCaseに合わせて構築及び実装していたら汎用性が低いライブラリになってしまいました。現在、X軸は時系列データのみ可能で、X,YデータともにFloat型のみサポートする変なライブラリになってしまいました。この部分は後日リファクタリングで必ず改善したいと思います。

次の記事ではカスタムビューを作成して初期設定する部分について説明します。