Statistic

A component for displaying numeric values and their associated labels.

Basic Usage

Display a number with a title.

 Active Users 
 112,893 
 Account Balance (CNY) 
 112,893.00 
<prism-row [gutter]="16">
  <prism-col [span]="12">
    <prism-card>
      <prism-statistic title="Active Users" [value]="112893"></prism-statistic>
    </prism-card>
  </prism-col>
  <prism-col [span]="12">
    <prism-card>
      <prism-statistic title="Account Balance (CNY)" [value]="112893" [precision]="2"></prism-statistic>
    </prism-card>
  </prism-col>
</prism-row>

Animated Count Up

Animate numeric values when they first load and update.

 Total Downloads 
 125,430 
 Revenue 
 $  50,234.50 
<prism-row [gutter]="16">
  <prism-col [span]="12">
    <prism-card>
      <prism-statistic 
        title="Total Downloads" 
        [value]="value()" 
        [countUp]="true" 
        [countUpDuration]="2500"
      ></prism-statistic>
    </prism-card>
  </prism-col>
  <prism-col [span]="12">
    <prism-card>
      <prism-statistic 
        title="Revenue" 
        [value]="revenue()" 
        [precision]="2" 
        prefix="$" 
        [countUp]="true"
        [countUpDuration]="2000"
      ></prism-statistic>
    </prism-card>
  </prism-col>
</prism-row>
<div style="margin-top: 16px;">
  <prism-button (click)="updateValues()" variant="primary">Update Values</prism-button>
</div>

Prefix & Suffix

Add prefix and suffix to the value.

 Feedback 
 👍  1,128 
 Unmerged 
 93  / 100 
<prism-row [gutter]="16">
  <prism-col [span]="12">
    <prism-card>
      <prism-statistic 
        title="Feedback" 
        [value]="1128" 
        prefix="👍"
      ></prism-statistic>
    </prism-card>
  </prism-col>
  <prism-col [span]="12">
    <prism-card>
      <prism-statistic 
        title="Unmerged" 
        [value]="93" 
        suffix="/ 100"
      ></prism-statistic>
    </prism-card>
  </prism-col>
</prism-row>

API Overview

Inputs and Outputs for PrismStatistic

Name	Type	Default	Description
`title`	`string \| TemplateRef<any>`	`-`	The title of the statistic
`value`	`number \| string`	`0`	The value to display
`prefix`	`string \| TemplateRef<any>`	`-`	The prefix node of value
`suffix`	`string \| TemplateRef<any>`	`-`	The suffix node of value
`precision`	`number`	`0`	The precision of input value
`countUp`	`boolean`	`false`	Whether to animate count up to the value from 0 or last value
`countUpDuration`	`number`	`2000`	Duration of the count up animation in ms
`valueStyle`	`Record<string, string>`	`null`	Inline style for the value node