Skip to main content
Version: 2.0

Statistics

Overview​

Display key metrics and numbers with description to ensure the crucial data is presented in a visually engaging and informative way.

Anatomy​

  1. Title: Concise name of primary information.
  2. Value: Number value of primary data point or metric being highlighted.
  3. Secondary Information (optional): Additional context or details related to the value.
    • Secondary title: Name of secondary information.
    • Secondary value: Number value of secondary information.

Example: the primary information indicates that the Provider earned 450,000円 (subject to applicable business taxes) from 100 successful paid bookings.

Type​

  1. Primary: Displays the most critical information that users need to see immediately.
  2. Secondary: Provides supplementary or less crucial details.

For example, we can display key metrics of Earning and Payout like this:

  1. Earning:

    • Primary: Earning Subtotal
    • Secondary: Gross Earning, Commission Fees

  2. Payout:

    • Primary: Net Payout Amount
    • Secondary: Gross Payout, Transfer Fees, Commission Fees
      Note: the categorization of information as primary or secondary can vary depending on the project requirements.

Content​

Title​

Work best with less than 8 characters

Value​

  • Value equal to 0 yen: Set the value to "0円".
  • Value less than 0 yen: Add a minus sign before the value.
  • Value greater than or equal to 9,999,999,999,999 yen: If the value exceeds 9.99 trillion yen, represent it as "10.9兆円+". This indicates a value slightly larger than 10.9 trillion yen. When the user hovers over this card, a tooltip will appear, showing the full value of 9,999,999,999,999 yen.

Hierarchy​

Color Scheme​

Responsiveness common guidelines​

Adjust the font size to optimize the user interface for various screen sizes.

Wide Screens (≥ 992px) and Medium Screens (768px - 991px)​

  1. Primary Cards: 16px for title, 24px for value.
  2. Secondary Cards: 16px for title, 20px for value.

Small Screens (< 768px)​

  1. Primary Cards: 14px for title, 20px for value.
  2. Secondary Cards: 14px for title, 18px for value.

Usage Guidelines​

The Statistics component can be used in various layout configurations, such as 3-card, 4-card, or 5-card arrangements, to accommodate different data presentation needs.

Case 1: 3-Card Layout​

  • Wide Screens (≥ 992px): Both primary and secondary card have a fixed width of 256px and always fill the container.
  • Medium Screens (768px - 991px): Primary card fills the first row, while secondary card occupies the second row.
  • Small Screens (< 768px): Similar to the medium screen, Primary cards fills the first row, while secondary card occupies the second row.

Case 2: 4-Card Layout​

  • The primary, secondary, and the 3rd card behaves similarly to 3-Card Layout.
  • The 4th card will fill the entire container in the third row in Medium and Small screens.

Case 3: 5-Card Layout​

  • The primary, secondary, and the 3rd card behaves similarly to 3-Card Layout.
  • The 4th and 5th card will fill the entire container in the third row in Medium and Small screens.

References​

Orbit - Box component
Ant Design - Statistic