Skip to content

Commit f819859

Browse files
jogibear9988jogibear9988
committed
multiple fixes
1 parent 8208815 commit f819859

File tree

15 files changed

+223
-73
lines changed

15 files changed

+223
-73
lines changed

‎custom-elements.json‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,57 @@
5252
}
5353
}
5454
]
55+
},
56+
{
57+
"kind": "javascript-module",
58+
"path": "dist/tab/CssGaugeComponent.js",
59+
"declarations": [
60+
{
61+
"kind": "class",
62+
"name": "CssGaugeComponent",
63+
"members": [
64+
{
65+
"kind": "field",
66+
"name": "value",
67+
"type": {
68+
"text": "number"
69+
}
70+
},
71+
{
72+
"kind": "field",
73+
"name": "displayValue",
74+
"type": {
75+
"text": "number"
76+
}
77+
}
78+
],
79+
"attributes": [
80+
{
81+
"name": "value",
82+
"fieldName": "value"
83+
},
84+
{
85+
"name": "display-value",
86+
"fieldName": "displayValue"
87+
}
88+
],
89+
"superclass": {
90+
"name": "BaseCustomWebComponentConstructorAppend"
91+
},
92+
"tagName": "node-projects-css-gauge",
93+
"customElement": true
94+
}
95+
],
96+
"exports": [
97+
{
98+
"kind": "custom-element-definition",
99+
"name": "node-projects-css-gauge",
100+
"declaration": {
101+
"name": "CssGaugeComponent",
102+
"module": "dist/double-gauge/CssGaugeComponent.js"
103+
}
104+
}
105+
]
55106
}
56107
]
57108
}

‎sample/index.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,11 @@
1919
</script>
2020
</head>
2121
<body>
22-
<node-projects-gauge-js style="position: absolute; width: 300px; height: 300px;"></node-projects-gauge-js>
23-
<node-projects-css-gauge style="position: absolute; width: 300px; height: 300px; top: 400px;"></node-projects-css-gauge>
24-
<node-projects-double-gauge style="position: absolute; width: 300px; height: 300px; top: 800px;"></node-projects-double-gauge>
22+
<div style="display: flex; flex-wrap: wrap; gap: 30px;">
23+
<node-projects-gauge-js style="width: 300px; height: 300px;"></node-projects-gauge-js>
24+
<node-projects-css-gauge value="50" display-value="75" style="width: 300px; height: 300px;"></node-projects-css-gauge>
25+
<node-projects-css-gauge type="glossy" value="80" display-value="30" style="width: 300px; height: 300px;"></node-projects-css-gauge>
26+
<node-projects-double-gauge left-value="50" right-value="25" style="width: 300px; height: 300px;"></node-projects-double-gauge>
27+
</div>
2528
</body>
2629
</html>

