Stacked meter

The BStackedMeter component is used to show a stacked measurement bar with an optional target

Basic

The BStackedMeter is fully responsive and can show unlimited categories. It has a default color scheme but colors can be individually overridden in the color property for that category. Any CSS is valid so fancy gradients are totally fine

Total delay

22 s

16 s

UDP

Decoder

Debonding

??

Total delay

14 s

6 s

UDP

Decoder

Total delay

14 s

6 s

UDP

Decoder

<script setup lang="ts">
import { ref } from 'vue'

const pattern = `repeating-linear-gradient(
  45deg,
  #b2e061,
  #b2e061 3px,
  #7eb0d5 3px,
  #7eb0d5 6px
)`

const pattern2 = 'conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) top left / 11px 11px repeat'

const data1 = ref([
  { label: 'UDP', value: 4 },
  { label: 'Decoder', value: 6 },
  { label: 'Debonding', value: 10 },
  { label: '??', value: 2 },
])

const data2 = ref([
  { label: 'UDP', value: 8, color: pattern },
  { label: 'Decoder', value: 6, color: pattern2 },
])

function randomize() {
  data1.value = [
    { label: 'UDP', value: Math.round(Math.random() * 10) },
    { label: 'Decoder', value: Math.round(Math.random() * 5) },
    { label: 'Debonding', value: Math.round(Math.random() * 10) },
    { label: '??', value: Math.round(Math.random() * 5) },
  ]

  data2.value = [
    { label: 'UDP', value: Math.round(Math.random() * 10), color: pattern },
    { label: 'Decoder', value: Math.round(Math.random() * 10), color: pattern2 },
  ]
}
</script>

<template>
  <div class="flex flex-col gap-8">
    <BStackedMeter
      :data="data1"
      :max="30"
      :target="16"
    >
      Total delay
    </BStackedMeter>
    <BStackedMeter
      :data="data2"
      :max="30"
      :target="6"
      class="w-1/2"
    >
      Total delay
    </BStackedMeter>
    <BStackedMeter
      :data="data2"
      :max="30"
      :target="6"
      class="w-1/3"
    >
      Total delay
    </BStackedMeter>
    <BBtn
      class="self-end"
      @click="randomize"
    >
      randomize
    </BBtn>
  </div>
</template>

Slot usage

The BStackedMeter has some slots

Total delay

22 s

16 s

• UDP4 sec13%
• Decoder6 sec20%
• Debonding10 sec33%
• ??2 sec7%

<script setup lang="ts">
import { ref } from 'vue'

const data1 = ref([
  { label: 'UDP', value: 4 },
  { label: 'Decoder', value: 6 },
  { label: 'Debonding', value: 10 },
  { label: '??', value: 2 },
])
</script>

<template>
  <div class="flex flex-col gap-8">
    <BStackedMeter
      :data="data1"
      :max="30"
      :target="16"
    >
      Total delay
      <template
        #labels="{ categories }"
      >
        <ul>
          <li
            v-for="category in categories"
            :key="category.label"
            class="grid grid-cols-3 gap-4"
          >
            <span class="flex items-center gap-2">
              <div
                :style="{ background: category.style.background }"
                class="h-[1em] w-[2em] rounded-full"
              />
              {{ category.label }}
            </span>
            <span class="text-right">{{ category.value }} sec</span>
            <span class="text-right">{{ category.part.toLocaleString('en-GB', { style: 'percent' }) }}</span>
          </li>
        </ul>
      </template>
    </BStackedMeter>
  </div>
</template>