Skip to content

Commit 7fd6e0c

Browse files
ChrisUserChrisUser
committed
Bump to v1.1.15
1 parent a4c2f58 commit 7fd6e0c

File tree

2 files changed

+99
-99
lines changed

2 files changed

+99
-99
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-usage-bar",
3-
"version": "1.1.14",
3+
"version": "1.1.15",
44
"description": "Usage bar, graphic component for React",
55
"main": "build/index.js",
66
"typings": "build/index.d.ts",

‎src/UsageBar.tsx‎

Lines changed: 98 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,31 @@ interface Props {
1616
compactLayout?: boolean
1717
}
1818

19+
const lightColors: string[] = [
20+
"#F72585",
21+
"#B5179E",
22+
"#7209B7",
23+
"#480CA8",
24+
"#4361EE",
25+
"#009688",
26+
"#FB8500",
27+
"#1B4332",
28+
"#795548",
29+
"#DC2F02",
30+
]
31+
const darkColors: string[] = [
32+
"#4CC9F0",
33+
"#FFB703",
34+
"#74C69D",
35+
"#FEE440",
36+
"#00F5D4",
37+
"#F15BB5",
38+
"#BD96EE",
39+
"#FF85A1",
40+
"#4AD66D",
41+
"#BEBFC4",
42+
]
43+
1944
const getPercentageValue = (value: number, total: number): string =>
2045
`${((value / total) * 100).toFixed(0)}%`
2146

