Gauges and Radial Bars with One Region Highlighted in Vue

<template>
  <div>
    <div class="wrap">
      <h1>How does one region compare with the whole company?</h1>
      <p>
        Pick a region. The company's figure stays faded and the region's is
        drawn solid in front. Hover any arc or needle for both values.
      </p>
      <div class="actions">
        <span>Region</span>
        <button data-region="americas" class="active">Americas</button>
        <button data-region="europe">Europe</button>
        <button data-region="apac">Asia Pacific</button>
        <button data-region="">All (clear)</button>
      </div>

      <h2><small>Sums</small>The region is a share of the company</h2>
      <p>
        The company's figure is the three regions added up, so a region's arc
        always ends inside it. On the rings, the solid arc is the region's
        contribution to each team's goal.
      </p>
      <div class="grid">
        <div class="card">
          <div id="chart">
            <apexchart
              type="gauge"
              height="300"
              :options="chartOptions"
              :series="series"
            ></apexchart>
          </div>
        </div>
        <div class="card">
          <div id="chart2">
            <apexchart
              type="radialBar"
              height="340"
              :options="chartOptions1"
              :series="series1"
            ></apexchart>
          </div>
        </div>
      </div>

      <h2><small>Averages</small>A region can beat the company</h2>
      <p>
        A score or a rate is an average, so a region can sit above the company.
        The satisfaction gauge uses <code>indicator: 'lanes'</code> to draw the
        two side by side; the needle gauge fades the company's needle.
      </p>
      <div class="grid">
        <div class="card">
          <div id="chart3">
            <apexchart
              type="gauge"
              height="300"
              :options="chartOptions2"
              :series="series2"
            ></apexchart>
          </div>
        </div>
        <div class="card">
          <div id="chart4">
            <apexchart
              type="gauge"
              height="300"
              :options="chartOptions3"
              :series="series3"
            ></apexchart>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

import 'apexcharts/features/highlight-filter'

// Shared by the vanilla-js, React and Vue builds.
//
// The company's figures are the wholes and one region's are the parts. A
// pick is an ordinary update of highlightFilter.data, one value per ring;
// null clears it.
//
// Sums: the company's figure is the regions added up, so every part fits
// inside its whole. Orders shipped this month (against a target of 12,000),
// and each team's progress toward its quarterly goal, split by the region
// that contributed it (the three regions add up to the team's figure).
var TARGET = 12000
var SHIPPED = 9300
var SHIPPED_BY_REGION = { americas: 4100, europe: 3200, apac: 2000 }
var TEAMS = ['Sales', 'Support', 'Product']
var GOALS = [72, 58, 85]
var GOALS_BY_REGION = {
  americas: [32, 20, 38],
  europe: [24, 22, 27],
  apac: [16, 16, 20],
}

// Averages: a score or a rate over every region, which one region can beat.
// Customer satisfaction (split in lanes) and tickets resolved the same day
// (a second needle).
var SATISFACTION = 78
var SATISFACTION_BY_REGION = { americas: 84, europe: 71, apac: 66 }
var SAME_DAY = 64
var SAME_DAY_BY_REGION = { americas: 71, europe: 58, apac: 49 }

function pickRegion(region) {
  document.querySelectorAll('[data-region]').forEach(function (b) {
    b.classList.toggle('active', b.getAttribute('data-region') === region)
  })
  ApexCharts.getChartByID('shipped').updateOptions({
    highlightFilter: { data: region ? [SHIPPED_BY_REGION[region]] : null },
  })
  ApexCharts.getChartByID('goals').updateOptions({
    highlightFilter: { data: region ? GOALS_BY_REGION[region] : null },
  })
  ApexCharts.getChartByID('satisfaction').updateOptions({
    highlightFilter: { data: region ? [SATISFACTION_BY_REGION[region]] : null },
  })
  ApexCharts.getChartByID('same-day').updateOptions({
    highlightFilter: { data: region ? [SAME_DAY_BY_REGION[region]] : null },
  })
}

