הגדרת ההצגה החזותית מגדירה את מאפייני הנתונים והסגנון הנדרשים על ידי תצוגה חזותית.
ההגדרה צפויה להיות קובץ 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[].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[].elements[].defaultValue |
string OR object |
ערך ברירת המחדל של רכיב הסגנון. המערכת תתעלם מערכים לא תקינים.* |
interactions[] |
Array(object) |
הגדרות האינטראקציות בתצוגה החזותית. ההגדרה הזו קובעת אם הוא יכול לשמש כמסנן. |
interactions[].id |
string |
המזהה של רכיב האינטראקציה. היא חייבת להיות מחרוזת שאינה ריקה ללא רווחים. |
interactions[].supportedActions |
Array (enum(InteractionType) |
האינטראקציות האפשריות שנתמכות |
features |
object |
התכונות שרוצים להפעיל או להשבית בתצוגה החזותית. |
features.enableComparisonDateRange |
boolean |
מפעילים השוואה בין טווחי תאריכים. אם לא צויין ערך, ערך ברירת המחדל הוא false . |
*הdefaultValue
היא מחרוזת לכל דבר מלבד בוררי הצבעים. עבור
הצבעים, defaultValue
צריך להיות אובייקט בפורמט:
{
color: `string`
}
DataElement
הערכים של רכיבי הנתונים יכולים להיות אחד מהערכים הבאים:
הערך של הטיפוס בן המנייה (enum) | תיאור |
---|---|
מדד | הפונקציה מעבדת רכיב בשדה של מדד. |
מאפיין | הפונקציה מעבדת רכיב בשדה מאפיין. |
MAX_RESULTS | הגדרת מספר השורות המקסימלי של נתונים שניתן לבקש באמצעות הויזואליזציה הזו |
אפשרויות DataElement
הערכים של רכיבי הנתונים יכולים להיות אחד מהערכים הבאים:
הערך של הטיפוס בן המנייה (enum) | סוג אפשרות | האפשרויות הזמינות |
---|---|---|
מדד | אובייקט | מקסימום: מספר – מספר המדדים המקסימלי
מינימום: מספר – מספר המדדים המינימלי שנדרש |
מאפיין | אובייקט | max: number – המספר המקסימלי של מאפיינים נתמכים.
min: מספר – מספר המאפיינים המינימלי הנדרש SupportTypes: רשימת הסוגים הנתמכים. supportedTypes יכול לכלול את TIME , GEO או DEFAULT
|
MAX_RESULTS | אובייקט | max: number – מספר השורות המקסימלי שההמחשה יכולה לבקש. ברירת מחדל: 2,500 |
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 | הצגת בורר משפחת הגופנים. | STRING |
STRING |
נקבע לפי הנושא. |
CHECKBOX | יוצר תיבת סימון. | 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 | הצגת בורר צבעי מילוי. הערכים החוקיים הם קודים של צבע הקסדצימלי. | STRING | OBJECT<Color> |
OBJECT<Color> |
נקבע לפי הנושא. |
BORDER_COLOR | הצגת בורר צבעי גבול. הערכים החוקיים הם קודים של צבע הקסדצימלי. | STRING | OBJECT<Color> |
OBJECT<Color> |
נקבע לפי הנושא. |
AXIS_COLOR | לעיבוד בורר הצבעים של הציר. הערכים החוקיים הם קודים של צבע הקסדצימלי. | STRING | OBJECT<Color> |
OBJECT<Color> |
נקבע לפי הנושא. |
GRID_COLOR | הצגת בורר צבעי רשת. הערכים החוקיים הם קודים של צבע הקסדצימלי. | STRING | OBJECT<Color> |
OBJECT<Color> |
נקבע לפי הנושא. |
אופציה | מציג בורר אטימות, היחידה היא %. הערכים החוקיים הם בין 0 ל-1 במרווחים של 0.1 | NUMBER |
NUMBER |
1 |
LINE_WEIGHT | הצגת בוחר משקל קו. הערכים החוקיים הם בין 0 ל-5. הערך 0 יופיע כ'ללא' בתפריט הנפתח. | 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
של הנכס
חלונית.
אפשרויות של רכיבי סגנון
חלק מרכיבי הסגנון תומכים באפשרויות
options: array(options)
הערך של הטיפוס בן המנייה (enum) | אובייקט אפשרויות |
---|---|
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>
ערך מחרוזת שמכיל קוד צבע הקסדצימלי.
דוגמה
"color": "#0000ff"
NUMBER<אטימוּת>
ערך של מספר מ-0 עד 1 במרווחים של 0.10
דוגמה
"opacity": 0.2
InteractionType
InteractionTypes מגדירים את אפשרויות האינטראקציה הזמינות בסגנון Data
של חלונית הנכס. כרגע יש תמיכה רק ב-"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
}
}