-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (112 loc) · 4.75 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
<!DOCTYPE html>
<html>
<head>
<title>Ticketmaster Salesforce Dashboard</title>
<link rel="stylesheet" type="text/css" href="https://cdn.mxpnl.com/libs/mixpanel-platform/css/reset.css">
<link rel="stylesheet" type="text/css" href="https://cdn.mxpnl.com/libs/mixpanel-platform/build/mixpanel-platform.v0.latest.min.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="css/content.css">
<link rel="stylesheet" type="text/css" href="css/tablesandcharts.css">
<script src="https://cdn.mxpnl.com/libs/mixpanel-platform/build/mixpanel-platform.v0.latest.min.js"></script>
</head>
<body class="mixpanel-platform-body mp-dashboard-body">
<!-- Modals (One to initiate app and one to flag errors) -->
<div class="initiation-modal">
<div class="initiation-modal-message" onclick="runQueries()">
Retrieve Data
</div>
</div>
<div class="error-modal">
<div class="error-modal-message hidden">
Error: Please refer to parent account for client adoption grade
</div>
</div>
<!-- Left-Hand Menu -->
<div class="mp-menu">
<div class="mp-menu-header">
<img class="logo-ticketmaster" src="assets/ticketmasterlogo.png">
<h1 class="mp-menu-header-title">APP METRICS</h1>
<hr class="mp-menu-header-divider">
</div>
<ul class="mp-menu-items">
<li id="app-adoption" class="mp-menu-item mp-selected-menu-item">
<div class="mp-menu-item-title">APP ADOPTION</div>
<hr class="mp-menu-divider">
</li>
<li id="user-leaderboard" class="mp-menu-item">
<div class="mp-menu-item-title">USER LEADERBOARD</div>
<hr class="mp-menu-divider">
</li>
<li id="usage" class="mp-menu-item">
<div class="mp-menu-item-title">USAGE: LAST 30 DAYS</div>
<hr class="mp-menu-divider">
</li>
</ul>
<div class="mp-menu-footer">
<hr class="mp-menu-divider">
<img class="logo-mixpanel" src="assets/mplogo.png">
</div>
</div>
<!-- Begin Dashboard Content -->
<div class="mp-content">
<div class="mp-container mp-grade-container mp-app-adoption">
<div class="mp-grade-title">OVERALL APP ADOPTION STATUS</div>
<div id="grade-value" class="mp-grade"></div>
<div class="mp-grade-explanation">
Please note, this scorecard is in Beta mode, and is strictly for internal use, and not to be shared with clients.
For details on how this grading is derived please click <a href='https://ticketmaster.my.salesforce.com/sfc/p/#A0000000Yo1o/a/12000000DuyB/XJsKW5QtGeBo5CmojQTPywdLLkqtGJzKWRI2R79yRaQ' target='_blank'>here</a>.
</div>
</div>
<div class="mp-container mp-table-container mp-app-adoption">
<div class="mp-table-title">
APP ADOPTION
<hr class="mp-shadow">
</div>
<table class="mp-table mp-table-app-adoption">
<tbody id="adoption-table-body">
<tr class="mp-table-header">
<th class="mp-table-header-item app-name">APP NAME</th>
<th class="mp-table-header-item grade">GRADE</th>
<th class="mp-table-header-item last-login">LAST LOGIN</th>
<th class="mp-table-header-item most-active-user">MOST ACTIVE USER</th>
</tr>
</tbody>
</table>
</div>
<div class="mp-container mp-table-container mp-user-leaderboard hidden">
<div class="mp-table-title">
USER LEADERBOARD
<hr class="mp-shadow">
</div>
<table class="mp-table mp-table-user-leaderboard">
<tbody id="leaderboard-table-body">
<tr class="mp-table-header">
<th class="mp-table-header-item user-name">USER NAME</th>
<th class="mp-table-header-item unique-app-count">UNIQUE APP COUNT</th>
<th class="mp-table-header-item total-logins">TOTAL LOGINS</th>
</tr>
</tbody>
</table>
</div>
<div class="mp-container mp-chart-container mp-usage-last-30-days hidden">
<div class="mp-chart-header">
USAGE: LAST 30 DAYS
<hr class="mp-shadow">
<div id="usage-dropdown" class="mp-select mp-app-select"></div>
</div>
<div class="usage-chart-modal hidden">
Couldn't find data for this app
</div>
<div id="usage-chart" class="mp-chart mp-chart-usage-last-30-days mixpanel-platform-output-line mixpanel-platform-output">
</div>
</div>
</div>
<script src="js/queries/appAdoption.js"></script>
<script src="js/queries/userLeaderboard.js"></script>
<script src="js/queries/appUsage.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/menutoggles.js"></script>
<script type="text/javascript" src="js/usagecharting.js"></script>
<script type="text/javascript" src="js/state.js"></script>
</body>
</html>