Formatting

import { useNumberFormat } from '@pzeta/vue-widget'

const { formatNumber, formatCurrency, formatCompact, formatPercent, formatAuto } = useNumberFormat()

formatNumber(1234.56)                          // '1.235'
formatNumber(1234.56, { decimals: 2 })         // '1.234,56'
formatNumber(1234, { prefix: '$' })            // '$1.234'
formatCurrency(1234.56)                        // '1.234,56 EUR'
formatCurrency(1234.56, { currency: 'USD' })   // '$ 1.234,56' (con locale it-IT)
formatCompact(1500000)                         // '1,5M'
formatCompact(1500, { prefix: '$' })           // '$1,5k'
formatPercent(0.1234)                          // '12,34%'
formatPercent(0.1234, { decimals: 0 })         // '12%'
formatAuto(1234)                               // '1.234'
formatAuto(1234.5, ' kg')                      // '1.234,50 kg'

import { useCurrency } from '@pzeta/vue-widget'

const { symbol, formatAmount, formatAmountWithSeparator } = useCurrency()
symbol.value                              // '€' (per locale 'it')
formatAmount(1234)                        // '€1234'
formatAmountWithSeparator(1234.5, 2)      // '€1.234,50'

// Con override prop
const { symbol } = useCurrency({ override: props.currency })

import { useCounterAnimation } from '@pzeta/vue-widget'

const { animatedValues, restart } = useCounterAnimation(
  () => props.metrics.map(m => m.value),
  { duration: 2000 }
)

// In template:
// <span v-for="(val, i) in animatedValues" :key="i">{{ val }}</span>

// Riavvio manuale dopo aggiornamento dati
watch(() => props.metrics, () => restart())

import { useTrend } from '@pzeta/vue-widget'

const {
  getTrendInfo,
  getTrendFromChange,
  getTrendColorClass,
  getTrendSeverity,
  getTrendIcon,
  getTrendSymbol,
} = useTrend()

const info = getTrendInfo('up')
// { direction: 'up', colorClass: 'text-success-500', severity: 'success',
//   icon: 'pi pi-arrow-up', symbol: '↑' }

getTrendFromChange(5.2)    // 'up'
getTrendFromChange(-3.1)   // 'down'
getTrendFromChange(0)      // 'neutral'