استفاده از تجسم های جامعه به عنوان فیلتر

شما می‌توانید از تجسم جامعه خود به عنوان یک فیلتر نمودار استفاده کنید و گزارش را از طریق تعاملات با تجسم جامعه خود فیلتر کنید.

نحوه عملکرد فیلترهای نمودار تجسم جامعه

برای استفاده از تجسم جامعه خود به عنوان فیلتر نمودار، باید:

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

اگر ویرایشگر گزارش، تعاملات «فیلتر» را برای مصورسازی شما فعال نکرده باشد، دیتا استودیو پیام‌های ارسالی توسط dscc.sendInteraction را نادیده می‌گیرد.

پیگیری وضعیت فیلتر

شیء data که Data Studio به مصورسازی شما ارسال می‌کند، اطلاعاتی در مورد تعاملات ارائه می‌دهد.

مثال data.interactions :

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

اگر value.data برابر با undefined نباشد، در حال حاضر، تصویرسازی در حال فیلتر کردن سایر اجزای داشبورد است.

مثال:

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