Trend Chart Card

Component Status

React

Up to date

Usage


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

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

trendScore?

Trend score configuration object needed for render the TrendScore component in the card body

ProgressCharts[]

-

highlightScore?

Configuration object for render the highlight score in the card body

HighlightScoreProps

undefined

data

The dataset rendered by the chart

TrendChartData[]

-

trend

Set the sentiment of the trend

SemanticDatavizColor

-

animated?

Apply animation to the chart on load

boolean

true