Statistic

Display prominent numeric statistics.

Basic Usage

100.91

vue

<template>
  <bp-button size="small" type="plain" @click="random" style="margin-bottom: 20px">Toggle</bp-button>

  <bp-statistic v-model="value" animation :precision="2" :font-size="['26px', '26px']"> </bp-statistic>
</template>

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

const value = ref(100.91);

const random = () => {
  value.value = (Math.floor(Math.random() * 9999999) + 1) / 100;
};
</script>

Precision

Control decimal places with precision.

No decimals (default)

Keep 2 places

3.14

Keep 4 places

3.1416

vue

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">No decimals (default)</div>
      <bp-statistic v-model="val1" />
    </div>
    <div>
      <div class="label">Keep 2 places</div>
      <bp-statistic v-model="val2" :precision="2" />
    </div>
    <div>
      <div class="label">Keep 4 places</div>
      <bp-statistic v-model="val3" :precision="4" />
    </div>
  </div>
</template>

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

const val1 = ref(3);
const val2 = ref(3.14);
const val3 = ref(3.1415926);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 8px;
}
</style>

Thousand Separator

Toggle separators with show-separator and separator.

Thousands separator

1,234,567

Custom separator

1.234.567

Precision + thousands separator

1,234,567.89

vue

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Thousands separator</div>
      <bp-statistic v-model="val1" show-separator />
    </div>
    <div>
      <div class="label">Custom separator</div>
      <bp-statistic v-model="val2" show-separator separator="." />
    </div>
    <div>
      <div class="label">Precision + thousands separator</div>
      <bp-statistic v-model="val3" show-separator :precision="2" />
    </div>
  </div>
</template>

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

const val1 = ref(1234567);
const val2 = ref(1234567);
const val3 = ref(1234567.89);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 8px;
}
</style>

Unit and Prefix

Add a unit or a prefix slot.

With unit

99.9%

Custom prefix

💰2048

Currency prefix

¥19,999

vue

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">With unit</div>
      <bp-statistic v-model="val1" unit="%" :precision="1" />
    </div>
    <div>
      <div class="label">Custom prefix</div>
      <bp-statistic v-model="val2">
        <template #prefix>
          <span style="font-size: 16px; margin-right: 4px">💰</span>
        </template>
      </bp-statistic>
    </div>
    <div>
      <div class="label">Currency prefix</div>
      <bp-statistic v-model="val3" show-separator>
        <template #prefix>
          <span style="font-size: 16px; margin-right: 2px">¥</span>
        </template>
      </bp-statistic>
    </div>
  </div>
</template>

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

const val1 = ref(99.9);
const val2 = ref(2048);
const val3 = ref(19999);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 8px;
}
</style>

Animation

Animate values with animation, duration, and value-from.

Animate from 0 to the target value

8888.880k

Custom start value

8,889

vue

<template>
  <div>
    <bp-button size="small" type="plain" @click="restart" style="margin-bottom: 20px">Replay</bp-button>
    <div style="display: flex; gap: 40px">
      <div>
        <div class="label">Animate from 0 to the target value</div>
        <bp-statistic v-model="value" animation :duration="2000" :precision="2" unit="0k" />
      </div>
      <div>
        <div class="label">Custom start value</div>
        <bp-statistic v-model="value" animation :value-from="500" :duration="1500" show-separator />
      </div>
    </div>
  </div>
</template>

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

const value = ref(8888.88);

const restart = () => {
  value.value = 0;
  setTimeout(() => {
    value.value = 8888.88;
  }, 100);
};
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 8px;
}
</style>

Color and Font Size

Style the value with color and font-size.

Custom color

76.5%

Warning color

3,200people

Custom font size

Different font sizes for integer/decimal

99.8%

vue

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Custom color</div>
      <bp-statistic v-model="val1" :precision="1" unit="%" color="#00b42a" />
    </div>
    <div>
      <div class="label">Warning color</div>
      <bp-statistic v-model="val2" show-separator color="#ff7d00" unit="people" />
    </div>
    <div>
      <div class="label">Custom font size</div>
      <bp-statistic v-model="val3" font-size="40px" />
    </div>
    <div>
      <div class="label">Different font sizes for integer/decimal</div>
      <bp-statistic v-model="val4" :precision="1" :font-size="['32px', '18px']" unit="%" />
    </div>
  </div>
</template>

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

const val1 = ref(76.5);
const val2 = ref(3200);
const val3 = ref(42);
const val4 = ref(99.8);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 8px;
}
</style>

Placeholder

Show placeholder when the value is undefined or null.

Default placeholder

Custom placeholder

No data

Toggle value

vue

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Default placeholder</div>
      <bp-statistic />
    </div>
    <div>
      <div class="label">Custom placeholder</div>
      <bp-statistic placeholder="No data" />
    </div>
    <div>
      <div class="label">Toggle value</div>
      <bp-button size="small" type="plain" @click="toggle">Toggle</bp-button>
      <bp-statistic animation v-model="val" style="margin-top: 8px" />
    </div>
  </div>
</template>

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

const val = ref<number | undefined>(undefined);
const toggle = () => {
  val.value = val.value === undefined ? 2026 : undefined;
};
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 8px;
}
</style>

Statistic Props

v-model	Bound value	Number	-	-
value	Value	Number	-	-
placeholder	Placeholder	String	--	-
separator	Thousands separator	String	,	-
show-separator	Whether to show thousands separator	Boolean	-	-
color	Text color	String	-	-
unit	Unit	String	-	-
precision	Decimal precision	Number	-	-
font-size	Font size	StringArray	26px	-
animation	Whether to enable animation	Boolean	-	-
duration	Animation duration	Number	1000	-
value-from	Animation start value	Number	-	-

Statistic Slots

prefix

Prefix content

Statistic ​

Basic Usage ​

Precision ​

Thousand Separator ​

Unit and Prefix ​

Animation ​

Color and Font Size ​

Placeholder ​

Statistic Props ​

Statistic Slots ​