Menu


Components

BarList

Storybook

The BarList component is a customizable React component designed to display a list of bars representing different data points. It provides a visually appealing way to present metrics, values, or progress indicators in a clear and intuitive manner.


Imports

The first alternative is recommended since it can reduce the application bundle

1import BarList from 'dd360-ds/BarList'
1import { BarList } from 'dd360-ds'

Usage

Use the BarList component as shown below:

Item 1
20
Item 2
40
Item 3
60
Item 4
80
Item 5
100

The code snippet below shows how to use the BarList component:

1import BarList from 'dd360-ds/BarList'
2
3  <BarList
4        listData={[
5            { label: 'Item 1', value: 20 },
6            { label: 'Item 2', value: 40 },
7            { label: 'Item 3', value: 60 },
8            { label: 'Item 4', value: 80 },
9            { label: 'Item 5', value: 100 }
10        ]}
11    />
12

Customization

The BarList component provides several customization options through props.

TitleMetrics

Allows you to specify a text or a string to be displayed as a title for the metrics displayed in the bar list.

Items

Item 1
20
Item 2
40
Item 3
60
Item 4
80
Item 5
100
1import BarList from 'dd360-ds/BarList'
2
3  <BarList
4        listData={[
5            { label: 'Item 1', value: 20 },
6            { label: 'Item 2', value: 40 },
7            { label: 'Item 3', value: 60 },
8            { label: 'Item 4', value: 80 },
9            { label: 'Item 5', value: 100 }
10        ]}
11        titleMetrics="Items"
12    />
13
TitleValues

Allows you to specify a text or a string to be displayed as a title for the values shown in the list of members.

Items

Values

Item 1
20
Item 2
40
Item 3
60
Item 4
80
Item 5
100
1import BarList from 'dd360-ds/BarList'
2
3  <BarList
4        listData={[
5            { label: 'Item 1', value: 20 },
6            { label: 'Item 2', value: 40 },
7            { label: 'Item 3', value: 60 },
8            { label: 'Item 4', value: 80 },
9            { label: 'Item 5', value: 100 }
10        ]}
11        titleMetrics="Items"
12        titleValues="Values"
13    />
14
ValuePrefix

Allows to specify a text or value to be displayed as a prefix next to the values in the bar list. This prefix will be placed before each value.

Item 1
$20
Item 2
$40
Item 3
$60
Item 4
$80
Item 5
$100
1import BarList from 'dd360-ds/BarList'
2
3  <BarList
4        listData={[
5            { label: 'Item 1', value: 20 },
6            { label: 'Item 2', value: 40 },
7            { label: 'Item 3', value: 60 },
8            { label: 'Item 4', value: 80 },
9            { label: 'Item 5', value: 100 }
10        ]}
11        valuePrefix="$"
12    />
13
ValueSuffix

Allows to specify a text or value to be displayed as a suffix next to the values in the list of members. This suffix will be placed after each value.

Item 1
20%
Item 2
40%
Item 3
60%
Item 4
80%
Item 5
100%
1import BarList from 'dd360-ds/BarList'
2
3  <BarList
4        listData={[
5            { label: 'Item 1', value: 20 },
6            { label: 'Item 2', value: 40 },
7            { label: 'Item 3', value: 60 },
8            { label: 'Item 4', value: 80 },
9            { label: 'Item 5', value: 100 }
10        ]}
11        valueSuffix="%"
12    />
13
ClassNameBar

Allows passing a text string representing a custom CSS class for the background bar of each item in the list.

Item 1
20
Item 2
40
Item 3
60
Item 4
80
Item 5
100
1import BarList from 'dd360-ds/BarList'
2
3  <BarList
4        listData={[
5            { label: 'Item 1', value: 20 },
6            { label: 'Item 2', value: 40 },
7            { label: 'Item 3', value: 60 },
8            { label: 'Item 4', value: 80 },
9            { label: 'Item 5', value: 100 }
10        ]}
11        classNameBar="border border-blue-800"
12    />
13
RoundedBar

Allows you to specify the border radius of the bar elements in the list.

Item 1
20
Item 2
40
Item 3
60
Item 4
80
Item 5
100
1import BarList from 'dd360-ds/BarList'
2
3  <BarList
4        listData={[
5            { label: 'Item 1', value: 20 },
6            { label: 'Item 2', value: 40 },
7            { label: 'Item 3', value: 60 },
8            { label: 'Item 4', value: 80 },
9            { label: 'Item 5', value: 100 }
10        ]}
11        roundedBar="full"
12    />
13
MarginYItem

