@1024pix/pix-ui 55.9.0 → 55.10.0
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.
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
xmlns:svg="http://www.w3.org/2000/svg"
|
|
3
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
+
viewBox={{this.viewBox}}
|
|
5
|
+
version="1.1"
|
|
6
|
+
preserveAspectRatio="none"
|
|
7
|
+
class="result-level-gauge {{if @isSmall 'result-level-gauge__small'}}"
|
|
8
|
+
role="progressbar"
|
|
9
|
+
aria-valuenow={{this.formatNumber this.reachedLevel}}
|
|
10
|
+
aria-valuemin={{0}}
|
|
11
|
+
aria-valuemax={{this.formatNumber this.maxLevel}}
|
|
12
|
+
aria-valuetext={{this.label}}
|
|
13
|
+
aria-label={{this.label}}
|
|
14
|
+
>
|
|
15
|
+
<title {{this.label}}></title>
|
|
16
|
+
|
|
17
|
+
{{! gauge grey background}}
|
|
18
|
+
<rect
|
|
19
|
+
y={{22}}
|
|
20
|
+
width="100%"
|
|
21
|
+
height={{this.backgroundHeight}}
|
|
22
|
+
rx={{this.greyGaugeRx}}
|
|
23
|
+
class="result-level-gauge__background"
|
|
24
|
+
/>
|
|
25
|
+
|
|
26
|
+
<g transform="translate(4, 0)">
|
|
27
|
+
{{! template-lint-disable no-inline-styles style-concatenation }}
|
|
28
|
+
{{! gauge white max level}}
|
|
29
|
+
<rect
|
|
30
|
+
y={{26}}
|
|
31
|
+
width="calc(calc(100% - 8px) * {{this.maxLevelPourcentage}})"
|
|
32
|
+
height={{this.whiteAndPurpleGaugesHeight}}
|
|
33
|
+
rx={{this.whiteAndPurpleGaugeRx}}
|
|
34
|
+
class="result-level-gauge__max-bar"
|
|
35
|
+
/>
|
|
36
|
+
{{#unless this.hideValues}}
|
|
37
|
+
<g style="transform: translate(calc(calc(100% - 8px) * {{this.maxLevelPourcentage}}))">
|
|
38
|
+
<text
|
|
39
|
+
y={{this.statsFontHeight}}
|
|
40
|
+
x="0"
|
|
41
|
+
dx={{-10}}
|
|
42
|
+
dy={{26}}
|
|
43
|
+
class="result-level-gauge__max-value"
|
|
44
|
+
aria-hidden={{this.hideValues}}
|
|
45
|
+
>{{this.formatNumber @maxLevel}}</text>
|
|
46
|
+
</g>
|
|
47
|
+
{{/unless}}
|
|
48
|
+
{{! mean purple level }}
|
|
49
|
+
<rect
|
|
50
|
+
y={{26}}
|
|
51
|
+
width="max(calc(calc(100% - 8px) * {{this.reachedLevelPercentage}}), 44px)"
|
|
52
|
+
height={{this.whiteAndPurpleGaugesHeight}}
|
|
53
|
+
rx={{this.whiteAndPurpleGaugeRx}}
|
|
54
|
+
class="result-level-gauge__mean-bar"
|
|
55
|
+
/>
|
|
56
|
+
{{#unless this.hideValues}}
|
|
57
|
+
<g
|
|
58
|
+
style="transform: translate(max(calc(calc(100% - 8px) * {{this.reachedLevelPercentage}}), 44px))"
|
|
59
|
+
>
|
|
60
|
+
<text
|
|
61
|
+
y={{this.statsFontHeight}}
|
|
62
|
+
x="0"
|
|
63
|
+
dx={{-10}}
|
|
64
|
+
dy={{26}}
|
|
65
|
+
class="result-level-gauge__mean-value"
|
|
66
|
+
aria-hidden={{this.hideValues}}
|
|
67
|
+
>{{this.formatNumber @reachedLevel}}</text>
|
|
68
|
+
</g>
|
|
69
|
+
{{/unless}}
|
|
70
|
+
{{! level labels }}
|
|
71
|
+
{{#unless @isSmall}}
|
|
72
|
+
{{#each @stepLabels as |stepLabel index|}}
|
|
73
|
+
<g style="transform: translate(calc(calc(100% - 8px) * {{this.stepLabelX index}}))">
|
|
74
|
+
<text
|
|
75
|
+
y={{15}}
|
|
76
|
+
class="result-level-gauge__rank
|
|
77
|
+
{{if (this.isLevelActive index) 'result-level-gauge__rank--active'}}"
|
|
78
|
+
>{{stepLabel}}</text>
|
|
79
|
+
</g>
|
|
80
|
+
{{#unless (eq index 0)}}
|
|
81
|
+
<g style="transform: translate(calc(100% * {{this.stepLineX index}}))">
|
|
82
|
+
<line
|
|
83
|
+
x1="0"
|
|
84
|
+
y1={{7}}
|
|
85
|
+
x2="0"
|
|
86
|
+
y2="74.6641"
|
|
87
|
+
stroke-width={{2}}
|
|
88
|
+
stroke-linecap="round"
|
|
89
|
+
stroke-dasharray="2 8"
|
|
90
|
+
class="result-level-gauge__separator"
|
|
91
|
+
role="separator"
|
|
92
|
+
/>
|
|
93
|
+
</g>
|
|
94
|
+
{{/unless}}
|
|
95
|
+
{{/each}}
|
|
96
|
+
{{/unless}}
|
|
97
|
+
</g>
|
|
98
|
+
</svg>
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { warn } from '@ember/debug';
|
|
2
|
+
import Component from '@glimmer/component';
|
|
3
|
+
export default class PixGauge extends Component {
|
|
4
|
+
get label() {
|
|
5
|
+
warn('PixGauge: @label must be defined', !this.args.label, {
|
|
6
|
+
id: 'pix-ui.gauge.label.not-defined',
|
|
7
|
+
});
|
|
8
|
+
return this.args.label;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
get reachedLevel() {
|
|
12
|
+
warn(
|
|
13
|
+
'PixGauge: @reachedLevel must be between 0 and 8',
|
|
14
|
+
this.args.reachedLevel <= 8 || this.args.reachedLevel >= 0,
|
|
15
|
+
{
|
|
16
|
+
id: 'pix-ui.gauge.reachedLevel.not-defined',
|
|
17
|
+
},
|
|
18
|
+
);
|
|
19
|
+
return this.args.reachedLevel;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
get maxLevel() {
|
|
23
|
+
warn(
|
|
24
|
+
'PixGauge: @maxLevel must be between 1 and 8',
|
|
25
|
+
this.args.maxLevel <= 8 || this.args.maxLevel >= 1,
|
|
26
|
+
{
|
|
27
|
+
id: 'pix-ui.gauge.maxLevel.not-defined',
|
|
28
|
+
},
|
|
29
|
+
);
|
|
30
|
+
return this.args.maxLevel;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
get hideValues() {
|
|
34
|
+
return this.args.hideValues ?? false;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
get maxLevelPourcentage() {
|
|
38
|
+
return this.maxLevel / 8;
|
|
39
|
+
}
|
|
40
|
+
get viewBox() {
|
|
41
|
+
if (this.args.isSmall) {
|
|
42
|
+
return '0 22 200 32';
|
|
43
|
+
}
|
|
44
|
+
return '0 0 100% 70';
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
get reachedLevelPercentage() {
|
|
48
|
+
return this.reachedLevel / 8;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
get whiteAndPurpleGaugeRx() {
|
|
52
|
+
return this.args.isSmall ? 12 : 20;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
get whiteAndPurpleGaugesHeight() {
|
|
56
|
+
return this.args.isSmall ? 24 : 40;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// background
|
|
60
|
+
get greyGaugeRx() {
|
|
61
|
+
return this.args.isSmall ? 16 : 24;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
get backgroundHeight() {
|
|
65
|
+
return this.args.isSmall ? 32 : 48;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
get statsFontHeight() {
|
|
69
|
+
return this.args.isSmall ? 18 : 26;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
isLevelActive = (index) => {
|
|
73
|
+
if (this.reachedLevel === 0 && index === 0) return true;
|
|
74
|
+
const step = 8 / this.args.stepLabels.length;
|
|
75
|
+
return index * step < this.reachedLevel && this.reachedLevel <= (index + 1) * step;
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
stepLabelX = (index) => {
|
|
79
|
+
const stepStart = 1 / this.args.stepLabels.length;
|
|
80
|
+
return `${stepStart * index + (1 / 2) * stepStart}`;
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
stepLineX = (index) => {
|
|
84
|
+
const stepStart = 1 / this.args.stepLabels.length;
|
|
85
|
+
return `${stepStart * index}`;
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
formatNumber = (str) => {
|
|
89
|
+
const num = Number(str);
|
|
90
|
+
const oneDigitNum = num.toFixed(1);
|
|
91
|
+
if (oneDigitNum.toString().endsWith('0')) {
|
|
92
|
+
return Math.ceil(oneDigitNum);
|
|
93
|
+
}
|
|
94
|
+
return oneDigitNum;
|
|
95
|
+
};
|
|
96
|
+
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
@use "pix-design-tokens/fonts";
|
|
2
|
+
@use "pix-design-tokens/typography";
|
|
3
|
+
|
|
4
|
+
.result-level-gauge {
|
|
5
|
+
display: block;
|
|
6
|
+
width: 100%;
|
|
7
|
+
height: 4.375rem;
|
|
8
|
+
margin-bottom: var(--pix-spacing-2x);
|
|
9
|
+
|
|
10
|
+
&__rank {
|
|
11
|
+
font-size: .625rem;
|
|
12
|
+
font-family: fonts.$font-roboto;
|
|
13
|
+
text-transform: uppercase;
|
|
14
|
+
fill: var(--pix-neutral-900);
|
|
15
|
+
text-anchor: middle;
|
|
16
|
+
|
|
17
|
+
&--active {
|
|
18
|
+
font-weight: var(--pix-font-bold);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&__mean-bar {
|
|
23
|
+
fill: var(--pix-primary-300);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&__max-bar {
|
|
27
|
+
fill: var(--pix-neutral-0);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&__background {
|
|
31
|
+
fill: rgba(var(--pix-neutral-900-inline), 0.1);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&__mean-value {
|
|
35
|
+
@extend %pix-body-l;
|
|
36
|
+
|
|
37
|
+
font-weight: var(--pix-font-bold);
|
|
38
|
+
fill: var(--pix-primary-10);
|
|
39
|
+
text-anchor: end;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&__max-value {
|
|
43
|
+
@extend %pix-body-l;
|
|
44
|
+
|
|
45
|
+
fill: var(--pix-neutral-800);
|
|
46
|
+
text-anchor: end;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&__separator {
|
|
50
|
+
transform: translate(-4px, 0);
|
|
51
|
+
stroke: var(--pix-primary-100);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// Modifier for small version of the gauge
|
|
55
|
+
&__small {
|
|
56
|
+
width: 200px;
|
|
57
|
+
height: 2rem;
|
|
58
|
+
|
|
59
|
+
&__mean-value {
|
|
60
|
+
font-weight: var(--pix-font-bold);
|
|
61
|
+
|
|
62
|
+
@extend %pix-body-s;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&__max-value {
|
|
66
|
+
@extend %pix-body-s;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
package/addon/styles/addon.scss
CHANGED