<template>
  <div>
    <div id="chart">
      <apexchart
        type="lollipop"
        height="440"
        :options="chartOptions"
        :series="series"
      ></apexchart>
    </div>

    <div class="panel">
      <div class="note">
        A lollipop is a scalar-y custom series: <code>renderItem</code> draws a
        stem from <code>scales.y(0)</code> up to the value and caps it with a
        circle. Marks carry their datum identity, so hover, the shared tooltip
        and legend toggle work without any extra wiring.
      </div>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'
import ApexCharts from 'apexcharts'

// Marks (#11): a lollipop is a scalar-y series (the default dataType), so no
// range routing is needed. renderItem draws a stem from the baseline up to the
// value, capped with a circle. Each mark is tagged with its datum identity, so
// the shared tooltip, legend toggle and dataPointSelection all work for free.
ApexCharts.registerSeriesType('lollipop', {
  renderItem: function (ctx) {
    var x = ctx.x
    var y = ctx.y
    var scales = ctx.scales
    var api = ctx.api
    var color = ctx.color
    var baseline = scales.y(0)
    api.line({ x1: x, y1: baseline, x2: x, y2: y, stroke: color, width: 2 })
    api.circle({ cx: x, cy: y, r: 6, fill: color })
  },
})

var lollipopData = [
  { x: 'Jan', y: 41 },
  { x: 'Feb', y: 58 },
  { x: 'Mar', y: 45 },
  { x: 'Apr', y: 72 },
  { x: 'May', y: 68 },
  { x: 'Jun', y: 91 },
  { x: 'Jul', y: 84 },
  { x: 'Aug', y: 63 },
  { x: 'Sep', y: 49 },
  { x: 'Oct', y: 77 },
  { x: 'Nov', y: 88 },
  { x: 'Dec', y: 102 },
]

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [{ name: 'Signups', data: lollipopData }],
      chartOptions: {
        chart: {
          height: 440,
          type: 'lollipop',
          animations: { enabled: false },
          toolbar: { show: false },
        },
        colors: ['#775DD0'],
        grid: {
          padding: { left: 12, right: 12 },
        },
        title: {
          text: 'Monthly active signups',
          align: 'left',
        },
        subtitle: {
          text: 'A custom "lollipop" series type built with Marks (registerSeriesType)',
          align: 'left',
        },
        xaxis: {
          type: 'category',
          tooltip: { enabled: false },
        },
        yaxis: {
          min: 0,
          max: 120,
          tickAmount: 6,
        },
      },
    }
  },
}
</script>

<style>
#chart {
  max-width: 780px;
  margin: 20px auto;
}
.panel {
  max-width: 780px;
  margin: 16px auto;
  font-family: sans-serif;
}
.note {
  background: #f4fbf6;
  border-left: 3px solid #00b894;
  padding: 10px 14px;
  font-size: 13px;
  color: #234;
  border-radius: 2px;
  line-height: 1.55;
}
.note code {
  background: #dff3e8;
  padding: 1px 5px;
  border-radius: 3px;
}
</style>