<template>
  <div>
    <div class="wrap">
      <h1>18,000 requests, one dot per 24</h1>
      <p>
        A heartbeat trace, read left to right. Every shape hands its dots out in
        row order by default, which would slice this one horizontally. Asking
        the shape for a variant ordered by column instead makes the bands run
        along the trace, so the buckets read fastest to slowest. The original
        shape is left untouched.
      </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 = 24 requests</p>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

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

// The catalog is also on the script-tag global, so a variant can be built here and
// handed to `positions` as a function. `.with()` never mutates the original.
var PULSE_BY_TIME = ApexUnitShapes.pulse.with({ order: 'cols' })

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [12000, 4000, 1600, 400],
      chartOptions: {
        chart: {
          type: 'unit',
          height: 470,
          animations: {
            enabled: true,
            speed: 900,
          },
        },
        labels: ['Under 100ms', '100 to 300ms', '300ms to 1s', 'Over 1s'],
        colors: ['#00A96E', '#7CB342', '#FFAB00', '#FF4560'],
        plotOptions: {
          unit: {
            layout: 'custom',
            // `.with()` returns a variant: column order, so the bands run along the
            // trace rather than slicing it. Defined in the head script.
            positions: PULSE_BY_TIME,
            transition: 'flow',
            unitValue: 24,
            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>