注目JavaScriptライブラリReactで「Wijmo（ウィジモ） 5」を使いこなす

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第14回

グリッド部品FlexGridとチャート部品FlexChartを試す

　WijmoのFlexGridはExcelのようなグリッドを表示する部品、FlexChartはさまざまなチャートを表示する部品です。これらの利用例を、図3のサンプルで説明します。グリッドの内容を変更すると、連動してチャートに反映されます。

図3　FlexGridとFlexChartを組み合わせたサンプル（p003-chart-grid）

　まず、利用するWijmoのモジュールを、リスト5の通りインポートします。（1）はFlexGrid、（2）はFlexChartに対応します。（3）はWijmo本体のモジュールで、FlexGridやFlexChartに表示するデータを管理するCollectionViewクラスが含まれます。

［リスト5］図3のサンプルでインポートするモジュール（p003-chart-grid/src/App.js）

import * as wjGrid from 'wijmo/wijmo.react.grid'; // FlexGrid ...（1）
import * as wjChart from 'wijmo/wijmo.react.chart'; // FlexChart ...（2）
import * as wj from 'wijmo/wijmo'; // Wijmo本体（CollectionView） ...（3）

　Appクラスのコンストラクターでは、FlexGridとFlexChartで共有するデータをstateに設定します。ここでは、ym（年月）／time（稼働時間）／count（生産数）のデータを持つJavaScriptオブジェクトの配列をコンストラクターに与えてCollectionViewを生成し、cvDataとしてstateに設定します。

［リスト6］this.stateにデータを設定する実装（p003-chart-grid/src/App.js）

this.state = {
  cvData: new wj.CollectionView([
    {
      'ym': '2018/9',
      'time': 160,
      'count': 200
    },
（略）
  ])
};

　renderメソッドで、画面に表示するFlexGridとFlexChartを記述します。FlexGridの記述はリスト7です。

［リスト7］FlexGridの記述（p003-chart-grid/src/App.js）

<wjGrid.FlexGrid itemsSource={this.state.cvData}> ...（1）
  <wjGrid.FlexGridColumn header="年月" binding="ym" width="*"/> ...（2）
  <wjGrid.FlexGridColumn header="稼働時間" binding="time" width="*"/> ...（3）
  <wjGrid.FlexGridColumn header="生産数" binding="count" width="*"/> ...（4）
</wjGrid.FlexGrid>

　（1）のFlexGridタグがグリッドの本体で、表示するデータ（this.state.cvData）をitemsSource属性に設定します。（2）～（4）のFlexGridColumnタグはグリッドの列で、binding属性でym（年月）、time（稼働時間）、count（生産数）をそれぞれ表示するようにします。「width="*"」は、列を可能な限り広げて表示する設定です。

　FlexChartはリスト8の通り記述します。

［リスト8］FlexChartの記述（p003-chart-grid/src/App.js）

<wjChart.FlexChart itemsSource={this.state.cvData} bindingX="ym"> ...（1）
  <wjChart.FlexChartSeries name="稼働時間" binding="time"/> ...（2）
  <wjChart.FlexChartSeries name="生産数" binding="count"
   chartType="LineSymbols"/> ...（3）
  <wjChart.FlexChartLegend position="Bottom"/> ...（4）
</wjChart.FlexChart>

　（1）のFlexChartタグがチャートの本体で、itemsSource属性にはリスト7同様に表示データを設定します。bindingX属性はチャートのx軸設定で、ここではym（年月）をx軸に設定します。（2）と（3）のFlexChartSeriesタグはグラフのデータ系列で、それぞれのbinding属性で（2）にtime（稼働時間）、（3）にcount（生産数）を表示するよう設定します。（3）ではグラフ種類を表すchartType属性にLineSymbols（線グラフ）を設定します。chartType属性を指定しない（2）のデータ系列は棒グラフになります。（4）のFlexChartLegendタグは凡例で、position属性で表示位置をBottom（下部）に設定します。

CollectionViewを利用したデータ同期と画面の更新

　リスト5～8のサンプル（p003-chart-grid）には、リスト3～4のサンプル（p002-basic）のように、画面更新時にstateを更新する実装がありませんが、FlexGridの変更がFlexChartに反映されます。これはCollectionViewの機能によるもので、CollectionViewを共有するWijmoコントロール間では、データが自動的に同期されて画面に反映されます。

　一方、Wijmoコントロール以外の画面要素とデータを共有する場合は、stateを更新して画面に反映するReactの方法に従う必要があります。このような実装方法を、FlexGridの内容をHTMLのtableタグで表示する図4のサンプルで説明します。

図4　FlexGridの内容をテーブルに表示するサンプル（p004-table-grid）

　FlexGridの記述はリスト7と同様です。データを表示するテーブルは、リスト9の通り記述します。（1）でCollectionView（this.state.cvData）のitemsプロパティでデータを取得して、mapメソッドで各行を<tr>タグ、<td>タグとして出力します。

［リスト9］テーブルの記述（p004-grid-table/src/App.js）

<table className="disp-table">
  <th>年月</th>
  <th>稼働時間</th>
  <th>生産数</th>
  {
    // CollectionViewのデータを出力 ...（1）
    this.state.cvData.items.map((value, index, array) => {
      return(
      <tr>
        <td>{value.ym}</td>
        <td>{value.time}</td>
        <td>{value.count}</td>
      </tr>)
    })
  }
</table>

　このままではCollectionViewの変更がテーブルに反映されないので、CollectionViewが変更されたときに発生するonCollectionChangedイベントの処理を、リスト10の通り実装します。this.setStateメソッドでCollectionViewを再設定すると、Reactの内部処理でテーブルが再描画されます。

［リスト10］CollectionViewが変更されたときの処理（p004-grid-table/src/App.js）

this.state.cvData.onCollectionChanged = (() => {
  this.setState({cvData: this.state.cvData});
});

［注］ライセンスの設定

　npmでインストールしたWijmoは正式版ですが、ライセンスキーを設定しないとトライアル版として動作し、画面上にトライアル版である旨が表示されます。公式ページの手順で取得したライセンスキーを、リスト11のようにsetLicenseKeyメソッドで設定すると、Wijmoが正式版として動作するようになり、トライアル版の表示が消えます。

［リスト11］ライセンスキーの設定方法

import * as wj from 'wijmo/wijmo';
wj.setLicenseKey('<ここにライセンスキーを設定>');

まとめ

　本記事では、グレープシティのJavaScriptライブラリWijmo 5を、Reactと組み合わせて利用する方法を説明しました。ReactプロジェクトにWijmoを組み込むことで、WijmoのコントロールをReactのコンポーネントとしてシームレスに活用できます。

参考資料

• Wijmo
• グレープシティ
• React