Reports
Examples
getting started
premium components
deprecated components
Examples
Below are some example / template reports created with Hybiscus for inspiration which you can take and customise further for your own purposes. Why not try using it in the Cloud Editor for example? Just download the JSON definition and paste it into the Cloud Editor to get started!
Examples with code
| Name | JSON definition | |
|---|---|---|
| Marketing report | Download definition | Download PDF |
| Data visualisation report | Download definition | Download PDF |
Examples with themes
Report 1 (Marketing report)
forestcolour themenewspapertypography theme
Report 2
corporatecolour themejosttypography theme
Report 3
summercolour themeloopedtypography theme
Source code
{
"type": "Report",
"options": {
"report_title": "Example.com",
"report_byline": "Monthly analytics report",
"version_number": "v0.1.0"
},
"config": {
"colour_theme": "forest", # Change as necessary
"typography_theme": "newspaper" # Change as necessary
},
"components": [
{
"type": "Section",
"options": {
"section_title": "Overviews and KPI metrics",
"highlighted": true,
"columns": 3
},
"components": [
{
"type": "Card",
"options": {
"title": "Unique views",
"value": 987,
"units": "views",
"icon": "comet"
}
},
{
"type": "Card",
"options": {
"title": "Total sales",
"value": "53,476",
"units": "$",
"icon": "coin"
}
},
{
"type": "Card",
"options": {
"title": "Product views",
"value": "1,362",
"units": "views",
"icon": "building-store"
}
},
{
"type": "Card",
"options": {
"title": "New customers",
"value": "321",
"icon": "users"
}
},
{
"type": "Card",
"options": {
"title": "Returning customers",
"value": "98",
"icon": "user-check"
}
},
{
"type": "Card",
"options": {
"title": "Bounce rate",
"value": "0.89",
"units": "%",
"icon": "arrow-back"
}
}
]
},
{
"type": "Section",
"options": {
"section_title": "Electronics product category"
},
"components": [
{
"type": "Text",
"options": {
"width": "1/3",
"text": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae provident ipsa culpa officiis illum commodi voluptas, sequi repellat veniam adipisci laboriosam amet nesciunt nam explicabo."
}
},
{
"type": "Row",
"options": {
"columns": 2,
"width": "2/3"
},
"components": [
{
"type": "Card",
"options": {
"title": "Click through rate",
"value": "5",
"units": "%",
"icon": "click"
}
},
{
"type": "Card",
"options": {
"title": "Impressions",
"value": "1,364",
"units": "views",
"icon": "chart-area-line",
"highlighted": true
}
},
{
"type": "Card",
"options": {
"title": "Total sales",
"value": "3,567",
"units": "$",
"icon": "coin"
}
},
{
"type": "Card",
"options": {
"title": "Product views",
"value": "1,018",
"units": "views",
"icon": "building-store"
}
}
]
}
]
},
{
"type": "Section",
"options": {
"section_title": "Key performing pages"
},
"components": [
{
"type": "Table",
"options": {
"title": "",
"headings": [
"URL",
"Page title",
"Views"
],
"striped": true,
"rows": [
[
"/products/arduino",
"Arduino accessories",
"9,342"
],
[
"/products/raspberry-pi",
"Raspberry Pi accessories",
"5,674"
],
[
"/products/keyboards",
"Keyboards",
"2,248"
],
[
"/products/graphics-cards",
"Graphics cards",
"973"
]
]
}
}
]
},
{
"type": "Section",
"options": {
"section_title": "Top performing referrers",
"highlighted": true
},
"components": [
{
"type": "Table",
"options": {
"title": "",
"headings": [
"Referrer",
"URL",
"Count"
],
"striped": true,
"rows": [
[
"Google",
"google.com/search?s=raspberryi+pi",
"13,934"
],
[
"Bing",
"bing.com/search?s=raspberry+pi",
"9,231"
],
[
"Facebook",
"facebook.com",
"3,673"
],
[
"Twitter",
"twitter.com",
"2,190"
]
]
}
}
]
}
]
}
Missing something?
Hybiscus is continuously improving and adding new features. If you think we are missing a critical feature, please do not hesitate to contact us and offer your feedback at info@hybiscus.dev