<template>
  <div>
    <div class="wrap">
      <h1>820 people, and the crowd is the person</h1>
      <p>
        One dot per employee, coloured by department. The figure is a custom
        unit layout: the outline is scanned row by row and each row is filled
        with as many dots as fit, so the head, arms and legs come out of the
        shape itself rather than from hand-placed coordinates.
      </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 = 1 employee</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: [576, 168, 42, 34],
      chartOptions: {
        chart: {
          type: 'unit',
          height: 470,
          animations: {
            enabled: true,
            speed: 900,
          },
        },
        labels: ['Engineering', 'Sales', 'Marketing', 'Operations'],
        colors: ['#1565C0', '#00B8A9', '#F2994A', '#7B8794'],
        plotOptions: {
          unit: {
            layout: 'custom',
            // One of the shapes in apexcharts/unit-shapes.
            positions: 'human',
            transition: 'flow',
            clusterLabels: {
              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>