var base = new Date('01 Jan 2025 GMT').getTime()
var ts1 = base
var ts2 = base + 86400000
var ts3 = base + 518400000

var dataSet = [[], [], []]

for (var i = 0; i < 12; i++) {
  ts1 = ts1 + 86400000
  var innerArr = [ts1, dataSeries[2][i].value]
  dataSet[0].push(innerArr)
}
for (var i = 0; i < 18; i++) {
  ts2 = ts2 + 86400000
  var innerArr = [ts2, dataSeries[1][i].value]
  dataSet[1].push(innerArr)
}
for (var i = 0; i < 12; i++) {
  ts3 = ts3 + 86400000
  var innerArr = [ts3, dataSeries[0][i].value]
  dataSet[2].push(innerArr)
}

var options = {
  series: [
    {
      name: 'Auth API',
      data: dataSet[0],
    },
    {
      name: 'Search API',
      data: dataSet[1],
    },
    {
      name: 'Media API',
      data: dataSet[2],
    },
  ],
  chart: {
    type: 'area',
    stacked: false,
    height: 350,
    zoom: {
      enabled: false,
    },
  },
  dataLabels: {
    enabled: false,
  },
  markers: {
    size: 0,
  },
  fill: {
    type: 'gradient',
    gradient: {
      shadeIntensity: 1,
      inverseColors: false,
      opacityFrom: 0.45,
      opacityTo: 0.05,
      stops: [20, 100, 100, 100],
    },
  },
  yaxis: {
    labels: {
      style: {
        colors: '#8e8da4',
      },
      offsetX: 0,
      formatter: function (val) {
        return (val / 1000000).toFixed(1) + 'M'
      },
    },
    title: {
      text: 'Requests',
    },
    axisBorder: {
      show: false,
    },
    axisTicks: {
      show: false,
    },
  },
  xaxis: {
    type: 'datetime',
    tickAmount: 8,
    min: new Date('01/01/2025').getTime(),
    max: new Date('01/20/2025').getTime(),
    labels: {
      rotate: -15,
      rotateAlways: true,
      format: 'dd MMM yyyy',
    },
  },
  title: {
    text: 'Requests by Service (irregular intervals)',
    align: 'left',
    offsetX: 14,
  },
  tooltip: {
    shared: true,
  },
  legend: {
    position: 'top',
    horizontalAlign: 'right',
    offsetX: -10,
  },
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()