argous 1.2.181 → 1.2.182
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/HalfGauge/HalfGauge.d.ts +82 -0
- package/dist/components/HalfGauge/HalfGauge.js +275 -0
- package/dist/components/HalfGauge/index.d.ts +2 -0
- package/dist/components/HalfGauge/index.js +8 -0
- package/lib/components/HalfGauge/HalfGauge.d.ts +82 -0
- package/lib/components/HalfGauge/HalfGauge.js +267 -0
- package/lib/components/HalfGauge/index.d.ts +2 -0
- package/lib/components/HalfGauge/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
export interface HalfGaugeProps {
|
|
2
|
+
/**
|
|
3
|
+
* Id do elemento
|
|
4
|
+
*/
|
|
5
|
+
id?: string,
|
|
6
|
+
/**
|
|
7
|
+
* Porcentagem
|
|
8
|
+
*/
|
|
9
|
+
percentage?: number,
|
|
10
|
+
/**
|
|
11
|
+
* Tamanho do componente
|
|
12
|
+
*/
|
|
13
|
+
size?: number,
|
|
14
|
+
/**
|
|
15
|
+
* Tamanho da fonte
|
|
16
|
+
*/
|
|
17
|
+
fontSize?: string,
|
|
18
|
+
/**
|
|
19
|
+
* Cor da fonte do texto
|
|
20
|
+
*/
|
|
21
|
+
color?: string,
|
|
22
|
+
/**
|
|
23
|
+
* Cor de fundo
|
|
24
|
+
*/
|
|
25
|
+
backgroundColor?: string,
|
|
26
|
+
/**
|
|
27
|
+
* Cor de fundo da barra
|
|
28
|
+
*/
|
|
29
|
+
barBackgroundColor?: string,
|
|
30
|
+
/**
|
|
31
|
+
* Tamanho responsivo
|
|
32
|
+
*/
|
|
33
|
+
responsive?: boolean,
|
|
34
|
+
/**
|
|
35
|
+
* Texto utilizado no medidor
|
|
36
|
+
*/
|
|
37
|
+
label?: string,
|
|
38
|
+
/**
|
|
39
|
+
* Ordenação do medidor
|
|
40
|
+
*/
|
|
41
|
+
order?: string,
|
|
42
|
+
/**
|
|
43
|
+
* Texto utilizado como mínimo
|
|
44
|
+
*/
|
|
45
|
+
min?: string,
|
|
46
|
+
/**
|
|
47
|
+
* Texto utilizado como máximo
|
|
48
|
+
*/
|
|
49
|
+
max?: string,
|
|
50
|
+
/**
|
|
51
|
+
* Cor do ponteiro indicador do medidor
|
|
52
|
+
*/
|
|
53
|
+
handColor?: string,
|
|
54
|
+
/**
|
|
55
|
+
* Largura das áreas laterais onde ficará o min e max
|
|
56
|
+
*/
|
|
57
|
+
minMaxWidth?: string,
|
|
58
|
+
/**
|
|
59
|
+
* Cor utilizada no meio do medidor
|
|
60
|
+
*/
|
|
61
|
+
middleColor?: string,
|
|
62
|
+
/**
|
|
63
|
+
* Cor utilizada entre o meio e a direita do medidor
|
|
64
|
+
*/
|
|
65
|
+
middleRightColor?: string,
|
|
66
|
+
/**
|
|
67
|
+
* Cor utilizada na direita do medidor
|
|
68
|
+
*/
|
|
69
|
+
rightColor?: string,
|
|
70
|
+
/**
|
|
71
|
+
* Cor utilizada na esquerda do medidor
|
|
72
|
+
*/
|
|
73
|
+
leftColor?: string,
|
|
74
|
+
/**
|
|
75
|
+
* Cor utilizada entre o meio e a esquerda do medidor
|
|
76
|
+
*/
|
|
77
|
+
middleLeftColor?: string,
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
declare function HalfGauge(props: HalfGaugeProps): JSX.Element
|
|
81
|
+
|
|
82
|
+
export default HalfGauge;
|
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
16
|
+
}) : (function(o, m, k, k2) {
|
|
17
|
+
if (k2 === undefined) k2 = k;
|
|
18
|
+
o[k2] = m[k];
|
|
19
|
+
}));
|
|
20
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
21
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
22
|
+
}) : function(o, v) {
|
|
23
|
+
o["default"] = v;
|
|
24
|
+
});
|
|
25
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
26
|
+
if (mod && mod.__esModule) return mod;
|
|
27
|
+
var result = {};
|
|
28
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
29
|
+
__setModuleDefault(result, mod);
|
|
30
|
+
return result;
|
|
31
|
+
};
|
|
32
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
33
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
34
|
+
};
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
var core_1 = require("@material-ui/core");
|
|
37
|
+
var clsx_1 = __importDefault(require("clsx"));
|
|
38
|
+
var lodash_1 = require("lodash");
|
|
39
|
+
var react_1 = __importStar(require("react"));
|
|
40
|
+
var ELLIPSIS_TEXT_STYLE = {
|
|
41
|
+
overflow: 'hidden',
|
|
42
|
+
whiteSpace: 'nowrap',
|
|
43
|
+
textOverflow: 'ellipsis'
|
|
44
|
+
};
|
|
45
|
+
var useStyles = core_1.makeStyles({
|
|
46
|
+
container: {
|
|
47
|
+
display: 'flex',
|
|
48
|
+
height: function (_a) {
|
|
49
|
+
var size = _a.size;
|
|
50
|
+
return size / 2 + "px";
|
|
51
|
+
},
|
|
52
|
+
transition: 'all .3s',
|
|
53
|
+
opacity: function (_a) {
|
|
54
|
+
var responsive = _a.responsive;
|
|
55
|
+
return responsive ? 0 : 1;
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
gauge: {
|
|
59
|
+
height: function (_a) {
|
|
60
|
+
var size = _a.size;
|
|
61
|
+
return size;
|
|
62
|
+
},
|
|
63
|
+
width: function (_a) {
|
|
64
|
+
var size = _a.size;
|
|
65
|
+
return size;
|
|
66
|
+
},
|
|
67
|
+
backgroundColor: function (_a) {
|
|
68
|
+
var barBackgroundColor = _a.barBackgroundColor;
|
|
69
|
+
return barBackgroundColor;
|
|
70
|
+
},
|
|
71
|
+
borderRadius: '50%',
|
|
72
|
+
display: 'grid',
|
|
73
|
+
placeItems: 'center',
|
|
74
|
+
webkitClipPath: 'polygon(0 0, 100% 0, 100% 51%, 0 51%)',
|
|
75
|
+
clipPath: 'polygon(0 0, 100% 0, 100% 51%, 0 51%)',
|
|
76
|
+
'&::before': {
|
|
77
|
+
content: '""',
|
|
78
|
+
position: 'absolute',
|
|
79
|
+
height: function (_a) {
|
|
80
|
+
var gaugeBarWidth = _a.gaugeBarWidth;
|
|
81
|
+
return gaugeBarWidth;
|
|
82
|
+
},
|
|
83
|
+
width: function (_a) {
|
|
84
|
+
var gaugeBarWidth = _a.gaugeBarWidth;
|
|
85
|
+
return gaugeBarWidth;
|
|
86
|
+
},
|
|
87
|
+
borderRadius: '50%',
|
|
88
|
+
backgroundColor: function (_a) {
|
|
89
|
+
var backgroundColor = _a.backgroundColor;
|
|
90
|
+
return backgroundColor;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
valueDiv: {
|
|
95
|
+
position: 'absolute',
|
|
96
|
+
color: function (_a) {
|
|
97
|
+
var color = _a.color;
|
|
98
|
+
return color;
|
|
99
|
+
},
|
|
100
|
+
fontSize: function (_a) {
|
|
101
|
+
var fontSize = _a.fontSize;
|
|
102
|
+
return fontSize;
|
|
103
|
+
},
|
|
104
|
+
maxWidth: function (_a) {
|
|
105
|
+
var size = _a.size;
|
|
106
|
+
return size / 2 + "px";
|
|
107
|
+
},
|
|
108
|
+
minWidth: function (_a) {
|
|
109
|
+
var size = _a.size;
|
|
110
|
+
return size / 2 + "px";
|
|
111
|
+
},
|
|
112
|
+
maxHeight: function (_a) {
|
|
113
|
+
var size = _a.size;
|
|
114
|
+
return size / 4 + "px";
|
|
115
|
+
},
|
|
116
|
+
minHeight: function (_a) {
|
|
117
|
+
var size = _a.size;
|
|
118
|
+
return size / 4 + "px";
|
|
119
|
+
},
|
|
120
|
+
transform: function (_a) {
|
|
121
|
+
var size = _a.size;
|
|
122
|
+
return "translateY(-" + (size / 4) / 2 + "px)";
|
|
123
|
+
},
|
|
124
|
+
display: 'flex',
|
|
125
|
+
flexDirection: 'column',
|
|
126
|
+
alignItems: 'center',
|
|
127
|
+
justifyContent: 'end',
|
|
128
|
+
overflow: 'hidden',
|
|
129
|
+
whiteSpace: 'nowrap',
|
|
130
|
+
padding: 4,
|
|
131
|
+
'&>p': __assign(__assign({}, ELLIPSIS_TEXT_STYLE), { margin: 0, width: '100%', textAlign: 'center', '&:first-child': {
|
|
132
|
+
fontWeight: 'bold'
|
|
133
|
+
} })
|
|
134
|
+
},
|
|
135
|
+
minMax: {
|
|
136
|
+
display: 'flex',
|
|
137
|
+
alignItems: 'end',
|
|
138
|
+
padding: '0 1rem',
|
|
139
|
+
width: function (_a) {
|
|
140
|
+
var minMaxWidth = _a.minMaxWidth;
|
|
141
|
+
return minMaxWidth;
|
|
142
|
+
},
|
|
143
|
+
color: function (_a) {
|
|
144
|
+
var color = _a.color;
|
|
145
|
+
return color;
|
|
146
|
+
},
|
|
147
|
+
fontSize: function (_a) {
|
|
148
|
+
var fontSize = _a.fontSize;
|
|
149
|
+
return fontSize;
|
|
150
|
+
},
|
|
151
|
+
'&>p': {
|
|
152
|
+
margin: 0
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
min: {
|
|
156
|
+
justifyContent: 'end'
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
var getHand = function (percentage, handColor) {
|
|
160
|
+
if (!lodash_1.isNumber(percentage))
|
|
161
|
+
return '';
|
|
162
|
+
var angle = 270;
|
|
163
|
+
if (percentage > 50) {
|
|
164
|
+
angle = 0;
|
|
165
|
+
percentage -= 50;
|
|
166
|
+
}
|
|
167
|
+
var initialTransparentAngle = angle;
|
|
168
|
+
angle = angle + (percentage * 1.8);
|
|
169
|
+
var finalTransparentAngle = angle + 2;
|
|
170
|
+
if (finalTransparentAngle > 90 && finalTransparentAngle < 270) {
|
|
171
|
+
finalTransparentAngle = 90;
|
|
172
|
+
}
|
|
173
|
+
return "conic-gradient(\n #0000 " + initialTransparentAngle + "deg " + (angle - 2) + "deg,\n " + handColor + " " + (angle - 0.5) + "deg " + (angle + 0.5) + "deg,\n #0000 " + finalTransparentAngle + "deg\n )";
|
|
174
|
+
};
|
|
175
|
+
var HalfGauge = function (_a) {
|
|
176
|
+
var _b = _a.responsive, responsive = _b === void 0 ? false : _b, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.label, label = _d === void 0 ? '' : _d, _e = _a.percentage, percentage = _e === void 0 ? 0 : _e, _f = _a.order, order = _f === void 0 ? 'D' : _f, _g = _a.min, min = _g === void 0 ? '' : _g, _h = _a.max, max = _h === void 0 ? '' : _h, _j = _a.size, size = _j === void 0 ? 200 : _j, _k = _a.fontSize, fontSize = _k === void 0 ? '0.9rem' : _k, _l = _a.color, color = _l === void 0 ? '#000' : _l, _m = _a.backgroundColor, backgroundColor = _m === void 0 ? '#fff' : _m, _o = _a.barBackgroundColor, barBackgroundColor = _o === void 0 ? '#0000' : _o, _p = _a.handColor, handColor = _p === void 0 ? '#fff' : _p, _q = _a.minMaxWidth, minMaxWidth = _q === void 0 ? '6rem' : _q, _r = _a.middleColor, middleColor = _r === void 0 ? '#ffdd71' : _r, _s = _a.middleRightColor, middleRightColor = _s === void 0 ? '#fec900' : _s, _t = _a.rightColor, rightColor = _t === void 0 ? '#00995d' : _t, _u = _a.leftColor, leftColor = _u === void 0 ? '#fe6c6c' : _u, _v = _a.middleLeftColor, middleLeftColor = _v === void 0 ? '#ff9b9b' : _v;
|
|
177
|
+
var gaugeBarWidth = size - (size / 2);
|
|
178
|
+
var classes = useStyles({ color: color, backgroundColor: backgroundColor, barBackgroundColor: barBackgroundColor, size: size, gaugeBarWidth: gaugeBarWidth, fontSize: fontSize, minMaxWidth: minMaxWidth, responsive: responsive });
|
|
179
|
+
var halfGaugeId = id + "-halfGauge";
|
|
180
|
+
var halfGaugeHandId = id + "-halfGaugeHand";
|
|
181
|
+
var halfGaugeContainerId = id + "-halfGaugeContainer";
|
|
182
|
+
var percentageText = percentage.toString().replace('.', ',') + "%";
|
|
183
|
+
var defaultColors = react_1.useMemo(function () { return ([middleColor, middleRightColor, rightColor, '#0000', leftColor, middleLeftColor]); }, [leftColor, middleColor, middleLeftColor, middleRightColor, rightColor]);
|
|
184
|
+
var gaugeBackgroundColors = react_1.useMemo(function () {
|
|
185
|
+
var colors = defaultColors;
|
|
186
|
+
if (order === 'A') {
|
|
187
|
+
var left = defaultColors[4];
|
|
188
|
+
var middleLeft = defaultColors[5];
|
|
189
|
+
var middleRight = defaultColors[1];
|
|
190
|
+
var right = defaultColors[2];
|
|
191
|
+
colors.splice(4, 1, right);
|
|
192
|
+
colors.splice(5, 1, middleRight);
|
|
193
|
+
colors.splice(1, 1, middleLeft);
|
|
194
|
+
colors.splice(2, 1, left);
|
|
195
|
+
}
|
|
196
|
+
return colors;
|
|
197
|
+
}, [defaultColors, order]);
|
|
198
|
+
var createStage = react_1.useCallback(function () {
|
|
199
|
+
var gaugeEl = document.getElementById(halfGaugeId);
|
|
200
|
+
if (!gaugeEl)
|
|
201
|
+
return;
|
|
202
|
+
gaugeEl.style.background = "conic-gradient(\n " + gaugeBackgroundColors[0] + " 18deg, \n " + gaugeBackgroundColors[1] + " 18deg 54deg,\n " + gaugeBackgroundColors[2] + " 54deg 90deg,\n " + gaugeBackgroundColors[3] + " 90deg 270deg,\n " + gaugeBackgroundColors[4] + " 270deg 306deg,\n " + gaugeBackgroundColors[5] + " 306deg 342deg,\n " + gaugeBackgroundColors[0] + " 342deg 360deg\n )";
|
|
203
|
+
}, [halfGaugeId, gaugeBackgroundColors]);
|
|
204
|
+
var createHand = react_1.useCallback(function () {
|
|
205
|
+
var hand = getHand(percentage, handColor);
|
|
206
|
+
var gaugeHandEl = document.getElementById(halfGaugeHandId);
|
|
207
|
+
if (!gaugeHandEl || !hand || (!gaugeHandEl && !hand))
|
|
208
|
+
return;
|
|
209
|
+
gaugeHandEl.style.background = hand;
|
|
210
|
+
}, [halfGaugeHandId, percentage, handColor]);
|
|
211
|
+
react_1.useEffect(function () {
|
|
212
|
+
createStage();
|
|
213
|
+
createHand();
|
|
214
|
+
}, [percentage, createStage, createHand]);
|
|
215
|
+
//__RESPONSIVE_SIZE___________________________________________________________________________________
|
|
216
|
+
var makeResponsive = react_1.useCallback(function () {
|
|
217
|
+
var _a;
|
|
218
|
+
if (!halfGaugeContainerId)
|
|
219
|
+
return;
|
|
220
|
+
var containerEl = document.getElementById(halfGaugeContainerId);
|
|
221
|
+
if (containerEl) {
|
|
222
|
+
var parentElClientRect = (_a = containerEl === null || containerEl === void 0 ? void 0 : containerEl.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
223
|
+
if (parentElClientRect) {
|
|
224
|
+
var parentWidth = parentElClientRect === null || parentElClientRect === void 0 ? void 0 : parentElClientRect.width;
|
|
225
|
+
var parentHeight = parentElClientRect === null || parentElClientRect === void 0 ? void 0 : parentElClientRect.height;
|
|
226
|
+
var scale = 1;
|
|
227
|
+
if (parentWidth < 88) {
|
|
228
|
+
scale = 0.2;
|
|
229
|
+
}
|
|
230
|
+
else if (parentWidth < 218) {
|
|
231
|
+
scale = 0.4;
|
|
232
|
+
}
|
|
233
|
+
else if (parentWidth < 346 && parentHeight < 49) {
|
|
234
|
+
scale = 0.5;
|
|
235
|
+
}
|
|
236
|
+
else if (parentWidth < 278 && parentHeight < 143) {
|
|
237
|
+
scale = 0.7;
|
|
238
|
+
}
|
|
239
|
+
else if (parentWidth < 278 && parentHeight < 250) {
|
|
240
|
+
scale = 0.7;
|
|
241
|
+
}
|
|
242
|
+
else if (parentWidth < 346 && parentHeight < 143) {
|
|
243
|
+
scale = 0.7;
|
|
244
|
+
}
|
|
245
|
+
else if (parentWidth < 475 && parentHeight < 49) {
|
|
246
|
+
scale = 0.5;
|
|
247
|
+
}
|
|
248
|
+
else if (parentWidth < 348) {
|
|
249
|
+
scale = 0.9;
|
|
250
|
+
}
|
|
251
|
+
containerEl.style.transform = "scale(" + scale + ")";
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
setTimeout(function () { return makeResponsive(); }, 500);
|
|
255
|
+
}, [halfGaugeContainerId]);
|
|
256
|
+
react_1.useEffect(function () { return responsive && makeResponsive(); }, [responsive, makeResponsive]);
|
|
257
|
+
var displayContainer = react_1.useCallback(function () {
|
|
258
|
+
var containerEl = document.getElementById(halfGaugeContainerId);
|
|
259
|
+
if (containerEl)
|
|
260
|
+
containerEl.style.opacity = 1;
|
|
261
|
+
}, [halfGaugeContainerId]);
|
|
262
|
+
react_1.useEffect(function () { return responsive && setTimeout(function () { return displayContainer(); }, 500); }, [responsive, displayContainer]);
|
|
263
|
+
//____________________________________________________________________________________________________
|
|
264
|
+
return react_1.default.createElement("div", { id: halfGaugeContainerId, className: classes.container },
|
|
265
|
+
react_1.default.createElement("div", { className: clsx_1.default(classes.minMax, classes.min) },
|
|
266
|
+
react_1.default.createElement("p", null, min)),
|
|
267
|
+
react_1.default.createElement("div", { id: halfGaugeId, className: classes.gauge },
|
|
268
|
+
react_1.default.createElement("div", { id: halfGaugeHandId, className: classes.gauge }),
|
|
269
|
+
react_1.default.createElement("div", { className: classes.valueDiv },
|
|
270
|
+
percentageText && react_1.default.createElement("p", null, percentageText),
|
|
271
|
+
label && react_1.default.createElement("p", null, label))),
|
|
272
|
+
react_1.default.createElement("div", { className: classes.minMax },
|
|
273
|
+
react_1.default.createElement("p", null, max)));
|
|
274
|
+
};
|
|
275
|
+
exports.default = HalfGauge;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var HalfGauge_1 = require("./HalfGauge");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(HalfGauge_1).default; } });
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
export interface HalfGaugeProps {
|
|
2
|
+
/**
|
|
3
|
+
* Id do elemento
|
|
4
|
+
*/
|
|
5
|
+
id?: string,
|
|
6
|
+
/**
|
|
7
|
+
* Porcentagem
|
|
8
|
+
*/
|
|
9
|
+
percentage?: number,
|
|
10
|
+
/**
|
|
11
|
+
* Tamanho do componente
|
|
12
|
+
*/
|
|
13
|
+
size?: number,
|
|
14
|
+
/**
|
|
15
|
+
* Tamanho da fonte
|
|
16
|
+
*/
|
|
17
|
+
fontSize?: string,
|
|
18
|
+
/**
|
|
19
|
+
* Cor da fonte do texto
|
|
20
|
+
*/
|
|
21
|
+
color?: string,
|
|
22
|
+
/**
|
|
23
|
+
* Cor de fundo
|
|
24
|
+
*/
|
|
25
|
+
backgroundColor?: string,
|
|
26
|
+
/**
|
|
27
|
+
* Cor de fundo da barra
|
|
28
|
+
*/
|
|
29
|
+
barBackgroundColor?: string,
|
|
30
|
+
/**
|
|
31
|
+
* Tamanho responsivo
|
|
32
|
+
*/
|
|
33
|
+
responsive?: boolean,
|
|
34
|
+
/**
|
|
35
|
+
* Texto utilizado no medidor
|
|
36
|
+
*/
|
|
37
|
+
label?: string,
|
|
38
|
+
/**
|
|
39
|
+
* Ordenação do medidor
|
|
40
|
+
*/
|
|
41
|
+
order?: string,
|
|
42
|
+
/**
|
|
43
|
+
* Texto utilizado como mínimo
|
|
44
|
+
*/
|
|
45
|
+
min?: string,
|
|
46
|
+
/**
|
|
47
|
+
* Texto utilizado como máximo
|
|
48
|
+
*/
|
|
49
|
+
max?: string,
|
|
50
|
+
/**
|
|
51
|
+
* Cor do ponteiro indicador do medidor
|
|
52
|
+
*/
|
|
53
|
+
handColor?: string,
|
|
54
|
+
/**
|
|
55
|
+
* Largura das áreas laterais onde ficará o min e max
|
|
56
|
+
*/
|
|
57
|
+
minMaxWidth?: string,
|
|
58
|
+
/**
|
|
59
|
+
* Cor utilizada no meio do medidor
|
|
60
|
+
*/
|
|
61
|
+
middleColor?: string,
|
|
62
|
+
/**
|
|
63
|
+
* Cor utilizada entre o meio e a direita do medidor
|
|
64
|
+
*/
|
|
65
|
+
middleRightColor?: string,
|
|
66
|
+
/**
|
|
67
|
+
* Cor utilizada na direita do medidor
|
|
68
|
+
*/
|
|
69
|
+
rightColor?: string,
|
|
70
|
+
/**
|
|
71
|
+
* Cor utilizada na esquerda do medidor
|
|
72
|
+
*/
|
|
73
|
+
leftColor?: string,
|
|
74
|
+
/**
|
|
75
|
+
* Cor utilizada entre o meio e a esquerda do medidor
|
|
76
|
+
*/
|
|
77
|
+
middleLeftColor?: string,
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
declare function HalfGauge(props: HalfGaugeProps): JSX.Element
|
|
81
|
+
|
|
82
|
+
export default HalfGauge;
|
|
@@ -0,0 +1,267 @@
|
|
|
1
|
+
import { makeStyles } from '@material-ui/core';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { isNumber } from 'lodash';
|
|
4
|
+
import React, { useCallback, useEffect, useMemo } from 'react';
|
|
5
|
+
|
|
6
|
+
const ELLIPSIS_TEXT_STYLE = {
|
|
7
|
+
overflow: 'hidden',
|
|
8
|
+
whiteSpace: 'nowrap',
|
|
9
|
+
textOverflow: 'ellipsis'
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
const useStyles = makeStyles({
|
|
13
|
+
container: {
|
|
14
|
+
display: 'flex',
|
|
15
|
+
height: ({ size }) => `${size / 2}px`,
|
|
16
|
+
transition: 'all .3s',
|
|
17
|
+
opacity: ({ responsive }) => responsive ? 0 : 1
|
|
18
|
+
},
|
|
19
|
+
gauge: {
|
|
20
|
+
height: ({ size }) => size,
|
|
21
|
+
width: ({ size }) => size,
|
|
22
|
+
backgroundColor: ({ barBackgroundColor }) => barBackgroundColor,
|
|
23
|
+
borderRadius: '50%',
|
|
24
|
+
display: 'grid',
|
|
25
|
+
placeItems: 'center',
|
|
26
|
+
webkitClipPath: 'polygon(0 0, 100% 0, 100% 51%, 0 51%)',
|
|
27
|
+
clipPath: 'polygon(0 0, 100% 0, 100% 51%, 0 51%)',
|
|
28
|
+
'&::before': {
|
|
29
|
+
content: '""',
|
|
30
|
+
position: 'absolute',
|
|
31
|
+
height: ({ gaugeBarWidth }) => gaugeBarWidth,
|
|
32
|
+
width: ({ gaugeBarWidth }) => gaugeBarWidth,
|
|
33
|
+
borderRadius: '50%',
|
|
34
|
+
backgroundColor: ({ backgroundColor }) => backgroundColor
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
valueDiv: {
|
|
38
|
+
position: 'absolute',
|
|
39
|
+
color: ({ color }) => color,
|
|
40
|
+
fontSize: ({ fontSize }) => fontSize,
|
|
41
|
+
maxWidth: ({ size }) => `${size / 2}px`,
|
|
42
|
+
minWidth: ({ size }) => `${size / 2}px`,
|
|
43
|
+
maxHeight: ({ size }) => `${size / 4}px`,
|
|
44
|
+
minHeight: ({ size }) => `${size / 4}px`,
|
|
45
|
+
transform: ({ size }) => `translateY(-${(size / 4) / 2}px)`,
|
|
46
|
+
display: 'flex',
|
|
47
|
+
flexDirection: 'column',
|
|
48
|
+
alignItems: 'center',
|
|
49
|
+
justifyContent: 'end',
|
|
50
|
+
overflow: 'hidden',
|
|
51
|
+
whiteSpace: 'nowrap',
|
|
52
|
+
padding: 4,
|
|
53
|
+
'&>p': {
|
|
54
|
+
...ELLIPSIS_TEXT_STYLE,
|
|
55
|
+
margin: 0,
|
|
56
|
+
width: '100%',
|
|
57
|
+
textAlign: 'center',
|
|
58
|
+
'&:first-child': {
|
|
59
|
+
fontWeight: 'bold'
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
minMax: {
|
|
64
|
+
display: 'flex',
|
|
65
|
+
alignItems: 'end',
|
|
66
|
+
padding: '0 1rem',
|
|
67
|
+
width: ({ minMaxWidth }) => minMaxWidth,
|
|
68
|
+
color: ({ color }) => color,
|
|
69
|
+
fontSize: ({ fontSize }) => fontSize,
|
|
70
|
+
'&>p': {
|
|
71
|
+
margin: 0
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
min: {
|
|
75
|
+
justifyContent: 'end'
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
const getHand = (percentage, handColor) => {
|
|
81
|
+
if (!isNumber(percentage)) return '';
|
|
82
|
+
|
|
83
|
+
let angle = 270;
|
|
84
|
+
|
|
85
|
+
if (percentage > 50) {
|
|
86
|
+
angle = 0;
|
|
87
|
+
percentage -= 50;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
const initialTransparentAngle = angle;
|
|
91
|
+
|
|
92
|
+
angle = angle + (percentage * 1.8);
|
|
93
|
+
|
|
94
|
+
let finalTransparentAngle = angle + 2;
|
|
95
|
+
|
|
96
|
+
if (finalTransparentAngle > 90 && finalTransparentAngle < 270) {
|
|
97
|
+
finalTransparentAngle = 90;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
return `conic-gradient(
|
|
101
|
+
#0000 ${initialTransparentAngle}deg ${angle - 2}deg,
|
|
102
|
+
${handColor} ${angle - 0.5}deg ${angle + 0.5}deg,
|
|
103
|
+
#0000 ${finalTransparentAngle}deg
|
|
104
|
+
)`;
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
const HalfGauge = ({
|
|
109
|
+
responsive = false,
|
|
110
|
+
id = '',
|
|
111
|
+
label = '',
|
|
112
|
+
percentage = 0,
|
|
113
|
+
order = 'D',
|
|
114
|
+
min = '',
|
|
115
|
+
max = '',
|
|
116
|
+
size = 200,
|
|
117
|
+
fontSize = '0.9rem',
|
|
118
|
+
color = '#000',
|
|
119
|
+
backgroundColor = '#fff',
|
|
120
|
+
barBackgroundColor = '#0000',
|
|
121
|
+
handColor = '#fff',
|
|
122
|
+
minMaxWidth = '6rem',
|
|
123
|
+
middleColor = '#ffdd71',
|
|
124
|
+
middleRightColor = '#fec900',
|
|
125
|
+
rightColor = '#00995d',
|
|
126
|
+
leftColor = '#fe6c6c',
|
|
127
|
+
middleLeftColor = '#ff9b9b'
|
|
128
|
+
}) => {
|
|
129
|
+
|
|
130
|
+
const gaugeBarWidth = size - (size / 2);
|
|
131
|
+
const classes = useStyles({ color, backgroundColor, barBackgroundColor, size, gaugeBarWidth, fontSize, minMaxWidth, responsive });
|
|
132
|
+
|
|
133
|
+
const halfGaugeId = `${id}-halfGauge`;
|
|
134
|
+
const halfGaugeHandId = `${id}-halfGaugeHand`;
|
|
135
|
+
const halfGaugeContainerId = `${id}-halfGaugeContainer`;
|
|
136
|
+
const percentageText = `${percentage.toString().replace('.', ',')}%`;
|
|
137
|
+
|
|
138
|
+
const defaultColors = useMemo(() => (
|
|
139
|
+
[middleColor, middleRightColor, rightColor, '#0000', leftColor, middleLeftColor]
|
|
140
|
+
), [leftColor, middleColor, middleLeftColor, middleRightColor, rightColor]);
|
|
141
|
+
|
|
142
|
+
const gaugeBackgroundColors = useMemo(() => {
|
|
143
|
+
let colors = defaultColors;
|
|
144
|
+
|
|
145
|
+
if (order === 'A') {
|
|
146
|
+
const left = defaultColors[4];
|
|
147
|
+
const middleLeft = defaultColors[5];
|
|
148
|
+
const middleRight = defaultColors[1];
|
|
149
|
+
const right = defaultColors[2];
|
|
150
|
+
|
|
151
|
+
colors.splice(4, 1, right);
|
|
152
|
+
colors.splice(5, 1, middleRight);
|
|
153
|
+
colors.splice(1, 1, middleLeft);
|
|
154
|
+
colors.splice(2, 1, left);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
return colors;
|
|
158
|
+
}, [defaultColors, order]);
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
const createStage = useCallback(() => {
|
|
162
|
+
const gaugeEl = document.getElementById(halfGaugeId);
|
|
163
|
+
if (!gaugeEl) return;
|
|
164
|
+
|
|
165
|
+
gaugeEl.style.background = `conic-gradient(
|
|
166
|
+
${gaugeBackgroundColors[0]} 18deg,
|
|
167
|
+
${gaugeBackgroundColors[1]} 18deg 54deg,
|
|
168
|
+
${gaugeBackgroundColors[2]} 54deg 90deg,
|
|
169
|
+
${gaugeBackgroundColors[3]} 90deg 270deg,
|
|
170
|
+
${gaugeBackgroundColors[4]} 270deg 306deg,
|
|
171
|
+
${gaugeBackgroundColors[5]} 306deg 342deg,
|
|
172
|
+
${gaugeBackgroundColors[0]} 342deg 360deg
|
|
173
|
+
)`;
|
|
174
|
+
|
|
175
|
+
}, [halfGaugeId, gaugeBackgroundColors]);
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
const createHand = useCallback(() => {
|
|
179
|
+
const hand = getHand(percentage, handColor);
|
|
180
|
+
const gaugeHandEl = document.getElementById(halfGaugeHandId);
|
|
181
|
+
if (!gaugeHandEl || !hand || (!gaugeHandEl && !hand)) return;
|
|
182
|
+
|
|
183
|
+
gaugeHandEl.style.background = hand;
|
|
184
|
+
}, [halfGaugeHandId, percentage, handColor]);
|
|
185
|
+
|
|
186
|
+
useEffect(() => {
|
|
187
|
+
createStage();
|
|
188
|
+
createHand();
|
|
189
|
+
}, [percentage, createStage, createHand]);
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
//__RESPONSIVE_SIZE___________________________________________________________________________________
|
|
193
|
+
|
|
194
|
+
const makeResponsive = useCallback(() => {
|
|
195
|
+
if (!halfGaugeContainerId) return;
|
|
196
|
+
|
|
197
|
+
const containerEl = document.getElementById(halfGaugeContainerId);
|
|
198
|
+
|
|
199
|
+
if (containerEl) {
|
|
200
|
+
|
|
201
|
+
const parentElClientRect = containerEl?.parentElement?.getBoundingClientRect();
|
|
202
|
+
|
|
203
|
+
if (parentElClientRect) {
|
|
204
|
+
|
|
205
|
+
const parentWidth = parentElClientRect?.width;
|
|
206
|
+
const parentHeight = parentElClientRect?.height;
|
|
207
|
+
|
|
208
|
+
let scale = 1;
|
|
209
|
+
|
|
210
|
+
if (parentWidth < 88) {
|
|
211
|
+
scale = 0.2;
|
|
212
|
+
} else if (parentWidth < 218) {
|
|
213
|
+
scale = 0.4;
|
|
214
|
+
} else if (parentWidth < 346 && parentHeight < 49) {
|
|
215
|
+
scale = 0.5;
|
|
216
|
+
} else if (parentWidth < 278 && parentHeight < 143) {
|
|
217
|
+
scale = 0.7;
|
|
218
|
+
} else if (parentWidth < 278 && parentHeight < 250) {
|
|
219
|
+
scale = 0.7;
|
|
220
|
+
} else if (parentWidth < 346 && parentHeight < 143) {
|
|
221
|
+
scale = 0.7;
|
|
222
|
+
} else if (parentWidth < 475 && parentHeight < 49) {
|
|
223
|
+
scale = 0.5;
|
|
224
|
+
} else if (parentWidth < 348) {
|
|
225
|
+
scale = 0.9;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
containerEl.style.transform = `scale(${scale})`;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
setTimeout(() => makeResponsive(), 500);
|
|
233
|
+
}, [halfGaugeContainerId]);
|
|
234
|
+
useEffect(() => responsive && makeResponsive(), [responsive, makeResponsive]);
|
|
235
|
+
|
|
236
|
+
|
|
237
|
+
const displayContainer = useCallback(() => {
|
|
238
|
+
const containerEl = document.getElementById(halfGaugeContainerId);
|
|
239
|
+
if (containerEl) containerEl.style.opacity = 1;
|
|
240
|
+
}, [halfGaugeContainerId]);
|
|
241
|
+
useEffect(() => responsive && setTimeout(() => displayContainer(), 500), [responsive, displayContainer]);
|
|
242
|
+
|
|
243
|
+
//____________________________________________________________________________________________________
|
|
244
|
+
|
|
245
|
+
|
|
246
|
+
return <div id={halfGaugeContainerId} className={classes.container}>
|
|
247
|
+
<div className={clsx(classes.minMax, classes.min)}>
|
|
248
|
+
<p>
|
|
249
|
+
{min}
|
|
250
|
+
</p>
|
|
251
|
+
</div>
|
|
252
|
+
<div id={halfGaugeId} className={classes.gauge}>
|
|
253
|
+
<div id={halfGaugeHandId} className={classes.gauge} />
|
|
254
|
+
<div className={classes.valueDiv}>
|
|
255
|
+
{percentageText && <p>{percentageText}</p>}
|
|
256
|
+
{label && <p>{label}</p>}
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
259
|
+
<div className={classes.minMax}>
|
|
260
|
+
<p>
|
|
261
|
+
{max}
|
|
262
|
+
</p>
|
|
263
|
+
</div>
|
|
264
|
+
</div>;
|
|
265
|
+
};
|
|
266
|
+
|
|
267
|
+
export default HalfGauge;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './HalfGauge';
|