|
3 | 3 |  |
4 | 4 |  |
5 | 5 |
|
6 | | -[](https://github.com/semantic-release/semantic-release) |
7 | | - |
8 | | - |
| 6 | + |
| 7 | + |
| 8 | + |
9 | 9 | [](https://opensource.org/licenses/MIT) |
10 | 10 |
|
| 11 | +Display disc sectors, stats and more with this lightweight user-friendly React component.\ |
| 12 | +Now compatible with [Tailwind](https://tailwindcss.com/). |
| 13 | + |
11 | 14 | ## 🔌 Installation |
12 | 15 |
|
13 | 16 | Install via npm |
@@ -41,15 +44,23 @@ The usage bar needs to receive an array of items. In order to display all the va |
41 | 44 |
|
42 | 45 | ### Item type |
43 | 46 |
|
44 | | -| Attribute | Type | Required | |
45 | | -| --------- | ------ | -------- | |
46 | | -| value | number | Yes | |
47 | | -| name | string | Yes | |
48 | | -| color | string | No | |
| 47 | +| Attribute | Type | Required | | |
| 48 | +| ------------ | ------ | -------- | -------------------------------------------------------------------------------------- | |
| 49 | +| value | number | Yes | | |
| 50 | +| name | string | Yes | | |
| 51 | +| color | string | No | | |
| 52 | +| className | string | No |  | |
| 53 | +| dotClassName | string | No |  | |
| 54 | + |
| 55 | +The `value` attribute indicates the amount of space taken up by the sector with a specific `name`. The `color` property can be utilized to define the background color of that particular portion in the bar. |
| 56 | + |
| 57 | +To further customize the sector element, you can apply your own CSS classes or Tailwind classes using the `className` attribute. |
49 | 58 |
|
50 | | -The `value` represents the quantity of space occupied by the sector with a certain `name`. The `color` property could be used to specify the background color of that portion in the bar. |
| 59 | +In case you are using the **compact layout** and have not specified a `color` value, you can customize the `dotClassName` similarly to the `className` attribute. |
51 | 60 |
|
52 | | -The `total` value is also required. |
| 61 | +> The defined `color` property value will have a **priority on the background color** defined in the `className` and/or `dotClassName` ones.\ |
| 62 | +> <br /> |
| 63 | +> It is recommended to use **exclusively** `color` or one of the two other properties per item. |
53 | 64 |
|
54 | 65 | ### Example |
55 | 66 |
|
@@ -89,25 +100,57 @@ const App = () => { |
89 | 100 | export default App |
90 | 101 | ``` |
91 | 102 |
|
| 103 | +The `total` prop is also required. |
| 104 | + |
92 | 105 | <br> |
93 | 106 |
|
94 | 107 | ## Props (Options) |
95 | 108 |
|
96 | 109 | ### **showPercentage** | _boolean_ | default: `false` |
97 | 110 |
|
98 | | -When true shows the percentage value of all the elements. |
| 111 | +When true, shows the percentage value of all the elements. |
99 | 112 |
|
100 | | -### **removeLabels** | _boolean_ | default: `false` |
| 113 | +### **showLabels** | _boolean_ | default: `true` |
101 | 114 |
|
102 | | -When true hides all the tooltips or lables of the items. |
| 115 | +When false, hides all the tooltips or lables of the items. |
103 | 116 |
|
104 | 117 | ### **darkMode** | _boolean_ | default: `false` |
105 | 118 |
|
106 | | -Enables the component to work in dark-mode. |
| 119 | +When true, enables the component to work in dark-mode. |
107 | 120 |
|
108 | 121 | ### **compactLayout** | _boolean_ | default: `false` |
109 | 122 |
|
110 | | -The new compact design. _**Try it**_. |
| 123 | +When true, enables the new compact design. _**Try it**_. 😎 |
| 124 | + |
| 125 | +### **showFallbackColors** | _boolean_ | default: `false` |
| 126 | + |
| 127 | +When true, this feature dynamically assigns a random color to the background of any items where a value has not been specified |
| 128 | + |
| 129 | +### **errorMessage** | _string_ | default: `Error: Total elements values exceed 100%.` |
| 130 | + |
| 131 | +Customize the error string that appears when the total values of the provided items exceeds 100%. |
| 132 | + |
| 133 | +--- |
| 134 | + |
| 135 | +<br> |
| 136 | + |
| 137 | +**Custom classes props:** add custom or Tailwind classes to elements of the component. |
| 138 | + |
| 139 | +### **usageBarContainerClassName** | _string_ |
| 140 | + |
| 141 | +Can customize the main div of the component. |
| 142 | + |
| 143 | +### **usageBarClassName** | _string_ |
| 144 | + |
| 145 | +Can customize the actual bar element of the component. |
| 146 | + |
| 147 | +### **tooltipClassName** | _string_ |
| 148 | + |
| 149 | +Can customize the tooltip div of the item in which are written all the textual info. |
| 150 | + |
| 151 | +### **errorMessageClassName** | _string_ |
| 152 | + |
| 153 | +Can customize the style of the error message. |
111 | 154 |
|
112 | 155 | <br> |
113 | 156 |
|
@@ -156,7 +199,6 @@ The single item represented in the bar. This class is vastly used. |
156 | 199 | The tooltip of the item in which are written all the textual info. |
157 | 200 |
|
158 | 201 | - `.o-UsageBar__bar__tooltip__percentage` - Used to control the style of the percentage lables. |
159 | | - |
160 | 202 | - `::after` - Is used to make the triangular shape on the bottom (or top) of the tooltips. |
161 | 203 |
|
162 | 204 | ### `.o-UsageBar__bar__elements__labels__container` |
@@ -185,7 +227,8 @@ $ yarn storybook |
185 | 227 |
|
186 | 228 | ## Contribution |
187 | 229 |
|
188 | | -If you have a suggestion that would make this component better feel free to open a pull request or create an issue for any bug you find. |
| 230 | +If you have a suggestion that would make this component better feel free to fork the project and open a pull request or create an issue for any idea or bug you find.\ |
| 231 | +Remeber to follow the [Contributing Guidelines](https://github.com/ChrisUser/.github/blob/main/CONTRIBUTING.md). |
189 | 232 |
|
190 | 233 | <br> |
191 | 234 |
|
|
0 commit comments