@coorpacademy/components 11.32.0 → 11.32.1-alpha.19
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/es/atom/button-link/index.d.ts +1 -0
- package/es/atom/button-link/index.d.ts.map +1 -1
- package/es/atom/button-link/index.js +6 -5
- package/es/atom/button-link/index.js.map +1 -1
- package/es/atom/button-link/types.d.ts +3 -0
- package/es/atom/button-link/types.d.ts.map +1 -1
- package/es/atom/button-link/types.js +1 -0
- package/es/atom/button-link/types.js.map +1 -1
- package/es/atom/chip/index.d.ts +1 -1
- package/es/atom/chip/index.d.ts.map +1 -1
- package/es/atom/chip/index.js +2 -6
- package/es/atom/chip/index.js.map +1 -1
- package/es/atom/chip/style.css +2 -2
- package/es/atom/icon/index.d.ts +1 -1
- package/es/atom/icon/index.d.ts.map +1 -1
- package/es/atom/icon/index.js +6 -4
- package/es/atom/icon/index.js.map +1 -1
- package/es/molecule/base-modal/index.d.ts +33 -0
- package/es/molecule/base-modal/index.d.ts.map +1 -0
- package/es/molecule/base-modal/index.js +142 -0
- package/es/molecule/base-modal/index.js.map +1 -0
- package/es/molecule/base-modal/style.css +125 -0
- package/es/molecule/cm-popin/types.d.ts +2 -0
- package/es/molecule/cm-popin/types.d.ts.map +1 -1
- package/es/molecule/expandible-actionable-table/index.d.ts +1 -0
- package/es/molecule/expandible-actionable-table/index.d.ts.map +1 -1
- package/es/molecule/expandible-actionable-table/types.d.ts +1 -0
- package/es/molecule/expandible-actionable-table/types.d.ts.map +1 -1
- package/es/molecule/learner-skill-card/index.d.ts +2 -0
- package/es/molecule/learner-skill-card/index.d.ts.map +1 -1
- package/es/molecule/learner-skill-card/index.js +9 -4
- package/es/molecule/learner-skill-card/index.js.map +1 -1
- package/es/molecule/learning-profile-radar-chart/index.d.ts +1 -1
- package/es/molecule/learning-profile-radar-chart/index.d.ts.map +1 -1
- package/es/molecule/learning-profile-radar-chart/index.js +20 -11
- package/es/molecule/learning-profile-radar-chart/index.js.map +1 -1
- package/es/molecule/learning-profile-radar-chart/types.d.ts +7 -1
- package/es/molecule/learning-profile-radar-chart/types.d.ts.map +1 -1
- package/es/molecule/learning-profile-radar-chart/types.js.map +1 -1
- package/es/molecule/skill-picker-modal/index.d.ts +23 -0
- package/es/molecule/skill-picker-modal/index.d.ts.map +1 -0
- package/es/molecule/skill-picker-modal/index.js +138 -0
- package/es/molecule/skill-picker-modal/index.js.map +1 -0
- package/es/molecule/skill-picker-modal/style.css +28 -0
- package/es/molecule/skills-chart-side-information-item/index.d.ts +1 -1
- package/es/molecule/skills-chart-side-information-item/index.js +1 -1
- package/es/molecule/skills-chart-side-information-item/index.js.map +1 -1
- package/es/molecule/skills-chart-side-information-panel/index.d.ts +1 -1
- package/es/molecule/skills-chart-side-information-panel/style.css +18 -9
- package/es/organism/list-items/index.d.ts +2 -0
- package/es/organism/setup-header/index.d.ts +4 -0
- package/es/organism/wizard-contents/index.d.ts +3 -0
- package/es/template/app-player/loading/index.d.ts +2 -0
- package/es/template/app-player/player/index.d.ts +4 -0
- package/es/template/app-player/player/slides/index.d.ts +2 -0
- package/es/template/app-player/player/slides/index.d.ts.map +1 -1
- package/es/template/app-player/popin-correction/index.d.ts +2 -0
- package/es/template/app-player/popin-correction/index.d.ts.map +1 -1
- package/es/template/app-player/popin-end/index.d.ts +2 -0
- package/es/template/app-review/index.d.ts +2 -0
- package/es/template/app-review/index.d.ts.map +1 -1
- package/es/template/app-review/player/prop-types.d.ts +2 -0
- package/es/template/app-review/player/prop-types.d.ts.map +1 -1
- package/es/template/app-review/prop-types.d.ts +2 -0
- package/es/template/app-review/prop-types.d.ts.map +1 -1
- package/es/template/back-office/brand-create/index.d.ts +4 -0
- package/es/template/back-office/brand-create/index.d.ts.map +1 -1
- package/es/template/back-office/brand-list/index.d.ts +4 -0
- package/es/template/back-office/brand-list/index.d.ts.map +1 -1
- package/es/template/back-office/brand-update/index.d.ts +11 -0
- package/es/template/back-office/dashboard-preview/index.d.ts +4 -0
- package/es/template/back-office/layout/index.d.ts +4 -0
- package/es/template/back-office/layout/index.d.ts.map +1 -1
- package/es/template/common/dashboard/index.d.ts +4 -0
- package/es/template/common/search-page/index.d.ts +2 -0
- package/es/template/external-course/index.d.ts +2 -0
- package/es/template/my-learning/index.d.ts +34 -0
- package/es/template/my-learning/index.d.ts.map +1 -0
- package/es/template/my-learning/index.js +352 -0
- package/es/template/my-learning/index.js.map +1 -0
- package/es/template/my-learning/style.css +196 -0
- package/lib/atom/button-link/index.d.ts +1 -0
- package/lib/atom/button-link/index.d.ts.map +1 -1
- package/lib/atom/button-link/index.js +6 -5
- package/lib/atom/button-link/index.js.map +1 -1
- package/lib/atom/button-link/types.d.ts +3 -0
- package/lib/atom/button-link/types.d.ts.map +1 -1
- package/lib/atom/button-link/types.js +1 -0
- package/lib/atom/button-link/types.js.map +1 -1
- package/lib/atom/chip/index.d.ts +1 -1
- package/lib/atom/chip/index.d.ts.map +1 -1
- package/lib/atom/chip/index.js +3 -6
- package/lib/atom/chip/index.js.map +1 -1
- package/lib/atom/chip/style.css +2 -2
- package/lib/atom/icon/index.d.ts +1 -1
- package/lib/atom/icon/index.d.ts.map +1 -1
- package/lib/atom/icon/index.js +6 -4
- package/lib/atom/icon/index.js.map +1 -1
- package/lib/molecule/base-modal/index.d.ts +33 -0
- package/lib/molecule/base-modal/index.d.ts.map +1 -0
- package/lib/molecule/base-modal/index.js +158 -0
- package/lib/molecule/base-modal/index.js.map +1 -0
- package/lib/molecule/base-modal/style.css +125 -0
- package/lib/molecule/cm-popin/types.d.ts +2 -0
- package/lib/molecule/cm-popin/types.d.ts.map +1 -1
- package/lib/molecule/expandible-actionable-table/index.d.ts +1 -0
- package/lib/molecule/expandible-actionable-table/index.d.ts.map +1 -1
- package/lib/molecule/expandible-actionable-table/types.d.ts +1 -0
- package/lib/molecule/expandible-actionable-table/types.d.ts.map +1 -1
- package/lib/molecule/learner-skill-card/index.d.ts +2 -0
- package/lib/molecule/learner-skill-card/index.d.ts.map +1 -1
- package/lib/molecule/learner-skill-card/index.js +9 -4
- package/lib/molecule/learner-skill-card/index.js.map +1 -1
- package/lib/molecule/learning-profile-radar-chart/index.d.ts +1 -1
- package/lib/molecule/learning-profile-radar-chart/index.d.ts.map +1 -1
- package/lib/molecule/learning-profile-radar-chart/index.js +20 -11
- package/lib/molecule/learning-profile-radar-chart/index.js.map +1 -1
- package/lib/molecule/learning-profile-radar-chart/types.d.ts +7 -1
- package/lib/molecule/learning-profile-radar-chart/types.d.ts.map +1 -1
- package/lib/molecule/learning-profile-radar-chart/types.js.map +1 -1
- package/lib/molecule/skill-picker-modal/index.d.ts +23 -0
- package/lib/molecule/skill-picker-modal/index.d.ts.map +1 -0
- package/lib/molecule/skill-picker-modal/index.js +156 -0
- package/lib/molecule/skill-picker-modal/index.js.map +1 -0
- package/lib/molecule/skill-picker-modal/style.css +28 -0
- package/lib/molecule/skills-chart-side-information-item/index.d.ts +1 -1
- package/lib/molecule/skills-chart-side-information-item/index.js +1 -1
- package/lib/molecule/skills-chart-side-information-item/index.js.map +1 -1
- package/lib/molecule/skills-chart-side-information-panel/index.d.ts +1 -1
- package/lib/molecule/skills-chart-side-information-panel/style.css +18 -9
- package/lib/organism/list-items/index.d.ts +2 -0
- package/lib/organism/setup-header/index.d.ts +4 -0
- package/lib/organism/wizard-contents/index.d.ts +3 -0
- package/lib/template/app-player/loading/index.d.ts +2 -0
- package/lib/template/app-player/player/index.d.ts +4 -0
- package/lib/template/app-player/player/slides/index.d.ts +2 -0
- package/lib/template/app-player/player/slides/index.d.ts.map +1 -1
- package/lib/template/app-player/popin-correction/index.d.ts +2 -0
- package/lib/template/app-player/popin-correction/index.d.ts.map +1 -1
- package/lib/template/app-player/popin-end/index.d.ts +2 -0
- package/lib/template/app-review/index.d.ts +2 -0
- package/lib/template/app-review/index.d.ts.map +1 -1
- package/lib/template/app-review/player/prop-types.d.ts +2 -0
- package/lib/template/app-review/player/prop-types.d.ts.map +1 -1
- package/lib/template/app-review/prop-types.d.ts +2 -0
- package/lib/template/app-review/prop-types.d.ts.map +1 -1
- package/lib/template/back-office/brand-create/index.d.ts +4 -0
- package/lib/template/back-office/brand-create/index.d.ts.map +1 -1
- package/lib/template/back-office/brand-list/index.d.ts +4 -0
- package/lib/template/back-office/brand-list/index.d.ts.map +1 -1
- package/lib/template/back-office/brand-update/index.d.ts +11 -0
- package/lib/template/back-office/dashboard-preview/index.d.ts +4 -0
- package/lib/template/back-office/layout/index.d.ts +4 -0
- package/lib/template/back-office/layout/index.d.ts.map +1 -1
- package/lib/template/common/dashboard/index.d.ts +4 -0
- package/lib/template/common/search-page/index.d.ts +2 -0
- package/lib/template/external-course/index.d.ts +2 -0
- package/lib/template/my-learning/index.d.ts +34 -0
- package/lib/template/my-learning/index.d.ts.map +1 -0
- package/lib/template/my-learning/index.js +373 -0
- package/lib/template/my-learning/index.js.map +1 -0
- package/lib/template/my-learning/style.css +196 -0
- package/locales/en/global.json +25 -0
- package/locales/sl/global.json +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
@value colors: "../../variables/colors.css";
|
|
2
|
+
@value breakpoints: "../../variables/breakpoints.css";
|
|
3
|
+
@value tablet from breakpoints;
|
|
4
|
+
@value mobile from breakpoints;
|
|
5
|
+
@value white from colors;
|
|
6
|
+
@value lightDark from colors;
|
|
7
|
+
@value dark from colors;
|
|
8
|
+
@value light from colors;
|
|
9
|
+
@value xtraLightGrey from colors;
|
|
10
|
+
@value cm_grey_150 from colors;
|
|
11
|
+
|
|
12
|
+
.modalWrapper {
|
|
13
|
+
position: fixed;
|
|
14
|
+
z-index: 1000;
|
|
15
|
+
bottom: 0;
|
|
16
|
+
right: 0;
|
|
17
|
+
height: 100vh;
|
|
18
|
+
width: 100vw;
|
|
19
|
+
display: flex;
|
|
20
|
+
font-family: "Gilroy";
|
|
21
|
+
justify-content: center;
|
|
22
|
+
align-items: center;
|
|
23
|
+
background-color: lightDark;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.modal {
|
|
27
|
+
max-width: 660px;
|
|
28
|
+
min-width: 450px;
|
|
29
|
+
min-height: 165px;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
border-radius: 16px;
|
|
32
|
+
background-color: white;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.header {
|
|
36
|
+
padding: 24px;
|
|
37
|
+
display: flex;
|
|
38
|
+
position: relative;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.headerIcon {
|
|
42
|
+
border-radius: 12px;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
margin-right: 16px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.headerContent {
|
|
48
|
+
flex: 1;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.headerTitle {
|
|
52
|
+
font-size: 18px;
|
|
53
|
+
font-weight: 600;
|
|
54
|
+
line-height: 24px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.headerDescription {
|
|
58
|
+
font-size: 14px;
|
|
59
|
+
font-weight: 500;
|
|
60
|
+
line-height: 20px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.headerCloseIcon {
|
|
64
|
+
position: absolute;
|
|
65
|
+
top: 12px;
|
|
66
|
+
right: 12px;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.body {
|
|
71
|
+
background-color: xtraLightGrey;
|
|
72
|
+
padding: 32px 32px 16px 32px;
|
|
73
|
+
min-height: 100px;
|
|
74
|
+
border-top: 1px solid cm_grey_150;
|
|
75
|
+
border-bottom: 1px solid cm_grey_150;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.footer {
|
|
79
|
+
padding: 24px;
|
|
80
|
+
display: flex;
|
|
81
|
+
flex-direction: row-reverse;
|
|
82
|
+
justify-content: space-between;
|
|
83
|
+
align-items: center;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.footerDescriptionError {
|
|
87
|
+
color: #991100;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.footerCTAWrapper {
|
|
91
|
+
display: flex;
|
|
92
|
+
gap: 8px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.footerCancelButton {
|
|
96
|
+
width: 94px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.footerConfirmButton {
|
|
100
|
+
width: 121px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@media mobile {
|
|
104
|
+
.modal {
|
|
105
|
+
min-width: unset;
|
|
106
|
+
flex: 1;
|
|
107
|
+
margin: 0 16px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.footerCTAWrapper,
|
|
111
|
+
.footer {
|
|
112
|
+
flex-direction: column-reverse;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.footerCTAWrapper,
|
|
116
|
+
.footerCancelButton,
|
|
117
|
+
.footerConfirmButton,
|
|
118
|
+
.footerDescription {
|
|
119
|
+
width: 100%;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.footerDescription {
|
|
123
|
+
margin-bottom: 16px;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
@@ -80,6 +80,7 @@ declare const propTypes: {
|
|
|
80
80
|
buttonLink: PropTypes.Requireable<PropTypes.InferProps<{
|
|
81
81
|
type: PropTypes.Requireable<string>;
|
|
82
82
|
label: PropTypes.Requireable<string>;
|
|
83
|
+
content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
83
84
|
'aria-label': PropTypes.Requireable<string>;
|
|
84
85
|
'data-name': PropTypes.Requireable<string>;
|
|
85
86
|
'data-testid': PropTypes.Requireable<string>;
|
|
@@ -211,6 +212,7 @@ declare const propTypes: {
|
|
|
211
212
|
componentType: PropTypes.Requireable<string>;
|
|
212
213
|
type: PropTypes.Requireable<string>;
|
|
213
214
|
label: PropTypes.Requireable<string>;
|
|
215
|
+
content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
214
216
|
'aria-label': PropTypes.Requireable<string>;
|
|
215
217
|
'data-name': PropTypes.Requireable<string>;
|
|
216
218
|
'data-testid': PropTypes.Requireable<string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,OAAO,IAAI,MAAM,iBAAiB,CAAC;AACnC,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAGlD,QAAA,MAAM,SAAS
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,OAAO,IAAI,MAAM,iBAAiB,CAAC;AACnC,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAGlD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDd,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;QACzB,IAAI,EACA,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,GAChD,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC;KACtD,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC;CACpD,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -65,6 +65,7 @@ declare const ActionableExpandableTable: {
|
|
|
65
65
|
componentType: import("prop-types").Requireable<string>;
|
|
66
66
|
type: import("prop-types").Requireable<string>;
|
|
67
67
|
label: import("prop-types").Requireable<string>;
|
|
68
|
+
content: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
|
|
68
69
|
'aria-label': import("prop-types").Requireable<string>;
|
|
69
70
|
'data-name': import("prop-types").Requireable<string>;
|
|
70
71
|
'data-testid': import("prop-types").Requireable<string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/expandible-actionable-table/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAOjE,OAAO,EAA2C,KAAK,EAAY,MAAM,SAAS,CAAC;AAqCnF,QAAA,MAAM,yBAAyB;YAAW,KAAK,iBAAiB,gBAAgB
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/expandible-actionable-table/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAOjE,OAAO,EAA2C,KAAK,EAAY,MAAM,SAAS,CAAC;AAqCnF,QAAA,MAAM,yBAAyB;YAAW,KAAK,iBAAiB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoL/E,CAAC;AASF,eAAe,yBAAyB,CAAC"}
|
|
@@ -42,6 +42,7 @@ export declare const propTypes: {
|
|
|
42
42
|
componentType: PropTypes.Requireable<string>;
|
|
43
43
|
type: PropTypes.Requireable<string>;
|
|
44
44
|
label: PropTypes.Requireable<string>;
|
|
45
|
+
content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
45
46
|
'aria-label': PropTypes.Requireable<string>;
|
|
46
47
|
'data-name': PropTypes.Requireable<string>;
|
|
47
48
|
'data-testid': PropTypes.Requireable<string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/expandible-actionable-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,OAAO,EAAC,0BAA0B,EAAC,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAC,KAAK,IAAI,gBAAgB,EAAC,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAC,KAAK,IAAI,oBAAoB,EAAC,MAAM,4BAA4B,CAAC;AA0BzE,eAAO,MAAM,SAAS
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/expandible-actionable-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,OAAO,EAAC,0BAA0B,EAAC,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAC,KAAK,IAAI,gBAAgB,EAAC,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAC,KAAK,IAAI,oBAAoB,EAAC,MAAM,4BAA4B,CAAC;AA0BzE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBrB,CAAC;AAEF,oBAAY,KAAK,GACb,MAAM,GACN,CAAC,eAAe,GAAG;IACjB,aAAa,EAAE,QAAQ,CAAC;CACzB,CAAC,GACF,CAAC,oBAAoB,GAAG;IACtB,aAAa,EAAE,cAAc,CAAC;CAC/B,CAAC,CAAC;AAEP,oBAAY,SAAS,GACjB,CAAC,eAAe,GAAG;IACjB,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC,GACF,CAAC,0BAA0B,GAAG;IAC5B,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC,CAAC;AAEP,oBAAY,SAAS,GACjB,CAAC,gBAAgB,GAAG;IAClB,aAAa,EAAE,cAAc,CAAC;CAC/B,CAAC,GACF,CAAC,KAAK,GAAG;IACP,aAAa,EAAE,yBAAyB,CAAC;CAC1C,CAAC,CAAC;AAEP,oBAAY,MAAM,GAAG;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC;AACrC,oBAAY,GAAG,GAAG;IAChB,MAAM,EAAE,KAAK,EAAE,CAAC;IAEhB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AACF,oBAAY,OAAO,GAAG,MAAM,EAAE,CAAC;AAC/B,oBAAY,IAAI,GAAG,GAAG,EAAE,CAAC;AAEzB,oBAAY,KAAK,GAAG;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,EAAE,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC,CAAC;AAEF,oBAAY,WAAW,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAC,CAAC"}
|
|
@@ -8,11 +8,13 @@ declare namespace LearnerSkillCard {
|
|
|
8
8
|
'aria-label': PropTypes.Requireable<string>;
|
|
9
9
|
skillTitle: PropTypes.Requireable<string>;
|
|
10
10
|
skillAriaLabel: PropTypes.Requireable<string>;
|
|
11
|
+
focus: PropTypes.Requireable<boolean>;
|
|
11
12
|
metrics: PropTypes.Requireable<PropTypes.InferProps<{
|
|
12
13
|
skillCourses: PropTypes.Requireable<number>;
|
|
13
14
|
skillQuestions: PropTypes.Requireable<number>;
|
|
14
15
|
completedCourses: PropTypes.Requireable<number>;
|
|
15
16
|
}>>;
|
|
17
|
+
review: PropTypes.Requireable<boolean>;
|
|
16
18
|
onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
17
19
|
onExploreClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
18
20
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":";AASA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":";AASA,yEA2JC"}
|
|
@@ -13,7 +13,9 @@ const LearnerSkillCard = (props, context) => {
|
|
|
13
13
|
'aria-label': ariaLabel,
|
|
14
14
|
skillTitle,
|
|
15
15
|
skillAriaLabel,
|
|
16
|
+
focus = false,
|
|
16
17
|
metrics,
|
|
18
|
+
review = false,
|
|
17
19
|
onReviewClick,
|
|
18
20
|
onExploreClick
|
|
19
21
|
} = props;
|
|
@@ -43,7 +45,8 @@ const LearnerSkillCard = (props, context) => {
|
|
|
43
45
|
backgroundColor: '#FFF',
|
|
44
46
|
transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
|
|
45
47
|
},
|
|
46
|
-
|
|
48
|
+
disabled: !review,
|
|
49
|
+
onClick: () => onReviewClick(skillTitle),
|
|
47
50
|
'aria-label': `${skillTitle}, ${reviewLocale}`,
|
|
48
51
|
label: reviewLocale,
|
|
49
52
|
'data-name': 'learner-skill-card-review-button'
|
|
@@ -54,7 +57,7 @@ const LearnerSkillCard = (props, context) => {
|
|
|
54
57
|
color: hovered ? '#FFFFFF' : primarySkinColor,
|
|
55
58
|
transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
|
|
56
59
|
},
|
|
57
|
-
onExploreClick,
|
|
60
|
+
onClick: () => onExploreClick(skillTitle),
|
|
58
61
|
'aria-label': `${skillTitle}, ${exploreLocale}`,
|
|
59
62
|
label: exploreLocale,
|
|
60
63
|
'data-name': 'learner-skill-card-explore-button',
|
|
@@ -108,7 +111,7 @@ const LearnerSkillCard = (props, context) => {
|
|
|
108
111
|
"data-name": "skill-title",
|
|
109
112
|
className: style.skillTitle,
|
|
110
113
|
"aria-label": skillAriaLabel || skillTitle
|
|
111
|
-
}, skillTitle), /*#__PURE__*/React.createElement("div", {
|
|
114
|
+
}, skillTitle), focus ? /*#__PURE__*/React.createElement("div", {
|
|
112
115
|
className: style.skillFocusBadge
|
|
113
116
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
114
117
|
iconName: "bullseye-arrow",
|
|
@@ -117,7 +120,7 @@ const LearnerSkillCard = (props, context) => {
|
|
|
117
120
|
faSize: 10,
|
|
118
121
|
wrapperSize: 16
|
|
119
122
|
}
|
|
120
|
-
}), skillFocusLocale)), /*#__PURE__*/React.createElement(ProgressBar, null), /*#__PURE__*/React.createElement("div", {
|
|
123
|
+
}), skillFocusLocale) : null), /*#__PURE__*/React.createElement(ProgressBar, null), /*#__PURE__*/React.createElement("div", {
|
|
121
124
|
className: style.progressInformations
|
|
122
125
|
}, skillCourses && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
123
126
|
className: style.progressInformation,
|
|
@@ -147,11 +150,13 @@ LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
147
150
|
'aria-label': PropTypes.string,
|
|
148
151
|
skillTitle: PropTypes.string,
|
|
149
152
|
skillAriaLabel: PropTypes.string,
|
|
153
|
+
focus: PropTypes.bool,
|
|
150
154
|
metrics: PropTypes.shape({
|
|
151
155
|
skillCourses: PropTypes.number,
|
|
152
156
|
skillQuestions: PropTypes.number,
|
|
153
157
|
completedCourses: PropTypes.number
|
|
154
158
|
}),
|
|
159
|
+
review: PropTypes.bool,
|
|
155
160
|
onReviewClick: PropTypes.func,
|
|
156
161
|
onExploreClick: PropTypes.func
|
|
157
162
|
} : {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useCallback","useState","convert","PropTypes","Icon","ButtonLink","Provider","style","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","metrics","onReviewClick","onExploreClick","skillCourses","skillQuestions","completedCourses","skin","translate","hovered","setHovered","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","coursesCompletedLocale","handleMouseOver","handleMouseLeave","buttonReviewProps","customStyle","backgroundColor","transition","label","buttonExploreProps","color","icon","position","faIcon","name","size","completedPercentage","Number","parseInt","ProgressBar","progressBarColor","inlineProgressValueStyle","width","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","childContextTypes","propTypes","string","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get, getOr} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n const {\n 'aria-label': ariaLabel,\n skillTitle,\n skillAriaLabel,\n metrics,\n onReviewClick,\n onExploreClick\n } = props;\n const {skillCourses, skillQuestions, completedCourses = 0} = metrics;\n const {skin, translate} = context;\n const [hovered, setHovered] = useState(false);\n const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n const reviewLocale = translate('Review');\n const exploreLocale = translate('Explore');\n const coursesLocale = translate('courses');\n const questionsLocale = translate('questions');\n const skillFocusLocale = translate('skill_focus');\n const coursesCompletedLocale = translate('courses_completed');\n\n const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n const buttonReviewProps = {\n customStyle: {\n backgroundColor: '#FFF',\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n },\n onReviewClick,\n 'aria-label': `${skillTitle}, ${reviewLocale}`,\n label: reviewLocale,\n 'data-name': 'learner-skill-card-review-button'\n };\n\n const buttonExploreProps = {\n customStyle: {\n backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n color: hovered ? '#FFFFFF' : primarySkinColor,\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n },\n onExploreClick,\n 'aria-label': `${skillTitle}, ${exploreLocale}`,\n label: exploreLocale,\n 'data-name': 'learner-skill-card-explore-button',\n icon: {\n position: 'left',\n faIcon: {\n name: 'compass',\n backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n color: hovered ? '#FFFFFF' : primarySkinColor,\n size: 16\n }\n }\n };\n\n const completedPercentage =\n skillCourses && Number.parseInt((completedCourses / skillCourses) * 100);\n\n const ProgressBar = useCallback(() => {\n if (!skillCourses) return null;\n\n const progressBarColor = '#3EC483';\n const inlineProgressValueStyle = {\n backgroundColor: progressBarColor,\n width: `${completedPercentage}%`\n };\n\n return (\n <div className={style.progressWrapper}>\n <div\n data-name=\"progress\"\n className={style.progress}\n style={inlineProgressValueStyle}\n role=\"progressbar\"\n aria-label={get('progression', ariaLabel)}\n />\n </div>\n );\n }, [completedPercentage, ariaLabel, skillCourses]);\n\n return (\n <div\n className={style.learnerSkillCardWrapper}\n data-name=\"learner-skill-card-wrapper\"\n aria-label={ariaLabel}\n >\n {skillCourses || skillQuestions ? (\n <div className={style.skillCoursesAndQuestionsWrapper}>\n {skillCourses ? (\n <div className={style.skillInformation} data-name=\"skill-courses\">\n <span className={style.skillInformationNumber}>{skillCourses}</span> {coursesLocale}\n </div>\n ) : null}\n {skillQuestions ? (\n <div className={style.skillInformation} data-name=\"skill-questions\">\n <span className={style.skillInformationNumber}>{skillQuestions}</span>\n {questionsLocale}\n </div>\n ) : null}\n </div>\n ) : null}\n <div className={style.skillTitleWrapper}>\n <div\n data-name=\"skill-title\"\n className={style.skillTitle}\n aria-label={skillAriaLabel || skillTitle}\n >\n {skillTitle}\n </div>\n <div className={style.skillFocusBadge}>\n <Icon\n iconName=\"bullseye-arrow\"\n backgroundColor=\"#DDD1FF\"\n size={{\n faSize: 10,\n wrapperSize: 16\n }}\n />\n {skillFocusLocale}\n </div>\n </div>\n <ProgressBar />\n <div className={style.progressInformations}>\n {skillCourses && (\n <>\n <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n <span className={style.progressInformationNumber}>{completedCourses}</span>\n {coursesCompletedLocale}\n </div>\n <div className={style.progressInformation} data-name=\"completed-percentage\">\n <span className={style.progressInformationNumber}>{completedPercentage}%</span>\n </div>\n </>\n )}\n </div>\n <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n <ButtonLink {...buttonReviewProps} />\n <div\n className={style.buttonWrapper}\n onMouseOver={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n data-name=\"button-explore-wrapper\"\n >\n <ButtonLink {...buttonExploreProps} />\n </div>\n </div>\n </div>\n );\n};\n\nLearnerSkillCard.contextTypes = {\n translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n 'aria-label': PropTypes.string,\n skillTitle: PropTypes.string,\n skillAriaLabel: PropTypes.string,\n metrics: PropTypes.shape({\n skillCourses: PropTypes.number,\n skillQuestions: PropTypes.number,\n completedCourses: PropTypes.number\n }),\n onReviewClick: PropTypes.func,\n onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useCallback","useState","convert","PropTypes","Icon","ButtonLink","Provider","style","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","skillCourses","skillQuestions","completedCourses","skin","translate","hovered","setHovered","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","coursesCompletedLocale","handleMouseOver","handleMouseLeave","buttonReviewProps","customStyle","backgroundColor","transition","disabled","onClick","label","buttonExploreProps","color","icon","position","faIcon","name","size","completedPercentage","Number","parseInt","ProgressBar","progressBarColor","inlineProgressValueStyle","width","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","childContextTypes","propTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get, getOr} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n const {\n 'aria-label': ariaLabel,\n skillTitle,\n skillAriaLabel,\n focus = false,\n metrics,\n review = false,\n onReviewClick,\n onExploreClick\n } = props;\n const {skillCourses, skillQuestions, completedCourses = 0} = metrics;\n const {skin, translate} = context;\n const [hovered, setHovered] = useState(false);\n const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n const reviewLocale = translate('Review');\n const exploreLocale = translate('Explore');\n const coursesLocale = translate('courses');\n const questionsLocale = translate('questions');\n const skillFocusLocale = translate('skill_focus');\n const coursesCompletedLocale = translate('courses_completed');\n\n const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n const buttonReviewProps = {\n customStyle: {\n backgroundColor: '#FFF',\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n },\n disabled: !review,\n onClick: () => onReviewClick(skillTitle),\n 'aria-label': `${skillTitle}, ${reviewLocale}`,\n label: reviewLocale,\n 'data-name': 'learner-skill-card-review-button'\n };\n\n const buttonExploreProps = {\n customStyle: {\n backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n color: hovered ? '#FFFFFF' : primarySkinColor,\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n },\n onClick: () => onExploreClick(skillTitle),\n 'aria-label': `${skillTitle}, ${exploreLocale}`,\n label: exploreLocale,\n 'data-name': 'learner-skill-card-explore-button',\n icon: {\n position: 'left',\n faIcon: {\n name: 'compass',\n backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n color: hovered ? '#FFFFFF' : primarySkinColor,\n size: 16\n }\n }\n };\n\n const completedPercentage =\n skillCourses && Number.parseInt((completedCourses / skillCourses) * 100);\n\n const ProgressBar = useCallback(() => {\n if (!skillCourses) return null;\n\n const progressBarColor = '#3EC483';\n const inlineProgressValueStyle = {\n backgroundColor: progressBarColor,\n width: `${completedPercentage}%`\n };\n\n return (\n <div className={style.progressWrapper}>\n <div\n data-name=\"progress\"\n className={style.progress}\n style={inlineProgressValueStyle}\n role=\"progressbar\"\n aria-label={get('progression', ariaLabel)}\n />\n </div>\n );\n }, [completedPercentage, ariaLabel, skillCourses]);\n\n return (\n <div\n className={style.learnerSkillCardWrapper}\n data-name=\"learner-skill-card-wrapper\"\n aria-label={ariaLabel}\n >\n {skillCourses || skillQuestions ? (\n <div className={style.skillCoursesAndQuestionsWrapper}>\n {skillCourses ? (\n <div className={style.skillInformation} data-name=\"skill-courses\">\n <span className={style.skillInformationNumber}>{skillCourses}</span> {coursesLocale}\n </div>\n ) : null}\n {skillQuestions ? (\n <div className={style.skillInformation} data-name=\"skill-questions\">\n <span className={style.skillInformationNumber}>{skillQuestions}</span>\n {questionsLocale}\n </div>\n ) : null}\n </div>\n ) : null}\n <div className={style.skillTitleWrapper}>\n <div\n data-name=\"skill-title\"\n className={style.skillTitle}\n aria-label={skillAriaLabel || skillTitle}\n >\n {skillTitle}\n </div>\n {focus ? (\n <div className={style.skillFocusBadge}>\n <Icon\n iconName=\"bullseye-arrow\"\n backgroundColor=\"#DDD1FF\"\n size={{\n faSize: 10,\n wrapperSize: 16\n }}\n />\n {skillFocusLocale}\n </div>\n ) : null}\n </div>\n <ProgressBar />\n <div className={style.progressInformations}>\n {skillCourses && (\n <>\n <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n <span className={style.progressInformationNumber}>{completedCourses}</span>\n {coursesCompletedLocale}\n </div>\n <div className={style.progressInformation} data-name=\"completed-percentage\">\n <span className={style.progressInformationNumber}>{completedPercentage}%</span>\n </div>\n </>\n )}\n </div>\n <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n <ButtonLink {...buttonReviewProps} />\n <div\n className={style.buttonWrapper}\n onMouseOver={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n data-name=\"button-explore-wrapper\"\n >\n <ButtonLink {...buttonExploreProps} />\n </div>\n </div>\n </div>\n );\n};\n\nLearnerSkillCard.contextTypes = {\n translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n 'aria-label': PropTypes.string,\n skillTitle: PropTypes.string,\n skillAriaLabel: PropTypes.string,\n focus: PropTypes.bool,\n metrics: PropTypes.shape({\n skillCourses: PropTypes.number,\n skillQuestions: PropTypes.number,\n completedCourses: PropTypes.number\n }),\n review: PropTypes.bool,\n onReviewClick: PropTypes.func,\n onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,QAA5B,QAA2C,OAA3C;AACA,SAAQC,OAAR,QAAsB,oBAAtB;AAEA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,iBAAjB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,gBAAgB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC3C,MAAM;IACJ,cAAcC,SADV;IAEJC,UAFI;IAGJC,cAHI;IAIJC,KAAK,GAAG,KAJJ;IAKJC,OALI;IAMJC,MAAM,GAAG,KANL;IAOJC,aAPI;IAQJC;EARI,IASFT,KATJ;EAUA,MAAM;IAACU,YAAD;IAAeC,cAAf;IAA+BC,gBAAgB,GAAG;EAAlD,IAAuDN,OAA7D;EACA,MAAM;IAACO,IAAD;IAAOC;EAAP,IAAoBb,OAA1B;EACA,MAAM,CAACc,OAAD,EAAUC,UAAV,IAAwBxB,QAAQ,CAAC,KAAD,CAAtC;;EACA,MAAMyB,gBAAgB,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCJ,IAAnC,CAAzB;;EAEA,MAAMK,YAAY,GAAGJ,SAAS,CAAC,QAAD,CAA9B;EACA,MAAMK,aAAa,GAAGL,SAAS,CAAC,SAAD,CAA/B;EACA,MAAMM,aAAa,GAAGN,SAAS,CAAC,SAAD,CAA/B;EACA,MAAMO,eAAe,GAAGP,SAAS,CAAC,WAAD,CAAjC;EACA,MAAMQ,gBAAgB,GAAGR,SAAS,CAAC,aAAD,CAAlC;EACA,MAAMS,sBAAsB,GAAGT,SAAS,CAAC,mBAAD,CAAxC;EAEA,MAAMU,eAAe,GAAGjC,WAAW,CAAC,MAAMyB,UAAU,CAAC,IAAD,CAAjB,EAAyB,CAACA,UAAD,CAAzB,CAAnC;EAEA,MAAMS,gBAAgB,GAAGlC,WAAW,CAAC,MAAMyB,UAAU,CAAC,KAAD,CAAjB,EAA0B,CAACA,UAAD,CAA1B,CAApC;EAEA,MAAMU,iBAAiB,GAAG;IACxBC,WAAW,EAAE;MACXC,eAAe,EAAE,MADN;MAEXC,UAAU,EAAE;IAFD,CADW;IAKxBC,QAAQ,EAAE,CAACvB,MALa;IAMxBwB,OAAO,EAAE,MAAMvB,aAAa,CAACL,UAAD,CANJ;IAOxB,cAAe,GAAEA,UAAW,KAAIe,YAAa,EAPrB;IAQxBc,KAAK,EAAEd,YARiB;IASxB,aAAa;EATW,CAA1B;EAYA,MAAMe,kBAAkB,GAAG;IACzBN,WAAW,EAAE;MACXC,eAAe,EAAEb,OAAO,GAAGE,gBAAH,GAAsBxB,OAAO,CAAE,SAAQwB,gBAAiB,WAA3B,CAD1C;MAEXiB,KAAK,EAAEnB,OAAO,GAAG,SAAH,GAAeE,gBAFlB;MAGXY,UAAU,EAAE;IAHD,CADY;IAMzBE,OAAO,EAAE,MAAMtB,cAAc,CAACN,UAAD,CANJ;IAOzB,cAAe,GAAEA,UAAW,KAAIgB,aAAc,EAPrB;IAQzBa,KAAK,EAAEb,aARkB;IASzB,aAAa,mCATY;IAUzBgB,IAAI,EAAE;MACJC,QAAQ,EAAE,MADN;MAEJC,MAAM,EAAE;QACNC,IAAI,EAAE,SADA;QAENV,eAAe,EAAEb,OAAO,GAAGE,gBAAH,GAAsBxB,OAAO,CAAE,SAAQwB,gBAAiB,WAA3B,CAF/C;QAGNiB,KAAK,EAAEnB,OAAO,GAAG,SAAH,GAAeE,gBAHvB;QAINsB,IAAI,EAAE;MAJA;IAFJ;EAVmB,CAA3B;EAqBA,MAAMC,mBAAmB,GACvB9B,YAAY,IAAI+B,MAAM,CAACC,QAAP,CAAiB9B,gBAAgB,GAAGF,YAApB,GAAoC,GAApD,CADlB;EAGA,MAAMiC,WAAW,GAAGpD,WAAW,CAAC,MAAM;IACpC,IAAI,CAACmB,YAAL,EAAmB,OAAO,IAAP;IAEnB,MAAMkC,gBAAgB,GAAG,SAAzB;IACA,MAAMC,wBAAwB,GAAG;MAC/BjB,eAAe,EAAEgB,gBADc;MAE/BE,KAAK,EAAG,GAAEN,mBAAoB;IAFC,CAAjC;IAKA,oBACE;MAAK,SAAS,EAAE1C,KAAK,CAACiD;IAAtB,gBACE;MACE,aAAU,UADZ;MAEE,SAAS,EAAEjD,KAAK,CAACkD,QAFnB;MAGE,KAAK,EAAEH,wBAHT;MAIE,IAAI,EAAC,aAJP;MAKE,cAAY,KAAI,aAAJ,EAAmB3C,SAAnB;IALd,EADF,CADF;EAWD,CApB8B,EAoB5B,CAACsC,mBAAD,EAAsBtC,SAAtB,EAAiCQ,YAAjC,CApB4B,CAA/B;EAsBA,oBACE;IACE,SAAS,EAAEZ,KAAK,CAACmD,uBADnB;IAEE,aAAU,4BAFZ;IAGE,cAAY/C;EAHd,GAKGQ,YAAY,IAAIC,cAAhB,gBACC;IAAK,SAAS,EAAEb,KAAK,CAACoD;EAAtB,GACGxC,YAAY,gBACX;IAAK,SAAS,EAAEZ,KAAK,CAACqD,gBAAtB;IAAwC,aAAU;EAAlD,gBACE;IAAM,SAAS,EAAErD,KAAK,CAACsD;EAAvB,GAAgD1C,YAAhD,CADF,OACwEU,aADxE,CADW,GAIT,IALN,EAMGT,cAAc,gBACb;IAAK,SAAS,EAAEb,KAAK,CAACqD,gBAAtB;IAAwC,aAAU;EAAlD,gBACE;IAAM,SAAS,EAAErD,KAAK,CAACsD;EAAvB,GAAgDzC,cAAhD,CADF,UAESU,eAFT,CADa,GAKX,IAXN,CADD,GAcG,IAnBN,eAoBE;IAAK,SAAS,EAAEvB,KAAK,CAACuD;EAAtB,gBACE;IACE,aAAU,aADZ;IAEE,SAAS,EAAEvD,KAAK,CAACK,UAFnB;IAGE,cAAYC,cAAc,IAAID;EAHhC,GAKGA,UALH,CADF,EAQGE,KAAK,gBACJ;IAAK,SAAS,EAAEP,KAAK,CAACwD;EAAtB,gBACE,oBAAC,IAAD;IACE,QAAQ,EAAC,gBADX;IAEE,eAAe,EAAC,SAFlB;IAGE,IAAI,EAAE;MACJC,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT;EAHR,EADF,EASGlC,gBATH,CADI,GAYF,IApBN,CApBF,eA0CE,oBAAC,WAAD,OA1CF,eA2CE;IAAK,SAAS,EAAExB,KAAK,CAAC2D;EAAtB,GACG/C,YAAY,iBACX,uDACE;IAAK,SAAS,EAAEZ,KAAK,CAAC4D,mBAAtB;IAA2C,aAAU;EAArD,gBACE;IAAM,SAAS,EAAE5D,KAAK,CAAC6D;EAAvB,GAAmD/C,gBAAnD,CADF,EAEGW,sBAFH,CADF,eAKE;IAAK,SAAS,EAAEzB,KAAK,CAAC4D,mBAAtB;IAA2C,aAAU;EAArD,gBACE;IAAM,SAAS,EAAE5D,KAAK,CAAC6D;EAAvB,GAAmDnB,mBAAnD,MADF,CALF,CAFJ,CA3CF,eAwDE;IAAK,SAAS,EAAE1C,KAAK,CAAC8D,UAAtB;IAAkC,aAAU;EAA5C,gBACE,oBAAC,UAAD,EAAgBlC,iBAAhB,CADF,eAEE;IACE,SAAS,EAAE5B,KAAK,CAAC+D,aADnB;IAEE,WAAW,EAAErC,eAFf;IAGE,YAAY,EAAEC,gBAHhB;IAIE,aAAU;EAJZ,gBAME,oBAAC,UAAD,EAAgBQ,kBAAhB,CANF,CAFF,CAxDF,CADF;AAsED,CA3JD;;AA6JAlC,gBAAgB,CAAC+D,YAAjB,GAAgC;EAC9BhD,SAAS,EAAEjB,QAAQ,CAACkE,iBAAT,CAA2BjD;AADR,CAAhC;AAIAf,gBAAgB,CAACiE,SAAjB,2CAA6B;EAC3B,cAActE,SAAS,CAACuE,MADG;EAE3B9D,UAAU,EAAET,SAAS,CAACuE,MAFK;EAG3B7D,cAAc,EAAEV,SAAS,CAACuE,MAHC;EAI3B5D,KAAK,EAAEX,SAAS,CAACwE,IAJU;EAK3B5D,OAAO,EAAEZ,SAAS,CAACyE,KAAV,CAAgB;IACvBzD,YAAY,EAAEhB,SAAS,CAAC0E,MADD;IAEvBzD,cAAc,EAAEjB,SAAS,CAAC0E,MAFH;IAGvBxD,gBAAgB,EAAElB,SAAS,CAAC0E;EAHL,CAAhB,CALkB;EAU3B7D,MAAM,EAAEb,SAAS,CAACwE,IAVS;EAW3B1D,aAAa,EAAEd,SAAS,CAAC2E,IAXE;EAY3B5D,cAAc,EAAEf,SAAS,CAAC2E;AAZC,CAA7B;AAeA,eAAetE,gBAAf"}
|
|
@@ -4,7 +4,7 @@ export declare const formatData: (legend: {
|
|
|
4
4
|
[ref: string]: string;
|
|
5
5
|
}, data_: LearningProfileRadarChartPropTypes['data']) => FormatedDataType[];
|
|
6
6
|
export declare const LearningProfileRadarChart: {
|
|
7
|
-
({ data, legend, totalDataset, colors: colorsProps, onClick, width, height }: LearningProfileRadarChartPropTypes): JSX.Element;
|
|
7
|
+
({ data, legend, totalDataset, colors: colorsProps, onClick, width, height, margin }: LearningProfileRadarChartPropTypes): JSX.Element;
|
|
8
8
|
propTypes: {
|
|
9
9
|
data: import("prop-types").Validator<{
|
|
10
10
|
[x: string]: NonNullable<number | (number | null | undefined)[] | null | undefined> | null | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAGL,gBAAgB,EAChB,kCAAkC,EAGnC,MAAM,SAAS,CAAC;AAwPjB,eAAO,MAAM,UAAU,EAAE,CACvB,MAAM,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,EAC/B,KAAK,EAAE,kCAAkC,CAAC,MAAM,CAAC,KAC9C,gBAAgB,EAOX,CAAC;AAEX,eAAO,MAAM,yBAAyB;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAGL,gBAAgB,EAChB,kCAAkC,EAGnC,MAAM,SAAS,CAAC;AAwPjB,eAAO,MAAM,UAAU,EAAE,CACvB,MAAM,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,EAC/B,KAAK,EAAE,kCAAkC,CAAC,MAAM,CAAC,KAC9C,gBAAgB,EAOX,CAAC;AAEX,eAAO,MAAM,yBAAyB;0FASnC,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAqHpC,CAAC;AAEF,QAAA,MAAM,mCAAmC;YAAW,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAIrF,CAAC;AAKF,eAAe,mCAAmC,CAAC"}
|
|
@@ -99,10 +99,10 @@ const CHART_CONFIGS = {
|
|
|
99
99
|
}
|
|
100
100
|
};
|
|
101
101
|
const DOT_DEFAULT_PROPS = {
|
|
102
|
-
strokeWidth:
|
|
103
|
-
strokeOpacity: 0.
|
|
102
|
+
strokeWidth: 2,
|
|
103
|
+
strokeOpacity: 0.4,
|
|
104
104
|
fill: '#fff',
|
|
105
|
-
r:
|
|
105
|
+
r: 4,
|
|
106
106
|
pointerEvents: 'all',
|
|
107
107
|
style: {
|
|
108
108
|
cursor: 'pointer'
|
|
@@ -110,12 +110,12 @@ const DOT_DEFAULT_PROPS = {
|
|
|
110
110
|
};
|
|
111
111
|
const DOT_ACTIVE_PROPS = {
|
|
112
112
|
fill: '#fff',
|
|
113
|
-
r:
|
|
114
|
-
strokeWidth:
|
|
115
|
-
strokeOpacity: 0.
|
|
113
|
+
r: 6,
|
|
114
|
+
strokeWidth: 4,
|
|
115
|
+
strokeOpacity: 0.6
|
|
116
116
|
};
|
|
117
117
|
const RADAR_DEFAULT_PROPS = {
|
|
118
|
-
strokeWidth:
|
|
118
|
+
strokeWidth: 3,
|
|
119
119
|
strokeOpacity: 0.2,
|
|
120
120
|
fillOpacity: 0.2
|
|
121
121
|
};
|
|
@@ -279,7 +279,8 @@ export const LearningProfileRadarChart = ({
|
|
|
279
279
|
colors: colorsProps,
|
|
280
280
|
onClick,
|
|
281
281
|
width,
|
|
282
|
-
height
|
|
282
|
+
height,
|
|
283
|
+
margin
|
|
283
284
|
}) => {
|
|
284
285
|
const [isMobile, setIsMobile] = useState(false);
|
|
285
286
|
const [activeDot, setActiveDot] = useState();
|
|
@@ -312,7 +313,10 @@ export const LearningProfileRadarChart = ({
|
|
|
312
313
|
}, [isMobile_]);
|
|
313
314
|
useEffect(() => setIsMobile_(), [setIsMobile_]);
|
|
314
315
|
useEffect(() => {
|
|
315
|
-
const handleClick = () =>
|
|
316
|
+
const handleClick = () => {
|
|
317
|
+
setActiveDot(undefined);
|
|
318
|
+
onClick(undefined);
|
|
319
|
+
};
|
|
316
320
|
|
|
317
321
|
!_isEmpty(activeDot) && window.addEventListener('click', handleClick);
|
|
318
322
|
return () => {
|
|
@@ -371,13 +375,18 @@ export const LearningProfileRadarChart = ({
|
|
|
371
375
|
return /*#__PURE__*/React.createElement(RadarChart, {
|
|
372
376
|
width: width,
|
|
373
377
|
height: height,
|
|
378
|
+
margin: margin ?? (isMobile ? {
|
|
379
|
+
top: 80
|
|
380
|
+
} : {
|
|
381
|
+
top: 180
|
|
382
|
+
}),
|
|
374
383
|
cx: "50%",
|
|
375
384
|
cy: "50%",
|
|
376
385
|
outerRadius: "80%",
|
|
377
386
|
data: formatedData
|
|
378
387
|
}, gradients, buildRadars(totalDataset, handleOnDotClick, activeDot), /*#__PURE__*/React.createElement(PolarGrid, {
|
|
379
|
-
strokeDasharray:
|
|
380
|
-
strokeWidth:
|
|
388
|
+
strokeDasharray: 10,
|
|
389
|
+
strokeWidth: 2,
|
|
381
390
|
radialLines: false
|
|
382
391
|
}), /*#__PURE__*/React.createElement(PolarAngleAxis, {
|
|
383
392
|
dataKey: "subject",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","Fragment","useCallback","useEffect","useMemo","useState","Radar","RadarChart","PolarGrid","PolarAngleAxis","ResponsiveContainer","Tooltip","PolarRadiusAxis","classnames","isMobile","getIsMobile","style","learningProfileRadarChartPropTypes","top","offset","x","y","alignment","margin","bottom","right","marginRight","left","marginLeft","BLACK","WHITE","DEFAULT_MAIN_COLOR","DEFAULT_COLORS","gradient","fill","stroke","percentage","color","background","label","CHART_CONFIGS","triangle","name","ticks","sideCount","quadrilateral","pentagon","hexagon","DOT_DEFAULT_PROPS","strokeWidth","strokeOpacity","r","pointerEvents","cursor","DOT_ACTIVE_PROPS","RADAR_DEFAULT_PROPS","fillOpacity","Gradient","type","colors","firstColor","secondColor","CustomTooltip","active","payload","length","tooltip","tooltipLabel","tooltipValue","value","CustomDot","cx","cy","onDotClick","activeDot","dataName","subject","onClick","e","stopPropagation","buildRadars","totalDataset","handleOnDotClick","index","datakey","dataset","buildCustomLabel","percentagesValues","chartType","formatedColors","isCurrentDotActive","offsetX","offsetY","rest","onLabelClick","tickWrapper","tickWrapperFocus","alignItems","textAlign","opacity","map","colorLabel","i","tickValue","tickLabel","CHART_CONFIGS_BY_SIDE_COUNT","formatValues","values_","val","formatData","legend","data_","ref","LearningProfileRadarChart","data","colorsProps","width","height","setIsMobile","setActiveDot","Object","assign","gradients","userAgent","navigator","isMobile_","setIsMobile_","handleClick","undefined","window","addEventListener","removeEventListener","formatedData","find","indexOf","skillRef","key","renderCustomLabel","currentData","ResponsiveLearningProfileRadarChart","props","propTypes"],"sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"sourcesContent":["import React, {Fragment, useCallback, useEffect, useMemo, useState} from 'react';\nimport {\n Radar,\n RadarChart,\n PolarGrid,\n PolarAngleAxis,\n ResponsiveContainer,\n Tooltip,\n PolarRadiusAxis\n} from 'recharts';\nimport {\n pipe,\n keyBy,\n mapValues,\n size,\n getOr,\n map,\n toPairs,\n values,\n isEmpty,\n omit,\n fromPairs,\n times,\n flatten,\n findKey\n} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {isMobile as getIsMobile} from '../../util/check-is-mobile';\nimport style from './style.css';\nimport {\n ActiveDotType,\n FormatedColorsType,\n FormatedDataType,\n LearningProfileRadarChartPropTypes,\n TickType,\n learningProfileRadarChartPropTypes\n} from './types';\n\ntype CHART_TYPE_TYPE = keyof typeof CHART_CONFIGS;\n\n/* TICK_POSITIONS */\nconst top: TickType = {offset: {x: -100, y: -65}, alignment: 'center', margin: 'auto'};\nconst bottom: TickType = {offset: {x: -100, y: 10}, alignment: 'center', margin: 'auto'};\nconst right: TickType = {offset: {x: 30, y: -10}, alignment: 'start', marginRight: 'auto'};\nconst left: TickType = {offset: {x: -230, y: -10}, alignment: 'end', marginLeft: 'auto'};\n\n/* CONSTANTS */\nconst BLACK = '#000000ff';\nconst WHITE = '#ffffffff';\nconst DEFAULT_MAIN_COLOR = '#0062ffff';\n\nconst DEFAULT_COLORS: FormatedColorsType = {\n gradient: {\n fill: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR],\n stroke: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR]\n },\n percentage: {\n color: BLACK,\n background: WHITE\n },\n label: {\n color: BLACK\n }\n};\n\nconst CHART_CONFIGS = {\n triangle: {\n name: 'triangle',\n ticks: [top, right, left],\n sideCount: 3\n },\n quadrilateral: {\n name: 'quadrilateral',\n ticks: [top, right, bottom, left],\n sideCount: 4\n },\n pentagon: {\n name: 'pentagon',\n ticks: [top, right, right, left, left],\n sideCount: 5\n },\n hexagon: {\n name: 'hexagon',\n ticks: [top, right, right, bottom, left, left],\n sideCount: 6\n }\n} as const;\n\nconst DOT_DEFAULT_PROPS = {\n strokeWidth: 4,\n strokeOpacity: 0.2,\n fill: '#fff',\n r: 8,\n pointerEvents: 'all',\n style: {cursor: 'pointer'}\n} as const;\n\nconst DOT_ACTIVE_PROPS = {\n fill: '#fff',\n r: 8,\n strokeWidth: 6,\n strokeOpacity: 0.5\n} as const;\n\nconst RADAR_DEFAULT_PROPS = {\n strokeWidth: 6,\n strokeOpacity: 0.2,\n fillOpacity: 0.2\n} as const;\n\n/* COMPONENTS */\nconst Gradient = ({type, colors: [firstColor, secondColor]}: {type: string; colors: string[]}) => (\n <defs>\n <linearGradient id={`gradient-${type}`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" stopColor={firstColor} />\n <stop offset=\"100%\" stopColor={secondColor} />\n </linearGradient>\n </defs>\n);\n\nconst CustomTooltip = ({\n active,\n payload,\n label\n}: {\n active?: boolean;\n payload?: {value: number}[];\n label?: string;\n}) =>\n active && !!payload?.length ? (\n <div className={style.tooltip}>\n <span className={style.tooltipLabel}>{label}</span>\n <span className={style.tooltipValue}>{payload[0].value}%</span>\n </div>\n ) : null;\n\nconst CustomDot = ({\n cx,\n cy,\n payload,\n onDotClick,\n stroke,\n activeDot,\n dataName\n}: {\n cx?: number;\n cy?: number;\n payload?: {payload: {subject: string} & {[datakey: string]: number}; name: string};\n onDotClick: (name: string) => void;\n dataKey: string;\n stroke: string;\n activeDot?: ActiveDotType;\n dataName: string;\n}) => (\n <circle\n {...{\n ...DOT_DEFAULT_PROPS,\n ...(payload?.payload.subject === activeDot?.label && DOT_ACTIVE_PROPS),\n stroke,\n cx,\n cy,\n onClick: e => {\n e.stopPropagation();\n\n if (!payload?.name) return;\n onDotClick(payload.name);\n },\n 'data-name': dataName\n }}\n />\n);\n\nconst buildRadars = (\n totalDataset: number,\n handleOnDotClick: (name: string) => void,\n activeDot?: ActiveDotType\n) =>\n times(index => {\n const datakey = `value${index + 1}`;\n const dataset = `dataset-${index + 1}`;\n\n return (\n <Radar\n {...RADAR_DEFAULT_PROPS}\n fill={`url(#gradient-fill-${index})`}\n stroke={`url(#gradient-stroke-${index})`}\n key={dataset}\n name={dataset}\n dataKey={datakey}\n activeDot={{\n ...DOT_ACTIVE_PROPS,\n stroke: `url(#gradient-stroke-${index})`\n }}\n // only on mobile\n // to handle dot style on hover (convert to click)\n // use with the tooltip component\n dot={\n <CustomDot\n onDotClick={handleOnDotClick}\n activeDot={activeDot}\n dataKey={datakey}\n stroke={`url(#gradient-stroke-${index})`}\n dataName={`dot-${dataset}`}\n />\n }\n />\n );\n }, totalDataset);\n\nconst buildCustomLabel = ({\n index,\n x,\n y,\n percentagesValues,\n label,\n activeDot,\n chartType,\n formatedColors,\n onClick\n}: {\n index: number;\n x: number;\n y: number;\n percentagesValues: number[];\n label: string;\n chartType: CHART_TYPE_TYPE;\n formatedColors: FormatedColorsType[];\n activeDot?: ActiveDotType;\n onClick: (name: string) => void;\n}) => {\n const isCurrentDotActive = activeDot?.label === label;\n const {\n offset: {x: offsetX, y: offsetY},\n alignment,\n ...rest\n } = CHART_CONFIGS[chartType].ticks[index];\n\n function onLabelClick(e: React.MouseEvent) {\n e.stopPropagation();\n onClick(label);\n }\n\n return (\n <g>\n <foreignObject x={x + offsetX} y={y + offsetY} width=\"200\" height=\"65\">\n <div\n data-name={label}\n onClick={onLabelClick}\n className={classnames(style.tickWrapper, isCurrentDotActive && style.tickWrapperFocus)}\n style={{\n ...rest,\n alignItems: alignment,\n textAlign: alignment,\n opacity: !isEmpty(activeDot) && !isCurrentDotActive ? 0.3 : 1\n }}\n >\n {formatedColors.map(\n ({percentage: {color, background}, label: {color: colorLabel}}, i) => (\n <Fragment key={i}>\n <span className={style.tickValue} style={{color, background}}>\n {percentagesValues[i]}\n </span>\n <span className={style.tickLabel} style={{color: colorLabel}}>\n {label}\n </span>\n </Fragment>\n )\n )}\n </div>\n </foreignObject>\n </g>\n );\n};\n\n/* UTILS */\nconst CHART_CONFIGS_BY_SIDE_COUNT = pipe(keyBy('sideCount'), mapValues('name'))(CHART_CONFIGS);\n\nconst formatValues: (values_: number | number[]) => Record<string, number> = pipe(\n values_ => flatten([values_]),\n values_ => values_.map((val: number, i: number): [string, number] => [`value${i + 1}`, val]),\n fromPairs\n);\n\n/* this convert incoming component data to rechart data structure */\nexport const formatData: (\n legend: {[ref: string]: string},\n data_: LearningProfileRadarChartPropTypes['data']\n) => FormatedDataType[] = (legend, data_) =>\n pipe(\n toPairs,\n map(([ref, values_]: [string, number | number[]]) => ({\n ...formatValues(values_),\n subject: legend[ref]\n }))\n )(data_);\n\nexport const LearningProfileRadarChart = ({\n data,\n legend,\n totalDataset,\n colors: colorsProps,\n onClick,\n width,\n height\n}: LearningProfileRadarChartPropTypes) => {\n const [isMobile, setIsMobile] = useState(false);\n const [activeDot, setActiveDot] = useState<ActiveDotType>();\n\n const formatedColors = times(i => {\n if (!colorsProps?.length) return DEFAULT_COLORS;\n\n const colors = colorsProps[i];\n return colors ? Object.assign({}, DEFAULT_COLORS, colors) : DEFAULT_COLORS;\n })(totalDataset);\n\n const chartType: CHART_TYPE_TYPE = useMemo(\n () => getOr('hexagon', size(data), CHART_CONFIGS_BY_SIDE_COUNT),\n [data]\n );\n\n const gradients = useMemo(\n () =>\n formatedColors.map(({gradient: {fill, stroke}}, index) => (\n <svg key={`gradient-${index}`}>\n <Gradient type={`fill-${index}`} colors={fill} />\n <Gradient type={`stroke-${index}`} colors={stroke} />\n </svg>\n )),\n [formatedColors]\n );\n\n const userAgent = navigator?.userAgent;\n const isMobile_ = useMemo(() => getIsMobile(userAgent), [userAgent]);\n\n const setIsMobile_ = useCallback(() => {\n setIsMobile(isMobile_);\n }, [isMobile_]);\n\n useEffect(() => setIsMobile_(), [setIsMobile_]);\n\n useEffect(() => {\n const handleClick = () => setActiveDot(undefined);\n\n !isEmpty(activeDot) && window.addEventListener('click', handleClick);\n\n return () => {\n window.removeEventListener('click', handleClick);\n };\n }, [activeDot]);\n\n function handleOnDotClick(label: string) {\n const payload = formatedData.find(({subject}) => subject === label);\n if (!payload) return;\n\n const index = formatedData.indexOf(payload);\n const datakey = `value${index + 1}`;\n const skillRef = findKey(val => val === payload?.subject, legend);\n\n if (skillRef) {\n setActiveDot({\n key: datakey,\n value: payload[datakey],\n label: payload.subject\n });\n onClick(skillRef);\n }\n }\n\n function renderCustomLabel({\n x,\n y,\n payload: {value: label},\n index\n }: {\n x: number;\n y: number;\n payload: {value: string};\n index: number;\n }) {\n const currentData = formatedData.find(({subject}) => subject === label);\n const percentagesValues: number[] = pipe(\n omit('subject'),\n mapValues(value => `${value}%`),\n values\n )(currentData);\n\n return buildCustomLabel({\n index,\n x,\n y,\n percentagesValues,\n label,\n activeDot,\n chartType,\n formatedColors,\n onClick: handleOnDotClick\n });\n }\n const formatedData = useMemo(() => formatData(legend, data), [legend, data]);\n\n return (\n <RadarChart\n width={width}\n height={height}\n cx=\"50%\"\n cy=\"50%\"\n outerRadius=\"80%\"\n data={formatedData}\n >\n {gradients}\n {buildRadars(totalDataset, handleOnDotClick, activeDot)}\n <PolarGrid strokeDasharray={15} strokeWidth={3} radialLines={false} />\n <PolarAngleAxis dataKey=\"subject\" tick={!isMobile && renderCustomLabel} />\n <PolarRadiusAxis tick={false} axisLine={false} domain={[0, 100]} />\n {isMobile ? <Tooltip cursor={false} content={<CustomTooltip />} /> : null}\n </RadarChart>\n );\n};\n\nconst ResponsiveLearningProfileRadarChart = (props: LearningProfileRadarChartPropTypes) => (\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <LearningProfileRadarChart {...props} />\n </ResponsiveContainer>\n);\n\nLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\nResponsiveLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\n\nexport default ResponsiveLearningProfileRadarChart;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","Fragment","useCallback","useEffect","useMemo","useState","Radar","RadarChart","PolarGrid","PolarAngleAxis","ResponsiveContainer","Tooltip","PolarRadiusAxis","classnames","isMobile","getIsMobile","style","learningProfileRadarChartPropTypes","top","offset","x","y","alignment","margin","bottom","right","marginRight","left","marginLeft","BLACK","WHITE","DEFAULT_MAIN_COLOR","DEFAULT_COLORS","gradient","fill","stroke","percentage","color","background","label","CHART_CONFIGS","triangle","name","ticks","sideCount","quadrilateral","pentagon","hexagon","DOT_DEFAULT_PROPS","strokeWidth","strokeOpacity","r","pointerEvents","cursor","DOT_ACTIVE_PROPS","RADAR_DEFAULT_PROPS","fillOpacity","Gradient","type","colors","firstColor","secondColor","CustomTooltip","active","payload","length","tooltip","tooltipLabel","tooltipValue","value","CustomDot","cx","cy","onDotClick","activeDot","dataName","subject","onClick","e","stopPropagation","buildRadars","totalDataset","handleOnDotClick","index","datakey","dataset","buildCustomLabel","percentagesValues","chartType","formatedColors","isCurrentDotActive","offsetX","offsetY","rest","onLabelClick","tickWrapper","tickWrapperFocus","alignItems","textAlign","opacity","map","colorLabel","i","tickValue","tickLabel","CHART_CONFIGS_BY_SIDE_COUNT","formatValues","values_","val","formatData","legend","data_","ref","LearningProfileRadarChart","data","colorsProps","width","height","setIsMobile","setActiveDot","Object","assign","gradients","userAgent","navigator","isMobile_","setIsMobile_","handleClick","undefined","window","addEventListener","removeEventListener","formatedData","find","indexOf","skillRef","key","renderCustomLabel","currentData","ResponsiveLearningProfileRadarChart","props","propTypes"],"sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"sourcesContent":["import React, {Fragment, useCallback, useEffect, useMemo, useState} from 'react';\nimport {\n Radar,\n RadarChart,\n PolarGrid,\n PolarAngleAxis,\n ResponsiveContainer,\n Tooltip,\n PolarRadiusAxis\n} from 'recharts';\nimport {\n pipe,\n keyBy,\n mapValues,\n size,\n getOr,\n map,\n toPairs,\n values,\n isEmpty,\n omit,\n fromPairs,\n times,\n flatten,\n findKey\n} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {isMobile as getIsMobile} from '../../util/check-is-mobile';\nimport style from './style.css';\nimport {\n ActiveDotType,\n FormatedColorsType,\n FormatedDataType,\n LearningProfileRadarChartPropTypes,\n TickType,\n learningProfileRadarChartPropTypes\n} from './types';\n\ntype CHART_TYPE_TYPE = keyof typeof CHART_CONFIGS;\n\n/* TICK_POSITIONS */\nconst top: TickType = {offset: {x: -100, y: -65}, alignment: 'center', margin: 'auto'};\nconst bottom: TickType = {offset: {x: -100, y: 10}, alignment: 'center', margin: 'auto'};\nconst right: TickType = {offset: {x: 30, y: -10}, alignment: 'start', marginRight: 'auto'};\nconst left: TickType = {offset: {x: -230, y: -10}, alignment: 'end', marginLeft: 'auto'};\n\n/* CONSTANTS */\nconst BLACK = '#000000ff';\nconst WHITE = '#ffffffff';\nconst DEFAULT_MAIN_COLOR = '#0062ffff';\n\nconst DEFAULT_COLORS: FormatedColorsType = {\n gradient: {\n fill: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR],\n stroke: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR]\n },\n percentage: {\n color: BLACK,\n background: WHITE\n },\n label: {\n color: BLACK\n }\n};\n\nconst CHART_CONFIGS = {\n triangle: {\n name: 'triangle',\n ticks: [top, right, left],\n sideCount: 3\n },\n quadrilateral: {\n name: 'quadrilateral',\n ticks: [top, right, bottom, left],\n sideCount: 4\n },\n pentagon: {\n name: 'pentagon',\n ticks: [top, right, right, left, left],\n sideCount: 5\n },\n hexagon: {\n name: 'hexagon',\n ticks: [top, right, right, bottom, left, left],\n sideCount: 6\n }\n} as const;\n\nconst DOT_DEFAULT_PROPS = {\n strokeWidth: 2,\n strokeOpacity: 0.4,\n fill: '#fff',\n r: 4,\n pointerEvents: 'all',\n style: {cursor: 'pointer'}\n} as const;\n\nconst DOT_ACTIVE_PROPS = {\n fill: '#fff',\n r: 6,\n strokeWidth: 4,\n strokeOpacity: 0.6\n} as const;\n\nconst RADAR_DEFAULT_PROPS = {\n strokeWidth: 3,\n strokeOpacity: 0.2,\n fillOpacity: 0.2\n} as const;\n\n/* COMPONENTS */\nconst Gradient = ({type, colors: [firstColor, secondColor]}: {type: string; colors: string[]}) => (\n <defs>\n <linearGradient id={`gradient-${type}`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" stopColor={firstColor} />\n <stop offset=\"100%\" stopColor={secondColor} />\n </linearGradient>\n </defs>\n);\n\nconst CustomTooltip = ({\n active,\n payload,\n label\n}: {\n active?: boolean;\n payload?: {value: number}[];\n label?: string;\n}) =>\n active && !!payload?.length ? (\n <div className={style.tooltip}>\n <span className={style.tooltipLabel}>{label}</span>\n <span className={style.tooltipValue}>{payload[0].value}%</span>\n </div>\n ) : null;\n\nconst CustomDot = ({\n cx,\n cy,\n payload,\n onDotClick,\n stroke,\n activeDot,\n dataName\n}: {\n cx?: number;\n cy?: number;\n payload?: {payload: {subject: string} & {[datakey: string]: number}; name: string};\n onDotClick: (name: string) => void;\n dataKey: string;\n stroke: string;\n activeDot?: ActiveDotType;\n dataName: string;\n}) => (\n <circle\n {...{\n ...DOT_DEFAULT_PROPS,\n ...(payload?.payload.subject === activeDot?.label && DOT_ACTIVE_PROPS),\n stroke,\n cx,\n cy,\n onClick: e => {\n e.stopPropagation();\n\n if (!payload?.name) return;\n onDotClick(payload.name);\n },\n 'data-name': dataName\n }}\n />\n);\n\nconst buildRadars = (\n totalDataset: number,\n handleOnDotClick: (name: string) => void,\n activeDot?: ActiveDotType\n) =>\n times(index => {\n const datakey = `value${index + 1}`;\n const dataset = `dataset-${index + 1}`;\n\n return (\n <Radar\n {...RADAR_DEFAULT_PROPS}\n fill={`url(#gradient-fill-${index})`}\n stroke={`url(#gradient-stroke-${index})`}\n key={dataset}\n name={dataset}\n dataKey={datakey}\n activeDot={{\n ...DOT_ACTIVE_PROPS,\n stroke: `url(#gradient-stroke-${index})`\n }}\n // only on mobile\n // to handle dot style on hover (convert to click)\n // use with the tooltip component\n dot={\n <CustomDot\n onDotClick={handleOnDotClick}\n activeDot={activeDot}\n dataKey={datakey}\n stroke={`url(#gradient-stroke-${index})`}\n dataName={`dot-${dataset}`}\n />\n }\n />\n );\n }, totalDataset);\n\nconst buildCustomLabel = ({\n index,\n x,\n y,\n percentagesValues,\n label,\n activeDot,\n chartType,\n formatedColors,\n onClick\n}: {\n index: number;\n x: number;\n y: number;\n percentagesValues: number[];\n label: string;\n chartType: CHART_TYPE_TYPE;\n formatedColors: FormatedColorsType[];\n activeDot?: ActiveDotType;\n onClick: (name: string) => void;\n}) => {\n const isCurrentDotActive = activeDot?.label === label;\n const {\n offset: {x: offsetX, y: offsetY},\n alignment,\n ...rest\n } = CHART_CONFIGS[chartType].ticks[index];\n\n function onLabelClick(e: React.MouseEvent) {\n e.stopPropagation();\n onClick(label);\n }\n\n return (\n <g>\n <foreignObject x={x + offsetX} y={y + offsetY} width=\"200\" height=\"65\">\n <div\n data-name={label}\n onClick={onLabelClick}\n className={classnames(style.tickWrapper, isCurrentDotActive && style.tickWrapperFocus)}\n style={{\n ...rest,\n alignItems: alignment,\n textAlign: alignment,\n opacity: !isEmpty(activeDot) && !isCurrentDotActive ? 0.3 : 1\n }}\n >\n {formatedColors.map(\n ({percentage: {color, background}, label: {color: colorLabel}}, i) => (\n <Fragment key={i}>\n <span className={style.tickValue} style={{color, background}}>\n {percentagesValues[i]}\n </span>\n <span className={style.tickLabel} style={{color: colorLabel}}>\n {label}\n </span>\n </Fragment>\n )\n )}\n </div>\n </foreignObject>\n </g>\n );\n};\n\n/* UTILS */\nconst CHART_CONFIGS_BY_SIDE_COUNT = pipe(keyBy('sideCount'), mapValues('name'))(CHART_CONFIGS);\n\nconst formatValues: (values_: number | number[]) => Record<string, number> = pipe(\n values_ => flatten([values_]),\n values_ => values_.map((val: number, i: number): [string, number] => [`value${i + 1}`, val]),\n fromPairs\n);\n\n/* this convert incoming component data to rechart data structure */\nexport const formatData: (\n legend: {[ref: string]: string},\n data_: LearningProfileRadarChartPropTypes['data']\n) => FormatedDataType[] = (legend, data_) =>\n pipe(\n toPairs,\n map(([ref, values_]: [string, number | number[]]) => ({\n ...formatValues(values_),\n subject: legend[ref]\n }))\n )(data_);\n\nexport const LearningProfileRadarChart = ({\n data,\n legend,\n totalDataset,\n colors: colorsProps,\n onClick,\n width,\n height,\n margin\n}: LearningProfileRadarChartPropTypes) => {\n const [isMobile, setIsMobile] = useState(false);\n const [activeDot, setActiveDot] = useState<ActiveDotType>();\n\n const formatedColors = times(i => {\n if (!colorsProps?.length) return DEFAULT_COLORS;\n\n const colors = colorsProps[i];\n return colors ? Object.assign({}, DEFAULT_COLORS, colors) : DEFAULT_COLORS;\n })(totalDataset);\n\n const chartType: CHART_TYPE_TYPE = useMemo(\n () => getOr('hexagon', size(data), CHART_CONFIGS_BY_SIDE_COUNT),\n [data]\n );\n\n const gradients = useMemo(\n () =>\n formatedColors.map(({gradient: {fill, stroke}}, index) => (\n <svg key={`gradient-${index}`}>\n <Gradient type={`fill-${index}`} colors={fill} />\n <Gradient type={`stroke-${index}`} colors={stroke} />\n </svg>\n )),\n [formatedColors]\n );\n\n const userAgent = navigator?.userAgent;\n const isMobile_ = useMemo(() => getIsMobile(userAgent), [userAgent]);\n\n const setIsMobile_ = useCallback(() => {\n setIsMobile(isMobile_);\n }, [isMobile_]);\n\n useEffect(() => setIsMobile_(), [setIsMobile_]);\n\n useEffect(() => {\n const handleClick = () => {\n setActiveDot(undefined);\n onClick(undefined);\n };\n\n !isEmpty(activeDot) && window.addEventListener('click', handleClick);\n\n return () => {\n window.removeEventListener('click', handleClick);\n };\n }, [activeDot]);\n\n function handleOnDotClick(label: string) {\n const payload = formatedData.find(({subject}) => subject === label);\n if (!payload) return;\n\n const index = formatedData.indexOf(payload);\n const datakey = `value${index + 1}`;\n const skillRef = findKey(val => val === payload?.subject, legend);\n\n if (skillRef) {\n setActiveDot({\n key: datakey,\n value: payload[datakey],\n label: payload.subject\n });\n onClick(skillRef);\n }\n }\n\n function renderCustomLabel({\n x,\n y,\n payload: {value: label},\n index\n }: {\n x: number;\n y: number;\n payload: {value: string};\n index: number;\n }) {\n const currentData = formatedData.find(({subject}) => subject === label);\n const percentagesValues: number[] = pipe(\n omit('subject'),\n mapValues(value => `${value}%`),\n values\n )(currentData);\n\n return buildCustomLabel({\n index,\n x,\n y,\n percentagesValues,\n label,\n activeDot,\n chartType,\n formatedColors,\n onClick: handleOnDotClick\n });\n }\n const formatedData = useMemo(() => formatData(legend, data), [legend, data]);\n\n return (\n <RadarChart\n width={width}\n height={height}\n margin={margin ?? (isMobile ? {top: 80} : {top: 180})}\n cx=\"50%\"\n cy=\"50%\"\n outerRadius=\"80%\"\n data={formatedData}\n >\n {gradients}\n {buildRadars(totalDataset, handleOnDotClick, activeDot)}\n <PolarGrid strokeDasharray={10} strokeWidth={2} radialLines={false} />\n <PolarAngleAxis dataKey=\"subject\" tick={!isMobile && renderCustomLabel} />\n <PolarRadiusAxis tick={false} axisLine={false} domain={[0, 100]} />\n {isMobile ? <Tooltip cursor={false} content={<CustomTooltip />} /> : null}\n </RadarChart>\n );\n};\n\nconst ResponsiveLearningProfileRadarChart = (props: LearningProfileRadarChartPropTypes) => (\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <LearningProfileRadarChart {...props} />\n </ResponsiveContainer>\n);\n\nLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\nResponsiveLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\n\nexport default ResponsiveLearningProfileRadarChart;\n"],"mappings":"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"}
|
|
@@ -73,10 +73,16 @@ export declare type LearningProfileRadarChartPropTypes = {
|
|
|
73
73
|
[ref: string]: string;
|
|
74
74
|
};
|
|
75
75
|
totalDataset: number;
|
|
76
|
-
onClick: (skillRef
|
|
76
|
+
onClick: (skillRef?: string) => void;
|
|
77
77
|
colors?: ColorType[];
|
|
78
78
|
width?: number;
|
|
79
79
|
height?: number;
|
|
80
|
+
margin?: {
|
|
81
|
+
top?: number;
|
|
82
|
+
right?: number;
|
|
83
|
+
bottom?: number;
|
|
84
|
+
left?: number;
|
|
85
|
+
};
|
|
80
86
|
};
|
|
81
87
|
export declare type CustomDotPropTypes = {
|
|
82
88
|
cx: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,kCAAkC;;;;;;;;;;;;;;;;;;;;;CAuB9C,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;CAmB9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;CAQlC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;CAG7B,CAAC;AAGF,oBAAY,SAAS,GAAG;IACtB,QAAQ,CAAC,EAAE;QACT,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;KACnB,CAAC;IACF,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,oBAAY,kCAAkC,GAAG;IAC/C,IAAI,EAAE;QACJ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;KAClC,CAAC;IACF,MAAM,EAAE;QACN,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":["PropTypes","learningProfileRadarChartPropTypes","data","objectOf","oneOfType","arrayOf","number","isRequired","totalDataset","onDotClick","func","colors","shape","gradient","fill","string","stroke","percentage","color","background","label","width","height","customDotPropTypes","cx","cy","payload","value","subject","name","index","activeDot","key","dataKey","customTooltipPropTypes","active","bool","gradientPropTypes","type"],"sources":["../../../src/molecule/learning-profile-radar-chart/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\n// PROPTYPES\nexport const learningProfileRadarChartPropTypes = {\n data: PropTypes.objectOf(\n PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number])\n ).isRequired,\n totalDataset: PropTypes.number.isRequired,\n onDotClick: PropTypes.func,\n colors: PropTypes.arrayOf(\n PropTypes.shape({\n gradient: PropTypes.shape({\n fill: PropTypes.arrayOf(PropTypes.string),\n stroke: PropTypes.arrayOf(PropTypes.string)\n }),\n percentage: PropTypes.shape({\n color: PropTypes.string,\n background: PropTypes.string\n }),\n label: PropTypes.shape({\n color: PropTypes.string\n })\n })\n ),\n width: PropTypes.number,\n height: PropTypes.number\n};\n\nexport const customDotPropTypes = {\n cx: PropTypes.number,\n cy: PropTypes.number,\n payload: PropTypes.shape({\n payload: PropTypes.shape({\n value: PropTypes.number,\n subject: PropTypes.string\n }),\n name: PropTypes.string\n }),\n onDotClick: PropTypes.func,\n index: PropTypes.number,\n activeDot: PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.number,\n key: PropTypes.string\n }),\n dataKey: PropTypes.string,\n stroke: PropTypes.string\n};\n\nexport const customTooltipPropTypes = {\n active: PropTypes.bool,\n payload: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.number\n })\n ),\n label: PropTypes.string\n};\n\nexport const gradientPropTypes = {\n type: PropTypes.string,\n colors: PropTypes.arrayOf(PropTypes.string)\n};\n\n// TYPES\nexport type ColorType = {\n gradient?: {\n fill?: string[];\n stroke?: string[];\n };\n percentage?: {\n color?: string;\n background?: string;\n };\n label?: {\n color?: string;\n };\n};\n\nexport type LearningProfileRadarChartPropTypes = {\n data: {\n [ref: string]: number | number[];\n };\n legend: {\n [ref: string]: string;\n };\n totalDataset: number;\n onClick: (skillRef
|
|
1
|
+
{"version":3,"file":"types.js","names":["PropTypes","learningProfileRadarChartPropTypes","data","objectOf","oneOfType","arrayOf","number","isRequired","totalDataset","onDotClick","func","colors","shape","gradient","fill","string","stroke","percentage","color","background","label","width","height","customDotPropTypes","cx","cy","payload","value","subject","name","index","activeDot","key","dataKey","customTooltipPropTypes","active","bool","gradientPropTypes","type"],"sources":["../../../src/molecule/learning-profile-radar-chart/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\n// PROPTYPES\nexport const learningProfileRadarChartPropTypes = {\n data: PropTypes.objectOf(\n PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number])\n ).isRequired,\n totalDataset: PropTypes.number.isRequired,\n onDotClick: PropTypes.func,\n colors: PropTypes.arrayOf(\n PropTypes.shape({\n gradient: PropTypes.shape({\n fill: PropTypes.arrayOf(PropTypes.string),\n stroke: PropTypes.arrayOf(PropTypes.string)\n }),\n percentage: PropTypes.shape({\n color: PropTypes.string,\n background: PropTypes.string\n }),\n label: PropTypes.shape({\n color: PropTypes.string\n })\n })\n ),\n width: PropTypes.number,\n height: PropTypes.number\n};\n\nexport const customDotPropTypes = {\n cx: PropTypes.number,\n cy: PropTypes.number,\n payload: PropTypes.shape({\n payload: PropTypes.shape({\n value: PropTypes.number,\n subject: PropTypes.string\n }),\n name: PropTypes.string\n }),\n onDotClick: PropTypes.func,\n index: PropTypes.number,\n activeDot: PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.number,\n key: PropTypes.string\n }),\n dataKey: PropTypes.string,\n stroke: PropTypes.string\n};\n\nexport const customTooltipPropTypes = {\n active: PropTypes.bool,\n payload: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.number\n })\n ),\n label: PropTypes.string\n};\n\nexport const gradientPropTypes = {\n type: PropTypes.string,\n colors: PropTypes.arrayOf(PropTypes.string)\n};\n\n// TYPES\nexport type ColorType = {\n gradient?: {\n fill?: string[];\n stroke?: string[];\n };\n percentage?: {\n color?: string;\n background?: string;\n };\n label?: {\n color?: string;\n };\n};\n\nexport type LearningProfileRadarChartPropTypes = {\n data: {\n [ref: string]: number | number[];\n };\n legend: {\n [ref: string]: string;\n };\n totalDataset: number;\n onClick: (skillRef?: string) => void;\n colors?: ColorType[];\n width?: number;\n height?: number;\n margin?: {\n top?: number;\n right?: number;\n bottom?: number;\n left?: number;\n };\n};\n\nexport type CustomDotPropTypes = {\n cx: number;\n cy: number;\n payload: {\n payload: {\n value: number;\n subject: string;\n };\n name: string;\n };\n onDotClick: (name: string) => void;\n index: number;\n activeDot?: {\n label: string;\n value: number;\n key: string;\n };\n dataKey: string;\n stroke: string;\n};\n\nexport type CustomTooltipPropTypes = {\n active: boolean;\n payload: {\n value: number;\n }[];\n label: string;\n};\n\nexport type GradientPropTypes = {\n type: string;\n colors: string[];\n};\n\nexport type TickType = {\n offset: {x: number; y: number};\n alignment: 'center' | 'start' | 'end';\n margin?: 'auto';\n marginLeft?: 'auto';\n marginRight?: 'auto';\n};\n\nexport type FormatedColorsType = {\n gradient: {\n fill: string[];\n stroke: string[];\n };\n percentage: {\n color: string;\n background: string;\n };\n label: {\n color: string;\n };\n};\n\nexport type FormatedDataType = {\n subject: string;\n} & {\n [key: string]: number | string;\n};\n\nexport type ActiveDotType = {\n key: string;\n value: number | string;\n label: string;\n};\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB,C,CAEA;;AACA,OAAO,MAAMC,kCAAkC,GAAG;EAChDC,IAAI,EAAEF,SAAS,CAACG,QAAV,CACJH,SAAS,CAACI,SAAV,CAAoB,CAACJ,SAAS,CAACK,OAAV,CAAkBL,SAAS,CAACM,MAA5B,CAAD,EAAsCN,SAAS,CAACM,MAAhD,CAApB,CADI,EAEJC,UAH8C;EAIhDC,YAAY,EAAER,SAAS,CAACM,MAAV,CAAiBC,UAJiB;EAKhDE,UAAU,EAAET,SAAS,CAACU,IAL0B;EAMhDC,MAAM,EAAEX,SAAS,CAACK,OAAV,CACNL,SAAS,CAACY,KAAV,CAAgB;IACdC,QAAQ,EAAEb,SAAS,CAACY,KAAV,CAAgB;MACxBE,IAAI,EAAEd,SAAS,CAACK,OAAV,CAAkBL,SAAS,CAACe,MAA5B,CADkB;MAExBC,MAAM,EAAEhB,SAAS,CAACK,OAAV,CAAkBL,SAAS,CAACe,MAA5B;IAFgB,CAAhB,CADI;IAKdE,UAAU,EAAEjB,SAAS,CAACY,KAAV,CAAgB;MAC1BM,KAAK,EAAElB,SAAS,CAACe,MADS;MAE1BI,UAAU,EAAEnB,SAAS,CAACe;IAFI,CAAhB,CALE;IASdK,KAAK,EAAEpB,SAAS,CAACY,KAAV,CAAgB;MACrBM,KAAK,EAAElB,SAAS,CAACe;IADI,CAAhB;EATO,CAAhB,CADM,CANwC;EAqBhDM,KAAK,EAAErB,SAAS,CAACM,MArB+B;EAsBhDgB,MAAM,EAAEtB,SAAS,CAACM;AAtB8B,CAA3C;AAyBP,OAAO,MAAMiB,kBAAkB,GAAG;EAChCC,EAAE,EAAExB,SAAS,CAACM,MADkB;EAEhCmB,EAAE,EAAEzB,SAAS,CAACM,MAFkB;EAGhCoB,OAAO,EAAE1B,SAAS,CAACY,KAAV,CAAgB;IACvBc,OAAO,EAAE1B,SAAS,CAACY,KAAV,CAAgB;MACvBe,KAAK,EAAE3B,SAAS,CAACM,MADM;MAEvBsB,OAAO,EAAE5B,SAAS,CAACe;IAFI,CAAhB,CADc;IAKvBc,IAAI,EAAE7B,SAAS,CAACe;EALO,CAAhB,CAHuB;EAUhCN,UAAU,EAAET,SAAS,CAACU,IAVU;EAWhCoB,KAAK,EAAE9B,SAAS,CAACM,MAXe;EAYhCyB,SAAS,EAAE/B,SAAS,CAACY,KAAV,CAAgB;IACzBQ,KAAK,EAAEpB,SAAS,CAACe,MADQ;IAEzBY,KAAK,EAAE3B,SAAS,CAACM,MAFQ;IAGzB0B,GAAG,EAAEhC,SAAS,CAACe;EAHU,CAAhB,CAZqB;EAiBhCkB,OAAO,EAAEjC,SAAS,CAACe,MAjBa;EAkBhCC,MAAM,EAAEhB,SAAS,CAACe;AAlBc,CAA3B;AAqBP,OAAO,MAAMmB,sBAAsB,GAAG;EACpCC,MAAM,EAAEnC,SAAS,CAACoC,IADkB;EAEpCV,OAAO,EAAE1B,SAAS,CAACK,OAAV,CACPL,SAAS,CAACY,KAAV,CAAgB;IACde,KAAK,EAAE3B,SAAS,CAACM;EADH,CAAhB,CADO,CAF2B;EAOpCc,KAAK,EAAEpB,SAAS,CAACe;AAPmB,CAA/B;AAUP,OAAO,MAAMsB,iBAAiB,GAAG;EAC/BC,IAAI,EAAEtC,SAAS,CAACe,MADe;EAE/BJ,MAAM,EAAEX,SAAS,CAACK,OAAV,CAAkBL,SAAS,CAACe,MAA5B;AAFuB,CAA1B,C,CAKP"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export default SkillPickerModal;
|
|
2
|
+
declare function SkillPickerModal(props: any, context: any): JSX.Element | null;
|
|
3
|
+
declare namespace SkillPickerModal {
|
|
4
|
+
namespace contextTypes {
|
|
5
|
+
const translate: PropTypes.Requireable<(...args: any[]) => any>;
|
|
6
|
+
}
|
|
7
|
+
namespace propTypes {
|
|
8
|
+
const skills: PropTypes.Requireable<(string | null | undefined)[]>;
|
|
9
|
+
const selectedSkills: PropTypes.Requireable<(string | null | undefined)[]>;
|
|
10
|
+
const skillsLocales: PropTypes.Requireable<{
|
|
11
|
+
[x: string]: string | null | undefined;
|
|
12
|
+
}>;
|
|
13
|
+
const isOpen: PropTypes.Requireable<boolean>;
|
|
14
|
+
const isLoading: PropTypes.Requireable<boolean>;
|
|
15
|
+
const minSelectedSkills: PropTypes.Requireable<number>;
|
|
16
|
+
const maxSelectedSkills: PropTypes.Requireable<number>;
|
|
17
|
+
const onCancel: PropTypes.Requireable<(...args: any[]) => any>;
|
|
18
|
+
const onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
|
|
19
|
+
const onClose: PropTypes.Requireable<(...args: any[]) => any>;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
import PropTypes from "prop-types";
|
|
23
|
+
//# sourceMappingURL=index.d.ts.map
|