Hugging Face's logo

Spaces:
Djacon
/
text2feature
Running

App Files Community
Djacon commited on
Commit
043c1d1
·
1 Parent(s): 97308e2

Add analytics & buffering data

Browse files
Files changed (4) hide show
  1. files/css/main.css +3 -3
  2. files/js/analytics.js +394 -0
  3. static/analytics.html +72 -120
  4. static/index.html +0 -448
files/css/main.css CHANGED
@@ -1208,8 +1208,8 @@ select {
1208
  }
1209
 
1210
  .bg-indigo-500 {
1211
- --tw-bg-opacity: 1;
1212
- background-color: rgb(99 102 241/var(--tw-bg-opacity))
1213
  }
1214
 
1215
  .bg-gray-200 {
@@ -1287,7 +1287,7 @@ select {
1287
  }
1288
 
1289
  .from-indigo-900 {
1290
- --tw-gradient-from: #312e81;
1291
  --tw-gradient-to: rgba(49,46,129,0);
1292
  --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to)
1293
  }
 
1208
  }
1209
 
1210
  .bg-indigo-500 {
1211
+ /* --tw-bg-opacity: 1; */
1212
+ background-color: #ffa116;
1213
  }
1214
 
1215
  .bg-gray-200 {
 
1287
  }
1288
 
1289
  .from-indigo-900 {
1290
+ --tw-gradient-from: #f8b34c;
1291
  --tw-gradient-to: rgba(49,46,129,0);
1292
  --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to)
1293
  }
