/*
// this function will generate output in this format
// data = [
    [timestamp, 23],
    [timestamp, 33],
    [timestamp, 12]
    ...
]
*/
// Seeded PRNG so the scatter is identical on every load (stable snapshots).
var __seed = 0x51ed270b
function rand() {
  __seed |= 0
  __seed = (__seed + 0x6d2b79f5) | 0
  var t = Math.imul(__seed ^ (__seed >>> 15), 1 | __seed)
  t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
  return ((t ^ (t >>> 14)) >>> 0) / 4294967296
}

function generateDayWiseTimeSeries(baseval, count, yrange) {
  var i = 0
  var series = []
  while (i < count) {
    var y = Math.floor(rand() * (yrange.max - yrange.min + 1)) + yrange.min

    series.push([baseval, y])
    baseval += 86400000
    i++
  }
  return series
}

var options = {
  series: [
    {
      name: 'DIAMOND',
      data: generateDayWiseTimeSeries(
        new Date('01 Jun 2024 GMT').getTime(),
        10,
        {
          min: 5,
          max: 60,
        },
      ),
    },
    {
      name: 'TRIANGLE',
      data: generateDayWiseTimeSeries(
        new Date('01 Jun 2024 GMT').getTime(),
        10,
        {
          min: 54,
          max: 90,
        },
      ),
    },
    {
      name: 'CROSS',
      data: generateDayWiseTimeSeries(
        new Date('01 Jun 2024 GMT').getTime(),
        8,
        {
          min: 10,
          max: 50,
        },
      ),
    },
    {
      name: 'PLUS',
      data: generateDayWiseTimeSeries(
        new Date('01 Jun 2024 GMT').getTime(),
        16,
        {
          min: 30,
          max: 99,
        },
      ),
    },

    {
      name: 'SQUARE',
      data: generateDayWiseTimeSeries(
        new Date('01 Jun 2024 GMT').getTime(),
        10,
        {
          min: 0,
          max: 59,
        },
      ),
    },
    {
      name: 'LINE',
      data: generateDayWiseTimeSeries(
        new Date('01 Jun 2024 GMT').getTime(),
        10,
        {
          min: 0,
          max: 90,
        },
      ),
    },
    {
      name: 'CIRCLE',
      data: generateDayWiseTimeSeries(
        new Date('01 Jun 2024 GMT').getTime(),
        10,
        {
          min: 5,
          max: 35,
        },
      ),
    },

    {
      name: 'STAR',
      data: generateDayWiseTimeSeries(
        new Date('01 Jun 2024 GMT').getTime(),
        10,
        {
          min: 15,
          max: 60,
        },
      ),
    },
    {
      name: 'SPARKLE',
      data: generateDayWiseTimeSeries(
        new Date('01 Jun 2024 GMT').getTime(),
        10,
        {
          min: 45,
          max: 99,
        },
      ),
    },
  ],
  chart: {
    height: 350,
    type: 'scatter',
    zoom: {
      type: 'xy',
    },
  },
  colors: [
    '#008FFB',
    '#00E396',
    '#FEB019',
    '#FF4560',
    '#775DD0',
    '#546E7A',
    '#26A69A',
    '#D4526E',
    '#F86624',
  ],
  dataLabels: {
    enabled: false,
  },
  grid: {
    xaxis: {
      lines: {
        show: true,
      },
    },
    yaxis: {
      lines: {
        show: true,
      },
    },
  },
  xaxis: {
    type: 'datetime',
  },
  yaxis: {},
  legend: {
    markers: {
      strokeWidth: [1, 1, 3, 3, 1, 4, 1, 1, 1],
    },
  },
  markers: {
    shape: [
      'diamond',
      'triangle',
      'cross',
      'plus',
      'square',
      'line',
      'circle',
      'star',
      'sparkle',
    ],
    size: 10,
    fillOpacity: 0.8,
    strokeColors: '#333',
    strokeWidth: [1, 1, 3, 3, 1, 4, 1, 1, 1],
  },
  tooltip: {
    shared: true,
    intersect: false,
  },
}

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