مرجع پیکربندی تجسم جامعه

توجه: ویژگی تجسم انجمن در «پیش‌نمایش برنامه‌نویس» است. برای کسب اطلاعات بیشتر در مورد ویژگی‌ها و بهبودهای آتی در این دوره از صفحه پیش‌نمایش برنامه‌نویس دیدن کنید.

پیکربندی تجسم، داده ها و ویژگی های سبک مورد نیاز یک تجسم را تعریف می کند.

پیکربندی به عنوان یک فایل JSON با ساختار زیر انتظار می رود:

{
  "data": [{
    "id": string,
    "label": string,
    "elements": [{
      "type": enum(DataElement),
      "id": string,
      "label": string,
      "options": object(DataElementOptions)
    }]
  }],
  "style": [{
    "id": string,
    "label": string,
    "elements": [{
      "type": enum(StyleElement),
      "id": string,
      "label": string,
      "defaultValue": string | object
    }]
  }],
  "interactions": [{
    "id": string,
    "supportedActions": array(enum(InteractionType))
  }],
  "features": {
   "enableComparisonDateRange": boolean
  }
}

نام فیلد	تایپ کنید	توضیحات
data[]	Array(object)	پیکربندی داده های تجسم. این پیکربندی بر روی صفحه داده پانل ویژگی تأثیر می گذارد.
data[].id	string	شناسه بخش داده این باید یک رشته غیر خالی و بدون فاصله باشد.
data[].label	string	برچسب برای بخش داده.
data[].elements[]	string	عناصر داده برای ارائه
data[].elements[].type	string enum ( DataElement )	نوع عنصر داده برای ارائه.
data[].elements[].id	string	شناسه عنصر داده این باید یک رشته غیر خالی و بدون فاصله باشد.
data[].elements[].label	string	برچسب راهنمای ابزار برای عنصر داده.
data[].elements[].options	object(DataElementOptions)	گزینه های داده برای عنصر این بستگی به نوع عنصر داده دارد.
style[]	Array(object)	پیکربندی سبک مورد نیاز تجسم. این پیکربندی بر روی صفحه Style پانل ویژگی ها تأثیر می گذارد. هر شی در آرایه نشان دهنده یک عنصر سبک برای ارائه است. ترتیب عناصر، ترتیب نمایش آنها را تعیین می کند.
style[].id	string	شناسه بخش سبک این باید یک رشته غیر خالی و بدون فاصله باشد.
style[].label	string	برچسب برای بخش سبک.
style[].elements	Array(object)	عناصر سبک برای ارائه.
style[].elements[].id	string	شناسه عنصر سبک. این باید یک رشته غیر خالی و بدون فاصله باشد.
style[].elements[].type	string enum ( StyleElement )	نوع عنصر سبک به عنوان مثال انتخاب فونت.
style[].elements[].label	string	راهنمای ابزار یا برچسب برای عنصر سبک. این متن برچسب برای یک عنصر چک و متن راهنمای ابزار برای انواع دیگر عناصر است.
style[].elements[].options	Array(object)	options عنصر این فقط برای انواع SELECT_SINGLE و SELECT_RADIO Style Element معتبر است.
style[].elements[].defaultValue	string OR object	مقدار پیش فرض برای عنصر style. مقادیر نامعتبر نادیده گرفته خواهند شد.*
interactions[]	Array(object)	پیکربندی تعاملات تجسم. این پیکربندی تعیین می کند که آیا می تواند به عنوان یک فیلتر عمل کند یا خیر.
interactions[].id	string	شناسه عنصر تعامل. این باید یک رشته غیر خالی و بدون فاصله باشد.
interactions[].supportedActions	Array (enum( InteractionType )	تعاملات احتمالی پشتیبانی می شود
features	object	ویژگی هایی که می خواهید در تجسم خود فعال یا غیرفعال کنید.
features.enableComparisonDateRange	boolean	محدوده تاریخ مقایسه را فعال کنید. در صورت نامشخص بودن، پیش فرض به false می شود.

* defaultValue یک رشته برای همه چیز است به جز انتخابگرهای رنگ. برای رنگ ها، defaultValue باید یک شی از قالب باشد:

{
    color: `string`
}

DataElement

مقادیر عناصر داده می تواند یکی از موارد زیر باشد:

مقدار Enum	توضیحات
METRIC	یک عنصر میدان متریک را ارائه می دهد.
DIMENSION	یک عنصر میدان بعد را ارائه می دهد.
MAX_RESULTS	حداکثر ردیف های داده ای را که می توان با این بصری سازی درخواست کرد، تعریف می کند

گزینه های DataElement

مقادیر عناصر داده می تواند یکی از موارد زیر باشد:

مقدار Enum	نوع گزینه	گزینه های موجود
METRIC	شیء	حداکثر: عدد - حداکثر تعداد معیارها دقیقه: عدد - حداقل تعداد معیارهای مورد نیاز
DIMENSION	شیء	حداکثر: عدد - حداکثر تعداد ابعاد پشتیبانی شده. min: عدد - حداقل تعداد ابعاد مورد نیاز supportedTypes: لیست انواع پشتیبانی شده. supportedTypes می‌توانند شامل TIME ، GEO ، یا DEFAULT باشند
MAX_RESULTS	شیء	max: number - حداکثر تعداد ردیف هایی که تجسم می تواند درخواست کند. پیش فرض: 2500

StyleElement

مقادیر عناصر سبک می تواند یکی از موارد زیر باشد:

مقدار Enum	توضیحات	نوع داده defaultValue (پیکربندی)	value نوع داده (پیام)	مقدار پیش فرض
FONT_COLOR	انتخابگر رنگ فونت را رندر می کند. مقادیر معتبر کدهای رنگی هگزا هستند.	STRING | OBJECT<Color>	STRING | OBJECT<Color>	با موضوع تعیین می شود.
FONT_SIZE	انتخابگر اندازه فونت را رندر می کند. مقادیر معتبر پیکسل های زیر هستند: 8، 9، 10، 11، 12، 14، 16، 18، 20، 24، 28، 30، 32، 36، 40، 44، 48، 60، 72، 84، 96.	NUMBER	NUMBER	12
FONT_FAMILY	انتخابگر خانواده فونت را رندر می کند. مقادیر معتبر فونت‌های زیر هستند: Arial، Boogaloo، Bubblegum Sans، Chewy، Comic Sans MS، به زودی، Cormorant Unicase، Courier New، Droid، Droid Sans، Eater، Georgia، Google Sans، Great Vibes، Indie Flower، Lato، Lora , Montserrat, Oleo Script, Open Sans, Orbitron, Oswald, Permanent Marker, Quicksand, Raleway, Reenie Beanie, Roboto, Roboto Condensed, Syncopate, Times New Roman, Ubuntu, Ubuntu Mono, Verdana.	STRING	STRING	با موضوع تعیین می شود.
چک باکس	یک چک باکس ارائه می دهد.	BOOLEAN	BOOLEAN	false
TEXTINPUT	یک کادر ورودی متن را ارائه می دهد.	STRING	STRING	""
TEXTAREA	یک منطقه ورودی متن بزرگ را ارائه می دهد.	STRING	STRING	""
SELECT_SINGLE	یک کشویی با مقادیر از پیش تعریف شده ارائه می دهد.	STRING (برای defaultValue و options.label و options.value)	STRING	تعریف نشده
SELECT_RADIO	یک انتخابگر رادیویی با مقادیر از پیش تعریف شده ارائه می دهد.	STRING (برای defaultValue و options.label و options.value)	STRING	تعریف نشده
FILL_COLOR	انتخابگر رنگ پر را ارائه می دهد. مقادیر معتبر کدهای رنگ Hex هستند.	STRING | OBJECT<Color>	OBJECT<Color>	با موضوع تعیین می شود.
BORDER_COLOR	یک انتخابگر رنگ حاشیه را ارائه می دهد. مقادیر معتبر کدهای رنگ Hex هستند.	STRING | OBJECT<Color>	OBJECT<Color>	با موضوع تعیین می شود.
AXIS_COLOR	یک انتخابگر رنگ محور را ارائه می دهد. مقادیر معتبر کدهای رنگ Hex هستند.	STRING | OBJECT<Color>	OBJECT<Color>	با موضوع تعیین می شود.
GRID_COLOR	انتخابگر رنگ شبکه ای را ارائه می دهد. مقادیر معتبر کدهای رنگ Hex هستند.	STRING | OBJECT<Color>	OBJECT<Color>	با موضوع تعیین می شود.
کدورت	یک انتخابگر کدورت را ارائه می دهد، واحد ٪ است. مقادیر معتبر از 0 تا 1 با افزایش 0.1 هستند	NUMBER	NUMBER	1
LINE_WEIGHT	انتخابگر وزن خط را ارائه می دهد. مقادیر معتبر از 0 تا 5 هستند. 0 به صورت None در کشویی نمایش داده می شود.	NUMBER	NUMBER
LINE_STYLE	انتخابگر سبک خط را ارائه می دهد. مقادیر پیش‌فرض قابل قبول: solid ، dashed ، dotted ، double .	STRING	STRING	"solid"
BORDER_RADIUS	انتخابگر شعاع مرزی را ارائه می دهد. مقادیر معتبر عبارتند از: 0، 1، 2، 3، 4، 5، 10، 15، 20، 25، 30، 40، 50، 60، 70، 80، 90، 100	NUMBER	NUMBER	با موضوع تعیین می شود.
INTERVAL	انتخابگر فاصله را ارائه می دهد. مقادیر اعداد صحیح هستند.	NUMBER	NUMBER	0

عناصر سبک، نمادهای نمایش داده شده در برگه Style پانل Property را پیکربندی می کنند.

توجه: "SELECT_SINGLE" و "SELECT_RADIO" از شما می‌خواهند که عناصری را که می‌توانید از بین آنها انتخاب کنید در منوی کشویی تعریف کنید.

گزینه های عنصر سبک

برخی از عناصر سبک از گزینه ها پشتیبانی می کنند

options: array(options)

مقدار Enum	Options Object
SELECT_SINGLE	{ label: `string`, value: `string` }
SELECT_RADIO	{ label: `string`, value: `string` }
INTERVAL	{ max: `number`, min: `number` }

انواع داده ها

شی <رنگ>

{
  color: STRING<Color>,
  opacity: NUMBER<Opacity>
}

STRING<رنگ>

یک مقدار رشته حاوی کد رنگ هگز.

مثال

"color": "#0000ff"

NUMBER<Opacity>

مقدار عددی از 0 تا 1 با افزایش 0.10

مثال

"opacity": 0.2

نوع تعامل

InteractionTypes گزینه های تعامل موجود در سبک Data پانل Property را پیکربندی می کند. در حال حاضر، فقط "FILTER" پشتیبانی می شود.

مقدار Enum	توضیحات
"FILTER"	به کاربران اجازه می دهد از تجسم به عنوان فیلتر استفاده کنند.

پیکربندی مثال

{
  "data": [{
    "id": "concepts",
    "label": "concepts",
    "elements": [
      {
        "id": "dimension1",
        "label": "first dimension",
        "type": "DIMENSION",
        "options": {
          "min": 1,
          "max": 3,
          "supportedTypes": ["DEFAULT"]
        }
      },
      {
        "id": "metric",
        "label": "metric",
        "type": "METRIC",
        "options": {
          "min": 1,
          "max": 3
        }
      }
    ]
  }],
  "style": [
    {
      "id": "colors",
      "label": "Highlight Colors",
      "elements": [
        {
          "id": "accentColor",
          "label": "Accent Color",
          "type": "SELECT_SINGLE",
          "defaultValue": "rain",
          "options": [
            {
              "label": "Summer",
              "value": "summer"
            },
            {
              "label": "Fall",
              "value": "fall"
            }
          ]
        },
        {
          "id": "reverseColor",
          "label": "Show reverse color",
          "defaultValue": false,
          "type": "CHECKBOX"
        },
        {
          "id": "fillColor",
          "label": "Fill Color",
          "defaultValue": {
            "color": "#0000ff"
          },
          "type": "FILL_COLOR"
        },
        {
          "id": "textOpacity",
          "label": "Text Opacity",
          "defaultValue": 0.2,
          "type": "OPACITY"
        },
        {
          "id": "customText",
          "label": "Custom Text",
          "defaultValue": "0.2",
          "type": "TEXTINPUT"
        }
      ]
    },
    {
      "id": "text",
      "label": "Highlight Text",
      "elements": [
        {
          "id": "textFontSize",
          "label": "Font size",
          "defaultValue": 10,
          "type": "FONT_SIZE"
        },
        {
          "id": "font",
          "label": "Font family",
          "defaultValue": "Arial",
          "type": "FONT_FAMILY"
        }
      ]
    }
  ],
  "interactions": [
    {
      "id": "interactionsConfigId",
      "supportedActions": ["FILTER"]
    }
  ],
  "features": {
    "enableComparisonDateRange": false
  }
}