Использование визуализаций сообщества в качестве фильтров

Вы можете использовать визуализацию сообщества в качестве фильтра для диаграмм , фильтруя отчет на основе взаимодействий с этой визуализацией.

Как работают фильтры диаграмм визуализации сообщества

Для использования визуализации сообщества в качестве фильтра диаграммы вам необходимо:

  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);
};

Data Studio будет игнорировать сообщения, отправленные функцией dscc.sendInteraction если в редакторе отчетов не включены взаимодействия типа «фильтр» для вашей визуализации.

Отслеживание состояния фильтра

Объект data , который Data Studio отправляет в вашу визуализацию, содержит информацию о взаимодействиях.

Пример data.interactions :

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

Если value.data не равно undefined, значит, в данный момент визуализация фильтрует другие компоненты панели мониторинга.

Пример:

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 определяет, как Data Studio будет фильтровать вашу панель мониторинга.

Фильтр одного измерения

Эта гистограмма визуализирует количество книг по языкам (одно измерение и один показатель). Предположим, пользователь выбрал столбец, соответствующий книгам на испанском языке, и вы хотите, чтобы этот выбор отфильтровал остальную часть панели мониторинга. Ваши interactionData будут выглядеть следующим образом:

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

Многомерный фильтр

Эта тепловая карта отображает температуру по дням недели и времени суток (два измерения и одна метрика). Предположим, пользователь выбрал ячейки, соответствующие «вечеру понедельника» и «дню пятницы», и вы хотите отфильтровать остальную часть панели мониторинга, чтобы отображались только данные либо за «вечер понедельника», либо за «день пятницы». Ваши interactionData будут выглядеть следующим образом:

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