はじめに

このエントリではカスタムのデザインを施したテーブルの作成方法をご説明します。ここでは、以下の様な形でフォントサイズや色などのカスタマイズするとともに、テーブル上をクリックすることで選択や列のソートを行えるようなアクションも追加します。

image

カスタムテーブルの作成

では、まず基本的なテーブルの作成から始めたいと思います。

新規ウィジェットの作成

作成済みの「wiget-tutorial」ウィジェット・ライブラリを開いた状態で、左上のメニューから「Create new widget」を選択します。

5_thumb4_thumb

「Name」の欄に「カスタムテーブル」と入力し、「Create」をクリックします。

1

右上のアプリ選択プルダウン上で任意のアプリを選択してプレビューを表示させます。

2_thumb1[1]

テーブルの追加

HTMLエディタ上で以下の<div>タグを追加します。

<div class="custom-table">

</div>

<div>タグの間にカーソルを合わせ、「Insert」ボタンをクリックします。

7

一覧から「Table created based on dimensions and measures」を選択し、「Insert」をクリックします。

2

以下のHTMLタグが挿入されます。

image

これはHTMLの<table>タグを利用してテーブルの表示を行いますが、表示するデータの扱いはng-repeatHyperCube(ハイパーキューブ)内のデータの参照によって行われています。

ng-repeatは指定された配列から順に要素を取り出してループ処理を行うAngular.jsのディレクティブになります。ここでは、data.headersに例えば「Region」、「# of Customers」といったヘッダーのラベルが配列として格納されていますが、ng-repeatで個別の値をheaderの変数で返し、その値をそれぞれ<th>タグで括って表示しています。data.rowsにはデータ実体が含まれていますが、同様のループ処理で複数行、複数列の表示を行っています。

そしてこのng-repeatでループ処理を行っている対象のデータはHyperCube(ハイパーキューブ)と呼ばれる軸とメジャーを保持する多次元分析キューブのオブジェクトで内部的に保持され、以下の形式で参照を行っています。データ参照は以下の「デフォルト表記法」「略記法」のいずれでも記述が可能ですが、ここでは略記法が主に利用されています。

デフォルト表記法

  • layout.qHyperCube.qDimensionInfo : 軸の情報。qFallbackTitleに軸名を含む。
  • layout.qHyperCube.qMeasureInfo : メジャーの情報。qFallbackTitleにメジャー名を含む。
  • layout.qHyperCube.qDataPages[0].qMatrix: 軸とメジャーの全行・全列のデータを含む。

略記法

  • data.rows: 軸とメジャーの全行・全列のデータを含む。
  • data.headers: 軸とメジャーのヘッダー情報。qFallbackTitleに軸名・メジャー名を含む。
  • data.totals: 合計値の情報
  • data.rowCount: 行数の情報。
  • data.colCount: 列数の情報。

ここではひとまず自動的に挿入されたHTMLタグをそのまま利用しますが、実際にHTMLを自分で記述してデザインする場合には「これらの中にデータはどのような形式で格納されているか?」、「実際にどの様なデータが入っているか?」を確認する必要が出てくる場合があります。その方法についてはこの後の「データの確認によるデバッグ」の項でご説明させて頂きます。

プロパティの追加と設定

画面右下のプロパティパネルの「Edit」ボタンをクリックします。

9_thumb1_thumb3

「Data」セクションをドラッグし、右側の「Appearance」セクションの上にドロップします。

3

「Data」セクションのプロパティを開き、追加可能な軸とメジャーの最小数・最大数を以下の形で設定して「Done」をクリックします。

4

「Sort」セクションをドラッグし、右側の「Data」セクションの下にドロップします。

5

画面右下のプロパティパネルの「Edit」ボタンをクリックしてプロパティの編集を完了します。

14_thumb1_thumb

プロパティに軸とメジャーを設定すると、プレビューにテーブルが表示されることを確認します。

