[WIP] UI Design Stage2 #42
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
|
|
@@ -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, functionParameter) { | ||||||||
| _classCallCheck(this, CsvParser); | ||||||||
|
|
||||||||
| _defineProperty(this, 'use strict', void 0); | ||||||||
|
|
@@ -43,14 +43,24 @@ function () { | |||||||
|
|
||||||||
| _defineProperty(this, "elementId", null); | ||||||||
|
|
||||||||
| this.elementId = elementId; | ||||||||
|
|
||||||||
| 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(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(functionParameter); | ||||||||
| } | ||||||||
| }); | ||||||||
| } | ||||||||
| }, { | ||||||||
| key: "startFileProcessing", | ||||||||
| 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 _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 _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 () { | ||||||||
|
There was a problem hiding this comment. I'm not completely familiar with this syntax but i think it might be:
Suggested change
There was a problem hiding this comment. @jywarren I think this should be automatically incorporated once @IshaGupta18 passes the error object below (as I suggested) since the dist is built from that? simple-data-grapher/src/View.js Line 127 in 46ff3bd |
||||||||
| 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 = '<div class="main_heading_container"><h2 class="main_heading"> Simple Data Grapher</h2><p class="sub_heading">Plot and Export Graphs with CSV data</p></div><div class="heading_container"><ul class="headings"><li class="item-1">Upload CSV Data</li><li class="item-2">Select Columns & Graph Type</li><li class="item-3">Plotted Graph & Export Options</li></ul></div><div id=' + this.carousalId + ' class="carousel ' + this.carousalClass + ' slide" data-ride="carousel"><div class="indicators"><ol class="carousel-indicators"> <li data-target="#' + this.carousalId + '" data-slide-to="0" class="active" id="up"></li> <li data-target="#' + this.carousalId + '" data-slide-to="1"></li> <li data-target="#' + this.carousalId + '" data-slide-to="2"></li></ol></div><div class="carousel-inner"><div class="carousel-item active"><div class="main_container"><div class="container_drag_drop"><span class="btn btn-outline-primary btn-file input_box"><p class="drag_drop_heading" id=' + this.dragDropHeadingId + '> <u> Choose a csv file </u> or drag & drop it here </p><input type="file" class="csv_file" id=' + this.elementId + "_csv_file" + ' accept=".csv"></span></div><h6 class="or"><span>OR</span></h6><div class="container_remote_link"><input type="text" class="remote_file text_field" placeholder="url of remote file" id=' + this.elementId + "_remote_file" + ' ></div><h6 class="or"><span>OR</span></h6><div class="container_csv_string"><textarea class="csv_string text_field" id=' + this.elementId + "_csv_string" + ' placeholder="Paste a CSV string here" ></textarea></div><h6 class="or"><span>OR</span></h6><div class="container_google_sheet"><input type="text" class="google_sheet text_field" id=' + this.elementId + "_google_sheet" + ' placeholder="Link of published Google Sheet" ></div><div class="upload_button"><button type="button" class="btn btn-primary" id=' + this.uploadButtonId + ' >Upload CSV</button></div></div></div><div class="carousel-item tables"><div class="button_container"><div><input type="checkbox" name=' + this.xyToggleName + ' checked data-toggle="toggle" class="xytoggle" data-width="150" data-onstyle="success" data-offstyle="warning" data-height="40"></div><div class="plot_button"><button type="button" class="btn btn-primary" id=' + this.plotGraphId + ' >Plot Graph</button></div></div><div class="table_container"><div id=' + this.tableXParentId + ' ><table id=' + this.tableXId + ' class="table"></table></div><div id=' + this.tableYParentId + ' class="hidden"><table id=' + this.tableYId + ' class="table"></table></div><div><table id=' + this.graphMenuId + ' class="table table-dark"></table></div></div></div><div class="carousel-item graph"><div class="feature_buttons"><button type="button" class="btn btn-primary" id=' + this.addGraphButtonId + '> Add Graph</button></div><div id=' + this.canvasContinerId + ' ></div></div></div></div>'; | ||||||||
| } | ||||||||
| }]); | ||||||||
|
|
||||||||
|
|
||||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Aha, is it on these lines that the error is occurring? Maybe with input from this comment you can output the complete error?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jywarren I maybe wrong, but wasn't this issue resolved?