קובץ עזר להגדרת תצוגה חזותית של קהילות

הערה: התכונה 'תצוגה חזותית של הקהילה' נמצאת ב'תצוגה מקדימה למפתחים'. מידע נוסף על התכונות והשיפורים שיתווספו במהלך התקופה הזו זמין בדף תצוגה מקדימה למפתחים.

תצורת התצוגה החזותית מגדירה את מאפייני הנתונים והסגנון הנדרשים לתצוגה החזותית.

יש לקבל את התצורה כקובץ 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 - מספר המדדים המקסימלי מינימום: מספר - המספר המינימלי של מדדים הנדרשים
מאפיין	אובייקט	max: number - המספר המקסימלי של מאפיינים נתמכים. min: number – מספר המאפיינים המינימלי הנדרש supportedTypes: רשימת הסוגים הנתמכים. 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	הצגת הבורר של משפחת הגופנים. הערכים החוקיים הם הגופנים הבאים: Arial, Bogaloo, Bubblegum Sans, Chwy, Comic Sans MS, בקרוב, Cormoran Unicase, Courier New, Droid, Droid Sans, Eater, Georgia, Google Sans, Great Vibes, IndieFפרח, Lato, Lora, Monserrat, Quickobit Robots, Ubuntu Oreobit, סקריפט	STRING	STRING	ההודעה נקבעת לפי העיצוב.
תיבת סימון	הצגת תיבת סימון.	BOOLEAN	BOOLEAN	false
קלט טקסט	הצגת תיבה להזנת טקסט.	STRING	STRING	""
אזור טקסט	הצגת אזור גדול של קלט טקסט.	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 בחלונית המאפיין.

הערה: "SELECT_SINGLE" ו-"SELECT_RADIO" מחייבים להגדיר בתפריט הנפתח את הרכיבים לבחירה.

אפשרויות של רכיבי סגנון

אפשרויות תמיכה מסוימות ברכיבי סגנון

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

מחרוזת<צבע>

ערך מחרוזת שמכיל קוד צבע הקסדצימלי.

דוגמה

"color": "#0000ff"

NUMBER<Opacity>

ערך מספר מ-0 עד 1 במרווחים של 0.10

דוגמה

"opacity": 0.2

InteractionType

סוגי האינטראקציות מגדירים את אפשרויות האינטראקציה הזמינות בסגנון 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
  }
}