6

データの確認によるデバッグ

ここまででテーブル形式でのデータの表示方法をご紹介しました。ただ先ほど触れた通り、HTMLを自分で実際に記述してデザインする場合には、デバッグを行うためにさきほど扱ったdata.headersやdata.rowsなどのデータ構造や中身を確認する必要がでてきます。そのような確認を行うためにはqw-consoleとChoromeブラウザのDevToolsを利用します。(同様の機能が他のブラウザでも提供されていますが、ここではChromeブラウザを前提にご説明させて頂きます。)

では、ここでは例として「data」(プロパティで設定した軸とメジャーによって構成されるHyperCubeの情報などを含むデータ)の中身を確認してみたいと思います。以下をHTMLの先頭に追加します。

<qw-console log="data">

image

「F12」ボタンを押してDevToolsを立ち上げてConsoleタグを開くと、以下の形で「data」に含まれるデータ構造やデータの中身を確認することが出来ます。先ほどデータ参照方法の説明の際に「data.rows」や「data.headers」などについて触れましたが、それらをここで確認することができます。

image

同様の手順でqw-consoleにsettingsを指定すると、プロパティとして渡されている値を確認することができます。

テーブルのデザイン変更

では、次のステップとして先ほど作成したテーブルのデザインを変更してみたいと思います。

フォントサイズと色の変更

まず、テーブルのフォントサイズとヘッダーや罫線などの色を変えてみたいと思います。そのためにCSSに以下を追加します。

.custom-table {
	table {
		font-size:12px;
		border-color: #BCBCBC;
		
		th {
		  background-color: #8A8A8A;
		  color: white;
		}
	}
}

プレビューを確認すると以下の形でフォントサイズや、罫線・背景色が変更されたことを確認します。

image

テーブルへのストライプの適用

次にテーブルの偶数行・基数行に異なる背景色を適用して、テーブルをストライプのデザインとしたいと思います。それを行うためにng-class-even/ng-class-oddのAngular.jsディレクティブを利用します。

これらはng-repeatと組み合わせて利用し、以下を行います。

  • ng-class-even: 偶数行のみに指定したclassを追加します。
  • ng-class-odd: 奇数行のみに指定したclassを追加します。

HTMLエディタ上で以下の赤字の部分を追加します。このng-class-evenにより、偶数行のみに「row-even」というclassが追加されます。

<div class="custom-table">
<table border="1">
	<thead>
	<tr>
		<th ng-repeat="head in data.headers">
			{{head.qFallbackTitle}}
		</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="row in data.rows" ng-class-even="'row-even'" >
		<td ng-repeat="cell in row.cells">
			{{cell.qText}}
		</td>
	</tr>
	</tbody>
</table>
<div ng-if="data.rows.length === 0">
	Please add dimensions and measures.
</div>
</div>

そして、以下の赤字部分をCSSエディタに追加します。このCSSにより、row-evenのclassを持ったHTML要素に薄い灰色の背景色を設定します。

.custom-table {
	table {
		font-size:12px;
		border-color: #BCBCBC;
		
		th {
		 	background: #8A8A8A;
		 	color: white;
		}
		.row-even {
			background-color: #EDEDED;
		}
	}
}

その結果、以下の形でテーブルにストライプのデザインが適用されます。

image

テーブルへのアクション追加

では、最後にテーブルに幾つかのアクションを追加したいと思います。ここでは、列のソート、項目の選択、追加のデータ表示を行うアクションを追加します。

列のソート

APIではorderBy()reverseOrder()が提供されており、これらを利用すると特定の列でソートを行って表示することができます。ここではorderByを利用して列のソートを行う処理を組み込みます。

HTMLエディタ上で以下の赤字の部分を追加して保存します。

