ফিল্টার হিসাবে কমিউনিটি ভিজ্যুয়ালাইজেশন ব্যবহার করে

আপনি আপনার কমিউনিটি ভিজ্যুয়ালাইজেশনকে একটি চার্ট ফিল্টার হিসেবে ব্যবহার করতে পারেন, যার মাধ্যমে ভিজ্যুয়ালাইজেশনটির সাথে হওয়া ইন্টারঅ্যাকশনের ভিত্তিতে রিপোর্টটি ফিল্টার করা যায়।

কমিউনিটি ভিজ্যুয়ালাইজেশন চার্ট ফিল্টারগুলো কীভাবে কাজ করে

আপনার কমিউনিটি ভিজ্যুয়ালাইজেশনকে চার্ট ফিল্টার হিসেবে ব্যবহার করতে হলে, আপনাকে যা করতে হবে তা হলো:

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 এর সাথে মেলে।

রিপোর্ট এডিটর আপনার ভিজ্যুয়ালাইজেশনের জন্য 'ফিল্টার' ইন্টারঅ্যাকশন সক্রিয় না করলে, ডেটা স্টুডিও dscc.sendInteraction দ্বারা প্রেরিত বার্তাগুলি উপেক্ষা করবে।

ফিল্টার অবস্থার হিসাব রাখা

ডেটা স্টুডিও আপনার ভিজ্যুয়ালাইজেশনে যে data অবজেক্টটি পাঠায়, তা ইন্টারঅ্যাকশন সম্পর্কিত তথ্য প্রদান করে।

উদাহরণ data.interactions :

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

যদি value.data undefined না হয়, তাহলে ভিজ্যুয়ালাইজেশনটি বর্তমানে ড্যাশবোর্ডের অন্যান্য উপাদানগুলোকে ফিল্টার করছে।

মূল বিষয়: যদি আপনার ভিজ্যুয়ালাইজেশন ফিল্টার অবস্থার ভিজ্যুয়াল টীকা প্রদান করে, যেমন কোনো মান হাইলাইট করা, তাহলে ভিজ্যুয়ালাইজেশনটি সঠিকভাবে রেন্ডার হচ্ছে কিনা তা নিশ্চিত করতে আপনার কোডে 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"]]
}

একাধিক মাত্রার ফিল্টার

এই হিটম্যাপটি সপ্তাহের দিন এবং দিনের সময় অনুসারে তাপমাত্রা দেখায় (দুটি ডাইমেনশন এবং একটি মেট্রিক)। ধরুন, একজন ব্যবহারকারী "সোমবার সন্ধ্যা" এবং "শুক্রবার বিকেল" সম্পর্কিত সেলগুলো নির্বাচন করেছেন, এবং আপনি ড্যাশবোর্ডের বাকি অংশ ফিল্টার করে শুধুমাত্র "সোমবার সন্ধ্যা" অথবা "শুক্রবার বিকেল"-এর ডেটা দেখাতে চান। আপনার interactionData দেখতে এইরকম হবে:

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