From a060a0a928cc5dee8b471d7765ee2cfc700d7e2d Mon Sep 17 00:00:00 2001 From: IshaGupta18 Date: Tue, 11 Jun 2019 10:36:33 +0530 Subject: [PATCH 1/4] Changes to src --- dist/PublicLab.Grapher.js | 100 +++++++++++++++++++++++++++++++++-- dist/transpiled_code/View.js | 100 +++++++++++++++++++++++++++++++++-- src/View.js | 84 ++++++++++++++++++++++++++++- 3 files changed, 276 insertions(+), 8 deletions(-) diff --git a/dist/PublicLab.Grapher.js b/dist/PublicLab.Grapher.js index d150a9c..a827335 100644 --- a/dist/PublicLab.Grapher.js +++ b/dist/PublicLab.Grapher.js @@ -203,7 +203,7 @@ Object.defineProperty(exports, "__esModule", { }); exports.View = void 0; -var _CsvParser = require("./CsvParser"); +var _CsvParser2 = require("./CsvParser"); var _SimpleDataGrapher = require("./SimpleDataGrapher"); @@ -235,10 +235,87 @@ 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("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: "determineType", value: function determineType(type) { @@ -545,6 +622,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 +680,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 +734,19 @@ function () { _this5.handleFileSelectlocal(e); }); + $("#" + this.csvStringUploadId).on('change', function () { + console.log("i am at csv string"); + this.handleFileSelectstring(this.value); + }); + $("#" + this.googleSheetUploadId).on('change', function () { + console.log("i am at csv string"); + this.handleFileSelectGoogleSheet(this.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/View.js b/dist/transpiled_code/View.js index 753802b..a5e96da 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,87 @@ 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("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: "determineType", value: function determineType(type) { @@ -347,6 +424,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 +482,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 +536,19 @@ function () { _this5.handleFileSelectlocal(e); }); + $("#" + this.csvStringUploadId).on('change', function () { + console.log("i am at csv string"); + this.handleFileSelectstring(this.value); + }); + $("#" + this.googleSheetUploadId).on('change', function () { + console.log("i am at csv string"); + this.handleFileSelectGoogleSheet(this.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/src/View.js b/src/View.js index 47bab1b..a496f76 100644 --- a/src/View.js +++ b/src/View.js @@ -6,6 +6,9 @@ class View{ elementId = null; element = null; fileUploadId = null; + remoteFileUploadId = null; + csvStringUploadId = null; + googleSheetUploadId = null; csvFile = null; dragDropHeadingId = null; uploadButtonId = null; @@ -41,10 +44,75 @@ class View{ document.getElementById(this.uploadButtonId).onclick = (e) => { 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("i am at csv string handler"); + var csv_string = val.split("\n"); + var mat=[]; + for (var i=0;i

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
'; + } } From 170114d102dc871066844ffaf0df421e1547a6b7 Mon Sep 17 00:00:00 2001 From: IshaGupta18 Date: Tue, 11 Jun 2019 14:43:47 +0530 Subject: [PATCH 2/4] More changes --- dist/PublicLab.Grapher.js | 54 +++++-- dist/transpiled_code/CsvParser.js | 36 +++-- dist/transpiled_code/View.js | 18 ++- examples/upload_file.css | 256 ++++++++++++++++-------------- src/CsvParser.js | 37 +++-- src/View.js | 18 ++- 6 files changed, 258 insertions(+), 161 deletions(-) diff --git a/dist/PublicLab.Grapher.js b/dist/PublicLab.Grapher.js index a827335..2209359 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; } @@ -243,6 +261,7 @@ function () { 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 = []; @@ -499,6 +518,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"]; @@ -734,13 +754,17 @@ function () { _this5.handleFileSelectlocal(e); }); - $("#" + this.csvStringUploadId).on('change', function () { - console.log("i am at csv string"); - this.handleFileSelectstring(this.value); + $("#" + 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).on('change', function () { - console.log("i am at csv string"); - this.handleFileSelectGoogleSheet(this.value); + $("#" + this.googleSheetUploadId).change(function () { + // var x=$("#"+this.googleSheetUploadId); + console.log(document.getElementById(_this5.csvStringUploadId).value); // console.log("i am at csv string",x); + + _this5.handleFileSelectstring(document.getElementById(_this5.googleSheetUploadId).value); }); } }, { 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 a5e96da..0cb686c 100644 --- a/dist/transpiled_code/View.js +++ b/dist/transpiled_code/View.js @@ -45,6 +45,7 @@ function () { 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 = []; @@ -301,6 +302,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"]; @@ -536,13 +538,17 @@ function () { _this5.handleFileSelectlocal(e); }); - $("#" + this.csvStringUploadId).on('change', function () { - console.log("i am at csv string"); - this.handleFileSelectstring(this.value); + $("#" + 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).on('change', function () { - console.log("i am at csv string"); - this.handleFileSelectGoogleSheet(this.value); + $("#" + this.googleSheetUploadId).change(function () { + // var x=$("#"+this.googleSheetUploadId); + console.log(document.getElementById(_this5.csvStringUploadId).value); // console.log("i am at csv string",x); + + _this5.handleFileSelectstring(document.getElementById(_this5.googleSheetUploadId).value); }); } }, { 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{ + // 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).on('change',function(){ - console.log("i am at csv string"); - this.handleFileSelectGoogleSheet(this.value); + $("#"+this.googleSheetUploadId).change(()=>{ + // var x=$("#"+this.googleSheetUploadId); + console.log(document.getElementById(this.csvStringUploadId).value); + // console.log("i am at csv string",x); + this.handleFileSelectstring(document.getElementById(this.googleSheetUploadId).value); }); } From bda190a736a02c2e434bebfe98d5e81cafdea330 Mon Sep 17 00:00:00 2001 From: IshaGupta18 Date: Tue, 11 Jun 2019 20:01:48 +0530 Subject: [PATCH 3/4] remote url access --- dist/PublicLab.Grapher.js | 25 ++++++++++++++++++++++++- dist/transpiled_code/View.js | 25 ++++++++++++++++++++++++- src/View.js | 19 ++++++++++++++++++- 3 files changed, 66 insertions(+), 3 deletions(-) diff --git a/dist/PublicLab.Grapher.js b/dist/PublicLab.Grapher.js index 2209359..19cce49 100644 --- a/dist/PublicLab.Grapher.js +++ b/dist/PublicLab.Grapher.js @@ -335,6 +335,20 @@ function () { this.csvParser = new _CsvParser.CsvParser(this.csvFile, this.elementId, "googleSheet"); }; } + }, { + 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) { @@ -764,7 +778,16 @@ function () { // var x=$("#"+this.googleSheetUploadId); console.log(document.getElementById(_this5.csvStringUploadId).value); // console.log("i am at csv string",x); - _this5.handleFileSelectstring(document.getElementById(_this5.googleSheetUploadId).value); + 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); }); } }, { diff --git a/dist/transpiled_code/View.js b/dist/transpiled_code/View.js index 0cb686c..b3a76fa 100644 --- a/dist/transpiled_code/View.js +++ b/dist/transpiled_code/View.js @@ -119,6 +119,20 @@ function () { this.csvParser = new _CsvParser.CsvParser(this.csvFile, this.elementId, "googleSheet"); }; } + }, { + 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) { @@ -548,7 +562,16 @@ function () { // var x=$("#"+this.googleSheetUploadId); console.log(document.getElementById(_this5.csvStringUploadId).value); // console.log("i am at csv string",x); - _this5.handleFileSelectstring(document.getElementById(_this5.googleSheetUploadId).value); + 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); }); } }, { diff --git a/src/View.js b/src/View.js index c1f5906..46d491c 100644 --- a/src/View.js +++ b/src/View.js @@ -114,6 +114,16 @@ class View{ this.csvParser = new _CsvParser.CsvParser(this.csvFile, this.elementId, "googleSheet"); }; } + handleFileSelectremote(val){ + const proxyurl = "https://cors-anywhere.herokuapp.com/"; + const url = val; + fetch(proxyurl + url) + .then(response => 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"); @@ -442,7 +452,14 @@ class View{ // var x=$("#"+this.googleSheetUploadId); console.log(document.getElementById(this.csvStringUploadId).value); // console.log("i am at csv string",x); - this.handleFileSelectstring(document.getElementById(this.googleSheetUploadId).value); + 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); }); } From 46ff3bd268bf1e21cba88286917dd08a8c8fe983 Mon Sep 17 00:00:00 2001 From: IshaGupta18 Date: Tue, 11 Jun 2019 20:10:38 +0530 Subject: [PATCH 4/4] trying to pass remote values --- dist/PublicLab.Grapher.js | 6 ++++++ dist/transpiled_code/View.js | 6 ++++++ src/View.js | 4 ++++ 3 files changed, 16 insertions(+) diff --git a/dist/PublicLab.Grapher.js b/dist/PublicLab.Grapher.js index 19cce49..cc1401f 100644 --- a/dist/PublicLab.Grapher.js +++ b/dist/PublicLab.Grapher.js @@ -335,6 +335,12 @@ function () { 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) { diff --git a/dist/transpiled_code/View.js b/dist/transpiled_code/View.js index b3a76fa..582874a 100644 --- a/dist/transpiled_code/View.js +++ b/dist/transpiled_code/View.js @@ -119,6 +119,12 @@ function () { 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) { diff --git a/src/View.js b/src/View.js index 46d491c..cc435bf 100644 --- a/src/View.js +++ b/src/View.js @@ -114,6 +114,10 @@ class View{ this.csvParser = new _CsvParser.CsvParser(this.csvFile, this.elementId, "googleSheet"); }; } + receive(vall){ + console.log(vall); + console.log("hurray!!"); + } handleFileSelectremote(val){ const proxyurl = "https://cors-anywhere.herokuapp.com/"; const url = val;