Patterns

Summary tables

Dormant

A Summary Table is most often found proceeding a chart and has two variations depending on the data in the associated chart:

1. Single metric - Displays the aggregate totals of the time series chart above it along with related metrics
2. Breakdown metrics - Displays the aggregate totals of the time series chart above it broken down by metric, profile, etc.

Examples

Single metric

Breakdown metrics

Visual best practices

Table

• Cell Padding: Space size 350
• Table Border: 1px, Neutral 300
• When a table has additional columns that don’t fit in the field of view, a thin gradient should be displayed along the edge of either side which has additional columns
  • Gradient style: → Transparent
• Column widths: Determined by content, but can be overridden if necessary

Headers

• Font size:
• Font weight: 600
• Font color:
• Match alignment of values in the rest of the column (see below)

Body

• Font size:
• Font weight: 400
• Font color:
• Left align non-numeric values and right align numeric values

Aggregate table

• Font weight: 600

Content best practices

Number formatting

• Summary tables should follow our Number Formatting rules.
• Totals should be whole numbers, but averages should have two decimals

Columns

• [Metric]
  • The name of the metric(s) should always be displayed in the first column
• Totals
  • This column displays the total count for the metric(s) over the entire time period in the preceding chart
• % Change
  • The final column displays the percent change versus the comparison period

Emphasis Row

• Totals and averages should be displayed in a row(s) at the top of the table
• Totals and averages should only be displayed when more than one data source is selected
• In addition to totals and average, emphasis rows can also include other metrics worth emphasizing - e.g. Facebook Impression and Daily Average Reach for Facebook Pages

Variations

Single Metric

• Used when displaying a single metric
  • Examples: Followers, Listener Volume

Breakdown Metrics

• Used when breaking down metrics by sub-metrics, channels, etc.
  • Examples:
    • Engagement Types (Likes, Shares, Replies, Link Clicks, Other)
    • Volume totals, by channel (Facebook, Youtube, X, Instagram, etc.)
  • Include an inline bar chart with each metric, space permitting. Follow the Chart Colors - Color Rotations guidelines for displaying multiple bar charts.
    • The width of the bar chart for the largest value should have a width of 100%. The other, adjacent bar charts should then have relative widths.
    • Bar chart height: Space size 400