Cloudflare LogoNavigate Back
Cloudflare Style
Cloudflare Style is in Alpha and is a work-in-progress. Expect changes. Contact DESSYS with any questions.
Components
Analytics

Stat Visualisation

Used to highlight a key metric trend over time as a trendline visualisation. They are read only and non filterable.

Useful for when you only have a single dimensions per metric. You can use mutliple instances stacked when you want to show other dimensions that are related in time but are a different metric.

Use the x-axis to represent time

The StatVisualisation component always represents chronological data along the x-axis. Keeping this consistent reduces cognitive dissonance amongst customers.

The visualisation has two variants, StatVisualisation & StatVisualisationWithHover, both are exported from the package. Both components look the same but StatVisualisation allows you to add multiple StatVisualisation's and sync the hover effect. Try it out by hovering over the charts below.

Total Visitors
222
Total Bandwidth Used
34GB

The hover functionality is useful when surfacing information but sometimes you only want one instance of the component and wiring up that interaction for one is time consuming and involves creating state.

In those cases you can use the StatVisualisationWithHover which contains that state within its own instance.

You can use the formatter prop to visually manipulate how the values in the chart look.

Percent Cached
37.00%
  • Design
  • Implementation

TODO - Design

Product Usage

  • Dashboard
  • Teams
  • Radar
    v1.7.331Last updated April 9, 2021
    View source

    • LinkedIn
    • Facebook
    • Twitter
    • GitHub
    • YouTube

    Cloudflare LogoNavigate back
    • © 2021 Cloudflare, Inc.
    • About Cloudflare
    • Careers
    • Terms of Use
    • Disclosure
    • Trademark