InfoTypeの作成
InfoType を作成するには infomotion-tool が必要です。
Sample InfoTypes でサンプルの InfoType を使用する準備ができます。
infomotion-tool を使うとローカル環境で編集とテストができます。完成した InfoType はパッケージし、 enebular にアップロードできます。
infomotion-tool のインストール
npm install @uhuru/enebular-infomotion-tool-v2 -g
InfoMotion-tool を実行するには nodejs >= 6 and npm 5.2+ が必要です。
permission error が起こった際には、以下のいずれかで解決することがあります。
現在のユーザーに
/usr/local/lib/内のnode_modulesに権限を与えます。権限を与えたのち、再度グローバルインストールください。NVM を利用する（推奨）
npm のデフォルトのディレクトリを変更する。
利用可能なコマンド
eit create [graph name] = Creates an InfoType with the [graph name]
eit run [graph name] = Runs [graph name] on localhost:3000
eit run [graph name] -l = Runs livereload [graph name] on localhost:3000
eit package [graph name] = Creates files to upload on enebular
eit help = help
グラフの作成
以下のコマンドから始めます。
eit create myfirstgraph
以下のファイルが作成されます。
datasource.jsonplugin.cssplugin.jsplugin.jsonREADME.md
datasource.json
このファイルはテスト用途です。
ブラウザでテストする際に利用する DataSource を指定できます。
adaptor に DataSource の種類を指定します。DataSource の種類には以下があります。
pubnnubapigatewayrandommock
具体的には以下のように指定します。
Pubnub adaptor
Pubnub のデータを使います。いくつかの値を自分のアプリのもので置き換えてください。
[
{
"adaptor": "pubnub",
"pubnub": {
"publishKey": "YOUR_PUBLISH_KEY",
"subscribeKey": "YOUR_SUBSCRIBE_KEY",
"ssl": true
},
"channel" : "YOUR_CHANNEL",
"count" : 1000,
"appId": "pubnub",
"id": "pubnub",
"title": "pubnub",
"name": "pubnub"
}
]
Firebase adaptor
Firebase のデータを使います。いくつかの値を自分のアプリのもので置き換えてください。
[
{
"adaptor": "firebase",
"firebase": {
"apiKey": "YOUR_API_KEY",
"authDomain": "YOUR_AUTH_DOMAIN",
"databaseURL": "YOUR_DATABASE_URL",
"projectId": "YOUR_PROJECT_ID",
"storageBucket": "YOUR_STOREAGE_BUCKET",
"messagingSenderId": "YOUR_MESSAGE_SENDER_ID"
},
"limit": 1000,
"ref": "REF_OF_YOUR_DATASOURCE",
"title": "firebase",
"id": "fireabse",
"name": "firebase"
}
]
API Gateway Adaptor
AWS API Gateway をエンドポイントとしてデータを取得します。いくつかの値を自分のアプリのもので置き換えてください。
[
{
"apiKey": "YOUR_API_KEY",
"endpoint": "YOUR_ENDPOINT",
"id": "apigateway",
"projectId": "YOUR_PROJECT_ID",
"title": "apigateway",
"adaptor": "apigateway"
}
]
Random adaptor
ランダムに生成されるデータを使います。
[
{
"adaptor": "random",
"apikey": "",
"apisecret": "",
"appId": "",
"dataStore": "random",
"id": "random",
"title": "random",
"name": "random"
}
]
データは以下のようなスキームになります。
{
country: String,
value: Number
}
Mock Adaptor
素早くテストするために、自分で書いたデータを使うことができます。データ数が少ない場合、同じデータが繰り返して補完されます。
[
{
"adaptor": "mock",
"id": "mock",
"title": "mock",
"name": "mock",
"data": [{"id": "a", "value": 1}, {"id": "b", "value": 21}, {"id": "c", "value": 512}]
}
]
plugin.css
グラフで利用する CSS です。グローバルに指定されるので、衝突しないように命名に注意してください。
plugin.js
グラフの主なロジックが入った、メインとなるファイルです。
デフォルトで D3.js がグローバルにインストールされています。詳しくは API Reference をご覧ください。
plugin.json
グラフを enebular にアップロードした際のプレビューのために必要なファイルです。
sampleSettings はデフォルトのスキーマ設定、sampleData はサンプルデータです。
{
"defaultSettings": {
"label": "country",
"value": "value"
},
"sampleData": [
{
"country": "A",
"value": 10,
"ts": 1548929863657
},
{
"country": "B",
"value": 20,
"ts": 1548929863657
}
]
}
テンプレート
デフォルトで作成されるグラフはデータをそのまま表示する DataLogger です。
以下に、利用可能なテンプレートを示します。
eit create [graph name] -t barchart
eit create [graph name] -t linechart
eit create [graph name] -t piechart
eit create [graph name] -t map
InfoType の依存性
グラフはそれぞれの依存性を持ちます。グラフをインストールする際は npm install を使います。npm install が完了すると、グラフをパッケージングして実行することができます。
cd [graph name]
npm install
Check the InfoTypes read.me for more details.
パッケージング
以下の場合にパッケージングが必要になります。
- 新しく
eit createで InfoType を作成したとき - enebular に InfoType をアップロードするとき
以下でパッケージできます。
eit package [graph name]
以下の3つが入った target というフォルダが作成されます。
plugin.jsplugin.cssplugin.json
ブラウザでのテスト
以下のコマンドで http://localhost:3000 にアクセスすることで、テストできます。テスト前にはパッケージしてください。
eit run [graph name]
-l オプションをつけることでライブリロードモードが利用できます。サーバーを立ち上げた状態でファイルを変更すると、すぐに反映されます。
eit run [graph name] -l
次に、Upload InfoType で enebular へのグラフのアップロード方法を学びましょう。