-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
254 lines (224 loc) · 12.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rideshare Metrics Calculator</title>
<!-- Include Tippy.js CSS -->
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css">
<!-- Your CSS Styles -->
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #2c3e50;
text-align: center;
}
#input-section, #output-section {
margin: 20px auto;
max-width: 800px;
}
label {
display: inline-block;
width: 200px;
margin-bottom: 10px;
}
input {
padding: 5px;
width: 200px;
margin-bottom: 10px;
}
button {
display: block;
margin: 20px auto;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
h2, h3 {
color: #34495e;
}
p {
font-size: 16px;
line-height: 1.5;
}
strong {
color: #2c3e50;
}
#output-section {
background-color: #f9f9f9;
padding: 20px;
border-radius: 10px;
}
.metric {
position: relative;
cursor: pointer;
border-bottom: 1px dashed #999;
}
@media screen and (max-width: 600px) {
label, input {
width: 100%;
display: block;
}
input {
margin-bottom: 20px;
}
}
</style>
</head>
<body>
<h1>Rideshare Metrics Calculator</h1>
<div id="input-section">
<h2>Input Your Data</h2>
<label for="totalEarnings">Total Earnings ($):</label>
<input type="number" id="totalEarnings" step="0.01" min="0"><br><br>
<label for="ridesCompleted">Rides Completed:</label>
<input type="number" id="ridesCompleted" min="0"><br><br>
<label for="ridesRejected">Rides Rejected:</label>
<input type="number" id="ridesRejected" min="0"><br><br>
<label for="onlineHours">Online Time:</label>
<input type="number" id="onlineHours" min="0" placeholder="Hours">
<input type="number" id="onlineMinutes" min="0" max="59" placeholder="Minutes"><br><br>
<label for="bookedHours">Booked Time:</label>
<input type="number" id="bookedHours" min="0" placeholder="Hours">
<input type="number" id="bookedMinutes" min="0" max="59" placeholder="Minutes"><br><br>
<label for="bookedMiles">Booked Miles:</label>
<input type="number" id="bookedMiles" step="0.01" min="0"><br><br>
</div>
<button onclick="calculateMetrics()">Calculate Metrics</button>
<div id="output-section">
<!-- Calculated metrics will be displayed here -->
</div>
<!-- Include Popper.js and Tippy.js -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
function calculateMetrics() {
// Retrieve input values
const totalEarnings = parseFloat(document.getElementById('totalEarnings').value);
const ridesCompleted = parseInt(document.getElementById('ridesCompleted').value);
const ridesRejected = parseInt(document.getElementById('ridesRejected').value);
const onlineHours = parseInt(document.getElementById('onlineHours').value);
const onlineMinutes = parseInt(document.getElementById('onlineMinutes').value);
const bookedHours = parseInt(document.getElementById('bookedHours').value);
const bookedMinutes = parseInt(document.getElementById('bookedMinutes').value);
const bookedMiles = parseFloat(document.getElementById('bookedMiles').value);
// Input validation
if (isNaN(totalEarnings) || isNaN(ridesCompleted) || isNaN(ridesRejected) ||
isNaN(onlineHours) || isNaN(onlineMinutes) || isNaN(bookedHours) ||
isNaN(bookedMinutes) || isNaN(bookedMiles)) {
alert('Please fill in all fields with valid numbers.');
return;
}
if (totalEarnings < 0 || ridesCompleted < 0 || ridesRejected < 0 ||
onlineHours < 0 || onlineMinutes < 0 || onlineMinutes >= 60 ||
bookedHours < 0 || bookedMinutes < 0 || bookedMinutes >= 60 ||
bookedMiles < 0) {
alert('Please enter valid positive numbers. Minutes should be between 0 and 59.');
return;
}
// Convert times to decimal hours
const onlineTime = onlineHours + (onlineMinutes / 60);
const bookedTime = bookedHours + (bookedMinutes / 60);
// Additional validation
if (bookedTime > onlineTime) {
alert('Booked Time cannot be greater than Online Time.');
return;
}
if (ridesCompleted === 0 || bookedTime === 0 || onlineTime === 0 || bookedMiles === 0) {
alert('Rides Completed, Booked Time, Online Time, and Booked Miles must be greater than zero.');
return;
}
// Calculations
const totalRequests = ridesCompleted + ridesRejected;
const acceptanceRate = (ridesCompleted / totalRequests) * 100;
const rejectionRate = (ridesRejected / totalRequests) * 100;
const rejectionToAcceptanceRatio = ridesRejected / ridesCompleted;
const earningsPerRide = totalEarnings / ridesCompleted;
const earningsPerBookedHour = totalEarnings / bookedTime;
const earningsPerOnlineHour = totalEarnings / onlineTime;
const earningsPerBookedMile = totalEarnings / bookedMiles;
const earningsPerRequest = totalEarnings / totalRequests;
const averageBookedMilesPerRide = bookedMiles / ridesCompleted;
const averageBookedTimePerRide = (bookedTime / ridesCompleted) * 60; // minutes
const averageOnlineTimePerRide = (onlineTime / ridesCompleted) * 60; // minutes
const utilizationRate = (bookedTime / onlineTime) * 100;
const totalIdleTime = onlineTime - bookedTime;
const percentageTimeSpentWaiting = ((onlineTime - bookedTime) / onlineTime) * 100;
const averageSpeedDuringBookedTime = bookedMiles / bookedTime;
const averageWaitingTimePerRide = ((onlineTime - bookedTime) / ridesCompleted) * 60; // minutes
const ridesPerOnlineHour = ridesCompleted / onlineTime;
const ridesPerBookedHour = ridesCompleted / bookedTime;
const averageEarningsPerMinuteOnline = totalEarnings / (onlineTime * 60);
const averageEarningsPerMinuteBooked = totalEarnings / (bookedTime * 60);
const idleTimePerRide = (totalIdleTime / ridesCompleted) * 60; // minutes
const earningsPerIdleHour = totalEarnings / totalIdleTime;
// Display results with tooltips
let output = `
<h2>Calculated Metrics</h2>
<h3>Ride Requests and Acceptance Metrics</h3>
<p><strong>Total Requests:</strong> <span class="metric" data-tippy-content="Total Requests = Rides Completed + Rides Rejected">
${totalRequests}</span></p>
<p><strong>Acceptance Rate:</strong> <span class="metric" data-tippy-content="Acceptance Rate = (Rides Completed / Total Requests) × 100%">
${acceptanceRate.toFixed(2)}%</span></p>
<p><strong>Rejection Rate:</strong> <span class="metric" data-tippy-content="Rejection Rate = (Rides Rejected / Total Requests) × 100%">
${rejectionRate.toFixed(2)}%</span></p>
<p><strong>Rejection to Acceptance Ratio:</strong> <span class="metric" data-tippy-content="Rejection to Acceptance Ratio = Rides Rejected / Rides Completed">
${rejectionToAcceptanceRatio.toFixed(2)}</span></p>
<h3>Time Metrics</h3>
<p><strong>Average Booked Time per Ride:</strong> <span class="metric" data-tippy-content="(Booked Time / Rides Completed) × 60">
${averageBookedTimePerRide.toFixed(2)} minutes</span></p>
<p><strong>Average Online Time per Ride:</strong> <span class="metric" data-tippy-content="(Online Time / Rides Completed) × 60">
${averageOnlineTimePerRide.toFixed(2)} minutes</span></p>
<p><strong>Average Waiting Time per Ride:</strong> <span class="metric" data-tippy-content="((Online Time - Booked Time) / Rides Completed) × 60">
${averageWaitingTimePerRide.toFixed(2)} minutes</span></p>
<p><strong>Utilization Rate:</strong> <span class="metric" data-tippy-content="(Booked Time / Online Time) × 100%">
${utilizationRate.toFixed(2)}%</span></p>
<p><strong>Percentage of Time Spent Waiting:</strong> <span class="metric" data-tippy-content="((Online Time - Booked Time) / Online Time) × 100%">
${percentageTimeSpentWaiting.toFixed(2)}%</span></p>
<p><strong>Total Idle Time:</strong> <span class="metric" data-tippy-content="Total Idle Time = Online Time - Booked Time">
${totalIdleTime.toFixed(2)} hours</span></p>
<h3>Distance Metrics</h3>
<p><strong>Average Booked Miles per Ride:</strong> <span class="metric" data-tippy-content="Booked Miles / Rides Completed">
${averageBookedMilesPerRide.toFixed(2)} miles</span></p>
<p><strong>Average Speed during Booked Time:</strong> <span class="metric" data-tippy-content="Booked Miles / Booked Time">
${averageSpeedDuringBookedTime.toFixed(2)} mph</span></p>
<h3>Earnings Metrics</h3>
<p><strong>Earnings per Ride:</strong> <span class="metric" data-tippy-content="Total Earnings / Rides Completed">
\$${earningsPerRide.toFixed(2)}</span></p>
<p><strong>Earnings per Booked Hour:</strong> <span class="metric" data-tippy-content="Total Earnings / Booked Time">
\$${earningsPerBookedHour.toFixed(2)}</span></p>
<p><strong>Earnings per Online Hour:</strong> <span class="metric" data-tippy-content="Total Earnings / Online Time">
\$${earningsPerOnlineHour.toFixed(2)}</span></p>
<p><strong>Earnings per Booked Mile:</strong> <span class="metric" data-tippy-content="Total Earnings / Booked Miles">
\$${earningsPerBookedMile.toFixed(2)}</span></p>
<p><strong>Earnings per Request:</strong> <span class="metric" data-tippy-content="Total Earnings / Total Requests">
\$${earningsPerRequest.toFixed(2)}</span></p>
<p><strong>Average Earnings per Minute Online:</strong> <span class="metric" data-tippy-content="Total Earnings / (Online Time × 60)">
\$${averageEarningsPerMinuteOnline.toFixed(3)}</span></p>
<p><strong>Average Earnings per Minute Booked:</strong> <span class="metric" data-tippy-content="Total Earnings / (Booked Time × 60)">
\$${averageEarningsPerMinuteBooked.toFixed(3)}</span></p>
<p><strong>Earnings per Idle Hour:</strong> <span class="metric" data-tippy-content="Total Earnings / Total Idle Time">
\$${earningsPerIdleHour.toFixed(2)}</span></p>
<h3>Productivity Metrics</h3>
<p><strong>Rides per Online Hour:</strong> <span class="metric" data-tippy-content="Rides Completed / Online Time">
${ridesPerOnlineHour.toFixed(2)} rides/hour</span></p>
<p><strong>Rides per Booked Hour:</strong> <span class="metric" data-tippy-content="Rides Completed / Booked Time">
${ridesPerBookedHour.toFixed(2)} rides/hour</span></p>
<p><strong>Idle Time per Ride:</strong> <span class="metric" data-tippy-content="(Total Idle Time / Rides Completed) × 60">
${idleTimePerRide.toFixed(2)} minutes</span></p>
`;
// Insert the output into the page
document.getElementById('output-section').innerHTML = output;
// Initialize Tippy.js on elements with class 'metric'
tippy('.metric', {
theme: 'light-border',
animation: 'fade',
arrow: true,
delay: [100, 100],
});
}
</script>
</body>
</html>