@syscore/ui-library 1.1.11 → 1.1.12
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/client/ui/WELLDashboard/index.tsx +147 -51
- package/dist/ui/index.cjs.js +1 -1
- package/dist/ui/index.d.ts +9 -1
- package/dist/ui/index.es.js +2151 -527
- package/package.json +1 -1
|
@@ -30,34 +30,84 @@ const defaultCertifications: CertificationLevel[] = [
|
|
|
30
30
|
{ name: "Gold", locations: 1, color: "#D7C686", icon: "gold" },
|
|
31
31
|
{ name: "Silver", locations: 1, color: "#C0C2C4", icon: "silver" },
|
|
32
32
|
{ name: "Bronze", locations: 1, color: "#D1A778", icon: "bronze" },
|
|
33
|
-
{
|
|
33
|
+
{
|
|
34
|
+
name: "Precertified",
|
|
35
|
+
locations: 1,
|
|
36
|
+
color: "#44B0BC",
|
|
37
|
+
icon: "precertified",
|
|
38
|
+
},
|
|
34
39
|
];
|
|
35
40
|
|
|
36
41
|
const defaultRatings: RatingCategory[] = [
|
|
37
|
-
{
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
42
|
+
{
|
|
43
|
+
name: "Health-Safety",
|
|
44
|
+
locations: 1,
|
|
45
|
+
color: "#7FB3DC",
|
|
46
|
+
percentage: 50,
|
|
47
|
+
icon: "health",
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: "Equity",
|
|
51
|
+
locations: 1,
|
|
52
|
+
color: "#41937D",
|
|
53
|
+
percentage: 67,
|
|
54
|
+
icon: "equity",
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
name: "Performance",
|
|
58
|
+
locations: "Not Pursued",
|
|
59
|
+
color: "#0B667F",
|
|
60
|
+
percentage: 2,
|
|
61
|
+
icon: "performance",
|
|
62
|
+
inactive: true,
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
name: "Coworking",
|
|
66
|
+
locations: "Not Pursued",
|
|
67
|
+
color: "#AD7DA3",
|
|
68
|
+
percentage: 2,
|
|
69
|
+
icon: "coworking",
|
|
70
|
+
inactive: true,
|
|
71
|
+
},
|
|
41
72
|
];
|
|
42
73
|
|
|
43
|
-
export const WELLDashboard = React.forwardRef<
|
|
44
|
-
|
|
74
|
+
export const WELLDashboard = React.forwardRef<
|
|
75
|
+
HTMLDivElement,
|
|
76
|
+
WELLDashboardProps
|
|
77
|
+
>(
|
|
78
|
+
(
|
|
79
|
+
{
|
|
80
|
+
certifiedPercentage = 60,
|
|
81
|
+
certifications = defaultCertifications,
|
|
82
|
+
ratings = defaultRatings,
|
|
83
|
+
className,
|
|
84
|
+
},
|
|
85
|
+
ref,
|
|
86
|
+
) => {
|
|
45
87
|
return (
|
|
46
88
|
<div ref={ref} className={cn("flex flex-col gap-4", className)}>
|
|
47
89
|
<div className="flex flex-col lg:flex-row gap-4">
|
|
48
90
|
{/* WELL Certified Locations Card */}
|
|
49
91
|
<div className="flex-1 min-w-0 rounded-md border border-[#DEDEE5] bg-white/0 p-4 shadow-xs">
|
|
50
|
-
<h2
|
|
92
|
+
<h2
|
|
93
|
+
className="text-xl font-medium text-[#3D3E46] text-center mb-6"
|
|
94
|
+
style={{ fontFamily: "'DM Sans', sans-serif" }}
|
|
95
|
+
>
|
|
51
96
|
WELL Certified Locations
|
|
52
97
|
</h2>
|
|
53
|
-
|
|
98
|
+
|
|
54
99
|
<div className="flex flex-col md:flex-row justify-center items-center gap-10">
|
|
55
100
|
{/* Circular Progress Chart */}
|
|
56
101
|
<div className="relative w-60 h-60 shrink-0">
|
|
57
|
-
<svg
|
|
102
|
+
<svg
|
|
103
|
+
width="240"
|
|
104
|
+
height="240"
|
|
105
|
+
viewBox="0 0 240 240"
|
|
106
|
+
className="transform -rotate-90"
|
|
107
|
+
>
|
|
58
108
|
{/* Background circle */}
|
|
59
109
|
<circle cx="120" cy="120" r="120" fill="#F5F9FB" />
|
|
60
|
-
|
|
110
|
+
|
|
61
111
|
{/* Progress segments */}
|
|
62
112
|
<circle
|
|
63
113
|
cx="120"
|
|
@@ -69,15 +119,16 @@ export const WELLDashboard = React.forwardRef<HTMLDivElement, WELLDashboardProps
|
|
|
69
119
|
strokeDasharray={`${(certifiedPercentage / 100) * 628} 628`}
|
|
70
120
|
strokeLinecap="round"
|
|
71
121
|
/>
|
|
72
|
-
|
|
122
|
+
|
|
73
123
|
{/* Certification level arcs */}
|
|
74
124
|
{certifications.map((cert, index) => {
|
|
75
125
|
const totalSegments = certifications.length;
|
|
76
|
-
const segmentAngle =
|
|
126
|
+
const segmentAngle =
|
|
127
|
+
((certifiedPercentage / 100) * 360) / totalSegments;
|
|
77
128
|
const startAngle = index * segmentAngle;
|
|
78
129
|
const arcLength = (segmentAngle * Math.PI * 100) / 180;
|
|
79
130
|
const offset = (startAngle * Math.PI * 100) / 180;
|
|
80
|
-
|
|
131
|
+
|
|
81
132
|
return (
|
|
82
133
|
<circle
|
|
83
134
|
key={cert.name}
|
|
@@ -93,27 +144,39 @@ export const WELLDashboard = React.forwardRef<HTMLDivElement, WELLDashboardProps
|
|
|
93
144
|
/>
|
|
94
145
|
);
|
|
95
146
|
})}
|
|
96
|
-
|
|
147
|
+
|
|
97
148
|
{/* Inner white circle */}
|
|
98
|
-
<circle
|
|
149
|
+
<circle
|
|
150
|
+
cx="120"
|
|
151
|
+
cy="120"
|
|
152
|
+
r="80"
|
|
153
|
+
fill="white"
|
|
154
|
+
filter="drop-shadow(0 0 16px rgba(0,0,0,0.04))"
|
|
155
|
+
/>
|
|
99
156
|
</svg>
|
|
100
|
-
|
|
157
|
+
|
|
101
158
|
{/* Center text */}
|
|
102
159
|
<div className="absolute inset-0 flex flex-col items-center justify-center">
|
|
103
|
-
<div
|
|
160
|
+
<div
|
|
161
|
+
className="text-5xl font-medium text-[#327DB9]"
|
|
162
|
+
style={{ fontFamily: "'DM Sans', sans-serif" }}
|
|
163
|
+
>
|
|
104
164
|
{certifiedPercentage}%
|
|
105
165
|
</div>
|
|
106
|
-
<div
|
|
166
|
+
<div
|
|
167
|
+
className="text-sm font-medium text-[#78777F] mt-1"
|
|
168
|
+
style={{ fontFamily: "'DM Sans', sans-serif" }}
|
|
169
|
+
>
|
|
107
170
|
Certified
|
|
108
171
|
</div>
|
|
109
172
|
</div>
|
|
110
173
|
</div>
|
|
111
|
-
|
|
174
|
+
|
|
112
175
|
{/* Legend */}
|
|
113
176
|
<div className="flex flex-col gap-4 min-w-[160px]">
|
|
114
177
|
{certifications.map((cert) => (
|
|
115
178
|
<div key={cert.name} className="flex items-center gap-2">
|
|
116
|
-
<div
|
|
179
|
+
<div
|
|
117
180
|
className="w-10 h-10 rounded-full shrink-0 flex items-center justify-center"
|
|
118
181
|
style={{ backgroundColor: cert.color }}
|
|
119
182
|
>
|
|
@@ -124,13 +187,24 @@ export const WELLDashboard = React.forwardRef<HTMLDivElement, WELLDashboardProps
|
|
|
124
187
|
)}
|
|
125
188
|
</div>
|
|
126
189
|
<div className="flex flex-col gap-0.5 flex-1">
|
|
127
|
-
<div
|
|
190
|
+
<div
|
|
191
|
+
className="text-base font-medium text-[#3D3E46]"
|
|
192
|
+
style={{ fontFamily: "'DM Sans', sans-serif" }}
|
|
193
|
+
>
|
|
128
194
|
{cert.name}
|
|
129
195
|
</div>
|
|
130
196
|
<div className="flex items-center gap-1">
|
|
131
|
-
<Building2
|
|
132
|
-
|
|
133
|
-
|
|
197
|
+
<Building2
|
|
198
|
+
size={16}
|
|
199
|
+
className="text-[#327DB9]"
|
|
200
|
+
strokeWidth={1.2}
|
|
201
|
+
/>
|
|
202
|
+
<span
|
|
203
|
+
className="text-xs font-medium text-[#327DB9]"
|
|
204
|
+
style={{ fontFamily: "'DM Sans', sans-serif" }}
|
|
205
|
+
>
|
|
206
|
+
{cert.locations} Location
|
|
207
|
+
{cert.locations !== 1 ? "s" : ""}
|
|
134
208
|
</span>
|
|
135
209
|
</div>
|
|
136
210
|
</div>
|
|
@@ -139,13 +213,16 @@ export const WELLDashboard = React.forwardRef<HTMLDivElement, WELLDashboardProps
|
|
|
139
213
|
</div>
|
|
140
214
|
</div>
|
|
141
215
|
</div>
|
|
142
|
-
|
|
216
|
+
|
|
143
217
|
{/* WELL Rated Locations Card */}
|
|
144
218
|
<div className="flex-1 min-w-0 rounded-md border border-[#DEDEE5] bg-white/0 p-4 shadow-xs">
|
|
145
|
-
<h2
|
|
219
|
+
<h2
|
|
220
|
+
className="text-xl font-medium text-[#3D3E46] text-center mb-6"
|
|
221
|
+
style={{ fontFamily: "'DM Sans', sans-serif" }}
|
|
222
|
+
>
|
|
146
223
|
WELL Rated Locations
|
|
147
224
|
</h2>
|
|
148
|
-
|
|
225
|
+
|
|
149
226
|
<div className="flex flex-col md:flex-row justify-center items-center gap-10">
|
|
150
227
|
{/* Bar Chart */}
|
|
151
228
|
<div className="flex items-end gap-4 h-60 px-4">
|
|
@@ -154,9 +231,9 @@ export const WELLDashboard = React.forwardRef<HTMLDivElement, WELLDashboardProps
|
|
|
154
231
|
{/* Background */}
|
|
155
232
|
<div className="absolute inset-0 rounded-t border border-[#DEDEE5] bg-[#F5F9FB]" />
|
|
156
233
|
{/* Bar */}
|
|
157
|
-
<div
|
|
234
|
+
<div
|
|
158
235
|
className="absolute bottom-0 left-0 right-0 rounded-t transition-all"
|
|
159
|
-
style={{
|
|
236
|
+
style={{
|
|
160
237
|
backgroundColor: rating.color,
|
|
161
238
|
height: `${rating.percentage}%`,
|
|
162
239
|
}}
|
|
@@ -166,39 +243,50 @@ export const WELLDashboard = React.forwardRef<HTMLDivElement, WELLDashboardProps
|
|
|
166
243
|
{/* Y-axis */}
|
|
167
244
|
<div className="w-px h-60 bg-[#DEDEE5]" />
|
|
168
245
|
</div>
|
|
169
|
-
|
|
246
|
+
|
|
170
247
|
{/* Legend */}
|
|
171
248
|
<div className="flex flex-col gap-4 min-w-[160px]">
|
|
172
249
|
{ratings.map((rating) => (
|
|
173
|
-
<div
|
|
174
|
-
key={rating.name}
|
|
175
|
-
className={cn(
|
|
250
|
+
<div
|
|
251
|
+
key={rating.name}
|
|
252
|
+
className={cn(
|
|
253
|
+
"flex items-center gap-2",
|
|
254
|
+
rating.inactive && "opacity-50",
|
|
255
|
+
)}
|
|
176
256
|
>
|
|
177
|
-
<div
|
|
257
|
+
<div
|
|
178
258
|
className="w-10 h-10 rounded-full shrink-0 flex items-center justify-center"
|
|
179
259
|
style={{ backgroundColor: rating.color }}
|
|
180
260
|
/>
|
|
181
261
|
<div className="flex flex-col gap-0.5 flex-1">
|
|
182
|
-
<div
|
|
262
|
+
<div
|
|
263
|
+
className="text-base font-medium text-[#3D3E46]"
|
|
264
|
+
style={{ fontFamily: "'DM Sans', sans-serif" }}
|
|
265
|
+
>
|
|
183
266
|
{rating.name}
|
|
184
267
|
</div>
|
|
185
268
|
<div className="flex items-center gap-1">
|
|
186
|
-
<Building2
|
|
187
|
-
size={16}
|
|
188
|
-
className={
|
|
189
|
-
|
|
269
|
+
<Building2
|
|
270
|
+
size={16}
|
|
271
|
+
className={
|
|
272
|
+
rating.inactive
|
|
273
|
+
? "text-[#78777F]"
|
|
274
|
+
: "text-[#327DB9]"
|
|
275
|
+
}
|
|
276
|
+
strokeWidth={1.2}
|
|
190
277
|
/>
|
|
191
|
-
<span
|
|
278
|
+
<span
|
|
192
279
|
className={cn(
|
|
193
280
|
"text-xs font-medium",
|
|
194
|
-
rating.inactive
|
|
195
|
-
|
|
281
|
+
rating.inactive
|
|
282
|
+
? "text-[#78777F]"
|
|
283
|
+
: "text-[#327DB9]",
|
|
284
|
+
)}
|
|
196
285
|
style={{ fontFamily: "'DM Sans', sans-serif" }}
|
|
197
286
|
>
|
|
198
|
-
{typeof rating.locations ===
|
|
199
|
-
? `${rating.locations} Location${rating.locations !== 1 ?
|
|
200
|
-
: rating.locations
|
|
201
|
-
}
|
|
287
|
+
{typeof rating.locations === "number"
|
|
288
|
+
? `${rating.locations} Location${rating.locations !== 1 ? "s" : ""}`
|
|
289
|
+
: rating.locations}
|
|
202
290
|
</span>
|
|
203
291
|
</div>
|
|
204
292
|
</div>
|
|
@@ -208,14 +296,22 @@ export const WELLDashboard = React.forwardRef<HTMLDivElement, WELLDashboardProps
|
|
|
208
296
|
</div>
|
|
209
297
|
</div>
|
|
210
298
|
</div>
|
|
211
|
-
|
|
299
|
+
|
|
212
300
|
{/* Footer note */}
|
|
213
|
-
<p
|
|
214
|
-
|
|
301
|
+
<p
|
|
302
|
+
className="text-[10px] leading-3 font-medium text-[#78777F] text-center"
|
|
303
|
+
style={{ fontFamily: "'DM Sans', sans-serif" }}
|
|
304
|
+
>
|
|
305
|
+
Achievement metrics reflect all active program achievements, as of{" "}
|
|
306
|
+
{new Date().toLocaleDateString("en-US", {
|
|
307
|
+
month: "long",
|
|
308
|
+
day: "numeric",
|
|
309
|
+
year: "numeric",
|
|
310
|
+
})}
|
|
215
311
|
</p>
|
|
216
312
|
</div>
|
|
217
313
|
);
|
|
218
|
-
}
|
|
314
|
+
},
|
|
219
315
|
);
|
|
220
316
|
|
|
221
317
|
WELLDashboard.displayName = "WELLDashboard";
|