<template>
  <div>
    <div class="wrap">
      <h1>Pictogram (isotype) unit chart</h1>
      <p>A pictogram unit chart: each icon stands for 25,000 people.</p>

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

      <div class="note">1 icon = 25,000 people</div>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

// A person icon, drawn inline as a data URI so the sample is self-contained.
var PERSON_ICON =
  'data:image/svg+xml,' +
  encodeURIComponent(
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#5B8DEF">' +
      '<circle cx="12" cy="7" r="4"/>' +
      '<path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8z"/>' +
      '</svg>',
  )

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [520000, 1180000, 300000],
      chartOptions: {
        chart: {
          type: 'unit',
          height: 440,
          animations: {
            enabled: true,
            speed: 900,
          },
        },
        labels: ['Under 18', '18 to 64', '65 and over'],
        colors: ['#5B8DEF', '#00B8A9', '#F6A609'],
        series: [520000, 1180000, 300000],
        legend: {
          position: 'bottom',
        },
        plotOptions: {
          unit: {
            layout: 'grouped',
            shape: 'image',
            unitValue: 25000,
            spacing: 1.2,
            image: {
              src: PERSON_ICON,
              width: 16,
              height: 16,
              // Recolour each icon to its category colour so the crowd matches the
              // legend (the source icon is a single-colour silhouette).
              tint: true,
            },
            clusterLabels: {
              show: true,
            },
          },
        },
      },
    }
  },
  // Nothing extra to wire: the chart renders the pictogram from the options
  // above. PERSON_ICON lives in the shared head script.,
}
</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-top: 12px;
}
</style>