メトリックカード

メトリックカードウィジェットは、設定可能なカード形式のインターフェースに Workshop の変数値を表示します。通常、メトリックカードは Workshop モジュール内の主要な数値を目立つように表示するために使用します。メトリックカードウィジェットを設定するモジュールビルダーは、次のことができます。

• メトリクスをグループでまとめて表示する。
• 条件付き書式設定を使用してメトリクスに注意を向け、ユーザーがメトリクスの値を解釈しやすくする。
• メトリクスのレイアウトを設定し、カード、タグ、またはリストとして表示する。
• 時系列の履歴を示すスパークラインなど、時系列データを表示する。

以下のスクリーンショットは、Workshop モジュールでメトリックカードウィジェットを使用し、各国の COVID-19 ワクチン接種状況に関する統計を表示する例を示しています。以降の例も、この例のコンテキストを使用します。

設定オプション

以下の画像は、未設定のメトリックカードウィジェットの初期状態と、COVID-19 ワクチン接種状況のメトリクスを表示するように設定したウィジェットの状態を示しています。

まず、矢印の右側にある1つ目の画面に示す、メトリクスのグループで構成されるウィジェットの設定オプションを説明します。次に、矢印の右側にある2つ目の画面に示す、個々のメトリクスで利用可能な設定オプションを説明します。

ウィジェットの設定

メトリックカードウィジェットの主要な設定オプションは、次のとおりです。

• ラベル

  • メトリックカードウィジェットに任意のラベルを設定します。このテキストはウィジェットの上部に表示されます。

• メトリクス

  • メトリクスを追加ボタンは、メトリックカードウィジェットに新しいメトリクスを追加します。
  • 既存のメトリクスの設定をコピーするには、メトリクスを複製を選択します。
  • リスト内のメトリクスにある上向きと下向きの矢印で、ウィジェット内に個々のメトリクスを表示する順序を変更します。

• レイアウトスタイルを選択

  • カード

    • 上記の例や以下のスクリーンショットのように、ウィジェット内のメトリクスをカードとして表示します。時系列の可視化は、このレイアウトスタイルでのみサポートされます。
      
      
      
      

    • カードのレイアウトスタイルでは、次の項目も選択できます。

      • カードを配置する方向：横方向または縦方向。
      • 各カード内のデータの配置に使用するテンプレート：上下配置または左右配置。
  • タグ

    • 以下のスクリーンショットのように、ウィジェット内のメトリクスをタグとして表示します。
      
      
      
      

    • タグのレイアウトスタイルでは、カードを配置する方向を横方向または縦方向から選択できます。

  • リスト

    • 以下のスクリーンショットのように、ウィジェット内のメトリクスをリストとして表示します。
      
      
      
      

    • リストのレイアウトスタイルでは、各カード内のデータの配置に使用するテンプレートを上下配置または左右配置から選択できます。

• メトリクスのサイズを選択

  • ウィジェット内のすべてのメトリクスの表示サイズを設定します。選択肢は、コンパクト、標準、大です。

• 条件付き表示設定

  • 変数値やその他の条件に基づいて、メトリックカードウィジェットを表示または非表示にできます。これにより、現在のアプリケーションの状態に応じて、ユーザーに表示するメトリクスを動的に制御できます。
  • true または false と評価される条件を指定して、条件付き表示設定を行います。条件が false と評価されると、メトリックカードウィジェット全体が非表示になります。

メトリクスの設定

個々のメトリクスは、次のオプションを使用して設定できます。

• ラベル
  • メトリクスに任意のラベルを設定します。このテキストは個々のメトリクスの上部に表示されます。
• 説明
  • 任意の固定の説明テキスト、または変数に基づく説明テキストを設定します。以下に示すように、ユーザーが情報アイコンにカーソルを合わせると説明が表示されます。