files/js/analytics.js ADDED
@@ -0,0 +1,394 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ function prettify(num) {
2
+ num = +num;
3
+ let mark = '';
4
+ if (num >= 10**9) {
5
+ num /= 10 ** 9;
6
+ mark = 'b';
7
+ } else if (num >= 10**6) {
8
+ num /= 10 ** 6;
9
+ mark = 'm';
10
+ } else if (num >= 1000) {
11
+ num /= 1000;
12
+ mark = 'k';
13
+ }
14
+ if (num > 100) {
15
+ num = Math.ceil(num);
16
+ } else if (num > 10) {
17
+ num = +num.toFixed(1);
18
+ } else {
19
+ num = +num.toFixed(2);
20
+ }
21
+ return num + mark;
22
+ }
23
+
24
+ function median(arr) {
25
+ arr.sort((a, b) => a - b);
26
+
27
+ var middle = Math.floor(arr.length / 2);
28
+
29
+ if (arr.length % 2 === 1) {
30
+ return +arr[middle].toFixed(2);
31
+ }
32
+ var mid1 = arr[middle - 1];
33
+ var mid2 = arr[middle];
34
+ return +((mid1 + mid2) / 2).toFixed(2);
35
+ }
36
+
37
+ function get_info(arr) {
38
+ let [min, max] = d3.extent(arr);
39
+ let avg = +(arr.reduce((a, b) => a + b) / arr.length).toFixed(2);
40
+ let dev = +Math.sqrt(arr.reduce((acc, val) => acc + Math.pow(val - avg, 2), 0) / (arr.length - 1)).toFixed(2);
41
+ let q50 = median(arr);
42
+ return [min, max, avg, q50, dev];
43
+ }
44
+
45
+
46
+ function plot_hist(col_name, chart_id) {
47
+ let column = cache_df.dataset[chart_id];
48
+
49
+ let min = column.metadata.min, max = column.metadata.max;
50
+ let nan_count = column.metadata.nan_count;
51
+ let valid_count = column.metadata.total_values - nan_count;
52
+ let nan_percentage = nan_count / column.metadata.total_values * 100;
53
+ let info = [
54
+ ['DataType', 'Numerical'],
55
+ ['Mean', prettify(column.metadata.mean)],
56
+ ['Median', prettify(column.metadata.median)],
57
+ ['Std. Deviation', prettify(column.metadata.var)],
58
+ ['Missing Values', `${nan_count} (${+(nan_percentage).toFixed(1)}%)`],
59
+ ['Valid Values', `${valid_count} (${+(100 - nan_percentage).toFixed(1)}%)`],
60
+ ]
61
+
62
+ addChart(chart_id, col_name, info);
63
+
64
+ var width = document.getElementById(`chart-${chart_id}`).clientWidth;
65
+ var height = 300;
66
+ var margin = { top: 20, right: 20, bottom: 20, left: 20 };
67
+
68
+ var svg = d3.select(`#chart-${chart_id}`)
69
+ .append("svg")
70
+ .attr("width", width)
71
+ .attr("height", height)
72
+
73
+ var xScale = d3.scaleLinear()
74
+ .domain([min, max])
75
+ .range([margin.left, width - margin.right])
76
+
77
+ var histogram = d3.histogram()
78
+ .domain(xScale.domain())(column.data);
79
+
80
+ var yScale = d3.scaleLinear()
81
+ .domain([0, d3.max(histogram, d => d.length)])
82
+ .range([height - margin.bottom, margin.top]);
83
+
84
+ var xAxis = d3.axisBottom(xScale)
85
+ .tickValues([min, max])
86
+ .tickFormat(function(d) {
87
+ if ([min, max].includes(d))
88
+ return prettify(d);
89
+ else
90
+ return "";
91
+ })
92
+
93
+ svg.append("g")
94
+ .attr("class", "x-axis")
95
+ .attr("transform", "translate(0," + (height - margin.bottom) + ")")
96
+ .style("font", "12px arial")
97
+ .call(xAxis)
98
+
99
+ const rect = svg.selectAll("rect")
100
+ .data(histogram)
101
+ .enter()
102
+ .append("rect")
103
+ .attr("x", d => xScale(d.x0))
104
+ .attr("y", d => yScale(d.length))
105
+ .attr("width", d => xScale(d.x1) - xScale(d.x0) - 1)
106
+ .attr("height", d => height - margin.bottom - yScale(d.length))
107
+ .attr("fill", "#ffa116")
108
+
109
+ const tooltip = d3.select(`#tooltip-${chart_id}`);
110
+
111
+ rect.on("mouseover", (event, d) => {
112
+ let left = prettify(d[0]), right = prettify(d[d.length-1])
113
+ if (left === right) {
114
+ tooltip.html(left);
115
+ } else {
116
+ tooltip.html(`[${left}; ${right}]`);
117
+ }
118
+ tooltip.style("display", "block")
119
+ .style("left", (event.pageX + 10) + "px")
120
+ .style("top", (event.pageY - 10) + "px");
121
+ }).on("mouseout", () => {
122
+ tooltip.style("display", "none");
123
+ });
124
+ }
125
+
126
+ function mode(data) {
127
+ let modeLabel = 'Not Found';
128
+ let maxCount = 0;
129
+
130
+ for (let item of data) {
131
+ if (item[1] > maxCount) {
132
+ modeLabel = item[0];
133
+ maxCount = item[1];
134
+ }
135
+ }
136
+ return [modeLabel, maxCount];
137
+ }
138
+
139
+
140
+ function plot_pie(col_name, chart_id) {
141
+ let column = cache_df.dataset[chart_id];
142
+
143
+ let nan_count = column.metadata.nan_count;
144
+ let valid_count = column.metadata.total_values - nan_count;
145
+ let nan_percentage = nan_count / column.metadata.total_values * 100;
146
+ let info = [
147
+ ['DataType', 'Categorical'],
148
+ ['Unique', column.metadata.unique],
149
+ ['Most Common', column.metadata.mode_info],
150
+ ['Missing Values', `${nan_count} (${+(nan_percentage).toFixed(1)}%)`],
151
+ ['Valid Values', `${valid_count} (${+(100 - nan_percentage).toFixed(1)}%)`],
152
+ ];
153
+
154
+ addChart(chart_id, col_name, info);
155
+
156
+ var width = document.getElementById(`chart-${chart_id}`).clientWidth;
157
+ var height = 300;
158
+
159
+ const radius = Math.min(width, height) / 2;
160
+
161
+ const svg = d3.select(`#chart-${chart_id}`)
162
+ .append("svg")
163
+ .attr("width", width)
164
+ .attr("height", height)
165
+ .append("g")
166
+ .attr("transform", `translate(${width / 2}, ${height / 2})`);
167
+
168
+ const pie = d3.pie()
169
+ .value(d => d[1]);
170
+
171
+ const arc = d3.arc()
172
+ .innerRadius(radius / 2)
173
+ .outerRadius(radius)
174
+ .cornerRadius(2)
175
+
176
+ const arcs = svg.selectAll("arc")
177
+ .data(pie(column.data))
178
+ .enter()
179
+ .append("g")
180
+ .append("path")
181
+ .attr("fill", (_, i)=> color(i))
182
+ .attr("d", arc)
183
+
184
+ // svg.selectAll("label")
185
+ // .data(pie(column))
186
+ // .enter()
187
+ // .append("text")
188
+ // .attr("transform", d => `translate(${arc.centroid(d)})`)
189
+ // .attr("text-anchor", "middle")
190
+ // .text(d => d.data[0]);
191
+
192
+ arcs.on("mouseover", (_, d) => {
193
+ svg.append("text")
194
+ .text(`${d.data[0]}: ${+(d.data[1] / valid_count * 100).toFixed(1)}%`)
195
+ .attr("x", 0)
196
+ .attr("y", 5)
197
+ .attr("text-anchor", "middle")
198
+ .attr("class", "no-invert")
199
+ }).on("mouseout", () => {
200
+ svg.select("text").remove();
201
+ });
202
+ }
203
+
204
+
205
+ const fileInput = document.getElementById("data");
206
+ const charts = document.getElementById('my-charts');
207
+
208
+ const color = d3.scaleOrdinal().range(d3.schemeSet3);
209
+
210
+ const MAX_CATS = 10;
211
+
212
+ const cache_df = {is_empty: true, dataset: []};
213
+
214
+ function _is_number(n) {
215
+ return n && !isNaN(n - 0)
216
+ }
217
+
218
+ function _handle_column(data, col) {
219
+ let cols = [];
220
+ let cats_count = 0, cats = {}, maybe_cats = true;
221
+ let type = 'none';
222
+
223
+ for (let row of data) {
224
+ let value = row[col];
225
+ if (value !== '') {
226
+ if (type != 'object') {
227
+ if (_is_number(value)) {
228
+ type = 'num';
229
+ } else {
230
+ type = 'object';
231
+ }
232
+ }
233
+
234
+ if (maybe_cats) {
235
+ if (value in cats) {
236
+ cats[value] += 1;
237
+ } else {
238
+ cats_count += 1;
239
+ cats[value] = 1
240
+ if (cats_count > MAX_CATS) {
241
+ maybe_cats = false;
242
+ cats = {};
243
+ }
244
+ }
245
+ }
246
+ cols.push(value);
247
+ }
248
+ }
249
+
250
+ type = maybe_cats ? 'cat' : type == 'num' ? type : 'object';
251
+ console.log(col, type);
252
+
253
+ let nan_count = data.length - cols.length;
254
+ if (type == 'cat') {
255
+ cats = Object.entries(cats);
256
+ let [mode_col, mode_count] = mode(cats);
257
+ let col_data = {type, col, data: cats,
258
+ metadata: {nan_count, total_values: data.length,
259
+ unique: cats_count, mode_info: `${mode_col} (${+(mode_count / cols.length * 100).toFixed(1)}%)`}}
260
+ return [true, col_data];
261
+ } else if (type == 'num') {
262
+ cols = new Float32Array(cols);
263
+ let [min, max, mean_col, median_col, var_col] = get_info(cols);
264
+ let col_data = {type, col, data: cols,
265
+ metadata: {nan_count, total_values: data.length,
266
+ min: min, max: max, mean: mean_col, median: median_col, var: var_col}}
267
+ return [true, col_data];
268
+ }
269
+ return [false, {}];
270
+ }
271
+
272
+ function _update_cache(data) {
273
+ cache_df.is_empty = false;
274
+ for (let col of data.columns) {
275
+ let [is_valid, col_data] = _handle_column(data, col);
276
+ if (is_valid) {
277
+ cache_df.dataset.push(col_data);
278
+ }
279
+ }
280
+ }
281
+
282
+ function addChart(chartID, name, info) {
283
+ info_div = [];
284
+ for (let item of info) {
285
+ let v = `<p class="mt-1 text-sm text-gray-500 truncate sm:w-auto"><b>${item[0]}:</b> ${item[1]}</p>`
286
+ info_div.push(v);
287
+ }
288
+
289
+ const newChartDiv = document.createElement('div');
290
+ newChartDiv.className = 'p-4 mt-4 w-full overflow-hidden bg-white rounded-lg';
291
+ newChartDiv.innerHTML = `
292
+ <div class="w-full p-4 bg-white rounded-lg xl:p-6">
293
+ <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">${name}</h1>
294
+ <div class="grid gap-12 mt-8 sm:grid-cols-2">
295
+ <div id="tooltip-${chartID}" class="rounded-lg" style="position: absolute; display: none; background-color: black; color: white; border: 1px solid black; padding: 5px; z-index: 1;"></div>
296
+ <div id="chart-${chartID}" class="flex items-center capitalize no-invert">
297
+ </div>
298
+ <div class="flow-root mt-6">
299
+ <ul>
300
+ <li>
301
+ <span class="absolute top-4 left-4 rtl:right-4 rtl:left-auto -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
302
+ <div class="relative flex">
303
+ <span class="flex items-center justify-center w-8 h-8 bg-white rounded-full ring-8 ring-white">
304
+ <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-indigo-600 no-invert" viewBox="0 0 20 20" fill="currentColor">
305
+ <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
306
+ </svg>
307
+ </span>
308
+
309
+ <div class="min-w-0 flex-1 pt-1.5 mx-3">
310
+ <p class="text-sm font-medium text-gray-700">General Info:</p>
311
+ ${info_div.join('\n')}
312
+ </div>
313
+ </div>
314
+ </li>
315
+ </ul>
316
+ </div>
317
+ </div>
318
+ </div>`;
319
+ charts.appendChild(newChartDiv);
320
+ }
321
+
322
+ var lastWidth = window.innerWidth;
323
+ document.getElementById("submit").addEventListener("click", render);
324
+ window.addEventListener("resize", () => {
325
+ if (Math.abs(lastWidth - window.innerWidth) > 25) {
326
+ render();
327
+ lastWidth = window.innerWidth;
328
+ }
329
+ });
330
+
331
+ fileInput.addEventListener('change', function() {
332
+ cache_df.is_empty = true;
333
+ cache_df.dataset = [];
334
+ });
335
+
336
+
337
+ function render() {
338
+ if (fileInput.files.length > 0) {
339
+ charts.innerHTML = '';
340
+
341
+ var selectedFile = fileInput.files[0];
342
+ var reader = new FileReader();
343
+
344
+ reader.onload = function(event) {
345
+ var fileContent = event.target.result;
346
+ var data = d3.csvParse(fileContent);
347
+
348
+ if (cache_df.is_empty) {
349
+ _update_cache(data);
350
+ } else {
351
+ console.log('We already have cache!');
352
+ }
353
+
354
+ for (let i = 0; i < cache_df.dataset.length; i++) {
355
+ values = cache_df.dataset[i];
356
+ if (values.type == 'cat') {
357
+ plot_pie(values.col, i);
358
+ } else if (values.type == 'num') {
359
+ plot_hist(values.col, i);
360
+ }
361
+ }
362
+
363
+ // let cols = [];
364
+ // for (let col of data.columns) {
365
+ // if (!isNaN(parseFloat(data[0][col]))) {
366
+ // cols.push(['num', col]);
367
+ // } else {
368
+ // const cats = new Set();
369
+ // for (let value of data) {
370
+ // cats.add(value[col]);
371
+ // if (cats.size > 100) {
372
+ // break;
373
+ // }
374
+ // }
375
+ // if (cats.size <= 100) {
376
+ // cols.push(['cat', col]);
377
+ // }
378
+ // }
379
+ // }
380
+
381
+ // for (let i = 0; i < cols.length; i++) {
382
+ // if (cols[i][0] == 'num') {
383
+ // plot_hist(data, cols[i][1], i);
384
+ // } else if (cols[i][0] == 'cat') {
385
+ // plot_pie(data, cols[i][1], i);
386
+ // }
387
+ // }
388
+ };
389
+
390
+ reader.readAsText(selectedFile);
391
+ } else {
392
+ console.warn('There is no file!');
393
+ }
394
+ }
static/analytics.html CHANGED
@@ -9,6 +9,9 @@
9
  <link rel="stylesheet" href="files/css/main.css">
