Browser
  └── dashboard.vue                     ← main SPA, renders all components
        ├── dashboard-pie.vue           ← "pie" component wrapper
        │     └── pie-chart.vue         ← D3 v7 rendering
        ├── TableComponent              ← "table" component
        ├── TimeseriesComponent         ← "timeseries" component
        ├── BadgeComponent              ← "badge" component
        └── ... (bar, lateral-pie, sankey, box-overview, …)

Lua backend
  ├── pro/scripts/lua/report.lua                      ← HTML shell + context
  ├── pro/scripts/lua/rest/v2/get/report/template/    ← template API
  │     ├── list.lua                                  ← list available templates
  │     ├── data.lua                                  ← load components for a template
  │     └── widgets.lua                               ← list addable widgets (edit mode)
  └── pro/scripts/lua/rest/v2/get/db/charts/          ← chart data endpoints
        ├── default_rest.lua                          ← generic endpoint (reads chart_id from GET)
        ├── top_l4_proto.lua
        ├── top_l7_proto.lua
        ├── top_l7_categories.lua
        └── ...

1. Browser loads /lua/pro/report.lua
   └── Lua renders the HTML shell and passes a context JSON to Vue:
         template_endpoint, template_list_endpoint, template_add_endpoint, ...

2. dashboard.vue mounts
   └── calls template_list_endpoint → gets list of available templates
   └── calls template_endpoint?template=<name> → gets components[] for the selected template

3. For each component in the array:
   └── dashboard.vue dynamically renders the matching Vue component
   └── Each component calls its own data endpoint (params.url + url_params)
   └── The endpoint returns data; the component renders it

4. When the user changes the epoch range or applies a filter:
   └── dashboard.vue calls get_component_data() for all components
   └── Components re-render with the new data

5. Template edit mode (Enterprise XL only):
   └── Calls widgets.lua to list addable widgets
   └── Add/remove/reorder components via the REST add/edit/delete endpoints
   └── Changes are persisted to workingdir/templates/report/<template_id>.json

{
    "name"     : "Default Report",
    "readonly" : true,
    "filters"  : [ ... ],
    "components" : [ ... ]
}

{ "name": "l7proto" },
{ "name": "output_snmp", "show_only_if_selected": "probe_ip" }

{
    "component" : "pie",
    "id"        : "top_l4_proto",
    "i18n_name" : "top_l4_proto",
    "width"     : 3,
    "height"    : 4,
    "params"    : {
        "url"        : "/lua/pro/rest/v2/get/db/charts/top_l4_proto.lua",
        "url_params" : { "length": 10 },
        "unit"       : "bytes",
        "label"      : "traffic_labels.total_bytes"
    }
}

[ { "label": "TCP", "value": 29126273 }, { "label": "Other", "value": 45400 } ]

{
    "component"  : "table",
    "id"         : "top_clients",
    "i18n_name"  : "db_search.top_clients",
    "width"      : 6,
    "height"     : 4,
    "params"     : {
        "url"        : "/lua/pro/rest/v2/get/db/historical_db_search.lua",
        "url_params" : { "query_preset": "clients", "aggregated": true, "start": 0, "length": 20 },
        "table_type" : "db_search",
        "columns"    : [
            { "id": "cli_ip",      "data_type": "host",  "i18n_name": "host_details.host" },
            { "id": "total_bytes", "data_type": "bytes", "i18n_name": "volume" }
        ]
    }
}

{
    "component" : "timeseries",
    "id"        : "traffic_chart",
    "width"     : 12,
    "height"    : 6,
    "params"    : {
        "url"         : "/lua/pro/rest/v2/get/timeseries/ts_multi.lua",
        "url_params"  : {},
        "post_params" : {
            "limit": 180, "version": 4,
            "ts_requests": {
                "ifid": { "ts_query": "ifid:$IFID$", "ts_schema": "iface:traffic_rxtx", "tskey": "$IFID$" }
            }
        },
        "source_type" : "interface"
    }
}

{
    "component" : "badge",
    "id"        : "total_bytes",
    "color"     : "info",
    "width"     : 4,
    "height"    : 2,
    "params"    : {
        "url"               : "/lua/pro/rest/v2/get/db/stats.lua",
        "url_params"        : { "type": "summary" },
        "icon"              : "fas fa-scale-balanced",
        "i18n_name"         : "total_bytes",
        "counter_path"      : "total_bytes",
        "counter_formatter" : "bytes"
    }
}

{
    "id"         : "top_l4_proto",
    "component"  : "pie",
    "i18n_name"  : "top_l4_proto",
    "i18n_descr" : "top_l4_proto",
    "width"      : 4,
    "height"     : 4,
    "requires"   : { "modules": [ "historical_flows" ] },
    "params"     : { ... }
}

{
    "name"        : "Applications",
    "i18n_name"   : "top_protos",
    "data_source" : "flows",
    "hourly"      : true,
    "chart"       : [ ... ],
    "show_in_page": "analysis"
}

local chart_id     = "my_chart"
local query_preset = "protos"   -- name of the .json file in scripts/historical/analysis/

local res, preset = db_search_manager.get_charts_query(chart_id, query_preset, any_interface)
res = historical_chart_formatter.format_default_preset_chart(res, preset)
rest_utils.answer(rc, res)

{
    "chart_id"               : "my_chart",
    "chart_i18n_name"        : "my_chart_title",
    "chart_endpoint"         : "/lua/pro/rest/v2/get/db/charts/my_chart.lua",
    "chart_events"           : { "dataPointSelection": "db_analyze" },
    "chart_gui_filter"       : "l7proto",
    "chart_sql_query"        : "SELECT L7_PROTO, SUM(TOTAL_BYTES) AS bytes FROM flows WHERE ($WHERE$) GROUP BY L7_PROTO ORDER BY bytes DESC LIMIT 10",
    "chart_type"             : "donut_apex_chart",
    "chart_record_value"     : "bytes",
    "chart_record_label"     : "L7_PROTO",
    "chart_width"            : 4,
    "chart_y_formatter"      : "format_bytes",
    "chart_aggregate_low_data": true
}

{
    "component" : "pie",
    "id"        : "my_chart",
    "i18n_name" : "my_chart_title",
    "width"     : 4,
    "height"    : 4,
    "params"    : {
        "url"        : "/lua/pro/rest/v2/get/db/charts/my_chart.lua",
        "url_params" : { "length": 10 },
        "unit"       : "bytes"
    }
}

{
    "id"         : "my_chart",
    "component"  : "pie",
    "i18n_name"  : "my_chart_title",
    "i18n_descr" : "my_chart_descr",
    "width"      : 4,
    "height"     : 4,
    "requires"   : { "modules": [ "historical_flows" ] },
    "params"     : {
        "url"        : "/lua/pro/rest/v2/get/db/charts/my_chart.lua",
        "url_params" : { "length": 10 },
        "unit"       : "bytes"
    }
}

["my_chart_title"] = "My Chart Title",

function historical_chart_formatter.format_my_chart(records, preset)
    for _, record in pairs(records["results"]) do
        record["label"] = record["L7_PROTO_NAME"] .. " (" .. record["SRC_ASN"] .. ")"
    end
    -- delegate to the standard pie formatter
    return format_pie_array_data(
        preset["chart_record_value"],
        preset["chart_record_label"],
        records, preset
    )
end

res = historical_chart_formatter.format_my_chart(res, preset)