• 値の種類

  • 表示する値が文字列か数値かを指定します。
  • このセクションでは、次のオプションも設定します。
    • 値： メトリクスに設定する値は、対応するデータ型の Workshop 変数を元にしている必要があります。したがって、値の種類が文字列に設定されている場合は、メトリクスに値を設定するために文字列変数を選択する必要があります。同様に、値の種類が数値に設定されている場合は、数値変数を選択する必要があります。Workshop 変数の詳細については、変数を参照してください。
    • 数値の書式設定： この任意の設定は、値の種類が数値の場合にのみ利用可能です。表示する小数点以下の桁数など、変数の数値を表示するための値の書式を指定できます。メトリクスに表示する小数点以下の桁数を制限するには、小数点以下の桁数フィールドで最大の値を設定します。それより小数点以下の桁数が多い値は、その桁数に丸められます。たとえば、小数点以下の最大桁数を 2 に設定すると、3.14159 は 3.14 と表示されます。値の書式設定の詳細については、Workshop の書式設定を参照してください。
    • 条件付き書式設定： この任意の設定では、表示されるメトリクスの値にルールに基づく書式を適用できます。以下の例では、値が0以下の場合はメトリクスを赤、それ以外の場合は緑で表示しています。詳細については、Workshop の書式設定を参照してください。
      
      
      
      

• 補助メトリクスを表示しますか？ 同じメトリクス表示内で、主要なメトリクスの下に2つ目のメトリクスを表示するための任意の設定です。この切り替えを「はい」に設定すると、補助メトリクスの値の種類の設定が開きます。この設定は、主要なメトリクスの設定と同じ形式です。

• 可視化を表示しますか？ メトリクスとともに、時系列の履歴を示すスパークラインを表示するための任意の設定です。この切り替えを「はい」に設定すると、次のオプションを含む設定画面が開きます。

  • 位置： スパークラインをメトリクスの値と左右配置（隣）で表示するか、上下配置（下）で表示するかを指定します。

  • 時系列セット： 可視化する時系列です。以下のスクリーンショットに示すように、時系列セット変数を使用して指定します。時系列セット変数を含む Workshop 変数の詳細については、変数を参照してください。
    
    
    
    

  • 期間： データを表示する期間を指定します。プリセットの選択肢には、すべての期間、過去1時間、過去1日、過去1週間がありますが、カスタム範囲を選択すると詳細な範囲セレクターが開き、完全一致または相対的な範囲を指定できます。期間の指定の詳細については、Workshop の時系列プロパティを参照してください。

  • ベースライン： このパラメーターをオンにすると、スパークラインとともにベースラインが表示され、傾向を視覚的に解釈しやすくなります。ベースラインの指定の詳細については、Workshop の時系列プロパティを参照してください。

• インタラクティブメトリクス： カードの選択時に、コマンド、アクション、またはイベントをトリガーするための任意の設定です。デフォルトはインタラクションなしです。イベントを選択した場合、{tab name} に切り替えまたは {page name} に切り替えイベントによって、メトリクスを選択状態として表示することもできます。詳細については、選択状態を参照してください。

選択状態

インタラクティブメトリクスがイベントに設定されている場合、そのメトリクスのイベントの1つ以上がレイアウトの状態を変更しないイベントである間、ウィジェットはメトリクスを選択状態としてハイライトします。たとえば、{tab name} に切り替えイベントを持つメトリクスは、そのタブが選択されている間、選択状態として表示されます。{page name} に切り替えイベントを持つメトリクスは、そのページが開いている間、選択状態として表示されます。ハイライトは、ユーザーが選択したメトリクスではなく、現在のタブまたはページに応じて変わります。変数の値を設定イベントなどのその他のイベントでは、メトリクスは選択状態として表示されません。

ウィジェットは各メトリクスを個別に確認するため、複数のメトリクスが同時に選択状態として表示されることがあります。タブウィジェットやステッパーウィジェットとは異なり、メトリックカードウィジェットにはアクティブ時の色の設定はありません。