From 649120cff7bb3c682d55bb6e009b504682cc7b04 Mon Sep 17 00:00:00 2001 From: IshaGupta18 Date: Tue, 21 May 2019 17:42:13 +0530 Subject: [PATCH 1/3] Adding CSV string import function --- examples/upload_file.css | 141 +++++++++++++++++++---- examples/upload_file.html | 104 ++++++++++++----- src/parsing.js | 228 +++++++++++++++++++++++++++++++------- 3 files changed, 380 insertions(+), 93 deletions(-) diff --git a/examples/upload_file.css b/examples/upload_file.css index b5daffb..f452516 100644 --- a/examples/upload_file.css +++ b/examples/upload_file.css @@ -1,12 +1,12 @@ .main_container{ - margin:0 auto; - width: 50%; - margin-top: 300px; - height: 500px; - display: flex; - flex-direction: column; - justify-content: space-around; - align-items: center; + margin:0 auto; + width: 50%; + margin-top: 300px; + height: 600px; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; } .btn-file { @@ -33,26 +33,123 @@ display: block; } .drag_drop_heading{ - margin-top: 50px; + margin-top: 50px; } - .remote_file{ - width: 300px; - border-radius: 5px; - height: 40px; + .text_field{ + width: 350px; + border-radius: 5px; + height: 40px; padding-left: 5px; } ::placeholder{ - font-size: 12px; + font-size: 12px; } .or { - width:50%; - text-align:center; - border-bottom: 1px solid #000; - line-height:0.1em; - margin:10px 0 20px; + width:45%; + text-align:center; + border-bottom: 1px solid #cccccc; + line-height:0.1em; + margin:10px 0 20px; } .or span { - background:#fff; - padding:0 10px; - } \ No newline at end of file + background:#fff; + padding:0 10px; + font-size: 12px; + color: #595959; + } + .input_box{ + width: 350px; + } + .carousel-indicators{ + top: 200px; + justify-content:space-around; + margin:0; + display: flex; + height: 20px; +} +.tables{ + margin-top: 300px; + text-align: center; + +} +.graph{ + margin-top: 300px; +} +#canvas_container{ + width: 50%; + margin: 0 auto; +} +ol.carousel-indicators li.active { + background: #004080; +} +ol.carousel-indicators li{ + width: 150px; + height: 6px; + cursor: pointer; + background: #cccccc; +} +.carousel_headings{ + justify-content:space-around; + margin:0; + display: flex; + height: 20px; +} +.toggle-handle{ + background: #f2f2f2; + width: 100px; +} +.toggle-on{ + text-align: left; + margin-left: 15px; +} +.toggle-off{ + text-align: right; + margin-right: 15px; +} +.hidden { + display:none; +} +.table_container{ + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +} +.button_container{ + display: flex; + flex-direction: column; + justify-content: space-around; + height: 100px; + align-items: center; + margin-bottom: 30px; +} +.table{ + font-family: 'Ubuntu Condensed'; + overflow: auto; + width: 500px; +} +.feature_buttons{ + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; +} +.headings{ + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + margin-bottom: -160px; +} +.check-inputs{ + margin-left: 10px; + +} +.badge{ + padding: 10px; +} +.csv_string{ + height: 100px; + width: 350px; +} \ No newline at end of file diff --git a/examples/upload_file.html b/examples/upload_file.html index c12d72a..dd2b425 100644 --- a/examples/upload_file.html +++ b/examples/upload_file.html @@ -8,42 +8,88 @@ - + + + + + + + + -
-
- -

Choose a csv file or drag & drop it here

- - - -
-
OR
-
- + -
-
-
-
-
-
+
+
+
+
+ +

Choose a csv file or drag & drop it here

+ + -
- -
-
-
+
+
OR
+
+ +
+
OR
+
+ +
+ +
+ +
+ + +
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+
+
+ + +
+
+
+ + + +
+
+
+
+
- + \ No newline at end of file diff --git a/src/parsing.js b/src/parsing.js index 4196582..c4de71d 100644 --- a/src/parsing.js +++ b/src/parsing.js @@ -1,10 +1,28 @@ +var counting=0; +function saveAsImage(){ + console.log("at image"); + var x=new Date(); + var timestamp=x.getTime(); + $("#save_as_image").click(function() { + $("#canvas").get(0).toBlob(function(blob) { + saveAs(blob, "chart"+timestamp); + }); + }); +} +function colorBackground(ctx,canv){ + Chart.plugins.register({ + beforeDraw: function() { + ctx.fillStyle = 'white'; + ctx.fillRect(0, 0, canv.width, canv.height); + } + }); +} function determineType(type){ + console.log("at type"); if (type=="Basic" || type=="Stepped" || type=="Point"){ - console.log("wtf"); return 'line'; } else if (type=="Horizontal"){ - console.log("did i enter"); return 'horizontalBar'; } else if (type=="Vertical"){ @@ -15,21 +33,31 @@ function determineType(type){ return type.toLowerCase(); } } -function determineConfig(type){ +function determineData(type,i,hash){ + console.log("at data"); + h={}; if (type=="Basic"){ - return {'fill': false}; + h['fill'] = false; } else if (type=="Stepped"){ - return {'steppedLine': true, 'fill': false}; + h['steppedLine']= true; + h['fill']= false; } else if (type=="Point"){ - return {'showLine': false, 'pointRadius': 10}; - } - else{ - return {}; + h['showLine']= false; + h['pointRadius']= 10; } + h['backgroundColor']=colorGenerator(i,"bg",type,hash['y_axis_values'+i].length); + h['borderColor']=colorGenerator(i,"bo",type,hash['y_axis_values'+i].length); + h['borderWidth']=1; + h['label']=hash['labels'][1][i]; + h['data']=hash['y_axis_values'+i]; + return h; + } function graphMenu(){ + console.log("at menu"); + document.getElementById("graph_menu").innerHTML=""; var bar=["Bar","Horizontal","Vertical"]; var line=["Line","Basic","Stepped","Point"]; var disc=["Disc","Pie","Doughnut","Radar"]; @@ -54,6 +82,7 @@ function graphMenu(){ } } function colorGenerator(i,tb,type,count){ + console.log("at color"); var colors=['rgba(255, 77, 210, 0.5)','rgba(0, 204, 255, 0.5)','rgba(128, 0, 255, 0.5)','rgba(255, 77, 77, 0.5)','rgba(0, 179, 0, 0.5)','rgba(255, 255, 0, 0.5)','rgba(255, 0, 102, 0.5)','rgba(0, 115, 230, 0.5)']; var bordercolors=['rgb(255, 0, 191)','rgb(0, 184, 230)','rgb(115, 0, 230)','rgb(255, 51, 51)','rgb(0, 153, 0)','rgb(230, 230, 0)','rgb(230, 0, 92)','rgb(0, 102, 204)']; var length=8; @@ -81,6 +110,7 @@ function colorGenerator(i,tb,type,count){ } } function scales(hash){ + console.log("at scales"); var scales= { xAxes: [{ display: true, @@ -99,35 +129,60 @@ function scales(hash){ } return scales; } -function plotGraph(hash,length,type){ +function determineConfig(hash,length,type){ + console.log("at config"); var config = {}; config['type']=determineType(type); var data={}; data['labels']=hash['x_axis_labels']; var datasets=[]; for (var i=0;i=5){ + if (counter>=maxval){ break; } else if (completeData[i][j]!=null || completeData[i][j]!=undefined){ @@ -212,7 +291,7 @@ function extractSampleData(completeData,headers){ validForYAxis.push(headers[i]); } } - console.log(sampleData); + console.log(sampleData,"sampleData"); console.log(validForYAxis); sampleDataXandY(sampleData,headers,validForYAxis,completeData); @@ -283,12 +362,21 @@ function parse(file){ }, complete: function() { console.log(mat); + $('.carousel').carousel(1); //calling a function to determine headers for columns determineHeaders(mat); } - }); - + }); +} + +function parse_string(stringVal){ + var values = Papa.parse(stringVal,{ + dynamicTyping: true, + comments: true + }); + console.log(values); + } //extracts the file uploaded in the field function handleFileSelectlocal(evt) { @@ -297,18 +385,74 @@ function handleFileSelectlocal(evt) { alert("Invalid file type"); } else{ - parse(csv_file_local);} + $('.drag_drop_heading').text(csv_file_local['name']); + document.getElementById("upload").onclick = function(e){ + parse(csv_file_local); + } + + } } //reads the input from the text field in which the link of the remote file is included function handleFileSelectremote(val){ var csv_file_remote = val; - parse(csv_file_remote); + var l=csv_file_remote.length; + if (csv_file_remote.slice(l-3,l)!="csv"){ + alert("Invalid URL"); + } + else{ + document.getElementById("upload").onclick = function(e){ + + parse(csv_file_remote); + } + } +} +function handleFileSelectstring(val){ + var csv_string = val.split("\n"); + var mat=[]; + for (var i=0;i Date: Tue, 21 May 2019 17:54:55 +0530 Subject: [PATCH 2/3] small fix --- src/parsing.js | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/src/parsing.js b/src/parsing.js index c4de71d..b96383a 100644 --- a/src/parsing.js +++ b/src/parsing.js @@ -269,8 +269,8 @@ function extractSampleData(completeData,headers){ sampleData[i]=[]; } var maxval=5; - if (completeData.length<5){ - maxval=completeData.length; + if (completeData.length[0]<5){ + maxval=completeData[0].length; } for (var i=0;i Date: Fri, 24 May 2019 17:23:22 +0530 Subject: [PATCH 3/3] keeping up to date --- src/parsing.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/parsing.js b/src/parsing.js index b96383a..4a1d112 100644 --- a/src/parsing.js +++ b/src/parsing.js @@ -153,18 +153,15 @@ function plotGraph(hash,length,type,ci,flag){ if (flag){ console.log("at plotGraph"); document.getElementById('canvas_container').innerHTML="";} - var div = document.createElement('div'); - div.classList.add('chart-container'); - - console.log(ci+"i"); + div.classList.add('chart-container'+ci); var canv=document.createElement('canvas'); - // canv.id="canvas"+ci; + canv.id='canvas'+ci; div.appendChild(canv); document.getElementById('canvas_container').appendChild(div); var ctx = canv.getContext('2d'); - colorBackground(ctx,canv); - new Chart(ctx, determineConfig(hash,length,type)); + var configuration=determineConfig(hash,length,type); + new Chart(ctx, configuration); $('.carousel').carousel(2); // saveAsImage(); // new RangeSliderChart({