React
Is new design vision part implemented using new tokens?
React
Is new design vision part implemented using new tokens?
import { BarChartCard } from '@optimus-web/core';
<BarChartCard
chart={{
id: 'demo-bar-chart-in-card',
yAxisWidth: 32,
data,
stacked: true,
reference: {
value: Math.round(average * 100) / 100,
label: 'Average',
},
}}
id="demo-bar-chart-card"
title="Booked services"
subtitle="Last 7 days"
menuActions={actions}
highlightScore={{
value: myValue,
}}
/>
Name |
Description |
Type |
Default |
---|---|---|---|
chart? |
Bar chart |
BarChartProps |
undefined |
empty? |
Sets empty state of chart with default message or you can define custom message |
boolean | { message: ReactNode } |
undefined |
error? |
Sets error 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 header |
HighlightScoreProps |
undefined |
id |
Card id, used internally for AA |
string |
- |
kpi? |
Adds Kpi metric in the card between title and chart |
ReactElement<ChartCardKpiProps> |
undefined |
loading? |
Show skeleton loader |
boolean |
undefined |
menuActions? |
Collection of actions rendered inside the top right dropdown menu |
ChartCardActions |
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 |
- |