10
  <link rel="icon" type="image/svg+xml" href="files/images/favicon.svg">
11
  <script defer src="files/js/main.js"></script>
 
 
 
12
  </head>
13
 
14
  <body class="overflow-hidden">
@@ -29,7 +32,7 @@
29
  <div x-cloak :class="sidebarOpen ? 'translate-x-0 ease-in' : '-translate-x-full ease-out'"
30
  class="fixed inset-y-0 left-0 z-30 w-64 px-4 overflow-y-auto transition duration-200 transform bg-white border-r border-gray-100 lg:translate-x-0 lg:relative lg:inset-0 ">
31
  <div class="mt-8">
32
- <a href="files/index.html" class="flex items-center">
33
  <img class="w-auto h-8 no-invert" src="files/images/favicon.svg" alt="logo">
34
  <span class="mx-3 mt-1 font-medium text-lg">Text2<span class="no-invert" style="color: #ffa116">Feature</span></span>
35
  </a>
@@ -42,7 +45,7 @@
42
  <h3 class="px-4 text-sm tracking-wider text-gray-400 uppercase">PAGES</h3>
43
 
44
  <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-200 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
45
- href="index.html">
46
  <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
47
  stroke="currentColor">
48
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -52,7 +55,7 @@
52
  </a>
53
 
54
  <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
55
- href="text_summarizer.html">
56
  <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
57
  stroke="currentColor" stroke-width="2">
58
  <path stroke-linecap="round" stroke-linejoin="round"
@@ -62,7 +65,7 @@
62
  </a>
63
 
64
  <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
65
- href="emotion_detection.html">
66
  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
67
  <path d="M9 16C9.85038 16.6303 10.8846 17 12 17C13.1154 17 14.1496 16.6303 15 16" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
68
  <path d="M16 10.5C16 11.3284 15.5523 12 15 12C14.4477 12 14 11.3284 14 10.5C14 9.67157 14.4477 9 15 9C15.5523 9 16 9.67157 16 10.5Z" fill="#1C274C"/>
@@ -73,7 +76,7 @@
73
  </a>
74
 
75
  <a class="flex items-center px-4 py-2 text-gray-600 transition-colors duration-300 transform bg-gray-200 rounded-lg bg-opacity-40"
76
- href="analytics.html">
77
  <svg fill="currentColor" width="24px" height="24px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
78
  <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
79
  <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
