リスト エレメント、インジケーター エレメント、テーブル エレメントの高度な書式設定に Arcade 式を使用して、データ ポイントがどのようにレンダリングされるかをカスタマイズできます。 データ ポイントは、エレメントの構成方法に応じて、フィーチャまたは統計サマリーを表すことができます。 フィーチャを使用する場合は、1 つのデータ ポイントが 1 つのフィーチャを表します。 統計を使用する場合は、各データ ポイントがその統計の結果を表します。 リスト エレメントは、フィーチャ データ ポイントをライン アイテムとしてレンダリングし、各ラインが 1 つのデータ ポイントを表します。 インジケーター エレメントは、データ ポイントを 1 つずつレンダリングします。 テーブル エレメントは、フィーチャ データ ポイントを行としてレンダリングし、行の各セルのコンテンツを制御し、書式設定することができます。
属性式 (レイヤーのポップアップ、スタイル、ラベルで使用) とは異なり、エレメントごとに 1 つの式が作成されます。 式はデータ ポイントごとに実行され、そのエレメントのシステム定義プロパティおよびユーザー定義プロパティを返します。 システム定義プロパティは、テキスト色や背景色など、これ以外の場合はエレメントで構成する設定です。 ユーザー定義プロパティは、ユーザーによって式で定義され、エレメントの構成時に参照できます。
注意:
Web マップで作成された属性式は、ダッシュボード エレメントでの使用のために引き継がれません。
次の表に、レイヤーのどのデータが式に渡されるかについてまとめます。
変数名 | タイプ | 説明 |
---|---|---|
$datapoint | フィーチャまたはディクショナリ | インジケーター、テーブル、リストに適用 |
$reference | ディクショナリ | インジケーターに適用 |
注意:
Arcade 式を作成する際には、次の点に留意してください。- ディクショナリ内の各プロパティの後にカンマを含めます (最後のプロパティを除く)。
- 属性名には、スペースも特殊文字も使用できません。
リストの書式設定
リスト エレメントでは、[高度な書式設定] オプションを有効にすることで Arcade 式を使用できます。 高度な書式設定の使用を選択すると、他のシステム定義プロパティとともに、色の入力が使用できなくなります。
式はライン アイテムごとに実行され、リスト上の各ラインのレンダリング方法の定義に使用されます。 さらに、[テンプレート]で参照できる属性の作成にも式を使用できます。
データ ポイント属性は、Arcade エディターで $datapoint グローバル変数を使用して参照できます。 次の表に、ディクショナリの形式で式から返すことができるプロパティのリストを示します。
プロパティ | 値のタイプ | 説明 |
---|---|---|
textColor | String | ライン アイテムのベース テキスト色 |
backgroundColor | String | ライン アイテムの背景色 |
separatorColor | String | ライン アイテムの下の枠線の色 |
selectionTextColor | String | ライン アイテムが選択されているときにライン アイテム テキストに使用される色 |
selectionColor | String | アイテムが選択されているときに使用されるベース テキスト色 |
attributes | ディクショナリ | 属性値ペアのディクショナリ |
yourAttributeName | String | {expression/yourAttributeName} 構文を使用して、[テンプレート] で参照できる属性 |
注意:
ジオメトリ関数はサポートされていません。
たとえば、値が特定の閾値を超える場合はリストの背景色を赤にしたいのであれば、次のような変数を作成できます。
var color = IIF($datapoint.fieldName>[threshold], '#F3DED7','')
この変数で、fieldName は値のフィールド、[threshold] は背景色を変更したい値です。 この変数は、次の例のように、プロパティ値として使用できます。
backgroundColor: color,
背景色プロパティでこの変数を使用して、次のような式を作成できます。ここでは、速度の値が 40 を超えると、リスト アイテムの背景色が赤になります。
var color = IIF($datapoint.Speed > 40, '#F3DED7', '');
return {
backgroundColor: color
}
リストでの高度な書式設定の有効化
リスト エレメントで高度な書式設定を有効化するには、次の手順を実行します。
- リストの構成ウィンドウで [リスト] タブをクリックします。
- [高度な書式設定] セクションで、[有効] をクリックします。
注意:
高度な書式設定が有効になると、色の入力などシステム定義の設定が使用できなくなります。 これらの構成は式で行います。 高度な書式設定を有効にする前に値を入力した場合、その値は自動的に式に追加されます。 - エディターで書式設定の式を作成します。
ヒント:
日付フィールドで、テキスト関数を使用して文字列に変換すると、ダッシュボードのタイム ゾーンで表示されます。 テキスト関数では、自分の好みに合わせて値の書式を設定することもできます。 いずれかの Arcade 関数についてヘルプが必要な場合は、関数の横にある [情報] ボタンをクリックすれば、詳細情報が表示されます。 - 指定した間隔で式を実行したい場合、たとえば、式が [Now()] 関数を使用する場合は、[スクリプトの更新] 切り替えボタンを有効にして、更新間隔を設定します。
- 構文 {expression/yourAttributeName} を使用し、[テンプレート] フィールドに新しい属性を入力します。
インジケーターの書式設定
インジケーター エレメントでは、[高度な書式設定] オプションを有効にすることで Arcade 式を使用できます。 高度な書式設定を有効にすると、色のオプションや値の書式設定など、システム定義プロパティが使用できなくなり、条件付き書式がオフになります。 式を使用して、これらのレンダリング プロパティおよび条件付きのロジックを定義します。 さらに、式は、[一般] タブの [タイトル] フィールドと [説明] フィールドで参照されるようにユーザー定義属性を配布できます。
インジケーターに参照値を含める場合、高度な書式設定が有効であると、[データ] タブで統計ベースの参照タイプのみを使用できます。 以前に固定値の参照タイプを定義した場合、その参照タイプは、変換係数、テキスト、および色の書式設定とともに、式に自動的に追加されます。 高度な書式設定を有効にする前に行った値の書式設定は削除されるため、値パターンを使用して式で定義する必要があります。
注意:
Arcade では、前の値はサポートされていません。 高度な書式設定を有効にする前に、前の値の参照タイプを設定した場合は、現在値に変換されます。
データ ポイント属性は、Arcade エディターで $datapoint グローバル変数を使用して参照できます。 値のタイプがフィーチャであるか統計であるかに応じて、$datapoint がそれぞれフィーチャまたはディクショナリのタイプとなります。 [データ] タブで参照統計が構成されている場合、エディターで $reference グローバル変数も使用できます。
次の表に、ディクショナリの形式で式から返すことができるプロパティのリストを示します。
プロパティ | 値のタイプ | 説明 |
---|---|---|
textColor | String | インジケーター エレメントのベース テキスト色 |
backgroundColor | String | インジケーター エレメントの背景色 |
topText | String | 上位テキストとして表示 |
topTextColor | String | 上位テキストの色 |
topTextOutlineColor | String | 上位テキストのアウトライン色 |
topTextMaxSize | String | 上位テキストの最大サイズ (超極小 | 極小 | 小 | 中 | 大 | 特大 | 超特大) |
middleText | String | 中位テキストとして表示 |
middleTextColor | String | 中位テキストの色 |
middleTextOutlineColor | String | 中位テキストのアウトライン色 |
middleTextMaxSize | String | 中位テキストの最大サイズ (超極小 | 極小 | 小 | 中 | 大 | 特大 | 超特大) |
bottomText | String | 下位テキストとして表示 |
bottomTextColor | String | 下位テキストの色 |
bottomTextOutlineColor | String | 下位テキストのアウトライン色 |
bottomTextMaxSize | String | 下位テキストの最大サイズ (超極小 | 極小 | 小 | 中 | 大 | 特大 | 超特大) |
iconName | String | インジケーターに定義されたアイコンの名前 注意:アイコン名は、式の外部で定義されます。 |
iconAlign | String | 中位テキストに隣接するアイコンの配置 (左 | 右) |
iconColor | String | アイコンの塗りつぶし色 |
iconOutlineColor | String | アイコンのアウトライン色 |
noValue | Boolean | インジケーターの代わりに、値がないというテキストを表示するフラグ (true | false) |
attributes | ディクショナリ | 属性値ペアのディクショナリ |
yourAttributeName | String | {expression/yourAttributeName} 構文を使用して、[タイトル] フィールドおよび [説明] フィールドで参照できる属性 |
たとえば、ある計測単位で値を表示するインジケーターがあるが、同じ値をそれより下の別の単位でも表示したい場合は、既存の値を変換する変数を作成できます。 平均気温を摂氏で表示するインジケーターでは、値を華氏でも表示するために、式で使用する Fahrenheit 変数を作成できます。
var fahrenheit = Floor(($datapoint.avg_Temperature/5*9)+32)
その後、この変数を次のようにプロパティ値として含めることができます。
bottomText: fahrenheit,
下位テキスト プロパティでこの変数を使用して、次のような式を作成できます。ここでは、平均気温 (摂氏) がインジケーターの中位テキストで表示され、華氏の値が下位テキストで表示されます。
var farenheit = Floor(($datapoint.avg_Temperature/5*9)+32)
return {
topText: 'Average Temperature',
middleText: Floor($datapoint.avg_Temperature),
bottomText: farenheit,
}
インジケーターでの高度な書式設定の有効化
インジケーター エレメントで高度な書式設定を有効化するには、次の手順を実行します。
- インジケーターの構成ウィンドウで、[インジケーター] タブをクリックします。
- [高度な書式設定] セクションで、[有効] をクリックします。
注意:
高度な書式設定が有効になると、色の入力などシステム定義の設定が使用できなくなります。 これらの構成は式で行います。 高度な書式設定を有効にする前に値を入力した場合、その値は自動的に式に追加されます。 - エディターで書式設定の式を作成します。
ヒント:
いずれかの Arcade 関数についてヘルプが必要な場合は、関数の横にある [情報] ボタンをクリックすれば、詳細情報が表示されます。 - 指定した間隔で式を実行したい場合、たとえば、式が [Now()] 関数を使用する場合は、[スクリプトの更新] 切り替えボタンを有効にして、更新間隔を設定します。
- 必要に応じ、構文 {expression/yourAttributeName} を使用して、[タイトル] および [説明] フィールドで新しい属性を参照できます。
テーブルの書式設定
テーブル エレメントでは、[高度な書式設定] オプションを有効にすることで Arcade 式を使用できます。 高度な書式設定を使用するよう選択すると、色の入力、テキストの配置オプション、およびその他のシステム定義されたプロパティが使用できなくなり、代わりに式で設定されます。
式はテーブル内の行ごとに実行され、列の各セルのコンテンツと書式設定を定義するために使用されます。 データ ポイント属性は、Arcade エディターで $datapoint グローバル変数を使用して参照できます。
cells ディクショナリには、テーブルの構成の [データ] タブで定義された各フィールドのプロパティが必要です。 たとえば、Zone のカテゴリ フィールドと、Transaction Amounts の値フィールドを持つ、グループ化された値のテーブルでは、cells ディクショナリには zone と sum_transaction_amounts の 2 つのプロパティがあります。
次の表に、ディクショナリの形式で式から返すことができるプロパティを示します。
プロパティ | 値のタイプ | 説明 |
---|---|---|
cells | ディクショナリ | [データ] タブで定義されたフィールドに基づく列名のディクショナリ |
displayText | String | セルに表示されるテキスト 注意:displayText プロパティが必要です。 |
hoverText | String | 値にポインターを合わせると表示されるテキスト。 注意:最初にホバー テキストを [テーブル] タブで有効にしておく必要があります。 |
textColor | String | セルのテキスト色 |
backgroundColor | String | セルの背景色 |
textAlign | String | 配置 (左 | 中央 | 右) |
iconName | String | テーブルに定義されたアイコンの名前 注意:アイコン名は、式の外部で定義されます。 |
iconAlign | String | セルのテキストに隣接するアイコンの配置 (左 | 右) |
iconColor | String | アイコンの塗りつぶし色 |
iconOutlineColor | String | アイコンのアウトライン色 |
高度な書式設定を使用し、テーブルで条件付きの書式設定を作成することもできます。 たとえば、最近の復元要求を表示するテーブルで、条件付き書式設定を適用することで、要求のステータスを区別するなどです。 次のような変数を使用し、ステータスに基づいてセルの色を変更する変数を作成できます。
var statusColor = When($datapoint.status== 'new', 'yellow', $datapoint.status== 'closed', 'lightgray', 'white')
変数を backgroundColor プロパティに割り当て、新しいインシデントについてはセルをハイライト表示し、クローズしたインシデントについてはセルの強調を解除できます。
var statusColor = When(
$datapoint.status == 'new', 'yellow',
$datapoint.status == 'closed', lightgray', 'white')
return {
cells:{
requests:{
displayText: <span>${$datapoint.requests}</span>,
backgroundColor: statusColor,
}
}
}
注意:
式は、テーブルのサマリー行には適用されません。
テーブルでの高度な書式設定の有効化
テーブル エレメントで高度な書式設定を有効化するには、次の手順を実行します。
- テーブルの構成ウィンドウで [値] タブをクリックします。
- [高度な書式設定] セクションで、[有効] をクリックします。
注意:
高度な書式設定が有効になると、色の入力などシステム定義の設定が使用できなくなります。 これらの構成は式で行います。 高度な書式設定を有効にする前に値を入力した場合、その値は自動的に式に追加されます。 - エディターで書式設定の式を作成します。
ヒント:
いずれかの Arcade 関数についてヘルプが必要な場合は、関数の横にある [情報] ボタンをクリックすれば、詳細情報が表示されます。 - 指定した間隔で式を実行したい場合、たとえば、式が [Now()] 関数を使用する場合は、[スクリプトの更新] 切り替えボタンを有効にして、更新間隔を設定します。
アイコン名の定義
インジケーター エレメントとテーブル エレメントを使用すると、エレメントの構成に SVG アイコンを含めることが可能になります。 高度な書式設定を使用する場合、アイコンは Arcade 式に追加されます。
Arcade 式にアイコンを追加するには、次の手順を実行します。
- Arcade エディターの下の [アイコン] セクションで [追加] をクリックします。
- アイコンを選択するか、カスタム アイコンを作成します。
- アイコンの名前を入力します。
- Arcade 式で、アイコン名を iconName プロパティの値として返します。
カラー値
式にカラー値を含める場合、その値は文字列 (引用符で囲まれる) として返される必要があります。 未定義のままのカラー値または無効なカラー値は、自動的にデフォルトを使用します。 使用可能なカラー値タイプには、Hex 値、RGB、RGBA、HSL、HSLA が含まれます。 次に、サポートされている構文とともにいくつかの例を示します。
- Hex
- #090
- #009900
- #090a
- #009900aa
- RGB および RGBA
- rgb(34, 12, 64)
- rgba(34, 12, 64, 0.6)
- HSL および HSLA
- hsl(50, 33%, 25%)
- hsla(50, 33%, 25%, 0.75)