-
Notifications
You must be signed in to change notification settings - Fork 25
/
Copy pathmeter-circle.js
75 lines (69 loc) · 2.51 KB
/
meter-circle.js
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
import '../colors/colors.js';
import { bodySmallStyles, bodyStandardStyles } from '../typography/styles.js';
import { css, html, LitElement, nothing } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { MeterMixin } from './meter-mixin.js';
import { meterStyles } from './meter-styles.js';
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
/**
* A circular progress indicator.
*/
class MeterCircle extends MeterMixin(RtlMixin(LitElement)) {
static get styles() {
return [ bodySmallStyles, bodyStandardStyles, meterStyles, css`
:host {
display: inline-block;
width: 2.4rem;
}
.d2l-meter-full-bar,
.d2l-meter-progress-bar {
stroke-width: 6;
}
.d2l-meter-full-bar {
fill: var(--d2l-meter-circle-fill, none);
}
.d2l-meter-circle-text {
font-size: 0.55rem;
}
` ];
}
render() {
const lengthOfLine = 21 * Math.PI * 2; // approximation perimeter of circle
const percent = this.max > 0 ? (this.value / this.max) : 0;
const visibility = (percent < 0.005) ? 'hidden' : 'visible';
const progressFill = percent * lengthOfLine;
const space = lengthOfLine - progressFill;
const dashOffset = 7 * Math.PI * 2 - 10; // approximation perimeter of circle divide by 3 subtract the rounded edges (5 pixels each)
const primary = this._primary(this.value, this.max) || '';
const primaryAria = this._primary(this.value, this.max, true) || '';
const secondaryAria = this._secondary(this.value, this.max, this.text, true);
const secondary = this._secondary(this.value, this.max, this.text);
const secondaryTextElement = this.text && !this.textHidden
? html`<div class="d2l-body-small d2l-meter-text">${secondary}</div>`
: nothing;
const textClasses = {
'd2l-meter-text-ltr': !this.percent,
'd2l-body-standard': true,
'd2l-meter-circle-text': true,
'd2l-meter-text': true
};
return html`
<div class="d2l-meter-container" aria-label="${this._ariaLabel(primaryAria, secondaryAria)}" role="img">
<svg viewBox="0 0 48 48" shape-rendering="geometricPrecision">
<circle class="d2l-meter-full-bar" cx="24" cy="24" r="21"></circle>
<circle
class="d2l-meter-progress-bar"
cx="24" cy="24" r="21"
stroke-dasharray="${progressFill} ${space}"
stroke-dashoffset="${dashOffset}"
visibility="${visibility}"></circle>
<text class=${classMap(textClasses)} x="24" y="28" text-anchor="middle">
${primary}
</text>
</svg>
${secondaryTextElement}
</div>
`;
}
}
customElements.define('d2l-meter-circle', MeterCircle);