Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Donut graph

Donut graph is a circular visualization displaying data proportions, showing the part-to-whole relationship of one value compared to its total.

last modified: 30/09/2021 11:10:06

Overview

Donut graph is a part-to-whole data visualization showing relationship of one value compared to its total.

The donut graph starts at 12 o'clock and moves clockwise. When a value is expressing the amount used out of a total, the donut graph will start empty and fill in clockwise.

You can use the donut graph in both dark and light theme.

Statuses

When you use the donut to show consumption (of datas, minutes, etc.), 3 statuses are available for the usage bar:

  1. No usage
    The customers' usage is not yet started.

  2. On going usage
    The customers' have already consumed some of their content...

  3. Approaching the full usage
    The customers' usage has reached 80%.

  4. Exceeding usage
    The customers' usage has reached or exceeded 100%.

  5. Additional data
    Two kinds of data used/remaining out of a total. The second kind of data appears when the first one is completely used.

Unlimited plan

If the customer's plan is unlimited, keep the usage bar colour green all along.

Anatomy

  1. Donut bar

  2. Usage bar

  3. Additional data bar

Legends

Position the legends at the bottom of a donut graph by default. Depending on the page’s layout and context, you may choose to position the legends at the right of a donut graph.

  1. Bottom
    Default position.

  2. Right

last modified: 17/02/2022 16:05:05

Sizes and colors

last modified: 13/06/2023 16:40:05
Donut data

The keys data and dataMax are mandatory inside the razor code. The unit measure is Gb.

Donut data

The key donutId is mandatory inside the razor code for accessibility of donut's label.

How does it work

Donut graph is a webcomponent which needs data-rslib-webcomponent-load="rslib.apps.donutgraph" attribute to work and data-invoke="Donut.init" on the donut div.

Default donut

States colors

Depending on the progress of user's data, donut has differents status:

  • 0 - 80% of usage: data are green.
  • 80 - 100% of usage: data are orange.
  • +100% of usage: data are red.

@RenderPage("~/includes/doughnutgraph.cshtml", new{ data = 3, dataMax = 4, donutId = "example1"})

National and EU
Donut background

Donut are available on positive white and grey2. If the background isn't white you must put grey2 to a key named bgColor .

@RenderPage("~/includes/doughnutgraph.cshtml", new{ data = 3, dataMax = 4, donutId = "example2", bgColor = "grey"})

National and EU

Donut with boost

Donut boost data

The keys dataBoost and dataBoostMax are mandatory inside the razor code. The unit measure is Gb.

@RenderPage("~/includes/doughnutgraph.cshtml", new{ data = 4, dataMax = 4, donutId = "example3", dataBoost = 0, dataBoostMax = 1})

National and EU
+1Gb Boost

Donut with more labels

Free low speed

Add freeLowSpeed to the razor code. The unit measure is Gb.

@RenderPage("~/includes/doughnutgraph.cshtml", new{ data = 4, dataMax = 4, donutId = "example5", freeLowSpeed = 0.8})

National and EU
Free low speed

Data for pickx app

Add pickx and pickxMax to the razor code. The unit measure is Gb.

@RenderPage("~/includes/doughnutgraph.cshtml", new{ data = 4, dataMax = 4, donutId = "example6", pickx = 0.2, pickxMax = 2})

National and EU
Data for Pickx app

Label on right

Add labelOnRight = true with dayNumberLeft to the razor code.

@RenderPage("~/includes/doughnutgraph.cshtml", new{ data = 4, dataMax = 4, donutId = "example7", labelOnRight = true, dayNumberLeft = 2})

4 Gb Utilisés sur 4Gb 2 jours restants

Donut for unlimited plan

The difference between limited and unlimited plan is the color of the donut. It stays always green in unlimited. To have unlimited donut put unlimited = true in the razor code.

@RenderPage("~/includes/doughnutgraph.cshtml", new{ data = 4, dataMax = 4, donutId = "example4", unlimited = true})

National and EU

Negative donut

Negative background

Negative donuts are available only on a black background. You must put isNeg = true and set the bgColor on black.

@RenderPage("~/includes/doughnutgraph.cshtml", new{ data = 4.5, dataMax = 4, donutId = "example8", bgColor = "black", isNeg = true})

National and EU

JavaScript

How to trigger the js

As Donut graph is a webcomponent, you will have to load inception.webComponentLoad(CONTEXT); first to be able to load the scripts.

CONTEXT refers to document or html element parent.

If the scroll of your page isn't the body, put data-scrollparent="" attribute to the donut div with the class of the scrollparent. For example, if it's inside an overlayer, put data-scrollparent=".reveal-modal".