【Sisense Widget】Timeframe Widgetを作成してみた

こんにちは。

実はぼくは最近まで通称「G」と呼ばれているらしい'ゴキブリ'という昆虫を見たことがなかったのだが、先日、ついにコンビニから帰る途中で出会ってしまった。あまりに興奮して写真も撮ってしまったよ...
さすがに神聖なSisense Knowledgeにゴキブリの写真なんて載せたら生きていけなくなりそうだから、ここで載せるのはやめておこうと思う。（見たい方は連絡ください）

「変な人」と思ったそこのあなた。北海道民はみんなこんな感じですよ。

「ゴキブリを初めて見た北海道県民の反応が面白いw」（Youtubeより）

...さて。話を本題に。
今回は、利用期間等を表示するTimeframe Widgetを作成する。それほど難しくないウィジェットなので、サクッと作ってしまおう！データのダウンロードはこちらから。

1. データの準備

今回のスタートとゴールはこちら。「User_Name」「Start_Date」「End_Date」が入ったデータを使って、期間を表示したTimeframe Widgetを作成したい。

なお、データについての設定は以下の通り。
・2020/01/01~2020/01/20の期間限定サービス
・「Start_Date」= 登録日, 「End_Date」= 登録解除日
・「End_Date」がNULL = 期間内に解除することがなかった

スタートとゴール、設定を確認したところで、ここからほんの少しだけデータを加工していく。

今は「Start_Date」と「End_Date」のように日付が横持ちになっているが、今回の目的物を作成するためには日付を縦持ちに変換する必要がある。
また、元データでは「User_Name」= 'Horse'の「End_Date」がNULLになっている。NULLのままだとうまく表示することができないので、今回はサービス終了日の2020/01/20を入れることにする。

カスタムテーブルを作成し、以下のコードを張り付ける。

SELECT
    [User_Name]
  , [Start_Date] AS Date
  , 'Start' AS Category
FROM
    [Test_Data]
UNION ALL
SELECT
    [User_Name]
  , CASE 
      WHEN [End_Date] IS NULL THEN CreateDate(2020,01,20)
      ELSE [End_Date] 
    END AS Date
  , 'End' AS Category
FROM
   [Test_Data]

「解析に成功しました」の表示が出たら、プレビューで確認してみる。
以下のように、日付が縦持ちになっており、「User_Name」= 'Horse'の日付がNULLから変更できているのを確認したら、保存してビルドする。

これで準備完了！

2. ウィジェットの作成

次はウィジェットを作成していく。
散布図ウィジェットで以下のように設定する。

X軸：Days 単位 Date
Y軸：User_Name
break by / color：User_Name

上図を見ても分かるように、ただ設定しただけではUser_NameごとにStart_DateとEnd_Dateがプロットされるだけで、線で繋がっていない。線でつなぐためには、メニューボタン→「スクリプトの編集」で編集画面を開き、以下のスクリプトを張り付けて保存する必要がある。（スクリプトについては、こちらの記事を参考にさせていただきました）

widget.on('processresult', function(se,ev){
ev.result.plotOptions.series.dataLabels.formatter = function(){
var temp = this.point.pointText.toString().substring(4,7) + this.point.breakByValue;
return temp;
};
});

widget.on('render', function(se, ev){
se.queryResult.plotOptions.series.lineWidth = 2;
});

ウィジェットの編集画面に戻ってリフレッシュすると、目的物であるTimeframe Widgetが完成するはずだ。

3. まとめ

今回は、散布図を通常とは少し異なる使い方をして、期間を可視化するTimeframe Widgetを作成してみた。ありそうで意外と見ないウィジェットだと思う。（特にSisenseでは）

もちろん、作成してみたはいいものの、問題がないわけではない。今回は「User_Name」が少なかったから問題なかったが、これが増えたら見栄えが悪くなってしまうことや、必ずbreak by / colorにY軸と同じものを入れなければならない（単色にできない）ことなど、まだまだ使い勝手が良いとは言えないのが現状だ。

時間があるときに少しずつ改良していきたいと思う。

それでは。