Report Example

ℹ️ This example shows how to create a report using a layout and components like a box

//global 1
const 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}
];

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' });
}

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"
})

// Labels on X axis (Months deduped)
const categories = Array.from(new Set(data.map(e=>e.month)));

// Convert data to a format comprehensible for the Chart library. You can omit the category parameter if it is not necessary (optional).
const series = toSeries({data:data, x:"month", y:"total_sales", category:"channel"})
//printJSON(series);
areaChart({
  series: series,
  categories: categories
});

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