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

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

ההגדרה צפויה להיות קובץ 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&lt;Color&gt;

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

דוגמה

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