-
Notifications
You must be signed in to change notification settings - Fork 455
/
BarList.tsx
108 lines (99 loc) · 3.44 KB
/
BarList.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import React from 'react';
import {
BaseColors,
borderRadius,
classNames,
defaultColors,
defaultValueFormatter,
fontSize,
getColorTheme,
getColorVariantsFromColorThemeValue,
parseMarginTop,
sizing,
spacing
} from 'lib';
import { Color, MarginTop, ValueFormatter } from '../../../lib';
type BarListData = {
name: string,
value: number,
}
const getWidthsFromValues = (data: BarListData[]) => {
let maxValue = -Infinity;
data.forEach(item => {
maxValue = Math.max(maxValue, item.value);
});
return data.map(item => {
if (item.value === 0) return 0;
return Math.max((item.value / maxValue) * 100, 1);
});
};
export interface BarListProps {
data: BarListData[],
valueFormatter?: ValueFormatter,
color?: Color,
showAnimation?: boolean,
marginTop?: MarginTop,
}
const BarList = ({
data = [],
color = BaseColors.Blue,
valueFormatter = defaultValueFormatter,
showAnimation = true,
marginTop = 'mt-0',
}: BarListProps) => {
const widths = getWidthsFromValues(data);
const rowHeight = sizing.threeXl.height;
return (
<div className={ classNames(
'tr-flex tr-justify-between',
parseMarginTop(marginTop),
spacing.threeXl.spaceX,
) }>
<div className="tr-relative tr-w-full">
{ data.map((item, idx) => (
<div
key={ item.value }
className={ classNames(
'tr-flex tr-items-center',
rowHeight,
getColorVariantsFromColorThemeValue(getColorTheme(color).lightBackground).bgColor,
borderRadius.sm.all,
idx === data.length - 1 ? spacing.none.marginBottom : spacing.sm.marginBottom,
) }
style={ { 'width': `${widths[idx]}%`, 'transition': showAnimation ? 'all 2s' : '' } }
>
<p className={ classNames(
'tr-absolute tr-max-w-full tr-whitespace-nowrap tr-truncate',
getColorVariantsFromColorThemeValue(defaultColors.darkText).textColor,
spacing.sm.left,
fontSize.sm,
) }>
{ item.name }
</p>
</div>
)) }
</div>
<div className="tr-text-right tr-min-w-min">
{ data.map((item, idx) => (
<div
key={ item.value }
className={ classNames(
'tr-flex tr-justify-end tr-items-center',
rowHeight,
idx === data.length - 1 ? spacing.none.marginBottom : spacing.sm.marginBottom,
) }
>
<p className={ classNames(
'tr-whitespace-nowrap tr-truncate',
getColorVariantsFromColorThemeValue(defaultColors.darkText).textColor,
fontSize.sm,
) }>
{ valueFormatter(item.value) }
</p>
</div>
)) }
</div>
</div>
);
};
export default BarList;