フィルタとしてコミュニティ ビジュアリゼーションを使用する

コミュニティ ビジュアリゼーションとのインタラクションを通じてレポートをフィルタ処理することで、コミュニティ ビジュアリゼーションをグラフフィルタとして使用することができます。

コミュニティ ビジュアリゼーションによるグラフフィルタの仕組み

コミュニティ ビジュアリゼーションをグラフフィルタとして使用するには、以下を行う必要があります。

  1. config.interactions プロパティを設定する
  2. フィルタ情報を含む dscc.sendInteraction() を呼び出すコードを記述する

インタラクションの定義

ビジュアリゼーションがインタラクションをサポートしている場合、設定で定義する必要があります。定義すると、プロパティ パネルにチェックボックスが表示されます。

config.interactions の例:

{
      "data": ...,
      "style": ...,
      "interactions": [
        {
          "id": "interactionsConfigId",
          "supportedActions": ["FILTER"]
        }
      ]
    }
    

フィルタのコードを記述する

dscc.sendInteraction() を使って、ユーザーの操作をフィルタ操作に関連付けます。

例:

const handleInteraction = () => {
      // this is the interactionId defined in the config
      const interactionId = "interactionConfigId";

      // the ID of the field you want to filter on
      const dimensionId = "qt_ky8sltutsb";

      // the value of the field you want to filter on
      const value = "USA";

      // the interaction type - only FILTER is supported right now
      const FILTER = dscc.InteractionType.FILTER;

      let interactionData = {
        concepts: [dimensionId],
        values: [[value]]
      };

      // send Data Studio an instruction to filter other charts in the dashboard
      dscc.sendInteraction(interactionId, FILTER, interactionData);
    };
    

レポートの編集者がビジュアリゼーションの「フィルタ」インタラクションを有効にしていない場合、dscc.sendInteraction によって送信されたメッセージは無視されます。

フィルタ状態のトラッキング

ビジュアリゼーションに送信される data オブジェクトには、インタラクションに関する情報が含まれています。

data.interactions の例:

"onClick": {
      "value": {
        "type": "FILTER",
          "data": {
          "concepts": [
            "qt_h6oibrb6wb",
            "qt_i6oibrb6wb"
          ],
            "values": [
              [
                "Afternoon",
                "Sunday"
              ],
              [
                "Afternoon",
                "Thursday"
              ],
              [
                "Morning",
                "Tuesday"
              ]
            ]
        }
      },
      "supportedActions": [
        "FILTER"
      ]
    }
    

value.data が未定義でない場合、ダッシュボードの他のコンポーネントはビジュアリゼーションによってフィルタ処理されています。

例:

const barHighlighting = (interactionsById) => {
      // the interactionId defined in the config
      const interactionId = "interactionConfigId";

      const interactionField = interactionsById[interactionId];

      // if filter is selected
      const filterSelected = interactionField.type === "FILTER";
      // if the viz is currently acting as a filter
      const filterHasData = "data" in interactionField;

      if (filterSelected && filterHasData){
        // call the highlightBar function on the selected data
        highlightBar(interactionField.data);
      } else {
        // clear highlighting if no data selected
        clearHighlight()
      }
    }
    

interactionData の構築

interactionData オブジェクトにより、ダッシュボードをフィルタ処理する方法が定義されます。

単一ディメンションでのフィルタ

この棒グラフでは、言語ごとに本の数(1 つのディメンションと 1 つの指標)がビジュアル化されています。ユーザーがスペイン語の本に対応する棒グラフを選択することで、ダッシュボードの残りの部分を除外するとします。interactionData は次のようになります。

var interactionData = {
      "concepts": ["languageDimensionId"],
      "values": [["Spanish"]]
    }
    

複数ディメンションでのフィルタ

このヒートマップは、曜日と時刻ごとの温度(2 つのディメンションと 1 つの指標)を示します。ユーザーが「月曜日の夕方」と「金曜日の午後」に対応するセルを選択し、「月曜日の夕方」または「金曜日の午後」のデータのみを表示するようにダッシュボードの残りを除外するとします。interactionData は次のようになります。

var interactionData = {
      "concepts": ["dayOfWeekDimensionId", "timeOfDayDimensionId"],
      "values": [
        ["Monday", "evening"],
        ["Friday", "afternoon"]
      ]
    }