Node Types | Description | Example node | Explanation |
|---|
Text | Allows you to display plain text with customizable styles. For example, you can adjust: font size, color, and alignment. | | Code Block |
|---|
| {
type: 'text',
text: 'Welcome to Custom Reports!',
style: {
fontSize: 16,
marginBottom: 20,
lineHeight: 1.5,
color: '#555',
} |
| fontSize: sets the size of the font
text: enter the text here
marginBottom: sets the bottom margin of an element
lineHeight: specifies the height of a line
color: sets the color of the text
|
Link | Allows you to create clickable links. Customize the URL and the text. | | Code Block |
|---|
| {
type: 'link',
href: 'https://example.com',
style: {
color: '#0052CC',
}
{
type: 'text',
text: 'Click here for example', |
| |
SVG | Displays scalable vector graphics. Adjust the size, colors, and other properties to create custom visualizations. | | Code Block |
|---|
| {
type: 'svg',
src: '/app/assets/images/illustrations/appfire-icon.svg',
style: {
'path.fill': '#000',
'path.stroke': '#000',
} |
| src: path to the svg location
class: CSS classes from provided stylesheet or stylesheet node
style[]: Styles defined in JS-CSS style
|
Image | Displays images from a URL. You can adjust the size and add alt text for accessibility. | | Code Block |
|---|
| {
type: 'image',
src: 'https://example.com/{id}.jpg',
alt: 'img {id}',
style: { width: 100 }
} |
| src: Interpolated property for the image source
alt: alt-text to improve accessibility
class: CSS classes from provided stylesheet
|
Progress | Displays progress bars. You can customize the appearance and behavior to show completion status. | | Code Block |
|---|
| {
type: 'progress',
class: 'card',
value: '60',
} |
| variant: circular, linear
value: Value to display
minValue: Minimum progress value
maxValue: Maximum progress value
background: Show background
backgroundPadding: specifies the origin position of a background image
|
Chart | Displays data in graphical form. You can create bar, line, and area charts to visualize information. The PieChart node is also available for proportion-based data. | | Code Block |
|---|
| {
type: 'chart',
options: {
chart: { width: 300, height: 200 },
},
data: {
categories: '$.categories',
series: [
{
chartType: 'bar',
name: 'Sales',
stroke: '#000',
fill: '#ffb840',
label: true,
data: '$.investments',
},
{
chartType: 'line',
name: 'Investments',
stroke: '#000',
fill: '#3f840f',
label: true,
data: '$.investments',
},
],
},
} |
| options[]:
chart[]:
cartesianGrid[]:
legend[]:
xAxis[]:
yAxis[]:
tooltip[]:
data[]:
|
Table | Allow for structured data display. Customize columns and rows to fit your needs. | | Code Block |
|---|
| {
type: 'table',
columns: [
{ header: 'Name', accessor: 'name' },
{ header: 'Surname', accessor: 'surname' },
// { header: 'Age', accessor: 'age', cell: { type: 'text', text: '{age} years' } },
{ header: 'Age in hours', accessor: 'age', cell: [{ type: 'text', text: '{age * 365 * 24} hours' }] },
],
} |
| class: CSS classes from provided stylesheet or stylesheet node
style[]: Styles defined in JS-CSS style
path: JSON path for the selection, it must be an array
columns[]:
header: String representing the title header in the table
accessor: JSON path expression to access the data in EACH row
cell[]: Child nodes, customizing the body of the cell to any structure
|
List | Lists display items from an array. Customize the appearance and layout to suit your report. | | Code Block |
|---|
| {
type: 'list',
path: '$',
item: {
type: 'text',
style: {
display: 'block',
margin: 4,
padding: 4,
border: '1px dashed red',
borderRadius: 5,
},
text: 'List item: {$}',
} |
| |
REST | Fetches data from an API. You can specify the URL and customize the data display. You can also create datasources to reuse configurations or to protect credentials. See |