Progress Chart Card

Component Status

React

Up to date

Usage


                                                        
                                                        
                                                            import { ProgressChartCard } from '@optimus-web/core';
                                                        
                                                        <ProgressChartCard
                                                            charts={[
                                                              {
                                                                  data: [{ id: '1', name: 'Lorem ipsum', value: 39, color: 'green' }],
                                                                  total: 80,
                                                                  score: {
                                                                      value: '39/80',
                                                                  },
                                                                  id: 'progress-chart-1',
                                                                  title: 'Adults',
                                                              },
                                                              {
                                                                  data: [{ id: '2', name: 'Lorem ipsum', value: 3, color: 'green' }],
                                                                  total: 20,
                                                                  score: {
                                                                      value: '3/20',
                                                                  },
                                                                  id: 'progress-chart-2',
                                                                  title: 'Children',
                                                              },
                                                            ]}
                                                            id="progress-card"
                                                            title="Products claimed by age"
                                                            subtitle: 'Last 7 days',
                                                            menuActions={actions}
                                                            legend={{
                                                                payload: data,
                                                                showValues: true,
                                                            }}
                                                        />
                                                        
                                                            

Storybook

Open example in our Storybook

Storybook failed to load. Please connect to the VPN to access.

API

Name

Description

Type

Default

title

Card title rendered in the card header. Ellipsis is set to render one line. A width has to be defined in the parent component in order the text-overflow works properly.

string

-

id

Card id, used internally for AA

string

-

subtitle?

Card subtitle rendered in the card header. Ellipsis is set to render two lines. A width has to be defined in the parent component in order the text-overflow works properly.

string

undefined

menuActions?

Collection of actions rendered inside the top right dropdown menu

ChartCardActions

undefined

charts

Accepts a collection of progress chart configuration objects. Multiple charts can be rendered in a single card

ProgressCharts[]

-

columns?

Defines the column layout of the charts inside the card

ChartsColumns

{
desktop: 1,
tablet: 1,
phone: 1,
}