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

يمكنك استخدام التمثيل البصري للمنتدى باعتباره فلترًا للرسومات البيانية، مع فلترة التقرير من خلال التفاعلات مع العرض المرئي للمنتدى.

آلية عمل فلاتر الرسم البياني للتمثيل البصري للمجتمع

لاستخدام تصور المجتمع كعامل تصفية مخطط، تحتاج إلى:

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