Pie 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 { PieChartCard } from '@optimus-web/core';
                                                        
                                                        <PieChartCard 
                                                          title='Transactions'
                                                          subtitle='Last 7 days'
                                                          menuActions={actions}
                                                          trendScore={{
                                                              value: '+8.01%',
                                                              trend: 'positive',
                                                              direction: 'up',
                                                          }}
                                                          chart={{
                                                              id: 'demo-pie-chart',
                                                              data,
                                                              title: 'My pie chart title',
                                                              scoreValue: total.toLocaleString(),
                                                              scoreLabel: 'Payments',
                                                              minWidth: 140,
                                                              valueFormatter,
                                                              labelFormatter,
                                                              animated: true,
                                                          }}
                                                        />

Name	Description	Type	Default
chart?	Chart configuration object needed for render the card chart. Very similar to the options provided to the PieChart but extended with scoreValue and scoreLabel	PieChartConfig	undefined
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	-
trendScore?	Trend score configuration object needed for render the TrendScore component in the card header	TrendScoreProps	undefined

Resources

Example

API