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

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

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

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

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

ध्यान दें: पक्का करें कि interactionId, आपके कॉन्फ़िगरेशन में मौजूद config.interactions[].id से मेल खाता हो.

अगर रिपोर्ट एडिटर ने आपके विज़ुअलाइज़ेशन के लिए "फ़िल्टर" इंटरैक्शन चालू नहीं किए हैं, तो Data Studio, dscc.sendInteraction से भेजे गए मैसेज को अनदेखा कर देगा.

फ़िल्टर की स्थिति को ट्रैक करना

Data Studio, आपके विज़ुअलाइज़ेशन को data ऑब्जेक्ट भेजता है. इससे इंटरैक्शन के बारे में जानकारी मिलती है.

उदाहरण के लिए, 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 ऑब्जेक्ट से यह तय होता है कि Data Studio आपके डैशबोर्ड को कैसे फ़िल्टर करेगा.

सिंगल डाइमेंशन फ़िल्टर

इस बार चार्ट में, भाषा के हिसाब से किताबों की संख्या दिखाई गई है. इसमें एक डाइमेंशन और एक मेट्रिक का इस्तेमाल किया गया है. मान लें कि किसी उपयोगकर्ता ने स्पैनिश में मौजूद किताबों से जुड़ा बार चुना है और आपको इस बार के हिसाब से, बाकी डैशबोर्ड को फ़िल्टर करना है. आपका interactionData ऐसा दिखेगा:

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

एक से ज़्यादा डाइमेंशन के लिए फ़िल्टर

इस हीटमैप में, हफ़्ते के दिन और समय के हिसाब से तापमान दिखाया गया है. इसमें दो डाइमेंशन और एक मेट्रिक शामिल है. मान लें कि किसी उपयोगकर्ता ने "सोमवार शाम" और "शुक्रवार दोपहर" से जुड़ी सेल चुनी हैं. आपको बाकी डैशबोर्ड को फ़िल्टर करके, सिर्फ़ "सोमवार शाम" या "शुक्रवार दोपहर" का डेटा दिखाना है. आपका interactionData इस तरह दिखेगा:

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