<template>
  <div>
    <div class="wrap">
      <h1>820 MWh of grid storage, one dot per MWh</h1>
      <p>
        A battery body with its terminal, filled left to right. The layout hands
        out its dots in column order rather than row order, which is all it
        takes for the first category to read as a charge level instead of a band
        across the top.
      </p>

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

      <p class="note">1 dot = 1 MWh of capacity</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: 420,
          animations: {
            enabled: true,
            speed: 900,
          },
        },
        labels: ['Available', 'Reserved', 'Charging', 'Critical'],
        colors: ['#00A96E', '#0EB8C4', '#FFAB00', '#FF4560'],
        plotOptions: {
          unit: {
            layout: 'custom',
            // One of the shapes in apexcharts/unit-shapes.
            positions: 'battery',
            transition: 'flow',
            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: 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);
}
.note {
  color: #8592a0;
  font-size: 12px;
  text-align: center;
  margin: 16px 0 0;
}
</style>