Allows to set the vertical spacing between each item in the bar list.

Item 1
20
Item 2
40
Item 3
60
Item 4
80
Item 5
100
1import BarList from 'dd360-ds/BarList'
2
3  <BarList
4        listData={[
5            { label: 'Item 1', value: 20 },
6            { label: 'Item 2', value: 40 },
7            { label: 'Item 3', value: 60 },
8            { label: 'Item 4', value: 80 },
9            { label: 'Item 5', value: 100 }
10        ]}
11        marginYItem="4"
12    />
13
HeightBar

Allows you to set the height of the bottom bar element of each item in the list.

Item 1
20
Item 2
40
Item 3
60
Item 4
80
Item 5
100
1import BarList from 'dd360-ds/BarList'
2
3  <BarList
4        listData={[
5            { label: 'Item 1', value: 20 },
6            { label: 'Item 2', value: 40 },
7            { label: 'Item 3', value: 60 },
8            { label: 'Item 4', value: 80 },
9            { label: 'Item 5', value: 100 }
10        ]}
11        heightBar="14"
12        marginYItem="8"
13    />
14
FontSizeBar

Allows you to pass a value from the Size enumeration to set the font size of the text in the bar labels. The default value is base.

Item 1
20
Item 2
40
Item 3
60
Item 4
80
Item 5
100
1import BarList from 'dd360-ds/BarList'
2
3  <BarList
4        listData={[
5            { label: 'Item 1', value: 20 },
6            { label: 'Item 2', value: 40 },
7            { label: 'Item 3', value: 60 },
8            { label: 'Item 4', value: 80 },
9            { label: 'Item 5', value: 100 }
10        ]}
11        fontSizeBar="lg"
12    />
13
DefaultBackgroundBarColor

Defines the default background color of the bar element if the backgroundBarColor property is not provided for a specific element in the listData property.

Item 1
20
Item 2
40
Item 3
60
Item 4
80
Item 5
100
1import BarList from 'dd360-ds/BarList'
2
3<BarList
4    listData={[
5        { label: 'Item 1', value: 20 },
6        { label: 'Item 2', value: 40 },
7        { label: 'Item 3', value: 60 },
8        { label: 'Item 4', value: 80 },
9        { label: 'Item 5', value: 100 }
10    ]}
11    defaultBackgroundBarColor="#aee8be"
12/>
13
DefaultTextBarColor

Defines the default text color in the bar labels if the textBarColor property is not provided for a specific item in the listData property.

Item 1
20
Item 2
40
Item 3
60
Item 4
80
Item 5
100
1import BarList from 'dd360-ds/BarList'
2
3<BarList
4    listData={[
5        { label: 'Item 1', value: 20 },
6        { label: 'Item 2', value: 40 },
7        { label: 'Item 3', value: 60 },
8        { label: 'Item 4', value: 80 },
9        { label: 'Item 5', value: 100 }
10    ]}
11    defaultTextBarColor="#000"
12/>
13
Item Customization

In DataList items you can use the following properties to customize each item.

prefix

Allows you to specify a text or string to be displayed as a prefix before the numeric value in the bar label for a specific item in the listData property.

Item 1
$20
Item 2
40
Item 3
60
Item 4
80
Item 5
100
1import BarList from 'dd360-ds/BarList'
2
3<BarList
4    listData={[
5        { label: 'Item 1', value: 20, prefix: "$" },
6        { label: 'Item 2', value: 40 },
7        { label: 'Item 3', value: 60 },
8        { label: 'Item 4', value: 80 },
9        { label: 'Item 5', value: 100 }
10    ]}
11/>
12
Suffix

Allows you to specify a text or a string to be displayed as a suffix after the numeric value in the bar label for a specific item in the listData property.

Item 1
20%
Item 2
40
Item 3
60
Item 4
80
Item 5
100
1import BarList from 'dd360-ds/BarList'
2
3<BarList
4    listData={[
5        { label: 'Item 1', value: 20, suffix: "%" },
6        { label: 'Item 2', value: 40 },
7        { label: 'Item 3', value: 60 },
8        { label: 'Item 4', value: 80 },
9        { label: 'Item 5', value: 100 }
10    ]}
11/>
12
BackgroundBarColor

