<template>
  <div>
    <div id="chart">
      <apexchart
        type="heatmap"
        height="450"
        :options="chartOptions"
        :series="series"
      ></apexchart>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

// Root grid: regions (rows) x quarters (columns). Every cell carries a drilldown
// id, so clicking any cell opens that region+quarter broken down into a
// months (rows) x weeks (columns) heatmap. Values are deterministic so a
// re-drill always shows the same detail.
var regions = ['North America', 'Europe', 'Asia Pacific', 'Latin America']
var quarters = ['Q1', 'Q2', 'Q3', 'Q4']
var monthsByQuarter = [
  ['Jan', 'Feb', 'Mar'],
  ['Apr', 'May', 'Jun'],
  ['Jul', 'Aug', 'Sep'],
  ['Oct', 'Nov', 'Dec'],
]
var weeks = ['Wk 1', 'Wk 2', 'Wk 3', 'Wk 4']

function pseudo(seed, lo, hi) {
  var x = Math.sin(seed) * 10000
  x = x - Math.floor(x)
  return Math.round(lo + x * (hi - lo))
}

function clamp(v, lo, hi) {
  return Math.max(lo, Math.min(hi, v))
}

// One shared 0-100 colour scale for every level. Sales intensity is a score, so
// the Low/Medium/High/Peak thresholds mean the same thing whether you are
// looking at a region+quarter or at one of its weeks. That is what lets the
// drilldown stay honest: a "Peak" quarter drills into weeks that are mostly
// Peak/High too, not a fresh unrelated set of numbers.
var heatPlot = {
  heatmap: {
    radius: 2,
    shadeIntensity: 0.5,
    colorScale: {
      ranges: [
        { from: 0, to: 30, color: '#C8E6C9', name: 'Low' },
        { from: 31, to: 60, color: '#66BB6A', name: 'Medium' },
        { from: 61, to: 80, color: '#FB8C00', name: 'High' },
        { from: 81, to: 100, color: '#E53935', name: 'Peak' },
      ],
    },
  },
}

// The region+quarter score is the headline for its 12 weekly cells (3 months x
// 4 weeks), so compute it once and reuse it as the anchor for the detail.
var rootValues = regions.map(function (region, ri) {
  return quarters.map(function (q, qi) {
    return pseudo(ri * 31 + qi * 7 + 3, 20, 95)
  })
})

var heatRootSeries = regions.map(function (region, ri) {
  return {
    name: region,
    data: quarters.map(function (q, qi) {
      return { x: q, y: rootValues[ri][qi], drilldown: 'r' + ri + '-q' + qi }
    }),
  }
})

var heatChildren = []
regions.forEach(function (region, ri) {
  quarters.forEach(function (q, qi) {
    var base = rootValues[ri][qi]
    var months = monthsByQuarter[qi]

    // Draw a raw +/-15 wobble for each of the 12 weekly cells, then re-center
    // the wobbles so they sum to zero. The weekly cells therefore average back
    // to the region+quarter score: the drilldown preserves the headline instead
    // of inventing a new total, while individual weeks still vary realistically.
    var raw = []
    months.forEach(function (m, mi) {
      weeks.forEach(function (wk, wi) {
        raw.push(pseudo(ri * 101 + qi * 53 + mi * 17 + wi * 3 + 11, -15, 15))
      })
    })
    var mean =
      raw.reduce(function (a, b) {
        return a + b
      }, 0) / raw.length
    var k = 0

    heatChildren.push({
      id: 'r' + ri + '-q' + qi,
      name: region + ' / ' + q,
      series: months.map(function (m, mi) {
        return {
          name: m,
          data: weeks.map(function (wk, wi) {
            var y = clamp(Math.round(base + raw[k] - mean), 0, 100)
            k++
            return { x: wk, y: y }
          }),
        }
      }),
    })
  })
})

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: heatRootSeries,
      chartOptions: {
        chart: {
          type: 'heatmap',
          height: 450,
          toolbar: {
            show: false,
          },
        },
        dataLabels: {
          enabled: true,
        },
        plotOptions: heatPlot,
        title: {
          text: 'Sales Intensity by Region and Quarter',
          align: 'left',
        },
        subtitle: {
          text: 'Click any cell to drill into its weekly breakdown (pointer cursor marks drillable cells). Use the breadcrumb to go back.',
          align: 'left',
        },
        drilldown: {
          enabled: true,
          breadcrumb: {
            show: true,
            position: 'top-right',
            rootLabel: 'All Regions',
            separator: ' / ',
          },
          series: heatChildren,
        },
      },
    }
  },
}
</script>

<style>
#chart {
  max-width: 650px;
  margin: 35px auto;
}
</style>