שימוש בתצוגות חזותיות של הקהילה כמסננים

אפשר להשתמש בתצוגה החזותית של הקהילה כמסנן תרשים ולסנן את הדוח לפי אינטראקציות עם התצוגה החזותית של הקהילה.

איך פועלים המסננים בתרשים של ויזואליזציה של הקהילה

כדי להשתמש בתצוגה החזותית של הקהילה כמסנן של תרשים, צריך:

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

הערה: חשוב לוודא שה-interactionId תואם לערך config.interactions[].id בהגדרה.

אם עורך הדוחות לא הפעיל אינטראקציות של 'סינון' בתצוגה החזותית, מערכת Looker Studio תתעלם מהודעות שנשלחו על ידי dscc.sendInteraction.

מעקב אחרי מצב הסינון

האובייקט data ש-Looker Studio שולח לתצוגה החזותית שלכם מספק מידע על אינטראקציות.

דוגמה data.interactions:

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

אם השדה value.data לא מוגדר, התצוגה החזותית מסננת כרגע רכיבים אחרים של לוח הבקרה.

נקודה חשובה: אם הוויזואליזציה מספקת הערות חזותיות של מצב המסנן, למשל הדגשת ערך, הקוד צריך לבדוק את 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 יסנן את מרכז הבקרה.

מסנן לפי מימד יחיד

תרשים העמודות הזה מציג את מספר הספרים לפי שפה (מאפיין אחד ומדד אחד). נניח שמשתמש בחר את הסרגל שמתאים לספרים בספרדית, ואתם רוצים שהבחירה תסנן את שאר מרכז השליטה. הערך של interactionData ייראה כך:

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

מסנן מאפיינים מרובים

מפת החום הזו מציגה טמפרטורה לפי יום בשבוע ושעה ביום (שני מאפיינים וערך אחד). נניח שמשתמש בחר את התאים ששמותיהם "יום שני בערב" ו "יום שישי אחר הצהריים", ואתם רוצים לסנן את שאר חלקי מרכז הבקרה כך שיוצגו רק נתונים מ "שני בערב" או מ "יום שישי אחר הצהריים".interactionData ייראה כך:

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