डेटा प्रारूप

Sprucely.io द्वारा रेंडर किया गया हर डैशबोर्ड - चाहे वह स्टैंडअलोन JavaScript रनटाइम से बनाया गया हो, स्टैंडअलोन React कॉम्पोनेंट्स से, या आपके अकाउंट में सेव किया गया हो - एक जैसे अंतर्निहित JSON स्ट्रक्चर का उपयोग करता है: डैशबोर्ड-व्यापी स्टाइलिंग के लिए एक config ऑब्जेक्ट, और विजेट ट्री का वर्णन करने वाला एक data ऑब्जेक्ट। यह रेफरेंस उस JSON का पूरा विवरण देता है, साथ ही उस डेटासेट फॉर्मेट का भी जिससे यह डेटा पढ़ता है, और कॉलम के किसी दिए गए संयोजन के लिए कौन-सा चार्ट टाइप चुनना है। एम्बेड करने के निर्देशों के लिए, सरल डैशबोर्ड इंटीग्रेशन नोट्स देखें।

डैशबोर्ड JSON

हर डैशबोर्ड एक ही JSON ऑब्जेक्ट होता है जिसमें दो टॉप-लेवल कीज़ होती हैं: config, जो डैशबोर्ड-व्यापी स्टाइलिंग रखता है, और data, जो एक ही डैशबोर्ड रूट से शुरू होने वाले टाइप्ड विजेट नोड्स का ट्री है। हर नोड में एक type फ़ील्ड होता है, और कंटेनर टाइप्स के लिए, नेस्टेड नोड्स की एक children ऐरे होती है।

dash - डैशबोर्ड रूट। ट्री के सबसे ऊपर हमेशा ठीक एक ही होता है।
dash_stacker_hor / dash_stacker_ver - अपने children को एक पंक्ति या एक कॉलम में व्यवस्थित करता है।
dash_chart - एक चार्ट, समर्थित चार्ट टाइप्स में से किसी एक में (नीचे देखें)।
dash_table - एक डेटा टेबल।
dash_text - एक टेक्स्ट ब्लॉक।
dash_image - एक अपलोड की गई इमेज।
dash_spacer - विजेट्स के बीच निश्चित खाली जगह।

टाइप चाहे जो भी हो, हर विजेट एक जैसे प्रेजेंटेशन फ़ील्ड्स स्वीकार करता है:

size - विजेट के कंटेनर की मुख्य दिशा (main axis) में उसका आकार: ‘Auto’, ‘<n>px’ या ‘<n>%’।
padding - आंतरिक स्पेसिंग, उदाहरण के लिए ‘10px’ (dash_spacer को छोड़कर)।
backgroundColor - एक CSS कलर, उदाहरण के लिए ‘#FFFFFF’ या ‘transparent’।
borderRadius / borderWidth - कॉर्नर रेडियस और बॉर्डर की मोटाई, उदाहरण के लिए ‘10px’।
borderColor - बॉर्डर के लिए एक CSS कलर।
shadow - true या false; एक ड्रॉप शैडो जोड़ता है।

चार्ट विजेट्स

हर चार्ट एक जैसे फ़ील्ड्स साझा करता है; x, y, d और r में से किनका उपयोग किया जाता है, और हर एक किस टाइप का कॉलम स्वीकार करता है, यह चार्ट टाइप पर निर्भर करता है - नीचे हर समर्थित चार्ट टाइप को उसके अपने सबसेक्शन में कवर किया गया है, एक साझा छोटे सैंपल डेटासेट से रेंडर किए गए लाइव उदाहरण के साथ।

datasetId - वह डेटासेट जिससे यह चार्ट डेटा पढ़ता है - यह किसी डेटासेट के नाम से मेल खाना चाहिए।
chartType - area, bar, cell, dot, hexbin or line।
title - एक वैकल्पिक चार्ट टाइटल।
dataFunction - d पर लागू होने वाला एग्रीगेट: count (default), sum, average, min, max, median or stddev। count का उपयोग करते समय d को खाली छोड़ दें।
x - X डायमेंशन के लिए कॉलम (हर चार्ट टाइप में ज़रूरी)।
y - Y डायमेंशन के लिए कॉलम (केवल cell, dot और hexbin में, और इन तीनों में ज़रूरी)।
d - वह कॉलम जिसे चार्ट के वैल्यू/कलर डायमेंशन में एग्रीगेट किया जाता है।
r - रेडियस डायमेंशन के लिए कॉलम (केवल dot में, और ज़रूरी)।
seasonX / seasonY - एक टाइम कॉलम को एक आवर्ती अवधि में समूहित करता है: year, quarter, month, week, dayofyear, day, dayofweek, hour, minute or second।

डायमेंशन कॉलम्स को उनके घोषित टाइप के आधार पर श्रेणीगत, समय या सतत के रूप में वर्गीकृत किया जाता है - नीचे दिए गए डेटासेट JSON सेक्शन को देखें। जब dataFunction count होता है, तो d डायमेंशन खाली छोड़ दिया जाता है - count के लिए किसी वैल्यू कॉलम की ज़रूरत नहीं होती। कोई भी अन्य एग्रीगेट (sum, average, min, max, median or stddev) इसकी अपेक्षा रखता है।