‎src/canvas-gauges/Animation.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ let rules = {
5757
cycle: p => 1 - Math.sin(Math.acos(p)),
5858
decycle: p => Math.sin(Math.acos(1 - p)),
5959
bounce: p => 1 - rules.debounce(1 - p),
60+
//@ts-ignore
6061
debounce: p => {
6162
let a = 0, b = 1;
6263
for (; 1; a += b, b /= 2) {
@@ -181,6 +182,7 @@ export default class Animation {
181182
*
182183
* @type {number}
183184
*/
185+
//@ts-ignore
184186
this.duration = duration;
185187

186188
/**
@@ -191,27 +193,34 @@ export default class Animation {
191193
*
192194
* @type {string|AnimationRule}
193195
*/
196+
//@ts-ignore
194197
this.rule = rule;
195198

196199
/**
197200
* Callback function for the animation step draw event.
198201
*
199202
* @type {DrawEventCallback}
200203
*/
204+
//@ts-ignore
201205
this.draw = draw;
202206

203207
/**
204208
* Callback for the animation complete event.
205209
*
206210
* @type {EndEventCallback}
207211
*/
212+
//@ts-ignore
208213
this.end = end;
209214

215+
//@ts-ignore
210216
if (typeof this.draw !== 'function') {
217+
//@ts-ignore
211218
throw new TypeError('Invalid animation draw callback:', draw);
212219
}
213220

221+
//@ts-ignore
214222
if (typeof this.end !== 'function') {
223+
//@ts-ignore
215224
throw new TypeError('Invalid animation end callback:', end);
216225
}
217226
}
@@ -252,39 +261,52 @@ export default class Animation {
252261
* @param {EndEventCallback} [end]
253262
*/
254263
animate(draw, end) {
264+
//@ts-ignore
255265
this.frame && this.cancel();
256266

257267
// noinspection JSUnresolvedVariable
258268
const start = window.performance && window.performance.now ?
259269
window.performance.now() :
270+
//@ts-ignore
260271
(vendorize('animationStartTime') || Date.now());
261272

273+
//@ts-ignore
262274
draw = draw || this.draw;
275+
//@ts-ignore
263276
end = end || this.end;
264277

278+
//@ts-ignore
265279
this.draw = draw;
280+
//@ts-ignore
266281
this.end = end;
267282

268283
/**
269284
* Current requested animation frame identifier
270285
*
271286
* @type {number}
272287
*/
288+
//@ts-ignore
273289
this.frame = requestAnimationFrame(time =>
290+
//@ts-ignore
274291
step(time, draw, start, rules[this.rule] || this.rule,
292+
//@ts-ignore
275293
this.duration, end, this));
276294
}
277295

278296
/**
279297
* Cancels current animation if any
280298
*/
281299
cancel() {
300+
//@ts-ignore
282301
if (this.frame) {
302+
//@ts-ignore
283303
const cancelAnimationFrame = vendorize('cancelAnimationFrame') ||
284304
/* istanbul ignore next */
285305
((id) => {});
286306

307+
//@ts-ignore
287308
cancelAnimationFrame(this.frame);
309+
//@ts-ignore
288310
this.frame = null;
289311
}
290312
}
@@ -294,7 +316,9 @@ export default class Animation {
294316
*/
295317
destroy() {
296318
this.cancel();
319+
//@ts-ignore
297320
this.draw = null;
321+
//@ts-ignore
298322
this.end = null;
299323
}
300324
}
@@ -305,6 +329,7 @@ export default class Animation {
305329
* @type {AnimationRules}
306330
* @static
307331
*/
332+
//@ts-ignore
308333
Animation.rules = rules;
309334

310335
module.exports = Animation;

‎src/canvas-gauges/BaseGauge.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,9 @@ const EventEmitter = require('./EventEmitter');
3131

3232
const version = '%VERSION%';
3333

34+
//@ts-ignore
3435
const round = Math.round;
36+
//@ts-ignore
3537
const abs = Math.abs;
3638

3739
let gauges = new Collection();
@@ -150,6 +152,7 @@ export default class BaseGauge extends EventEmitter {
150152
*
151153
* @type {BaseGauge} type
152154
*/
155+
//@ts-ignore
153156
this.type = ns[className] || BaseGauge;
154157

155158
/**
@@ -187,8 +190,10 @@ export default class BaseGauge extends EventEmitter {
187190

188191
if (!options.width || !options.height) {
189192
if (!options.width) options.width = canvas.parentNode ?
193+
//@ts-ignore
190194
canvas.parentNode.offsetWidth : canvas.offsetWidth;
191195
if (!options.height) options.height = canvas.parentNode ?
196+
//@ts-ignore
192197
canvas.parentNode.offsetHeight : canvas.offsetHeight;
193198
}
194199

@@ -431,6 +436,7 @@ export default class BaseGauge extends EventEmitter {
431436
value = parseFloat(value);
432437

433438
if (isNaN(value) || !isFinite(value)) {
439+
//@ts-ignore
434440
value = parseFloat(min) || 0;
435441
}
436442

@@ -454,8 +460,11 @@ export default class BaseGauge extends EventEmitter {
454460
* @typedef {object} ns
455461
*/
456462
/* istanbul ignore if */
463+
//@ts-ignore
457464
if (typeof ns !== 'undefined') {
465+
//@ts-ignore
458466
ns['BaseGauge'] = BaseGauge;
467+
//@ts-ignore
459468
ns['gauges'] = (window.document || {})['gauges'] = gauges;
460469
}
461470

‎src/canvas-gauges/Collection.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
* @constructor
3333
*/
3434
export default function Collection () {
35+
//@ts-ignore
3536
Array.prototype.constructor.apply(this, arguments);
3637
}
3738

‎src/canvas-gauges/DomObserver.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
* @constructor
3333
*/
3434
export default function Collection () {
35+
//@ts-ignore
3536
Array.prototype.constructor.apply(this, arguments);
3637
}
3738

‎src/css-gauge/CssGaugeComponent.ts‎

Lines changed: 83 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,8 @@ export class CssGaugeComponent extends BaseCustomWebComponentConstructorAppend {
115115
.gauge .labels .value-label {
116116
position: relative;
117117
top: 75%;
118-
left: 50%;
119-
transform: translateX(-50%);
118+
display: flex;
119+
justify-content: center;
120120
}
121121
122122
.gauge .labels .value-label::after {
@@ -141,8 +141,70 @@ export class CssGaugeComponent extends BaseCustomWebComponentConstructorAppend {
141141
height: 1px;
142142
}`;
143143

144+
static readonly styleGlossy = css`
145+
.gauge-glossy {
146+
border: outset 4px #036564;
147+
background: rgb(64, 244, 118);
148+
background: linear-gradient(5deg, #033649, #036564);
149+
text-shadow: 2px 2px 5px #0d3b3e;
150+
}
151+
152+
.gauge-glossy .gauge {
153+
opacity: 0.9;
154+
border-color: #023332;
155+
background: linear-gradient(-155deg, #036564, #033649);
156+
color: rgb(46, 121, 114);
157+
}
158+
159+
.gauge-glossy p, .gauge-glossy h1 {
160+
font-size: 20px;
161+
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
162+
font-weight: 700;
163+
position: relative;
164+
color: #12937b;
165+
}
166+
167+
.gauge-glossy h1 {
168+
font-size: 30px;
169+
}
170+
171+
.gauge-glossy .gauge .labels .value-label {
172+
color: white;
173+
}
174+
175+
.gauge-glossy .gauge .needle {
176+
background: linear-gradient(90deg, rgba(2, 0, 36, 0) 0%, rgba(0, 0, 0, 0) 24%, rgba(255, 127, 80, 1) 24%, rgba(255, 127, 80, 1) 30%, rgba(0, 0, 0, 0) 50%);
177+
}
178+
179+
.gauge-glossy .gauge .needle .needle-head {
180+
background-color: rgb(255, 127, 80);
181+
}
182+
183+
.gauge-glossy .gauge .ticks::before {
184+
position: absolute;
185+
top: 4px;
186+
bottom: 8px;
187+
left: 4px;
188+
right: 8px;
189+
background: linear-gradient(174deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0), rgba(255, 0, 0, 0), rgba(255, 255, 255, .2));
190+
content: '';
191+
border-radius: 50%;
192+
}
193+
194+
.gauge-glossy .gauge .ticks::after {
195+
position: absolute;
196+
top: 2px;
197+
bottom: 2px;
198+
left: 2px;
199+
right: 2px;
200+
background: linear-gradient(-40deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0), rgba(255, 0, 0, 0), rgba(255, 0, 0, 0), rgba(255, 255, 255, .9));
201+
content: '';
202+
border-radius: 50%;
203+
z-index: 2;
204+
}`;
205+
144206
static override readonly template = html`
145-
<div id="exampleGauge" class="gauge" style=" --gauge-value:0; width:200px; height:200px;">
207+
<div class="gauge gauge-glossy" style="width:100%; height:100%;">
146208
<div class="ticks">
147209
<div class="tithe" style="--gauge-tithe-tick:1;"></div>
148210
<div class="tithe" style="--gauge-tithe-tick:2;"></div>
@@ -167,15 +229,31 @@ export class CssGaugeComponent extends BaseCustomWebComponentConstructorAppend {
167229

168230
static readonly is = "node-projects-css-gauge";
169231

232+
static readonly properties = {
233+
type: ['', 'glossy'],
234+
value: Number,
235+
displayValue: Number
236+
}
237+
238+
private _type: '' | 'glossy' = '';
239+
get type() { return this._type; }
240+
set type(value: '' | 'glossy') { this._type = value; this._type == '' ? this.shadowRoot.adoptedStyleSheets = [CssGaugeComponent.style] : this.shadowRoot.adoptedStyleSheets = [CssGaugeComponent.style, CssGaugeComponent.styleGlossy] }
241+
242+
private _value: number = 0;
243+
get value() { return this._value; }
244+
set value(value: number) { this._value = value; this.style.setProperty('--gauge-value', value.toString()); }
245+
246+
private _displayValue: number = 0;
247+
get displayValue() { return this._displayValue; }
248+
set displayValue(value: number) { this._displayValue = value; this.style.setProperty('--gauge-display-value', value.toString()); }
249+
170250
constructor() {
171251
super();
172252
this._restoreCachedInititalValues();
173253
}
174254

175255
ready() {
176256
this._parseAttributesToProperties();
177-
178-
179257
}
180258
}
181259

0 commit comments

Comments
 (0)