Pada gambar diatas adalah contoh response standar dari backend ketika kita akan membuat Summary Card, yang mana beberapa kunci yang dibutuhkan untuk summary card adalah title, count, cardStyle.background (optional). Respon untuk summary card ini bisa kita gunakan juga untuk membuat sebuah chart. Contoh hasilnya seperti ini:
Copy "dynamicCard" : [
{
"type" : "column" ,
"cardTitle" : "Project Statistic" ,
"cardTheme" : "style1" ,
"cardStyle" : {
"borderRadius" : "20px" ,
"background" : "rgb(215 215 215 / 10%)"
} ,
"size" : 4 ,
"children" : [
{
"type" : "summary" ,
"cardId" : "widget_projects_summary" ,
"size" : 6 ,
"dataFrom" : {
"api" : "Projects/summary" ,
"baseUrl" : "marketing" ,
"resp_key" : "data" ,
"api_getAlways" : false
}
}
]
} ,
{
"type" : "chart" ,
"chart_id" : "widget_projects_chart1" ,
"cardTitle" : "Project Statistic" ,
"cardStyle" : {
"borderRadius" : "20px" ,
"background" : "rgb(215 215 215 / 10%)" ,
"height" : "350px"
} ,
"size" : 4 ,
"chartOpt" : {
"type" : "donut" ,
"colors" : {
"series3" : "rgba(115, 103, 240, .5)" ,
"series2" : "rgb(115, 103, 240)" ,
"series1" : "rgba(115, 103, 240, .2)"
} ,
"yaxis_title" : "Count of Projects" ,
"xaxis_title" : "Projects Progress" ,
"plotOptions" : {
"bar" : {
"borderRadius" : 10
}
} ,
"tooltip_suffix" : "Contract"
} ,
"dataFrom" : {
"api" : "Projects/summary" ,
"baseUrl" : "marketing" ,
"resp_key" : "data" ,
"api_getAlways" : false
}
} , ....
]