استخدام تصورات المجتمع كعوامل تصفية

يمكنك استخدام العرض المرئي لبيانات المنتدى كفلتر للرسم البياني، ما يتيح لك فلترة التقرير من خلال التفاعلات مع العرض المرئي لبيانات المنتدى.

طريقة عمل فلاتر الرسوم البيانية الخاصة بميزة "العرض المرئي لبيانات المنتدى"

لاستخدام العرض المرئي لبيانات المنتدى كفلتر للرسم البياني، عليك إجراء ما يلي:

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 غير محدّد، يعني ذلك أنّ التصوير المرئي يفلتر حاليًا المكوّنات الأخرى في لوحة البيانات.

نقطة أساسية: إذا كان التصوّر يوفّر تعليقًا توضيحيًا مرئيًا لحالة الفلتر، مثل تمييز قيمة، يجب أن يتحقّق الرمز من 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"]
  ]
}