<template>
  <div>
    <div class="wrap">
      <h1>8 billion people, one dot per 10 million</h1>
      <p>
        The globe layout puts every dot on a sphere instead of in the plane.
        Rows are latitudes, so they converge towards the pole and bow as it
        leans in, and each dot fades smaller as the surface turns away. Spacing
        is measured on screen rather than in longitude, which is what keeps the
        rim from piling up. The silhouette is still made of the units, one per
        10 million people.
      </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 = 10 million people</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: [4700, 1480, 1030, 740, 45],
      chartOptions: {
        chart: {
          type: 'unit',
          height: 470,
          animations: {
            enabled: true,
            speed: 900,
          },
        },
        labels: ['Asia', 'Africa', 'Americas', 'Europe', 'Oceania'],
        colors: ['#1565C0', '#00B8D9', '#00A96E', '#FFAB00', '#FF4560'],
        plotOptions: {
          unit: {
            layout: 'custom',
            // One of the shapes in apexcharts/unit-shapes.
            positions: 'globe',
            transition: 'flow',
            // Values are millions of people, so one dot stands for ten of them.
            unitValue: 10,
            clusterLabels: {
              show: false,
            },
          },
        },
        legend: {
          position: 'bottom',
        },
      },
    }
  },
}
</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>