📊 Report Example

ℹ️ Learn how to create an online report using layout components like box and interactive charts.

👉 Click the Share button (top right) to view it online from your mobile or web browser.

🗂 Data Processing

// Global data array
let data = [];

// Function to calculate total sales per channel
function getSum(channel) {
  return data
    .filter(e => e.channel === channel)
    .map(e => e.total_sales)
    .reduce((acc, currVal) => acc + currVal, 0)
    .toLocaleString('en-US', { style: 'currency', currency: 'USD' });
}

// Simulated dataset (could be replaced by an API call)
data = [
  { channel: 'Facebook', month: '2023-01', total_sales: 150 },
  { channel: 'Facebook', month: '2023-02', total_sales: 113 },
  { channel: 'Facebook', month: '2023-03', total_sales: 83 },
  { channel: 'Facebook', month: '2023-04', total_sales: 193 },
  { channel: 'Google', month: '2023-01', total_sales: 235 },
  { channel: 'Google', month: '2023-02', total_sales: 195 },
  { channel: 'Google', month: '2023-03', total_sales: 125 },
  { channel: 'Google', month: '2023-04', total_sales: 155 },
  { channel: 'LinkedIn', month: '2023-01', total_sales: 335 },
  { channel: 'LinkedIn', month: '2023-02', total_sales: 286 },
  { channel: 'LinkedIn', month: '2023-03', total_sales: 112 },
  { channel: 'LinkedIn', month: '2023-04', total_sales: 55 }
];

📦 Summary Dashboard

showBox({
  title: "Total Google", 
  content: getSum("Google"), 
  footer1: { color: "lightGreen", value: "+14%" }, 
  footer2: "vs last year"
});

showBox({
  title: "Total LinkedIn", 
  content: getSum("LinkedIn"), 
  footer1: { color: "lightGreen", value: "+8%" }, 
  footer2: "vs last year"
});

showBox({
  title: "Total Facebook", 
  content: getSum("Facebook"), 
  footer1: { color: "red", value: "-4%" }, 
  footer2: "vs last year"
});

📈 Sales Trend Over Time

// Extract unique months for the X-axis
const categories = Array.from(new Set(data.map(e => e.month)));

// Transform data into a format suitable for charting
const series = toSeries({ data: data, x: "month", y: "total_sales", category: "channel" });

areaChart({
  series: series,
  categories: categories
});

📋 Detailed Data

showDatagrid({ data: filter(data, ['channel', 'month', 'total_sales']), pagination: true });

🔧 Customization Tips

• Replace data with an API call to load real-time data.
• Adjust footer1 in showBox for different percentage changes.
• Modify areaChart() to use different chart types (bar, line, etc.).