پیکربندی تجسم، داده ها و ویژگی های سبک مورد نیاز یک تجسم را تعریف می کند.
پیکربندی به عنوان یک فایل 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 را پیکربندی می کنند.
گزینه های عنصر سبک
برخی از عناصر سبک از گزینه ها پشتیبانی می کنند
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
}
}