End-to-end guide to building analytical reports with dynamic chart visualizations, data-formula reshaping (MAP), hidden calculation layers, custom variable inputs, grouped tables, and LaTeX mathematical typesetting.
Complex reporting often requires transforming raw database or webhook records into clean visual presentations. In this guide, we walk through how to build an automated Quarterly Performance & Data Analysis Report combining dynamic charts, computed formulas, hidden calculation layers, structured tables, and mathematical typesetting with LaTeX.
Raw payload arrays rarely arrive in the exact numeric array or { x, y, r } point format that Chart.js expects. Instead of creating custom backend transformation scripts, use ComposeIt's built-in data-formula component and the MAP function.
The data-formula component accepts two primary traits:
formula(required): The expression string to compute.
variable(optional): The name of a variable on root to store the evaluated result (e.g., variable: "chartRevenueSeries").
When variable is defined, the result is saved into root.chartRevenueSeries, making it immediately accessible to charts, tables, or other formulas placed after it.
MAP(root.quarterlyData, 'revenue')
Copying from path selector
You can copy variables from the path selector avoiding the need for memorizing
variable names and it provides the correct format that handles null values
and accessing variables with spaces and special characters in their names eg
root.["Total Revenue"].
When you add a data-formula component to calculate intermediary variables (like chart data, tax totals, or statistical averages), the formula element itself should not appear visually on the printed PDF.
Open the Layer Manager on the left sidebar (stacked layers icon).
Locate the data-formula component in the layer tree.
Click the Visibility icon (👁️ / EyeOff) next to the component.
How it works behind the scenes: Even when a component is hidden from the visual DOM, ComposeIt's template execution engine processes the calculation during document compilation. The variable is computed, stored in root[variable], and made available to subsequent components without printing any visible text.
By default, the Cascading Path Selector in the trait editor navigates through static fields defined in your datasource schema.
However, when a variable was created dynamically at runtime by a data-formula (such as root.chartRevenue or root.bubbleCampaignPoints), it won't exist in the static schema picker.
Select your Chart component and open the Datasets trait in the Right Inspector.
Click on the dataset you wish to edit (e.g., "Dataset 1").
In the dataset's Values section, click the Connect Datasource (🗄️) button.
Instead of picking a field from the dropdown tree, enter your custom path directly in the path input:
root.chartRevenue
(Or for scatter/bubble points: root.scatterCampaignPoints)
Save the modal. The chart dataset's data property is now bound to the formula-generated variable!
Editor Canvas Preview: When a chart dataset is bound to a dynamic variable resolver, the editor canvas automatically displays a notice: “Generated for editor preview” and shows sample data points so you can visually style the chart without needing a live render run.
Grouping allows you to select a key to group data by that way the outer loop iterates over the grouped keys whilst exposing the items matching that key.
You can further loop over these items creating complex nested layouts.
Analytical reports often require showing the mathematical formulas behind key performance indicators. ComposeIt includes native support for LaTeX math expressions via KaTeX, ensuring crisp, vector-grade typography in rendered PDFs.