किसी चार्ट टाइप के लिए ज़रूरी डायमेंशन भरे जाने चाहिए: cell, dot और hexbin y के बिना नहीं बनते, और dot r के बिना नहीं बनता। इनमें से कोई भी छूट जाने पर रिक्वेस्ट अस्वीकार कर दी जाती है, इसलिए अगर डेटासेट में उपयुक्त कॉलम न हो तो ऐसा चार्ट टाइप चुनें जिसे उसकी ज़रूरत न हो - area, bar और line को केवल x चाहिए, और hexbin बिना रेडियस कॉलम के दो डायमेंशन दिखाता है।

बार

x श्रेणीगत, सतत या समय कॉलम स्वीकार करता है। d सतत होना चाहिए, और इसका उपयोग केवल तभी होता है जब dataFunction count न हो। जब x एक समय कॉलम हो, तो seasonX की अनुमति है, ताकि इसे किसी आवर्ती अवधि जैसे सप्ताह के दिन में समूहित किया जा सके। y और r का उपयोग नहीं होता।

रेखा

x सतत या समय कॉलम स्वीकार करता है - श्रेणीगत नहीं। d सतत होना चाहिए, इसका उपयोग केवल तभी होता है जब dataFunction count न हो। सीज़नैलिटी समर्थित नहीं है। y और r का उपयोग नहीं होता।

क्षेत्र

सेल

x और y दोनों के लिए एक श्रेणीगत कॉलम, या सीज़नैलिटी सक्षम किया गया समय कॉलम आवश्यक है (x के लिए seasonX, y के लिए seasonY)। d सतत होना चाहिए, इसका उपयोग केवल तभी होता है जब dataFunction count न हो। seasonY के लिए अतिरिक्त रूप से यह आवश्यक है कि x पहले से ही एक श्रेणीगत डायमेंशन में परिवर्तित हो चुका हो - या तो वास्तव में श्रेणीगत कॉलम हो, या seasonX सेट किया गया समय कॉलम हो। r का उपयोग नहीं होता।

बिंदु

x और y सतत या समय कॉलम स्वीकार करते हैं। r और d दोनों सतत होने चाहिए - कभी भी श्रेणीगत या समय नहीं। सीज़नैलिटी समर्थित नहीं है। डॉट चार्ट कुछ सौ पंक्तियों तक के डेटासेट के साथ सबसे बेहतर दिखते हैं।

हेक्सबिन

x और y दोनों सतत या समय कॉलम स्वीकार करते हैं - श्रेणीगत नहीं। d सतत होना चाहिए, इसका उपयोग केवल तभी होता है जब dataFunction count न हो। सीज़नैलिटी समर्थित नहीं है। r का उपयोग नहीं होता।

अन्य विजेट्स

टेबल (dash_table)

datasetId - दिखाया जाने वाला डेटासेट।
fontFamily - डिफ़ॉल्ट Arial; इनमें से कोई एक: Arial, Calibri, Cambria, Century Gothic, Courier New, Garamond, Helvetica, Consolas/Monaco (Monospace), Lucida Bright, Lucida Sans, Segoe UI, Tahoma, Verdana।
fontSize - डिफ़ॉल्ट 12px; 6-256px या 1-10vw।
color - डिफ़ॉल्ट inherit।
bold / italic - true या false, डिफ़ॉल्ट false।
ratio - चौड़ाई/ऊंचाई अनुपात, 0.125 से 16 तक की एक संख्या।

टेक्स्ट (dash_text)

text - दिखाया जाने वाला टेक्स्ट।
fontFamily / fontSize (default 3vw) / color / bold / italic - टेबल विजेट के समान।
justifyContent / alignItems - ‘0’ शुरुआत, ‘1’ मध्य या ‘2’ अंत।

इमेज (dash_image)

assetId - एक अपलोड की गई इमेज एसेट।
objectFit - डिफ़ॉल्ट none; none, contain, cover or fill।

स्पेसर (dash_spacer)

size - आवश्यक; डिफ़ॉल्ट 100px; 0-100% या 30-1000px।

स्टैकर्स (dash_stacker_hor, dash_stacker_ver)

children - नेस्टेड विजेट्स, जिन्हें एक पंक्ति (dash_stacker_hor) या एक कॉलम (dash_stacker_ver) में व्यवस्थित किया जाता है।
gap - डिफ़ॉल्ट ‘10px’; children के बीच की स्पेसिंग।
minHeight - स्टैकर के लिए न्यूनतम ऊंचाई।

डेटासेट JSON

एक डेटासेट एक ही JSON ऑब्जेक्ट होता है जिसमें एक नाम, टाइप्ड कॉलम और पंक्तियां होती हैं:

{
  "name": "Orders",
  "headers": ["region", "category", "amount", "quantity"],
  "types": ["VARCHAR", "VARCHAR", "FLOAT", "INTEGER"],
  "entries": [
    ["North", "Electronics", 120.50, 2],
    ["South", "Clothing",     89.95, 1],
    ["North", "Furniture",   432.00, 5],
    ["South", "Electronics",  74.50, 1]
  ]
}

