Skip to content

Commit 9508c32

Browse files
Lukas742Lukas742
authored
docs: enhance stories of card components and migrate to mdx (#734)
1 parent b0a4588 commit 9508c32

File tree

6 files changed

+326
-153
lines changed

6 files changed

+326
-153
lines changed

‎packages/main/src/components/AnalyticalCard/AnalyticalCard.stories.mdx

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
2+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
3+
import { DocsHeader } from '@shared/stories/DocsHeader';
4+
import '@ui5/webcomponents-icons/dist/icons/person-placeholder.js';
5+
import { AnalyticalCard } from '@ui5/webcomponents-react/lib/AnalyticalCard';
6+
import { AnalyticalCardHeader } from '@ui5/webcomponents-react/lib/AnalyticalCardHeader';
7+
import { DeviationIndicator } from '@ui5/webcomponents-react/lib/DeviationIndicator';
8+
import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
9+
import { LineChart } from '@ui5/webcomponents-react-charts/lib/LineChart';
10+
11+
<Meta
12+
title="Components / AnalyticalCard"
13+
component={AnalyticalCard}
14+
parameters={{
15+
subcomponents: { AnalyticalCardHeader }
16+
}}
17+
argTypes={{
18+
header: {
19+
type: null
20+
},
21+
children: {
22+
type: null
23+
},
24+
ref: {
25+
type: null
26+
}
27+
}}
28+
/>
29+
30+
<DocsHeader />
31+
32+
**Note:** The `AnalyticalCard` was mainly made to display KPIs and complex data. If you want to implement a simple card, the `Card` component probably is more suitable.
33+
34+
<Canvas>
35+
<Story name="Default">
36+
{(args) => {
37+
const simpleDataSet = [
38+
{
39+
name: 'January',
40+
users: 76
41+
},
42+
{
43+
name: 'February',
44+
users: 230
45+
},
46+
{
47+
name: 'March',
48+
users: 240
49+
},
50+
{
51+
name: 'April',
52+
users: 280
53+
},
54+
{
55+
name: 'May',
56+
users: 100
57+
}
58+
];
59+
return (
60+
<AnalyticalCard
61+
header={
62+
<AnalyticalCardHeader
63+
title="Title"
64+
subTitle="Subtitle"
65+
arrowIndicator={DeviationIndicator.Down}
66+
indicatorState={ValueState.Success}
67+
value="Value"
68+
valueState={ValueState.Success}
69+
unit="Unit"
70+
target="Target"
71+
deviation="Deviation"
72+
showIndicator={true}
73+
description="Description"
74+
counter="Counter"
75+
counterState={ValueState.Success}
76+
currency="EUR"
77+
/>
78+
}
79+
>
80+
<LineChart
81+
noLegend
82+
dimensions={[{ accessor: 'name' }]}
83+
measures={[{ accessor: 'users', formatter: (val) => `${val}k` }]}
84+
dataset={simpleDataSet}
85+
/>
86+
</AnalyticalCard>
87+
);
88+
}}
89+
</Story>
90+
</Canvas>
91+
92+
<ArgsTable story="Default" />
93+
94+
<br />
95+
<br />
96+
97+
# Stories
98+
99+
<br />
100+
101+
## Customizable AnalyticalCardHeader
102+
103+
<Canvas>
104+
<Story
105+
name="Customizable header"
106+
args={{
107+
title: 'Project Cost',
108+
subTitle: 'All active Projects',
109+
arrowIndicator: DeviationIndicator.Down,
110+
indicatorState: ValueState.Success,
111+
value: '100',
112+
valueState: ValueState.Success,
113+
unit: 'M',
114+
target: '120M',
115+
deviation: '-16.67%',
116+
showIndicator: true,
117+
description: 'Current Year',
118+
counter: '+',
119+
counterState: ValueState.Success,
120+
currency: 'USD'
121+
}}
122+
argTypes={{
123+
title: { description: 'Defines the title of the `AnalyticalCardHeader`.' },
124+
subTitle: { description: 'Defines the subtitle of the `AnalyticalCardHeader`.' },
125+
value: { description: 'Defines the value of the `AnalyticalCardHeader`.' },
126+
...createSelectArgTypes({
127+
arrowIndicator: DeviationIndicator,
128+
indicatorState: ValueState,
129+
valueState: ValueState,
130+
counterState: ValueState
131+
}),
132+
unit: { description: 'Defines the unit displayed next to the value of the `AnalyticalCardHeader`.' },
133+
target: { description: 'Defines the target value.' },
134+
deviation: { description: 'Defines the deviation value.' },
135+
showIndicator: { description: 'Defines whether the deviation indicator should be displayed.' },
136+
description: { description: 'Defines the description below the value of the `AnalyticalCardHeader`.' },
137+
counter: { description: 'Defines the counter in the upper right corner of the `AnalyticalCardHeader`.' },
138+
currency: { description: 'Defines the currency.' },
139+
onHeaderPress: { description: 'Fired when the `AnalyticalCardHeader` header is clicked.' },
140+
header: { table: { disable: true } },
141+
children: { table: { disable: true } },
142+
ref: { table: { disable: true } }
143+
}}
144+
>
145+
{(args) => {
146+
const simpleDataSet = [
147+
{
148+
name: 'January',
149+
users: 76
150+
},
151+
{
152+
name: 'February',
153+
users: 130
154+
},
155+
{
156+
name: 'March',
157+
users: 140
158+
},
159+
{
160+
name: 'April',
161+
users: 180
162+
},
163+
{
164+
name: 'May',
165+
users: 100
166+
}
167+
];
168+
return (
169+
<AnalyticalCard
170+
header={
171+
<AnalyticalCardHeader
172+
title={args.title}
173+
subTitle={args.subTitle}
174+
arrowIndicator={args.arrowIndicator}
175+
indicatorState={args.indicatorState}
176+
value={args.value}
177+
valueState={args.valueState}
178+
unit={args.unit}
179+
target={args.target}
180+
deviation={args.deviation}
181+
onHeaderPress={args.onHeaderPress}
182+
showIndicator={args.showIndicator}
183+
description={args.description}
184+
counter={args.counter}
185+
counterState={args.counterState}
186+
currency={args.currency}
187+
/>
188+
}
189+
>
190+
<LineChart
191+
noLegend
192+
dimensions={[{ accessor: 'name' }]}
193+
measures={[{ accessor: 'users', formatter: (val) => `${val}m` }]}
194+
dataset={simpleDataSet}
195+
/>
196+
</AnalyticalCard>
197+
);
198+
}}
199+
</Story>
200+
</Canvas>
201+
202+
<ArgsTable story="Customizable header" />

‎packages/main/src/components/AnalyticalCard/demo.stories.tsx

Lines changed: 0 additions & 104 deletions
This file was deleted.

‎packages/main/src/components/AnalyticalCard/index.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,19 @@ import styles from './AnalyticalCard.jss';
88

99
export interface AnalyticalCardTypes extends CommonProps {
1010
/**
11-
* The Card header Component, using the AnalyticalCardHeader is recommended.
11+
* The Card header Component. Using the `AnalyticalCardHeader` is recommended.
1212
*/
1313
header?: ReactNode;
1414
/**
15-
* Expected one or more React Components
15+
* The content of the `AnalyticalCard`.
1616
*/
1717
children: ReactNode | ReactNodeArray;
1818
}
1919

2020
const useStyles = createComponentStyles(styles, { name: 'AnalyticalCard' });
21-
21+
/**
22+
* The `AnalyticalCard` is mainly used for data visualization. It consists of two areas – a header area and a chart area with a visual representation of the data.<br />
23+
*/
2224
const AnalyticalCard: FC<AnalyticalCardTypes> = forwardRef((props: AnalyticalCardTypes, ref: Ref<HTMLDivElement>) => {
2325
const { children, style, className, tooltip, header } = props;
2426
const classes = useStyles();

0 commit comments

Comments
 (0)