@@ -228,16 +231,72 @@
228
 
229
  <div class="mt-6">
230
  <section class="mt-6 space-y-6">
231
- <div class="2xl:-mx-3 2xl:flex">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
232
  <div class="w-full p-4 bg-white rounded-lg 2xl:mx-3 2xl:w-1/2 xl:p-6">
233
  <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">
234
  Projects Activity</h1>
235
 
236
  <p class="mt-2 text-gray-500">
237
- <span class="text-green-500">(+29)</span>&nbsp;than last month
238
  </p>
239
 
240
- <canvas id="line2Chart" height="150"></canvas>
241
  </div>
242
 
243
  <div class="w-full p-4 mt-6 bg-white rounded-lg 2xl:mx-3 2xl:mt-0 2xl:w-1/2 xl:p-6">
@@ -245,7 +304,7 @@
245
  Profile Visits</h1>
246
 
247
  <p class="mt-2 text-gray-500">
248
- <span class="text-green-500">(+120)</span>&nbsp;than last month
249
  </p>
250
 
251
  <div class="max-w-xs mx-auto mt-4">
@@ -254,133 +313,26 @@
254
  </div>
255
  </div>
256
 
257
- <div class="w-full p-4 bg-white rounded-lg xl:p-6">
258
- <div class="mb-5 rounded-lg bg-gradient-to-r from-indigo-900 to-gray-900">
259
- <canvas id="barChart" height="80"></canvas>
260
- </div>
261
-
262
- <div>
263
- <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">
264
- active users</h1>
265
-
266
- <p class="mt-2 text-gray-500">
267
- <span class="text-green-500">(+10)</span>&nbsp;than last week
268
- </p>
269
-
270
- <div class="grid gap-12 mt-8 sm:grid-cols-2 md:grid-cols-4">
271
- <div>
272
- <div class="flex items-center capitalize">
273
- <div class="p-2 text-white bg-indigo-500 rounded-lg">
274
- <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
275
- viewBox="0 0 24 24" stroke="currentColor">
276
- <path stroke-linecap="round" stroke-linejoin="round"
277
- stroke-width="2"
278
- d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
279
- </svg>
280
- </div>
281
-
282
- <div class="mx-3 font-medium text-gray-500 ">users</div>
283
- </div>
284
-
285
- <div class="mt-3">
286
- <h1 class="text-xl font-semibold text-gray-600">23,212</h1>
287
-
288
- <div class="w-full mt-3 overflow-hidden bg-gray-200 rounded-full">
289
- <div class="w-8/12 h-1 bg-indigo-500"></div>
290
- </div>
291
- </div>
292
- </div>
293
-
294
- <div>
295
- <div class="flex items-center capitalize">
296
- <div class="p-2 text-white bg-indigo-500 rounded-lg">
297
- <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
298
- viewBox="0 0 24 24" stroke="currentColor">
299
- <path stroke-linecap="round" stroke-linejoin="round"
300
- stroke-width="2"
301
- d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
302
- </svg>
303
- </div>
304
-
305
- <div class="mx-3 font-medium text-gray-500 ">Clicks</div>
306
- </div>
307
-
308
- <div class="mt-3">
309
- <h1 class="text-xl font-semibold text-gray-600">3,125m</h1>
310
-
311
- <div class="w-full mt-3 overflow-hidden bg-gray-200 rounded-full">
312
- <div class="w-11/12 h-1 bg-indigo-500"></div>
313
- </div>
314
- </div>
315
- </div>
316
-
317
- <div>
318
- <div class="flex items-center capitalize">
319
- <div class="p-2 text-white bg-indigo-500 rounded-lg">
320
- <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
321
- viewBox="0 0 24 24" stroke="currentColor">
322
- <path stroke-linecap="round" stroke-linejoin="round"
323
- stroke-width="2"
324
- d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
325
- </svg>
326
- </div>
327
-
328
- <div class="mx-3 font-medium text-gray-500 ">Sales</div>
329
- </div>
330
-
331
- <div class="mt-3">
332
- <h1 class="text-xl font-semibold text-gray-600">$89,000</h1>
333
-
334
- <div class="w-full mt-3 overflow-hidden bg-gray-200 rounded-full">
335
- <div class="w-5/6 h-1 bg-indigo-500"></div>
336
- </div>
337
- </div>
338
- </div>
339
-
340
- <div>
341
- <div class="flex items-center capitalize">
342
- <div class="p-2 text-white bg-indigo-500 rounded-lg">
343
- <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
344
- viewBox="0 0 24 24" stroke="currentColor">
345
- <path stroke-linecap="round" stroke-linejoin="round"
346
- stroke-width="2"
347
- d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
348
- </svg>
349
- </div>
350
-
351
- <div class="mx-3 font-medium text-gray-500 ">Items</div>
352
- </div>
353
-
354
- <div class="mt-3">
355
- <h1 class="text-xl font-semibold text-gray-600">260</h1>
356
-
357
- <div class="w-full mt-3 overflow-hidden bg-gray-200 rounded-full">
358
- <div class="w-2/3 h-1 bg-indigo-500"></div>
359
- </div>
360
- </div>
361
- </div>
362
- </div>
363
- </div>
364
- </div>
365
-
366
  <div class="w-full p-5 overflow-hidden bg-white rounded-lg">
367
  <div class="mb-2">
368
  <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">
369
  sales overview</h1>
370
 
371
  <p class="mt-2 text-gray-500">
372
- <span class="text-green-500">(+5) more</span>&nbsp;in 2022
373
  </p>
374
  </div>
375
 
376
  <canvas id="lineChart" height="80"></canvas>
377
- </div>
378
  </section>
379
  </div>
380
  </div>
381
  </main>
382
  </div>
383
  </div>
 
384
  <script src="files/js/theme.js"></script>
 
385
  </body>
386
  </html>
 
9
  <link rel="stylesheet" href="files/css/main.css">
10
  <link rel="icon" type="image/svg+xml" href="files/images/favicon.svg">
11
  <script defer src="files/js/main.js"></script>
12
+
13
+ <script src="https://d3js.org/d3.v6.min.js"></script>
14
+ <script src="https://d3js.org/d3-fetch.v3.min.js"></script>
15
  </head>
16
 
17
  <body class="overflow-hidden">
 
32
  <div x-cloak :class="sidebarOpen ? 'translate-x-0 ease-in' : '-translate-x-full ease-out'"
