Trend 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 { TrendChartCard } from '@optimus-web/core';
                                                        
                                                        <TrendChartCard 
                                                          id="trend-card-1"
                                                          menuActions={actions}
                                                          title="Confirmed reservations"
                                                          subtitle="Last 30 days, compared to the same period last year"
                                                          trendScore={{
                                                            value: '+8.01%',
                                                            trend: 'positive',
                                                            direction: 'up',
                                                          }}
                                                          highlightScore={{
                                                              value: '4,3',
                                                              suffix: 'K',
                                                          }}
                                                          data={data}
                                                          trend="positive"
                                                          animated={true}
                                                        />

Name	Description	Type	Default
animated?	Apply animation to the chart on load	boolean	true
data	The dataset rendered by the chart	TrendChartData[]	-
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
highlightScore?	Configuration object for render the highlight score in the card body	HighlightScoreProps	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	-
trend	Set the sentiment of the trend	SemanticDatavizColor	-
trendScore?	Trend score configuration object needed for render the TrendScore component in the card body	ProgressCharts[]	-

Resources

Example

API