<template>
  <div>
    <div class="wrap">
      <h1>One crowd, thirty-nine layouts the chart does not ship</h1>
      <p>
        820 dots, one per employee. A unit layout is a plain function of every
        mark and the plot rect, returning positions, so a shape can be
        registered from outside the library. Every shape below comes from
        apexcharts/unit-shapes; the last row are strokes, where the dots pack a
        thickened line rather than an outline, which is how a shape with no
        interior joins in. Switch views: the same dots flow into the next
        arrangement, keeping their identity, colour and size, rather than the
        chart being torn down and rebuilt.
      </p>

      <div class="actions">
        <span class="cat">Nature</span>
        <button data-view="droplet">Droplet</button>
        <button data-view="tree">Tree</button>
        <button data-view="leaf">Leaf</button>
        <button data-view="sun">Sun</button>
        <button data-view="flame">Flame</button>
        <button data-view="fish">Fish</button>
      </div>

      <div class="actions">
        <span class="cat">Objects</span>
        <button data-view="house">House</button>
        <button data-view="battery">Battery</button>
        <button data-view="rocket">Rocket</button>
        <button data-view="bulb">Bulb</button>
        <button data-view="flask">Flask</button>
        <button data-view="car">Car</button>
        <button data-view="plane">Plane</button>
      </div>

      <div class="actions">
        <span class="cat">People</span>
        <button data-view="human">Human</button>
        <button data-view="group">Group</button>
      </div>

      <div class="actions">
        <span class="cat">Business</span>
        <button data-view="target">Target</button>
        <button data-view="trophy">Trophy</button>
        <button data-view="moneybag">Moneybag</button>
        <button data-view="funnel">Funnel</button>
      </div>

      <div class="actions">
        <span class="cat">Technology</span>
        <button data-view="shield">Shield</button>
        <button data-view="gear">Gear</button>
        <button data-view="robot">Robot</button>
      </div>

      <div class="actions">
        <span class="cat">Symbols</span>
        <button data-view="heart">Heart</button>
        <button data-view="pyramid">Pyramid</button>
        <button data-view="star">Star</button>
        <button data-view="arrow">Arrow</button>
        <button data-view="crown">Crown</button>
        <button data-view="cross">Cross</button>
        <button data-view="bolt">Bolt</button>
      </div>

      <div class="actions">
        <span class="cat">Geography</span>
        <button data-view="globe">Globe</button>
        <button data-view="pin">Pin</button>
        <button data-view="mountain">Mountain</button>
      </div>

      <div class="actions">
        <span class="cat">Strokes</span>
        <button data-view="check">Check</button>
        <button data-view="wifi">Wifi</button>
        <button data-view="pulse">Pulse</button>
        <button data-view="xmark">Xmark</button>
        <button data-view="percent">Percent</button>
        <button data-view="question">Question</button>
        <button data-view="spiral">Spiral</button>
      </div>

      <div class="actions builtin">
        <span class="cat">Built in</span>
        <button data-view="packed">Packed</button>
        <button data-view="columns">Columns</button>
      </div>

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

      <p class="note">
        Same data, same dots. Only the position provider changes.
      </p>
    </div>
  </div>
</template>

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

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

