Community-Visualisierungen als Filter verwenden

Sie können die Community-Visualisierung als Diagrammfilter verwenden und den Bericht nach Interaktionen mit der Community-Visualisierung filtern.

Funktionsweise von Diagrammfiltern für Community-Visualisierungen

So verwenden Sie Ihre Community-Visualisierung als Diagrammfilter:

1. Attribut config.interactions konfigurieren
2. Schreiben Sie Code, der dscc.sendInteraction() mit den Filterinformationen aufruft.

Hinweis :Interaktionen werden nur im Ansichtsmodus unterstützt.

Interaktionen definieren

Wenn Ihre Visualisierung Interaktionen unterstützt, sollten sie in Ihrer Konfiguration definiert werden. Wenn definiert, wird im Eigenschaftenbereich ein Kästchen angezeigt.

Beispiel für config.interactions:

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

Code für einen Filter schreiben

Mit dscc.sendInteraction() können Sie Nutzerinteraktionen einer Filteraktion zuordnen.

Beispiel:

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

Hinweis: Achten Sie darauf, dass interactionId in Ihrer Konfiguration mit einem config.interactions[].id übereinstimmt.

Von dscc.sendInteraction gesendete Nachrichten werden in Looker Studio ignoriert, wenn der Berichtseditor keine Filterinteraktionen für Ihre Visualisierung aktiviert hat.

Nachverfolgen des Filterstatus

Das data-Objekt, das Looker Studio an Ihre Visualisierung sendet, enthält Informationen zu Interaktionen.

Beispiel für data.interactions:

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

Wenn value.data nicht definiert ist, filtert die Visualisierung derzeit andere Komponenten des Dashboards.

Wichtiger Hinweis: Wenn Ihre Visualisierung eine visuelle Annotation zum Filterstatus enthält, z. B. durch Hervorheben eines Werts, sollte im Code value.data geprüft werden, damit die Visualisierung korrekt gerendert wird.

Beispiel:

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 wird errichtet

Mit dem Objekt interactionData wird definiert, wie das Dashboard in Looker Studio gefiltert wird.

Einzeldimensionsfilter

Dieses Balkendiagramm veranschaulicht die Anzahl der Bücher nach Sprache (eine Dimension und ein Messwert). Angenommen, ein Nutzer hat die Leiste für Bücher auf Spanisch ausgewählt und Sie möchten, dass die Auswahl den Rest des Dashboards filtert. Ihre interactionData würde so aussehen:

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

Filter für mehrere Dimensionen

Diese Heatmap zeigt die Temperatur nach Wochentag und Tageszeit (zwei Dimensionen und ein Messwert). Angenommen, ein Nutzer hat die Zellen für „Montagabend“ und „Freitagnachmittag“ ausgewählt und Sie möchten den Rest des Dashboards so filtern, dass nur Daten von „Montagabend“ oder „Freitagnachmittag“ angezeigt werden. Ihr interactionData würde so aussehen:

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