1️⃣ Header (header)

A header element is used to add titles, subtitles, and optional images to your report.

{
  "type": "header",
  "mainHeading": "Quarterly Sales Report",
  "subHeading": "Performance Overview - Q1 2024",
  "mainImage": "https://s3.amazonaws.com/example.png",
  "backgroundColor": "#000000",
  "textColor": "#FFFFFF"
}

2️⃣ Table (table)

Tables are used to display structured data in rows and columns. You can define column headers, data, and orientation (horizontal or vertical).

{
  "type": "table",
  "tableTitle": "Revenue Breakdown",
  "tableHeaders": ["Product", "Revenue", "Growth"],
  "tableData": [
    {
      "Product": "Product A",
      "Revenue": "$95,800",
      "Growth": "+8%"
    }
  ],
  "orientation": "Horizontal"
}

3️⃣ Metric Card (card)

Metric cards highlight key numerical insights in the report.

{
  "type": "card",
  "title": "Total Revenue",
  "value": "$1,200,000"
}

4️⃣ Chart (chart)

Charts allow you to visualize data using different chart types (e.g., bar, line).

{
"type": "chart",
"chartType": "bar",
"chartData": {
  "title":"Units Sold Per Product",
  "labels": ["Laptop X", "Smartphone Y", "Tablet Z", "Smartwatch A", "Headphones B"],
  "series": [{
        "name": "Units Sold",
        "data": [150, 220, 180, 130, 250]
      }],
  "chartOptions":{ "color":"#4CAF50" }
  }
}

5️⃣ Row (row)

A row groups multiple elements horizontally within a single layout section.

{
  "type": "row",
  "numberOfColumns": 2,
  "elements": [
    {
      "type": "card",
      "title": "Total Orders",
      "value": "4,560"
    },
    {
      "type": "card",
      "title": "New Customers",
      "value": "1,250"
    }
  ]
}

6️⃣ Heading (heading)

Used to define section titles within the report.

{
  "type": "heading",
  "headingLevel": 2,
  "headingText": "Sales Performance Analysis"
}

📌 Page Orientation

Reports can have two orientations:

1. Portrait (default)
2. Landscape

{
  "title": "Financial Summary",
  "pageOrientation": "Landscape",
  "elements": []
}