33
  class="fixed inset-y-0 left-0 z-30 w-64 px-4 overflow-y-auto transition duration-200 transform bg-white border-r border-gray-100 lg:translate-x-0 lg:relative lg:inset-0 ">
34
  <div class="mt-8">
35
+ <a href="/" class="flex items-center">
36
  <img class="w-auto h-8 no-invert" src="files/images/favicon.svg" alt="logo">
37
  <span class="mx-3 mt-1 font-medium text-lg">Text2<span class="no-invert" style="color: #ffa116">Feature</span></span>
38
  </a>
 
45
  <h3 class="px-4 text-sm tracking-wider text-gray-400 uppercase">PAGES</h3>
46
 
47
  <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-200 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
48
+ href="/">
49
  <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
50
  stroke="currentColor">
51
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
 
55
  </a>
56
 
57
  <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
58
+ href="text_summarizer">
59
  <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
60
  stroke="currentColor" stroke-width="2">
61
  <path stroke-linecap="round" stroke-linejoin="round"
 
65
  </a>
66
 
67
  <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
68
+ href="emotion_detection">
69
  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
70
  <path d="M9 16C9.85038 16.6303 10.8846 17 12 17C13.1154 17 14.1496 16.6303 15 16" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
71
  <path d="M16 10.5C16 11.3284 15.5523 12 15 12C14.4477 12 14 11.3284 14 10.5C14 9.67157 14.4477 9 15 9C15.5523 9 16 9.67157 16 10.5Z" fill="#1C274C"/>
 
76
  </a>
77
 
78
  <a class="flex items-center px-4 py-2 text-gray-600 transition-colors duration-300 transform bg-gray-200 rounded-lg bg-opacity-40"
79
+ href="analytics">
80
  <svg fill="currentColor" width="24px" height="24px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
81
  <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
82
  <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
 
231
 
232
  <div class="mt-6">
233
  <section class="mt-6 space-y-6">
234
+ <div class="w-full p-4 bg-white xl:p-6">
235
+ <div>
236
+ <label class="flex flex-col items-center justify-center w-full h-32 mt-2 text-gray-500 border-2 rounded-md cursor-pointer hover:text-gray-600 md:h-64">
237
+ <svg class="w-8 h-8" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
238
+ <path d="M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z"></path>
239
+ </svg>
240
+
241
+ <span class="mt-4">Import Data</span>
242
+ <input id="data" type="file" class="hidden" accept=".csv, .tsv, .json">
243
+ </label>
244
+ </div>
245
+ <div class="mt-4 flex justify-between no-invert">
246
+ <button id="submit" class="w-full flex items-center justify-center py-2 px-4 rounded font-medium text-white rounded-full" style="max-height: 2.5rem;">
247
+ Analize
248
+ </button>
249
+ </div>
250
+ </div>
251
+
252
+
253
+ <div id="my-charts">
254
+ <!-- <div class="w-full p-4 bg-white rounded-lg xl:p-6">
255
+ <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">
256
+ example hist column</h1>
257
+
258
+ <div class="grid gap-12 mt-8 sm:grid-cols-2">
259
+ <div class="flex items-center capitalize">
260
+ <svg width="284" height="300"><g class="x-axis" transform="translate(0,280)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle" style="font: 12px arial;"><path class="domain" stroke="currentColor" d="M20,6V0H264V6"></path><g class="tick" opacity="1" transform="translate(20,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">8</text></g><g class="tick" opacity="1" transform="translate(264,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">96</text></g></g><rect x="20" y="271.6860465116279" width="4.545454545454547" height="8.313953488372078" fill="#ffa116" class="no-invert"></rect><rect x="25.545454545454547" y="37.383720930232556" width="26.727272727272727" height="242.61627906976744" fill="#ffa116" class="no-invert"></rect><rect x="53.27272727272727" y="20" width="26.727272727272727" height="260" fill="#ffa116" class="no-invert"></rect><rect x="81" y="77.44186046511626" width="26.72727272727272" height="202.55813953488374" fill="#ffa116" class="no-invert"></rect><rect x="108.72727272727272" y="146.97674418604652" width="26.72727272727272" height="133.02325581395348" fill="#ffa116" class="no-invert"></rect><rect x="136.45454545454544" y="242.20930232558138" width="26.727272727272748" height="37.790697674418624" fill="#ffa116" class="no-invert"></rect><rect x="164.1818181818182" y="265.6395348837209" width="26.72727272727272" height="14.360465116279101" fill="#ffa116" class="no-invert"></rect><rect x="191.9090909090909" y="278.4883720930232" width="26.72727272727272" height="1.5116279069767984" fill="#ffa116" class="no-invert"></rect><rect x="219.63636363636363" y="258.0813953488372" width="26.727272727272748" height="21.91860465116281" fill="#ffa116" class="no-invert"></rect><rect x="247.36363636363637" y="268.6627906976744" width="15.636363636363626" height="11.337209302325618" fill="#ffa116" class="no-invert"></rect></svg>
261
+ </div>
262
+ <div class="flow-root mt-6">
263
+ <ul>
264
+ <li>
265
+ <span class="absolute top-4 left-4 rtl:right-4 rtl:left-auto -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
266
+ <div class="relative flex">
267
+ <span class="flex items-center justify-center w-8 h-8 bg-white rounded-full ring-8 ring-white">
268
+ <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 no-invert text-indigo-600" viewBox="0 0 20 20" fill="currentColor">
269
+ <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
270
+ </svg>
271
+ </span>
272
+
273
+ <div class="min-w-0 flex-1 pt-1.5 mx-3">
274
+ <p class="text-sm font-medium text-gray-700">General Info:</p>
275
+ <p class="mt-1 text-sm text-gray-500 truncate sm:w-auto"><b>DataType:</b> Quantitative</p>
276
+ <p class="mt-1 text-sm text-gray-500 truncate sm:w-auto"><b>Mean:</b> 15.3k</p>
277
+ <p class="mt-1 text-sm text-gray-500 truncate sm:w-auto"><b>Median:</b> 1.32k</p>
278
+ <p class="mt-1 text-sm text-gray-500 truncate sm:w-auto"><b>Std. Deviation:</b> 10.4</p>
279
+ <p class="mt-1 text-sm text-gray-500 truncate sm:w-auto"><b>Missing Values:</b> 100 (4.5%)</p>
280
+ <p class="mt-1 text-sm text-gray-500 truncate sm:w-auto"><b>Total Values:</b> 12.5k (95.5%)</p>
281
+ </div>
282
+ </div>
283
+ </li>
284
+ </ul>
285
+ </div>
286
+ </div>
287
+ </div> -->
288
+ </div>
289
+
290
+ <!-- <div class="2xl:-mx-3 2xl:flex">
291
  <div class="w-full p-4 bg-white rounded-lg 2xl:mx-3 2xl:w-1/2 xl:p-6">
