How to use custom widget to show statistics chart in axon ivy 12 Portal

ypetrov

Hello Axon Ivy team,
I was looking at https://market.axonivy.com/market-cache/portal/portal-guide/12.0.4.1/doc/portal-developer-guide/dashboard/new-dashboard-statistic-widget.html and wondering how exactly to set up the configuration so I can show a statistics widget.
I currently have :

variables.Portal.ClientStatistic.json

[
{
"id": "1",
"aggregates": "priority",
"filter": "businessState:OPEN,IN_PROGRESS,canWorkOn",
"chartTarget": "TASK",
"chartType": "pie",
"names": [
{ "locale": "en", "value": "Tasks by Priority" },
{ "locale": "de", "value": "Aufgaben nach Priorität" },
{ "locale": "fr", "value": "Tâches par priorité" },
{ "locale": "es", "value": "Tareas por prioridad" }
],
"descriptions": [
{ "locale": "en", "value": "This pie chart displays all tasks by priority." },
{ "locale": "de", "value": "Dieses Kreisdiagramm zeigt alle Aufgaben nach Priorität an." },
{ "locale": "fr", "value": "Ce diagramme à secteurs affiche toutes les tâches par priorité." },
{ "locale": "es", "value": "Este gráfico circular muestra todas las tareas por prioridad." }
],
"icon": "si si-analytics-pie-2",
"refreshInterval": 300
}
]

variables.Portal.StatisticCharts.json

{
"enabled": true,
"showOnlyForRoles": [],
"showExportButtons": true
}

variables.Portal.Dashboard.json

[{
  "id": "statistics-dashboard",
  "version": "12.0.0",
  "titles": [
    { "locale": "en", "value": "Statistics" },
    { "locale": "de", "value": "Statistiken" },
    { "locale": "fr", "value": "Statistiques" },
    { "locale": "es", "value": "Estadísticas" }
  ],
  "icon": "fa fa-chart-pie",
  "widgets": [
    {
      "type": "client-statistic",
      "id": "tasks_by_priority_stat",
      "layout": {
        "x": 0, "y": 0,
        "w": 12, "h": 8,
        "styleClass": "ivy-statistics-widget"
      },
      "chartId": "1",
      "showFullscreenMode": true
    }
  ],
  "permissions": [ "Everyone" ]
}]

The problem is that there is no chart shown at all, just a blank screen.

I have the following error in the browser dev console :

And here is the Statistics API response for POST http://localhost:8081/designer/api/statistics/data

{
    "errorId": "1964346C92AA78C3",
    "errorMessage": "com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot deserialize value of type `java.util.ArrayList<com.axonivy.portal.bo.ClientStatistic>` from Object value (token `JsonToken.START_OBJECT`)\n at [Source: REDACTED (`StreamReadFeature.INCLUDE_SOURCE_IN_LOCATION` disabled); line: 1, column: 1]",
    "statusCode": 500
}

Is there any demo in the GitHub repos or the market that shows how to set up a chart?

Axon Ivy version 12.0.3

Best regards.

Nam Mai

Hi @ypetrov ,
I noticed some problems:

In your variables.Portal.ClientStatistic.json, the "filter" field has an comma instead of whitespace between OPEN and IN_PROGRESS, the correct value should be:

"filter": "businessState:OPEN IN_PROGRESS,canWorkOn"

Portal using API from ivy, which is already included in the Ivy documentation, you can learn more about correct syntax at:
For task:

https://developer.axonivy.com/api-browser?configUrl=https%3A%2F%2Fdeveloper.axonivy.com%2Fdoc%2F12.0%2Fopenapi%2Fconfig.json&urls.primaryName=default#/workflow/stats_1

For case:

https://developer.axonivy.com/api-browser?configUrl=https%3A%2F%2Fdeveloper.axonivy.com%2Fdoc%2F12.0%2Fopenapi%2Fconfig.json&urls.primaryName=default#/workflow/stats

In variables.Portal.ClientStatistic.json, the Client statistic is missing "permission" field, you should add this to your JSON

"permissions": ["Everybody"]

In the variables.Portal.Dashboard.json, I see that permission is Everyone, if you want everybody see it, the permission should be same as above: "Everybody".

The configuration of ClientStatistic.json is explained in our document:

https://market.axonivy.com/market-cache/portal/portal-guide/12.0.4.1/doc/portal-developer-guide/dashboard/new-dashboard-statistic-widget.html#portal-statistic-widget

We know that the filter conditions are complex. Therefore, in the upcoming Portal 13.1, we will introduce a feature that allows you to define client statistic charts directly on UI.

ypetrov

Hello @Nam Mai , I have followed your direction and modified the files as follows :

variables.Portal.Dashboard.json

[{
"id": "statistics-dashboard",
"version": "12.0.0",
"titles": [
{ "locale": "en", "value": "Statistics" },
{ "locale": "de", "value": "Statistiken" },
{ "locale": "fr", "value": "Statistiques" },
{ "locale": "es", "value": "Estadísticas" }
],
"icon": "fa fa-bar-chart",
"widgets": [
{
"type": "client-statistic",
"id": "tasks_by_priority_stat",
"layout": {
"x": 0, "y": 0,
"w": 12, "h": 8,
"styleClass": "ivy-statistics-widget"
},
"chartId": "10",
"showFullscreenMode": true
}
],
"permissions": [ "Everybody" ]
}]

variables.Portal.ClientStatistic.json

{
"enabled": true,
"showOnlyForRoles": [],
"showExportButtons": true
}

variables.Portal.StatisticCharts.json

[
{
"id": "10",
"aggregates": "priority",
"filter": "businessState:OPEN IN_PROGRESS,canWorkOn",
"chartTarget": "TASK",
"chartType": "pie",
"names": [
{ "locale": "en", "value": "Tasks by Priority" },
{ "locale": "de", "value": "Aufgaben nach Priorität" },
{ "locale": "fr", "value": "Tâches par priorité" },
{ "locale": "es", "value": "Tareas por prioridad" }
],
"descriptions": [
{ "locale": "en", "value": "This pie chart displays all tasks by priority." },
{ "locale": "de", "value": "Dieses Kreisdiagramm zeigt alle Aufgaben nach Priorität an." },
{ "locale": "fr", "value": "Ce diagramme à secteurs affiche toutes les tâches par priorité." },
{ "locale": "es", "value": "Este gráfico circular muestra todas las tareas por prioridad." }
],
"icon": "si si-analytics-pie-2",
"refreshInterval": 300,
"permissions": [ "Everybody" ]
}
]

Unfortunately, I still get the same error as before :

The response of the statistics API is :

{
  "errorId": "1964391B8E9B5749",
  "errorMessage": "com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot deserialize value of type `java.util.ArrayList<com.axonivy.portal.bo.ClientStatistic>` from Object value (token `JsonToken.START_OBJECT`)\n at [Source: REDACTED (`StreamReadFeature.INCLUDE_SOURCE_IN_LOCATION` disabled); line: 1, column: 1]",
  "statusCode": 500
}

Am I missing something else here?