<template>
  <div>
    <div id="wrapper">
      <div id="chart-line2">
        <apexchart
          type="line"
          height="230"
          :options="chartOptions"
          :series="series"
        ></apexchart>
      </div>
      <div id="chart-line">
        <apexchart
          type="area"
          height="130"
          :options="chartOptionsLine"
          :series="seriesLine"
        ></apexchart>
      </div>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

// Deterministic daily data: a random walk with weekly seasonality for order
// counts, and correlated revenue so brushing either series stays meaningful.
function mulberry32(seed) {
  return function () {
    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
  }
}

// Mean-reverting random walk: wanders organically around ~300 with occasional
// jumps, so the line looks like real order data rather than a smooth wave.
var rand = mulberry32(42)
var data1 = []
var data2 = []
var ts = new Date('01 Oct 2024').getTime()
var level = 300

for (var i = 0; i < 180; i++) {
  level += (rand() - 0.5) * 55
  level += (300 - level) * 0.03
  if (rand() > 0.94) level += (rand() - 0.5) * 90
  if (level < 120) level = 120
  var orders = Math.round(level)
  data1.push([ts, orders])
  data2.push([ts, Math.round(orders * (0.32 + rand() * 0.12) * 10) / 10])
  ts += 86400000
}

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [
        {
          name: 'Orders',
          data: data1,
        },
        {
          name: 'Revenue',
          data: data2,
        },
      ],
      chartOptions: {
        chart: {
          id: 'chart2',
          type: 'line',
          height: 230,
          toolbar: {
            autoSelected: 'pan',
            show: false,
          },
        },
        title: {
          text: 'Daily Orders & Revenue',
          align: 'left',
        },
        colors: ['#008FFB', '#00E396'],
        dataLabels: {
          enabled: false,
        },
        stroke: {
          width: [2, 4],
          curve: ['straight', 'monotoneCubic'],
        },
        fill: {
          opacity: [1, 0.75],
        },
        markers: {
          size: 0,
        },
        yaxis: [
          {
            seriesName: 'Orders',
            axisTicks: {
              show: true,
              color: '#008FFB',
            },
            axisBorder: {
              show: true,
              color: '#008FFB',
            },
            labels: {
              style: {
                colors: '#008FFB',
              },
            },
            title: {
              text: 'Orders',
              style: {
                color: '#008FFB',
              },
            },
          },
          {
            seriesName: 'Revenue',
            opposite: true,
            axisTicks: {
              show: true,
              color: '#00E396',
            },
            axisBorder: {
              show: true,
              color: '#00E396',
            },
            labels: {
              style: {
                colors: '#00E396',
              },
            },
            title: {
              text: 'Revenue ($k)',
              style: {
                color: '#00E396',
              },
            },
          },
        ],
        xaxis: {
          type: 'datetime',
        },
      },
      seriesLine: [
        {
          name: 'Orders',
          data: data1,
        },
        {
          name: 'Revenue',
          data: data2,
        },
      ],
      chartOptionsLine: {
        chart: {
          id: 'chart1',
          height: 130,
          type: 'area',
          brush: {
            target: 'chart2',
            enabled: true,
          },
          selection: {
            enabled: true,
            xaxis: {
              min: new Date('05 Jan 2025').getTime(),
              max: new Date('10 Feb 2025').getTime(),
            },
          },
        },
        colors: ['#008FFB', '#00E396'],
        stroke: {
          width: [1, 3],
          curve: ['straight', 'monotoneCubic'],
        },
        fill: {
          type: 'gradient',
          gradient: {
            opacityFrom: 0.91,
            opacityTo: 0.1,
          },
        },
        xaxis: {
          type: 'datetime',
          tooltip: {
            enabled: false,
          },
        },
        yaxis: {
          tickAmount: 2,
        },
      },
    }
  },
}
</script>

<style>
#wrapper {
  padding-top: 20px;
  padding-left: 10px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.1);
  max-width: 650px;
  margin: 35px auto;
}

#chart-line {
  position: relative;
  margin-top: 0px;
}
</style>