-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
243 lines (235 loc) · 10 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WhatsApp chat plot</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css"
integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous">
<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">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
</head>
<body>
<main>
<div class="jumbotron">
<h1 class="display-4">WhatsApp Chat Plot</h1>
<p class="lead">This is a simple app which parses the chat text file exported from WhatsApp to show a plot
of messages exchanged between you and your friends over time.</p>
<hr class="my-4">
<p>
<strong>NOTE: </strong>The chat file you upload is <strong>neither sent nor saved</strong> anywhere. You
can read the code.
</p>
<a class="btn btn-primary btn-lg" href="#instructions-block" role="button">Get Started</a>
</div>
<div class="offset-1" id="instructions-block">
<h2>Instructions</h2>
<div>
<h4>Getting the chat text file:</h4>
<ul>
<li>
Go to WhatsApp Settings > Chats > Chat History > Export chat > Select person/group.
</li>
<li>
Export without media.
</li>
<li>
Then, you'll get the text file. Upload it here.
</li>
</ul>
</div>
<hr>
<div>
<h4>Date parse format:</h4>
<ul>
<li>You've to enter an appropriate format to parse the date in the text file.</li>
<li>Visit <a href="http://gr2m.github.io/moment-parseformat/" target="_blank">this</a> and paste
one of the dates (from the text file) there to get the format.</li>
<li>This parser may not always give the correct result so make sure you do a self check and
account for <code>DD/MM/YY</code> vs <code>MM/DD/YY</code> errors. For example, 10/11/10 could
be 10th Nov, 2010 or 11th Oct, 2011.
</li>
<li>Refer <a href="https://momentjs.com/docs/#/parsing/string-format/" target="_blank">this</a>
to build the correct format yourself.</li>
</ul>
</div>
<hr>
<div>
<h4>Random data</h4>
<ul>
<li>Just to test out, click the random button for random plots.</li>
</ul>
</div>
<hr>
<div>
<h4>Refresh</h4>
<ul>
<li>Refresh to change colors.</li>
</ul>
</div>
<div>
<h4>Saving image</h4>
<ul>
<li>Right click on chart to copy or save image.</li>
<li>You can also use the export button to download the png.</li>
</ul>
</div>
<div>
<h4>Sample</h4>
<ul>
<li>Try out a sample chat file from <a
href="https://raw.githubusercontent.com/vishal-wadhwa/WhatsApp-Chat-Plot/master/sample_chat.txt">here</a>.
</li>
</ul>
</div>
<a class="btn btn-primary btn-lg" href="#plotter-block" role="button">Plot!</a>
</div>
<hr class="my-4">
<div id="plotter-block">
<h2 class="offset-1">Plotter</h2>
<div class="breadcrumb my-3 mx-md-5 justify-content-center">
<div class="row w-100 mb-1">
<div class="input-group input-group-sm col-md-6" id="chat-input-container">
<div class="input-group-prepend w-100">
<label class="d-flex flex-grow-1 mb-0" for="chat-input">
<span class="small-span input-group-text bg-dark text-light no-right-border">
<i class="fas fa-folder-open"></i>
Browse
</span>
<span data-filename-for="chat-input"
class="form-control pointer bg-white w-100 small-span no-left-border text-truncate">
Please select the chat file
</span>
</label>
</div>
<input type="file" class="custom-file-input" name="chat" id="chat-input" accept=".txt">
</div>
<div class="input-group input-group-sm col-md-6" id="title-text-container">
<div class="input-group-prepend">
<label class="input-group-text bg-dark text-light" for="title-text">
<i class="fas fa-file-signature"></i>
Title
</label>
</div>
<input type="text" class="form-control" id="title-text" placeholder="Enter chart title">
</div>
</div>
<div class="row w-100 mb-1">
<div class="input-group input-group-sm col-md-6">
<div class="input-group-prepend">
<label class="input-group-text bg-dark text-light" for="date-parse-format-text">
<i class="fas fa-calendar-day"></i>
Parse-format
</label>
</div>
<input type="text" class="form-control" id="date-parse-format-text"
placeholder="Enter date parsing format">
</div>
<div class="input-group input-group-sm col-md-6">
<div class="input-group-prepend">
<label class="input-group-text bg-dark text-light" for="granularity-select">
<i class="fas fa-binoculars"></i>
Granularity
</label>
</div>
<select class="custom-select" id="granularity-select">
<option value="year">Year</option>
<option value="quarter">Quarter</option>
<option value="month" selected>Month</option>
<option value="week">Week</option>
<option value="day">Day</option>
<option value="hour">Hour</option>
<option value="minute">Minute</option>
</select>
</div>
</div>
<div class="row w-100 mb-1">
<div class="input-group input-group-sm col-lg-4 col-md-6">
<div class="input-group-prepend">
<label class="input-group-text bg-dark text-light" for="distribution-select">
<i class="fas fa-chart-area"></i>
Distribution
</label>
</div>
<select class="custom-select" id="distribution-select">
<option value="series" selected>Series</option>
<option value="linear">Linear</option>
</select>
</div>
<div class="input-group input-group-sm col-lg-4 col-md-6">
<div class="input-group-prepend">
<label class="input-group-text bg-dark text-light" for="chart-select">
<i class="fas fa-chart-bar"></i>
Chart
</label>
</div>
<select class="custom-select" id="chart-select">
<option value="line" selected>Line</option>
<option value="bar">Bar</option>
</select>
</div>
<div class="col-md-6 col-lg-2">
<button type="button" class="btn btn-dark btn-sm btn-block text-truncate"
title="Refresh to change colors" id="refresh-btn">
<i class="fas fa-redo-alt"></i>
Refresh
</button>
</div>
<div class="col-md-6 col-lg-2">
<button type="button" class="btn btn-dark btn-sm btn-block text-truncate" title="Export as png"
id="download-btn">
<i class="fas fa-download"></i>
Export
</button>
</div>
</div>
<div class="row w-100 mt-1 pl-3">
<div class="custom-control custom-checkbox offset-md-1 col-md-2 col-sm-4">
<input type="checkbox" class="custom-control-input" id="smooth-check" checked>
<label class="custom-control-label" for="smooth-check">Smoothen</label>
</div>
<div class="custom-control custom-checkbox col-md-2 col-sm-4">
<input type="checkbox" class="custom-control-input" id="show-lines-check" checked>
<label class="custom-control-label" for="show-lines-check">Show lines</label>
</div>
<div class="custom-control custom-checkbox col-md-2 col-sm-4">
<input type="checkbox" class="custom-control-input" id="show-grid-check" checked>
<label class="custom-control-label" for="show-grid-check">Show grid</label>
</div>
<div class="custom-control custom-checkbox col-md-2 col-sm-4">
<input type="checkbox" class="custom-control-input" id="fill-area-check" checked>
<label class="custom-control-label" for="fill-area-check">Fill area</label>
</div>
<div class="custom-control custom-checkbox col-md-2 col-sm-4">
<input type="checkbox" class="custom-control-input" id="white-bg-check">
<label class="custom-control-label" for="white-bg-check">White background</label>
</div>
</div>
</div>
<div class="chart-container position-relative p-3" style="height: 75vh; width:95vw">
<canvas id="chart" role="img" aria-label="Chat Chart"></canvas>
</div>
</div>
</main>
<a href="https://github.com/vishal-wadhwa/WhatsApp-Chat-Plot" target="_blank" class="github-corner"
aria-label="View source on GitHub">
<svg width="80" height="80" viewBox="0 0 250 250"
style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"
integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"
integrity="sha256-oSgtFCCmHWRPQ/JmR4OoZ3Xke1Pw4v50uh6pLcu+fIc=" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>