@@ -29,37 +54,12 @@ const UsageBar: React.FC<Props> = ({
2954
}) => {
3055
const [formattedItems, setFormattedItems] = React.useState<Item[]>([])
3156

32-
const lightColors: string[] = [
33-
"#F72585",
34-
"#B5179E",
35-
"#7209B7",
36-
"#480CA8",
37-
"#4361EE",
38-
"#009688",
39-
"#FB8500",
40-
"#1B4332",
41-
"#795548",
42-
"#DC2F02",
43-
]
44-
const darkColors: string[] = [
45-
"#4CC9F0",
46-
"#FFB703",
47-
"#74C69D",
48-
"#FEE440",
49-
"#00F5D4",
50-
"#F15BB5",
51-
"#BD96EE",
52-
"#FF85A1",
53-
"#4AD66D",
54-
"#BEBFC4",
55-
]
56-
5757
/**
58-
* Checks if the total value is less than the sum of all the elements values.
58+
* Checks if the total value is equal or greater than the sum of all the elements values.
5959
*/
60-
const uncorrectValues = React.useMemo(
60+
const itemsValuesAreCorrect = React.useMemo(
6161
(): boolean =>
62-
total <
62+
total >=
6363
items.reduce((tot: number, element: Item) => tot + element.value, 0),
6464
[items, total]
6565
)
@@ -70,7 +70,7 @@ const UsageBar: React.FC<Props> = ({
7070
*/
7171
const formatItemsArray = React.useCallback(() => {
7272
const selectedColors: string[] = []
73-
const colorsToPickFrom = darkMode ? darkColors : lightColors
73+
const colorsToPickFrom = darkMode ? [...darkColors] : [...lightColors]
7474

7575
// For each element a random index is generated and then used to pick a value
7676
// from the colorsToPickFrom array; the selected value is removed by its original array
@@ -92,63 +92,28 @@ const UsageBar: React.FC<Props> = ({
9292
}, [items, darkMode])
9393

9494
React.useEffect(() => {
95-
if (uncorrectValues) return
96-
formatItemsArray()
97-
}, [items, uncorrectValues, formatItemsArray])
98-
99-
const renderUsageBar = () => {
100-
if (compactLayout) {
101-
return (
102-
<div
103-
className={`c-UsageBar c-UsageBar__compact ${
104-
darkMode ? "u-UsageBar-dark" : "u-UsageBar-light"
105-
}`}
106-
>
107-
<div className="o-UsageBar__bar o-UsageBar__compact__bar">
108-
{formattedItems.map((element: Item, index: number) => {
109-
return (
110-
<div
111-
key={index}
112-
className="o-UsageBar__bar__element"
113-
style={{
114-
width: getPercentageValue(element.value, total),
115-
backgroundColor: element.color,
116-
}}
117-
/>
118-
)
119-
})}
120-
</div>
121-
{!removeLabels && (
122-
<div className="o-UsageBar__bar__elements__labels__container">
123-
{formattedItems.map((element: Item, index: number) => {
124-
return (
125-
<div key={index} className="o-UsageBar__bar__elements__label">
126-
<div
127-
className="o-UsageBar__bar__elements__label--dot"
128-
style={{ backgroundColor: element.color }}
129-
/>
130-
<span>{element.name}</span>
131-
{showPercentage && (
132-
<span className="o-UsageBar__bar__tooltip__percentage">
133-
{getPercentageValue(element.value, total)}
134-
</span>
135-
)}
136-
</div>
137-
)
138-
})}
139-
</div>
140-
)}
141-
</div>
142-
)
95+
if (itemsValuesAreCorrect) {
96+
formatItemsArray()
14397
}
98+
}, [itemsValuesAreCorrect, formatItemsArray])
99+
100+
if (!itemsValuesAreCorrect)
101+
return (
102+
<span className="u-UsageBar__error">
103+
ERROR: Elements values exceed the total.
104+
</span>
105+
)
106+
107+
if (formattedItems.length === 0) return null
144108

109+
if (compactLayout) {
145110
return (
146111
<div
147-
className={`c-UsageBar ${
112+
className={`c-UsageBar c-UsageBar__compact ${
148113
darkMode ? "u-UsageBar-dark" : "u-UsageBar-light"
149114
}`}
150115
>
151-
<div className="o-UsageBar__bar">
116+
<div className="o-UsageBar__bar o-UsageBar__compact__bar">
152117
{formattedItems.map((element: Item, index: number) => {
153118
return (
154119
<div
@@ -158,32 +123,67 @@ const UsageBar: React.FC<Props> = ({
158123
width: getPercentageValue(element.value, total),
159124
backgroundColor: element.color,
160125
}}
161-
>
162-
{!removeLabels && (
163-
<div className="o-UsageBar__bar__tooltip">
164-
<span>{element.name}</span>
165-
{showPercentage && (
166-
<span className="o-UsageBar__bar__tooltip__percentage">
167-
{getPercentageValue(element.value, total)}
168-
</span>
169-
)}
170-
</div>
171-
)}
172-
</div>
126+
/>
173127
)
174128
})}
175129
</div>
130+
{!removeLabels && (
131+
<div className="o-UsageBar__bar__elements__labels__container">
132+
{formattedItems.map((element: Item, index: number) => {
133+
return (
134+
<div key={index} className="o-UsageBar__bar__elements__label">
135+
<div
136+
className="o-UsageBar__bar__elements__label--dot"
137+
style={{ backgroundColor: element.color }}
138+
/>
139+
<span>{element.name}</span>
140+
{showPercentage && (
141+
<span className="o-UsageBar__bar__tooltip__percentage">
142+
{getPercentageValue(element.value, total)}
143+
</span>
144+
)}
145+
</div>
146+
)
147+
})}
148+
</div>
149+
)}
176150
</div>
177151
)
178152
}
179153

180-
if (uncorrectValues)
181-
return (
182-
<span className="u-UsageBar__error">
183-
ERROR: Elements values exceed the total.
184-
</span>
185-
)
186-
return formattedItems.length > 0 ? renderUsageBar() : null
154+
return (
155+
<div
156+
className={`c-UsageBar ${
157+
darkMode ? "u-UsageBar-dark" : "u-UsageBar-light"
158+
}`}
159+
>
160+
<div className="o-UsageBar__bar">
161+
{formattedItems.map((element: Item, index: number) => {
162+
return (
163+
<div
164+
key={index}
165+
className="o-UsageBar__bar__element"
166+
style={{
167+
width: getPercentageValue(element.value, total),
168+
backgroundColor: element.color,
169+
}}
170+
>
171+
{!removeLabels && (
172+
<div className="o-UsageBar__bar__tooltip">
173+
<span>{element.name}</span>
174+
{showPercentage && (
175+
<span className="o-UsageBar__bar__tooltip__percentage">
176+
{getPercentageValue(element.value, total)}
177+
</span>
178+
)}
179+
</div>
180+
)}
181+
</div>
182+
)
183+
})}
184+
</div>
185+
</div>
186+
)
187187
}
188188

189189
export default UsageBar

0 commit comments

Comments
 (0)