<template>
  <a-statistic 
	ref="statisticRef" 
	title="User Growth Rate" 
	:value="50.52" 
	:precision="2" 
	:value-from="0" 
	:start="start" 
	animation
>
    <template #prefix>
      <icon-arrow-rise />
    </template>
    <template #suffix>%</template>
  </a-statistic>
  <a-button @click="start=true">Start</a-button>
  <a-button @click="handleToggleStop">Toggle Stop</a-button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
	const statisticRef = ref(null);
    const start = ref(false);

	const handleToggleStop = (stoped) => {
		if (!statisticRef.value) return
		statisticRef.value?.stop(!stoped)
	}

    return {
	  statisticRef,
      start,
	  handleToggleStop
    }
  },
}
</script>