グラフ関連

概要

• Flashを使わずに、DBとJavaScriptだけでグラフを描画するようなアプリケーションを作成する。
• 引数としてグラフIDと期間を受け付ける。
• 現行のグラフと同様に、複数の折れ線グラフを1つにまとめる必要がある

基本設計

サンプル

https://graph.nplll.com/graph/approval_rate

使用アプリケーション

• Chart.js
• Vue.js
• vue-chartjs

表示の流れ

1. グラフに関するデータをMySQLに格納しておく
2. LaravelでAPIを設計しデータを取得、JSONとして出力
3. VueでAPIを叩いてデータを受け取り、テンプレートに渡す（極力加工しない）
4. グラフを表示

DB設計について

従来のリレーションで固く結び付いたテーブル構造から、あまり改変のない部分についてはリレーションしない形へと変更する。 具体的には

• ラベルだけのテーブルを廃止し、ラベルはデータテーブルに統合
• グラフセットとグラフのリレーションを廃止し、グラフセットに含まれるグラフリストと並び順はJSON形式で格納する
• 実際にほとんど使われていなかった「グラフタイプ」は廃止
• 投稿フォームにラベルを固定して複数のグラフの値を同時に入力するタイプ（政党支持率）と、一つのグラフにだけ入力するタイプ（内閣支持率）があるので、setにそれを持たせる
• 投稿フォームのラベルに種類があるのでそれもsetに持たせる（年月日か、年月かなど）

またLaravelのEloquent ORMの仕様に合わせるために、カラム名を変更

• timestamp → updated_at
• created_at（新設）

投稿フォーム

admin.is1977.com でまとめて登録する。

課題

2019/07/06

6/25にあげた課題はほぼ解決した。現在の課題は下記の通り。

• グラフ編集用アプリケーションがない
• グラフセット編集用アプリケーションがない
• CSVファイルによるコンバートツール

2019/06/25

現在のグラフを置き換えることが出来るレベルまで進んだので公開した。 今現在以下のような課題が存在している。

• グラフデータ投稿用フォームがない（重要）
  • （2019/06/27） 投稿用フォームをリリース：サンプル）https://admin.is1977.com/graph/approval_rate
• グラフ編集用アプリケーションがない
• グラフセット編集用アプリケーションがない
• 同じFlashを使用していたがテーブルが別になっていたGoogle Analytics、amedasも移行する必要がある
  • Google Analyticsはデータの移行自体は楽（370件しかない）だが、バッチ処理によるデータの取得を実装しなければいけない。
  • amedasはデータの移行が割と大変（25万件もある）な上に、バッチ処理によるデータ取得も実装する必要がある。
  • 両方とも独自形式のデータになっているがすべてgraph_dataに合わせた形式に変更し、それによってグラフ描画部分は作業無しで移行出来るようにする。