<template>
  <div>
    <div class="wrap">
      <h1>7,200 leads, one dot per 8</h1>
      <p>
        A funnel shaped crowd, not a funnel chart. The dots are handed out in
        row order from the top, so the stages stack down the shape widest first
        and the last one lands in the neck. Every dot is still one lead.
      </p>

      <div class="chart-wrap">
        <div id="chart">
          <apexchart
            type="unit"
            height="470"
            :options="chartOptions"
            :series="series"
          ></apexchart>
        </div>
      </div>

      <p class="note">1 dot = 8 leads</p>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

// This demo also loads: https://cdn.jsdelivr.net/npm/apexcharts/dist/unit-shapes.js

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [3600, 2000, 1000, 600],
      chartOptions: {
        chart: {
          type: 'unit',
          height: 470,
          animations: {
            enabled: true,
            speed: 900,
          },
        },
        labels: ['Leads', 'Qualified', 'Proposal', 'Closed won'],
        colors: ['#7FC0DE', '#219EBC', '#0E7C7B', '#023047'],
        plotOptions: {
          unit: {
            layout: 'custom',
            // One of the shapes in apexcharts/unit-shapes.
            positions: 'funnel',
            transition: 'flow',
            unitValue: 8,
            clusterLabels: {
              // Outer labels: each band is named in the margin with a leader line to its
              // own dots, so the crowd reads without a legend.
              external: {
                show: true,
              },
            },
          },
        },
        legend: {
          show: false,
        },
      },
    }
  },
}
</script>

<style>
body {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #fafbfc;
  color: #2c3e50;
  margin: 0;
  padding: 32px 16px;
}
.wrap {
  max-width: 720px;
  margin: 0 auto;
}
h1 {
  font-size: 22px;
  margin: 0 0 8px;
}
p {
  color: #5b6b78;
  line-height: 1.5;
  margin: 0 0 24px;
}
.chart-wrap {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.note {
  color: #8592a0;
  font-size: 12px;
  text-align: center;
  margin: 16px 0 0;
}
</style>