IM-BloomMaker グラフエレメントの使い方（円グラフ編）

この CookBook では、intra-mart Accel Platform 2019 Winter から利用可能になった IM-BloomMaker の円グラフの活用方法について紹介しています。
グラフエレメントの基本的な使い方を学びたい方は、以下の記事を参照してください。
https://dev-portal.intra-mart.jp/lowcode/cookbook/cookbook169226/

円グラフエレメントには「selected」と「visible」というプロパティがあります。
これらのプロパティを活用することでドリルダウンを実現することができます。
散布図エレメントにも同様のプロパティがあるので、今回紹介する内容と同様の活用が可能です。

なお、この CookBook で紹介するサンプルでは、以下のページで公開されているデータを一部抜粋し、加工したものをグラフデータとして使用しています。

「輸出入額の推移（主要商品別）」（税関ホームページ）（https://www.customs.go.jp/toukei/suii/html/time.htm）

完成イメージ

このCookBookで作成するサンプルを、以下から動作を確認することができます。

1. 円グラフをクリックすると、一覧の対応する項目がハイライトされます。
2. 円グラフの下にある凡例をクリックすると、その項目が円グラフ上で非表示になります。
3. 「Show only brands shown in graph」ボタンをクリックすると、円グラフに表示されている項目のみに絞り込んで一覧を表示します。
4. 「Reset」ボタンをクリックすると、グラフが再描画されます。

[iframe width="100%" height="600px" src="https://dev-portal.intra-mart.jp/imart/im_cookbook/169309?imui-theme-builder-module=headwithcontainer"]

body {
  min-width: 0px;
}
#imui-container {
  min-width: 0px;
}

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。
IM-BloomMakerのインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。

IM-BloomMaker サンプルインポートファイル : cookbook_169309_sample.zip

また、このサンプルでは IM-LogicDesigner のフロー定義を利用します。
完成サンプルの動作確認を行う場合、または、レシピの手順を実施する前に、IM-LogicDesigner のインポート機能から以下のサンプルをインポートしてください。

IM-LogicDesigner サンプルインポートファイル : cookbook_169309_IM-LogicDesigner.zip

ローカル環境で表示させる場合は、以下の URL にアクセスしてください。
http://localhost:8080/imart/im_cookbook/169309
なおベース URL である以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

1. エレメントを配置する
2. 変数を作成し、配置したエレメントに設定する
3. 円グラフと一覧の連動を行うアクションを作成する
4. ルーティング定義を設定し、IM-LogicDesigner のフロー定義と連携させる

1. エレメントを配置する

エレメントの配置は、この CookBook の主題ではないため省略します。
エレメント配置済みのインポートファイルを用意しているので、以下のファイルをインポートして利用してください。

エレメント配置済みインポートファイル : cookbook_169309.zip

インポート後、以下の URL にアクセスしてインポートしたコンテンツのデザイナ画面を表示してください。
ベース URL は、環境に合わせて適宜変更してください。
http://localhost:8080/imart/bloommaker/designer/im_cookbook_169309?css-framework=imui&content-definition-type=content

2. 変数を作成し、配置したエレメントに設定する

• デザイナ画面の右ペインの変数タブを開き、プルダウンが「変数」になっていることを確認してください。
  
• 以下の JSON を JSON エディタに貼り付けて変数を作成してください。

{
  "tableData": [
    {
      "rank": 0,
      "area": "dummy",
      "item": "dummy",
      "exportValue": 0
    }
  ],
  "seriesData": [
    {
      "name": "dummy",
      "y": 0
    }
  ],
  "tableColor": [
    ""
  ],
  "selected": [
    null
  ],
  "visible": [
    null
  ]
}

• 作成した変数の「selected」の編集アイコンをクリックして変数エディタを表示してください。
  
• 変数「selected」の型を「整数」に変更してください。
  
• 上記と同様に、変数「visible」の型を「整数」に変更してください。
  
• デザイナ画面の右ペインの変数タブを開き、プルダウンを「入力」に変更してください。
  
• 以下の JSON を JSON エディタに貼り付けて入力を作成してください。

{
  "data": [
    {
      "rank": 0,
      "area": "dummy",
      "item": "dummy",
      "exportValue": 0
    }
  ]
}

• 円グラフエレメントをクリックしてください。
  
• 右ペインのプロパティタブを開き、以下の通り設定してください。

• テーブル（繰り返し）エレメントをクリックし、プロパティタブで以下の通り設定してください。

• テーブルエレメントの2行目1列目のテーブルセルをクリックしてください。
  
• プロパティタブで以下の通り設定してください。
  2行目2列目～4列目のセルに対しても同様の設定を行ってください。

• テーブルエレメントの2行目1列目のラベルをクリックしてください。
  
• プロパティタブで以下の通り設定してください。

• テーブルエレメントの2行目2列目のラベルをクリックしてください。
  
• プロパティタブで以下の通り設定してください。

• テーブルエレメントの2行目3列目のラベルをクリックしてください。
  
• プロパティタブで以下の通り設定してください。

• テーブルエレメントの2行目4列目のラベルをクリックしてください。
  
• プロパティタブで以下の通り設定してください。

3. 円グラフと一覧の連動を行うアクションを作成する

• 右ペインのアクションタブを開き、「新規作成」アイコンをクリックしてアクションエディタを開いてください。
  
• アクション名に「Initial display」と入力してください。
  
• 左ペインから「変数〇に〇を代入する」を右ペインに配置してください。
  

• 配置したアクションアイテムに以下の通り設定してください。

• 左ペインから「カスタムスクリプトを実行する」を右ペインの「変数〇に〇を代入する」の下に配置してください。
  
• 配置したアクションアイテムに以下の内容を入力してください。