292
  <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">
293
  Projects Activity</h1>
294
 
295
  <p class="mt-2 text-gray-500">
296
+ <span class="text-green-500 no-invert">(+29)</span>&nbsp;than last month
297
  </p>
298
 
299
+ <canvas id="line2Chart" height="150" class="no-invert"></canvas>
300
  </div>
301
 
302
  <div class="w-full p-4 mt-6 bg-white rounded-lg 2xl:mx-3 2xl:mt-0 2xl:w-1/2 xl:p-6">
 
304
  Profile Visits</h1>
305
 
306
  <p class="mt-2 text-gray-500">
307
+ <span class="text-green-500 no-invert">(+120)</span>&nbsp;than last month
308
  </p>
309
 
310
  <div class="max-w-xs mx-auto mt-4">
 
313
  </div>
314
  </div>
315
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
316
  <div class="w-full p-5 overflow-hidden bg-white rounded-lg">
317
  <div class="mb-2">
318
  <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">
319
  sales overview</h1>
320
 
321
  <p class="mt-2 text-gray-500">
322
+ <span class="text-green-500 no-invert">(+5) more</span>&nbsp;in 2022
323
  </p>
324
  </div>
325
 
326
  <canvas id="lineChart" height="80"></canvas>
327
+ </div> -->
328
  </section>
329
  </div>
330
  </div>
331
  </main>
332
  </div>
333
  </div>
334
+
335
  <script src="files/js/theme.js"></script>
336
+ <script src="files/js/analytics.js"></script>
337
  </body>
338
  </html>
static/index.html CHANGED
@@ -336,454 +336,6 @@
336
  </p>
337
  </div>
338
  </section>