<div class="custom-table">
<table border="1">
	<thead>
	<tr>
		<th ng-repeat="head in data.headers" class="header" ng-click="head.orderBy()">
			{{head.qFallbackTitle}}
		</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="row in data.rows" ng-class-even="'row-even'" >
		<td ng-repeat="cell in row.cells">
			{{cell.qText}}
		</td>
	</tr>
	</tbody>
</table>
<div ng-if="data.rows.length === 0">
	Please add dimensions and measures.
</div>
</div>

以下の形で列のヘッダーをクリックすることで、その列でソートされることを確認します。

image

項目の選択

軸名をクリックするとこで選択が実行される処理を追加します。選択処理はselect()のAPIを利用します。また、選択されている項目の色を変化させる処理も加えるために、HTML要素にclassを追加するng-classのAngular.jsディレクティブも利用します。

HTMLエディタ上で以下の赤字の部分を追加します。

<div class="custom-table">
<table border="1">
	<thead>
	<tr>
		<th ng-repeat="head in data.headers" class="header" ng-click="head.orderBy()">
			{{head.qFallbackTitle}}
		</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="row in data.rows" ng-class-even="'row-even'">
		<td ng-repeat="cell in row.cells" ng-click="cell.select()" ng-class="{'selected':cell.selected}">
			{{cell.qText}}
		</td>
	</tr>
	</tbody>
</table>
<div ng-if="data.rows.length === 0">
	Please add dimensions and measures.
</div>
</div>

CSSエディタ上で以下の赤字部分を追加して保存します。

.custom-table {
	table {
		font-size:12px;
		border-color: #BCBCBC;
		
		th {
		 	background: #8A8A8A;
		 	color: white;
		}
		.row-even {
			background-color: #EDEDED;
		}
		.selected {
			background-color: #6CB33F;
		}
	}
}

アプリ上にウィジェットを配置して軸・メジャーの設定を行い、軸の項目の選択を行うと以下の形で選択が実行され、色が緑に変わることを確認します。

image

追加のデータ表示

Qlik Sensesでは一度のフェッチ処理で取得するデータページのサイズがデータページ(DataPage)によって制御されており、ウィジェットの既定の設定では50行のデータを一度のフェッチ処理で取得する設定となっています。従って、一度に50行以上のデータが存在する場合には51行以降が最初は表示されませんので、それらを表示するには以下のdata.getMoreData()を実行して次のフェッチ処理を実行する必要があります。

  • data.getMoreData() : HyperCubeから追加のデータ取得を行う

ここではボタンをクリックすることでさらにデータを表示する処理を組み込みます。HTMLエディタ上で以下の赤字の部分を追加します。

<div class="custom-table">
<table border="1">
	<thead>
	<tr>
		<th ng-repeat="head in data.headers" class="header" ng-click="head.orderBy()">
			{{head.qFallbackTitle}}
		</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="row in data.rows" ng-class-even="'row-even'">
		<td ng-repeat="cell in row.cells" ng-click="cell.select()" ng-class="{'selected':cell.selected}">
			{{cell.qText}}
		</td>
	</tr>
	</tbody>
</table>
<div ng-if="data.rows.length === 0">
	Please add dimensions and measures.
</div>
<lui-button x-variant="success" ng-click="data.getMoreData()" class="more-data">さらにデータを表示</lui-button>
</div>

ボタンの位置を調整するために、CSSに以下の赤字の部分を追加します。

.custom-table {
	table {
		font-size:12px;
		border-color: #BCBCBC;
		
		th {
		 	background: #8A8A8A;
		 	color: white;
		}
		.row-even {
			background-color: #EDEDED;
		}
		.selected {
			background-color: #6CB33F;
		}
	}	
	.more-data {
		float:right;
	}
}

アプリ上にウィジェットを配置して軸・メジャーの設定を行い、行数の多い軸を設定して「さらにデータを表示」をクリックすると、表示データが追加されることを確認します。

image

まとめ

以上、このエントリではカスタムのデザインを施したテーブルの作成方法をご説明しました。