Skip to content

Commit d510c64

Browse files
iuccioiuccio
committed
layout refacgtoring
1 parent 9429c27 commit d510c64

2 files changed

Lines changed: 76 additions & 36 deletions

File tree

‎demo/csvToJsonDemo.js‎

Lines changed: 51 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ document.addEventListener('DOMContentLoaded', function () {
3030
document.getElementById('header-index').addEventListener('input', updateOptions);
3131
document.getElementById('use-streaming').addEventListener('change', updateOptions);
3232
document.getElementById('use-chunked').addEventListener('change', toggleChunkedOptions);
33-
33+
document.getElementById('use-chunked').disabled = true;
3434

3535
// File input change
3636
document.getElementById('csv-file').addEventListener('change', handleFileSelect);
@@ -94,12 +94,20 @@ function updateOptions() {
9494
const quotedFields = document.getElementById('quoted-fields').checked;
9595
const delimiter = document.getElementById('delimiter').value;
9696
const headerIndex = parseInt(document.getElementById('header-index').value) || 0;
97-
9897
csvToJson.formatValueByType(formatValues);
98+
9999
csvToJson.supportQuotedField(quotedFields);
100100
csvToJson.fieldDelimiter(delimiter);
101101
csvToJson.indexHeader(headerIndex);
102-
102+
const useStreaming = document.getElementById('use-streaming');
103+
const useChunk = document.getElementById('use-chunked');
104+
if (useStreaming.checked) {
105+
useChunk.disabled = false;
106+
} else {
107+
useChunk.disabled = true;
108+
useChunk.removeAttr('checked');
109+
}
110+
103111
}
104112

105113
function toggleChunkedOptions() {
@@ -152,6 +160,7 @@ async function convert() {
152160
const output = document.getElementById('output');
153161
const convertBtn = document.getElementById('convert-btn');
154162

163+
155164
// Clear previous output
156165
clearOutput();
157166

@@ -189,8 +198,20 @@ async function convert() {
189198
await processFileInChunks(fileInput.files[0], chunkSize);
190199
} else if (useStreaming) {
191200
// Use streaming API
201+
const output = document.getElementById('output');
202+
output.classList.remove('hidden');
203+
initProgressDisplay(output);
204+
const startTime = performance.now();
192205
result = await csvToJson.getJsonFromFileStreamingAsync(fileInput.files[0]);
206+
console.log(result);
193207
displayResult(result);
208+
const endTime = performance.now();
209+
const takenTimeInMs = Math.floor(endTime - startTime);
210+
const takenTimeInSeconds = Math.floor((takenTimeInMs)/1000).toFixed(2);
211+
document.getElementById('progress-fill').style.width = '100%';
212+
document.getElementById('progress-text').textContent = `Complete! Processed ${result.length} rows in ${takenTimeInSeconds} seconds (${takenTimeInMs} milliseconds)`;
213+
214+
194215
} else {
195216
// Use regular file parsing
196217
result = await csvToJson.parseFile(fileInput.files[0]);
@@ -206,6 +227,23 @@ async function convert() {
206227
}
207228
}
208229

230+
function removeProgressDisplay() {
231+
const progressDisplay = document.getElementById('progress-display');
232+
if (progressDisplay) {
233+
progressDisplay.remove();
234+
}
235+
}
236+
237+
function initProgressDisplay(output) {
238+
removeProgressDisplay();
239+
240+
// Create progress display
241+
const progressDiv = document.createElement('div');
242+
progressDiv.id = 'progress-display';
243+
progressDiv.innerHTML = '<h4>Processing large file...</h4><div id="progress-bar" style="width: 100%; background: #f0f0f0; height: 20px; border-radius: 10px; margin: 10px 0;"><div id="progress-fill" style="width: 0%; height: 100%; background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); border-radius: 10px; transition: width 0.3s;"></div></div><div id="progress-text">Initializing...</div>';
244+
output.insertBefore(progressDiv, output.firstChild);
245+
}
246+
209247
async function processFileInChunks(file, chunkSize) {
210248
const output = document.getElementById('output');
211249
const jsonOutput = document.getElementById('json-output');
@@ -220,13 +258,10 @@ async function processFileInChunks(file, chunkSize) {
220258
let allRows = [];
221259
let totalProcessed = 0;
222260

223-
// Create progress display
224-
const progressDiv = document.createElement('div');
225-
progressDiv.id = 'progress-display';
226-
progressDiv.innerHTML = '<h4>Processing large file...</h4><div id="progress-bar" style="width: 100%; background: #f0f0f0; height: 20px; border-radius: 10px; margin: 10px 0;"><div id="progress-fill" style="width: 0%; height: 100%; background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); border-radius: 10px; transition: width 0.3s;"></div></div><div id="progress-text">Initializing...</div>';
227-
output.insertBefore(progressDiv, output.firstChild);
261+
initProgressDisplay(output);
228262

229263
try {
264+
const startTime = performance.now();
230265
await csvToJson.getJsonFromFileStreamingAsyncWithCallback(file, {
231266
chunkSize: chunkSize,
232267
onChunk: (rows, processed, total) => {
@@ -249,36 +284,33 @@ async function processFileInChunks(file, chunkSize) {
249284
},
250285
onComplete: (allRowsComplete) => {
251286
console.log('onComplete called', allRowsComplete.length);
287+
const endTime = performance.now();
288+
const takenTimeInMs = Math.floor(endTime - startTime);
289+
const takenTimeInSeconds = Math.floor((takenTimeInMs)/1000).toFixed(2);
252290
allRows = allRowsComplete;
253291

254292
// Update progress to 100%
255293
document.getElementById('progress-fill').style.width = '100%';
256-
document.getElementById('progress-text').textContent = `Complete! Processed ${allRows.length} rows.`;
294+
document.getElementById('progress-text').textContent = `Complete! Processed ${allRows.length} rows in ${takenTimeInSeconds} seconds (${takenTimeInMs} milliseconds)`;
257295

258296
// Display final results
259297
jsonOutput.textContent = JSON.stringify(allRows, null, 2);
260298
displayStats(allRows);
261299
displayTable(allRows);
262300
showOutputTab('table');
263301

264-
// Remove progress after a delay
265-
setTimeout(() => {
266-
const progressDisplay = document.getElementById('progress-display');
267-
if (progressDisplay) progressDisplay.remove();
268-
}, 3000);
302+
269303
},
270304
onError: (error) => {
271305
console.error('Error:', error);
272306
displayError(error);
273-
const progressDisplay = document.getElementById('progress-display');
274-
if (progressDisplay) progressDisplay.remove();
307+
removeProgressDisplay();
275308
}
276309
});
277310
} catch (error) {
278311
console.error('Catch error:', error);
279312
displayError(error);
280-
const progressDisplay = document.getElementById('progress-display');
281-
if (progressDisplay) progressDisplay.remove();
313+
removeProgressDisplay();
282314
}
283315
}
284316

@@ -373,6 +405,7 @@ function displayError(error) {
373405
}
374406

375407
function clearOutput() {
408+
removeProgressDisplay();
376409
const output = document.getElementById('output');
377410
const jsonOutput = document.getElementById('json-output');
378411
const tableOutput = document.getElementById('table-output');

‎demo/index.html‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
}
5555

5656
.input-section {
57-
margin-bottom: 30px;
57+
margin-bottom: 15px;
5858
}
5959

6060
.tabs {
@@ -100,6 +100,13 @@
100100
color: #495057;
101101
}
102102

103+
hr {
104+
height: 2px;
105+
border-width: 0;
106+
color: gray;
107+
background-color: gray
108+
}
109+
103110
textarea,
104111
input[type="file"] {
105112
width: 100%;
@@ -128,16 +135,13 @@
128135
padding: 8px 12px;
129136
background-color: #e9ecef;
130137
border-radius: 4px;
131-
font-size: 14px;
138+
font-size: 16px;
139+
font-weight: 500;
132140
display: none;
133141
}
134142

135-
.samples {
136-
margin-top: 15px;
137-
}
138-
139143
.sample-btn {
140-
background: #6c757d;
144+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
141145
color: white;
142146
border: none;
143147
padding: 8px 16px;
@@ -150,14 +154,15 @@
150154
}
151155

152156
.sample-btn:hover {
153-
background: #5a6268;
157+
transform: translateY(-1px);
158+
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
154159
}
155160

156161
.options {
157162
background-color: #f8f9fa;
158163
padding: 20px;
159164
border-radius: 8px;
160-
margin-bottom: 30px;
165+
margin-bottom: 15px;
161166
border: 1px solid #dee2e6;
162167
}
163168

@@ -188,7 +193,8 @@
188193

189194
.buttons {
190195
text-align: center;
191-
margin-bottom: 30px;
196+
margin-top: 30px;
197+
margin-bottom: 15px;
192198
}
193199

194200
button {
@@ -211,10 +217,10 @@
211217
}
212218

213219
button:disabled {
214-
background: #6c757d;
215220
cursor: not-allowed;
216221
transform: none;
217222
box-shadow: none;
223+
opacity: 0.3;
218224
}
219225

220226
.output {
@@ -472,13 +478,11 @@ <h1>CSV to JSON Converter</h1>
472478
name,age,city
473479
John,25,New York
474480
Jane,30,London"></textarea>
475-
<div class="samples">
476-
<label>Try a sample:</label><br>
477-
<button class="sample-btn" data-sample="basic">Basic CSV</button>
478-
<button class="sample-btn" data-sample="quoted">Quoted Fields</button>
479-
<button class="sample-btn" data-sample="numbers">Numbers</button>
480-
<button class="sample-btn" data-sample="dates">Dates</button>
481-
</div>
481+
<label>Try a sample:</label>
482+
<button class="sample-btn" data-sample="basic">Basic CSV</button>
483+
<button class="sample-btn" data-sample="quoted">Quoted Fields</button>
484+
<button class="sample-btn" data-sample="numbers">Numbers</button>
485+
<button class="sample-btn" data-sample="dates">Dates</button>
482486
</div>
483487
</div>
484488

@@ -492,6 +496,7 @@ <h1>CSV to JSON Converter</h1>
492496

493497
<div class="options">
494498
<h3>Parsing Options</h3>
499+
<hr>
495500
<div class="option-group">
496501
<input type="checkbox" id="format-values" checked>
497502
<label for="format-values">Format values by type</label>
@@ -509,6 +514,8 @@ <h3>Parsing Options</h3>
509514
<input type="number" id="header-index" value="0" min="0" size="2">
510515
</div>
511516
<div id="file-only-options">
517+
<h6>Streaming Options: for big files</h6>
518+
<hr>
512519
<div class="option-group">
513520
<input type="checkbox" id="use-streaming">
514521
<label for="use-streaming">Use streaming (files only)</label>

0 commit comments

Comments
 (0)