-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
363 lines (339 loc) · 18.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
<!DOCTYPE html>
<html lang="en"> <!-- index.html -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Performance Assessment</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
</head>
<body>
<img height="150" src="logo.png" width="150" alt="Peter Caron Consulting OÜ">
<h1>Performance Assessment</h1>
The main goal of a performance assessment is to evaluate an employee's job performance in accordance with predefined standards and criteria.
Organisations may pinpoint their strengths and weaknesses, celebrate accomplishments and address areas for development which may be enhanced through performance improvement planning.
<p>This assessment is not meant to be a comprehensive evaluation of an employee's performance but a tool to help you identify areas for improvement.</p>
<p>The assessment is divided into 4 themes and 12 categories and each category has 5 ratings. The ratings are as follows:</p>
<ul>
<li>0 - Not Applicable</li>
<li>1 - Very Poor</li>
<li>2 - Poor</li>
<li>3 - Fair</li>
<li>4 - Good</li>
<li>5 - Excellent</li>
</ul>
<h2>Date: <span id="currentDate"></span></h2>
<form id="employeeNameForm">
<label for="employeeNameForm">Name:</label>
<label>
<input type="text" id=employeeName name="employeeName" placeholder="Name" required>
</label>
</form>
<form id="inputForm">
<h3>Strategic Vision and Business Alignment</h3>
<div class="field">
<input type="number" id="sharedVision" name="sharedVision" min="0" max="5" value="0">
<label for="sharedVision"><strong>Shared Vision:</strong> Consistently demonstrates alignment between personal objectives and company vision through actions and decisions.</label>
</div>
<!-- [Previous form fields remain the same...] -->
<!-- Adding rest of the form fields from the original HTML -->
<div class="field">
<input type="number" id="strategy" name="strategy" min="0" max="5" value="0">
<label for="strategy"><strong>Strategy:</strong> Effectively develops strategic plans and translates them into actionable tactical steps.</label>
</div>
<div class="field">
<input type="number" id="businessAlignment" name="businessAlignment" min="0" max="5" value="0">
<label for="businessAlignment"><strong>Business Alignment:</strong> Demonstrates clear connection between daily activities and broader company objectives.</label>
</div>
<div class="field">
<input type="number" id="customerFocus" name="customerFocus" min="0" max="5" value="0">
<label for="customerFocus"><strong>Customer Focus:</strong> Consistently prioritises customer needs and satisfaction in decision-making and actions.</label>
</div>
<h3>Focus and Engagement</h3>
<div class="field">
<input type="number" id="crossFunctionalTeams" name="crossFunctionalTeams" min="0" max="5" value="0">
<label for="crossFunctionalTeams"><strong>Enables cross-functional work:</strong> Successfully builds relationships and collaborates across teams and departments to achieve shared objectives.</label>
</div>
<div class="field">
<input type="number" id="clarityInPriorities" name="clarityInPriorities" min="0" max="5" value="0">
<label for="clarityInPriorities"><strong>Clarity of Priorities:</strong> Systematically evaluates and ranks tasks based on importance, ensuring efficient execution.</label>
</div>
<div class="field">
<input type="number" id="acceptanceCriteria" name="acceptanceCriteria" min="0" max="5" value="0">
<label for="acceptanceCriteria"><strong>Acceptance Criteria:</strong> Clearly defines and communicates quality standards for deliverables.</label>
</div>
<div class="field">
<input type="number" id="enablingFocus" name="enablingFocus" min="0" max="5" value="0">
<label for="enablingFocus"><strong>Focus:</strong> Creates clear roadmaps with specific milestones and maintains team focus on key objectives.</label>
</div>
<div class="field">
<input type="number" id="engagement" name="engagement" min="0" max="5" value="0">
<label for="engagement"><strong>Engagement:</strong> Shows consistent enthusiasm and dedication in approaching work responsibilities.</label>
</div>
<h3>Autonomy and Change</h3>
<div class="field">
<input type="number" id="feedback" name="feedback" min="0" max="5" value="0">
<label for="feedback"><strong>Feedback:</strong> Delivers constructive feedback effectively while remaining open and responsive to receiving input from others.</label>
</div>
<div class="field">
<input type="number" id="enablingAutonomy" name="enablingAutonomy" min="0" max="5" value="0">
<label for="enablingAutonomy"><strong>Enables Autonomy:</strong> Empowers team members to make decisions and innovate within appropriate boundaries.</label>
</div>
<div class="field">
<input type="number" id="changeAndAmbiguity" name="changeAndAmbiguity" min="0" max="5" value="0">
<label for="changeAndAmbiguity"><strong>Change and Ambiguity:</strong> Maintains effectiveness and adapts quickly when facing uncertain or changing circumstances.</label>
</div>
<div class="field">
<input type="number" id="desiredCulture" name="desiredCulture" min="0" max="5" value="0">
<label for="desiredCulture"><strong>Desired Culture:</strong> Demonstrates and promotes behaviours that align with and strengthen company values.</label>
</div>
<div class="field">
<input type="number" id="workAutonomously" name="workAutonomously" min="0" max="5" value="0">
<label for="workAutonomously"><strong>Works Autonomously:</strong> Effectively self-manages time and priorities to deliver optimal results independently.</label>
</div>
<h3>Stakeholders and Team</h3>
<div class="field">
<input type="number" id="stakeholders" name="stakeholders" min="0" max="5" value="0">
<label for="stakeholders"><strong>Stakeholders:</strong> Identifies key stakeholders and demonstrates a deep understanding of their explicit and implicit needs.</label>
</div>
<div class="field">
<input type="number" id="teamAttrition" name="teamAttrition" min="0" max="5" value="0">
<label for="teamAttrition"><strong>Team Attrition:</strong> Maintains strong working relationships that inspire loyalty and respect from team members.</label>
</div>
<div class="field">
<input type="number" id="teams" name="teams" min="0" max="5" value="0">
<label for="teams"><strong>Team Focus:</strong> Consistently prioritises team success over individual recognition or achievement.</label>
</div>
<div class="field">
<input type="number" id="developingPeople" name="developingPeople" min="0" max="5" value="0">
<label for="developingPeople"><strong>Develops People:</strong> Actively identifies and creates opportunities for team members' professional growth and skill development.</label>
</div>
<div class="field">
<input type="number" id="subordinatesForSuccess" name="subordinatesForSuccess" min="0" max="5" value="0">
<label for="subordinatesForSuccess"><strong>Prepare subordinates for success:</strong> Actively mentors and provides resources to direct reports to help them achieve their goals.</label>
</div>
</form>
<!--<div class="btn-group">-->
<!--<button type="button" onclick="updateChartAndSave()">Update Chart</button>-->
<!--button type="button" onclick="saveOnly()">Save to CSV</button-->
<!--</div>-->
<div class="chart-container">
<canvas id="performanceChart"></canvas>
</div>
<script>
// Set current date
document.getElementById('currentDate').textContent = new Date().toLocaleDateString();
// Initialize the chart
let performanceChart = null;
function initializeChart() {
const ctx = document.getElementById('performanceChart').getContext('2d');
const themes = {
'Strategic Vision': {
color: 'rgba(255, 99, 132, %a)',
metrics: [
{id: 'sharedVision', label: 'Shared Vision'},
{id: 'strategy', label: 'Strategy'},
{id: 'businessAlignment', label: 'Business Alignment'},
{id: 'customerFocus', label: 'Customer Focus'}
]
},
'Focus and Engagement': {
color: 'rgba(54, 162, 235, %a)',
metrics: [
{id: 'crossFunctionalTeams', label: 'Cross-Functional Teams'},
{id: 'clarityInPriorities', label: 'Clarity in Priorities'},
{id: 'acceptanceCriteria', label: 'Acceptance Criteria'},
{id: 'enablingFocus', label: 'Enabling Focus'},
{id: 'engagement', label: 'Engagement'}
]
},
'Autonomy and Change': {
color: 'rgba(255, 206, 86, %a)',
metrics: [
{id: 'feedback', label: 'Feedback'},
{id: 'enablingAutonomy', label: 'Enabling Autonomy'},
{id: 'changeAndAmbiguity', label: 'Change and Ambiguity'},
{id: 'desiredCulture', label: 'Desired Culture'},
{id: 'workAutonomously', label: 'Works Autonomously'}
]
},
'Stakeholders and Team': {
color: 'rgba(75, 192, 192, %a)',
metrics: [
{id: 'stakeholders', label: 'Stakeholders'},
{id: 'teamAttrition', label: 'Team Attrition'},
{id: 'teams', label: 'Teams'},
{id: 'developingPeople', label: 'Developing People'},
{id: 'subordinatesForSuccess', label: 'Subordinates for Success'}
]
}
};
const labels = [];
const backgroundColor = [];
const borderColor = [];
Object.entries(themes).forEach(([theme, themeData]) => {
themeData.metrics.forEach(metric => {
labels.push(`${theme}: ${metric.label}`);
backgroundColor.push(themeData.color.replace('%a', '0.5'));
borderColor.push(themeData.color.replace('%a', '1'));
});
});
performanceChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: labels,
datasets: [{
data: new Array(labels.length).fill(0),
backgroundColor: backgroundColor,
borderColor: borderColor,
borderWidth: 1
}]
},
options: {
scales: {
r: {
min: 0,
max: 5,
ticks: {
stepSize: 1,
display: true,
backdropColor: 'rgba(255, 255, 255, 0.8)',
},
grid: {
circular: true,
color: 'rgba(0, 0, 0, 0.1)'
},
angleLines: {
display: true,
color: 'rgba(0, 0, 0, 0.1)'
},
pointLabels: {
display: true,
centerPointLabels: true,
font: {
size: 10
},
callback: function (label) {
// Split the label at the colon and return only the metric name
return label.split(': ')[1];
}
}
}
},
plugins: {
legend: {
position: 'top',
labels: {
generateLabels: function (chart) {
// Return only the four main themes for the legend
return [{
text: 'Strategic Vision',
fillStyle: 'rgba(255, 99, 132, 0.5)',
strokeStyle: 'rgba(255, 99, 132, 1)',
lineWidth: 1,
hidden: false,
}, {
text: 'Focus and Engagement',
fillStyle: 'rgba(54, 162, 235, 0.5)',
strokeStyle: 'rgba(54, 162, 235, 1)',
lineWidth: 1,
hidden: false,
}, {
text: 'Autonomy and Change',
fillStyle: 'rgba(255, 206, 86, 0.5)',
strokeStyle: 'rgba(255, 206, 86, 1)',
lineWidth: 1,
hidden: false,
}, {
text: 'Stakeholders and Team',
fillStyle: 'rgba(75, 192, 192, 0.5)',
strokeStyle: 'rgba(75, 192, 192, 1)',
lineWidth: 1,
hidden: false,
}];
}
},
},
title: {
display: true,
//text: document.getElementById('employeeName') + ' - ' + 'Results'
text: 'Results'
},
tooltip: {
callbacks: {
label: (context) => `Score: ${context.formattedValue}`
}
}
}
}
});
}
// Initialize chart when page loads
document.addEventListener('DOMContentLoaded', initializeChart);
function updateChart() {
const themes = {
'Strategic Vision': {
metrics: ['sharedVision', 'strategy', 'businessAlignment', 'customerFocus']
},
'Focus and Engagement': {
metrics: ['crossFunctionalTeams', 'clarityInPriorities', 'acceptanceCriteria', 'enablingFocus', 'engagement']
},
'Autonomy and Change': {
metrics: ['feedback', 'enablingAutonomy', 'changeAndAmbiguity', 'desiredCulture', 'workAutonomously']
},
'Stakeholders and Team': {
metrics: ['stakeholders', 'teamAttrition', 'teams', 'developingPeople', 'subordinatesForSuccess']
}
};
const values = [];
Object.values(themes).forEach(theme => {
theme.metrics.forEach(metricId => {
const value = parseFloat(document.getElementById(metricId).value);
values.push(isNaN(value) ? 0 : value);
});
});
performanceChart.data.datasets[0].data = values;
performanceChart.update();
}
let currentEmployeeName = '';
// Add event listener for employee name input
document.getElementById('employeeName').addEventListener('input', function (e) {
currentEmployeeName = e.target.value.trim();
// Also update the chart title if needed
if (performanceChart) {
performanceChart.options.plugins.title.text = currentEmployeeName ? `${currentEmployeeName} - Results` : 'Results';
performanceChart.update();
}
});
async function saveOnly() {
const formData = new FormData(document.getElementById('inputForm'));
let csvContent = "Categories,Ratings\n";
for (let [key, value] of formData.entries()) {
csvContent += `${key},${value}\n`;
}
// Create and trigger download
const blob = new Blob([csvContent], {type: 'text/csv;charset=utf-8;'});
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
// Use the employee name for the filename if available, otherwise use default
const filename = currentEmployeeName
? `${currentEmployeeName.replace(/[^a-z0-9]/gi, '_')}_assessment.csv`
: "user_assessment.csv";
link.setAttribute("download", filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
// Add event listeners to all inputs to update chart on change
document.querySelectorAll('input[type="number"]').forEach(input => {
input.addEventListener('change', () => {
updateChart();
});
});
</script>
<div class="btn-group">
<!--<button type="button" onclick="updateChartAndSave()">Update Chart</button>-->
<button type="button" onclick="saveOnly()">Save to CSV</button>
</div>
</body>
</html>