Progress Chart Card

React

Is new design vision part implemented using new tokens?

Up to date

Storybook

React guidance

Source

GitHub code

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


                                                        
                                                        
                                                            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,
                                                            }}
                                                        />

Name	Description	Type	Default
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, }
empty?	Sets empty state of chart with default message or you can define custom message	boolean \| { message: ReactNode }	undefined
error?	Sets empty state of chart with default message or you can define custom message	boolean \| { message: ReactNode }	undefined
id	Card id, used internally for AA	string	-
menuActions?	Collection of actions rendered inside the top right dropdown menu	ChartCardActions	undefined
loading?	Show skeleton loader	boolean	undefined
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
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	-

Resources

Example

API