-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (119 loc) · 5.51 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
<html>
<head>
<title>
EOS Report Generator
</title>
<!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
<!-- jquery, xlsx package, script attachment -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/pivot.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.20/c3.min.js"
integrity="sha512-05OyXnwpqz/1KqqNML6nuS/yEc/3m9mC2ge93iH9yamv9ZBU6hGi6VLrdypN8sgOTLEil4cE/b7rHKZZQItg8A=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./c3_renderers.js"></script>
<link rel="stylesheet" href="styles.css">
<!-- chart js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="./script.js"></script>
</head>
<body>
<div id="loading" style="display: none;">
<div class="loader">
</div>
</div>
<div class="jumbotron">
<h1 class="display-4">EOS Report Generator</h1>
<p class="lead">
Welcome! This tool can help you analyze EOS reports to help determine which stations have the highest
downtime in any given time period. Here's how you use the webpage:
<ul>
<li>
Go to the <a
href="https://hdi365.sharepoint.com/sites/NFYAssm/Assembly%20Engineering/Forms/AllItems.aspx?viewid=59db12d8%2Dcd34%2D43e1%2D9b85%2Df977e583f8c9&id=%2Fsites%2FNFYAssm%2FAssembly%20Engineering%2FTactical%20Engineering%2FEOS%20Reports%2F2021">EOS
Reports SharePoint Folder</a> and download all .xlsx files you want to analyze
</li>
<li>
Use the form below to upload your files
</li>
<li>
Once a results table appears, you can filter through it to gain more insight into the data
</li>
</ul>
<p>
Please note that:
<br>
(i) no data is sent to any server => all calculations happen on your local machine.
<br>
(ii) in some cases where a lot of Excel files are uploaded, the web page might freeze. This is completely
normal and your data will be rendered ASAP.
</p>
</p>
<div class="form-group">
<form action="" id="file_uploader">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="files" aria-describedby="inputGroupFileAddon01"
accept=".xlsx" multiple>
<label class="custom-file-label" for="files">Choose file</label>
</div>
</div>
</form>
</div>
</div>
<div>
</div>
<div class="container">
<div class="row p-3">
<div style="align-content: center;" id="chart_holder" class="mx-auto col">
<canvas id="stationVsDowntimeSummary"></canvas>
</div>
<div style="align-content: center;" class="mx-auto col">
<h3>
Note
</h3>
<p>
Once a bar chart is shown to the left, the percentages above each bar denote the downtime for that
station as percentage of the total downtime
</p>
</div>
</div>
<div class="mx-auto px-md-5 py-md-5">
<div class="py-md-10 ">
<button class="btn btn-outline-primary float-right" type="button" id="download_xlsx"
style="display: none;">Download Raw Data</button>
</div>
</div>
</div>
<div id="outputarea" hidden>
<h2 style="margin-left: 2.5rem; font-weight: bold;">Downtime</h2>
<div id="downtimePivotTable" class="m-5">
</div>
<br>
<h2 style="margin-left: 2.5rem; font-weight: bold;">Cart Issues</h2>
<div id="cartIssuesPivotTable" class="m-5">
</div>
</div>
<div class="container">
<div class="mx-auto justify-content-center px-md-5 py-md-5">
<table id="data">
</table>
</div>
</div>
</body>
</html>