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

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

Принцип работы

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

  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, если редактор отчетов не включил в визуализации взаимодействия filter.

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

Объект 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 определяет, как Студия данных должна отфильтровать сводку.

Фильтрация по одному параметру

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

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

Фильтрация по нескольким параметрам

На этой тепловой карте показана температура по дням недели и времени суток (два параметра и один показатель). Предположим, пользователь выбрал ячейки "Monday evening" (вечер понедельника) и "Friday afternoon" (день пятницы) и вы хотите отфильтровать по этим значениям остальные данные сводки. Объект interactionData будет выглядеть следующим образом:

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