function wireRegions() {
  document.querySelectorAll('[data-region]').forEach(function (b) {
    b.addEventListener('click', function () {
      pickRegion(b.getAttribute('data-region'))
    })
  })
}

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [SHIPPED],
      chartOptions: {
        chart: {
          id: 'shipped',
          type: 'gauge',
          height: 300,
          toolbar: { show: false },
        },
        labels: ['Orders shipped'],
        colors: ['#0284c7'],
        plotOptions: {
          radialBar: {
            // A count on its own domain: 0 to the month's target.
            min: 0,
            max: TARGET,
            dataLabels: {
              value: {
                fontSize: '28px',
                formatter: function (v) {
                  return Number(v).toLocaleString()
                },
              },
            },
          },
        },
        tooltip: {
          y: {
            formatter: function (v) {
              return Number(v).toLocaleString()
            },
          },
        },
        title: {
          text: 'Orders shipped this month, target 12,000',
          style: { fontSize: '13px' },
        },
        highlightFilter: { data: [SHIPPED_BY_REGION.americas] },
      },
      series1: GOALS,
      chartOptions1: {
        chart: {
          id: 'goals',
          type: 'radialBar',
          height: 340,
          toolbar: { show: false },
        },
        labels: TEAMS,
        colors: ['#0284c7', '#f59e0b', '#e11d48'],
        plotOptions: {
          radialBar: {
            hollow: { size: '38%' },
            track: { margin: 4 },
            dataLabels: {
              name: { fontSize: '13px' },
              value: { fontSize: '20px' },
              total: {
                show: true,
                label: 'Average',
                // While a region is picked the totals read its parts (the default
                // highlightFilter.dataLabels.total: 'part'), so this averages the
                // region's contributions; cleared, the teams' progress.
                formatter: function (w) {
                  var t = w.globals.seriesTotals
                  return (
                    Math.round(
                      t.reduce(function (a, b) {
                        return a + b
                      }, 0) / t.length,
                    ) + '%'
                  )
                },
              },
            },
          },
        },
        legend: { show: true, position: 'bottom' },
        title: {
          text: 'Quarterly goal reached, by team',
          style: { fontSize: '13px' },
        },
        highlightFilter: { data: GOALS_BY_REGION.americas },
      },
      series2: [SATISFACTION],
      chartOptions2: {
        chart: {
          id: 'satisfaction',
          type: 'gauge',
          height: 300,
          toolbar: { show: false },
        },
        labels: ['Satisfaction'],
        colors: ['#0f766e'],
        plotOptions: {
          radialBar: {
            dataLabels: {
              value: {
                fontSize: '28px',
                // The centre reads the region; while one is picked, a second line
                // under it reads the whole (opts.lane is 'whole' for that line).
                formatter: function (v, w, opts) {
                  return (
                    (opts && opts.lane === 'whole' ? 'company ' : '') + v + '%'
                  )
                },
              },
            },
          },
        },
        title: { text: 'Customer satisfaction', style: { fontSize: '13px' } },
        highlightFilter: {
          data: [SATISFACTION_BY_REGION.americas],
          // Made for a part that can pass its whole: two lanes, never overlapping.
          radialBar: { indicator: 'lanes' },
        },
      },
      series3: [SAME_DAY],
      chartOptions3: {
        chart: {
          id: 'same-day',
          type: 'gauge',
          height: 300,
          toolbar: { show: false },
        },
        labels: ['Same-day resolution'],
        colors: ['#ea580c'],
        plotOptions: {
          radialBar: {
            shape: 'needle',
            needle: { length: '78%' },
            ticks: {
              show: true,
              major: { count: 6, length: 6 },
              minor: { count: 1, length: 3 },
              labels: { show: true, fontSize: '10px' },
            },
            dataLabels: { value: { fontSize: '22px' } },
          },
        },
        title: {
          text: 'Tickets resolved the same day',
          style: { fontSize: '13px' },
        },
        highlightFilter: { data: [SAME_DAY_BY_REGION.americas] },
      },
      regionTimer: null,
    }
  },
  mounted: function () {
    // The vue-apexcharts wrappers own the renders, so reach the live instances
    // by their chart.id. (pickRegion lives in the shared head script.)
    var me = this
    me.regionTimer = window.setInterval(function () {
      if (
        !ApexCharts.getChartByID('shipped') ||
        !ApexCharts.getChartByID('goals') ||
        !ApexCharts.getChartByID('satisfaction') ||
        !ApexCharts.getChartByID('same-day')
      )
        return
      window.clearInterval(me.regionTimer)
      wireRegions()
    }, 50)
  },
  beforeDestroy: function () {
    window.clearInterval(this.regionTimer)
  },
}
</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: 960px;
  margin: 0 auto;
}
h1 {
  font-size: 22px;
  margin: 0 0 8px;
}
h2 {
  font-size: 16px;
  margin: 28px 0 6px;
}
h2 small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0284c7;
  margin-bottom: 2px;
}
p {
  color: #5b6b78;
  line-height: 1.5;
  margin: 0 0 12px;
  max-width: 760px;
}
code {
  font-size: 13px;
  background: #eef2f6;
  border-radius: 4px;
  padding: 1px 4px;
}
.actions {
  margin: 8px 0 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.actions span {
  font-size: 13px;
  color: #5b6b78;
  margin-right: 4px;
}
.actions button {
  color: #2c3e50;
  background: #fff;
  border: 1px solid #cfd8e3;
  padding: 6px 14px;
  font-weight: 600;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
}
.actions button.active {
  color: #fff;
  background: #0284c7;
  border-color: #0284c7;
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.card {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  min-width: 0;
}
@media (max-width: 680px) {
  .grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
</style>