커뮤니티 시각화를 필터로 사용

커뮤니티 시각화를 차트 필터로 사용하여 커뮤니티 시각화와의 상호작용을 통해 보고서를 필터링할 수 있습니다.

커뮤니티 시각화 차트 필터의 작동 방식

커뮤니티 시각화를 차트 필터로 사용하려면 다음을 수행해야 합니다.

  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"]
  ]
}