339
-
340
- <!-- <section class="mt-6 space-y-6">
341
- <div class="w-full p-4 bg-white rounded-lg xl:p-6">
342
- <div class="mb-5 rounded-lg bg-gradient-to-r from-indigo-900 to-gray-900">
343
- <canvas id="barChart" height="80"></canvas>
344
- </div>
345
-
346
- <div>
347
- <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">
348
- active users</h1>
349
-
350
- <p class="mt-2 text-gray-500">
351
- <span class="text-green-500">(+10)</span>&nbsp;than last week
352
- </p>
353
-
354
- <div class="grid gap-12 mt-8 sm:grid-cols-2 md:grid-cols-4">
355
- <div>
356
- <div class="flex items-center capitalize">
357
- <div class="p-2 text-white bg-indigo-500 rounded-lg">
358
- <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
359
- viewBox="0 0 24 24" stroke="currentColor">
360
- <path stroke-linecap="round" stroke-linejoin="round"
361
- stroke-width="2"
362
- d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
363
- </svg>
364
- </div>
365
-
366
- <div class="mx-3 font-medium text-gray-500 ">users</div>
367
- </div>
368
-
369
- <div class="mt-3">
370
- <h1 class="text-xl font-semibold text-gray-600">23,212</h1>
371
-
372
- <div class="w-full mt-3 overflow-hidden bg-gray-200 rounded-full">
373
- <div class="w-8/12 h-1 bg-indigo-500"></div>
374
- </div>
375
- </div>
376
- </div>
377
-
378
- <div>
379
- <div class="flex items-center capitalize">
380
- <div class="p-2 text-white bg-indigo-500 rounded-lg">
381
- <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
382
- viewBox="0 0 24 24" stroke="currentColor">
383
- <path stroke-linecap="round" stroke-linejoin="round"
384
- stroke-width="2"
385
- d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
386
- </svg>
387
- </div>
388
-
389
- <div class="mx-3 font-medium text-gray-500 ">Clicks</div>
390
- </div>
391
-
392
- <div class="mt-3">
393
- <h1 class="text-xl font-semibold text-gray-600">3,125m</h1>
394
-
395
- <div class="w-full mt-3 overflow-hidden bg-gray-200 rounded-full">
396
- <div class="w-11/12 h-1 bg-indigo-500"></div>
397
- </div>
398
- </div>
399
- </div>
400
-
401
- <div>
402
- <div class="flex items-center capitalize">
403
- <div class="p-2 text-white bg-indigo-500 rounded-lg">
404
- <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
405
- viewBox="0 0 24 24" stroke="currentColor">
406
- <path stroke-linecap="round" stroke-linejoin="round"
407
- stroke-width="2"
408
- d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
409
- </svg>
410
- </div>
411
-
412
- <div class="mx-3 font-medium text-gray-500 ">Sales</div>
413
- </div>
414
-
415
- <div class="mt-3">
416
- <h1 class="text-xl font-semibold text-gray-600">$89,000</h1>
417
-
418
- <div class="w-full mt-3 overflow-hidden bg-gray-200 rounded-full">
419
- <div class="w-5/6 h-1 bg-indigo-500"></div>
420
- </div>
421
- </div>
422
- </div>
423
-
424
- <div>
425
- <div class="flex items-center capitalize">
426
- <div class="p-2 text-white bg-indigo-500 rounded-lg">
427
- <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
428
- viewBox="0 0 24 24" stroke="currentColor">
429
- <path stroke-linecap="round" stroke-linejoin="round"
430
- stroke-width="2"
431
- d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
432
- </svg>
433
- </div>
434
-
435
- <div class="mx-3 font-medium text-gray-500 ">Items</div>
436
- </div>
437
-
438
- <div class="mt-3">
439
- <h1 class="text-xl font-semibold text-gray-600">260</h1>
440
-
441
- <div class="w-full mt-3 overflow-hidden bg-gray-200 rounded-full">
442
- <div class="w-2/3 h-1 bg-indigo-500"></div>
443
- </div>
444
- </div>
445
- </div>
446
- </div>
447
- </div>
448
- </div>
449
- </section> -->
450
-
451
- <!-- <section class="mt-6 space-y-6 xl:flex xl:space-y-0 xl:-mx-3">
452
- <div class="w-full p-4 bg-white rounded-lg shadow-sm xl:mx-3 xl:w-2/3 xl:p-6">
453
- <h2 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">Projects</h2>
454
-
455
- <p class="flex items-center mt-2 text-gray-500">
456
- <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-500"
457
- viewBox="0 0 20 20" fill="currentColor">
458
- <path fill-rule="evenodd"
459
- d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
460
- clip-rule="evenodd" />
461
- </svg>
462
-
463
- <span class="mx-2">30 done this month</span>
464
- </p>
465
-
466
- <div class="flex flex-col mt-8">
467
- <div class="overflow-x-auto">
468
- <div class="inline-block min-w-full align-middle">
469
- <div class="overflow-hidden">
470
- <table class="min-w-full divide-y divide-gray-200">
471
- <thead>
472
- <tr>
473
- <th scope="col"
474
- class="px-6 py-3 text-sm font-medium tracking-wider text-left text-gray-500 uppercase rtl:text-right">
475
- <span>COMPANIES</span>
476
- </th>
477
- <th scope="col"
478
- class="px-6 py-3 text-sm font-medium tracking-wider text-left text-gray-500 uppercase rtl:text-right">
479
- <span>MEMBERS</span>
480
- </th>
481
- <th scope="col"
482
- class="px-6 py-3 text-sm font-medium tracking-wider text-left text-gray-500 uppercase rtl:text-right">
483
- <span>BUDGET</span>
484
- </th>
485
- <th scope="col"
486
- class="px-6 py-3 text-sm font-medium tracking-wider text-left text-gray-500 uppercase rtl:text-right">
487
- <span>COMPLETION</span>
488
- </th>
489
- </tr>
490
- </thead>
491
-
492
- <tbody class="bg-white divide-y divide-gray-200">
493
- <tr>
494
- <td
495
- class="px-6 py-4 font-medium text-gray-800 whitespace-nowrap">
496
- Chakra Soft UI Version
497
- </td>
498
-
499
- <td class="px-6 py-4 font-medium whitespace-nowrap">
500
- <div
501
- class="relative z-0 flex -space-x-1 overflow-hidden">
502
- <img class="relative z-30 inline-block w-6 h-6 rounded-full ring-2 ring-white"
503
- src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
504
- alt="">
505
- <img class="relative z-20 inline-block w-6 h-6 rounded-full ring-2 ring-white"
506
- src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
507
- alt="">
508
- <img class="relative z-10 inline-block w-6 h-6 rounded-full ring-2 ring-white"
509
- src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
510
- alt="">
511
- <img class="relative z-0 inline-block w-6 h-6 rounded-full ring-2 ring-white"
512
- src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
513
- alt="">
514
- </div>
515
- </td>
516
-
517
- <td
518
- class="px-6 py-4 font-medium text-gray-700 whitespace-nowrap">
519
- $128.00
520
- </td>
521
-
522
- <td
523
- class="px-6 py-4 text-gray-700 capitalize whitespace-nowrap">
524
- <span class="font-medium text-indigo-500">66%</span>
525
- <div
526
- class="w-full h-2 overflow-hidden bg-gray-200 rounded-full">
527
- <div class="w-8/12 h-full bg-indigo-500"></div>
528
- </div>
529
- </td>
530
- </tr>
531
-
532
- <tr>
533
- <td
534
- class="px-6 py-4 font-medium text-gray-800 whitespace-nowrap">
535
- Add Progress Track
536
- </td>
537
-
538
- <td class="px-6 py-4 font-medium whitespace-nowrap">
539
- <div
540
- class="relative z-0 flex -space-x-1 overflow-hidden">
541
- <img class="relative z-30 inline-block w-6 h-6 rounded-full ring-2 ring-white"
542
- src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
543
- alt="">
544
- <img class="relative z-10 inline-block w-6 h-6 rounded-full ring-2 ring-white"
545
- src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
546
- alt="">
547
- <img class="relative z-0 inline-block w-6 h-6 rounded-full ring-2 ring-white"
548
- src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
549
- alt="">
550
- </div>
551
- </td>
552
-
553
- <td
554
- class="px-6 py-4 font-medium text-gray-700 whitespace-nowrap">
555
- $220.00
556
- </td>
557
-
558
- <td
559
- class="px-6 py-4 text-gray-700 capitalize whitespace-nowrap">
560
- <span class="font-medium text-indigo-500">25%</span>
561
- <div
562
- class="w-full h-2 overflow-hidden bg-gray-200 rounded-full">
563
- <div class="w-3/12 h-full bg-indigo-500 "></div>
564
- </div>
565
- </td>
566
- </tr>
567
-
568
- <tr>
569
- <td
570
- class="px-6 py-4 font-medium text-gray-800 whitespace-nowrap">
571
- Fix Platform Errors
572
- </td>
573
-
574
- <td class="px-6 py-4 font-medium whitespace-nowrap">
575
- <div
576
- class="relative z-0 flex -space-x-1 overflow-hidden">
577
- <img class="relative z-10 inline-block w-6 h-6 rounded-full ring-2 ring-white"
578
- src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
579
- alt="">
580
- <img class="relative z-0 inline-block w-6 h-6 rounded-full ring-2 ring-white"
581
- src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
582
- alt="">
583
- </div>
584
- </td>
585
-
586
- <td
587
- class="px-6 py-4 font-medium text-gray-700 whitespace-nowrap">
588
- $89.00
589
- </td>
590
-
591
- <td
592
- class="px-6 py-4 text-gray-700 capitalize whitespace-nowrap">
593
- <span class="font-medium text-indigo-500">100%</span>
594
- <div
595
- class="w-full h-2 overflow-hidden bg-gray-200 rounded-full">
596
- <div class="w-full h-full bg-indigo-500"></div>
597
- </div>
598
- </td>
599
- </tr>
600
-
601
- <tr>
602
- <td
603
- class="px-6 py-4 font-medium text-gray-800 whitespace-nowrap">
604
- Chakra Soft UI Version
605
- </td>
606
-
607
- <td class="px-6 py-4 font-medium whitespace-nowrap">
608
- <div
609
- class="relative z-0 flex -space-x-1 overflow-hidden">
610
- <img class="relative z-40 inline-block w-6 h-6 rounded-full ring-2 ring-white"
611
- src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
612
- alt="">
613
- <img class="relative z-30 inline-block w-6 h-6 rounded-full ring-2 ring-white"
614
- src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
615
- alt="">
616
- <img class="relative z-20 inline-block w-6 h-6 rounded-full ring-2 ring-white"
617
- src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
618
- alt="">
619
- <img class="relative z-10 inline-block w-6 h-6 rounded-full ring-2 ring-white"
620
- src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
621
- alt="">
622
- <img class="relative z-0 inline-block w-6 h-6 rounded-full ring-2 ring-white"
623
- src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
624
- alt="">
625
- </div>
626
- </td>
627
-
628
- <td
629
- class="px-6 py-4 font-medium text-gray-700 whitespace-nowrap">
630
- $256.00
631
- </td>
632
-
633
- <td
634
- class="px-6 py-4 text-gray-700 capitalize whitespace-nowrap">
635
- <span class="font-medium text-indigo-500">75%</span>
636
- <div
637
- class="w-full h-2 overflow-hidden bg-gray-200 rounded-full">
638
- <div class="w-9/12 h-full bg-indigo-500 "></div>
639
- </div>
640
- </td>
641
- </tr>
642
- </tbody>
643
- </table>
644
- </div>
645
- </div>
646
- </div>
647
- </div>
648
- </div>
649
-
650
- <div class="w-full p-4 bg-white rounded-lg shadow-sm xl:mx-3 xl:w-1/3 xl:p-6">
651
- <h2 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">Orders overview</h2>
652
-
653
- <p class="mt-2 text-gray-500">
654
- <span class="text-green-500">+30%</span>&nbsp;this month
655
- </p>
656
-
657
- <div class="flow-root mt-6">
658
- <ul class="-mb-8">
659
- <li>
660
- <div class="relative pb-8">
661
- <span
662
- class="absolute top-4 left-4 rtl:right-4 rtl:left-auto -ml-px h-full w-0.5 bg-gray-200"
663
- aria-hidden="true"></span>
664
- <div class="relative flex">
665
- <div>
666
- <span
667
- class="flex items-center justify-center w-8 h-8 bg-white rounded-full ring-8 ring-white">
668
- <svg xmlns="http://www.w3.org/2000/svg"
669
- class="w-5 h-5 text-blue-500" viewBox="0 0 20 20"
670
- fill="currentColor">
671
- <path
672
- d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
673
- </svg>
674
- </span>
675
- </div>
676
-
677
- <div class="min-w-0 flex-1 pt-1.5 mx-3">
678
- <div>
679
- <p class="text-sm font-medium text-gray-700">$2400, Design
680
- changes</p>
681
- <p
682
- class="w-32 mt-1 text-sm text-gray-500 truncate sm:w-auto">
683
- 22 DEC 7:20 PM</p>
684
- </div>
685
- </div>
686
- </div>
687
- </div>
688
- </li>
689
-
690
- <li>
691
- <div class="relative pb-8">
692
- <span
693
- class="absolute top-4 left-4 -ml-px rtl:right-4 rtl:left-auto h-full w-0.5 bg-gray-200"
694
- aria-hidden="true"></span>
695
- <div class="relative flex">
696
- <div>
697
- <span
698
- class="flex items-center justify-center w-8 h-8 bg-white rounded-full ring-8 ring-white">
699
- <svg xmlns="http://www.w3.org/2000/svg"
700
- class="w-5 h-5 text-indigo-500" viewBox="0 0 20 20"
701
- fill="currentColor">
702
- <path fill-rule="evenodd"
703
- d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z"
704
- clip-rule="evenodd" />
705
- </svg>
706
- </span>
707
- </div>
708
-
709
- <div class="min-w-0 flex-1 pt-1.5 mx-3">
710
- <div>
711
- <p class="text-sm font-medium text-gray-700">New order
712
- #4219423</p>
713
- <p
714
- class="w-32 mt-1 text-sm text-gray-500 truncate sm:w-auto">
715
- 21 DEC 11:21 PM</p>
716
- </div>
717
- </div>
718
- </div>
719
- </div>
720
- </li>
721
-
722
- <li>
723
- <div class="relative pb-8">
724
- <span
725
- class="absolute top-4 left-4 -ml-px rtl:right-4 rtl:left-auto h-full w-0.5 bg-gray-200"
726
- aria-hidden="true"></span>
727
- <div class="relative flex">
728
- <div>
729
- <span
730
- class="flex items-center justify-center w-8 h-8 bg-white rounded-full ring-8 ring-white">
731
- <svg xmlns="http://www.w3.org/2000/svg"
732
- class="w-5 h-5 text-cyan-500" viewBox="0 0 20 20"
733
- fill="currentColor">
734
- <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
735
- <path fill-rule="evenodd"
736
- d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"
737
- clip-rule="evenodd" />
738
- </svg>
739
- </span>
740
- </div>
741
-
742
- <div class="min-w-0 flex-1 pt-1.5 mx-3">
743
- <div>
744
- <p class="text-sm font-medium text-gray-700">New card added
745
- for order #3210145</p>
746
- <p
747
- class="w-32 mt-1 text-sm text-gray-500 truncate sm:w-auto">
748
- 21 DEC 11:21 PM</p>
749
- </div>
750
- </div>
751
- </div>
752
- </div>
753
- </li>
754
-
755
- <li>
756
- <div class="relative pb-8">
757
- <div class="relative flex">
758
- <div>
759
- <span
760
- class="flex items-center justify-center w-8 h-8 bg-white rounded-full ring-8 ring-white">
761
- <svg xmlns="http://www.w3.org/2000/svg"
762
- class="w-5 h-5 text-green-500" viewBox="0 0 20 20"
763
- fill="currentColor">
764
- <path
765
- d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
766
- </svg>
767
- </span>
768
- </div>
769
-
770
-
771
- <div class="min-w-0 flex-1 pt-1.5 mx-3">
772
- <div>
773
- <p class="text-sm font-medium text-gray-700">Server Payments
774
- for April</p>
775
- <p
776
- class="w-32 mt-1 text-sm text-gray-500 truncate sm:w-auto">
777
- 21 DEC 9:28 PM</p>
778
- </div>
779
- </div>
780
- </div>
781
- </div>
782
- </li>
783
- </ul>
784
- </div>
785
- </div>
786
- </section> -->
787
  </div>
788
  </div>
789
  </main>
 
336
  </p>
337
  </div>
338
  </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
339
  </div>
340
  </div>
341
  </main>