Trend Chart Card

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example


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