<template>
  <div>
    <div class="wrap">
      <h1>Workforce as a dot cluster</h1>
      <p>Every employee is one dot, packed into an organic disc.</p>

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

      <div class="actions">
        <button data-dataset="departments">By department (grouped)</button>
        <button data-dataset="seniority">Leadership vs staff (packed)</button>
      </div>

      <div class="actions">
        <button id="shuffle">Simulate hiring round</button>
      </div>
    </div>
  </div>
</template>

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

// Shared by the vanilla-js, React and Vue builds. Two views of one 480-person
// company to show off both layouts: the headcount by department (grouped
// clusters) and the whole company split leadership-vs-staff (packed blob with
// the small leadership core nested in the centre). The live control state lives
// in each format's own wiring below.
var DATASETS = {
  departments: {
    values: [200, 120, 90, 70],
    labels: ['Engineering', 'Sales', 'Operations', 'Design'],
    colors: ['#008FFB', '#00B8D9', '#36B37E', '#FFAB00'],
    layout: 'grouped',
  },
  seniority: {
    values: [60, 420],
    labels: ['Leadership', 'Staff'],
    colors: ['#FFAB00', '#7B8794'],
    layout: 'packed',
  },
}

function randomWorkforce() {
  var eng = Math.floor(Math.random() * 110) + 150
  var sales = Math.floor(Math.random() * 70) + 90
  var ops = Math.floor(Math.random() * 60) + 60
  var design = Math.floor(Math.random() * 50) + 45
  return [eng, sales, ops, design]
}

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

export default {
components: {
apexchart: VueApexCharts,
},
data: function () {
return {
series: [200, 120, 90, 70],
chartOptions: {
chart: {
  id: 'unitChart',
  type: 'unit',
  height: 420,
  animations: {
    enabled: true,
    speed: 900,
  },
},
labels: ['Engineering', 'Sales', 'Operations', 'Design'],
colors: ['#008FFB', '#00B8D9', '#36B37E', '#FFAB00'],
plotOptions: {
  unit: {
    layout: 'grouped',
    shape: 'circle',
    size: 'auto',
    clusterLabels: {
      show: true,
    },
  },
},
legend: {
  position: 'bottom',
},
},
unitTimer: null,
}
},
mounted: function () {
  // The vue-apexcharts wrapper owns the render, so reach the live instance by
  // its chart.id, then wire the controls. (DATASETS/randomWorkforce/setActive
  // live in the shared head script.) updateOptions drives the instance directly,
  // so no reactive data changes under it.
  var me = this
  var current = 'departments'

  me.unitTimer = window.setInterval(function () {
    var chart = ApexCharts.getChartByID('unitChart')
    if (!chart) return
    window.clearInterval(me.unitTimer)

    setActive(current)

    document.querySelectorAll('.actions button[data-dataset]').forEach(function (btn) {
      btn.addEventListener('click', function () {
        var id = btn.getAttribute('data-dataset')
        if (id === current) return
        current = id
        setActive(current)
        var ds = DATASETS[id]
        chart.updateOptions({
          colors: ds.colors,
          labels: ds.labels,
          plotOptions: { unit: { layout: ds.layout } },
          series: ds.values,
        })
      })
    })

    document.querySelector('#shuffle').addEventListener('click', function () {
      if (current !== 'departments') return
      chart.updateSeries(randomWorkforce())
    })
  }, 50)
},
beforeDestroy: function () {
  window.clearInterval(this.unitTimer)
},,
}
</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: 760px;
  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);
}
.actions {
  margin: 24px auto 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.actions button {
  color: #fff;
  background: #008ffb;
  border: none;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
}
.actions button.active {
  background: #00543d;
}
</style>