// quarter label from a 'YYYY/MM/DD' date string, no external date library
function quarterOf(val) {
  return Math.floor(new Date(val).getMonth() / 3) + 1
}

var options = {
  series: [
    {
      name: 'Revenue',
      data: [
        {
          x: '2024/01/01',
          y: 400,
        },
        {
          x: '2024/04/01',
          y: 430,
        },
        {
          x: '2024/07/01',
          y: 448,
        },
        {
          x: '2024/10/01',
          y: 470,
        },
        {
          x: '2025/01/01',
          y: 540,
        },
        {
          x: '2025/04/01',
          y: 580,
        },
        {
          x: '2025/07/01',
          y: 690,
        },
        {
          x: '2025/10/01',
          y: 690,
        },
      ],
    },
  ],
  chart: {
    type: 'bar',
    height: 380,
  },
  xaxis: {
    type: 'category',
    labels: {
      formatter: function (val) {
        return 'Q' + quarterOf(val)
      },
    },
    group: {
      style: {
        fontSize: '10px',
        fontWeight: 700,
      },
      groups: [
        { title: '2024', cols: 4 },
        { title: '2025', cols: 4 },
      ],
    },
  },
  title: {
    text: 'Quarterly Revenue',
  },
  yaxis: {
    labels: {
      formatter: function (val) {
        return '$' + val + 'k'
      },
    },
  },
  tooltip: {
    x: {
      formatter: function (val) {
        return 'Q' + quarterOf(val) + ' ' + new Date(val).getFullYear()
      },
    },
  },
}

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