// Every button maps to one plotOptions.unit patch. The shapes come from
// apexcharts/unit-shapes, which registers each one under its own name; packed
// and columns are built in. Nothing else changes between views, which is the
// point: the dots keep their identity, colour and size, so the crowd re-forms
// instead of being rebuilt.
var VIEWS = {
  droplet: { layout: 'custom', positions: 'droplet' },
  tree: { layout: 'custom', positions: 'tree' },
  leaf: { layout: 'custom', positions: 'leaf' },
  sun: { layout: 'custom', positions: 'sun' },
  flame: { layout: 'custom', positions: 'flame' },
  fish: { layout: 'custom', positions: 'fish' },
  house: { layout: 'custom', positions: 'house' },
  battery: { layout: 'custom', positions: 'battery' },
  rocket: { layout: 'custom', positions: 'rocket' },
  bulb: { layout: 'custom', positions: 'bulb' },
  flask: { layout: 'custom', positions: 'flask' },
  car: { layout: 'custom', positions: 'car' },
  plane: { layout: 'custom', positions: 'plane' },
  human: { layout: 'custom', positions: 'human' },
  group: { layout: 'custom', positions: 'group' },
  target: { layout: 'custom', positions: 'target' },
  trophy: { layout: 'custom', positions: 'trophy' },
  moneybag: { layout: 'custom', positions: 'moneybag' },
  funnel: { layout: 'custom', positions: 'funnel' },
  shield: { layout: 'custom', positions: 'shield' },
  gear: { layout: 'custom', positions: 'gear' },
  robot: { layout: 'custom', positions: 'robot' },
  heart: { layout: 'custom', positions: 'heart' },
  pyramid: { layout: 'custom', positions: 'pyramid' },
  star: { layout: 'custom', positions: 'star' },
  arrow: { layout: 'custom', positions: 'arrow' },
  crown: { layout: 'custom', positions: 'crown' },
  cross: { layout: 'custom', positions: 'cross' },
  bolt: { layout: 'custom', positions: 'bolt' },
  globe: { layout: 'custom', positions: 'globe' },
  pin: { layout: 'custom', positions: 'pin' },
  mountain: { layout: 'custom', positions: 'mountain' },
  check: { layout: 'custom', positions: 'check' },
  wifi: { layout: 'custom', positions: 'wifi' },
  pulse: { layout: 'custom', positions: 'pulse' },
  xmark: { layout: 'custom', positions: 'xmark' },
  percent: { layout: 'custom', positions: 'percent' },
  question: { layout: 'custom', positions: 'question' },
  spiral: { layout: 'custom', positions: 'spiral' },
  packed: { layout: 'packed', positions: undefined },
  columns: { layout: 'columns', positions: undefined },
}

function setActive(id) {
  document.querySelectorAll('.actions button[data-view]').forEach(function (btn) {
    btn.classList.toggle('active', btn.getAttribute('data-view') === id)
  })
}

function wireGallery(chart) {
  var current = 'heart'
  setActive(current)
  document.querySelectorAll('.actions button[data-view]').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var id = btn.getAttribute('data-view')
      if (id === current) return
      current = id
      setActive(current)
      chart.updateOptions({ plotOptions: { unit: VIEWS[id] } })
    })
  })
}

export default {
components: {
apexchart: VueApexCharts,
},
data: function () {
return {
series: [576, 168, 42, 34],
chartOptions: {
chart: {
  id: 'shapeGallery',
  type: 'unit',
  height: 460,
  animations: {
    enabled: true,
    speed: 900,
  },
},
labels: ['Engineering', 'Sales', 'Marketing', 'Operations'],
colors: ['#008FFB', '#00B8D9', '#FFAB00', '#FF4560'],
plotOptions: {
  unit: {
    layout: 'custom',
    positions: 'heart',
    // Keyed by global order, so the crowd migrates across a relayout instead
    // of each category fading in and out on the spot.
    transition: 'flow',
    clusterLabels: {
      show: false,
    },
  },
},
legend: {
  position: 'bottom',
},
},
galleryTimer: null,
}
},
mounted: function () {
  // The vue-apexcharts wrapper owns the render, so reach the live instance by
  // its chart.id, then wire the controls.
  var me = this
  me.galleryTimer = window.setInterval(function () {
    var chart = ApexCharts.getChartByID('shapeGallery')
    if (!chart) return
    window.clearInterval(me.galleryTimer)
    wireGallery(chart)
  }, 50)
},
beforeDestroy: function () {
  window.clearInterval(this.galleryTimer)
},,
}
</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: 880px;
  margin: 0 auto;
}
h1 {
  font-size: 22px;
  margin: 0 0 8px;
}
p {
  color: #5b6b78;
  line-height: 1.5;
  margin: 0 0 20px;
}
.chart-wrap {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 auto 8px;
}
.cat {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8592a0;
  width: 84px;
  flex: none;
}
.actions.builtin {
  margin-bottom: 22px;
}
.actions button {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #d4dbe0;
  background: #fff;
  color: #2c3e50;
  padding: 5px 11px;
  border-radius: 999px;
}
.actions button.active {
  background: #2c3e50;
  border-color: #2c3e50;
  color: #fff;
}
.actions.builtin button.active {
  background: #008ffb;
  border-color: #008ffb;
}
.note {
  color: #8592a0;
  font-size: 12px;
  text-align: center;
  margin: 16px 0 0;
}
</style>