var tableData = $variable.tableData;
var seriesData = [];
var area = [];
var expValMap = new Map();

if (Array.isArray(tableData)) {
  // Extract area name(Deduplication)
  tableData.forEach((e) => {
    if (area.indexOf(e.area) == -1){
      area.push(e.area);
    }
  });

  // Initialization
  for (var i = 0;i < area.length;i++) {
    expValMap.set(area[i], 0);
  }

  // Total number by area
  tableData.forEach((e) => {
    var index = area.indexOf(e.area);
    var val = expValMap.get(area[index]);
    expValMap.set(area[index], val + e.exportValue);
  });

  // Convert to data for pie chart
  expValMap.forEach((val, key) => {
    seriesData.push({
      name: key,
      y: val
    });
  });
}

$variable.seriesData = seriesData;
$variable.tableColor = [];
$variable.selected = [];

• アクションエディタの「決定」ボタンをクリックし、アクションを保存してください。
• すべてのエレメントの選択を解除し、「コンテナ」のプロパティタブを表示してください。
  (Ctrl キーを押しながら選択済みのエレメントをクリックすることで選択を解除できます。)
• 「コンテナ」のプロパティに、以下の通り設定してください。

• 円グラフの下に配置されている「Reset」ボタンを選択してください。
  
• プロパティタブで以下の通り設定してください。

• 右ペインのアクションタブを開き、「新規作成」アイコンをクリックしてアクションエディタを開いてください。
  
• アクション名に「Click graph element」と入力してください。
  
• 左ペインから「カスタムスクリプトを実行する」を右ペインに配置してください。
  
• 配置したアクションアイテムに以下の内容を入力してください。

var seriesData = $variable.seriesData
var selected = $variable.selected
var tableData = $variable.tableData
var area = [];

// Get selected area name
if (Array.isArray(seriesData)) {
  if (Array.isArray(selected)) {
    selected.forEach((e) => {
      area.push(seriesData[e].name);
    });
  }
}

// Color the table
if (Array.isArray(tableData)) {
  var tableColor = [];
  tableData.forEach((e) => {
    if (area.indexOf(e.area) != -1) {
      tableColor.push('#FFBBFF');
    } else {
      tableColor.push('#FFFFFF');
    }
  });
  $variable.tableColor = tableColor;
}

• アクションエディタの「決定」ボタンをクリックし、アクションを保存してください。
• 円グラフエレメントをクリックし、プロパティタブで以下の通り設定してください。

• 右ペインのアクションタブを開き、「新規作成」アイコンをクリックしてアクションエディタを開いてください。
  
• アクション名に「Update table」と入力してください。
  
• 左ペインから「カスタムスクリプトを実行する」を右ペインに配置してください。
  
• 配置したアクションアイテムに以下の内容を入力してください。

var seriesData = $variable.seriesData
var visible = $variable.visible
var tableData = $input.data
var area = [];

// Get area name in display state
if (Array.isArray(seriesData)) {
  if (Array.isArray(visible)) {
    visible.forEach((e) => {
      area.push(seriesData[e].name);
    });
  }
}

// Remove hidden data
if (Array.isArray(tableData)) {
  var newTableData = [];
  tableData
    .filter((e) => area.indexOf(e.area) != -1)
    .forEach((e) => {
      newTableData.push({
        rank: e.rank,
        area:e.area,
        item: e.item,
        exportValue: e.exportValue
      });
    });

  $variable.tableData = newTableData;
}

• アクションエディタの「決定」ボタンをクリックし、アクションを保存してください。
• テーブルエレメントの下にある「Show only brands shown in graph」ボタンを選択してください。
  
• プロパティタブで以下の通り設定してください。

• すべての設定が完了したら、「上書き保存」ボタンをクリックしてコンテンツを保存してください。

4. ルーティング定義を設定し、IM-LogicDesigner のフロー定義と連携させる

• ルーティング定義一覧画面を表示し、「カテゴリ新規作成」ボタンをクリックしてください。
  
• 以下の情報を入力し、「登録」ボタンをクリックしてください。（既に登録済みの場合はこの手順は不要です。）

• 登録した「im_cookbook」カテゴリを選択して「ルーティング新規作成」ボタンをクリックし、ルーティング定義登録画面を表示してください。
  
• 「ルーティング」タブを表示し、以下の情報を入力してください。

※ レシピの手順 1 ～ 3 で作成したコンテンツをコンテンツ検索画面から選択してください。

• 「前処理」タブを表示し、「追加」ボタンをクリックしてダイアログを表示してください。
  
• ダイアログに以下の通り設定し、「登録」ボタンをクリックしてください。

※ 事前に、完成サンプルの「IM-LogicDesigner サンプルインポートファイル」をインポートしておいてください。

• ルーティング定義登録画面の「登録」ボタンをクリックし、ルーティング定義を登録してください。
  
• 登録したルーティング定義「im_cookbook_169309」を選択し、「認可URI」の認可設定を行ってください。

以上で、円グラフのサンプル画面の作成は完了です。

動作確認

作成した画面の動作確認を行います。
ルーティング定義一覧画面でルーティング定義「im_cookbook_169309」を表示し、「URLのコピー」アイコンをクリックしてください。
コピーした URL をブラウザのアドレスバーに貼り付け、作成した画面に移動してください。

以下のように動作することを確認してください。
うまく動作しない場合は、レシピの手順を確認してください。

• 円グラフをクリックすると、一覧の対応する項目がハイライトされること。
• 円グラフの下にある凡例をクリックすると、その項目が円グラフ上で非表示になること。
• 「Show only brands shown in graph」ボタンをクリックすると、グラフに表示されていないデータが一覧から消えること。
• 「Reset」ボタンをクリックすると、画面が初期表示時の状態に戻ること。