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

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

コミュニティ由来ビジュアル表示によるグラフフィルタの仕組み

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

  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 Looker Studio an instruction to filter other charts in the dashboard
  dscc.sendInteraction(interactionId, FILTER, interactionData);
};

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

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

Looker Studio からビジュアリゼーションに送信される 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 オブジェクトは、Looker Studio がダッシュボードをフィルタする方法を定義します。

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

この棒グラフは、書籍数を言語（1 つのディメンションと 1 つの指標）別に可視化したものです。ユーザーがスペイン語の本に対応する棒グラフを選択することで、ダッシュボードの残りの部分を除外するとします。interactionData は次のようになります。

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

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

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

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