Analytic Widgets Block

An analytics block used to display statistical metrics, KPIs, and charts.

The block can contain one or more widgets displayed as cards with numeric values, indicators, and charts.

How It Works

The Page Schema contains a block of type analytic_widgets:

{
    "statistics": {
        "type": "analytic_widgets",
        "size": 4,
        "settings": {
            "widgets_group": "car_statistic"
        }
    }
}

When the page is opened, the Frontend requests the widget group data from the API.

The business logic for a widget group is always located at:

app/actions/analytic_widgets/{widgets_group}/custom.php

For example:

app/actions/analytic_widgets/car_statistic/custom.php

The script generates and returns an array of widgets, which is used to build the analytics block.

Block Settings

Property	Type	Description
widgets_group *	string	Identifier of the handler responsible for generating the widget collection. Each group must have a corresponding action: app/actions/analytic_widgets/{widgets_group}/custom.php
filters	array	Filters available to the widgets.

Example widget group:

{
  "title": "Statistic",
  "type": "analytic_widgets",
  "size": 4,
  "settings": {
    "widgets_group": "car_statistic",
    "filters": [
      {
        "property": "car_id",
        "value": ":id"
      }
    ]
  },
  "components": []
}

Response Structure

The widget group handler must return an array of widgets.

Each array element represents an individual analytics card.

Property	Type	Description
value *	string	Widget value. Displayed as large bold text.
description	string	Description of the value. Displayed below value in smaller text.
size	integer	Widget width within the block, from 1 to 4: 1 — 25% 2 — 50% 3 — 75% 4 — 100%
prefix	string	Text displayed before the value. Typically used for currencies or units of measurement.
badge	object	Additional indicator displayed to the right of the value.
background	string	Widget background colour.
detail	array	Chart data for the widget. If empty, the widget is displayed without a chart.

Example widget:

[
    {
        "value": "Delivered",
        "description": "Order status",
        "prefix": "pcs",
        "badge": {},
        "background": "info",
        "detail": {
            "type": "donut",
            "settings": {
                "chart": [
                    {
                        "title": "Successful",
                        "value": 12
                    },
                    {
                        "title": "Rejected",
                        "value": 3
                    }
                ]
            }
        }
    }
]

badge

An additional badge displayed to the right of the main value.

Most commonly used to indicate changes in a metric.

Property	Type	Description
value *	string	Badge text.
background	string	Badge background colour.

Example:

{
    "value": "+12%",
    "background": "success"
}

detail

Property	Type	Description
type *	string	Chart type.
settings *	object	Chart data.

Chart Types

donut

Doughnut chart.

Used to display value distribution.

Example:

{
    "type": "donut",
    "settings": {
        "chart": {
            "success": {
                "title": "Next status",
                "value": 12
            },
            "cancelled": {
                "title": "Cancelled",
                "value": 3
            }
        }
    }
}

chart

Line chart.

Used to display metric changes over time.

Example:

{
    "type": "chart",
    "settings": {
        "chart": {
            "x": ["2026.06.01", "2026.06.02", "2026.06.03"],
            "lines": [
                {
                    "title": "New customers",
                    "values": [4, 12, 3]
                },
                {
                    "title": "Returning customers",
                    "values": [29, 15, 18]
                }
            ]
        }
    }
}