फ़िल्टर के तौर पर कम्यूनिटी विज़ुअलाइज़ेशन का इस्तेमाल करना

अपने कम्यूनिटी विज़ुअलाइज़ेशन का इस्तेमाल चार्ट फ़िल्टर के तौर पर किया जा सकता है. इससे रिपोर्ट को कम्यूनिटी विज़ुअलाइज़ेशन के साथ हुए इंटरैक्शन के ज़रिए फ़िल्टर किया जा सकता है.

कम्यूनिटी विज़ुअलाइज़ेशन चार्ट के फ़िल्टर कैसे काम करते हैं

अपने कम्यूनिटी विज़ुअलाइज़ेशन का इस्तेमाल चार्ट फ़िल्टर के तौर पर करने के लिए:

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