Beast Mode計算例：カード要素変換

はじめに

これらのBeast Mode計算を使用すると、カード、テーブル、まとめ数字などのDomoのさまざまな要素に特別なフォーマットを適用できます。

表内の値を定型化する

計算を使用して、表中のセルの値を定型化します。例えば、「salesperson」という列のセルの値が「Bob」の値に等しい場合にセルを定型化するには、「Sales Person」と言う計算を作成して以下のコードを使用します。

CASE `salesperson`
when 'Bob' then CONCAT('<span style="color:red">',`salesperson`,'</span>')
else `salesperson`
end

表カードにURLを含める

表カードにURLを挿入するには以下のBeast Modeを使用します。

CONCAT(`TopicName`, ': ', '<a href="', `Link`, '" target="_blank">', `Link`, '</a>')

"TopicName"は、トピック名を持つDataSet内のフィールドを参照し、"Link"はURLを持つフィールドを参照します。URLはhttps://で開始する必要があります。

表に条件付き書式を適用する

以下のBeast Mode例は、標準的な表での条件付き書式の作成方法を示しています。これは、修正されたドリルパスの表ビューが必要なときに使用できます。これらのオプションは、現在Sumo表では利用できません。

このフォーマットは、HTML文字列を作成し、その中にユーザー定義の条件によって背景色が変化するDIV要素を入れることで達成することができます。 

