ข้อมูลอ้างอิงการกำหนดค่าการแสดงภาพข้อมูลจากชุมชน

หมายเหตุ: ฟีเจอร์การแสดงภาพข้อมูลจากชุมชนอยู่ใน "ตัวอย่างสำหรับนักพัฒนาซอฟต์แวร์" หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์และการปรับปรุงที่กำลังจะเกิดขึ้นในช่วงระยะเวลานี้ ให้ไปที่หน้าตัวอย่างสำหรับนักพัฒนาซอฟต์แวร์

การกำหนดค่าการแสดงภาพจะกำหนดข้อมูลและแอตทริบิวต์รูปแบบที่ต้องใช้ในการแสดงภาพ

การกำหนดค่าควรเป็นไฟล์ 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
  }
}

ชื่อช่อง	Type	คำอธิบาย
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	คำอธิบาย
เมตริก	แสดงผลองค์ประกอบช่องเมตริก
DIMENSION	แสดงผลองค์ประกอบช่องมิติข้อมูล
MAX_RESULTS	กำหนดแถวของข้อมูลสูงสุดที่สามารถขอได้ด้วยการสร้างภาพข้อมูลนี้

ตัวเลือก DataElement

ค่าสำหรับองค์ประกอบข้อมูลอาจเป็นค่าใดค่าหนึ่งต่อไปนี้

ค่า enum	ประเภทตัวเลือก	มีตัวเลือก
เมตริก	ออบเจ็กต์	max: number - จำนวนเมตริกสูงสุด นาที: number - จำนวนต่ำสุดของเมตริกที่จำเป็น
DIMENSION	ออบเจ็กต์	max: number - จำนวนสูงสุดของมิติข้อมูลที่รองรับ min: number - จำนวนมิติข้อมูลขั้นต่ำที่ต้องมี supportedTypes: รายการประเภทที่รองรับ supportedTypes อาจมี TIME, GEO หรือ DEFAULT
MAX_RESULTS	ออบเจ็กต์	max: number - จำนวนแถวสูงสุดที่การแสดงผลจะขอได้ ค่าเริ่มต้น: 2,500

StyleElement

ค่าสำหรับองค์ประกอบของรูปแบบอาจเป็นค่าใดค่าหนึ่งต่อไปนี้

ค่า enum	คำอธิบาย	ประเภทข้อมูล defaultValue (กำหนดค่า)	ประเภทข้อมูล value (ข้อความ)	ค่าเริ่มต้น
FONT_COLOR	แสดงผลตัวเลือกสีแบบอักษร ค่าที่ถูกต้องคือรหัสสีแบบเลขฐาน 16	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. Ubuntued, Lato, Lora, Montserrat, Oleo Script, Open Sans, Oleo Script	STRING	STRING	กำหนดตามธีม
ช่องทำเครื่องหมาย	แสดงผลช่องทำเครื่องหมาย	BOOLEAN	BOOLEAN	false
อินพุตข้อความ	แสดงผลกล่องป้อนข้อความ	STRING	STRING	""
พื้นที่ข้อความ	แสดงผลพื้นที่ป้อนข้อความขนาดใหญ่	STRING	STRING	""
SELECT_SINGLE	แสดงรายการแบบเลื่อนลงด้วยค่าที่กำหนดไว้ล่วงหน้า	STRING (สำหรับ defaultValue and options.label และ options.value)	STRING	ไม่ได้กำหนด
SELECT_RADIO	แสดงตัวเลือกวิทยุด้วยค่าที่กำหนดไว้ล่วงหน้า	STRING (สำหรับ defaultValue and options.label และ options.value)	STRING	ไม่ได้กำหนด
FILL_COLOR	แสดงผลตัวเลือกสีเติม ค่าที่ถูกต้องคือรหัสสีแบบเลขฐาน 16	STRING | OBJECT<Color>	OBJECT<Color>	กำหนดตามธีม
BORDER_COLOR	แสดงผลตัวเลือกสีเส้นขอบ ค่าที่ถูกต้องคือรหัสสีแบบเลขฐาน 16	STRING | OBJECT<Color>	OBJECT<Color>	กำหนดตามธีม
AXIS_COLOR	แสดงผลตัวเลือกสีของแกน ค่าที่ถูกต้องคือรหัสสีแบบเลขฐาน 16	STRING | OBJECT<Color>	OBJECT<Color>	กำหนดตามธีม
GRID_COLOR	แสดงผลตัวเลือกสีของตารางกริด ค่าที่ถูกต้องคือรหัสสีแบบเลขฐาน 16	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	กำหนดตามธีม
ช่วงการฝึก	แสดงผลตัวเลือกช่วงเวลา ค่าจะเป็นจำนวนเต็ม	NUMBER	NUMBER	0

องค์ประกอบรูปแบบจะกำหนดค่าไอคอนที่แสดงในแท็บ Style ของแผงคุณสมบัติ

หมายเหตุ: "SELECT_SINGLE" และ "SELECT_RADIO" กำหนดให้คุณต้องกำหนดองค์ประกอบที่จะเลือกในเมนูแบบเลื่อนลง

ตัวเลือกองค์ประกอบของรูปแบบ

ตัวเลือกการรองรับองค์ประกอบรูปแบบบางส่วน

options: array(options)

ค่า enum	ออบเจ็กต์ตัวเลือก
SELECT_SINGLE	{ label: `string`, value: `string` }
SELECT_RADIO	{ label: `string`, value: `string` }
ช่วงการฝึก	{ max: `number`, min: `number` }

ประเภทข้อมูล

ออบเจ็กต์<สี>

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

สีSTRING<สี>

ค่าสตริงที่มีรหัสสีแบบเลขฐาน 16

ตัวอย่าง

"color": "#0000ff"

NUMBER<Opacity>

ค่าตัวเลขตั้งแต่ 0 ถึง 1 โดยเพิ่มขึ้นทีละ 0.10

ตัวอย่าง

"opacity": 0.2

InteractionType

InteractiveTypes กำหนดค่าตัวเลือกการโต้ตอบที่มีในรูปแบบ 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
  }
}