Summary to Chart

contoh response summary

Pada gambar diatas adalah contoh response standar dari backend ketika kita akan membuat SummaryCard, 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:

Contoh konfigurasi nya seperti ini:

"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
          }
        }, ....
    ]