緑色の背景（#bbe491）
CONCAT('<div style="background-color:#bbe491; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'Green Conditional Format', '</a></div>')

黄色の背景（#ccf84）
CONCAT('<div style="background-color:#fccf84; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'Yellow Conditional Format', '</a></div>')

赤色の背景
CONCAT('<div style="background-color:#fcbcb7; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'Red Conditional Format', '</a></div>')

Beast Modeの例

CASE

WHEN `CHANGE` > 0 THEN CONCAT('<div style="background-color:#bbe491; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')

WHEN IFNULL(`CHANGE`, 0) = 0 THEN CONCAT('<div style="background-color:#fccf84; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')

WHEN `CHANGE` < 0 THEN CONCAT('<div style="background-color:#fcbcb7; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')

END

Beast Modeを適用した表の例

別のアプローチ

セル全体ではなくテキストブロックの部分だけをハイライトさせるときは、以下のコードを使います：

<span style="background-color:#ff666;display:block"><a href="#">Your Text Here</a></span>

表示ブロック全体ではなく、テキスト部分だけをハイライトさせるときは、次のコードを使います：

  <span style="color:#ff666;"><a href="#">Your Text Here</a></span>

ドリルの問題に対処するために<a>タグが追加されていることと、フォント色だけのときはスタイルに"color"が必要であることに注意してください。

まとめ数字に書式を適用する

まとめ数字のフォントサイズの変更には、Beast Modeを使用できます。まとめ数字の外観の他の側面をカスタマイズしたり、同じカードに複数のまとめ数字を含めることもできます。 

まとめ数字のフォントサイズを変更する

まとめ数字のフォントサイズを変更するには、Beast Mode計算をCONCAT関数でラップします。この関数では、次のようにdivを使用してフォントサイズを指定します。

CONCAT(
'<div style="font-size:20px">'
,CONCAT('2017',' ','Booked',' ','Rev',' ','$',round(sum(`Grouped booked Rev`)/1000000,2),'M',' ','v.',' ',' ','Budget',' ','Rev',' ','$',round(sum(`2017 Budget Revenue`)/1000000,2),'M')
,'</div>'
)

カスタマイズされたまとめ数字を作成する

カスタマイズされたまとめ数字を作成すると、カード内で最も重要な情報を素早く把握できます。複数の範囲、色、記号など追加すれば、パーソナライズされたまとめ数字を作成し、ユーザーに最初に目にしてほしい情報をハイライト表示できます。

そのためには、concat()関数を使用してBeast Mode計算を作成します。これにより、複数の文字列を1つに組み合わせることができます。これにより、桁区切りの文字などの書式オプションがバイパスされるため、これらのオプションはconcat()ステートメントに組み込む必要があります。

以下の計算例とそれに対応する出力を確認してください。

例1

このBeast Modeを使用すると...

CONCAT(Sum(CASE when `Status` <> 'New' then 1 END),' Total, ',sum(case when `Date` >= date_sub(curdate(),INTERVAL 1 MONTH) then 1 else 0 end),' In Last 30 Days')

...次のチャートのようなまとめ数字が表示されます（Beast Mode計算の一部は、対応するまとめ数字の部分と一致するように色分けされています）。

例2

このBeast Modeを使用すると...

CONCAT('$',round(SUM(Case when (`Date`<= curdate() and `Status` = 'Accepted' and `Account Status` = 'Active') then `Amount` END)/1000000,2),’m – ‘,(case when `Value` > 0 then 'm - ? ' else 'm - ? ' end),round(round(SUM(Case when (`Date`<= curdate() and `Status` = 'Accepted' and `Account Status` = 'Active') then `Amount` END)/SUM(Case when (`Date`<= date_sub(curdate(), INTERVAL 1 MONTH) and `Status` = 'Accepted' and `Account Status` = 'Active') then `Amount` END)-1,2)*100,0),'% From 30 Days Ago')

...次のチャートのようなまとめ数字が表示されます（Beast Mode計算の一部は、対応するまとめ数字の部分と一致するように色分けされています）。

例3

concat()関数にHTMLを追加すれば、画像、色分け、その他のスタイルを含めることもできます。サポートされているHTMLの完全なリストは、「HTML表の制限」を参照してください。

このBeast Modeを使用すると...

CONCAT('<a style="color: #f00">',SUM(CASE WHEN `Color` = 'Red' THEN `Value` END),'</a>',' Total Red | ','<a style="color: #00c200">',SUM(CASE WHEN `Color` = 'Green' THEN `Value` END),'</a>',' Total Green | ','<a style="color: #ff0">',SUM(CASE WHEN `Color` = 'Yellow' THEN `Value` END),'</a>',' Total Yellow')

...次のチャートのようなまとめ数字が表示されます（Beast Mode計算の一部は、対応するまとめ数字の部分と一致するように色分けされています）。

まとめ数字に関する詳細は、「チャートのまとめ数字を設定する」を参照してください。

複数のまとめ数字を作成する

Beast Modeを使うと、複数のカードのサマリーの統計を表示させることができます。これにより、カードの閲覧ユーザーは、カードが伝えようとしているストーリーを把握しやすくなります。

Beast Mode計算で適用する必要がある必須関数はconcat()です。concat()ステートメント内には、テキストやあらゆる組み合わせのメトリクスなどを追加できます。

例：

CONCAT(calculation, ‘Text’, [etc])

例

以下のBeast Mode計算では、レコードの合計数と比較して、STATUSフィールドの値が“COMPLETE”になるレコード数を表示するまとめ数字を、CONCAT関数を使用して作成します：

CONCAT(SUM(CASE WHEN STATUS = 'COMPLETE' THEN `Amount` ELSE 0 END), ' out of ', 'SUM(`Amount`))

例えば、完了したレコードが65でレコード合計数が80である場合、上の関数の結果は、「65 out of 80」になります。

まとめ数字に関する詳細は、「チャートのまとめ数字を設定する」を参照してください。

値の変更に基づいて表に異なる画像を表示する

表カードではHTMLコーディングを使用できるため、Beast ModeのCASEステートメントを使用し、データ値に基づいて画像を取り込むことができます。 

例えば、次のBeast Modeを使用すると、「Profit」が正か負かに基づいて、表に異なる画像を表示できます。

case when `Profit`<0 then

CONCAT('<div style="text-align:center"><img alt="DOWN" height="20px" src="http://www.clipartkid.com/images/27/download-public-domain-ihtHTQ-clipart.png">','</div>')

else

CONCAT('<div style="text-align:center"><img alt="UP" height="20px" src="http://www.clipartkid.com/images/239/up-arrow-green-clip-art-clip-arts-clip-art-clipartlogo-com-Cy8l...>')

end

「src」セクションには、使用する画像のURLを挿入します。