Defines the background color of the bar element for a specific element in the listData property. Providing this property will override the default background color for the corresponding element.

Item 1
20
Item 2
40
Item 3
60
Item 4
80
Item 5
100
1import BarList from 'dd360-ds/BarList'
2
3<BarList
4    listData={[
5        { label: 'Item 1', value: 20, backgroundBarColor: "#aee8be" },
6        { label: 'Item 2', value: 40 },
7        { label: 'Item 3', value: 60 },
8        { label: 'Item 4', value: 80 },
9        { label: 'Item 5', value: 100 }
10    ]}
11/>
12
TextBarColor

Defines the text color of the bar labels for a specific element in the listData property. Providing this property will override the default text color for the corresponding element.

Item 1
20
Item 2
40
Item 3
60
Item 4
80
Item 5
100
1import BarList from 'dd360-ds/BarList'
2
3<BarList
4    listData={[
5        { label: 'Item 1', value: 20, textBarColor: "#083173" },
6        { label: 'Item 2', value: 40 },
7        { label: 'Item 3', value: 60 },
8        { label: 'Item 4', value: 80 },
9        { label: 'Item 5', value: 100 }
10    ]}
11/>
12
Hsref

Allows you to specify the destination URL for the generated links in the list items. The links will open in a new browser tab because they contain the target="_blank" attribute.

Item 1
20
Item 2
40
Item 3
60
Item 4
80
Item 5
100
1import BarList from 'dd360-ds/BarList'
2
3<BarList
4    listData={[
5        { label: 'Item 1', value: 20, href: "/" },
6        { label: 'Item 2', value: 40, href: "/" },
7        { label: 'Item 3', value: 60, href: "/" },
8        { label: 'Item 4', value: 80, href: "/" },
9        { label: 'Item 5', value: 100, href: "/" }
10    ]}
11/>
12
StartIcon

Allows you to pass a React element as an icon to be displayed at the beginning of the bar label for a specific element in the listData property.

Item 1
20
Item 2
40
Item 3
60
Item 4
80
Item 5
100
1import BarList from 'dd360-ds/BarList'
2
3const IconTwitter = () => {
4  return (
5    <svg
6        xmlns="http://www.w3.org/2000/svg"
7        className="fill-blue-500"
8        viewBox="0 0 24 24"
9        width="20"
10        height="20"
11    >
12        <path fill="none" d="M0 0h24v24H0z" />
13        <path d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z" />
14    </svg>
15  )
16}
17
18<BarList
19    listData={[
20        { label: 'Item 1', value: 20, startIcon: <IconTwitter /> },
21        { label: 'Item 2', value: 40 },
22        { label: 'Item 3', value: 60 },
23        { label: 'Item 4', value: 80 },
24        { label: 'Item 5', value: 100 }
25    ]}
26/>
27
EndIcon

Allows you to pass a React element as an icon to be displayed at the end of the bar label for a specific element in the listData property.

Item 1
20
Item 2
40
Item 3
60
Item 4
80
Item 5
100
1import BarList from 'dd360-ds/BarList'
2
3const IconTwitter = () => {
4  return (
5    <svg
6        xmlns="http://www.w3.org/2000/svg"
7        className="fill-blue-500"
8        viewBox="0 0 24 24"
9        width="20"
10        height="20"
11    >
12        <path fill="none" d="M0 0h24v24H0z" />
13        <path d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z" />
14    </svg>
15  )
16}
17
18<BarList
19    listData={[
20        { label: 'Item 1', value: 20, endIcon: <IconTwitter /> },
21        { label: 'Item 2', value: 40 },
22        { label: 'Item 3', value: 60 },
23        { label: 'Item 4', value: 80 },
24        { label: 'Item 5', value: 100 }
25    ]}
26/>
27

API Reference
NameTypesDefault
"listData"*
ListItem[]
[]
"titleMetrics"
string
-
"titleValues"
string
-
"valuePrefix"
string
-
"valueSuffix"
string
-
"defaultTextBarColor"
CSSProperties[color]
#1D4ED8
"defaultBackgroundBarColor"
CSSProperties[color]
#b5d4fc
"fontSizeBar"
xs
sm
base
lg
xl
2xl
3xl
4xl
base
"heightBar"
string
h-full
"marginYItem"
string
1
"roundedBar"
none
sm
base
md
lg
xl
2xl
3xl
full
md
"classNameBar"
string
-
"className"
string
-
BadgeCallout