For AI agents: the complete documentation index is available at https://docs.dataplatform.ovh.net/llms.txt, the full documentation bundle is available at https://docs.dataplatform.ovh.net/llms-full.txt, and this page is available as Markdown at https://docs.dataplatform.ovh.net/sdk/app-charts.md.
  • 🇬🇧 English

    • Charts in Application SDK

    Warning

    Rework pending, no delivery date. The Front App SDK (ReactJS) and the Front API SDK (NodeJS) are both being replaced. This page documents the current release, remains accurate, and is maintained until the replacement ships. Code written against it keeps working.

    Charts in the context of the ForePaaS SDK gather the main aspects of rendering data in an application context:

    • Observe: update when variables changes, in ForePaaS it is called dynamic parameter.
    • Request: building a request and getting results.
    • Render: render those results.

    Observe

    The chart may be linked to dynamic-parameters.

    In the example below, the chart will be updated in case of a different date range selected in a datepicker or a different city in a selectbox. The not-nullable-dynamic-parameter indicates that it must specify a value for this parameter to render.

    {
  "chart": {
    "dynamic-parameters": [
      "datepicker",
      "city"
    ],
    "not-nullable-dynamic-parameters": [
      ""datepicker"
    ],
    "component": "echarts"
  }
}
    Warning

    The dynamic-parameters list the id of previously created dynamic-parameter

    There are no other settings to be done. This chart will observe all changes done in dynamic parameters and will automatically make new requests and render as needed.

    Request

    The request uses the same format as the Analytics Manager.

    {
    "chart": {
        "component": "echarts",
        "request": {
            "data": {
                "fields": {
                    "quantite": [
                        "sum"
                    ]
                }
            },
            "scale": {
                "fields": [
                    "year",
                    "month",
                    "city"
                ],
                "axis": {
                    "x": [
                        "year",
                        "month"
                    ],
                    "y": [
                        "city"
                    ]
                }
            },
            "evol": {
                "scale": "year"
            }
        }
    }
}

    Render

    Here, parameters of interest are component and options.

    "chart": {
    "component": "echarts",
    "options": {
        "title": {
            "text": "Nombre de visites mensuelles"
        }
    },
    "request": {},
    "dynamic-parameters": [],
    "not-nullable-dynamic-parameters": []
}
    • component: the Charts module will look for a registered component, in this case echarts, and will pass over all informations needed to render itself. You can also create your own Custom Chart Component.
    • options: additionnal parameters, specific to each component, that are passed to this component to customize behaviour and rendering.

    Putting it together

    {
    "component": "echarts",
    "dynamic-parameters": [
        "datepicker"
    ],
    "options": {
        "title": {
            "text": "Monthly visitors"
        }
    },
    "request": {
        "data": {
            "fields": {
                "vists": [
                    "sum"
                ]
            }
        },
        "scale": {
            "fields": [
                "year",
                "month",
                "category"
            ],
            "axis": {
                "x": [
                    "year",
                    "month"
                ],
                "y": [
                    "category"
                ]
            }
        }
    }
}