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

<script>
import VueApexCharts from 'vue-apexcharts'

// Per-level colour palettes. Treemap uses distributed colouring (one colour per
// tile), so a level's palette tints that level's tiles and signals which branch
// you are inside. Drilling back restores the parent palette.
var sectorColors = ['#1565C0', '#2E7D32', '#C62828', '#EF6C00', '#6A1B9A']
var bluePalette = ['#0D47A1', '#1976D2', '#42A5F5', '#90CAF9'] // Technology
var cyanPalette = ['#006064', '#00838F', '#00ACC1', '#4DD0E1'] // Tech > Cloud
var greenPalette = ['#1B5E20', '#388E3C', '#66BB6A'] // Financials
var redPalette = ['#B71C1C', '#E53935', '#EF9A9A'] // Healthcare
var amberPalette = ['#E65100', '#FB8C00', '#FFB74D'] // Energy
var purplePalette = ['#4A148C', '#8E24AA', '#CE93D8'] // Consumer

// Distributed colouring shared by every level.
var distributed = { treemap: { distributed: true, enableShades: false } }

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [
        {
          data: [
            { x: 'Technology', y: 620, drilldown: 'tech' },
            { x: 'Financials', y: 430, drilldown: 'fin' },
            { x: 'Healthcare', y: 380, drilldown: 'health' },
            { x: 'Energy', y: 290, drilldown: 'energy' },
            { x: 'Consumer', y: 340, drilldown: 'consumer' },
          ],
        },
      ],
      chartOptions: {
        chart: {
          type: 'treemap',
          height: 450,
          toolbar: {
            show: false,
          },
        },
        legend: {
          show: false,
        },
        colors: sectorColors,
        plotOptions: distributed,
        dataLabels: {
          enabled: true,
          style: {
            fontSize: '14px',
          },
        },
        title: {
          text: 'Market Capitalisation by Sector',
          align: 'left',
        },
        subtitle: {
          text: 'Click a sector to drill into its industries, then into companies. Use the breadcrumb to go back.',
          align: 'left',
        },
        drilldown: {
          enabled: true,
          breadcrumb: {
            show: true,
            position: 'top-right',
            rootLabel: 'All Sectors',
            separator: ' / ',
          },
          series: [
            {
              id: 'tech',
              name: 'Technology',
              colors: bluePalette,
              plotOptions: distributed,
              data: [
                { x: 'Cloud', y: 260, drilldown: 'tech-cloud' },
                { x: 'Devices', y: 190 },
                { x: 'Software', y: 120 },
                { x: 'Semiconductors', y: 50 },
              ],
            },
            {
              id: 'tech-cloud',
              name: 'Cloud',
              colors: cyanPalette,
              plotOptions: distributed,
              data: [
                { x: 'Compute', y: 110 },
                { x: 'Storage', y: 80 },
                { x: 'Networking', y: 45 },
                { x: 'Analytics', y: 25 },
              ],
            },
            {
              id: 'fin',
              name: 'Financials',
              colors: greenPalette,
              plotOptions: distributed,
              data: [
                { x: 'Banking', y: 210 },
                { x: 'Insurance', y: 140 },
                { x: 'Payments', y: 80 },
              ],
            },
            {
              id: 'health',
              name: 'Healthcare',
              colors: redPalette,
              plotOptions: distributed,
              data: [
                { x: 'Pharma', y: 200 },
                { x: 'Devices', y: 110 },
                { x: 'Services', y: 70 },
              ],
            },
            {
              id: 'energy',
              name: 'Energy',
              colors: amberPalette,
              plotOptions: distributed,
              data: [
                { x: 'Renewables', y: 160 },
                { x: 'Oil & Gas', y: 90 },
                { x: 'Utilities', y: 40 },
              ],
            },
            {
              id: 'consumer',
              name: 'Consumer',
              colors: purplePalette,
              plotOptions: distributed,
              data: [
                { x: 'Retail', y: 180 },
                { x: 'Food & Beverage', y: 100 },
                { x: 'Apparel', y: 60 },
              ],
            },
          ],
        },
      },
    }
  },
}
</script>

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