name - डेटासेट का नाम; चार्ट और टेबल इसे अपने datasetId फ़ील्ड के ज़रिए संदर्भित करते हैं।
headers - कॉलम के नाम, entries में हर पंक्ति जैसे ही क्रम में।
types - प्रत्येक header के लिए एक कॉलम टाइप - नीचे दी गई श्रेणियां देखें।
entries - पंक्तियां, जिनमें से हर एक header क्रम में वैल्यू की एक ऐरे है।

वैकल्पिक रूप से, row_start, row_end, col_start और col_end इम्पोर्ट करने के लिए entries की एक ज़ीरो-इंडेक्स्ड, इनक्लूसिव सब-रेंज चुनते हैं - यह तब उपयोगी है जब किसी बड़ी टेबल से केवल नई पंक्तियां जोड़नी हों। ये चारों डिफ़ॉल्ट रूप से पूरी रेंज लेते हैं:

{
  "name": "Orders",
  "headers": ["region", "amount"],
  "types": ["VARCHAR", "FLOAT"],
  "entries": [ ["North", 120.50], ["South", 89.95], ["North", 432.00], ["South", 74.50] ],
  "row_start": 0,
  "row_end": 1,
  "col_start": 0,
  "col_end": 1
}

हर कॉलम टाइप को श्रेणीगत, समय या सतत के रूप में वर्गीकृत किया जाता है, जो यह तय करता है कि इसे किन चार्ट डायमेंशन के लिए इस्तेमाल किया जा सकता है - ऊपर दिए गए चार्ट विजेट सेक्शन देखें:

श्रेणीगत - BIT, BITSTRING, BOOLEAN, BOOL, LOGICAL, BLOB, BYTEA, BINARY, VARBINARY, UUID, VARCHAR, CHAR, BPCHAR, TEXT, STRING
समय - DATE, TIME, TIMESTAMP, DATETIME, TIMESTAMP WITH TIME ZONE, TIMESTAMPTZ
सतत - बाकी सभी टाइप्स, उदाहरण के लिए INTEGER, FLOAT, DOUBLE, BIGINT, DECIMAL

किसी चार्ट में कॉलम रेफरेंस (x, y, d, r) को किसी header नाम से बिल्कुल मेल खाना चाहिए, केस-सेंसिटिव।

स्टाइलिंग और थीम ओवरराइड

डैशबोर्ड-लेवल कलर एक बार config.style.widget में सेट किए जाते हैं और हर उस विजेट पर लागू होते हैं जो इन्हें ओवरराइड नहीं करता:

color - डिफ़ॉल्ट टेक्स्ट कलर।
backgroundColor - डिफ़ॉल्ट डैशबोर्ड बैकग्राउंड।
primaryColor - फ़ोरग्राउंड/सक्रिय सीरीज़ कलर, जिसका उपयोग हेडर और क्रॉस-फ़िल्टर्ड ट्रेस के लिए किया जाता है।
primaryColorSubtle - cell, dot और hexbin चार्ट में उपयोग किए जाने वाले कलर ग्रेडिएंट का निचला छोर।
secondaryColor - बैकग्राउंड/अनफ़िल्टर्ड सीरीज़ कलर।

कोई भी विजेट अपने JSON नोड पर सीधे अपना प्रेजेंटेशन ओवरराइड कर सकता है - backgroundColor, color, padding, borderRadius, borderWidth, borderColor और shadow। नीचे दिया गया उदाहरण एक चार्ट के अपने कलर और कोनों को ओवरराइड करता है, जबकि बाकी डैशबोर्ड साझा थीम को बनाए रखता है:

{
  "type": "dash_chart",
  "datasetId": "Orders",
  "chartType": "hexbin",
  "x": "amount",
  "y": "quantity",
  "backgroundColor": "#F5F0FF",
  "borderRadius": "12px",
  "borderWidth": "1px",
  "borderColor": "#6E2BDC",
  "shadow": true
}

पूरा उदाहरण

एक छोटा डैशबोर्ड जो एक हेडर, साथ-साथ दो चार्ट और एक टेबल को जोड़ता है, सभी एक ही डेटासेट से डेटा पढ़ते हुए:

{
  "config": {
    "type": "dashboard",
    "style": {
      "widget": {
        "color": "#000000",
        "backgroundColor": "#FFFFFF",
        "primaryColor": "#6E2BDC",
        "primaryColorSubtle": "#E2D5F8",
        "secondaryColor": "#CCCCCC"
      }
    }
  },
  "data": {
    "type": "dash",
    "children": [
      { "type": "dash_text", "text": "Orders Overview", "fontSize": "2vw", "justifyContent": "0" },
      {
        "type": "dash_stacker_hor",
        "children": [
          { "type": "dash_chart", "datasetId": "Orders", "chartType": "bar",  "x": "region", "dataFunction": "count" },
          { "type": "dash_chart", "datasetId": "Orders", "chartType": "cell", "x": "region", "y": "category", "dataFunction": "count" }
        ]
      },
      { "type": "dash_table", "datasetId": "Orders" }
    ]
  }
}