diff --git a/dist/PublicLab.Grapher.js b/dist/PublicLab.Grapher.js index d150a9c..cc1401f 100644 --- a/dist/PublicLab.Grapher.js +++ b/dist/PublicLab.Grapher.js @@ -22,7 +22,7 @@ var CsvParser = /*#__PURE__*/ function () { //start is variable that will be passed to the function to sort out the columns. start will tell if the existing CSV file has headers or not, therefore, to start the iteration from 0 or 1 Used in header determination - function CsvParser(file, elementId) { + function CsvParser(file, elementId, functionParameter) { _classCallCheck(this, CsvParser); _defineProperty(this, 'use strict', void 0); @@ -43,14 +43,24 @@ function () { _defineProperty(this, "elementId", null); - this.csvFile = file; this.elementId = elementId; - this.parse(); + + if (functionParameter == "local") { + this.csvFile = file; + this.parse(functionParameter); + } else if (functionParameter == "csvstring") { + this.csvMatrix = file; + this.startFileProcessing(functionParameter); + } else if (functionParameter == "googleSheet") { + this.completeCsvMatrix = file[0]; + this.csvHeaders = file[1]; + this.startFileProcessing(functionParameter); + } } _createClass(CsvParser, [{ key: "parse", - value: function parse() { + value: function parse(functionParameter) { var _this = this; var count = 0; @@ -64,16 +74,20 @@ function () { }, complete: function complete() { //calling a function to determine headers for columns - _this.startFileProcessing(); + _this.startFileProcessing(functionParameter); } }); } }, { key: "startFileProcessing", - value: function startFileProcessing() { - this.determineHeaders(); - this.matrixForCompleteData(); - this.extractSampleData(); + value: function startFileProcessing(functionParameter) { + if (functionParameter == "local" || functionParameter == "csvstring") { + this.determineHeaders(); + this.matrixForCompleteData(); + this.extractSampleData(); + } else if (functionParameter == "googleSheet") { + this.extractSampleData(); + } _SimpleDataGrapher.SimpleDataGrapher.elementIdSimpleDataGraphInstanceMap[this.elementId].view.continueViewManipulation(); } //preparing sample data for the user to choose the columns from @@ -83,6 +97,10 @@ function () { value: function extractSampleData() { var maxval = 5; + for (var i = 0; i < this.csvHeaders.length; i++) { + this.csvSampleData[i] = []; + } + if (this.completeCsvMatrix.length[0] < 5) { maxval = this.completeCsvMatrix[0].length; } @@ -203,7 +221,7 @@ Object.defineProperty(exports, "__esModule", { }); exports.View = void 0; -var _CsvParser = require("./CsvParser"); +var _CsvParser2 = require("./CsvParser"); var _SimpleDataGrapher = require("./SimpleDataGrapher"); @@ -235,10 +253,108 @@ function () { document.getElementById(this.uploadButtonId).onclick = function (e) { console.log("i am uploading"); console.log(_this); - _this.csvParser = new _CsvParser.CsvParser(_this.csvFile, _this.elementId); + _this.csvParser = new _CsvParser2.CsvParser(_this.csvFile, _this.elementId, "local"); }; } } + }, { + key: "handleFileSelectstring", + value: function handleFileSelectstring(val) { + // this.csvFileString = val; + console.log("value", val); + console.log("i am at csv string handler"); + var csv_string = val.split("\n"); + var mat = []; + + for (var i = 0; i < csv_string.length; i++) { + if (csv_string[i] == "" || csv_string[i] == " ") { + continue; + } + + var dataHash = Papa.parse(csv_string[i], { + dynamicTyping: true, + comments: true + }); + mat[i] = dataHash['data'][0]; + } + + this.csvFile = mat; + + document.getElementById(this.uploadButtonId).onclick = function (e) { + console.log("i am uploading"); + console.log(this); + this.csvParser = new _CsvParser.CsvParser(this.csvFile, this.elementId, "csvstring"); + }; + } + }, { + key: "handleFileSelectGoogleSheet", + value: function handleFileSelectGoogleSheet(val) { + var headers_sheet = []; + var matrixComplete = []; + $.getJSON(val, function (data) { + var hashSheet = data.feed.entry; + + for (var key in hashSheet) { + var h = hashSheet[key]; + + for (var headKey in h) { + if (headKey.slice(0, 4) == "gsx$") { + headers_sheet.push(headKey); + } + } + + break; + } + + for (var i = 0; i < headers_sheet.length; i++) { + matrixComplete[i] = []; + } + + for (var i = 0; i < headers_sheet.length; i++) { + var j = 0; + + for (var key in hashSheet) { + matrixComplete[i].push(hashSheet[key][headers_sheet[i]]["$t"]); + j++; + } + } + + for (var i = 0; i < headers_sheet.length; i++) { + headers_sheet[i] = headers_sheet[i].slice(4, headers_sheet[i].length); + } // var totaldata=[headers_sheet,matrixComplete]; + // this.sheetData=totaldata; + + + console.log(headers_sheet, "hh"); + }); + this.csvFile = [headers_sheet, matrixComplete]; + + document.getElementById(this.uploadButtonId).onclick = function (e) { + console.log("i am uploading"); + console.log(this); + this.csvParser = new _CsvParser.CsvParser(this.csvFile, this.elementId, "googleSheet"); + }; + } + }, { + key: "receive", + value: function receive(vall) { + console.log(vall); + console.log("hurray!!"); + } + }, { + key: "handleFileSelectremote", + value: function handleFileSelectremote(val) { + var proxyurl = "https://cors-anywhere.herokuapp.com/"; + var url = val; + fetch(proxyurl + url).then(function (response) { + return response.text(); + }).then(function (contents) { + return console.log(contents); + })["catch"](function () { + return console.log("Can’t access " + url + " response. Blocked by browser?"); + }); + console.log(this.csvFile, "remote file"); + } }, { key: "determineType", value: function determineType(type) { @@ -422,6 +538,7 @@ function () { }, { key: "graphMenu", value: function graphMenu() { + $('.' + this.carousalClass).carousel(1); console.log("at menu"); document.getElementById(this.graphMenuId).innerHTML = ""; var bar = ["Bar", "Horizontal", "Vertical"]; @@ -545,6 +662,12 @@ function () { _defineProperty(this, "fileUploadId", null); + _defineProperty(this, "remoteFileUploadId", null); + + _defineProperty(this, "csvStringUploadId", null); + + _defineProperty(this, "googleSheetUploadId", null); + _defineProperty(this, "csvFile", null); _defineProperty(this, "dragDropHeadingId", null); @@ -597,6 +720,9 @@ function () { console.log("i am in view"); this.fileUploadId = elementId + "_csv_file"; + this.remoteFileUploadId = elementId + "_remote_file"; + this.csvStringUploadId = elementId + "_csv_string"; + this.googleSheetUploadId = elementId + "_google_sheet"; this.dragDropHeadingId = elementId + "_drag_drop_heading"; this.uploadButtonId = elementId + "_file_upload_button"; this.addGraphButtonId = elementId + "_add_graph"; @@ -648,11 +774,32 @@ function () { _this5.handleFileSelectlocal(e); }); + $("#" + this.csvStringUploadId).change(function () { + // var x=$("#"+this.csvStringUploadId); + console.log(document.getElementById(_this5.csvStringUploadId).value); // console.log("i am at csv string",x); + + _this5.handleFileSelectstring(document.getElementById(_this5.csvStringUploadId).value); + }); + $("#" + this.googleSheetUploadId).change(function () { + // var x=$("#"+this.googleSheetUploadId); + console.log(document.getElementById(_this5.csvStringUploadId).value); // console.log("i am at csv string",x); + + var sheetLink = document.getElementById(_this5.csvStringUploadId).value; + var sheetURL = "https://spreadsheets.google.com/feeds/list/" + sheetLink.split("/")[5] + "/od6/public/values?alt=json"; + + _this5.handleFileSelectstring(sheetURL); + }); + $("#" + this.remoteFileUploadId).change(function () { + // var remotefileLink=document.getElementById(this.remoteFileUploadId).value; + console.log(document.getElementById(_this5.remoteFileUploadId).value); + + _this5.handleFileSelectremote(document.getElementById(_this5.remoteFileUploadId).value); + }); } }, { key: "drawHTMLView", value: function drawHTMLView() { - this.element.innerHTML = '

Choose a csv file or drag & drop it here

OR
OR
'; + this.element.innerHTML = '

Simple Data Grapher

Plot and Export Graphs with CSV data

Choose a csv file or drag & drop it here

OR
OR
OR
'; } }]); diff --git a/dist/transpiled_code/CsvParser.js b/dist/transpiled_code/CsvParser.js index cd6c74e..3333a83 100644 --- a/dist/transpiled_code/CsvParser.js +++ b/dist/transpiled_code/CsvParser.js @@ -21,7 +21,7 @@ var CsvParser = /*#__PURE__*/ function () { //start is variable that will be passed to the function to sort out the columns. start will tell if the existing CSV file has headers or not, therefore, to start the iteration from 0 or 1 Used in header determination - function CsvParser(file, elementId) { + function CsvParser(file, elementId, functionParameter) { _classCallCheck(this, CsvParser); _defineProperty(this, 'use strict', void 0); @@ -42,14 +42,24 @@ function () { _defineProperty(this, "elementId", null); - this.csvFile = file; this.elementId = elementId; - this.parse(); + + if (functionParameter == "local") { + this.csvFile = file; + this.parse(functionParameter); + } else if (functionParameter == "csvstring") { + this.csvMatrix = file; + this.startFileProcessing(functionParameter); + } else if (functionParameter == "googleSheet") { + this.completeCsvMatrix = file[0]; + this.csvHeaders = file[1]; + this.startFileProcessing(functionParameter); + } } _createClass(CsvParser, [{ key: "parse", - value: function parse() { + value: function parse(functionParameter) { var _this = this; var count = 0; @@ -63,16 +73,20 @@ function () { }, complete: function complete() { //calling a function to determine headers for columns - _this.startFileProcessing(); + _this.startFileProcessing(functionParameter); } }); } }, { key: "startFileProcessing", - value: function startFileProcessing() { - this.determineHeaders(); - this.matrixForCompleteData(); - this.extractSampleData(); + value: function startFileProcessing(functionParameter) { + if (functionParameter == "local" || functionParameter == "csvstring") { + this.determineHeaders(); + this.matrixForCompleteData(); + this.extractSampleData(); + } else if (functionParameter == "googleSheet") { + this.extractSampleData(); + } _SimpleDataGrapher.SimpleDataGrapher.elementIdSimpleDataGraphInstanceMap[this.elementId].view.continueViewManipulation(); } //preparing sample data for the user to choose the columns from @@ -82,6 +96,10 @@ function () { value: function extractSampleData() { var maxval = 5; + for (var i = 0; i < this.csvHeaders.length; i++) { + this.csvSampleData[i] = []; + } + if (this.completeCsvMatrix.length[0] < 5) { maxval = this.completeCsvMatrix[0].length; } diff --git a/dist/transpiled_code/View.js b/dist/transpiled_code/View.js index 753802b..582874a 100644 --- a/dist/transpiled_code/View.js +++ b/dist/transpiled_code/View.js @@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", { }); exports.View = void 0; -var _CsvParser = require("./CsvParser"); +var _CsvParser2 = require("./CsvParser"); var _SimpleDataGrapher = require("./SimpleDataGrapher"); @@ -37,10 +37,108 @@ function () { document.getElementById(this.uploadButtonId).onclick = function (e) { console.log("i am uploading"); console.log(_this); - _this.csvParser = new _CsvParser.CsvParser(_this.csvFile, _this.elementId); + _this.csvParser = new _CsvParser2.CsvParser(_this.csvFile, _this.elementId, "local"); }; } } + }, { + key: "handleFileSelectstring", + value: function handleFileSelectstring(val) { + // this.csvFileString = val; + console.log("value", val); + console.log("i am at csv string handler"); + var csv_string = val.split("\n"); + var mat = []; + + for (var i = 0; i < csv_string.length; i++) { + if (csv_string[i] == "" || csv_string[i] == " ") { + continue; + } + + var dataHash = Papa.parse(csv_string[i], { + dynamicTyping: true, + comments: true + }); + mat[i] = dataHash['data'][0]; + } + + this.csvFile = mat; + + document.getElementById(this.uploadButtonId).onclick = function (e) { + console.log("i am uploading"); + console.log(this); + this.csvParser = new _CsvParser.CsvParser(this.csvFile, this.elementId, "csvstring"); + }; + } + }, { + key: "handleFileSelectGoogleSheet", + value: function handleFileSelectGoogleSheet(val) { + var headers_sheet = []; + var matrixComplete = []; + $.getJSON(val, function (data) { + var hashSheet = data.feed.entry; + + for (var key in hashSheet) { + var h = hashSheet[key]; + + for (var headKey in h) { + if (headKey.slice(0, 4) == "gsx$") { + headers_sheet.push(headKey); + } + } + + break; + } + + for (var i = 0; i < headers_sheet.length; i++) { + matrixComplete[i] = []; + } + + for (var i = 0; i < headers_sheet.length; i++) { + var j = 0; + + for (var key in hashSheet) { + matrixComplete[i].push(hashSheet[key][headers_sheet[i]]["$t"]); + j++; + } + } + + for (var i = 0; i < headers_sheet.length; i++) { + headers_sheet[i] = headers_sheet[i].slice(4, headers_sheet[i].length); + } // var totaldata=[headers_sheet,matrixComplete]; + // this.sheetData=totaldata; + + + console.log(headers_sheet, "hh"); + }); + this.csvFile = [headers_sheet, matrixComplete]; + + document.getElementById(this.uploadButtonId).onclick = function (e) { + console.log("i am uploading"); + console.log(this); + this.csvParser = new _CsvParser.CsvParser(this.csvFile, this.elementId, "googleSheet"); + }; + } + }, { + key: "receive", + value: function receive(vall) { + console.log(vall); + console.log("hurray!!"); + } + }, { + key: "handleFileSelectremote", + value: function handleFileSelectremote(val) { + var proxyurl = "https://cors-anywhere.herokuapp.com/"; + var url = val; + fetch(proxyurl + url).then(function (response) { + return response.text(); + }).then(function (contents) { + return console.log(contents); + })["catch"](function () { + return console.log("Can’t access " + url + " response. Blocked by browser?"); + }); + console.log(this.csvFile, "remote file"); + } }, { key: "determineType", value: function determineType(type) { @@ -224,6 +322,7 @@ function () { }, { key: "graphMenu", value: function graphMenu() { + $('.' + this.carousalClass).carousel(1); console.log("at menu"); document.getElementById(this.graphMenuId).innerHTML = ""; var bar = ["Bar", "Horizontal", "Vertical"]; @@ -347,6 +446,12 @@ function () { _defineProperty(this, "fileUploadId", null); + _defineProperty(this, "remoteFileUploadId", null); + + _defineProperty(this, "csvStringUploadId", null); + + _defineProperty(this, "googleSheetUploadId", null); + _defineProperty(this, "csvFile", null); _defineProperty(this, "dragDropHeadingId", null); @@ -399,6 +504,9 @@ function () { console.log("i am in view"); this.fileUploadId = elementId + "_csv_file"; + this.remoteFileUploadId = elementId + "_remote_file"; + this.csvStringUploadId = elementId + "_csv_string"; + this.googleSheetUploadId = elementId + "_google_sheet"; this.dragDropHeadingId = elementId + "_drag_drop_heading"; this.uploadButtonId = elementId + "_file_upload_button"; this.addGraphButtonId = elementId + "_add_graph"; @@ -450,11 +558,32 @@ function () { _this5.handleFileSelectlocal(e); }); + $("#" + this.csvStringUploadId).change(function () { + // var x=$("#"+this.csvStringUploadId); + console.log(document.getElementById(_this5.csvStringUploadId).value); // console.log("i am at csv string",x); + + _this5.handleFileSelectstring(document.getElementById(_this5.csvStringUploadId).value); + }); + $("#" + this.googleSheetUploadId).change(function () { + // var x=$("#"+this.googleSheetUploadId); + console.log(document.getElementById(_this5.csvStringUploadId).value); // console.log("i am at csv string",x); + + var sheetLink = document.getElementById(_this5.csvStringUploadId).value; + var sheetURL = "https://spreadsheets.google.com/feeds/list/" + sheetLink.split("/")[5] + "/od6/public/values?alt=json"; + + _this5.handleFileSelectstring(sheetURL); + }); + $("#" + this.remoteFileUploadId).change(function () { + // var remotefileLink=document.getElementById(this.remoteFileUploadId).value; + console.log(document.getElementById(_this5.remoteFileUploadId).value); + + _this5.handleFileSelectremote(document.getElementById(_this5.remoteFileUploadId).value); + }); } }, { key: "drawHTMLView", value: function drawHTMLView() { - this.element.innerHTML = '

Choose a csv file or drag & drop it here

OR
OR
'; + this.element.innerHTML = '

Simple Data Grapher

Plot and Export Graphs with CSV data

Choose a csv file or drag & drop it here

OR
OR
OR
'; } }]); diff --git a/examples/upload_file.css b/examples/upload_file.css index f452516..71931ea 100644 --- a/examples/upload_file.css +++ b/examples/upload_file.css @@ -1,155 +1,179 @@ .main_container{ - margin:0 auto; - width: 50%; - margin-top: 300px; - height: 600px; - display: flex; - flex-direction: column; - justify-content: space-around; - align-items: center; - } + margin:0 auto; + width: 50%; + margin-top: 100px; + height: 600px; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +} - .btn-file { - position: relative; - overflow: hidden; - border-color: #0059b3; - border-style: dashed; - border-width: 2px; - height: 150px; - } - .btn-file input[type=file] { - position: absolute; - top: 0; - right: 0; - min-width: 100%; - min-height: 100%; - font-size: 100px; - text-align: center; - filter: alpha(opacity=0); - opacity: 0; - outline: none; - background: white; - cursor: inherit; - display: block; - } - .drag_drop_heading{ - margin-top: 50px; - } - .text_field{ - width: 350px; - border-radius: 5px; - height: 40px; - padding-left: 5px; +.btn-file { + position: relative; + overflow: hidden; + border-color: #0059b3; + border-style: dashed; + border-width: 2px; + height: 150px; +} +.btn-file input[type=file] { + position: absolute; + top: 0; + right: 0; + min-width: 100%; + min-height: 100%; + font-size: 100px; + text-align: center; + filter: alpha(opacity=0); + opacity: 0; + outline: none; + background: white; + cursor: inherit; + display: block; +} +.drag_drop_heading{ + margin-top: 50px; +} +.text_field{ + width: 350px; + border-radius: 5px; + height: 40px; + padding-left: 5px; - } - ::placeholder{ - font-size: 12px; - } - .or { - 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; - font-size: 12px; - color: #595959; - } - .input_box{ - width: 350px; - } - .carousel-indicators{ - top: 200px; - justify-content:space-around; - margin:0; - display: flex; - height: 20px; +} +::placeholder{ + font-size: 12px; +} +.or { + 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; + font-size: 12px; + color: #595959; +} +.input_box{ + width: 350px; +} +.carousel-indicators{ +top: 30px; +justify-content:space-around; +margin:0; +display: flex; +height: 20px; } .tables{ - margin-top: 300px; - text-align: center; +margin-top: 100px; +text-align: center; } .graph{ - margin-top: 300px; +margin-top: 100px; } #canvas_container{ - width: 50%; - margin: 0 auto; +width: 50%; +margin: 0 auto; } ol.carousel-indicators li.active { - background: #004080; +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; +width: 150px; +height: 6px; +cursor: pointer; +background: #cccccc; } .toggle-handle{ - background: #f2f2f2; - width: 100px; +background: #f2f2f2; +width: 100px; } .toggle-on{ - text-align: left; - margin-left: 15px; +text-align: left; +margin-left: 15px; } .toggle-off{ - text-align: right; - margin-right: 15px; +text-align: right; +margin-right: 15px; } .hidden { - display:none; + display:none; } .table_container{ - display: flex; - flex-direction: column; - justify-content: space-around; - align-items: center; +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; +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; +font-family: 'Ubuntu Condensed'; +overflow: auto; +width: 500px; } .feature_buttons{ - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: center; +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; +display: flex; +flex-direction: row; +justify-content: space-around; +align-items: center; +list-style: none; +/* margin-bottom: -160px; */ } .check-inputs{ - margin-left: 10px; - +margin-left: 10px; + } .badge{ - padding: 10px; +padding: 10px; } .csv_string{ - height: 100px; - width: 350px; +height: 100px; +width: 350px; +} +.main_heading{ +font-family: 'Ubuntu Condensed'; +text-align: center; +color: #001a66; +font-size: 40px; +} +.sub_heading{ +font-family: 'Ubuntu Condensed'; +text-align: center; +color: #525357; +font-size: 18px; +padding-top: 5px; +} +.main_heading_container{ +margin-top: 40px; +} +.headings li{ +font-family: 'Ubuntu Condensed'; +font-size: 20px; +} +.heading_container{ +margin-top:80px; +} +.item-1{ +margin-left: 20px; +} +.item-2{ +margin-left: 70px; } \ No newline at end of file diff --git a/src/CsvParser.js b/src/CsvParser.js index 2fe7c12..4215070 100644 --- a/src/CsvParser.js +++ b/src/CsvParser.js @@ -13,13 +13,24 @@ class CsvParser{ csvValidForYAxis = []; elementId = null; - constructor(file, elementId){ - this.csvFile = file; + constructor(file, elementId, functionParameter){ this.elementId = elementId; - this.parse(); + if (functionParameter=="local"){ + this.csvFile = file; + this.parse(functionParameter); + } + else if (functionParameter=="csvstring"){ + this.csvMatrix=file; + this.startFileProcessing(functionParameter); + } + else if (functionParameter=="googleSheet"){ + this.completeCsvMatrix=file[0]; + this.csvHeaders=file[1]; + this.startFileProcessing(functionParameter); + } } - parse(){ + parse(functionParameter){ var count = 0; Papa.parse(this.csvFile, { download: true, @@ -31,21 +42,29 @@ class CsvParser{ }, complete: () => { //calling a function to determine headers for columns - this.startFileProcessing(); + this.startFileProcessing(functionParameter); } }); } - startFileProcessing(){ - this.determineHeaders(); - this.matrixForCompleteData(); - this.extractSampleData(); + startFileProcessing(functionParameter){ + if (functionParameter=="local" || functionParameter=="csvstring"){ + this.determineHeaders(); + this.matrixForCompleteData(); + this.extractSampleData(); + } + else if (functionParameter=="googleSheet"){ + this.extractSampleData(); + } SimpleDataGrapher.elementIdSimpleDataGraphInstanceMap[this.elementId].view.continueViewManipulation(); } //preparing sample data for the user to choose the columns from extractSampleData(){ var maxval=5; + for (var i=0;i { console.log("i am uploading"); console.log(this); - this.csvParser = new CsvParser(this.csvFile, this.elementId); + this.csvParser = new CsvParser(this.csvFile, this.elementId, "local"); } } } + handleFileSelectstring(val){ + // this.csvFileString = val; + console.log("value",val); + console.log("i am at csv string handler"); + var csv_string = val.split("\n"); + var mat=[]; + for (var i=0;i response.text()) + .then(contents => console.log(contents)) + .catch(() => console.log("Can’t access " + url + " response. Blocked by browser?")) ; + console.log(this.csvFile,"remote file"); + + } determineType(type){ console.log("at type"); @@ -215,6 +298,7 @@ class View{ } graphMenu(){ + $('.' + this.carousalClass).carousel(1); console.log("at menu"); document.getElementById(this.graphMenuId).innerHTML=""; var bar=["Bar","Horizontal","Vertical"]; @@ -315,6 +399,9 @@ class View{ } console.log("i am in view"); this.fileUploadId = elementId + "_csv_file"; + this.remoteFileUploadId= elementId + "_remote_file"; + this.csvStringUploadId= elementId + "_csv_string"; + this.googleSheetUploadId= elementId + "_google_sheet"; this.dragDropHeadingId = elementId + "_drag_drop_heading"; this.uploadButtonId = elementId + "_file_upload_button"; this.addGraphButtonId = elementId + "_add_graph"; @@ -359,13 +446,33 @@ class View{ console.log("i am here23"); this.handleFileSelectlocal(e); }); + $("#"+this.csvStringUploadId).change(()=>{ + // var x=$("#"+this.csvStringUploadId); + console.log(document.getElementById(this.csvStringUploadId).value); + // console.log("i am at csv string",x); + this.handleFileSelectstring(document.getElementById(this.csvStringUploadId).value); + }); + $("#"+this.googleSheetUploadId).change(()=>{ + // var x=$("#"+this.googleSheetUploadId); + console.log(document.getElementById(this.csvStringUploadId).value); + // console.log("i am at csv string",x); + var sheetLink=document.getElementById(this.csvStringUploadId).value; + var sheetURL="https://spreadsheets.google.com/feeds/list/"+sheetLink.split("/")[5]+"/od6/public/values?alt=json"; + this.handleFileSelectstring(sheetURL); + }); + $("#"+this.remoteFileUploadId).change(()=>{ + // var remotefileLink=document.getElementById(this.remoteFileUploadId).value; + console.log(document.getElementById(this.remoteFileUploadId).value); + this.handleFileSelectremote(document.getElementById(this.remoteFileUploadId).value); + }); } drawHTMLView(){ - this.element.innerHTML = '

Choose a csv file or drag & drop it here

OR
OR
'; + this.element.innerHTML = '

Simple Data Grapher

Plot and Export Graphs with CSV data

  • Upload CSV Data
  • Select Columns & Graph Type
  • Plotted Graph & Export Options

Choose a csv file or drag & drop it here

OR
OR
OR
'; + } }