Integrating Simple-Data-Grapher with Plots2

app/assets/javascripts/csvfiles.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/stylesheets/csvfiles.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the csvfiles controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/

app/controllers/csvfiles_controller.rb

@@ -0,0 +1,39 @@
+class CsvfilesController < ApplicationController
+  before_action :require_user, only: %i(delete user_files)
+
+  def new
+    # to render the index page of simple-data-grapher
+  end
+
+  def setter
+    @csvfile = Csvfile.new(
+      uid: params[:uid],
+      filetitle: params[:filetitle],
+      filedescription: params[:filedescription],
+      filepath: params[:object],
+      filename: "file" + Time.now.to_i.to_s,
+      filestring: params[:filestring]
+    )
+    render json: @csvfile if @csvfile.save
+  end
+
+  def prev_files
+    @allfile = Csvfile.where(uid: params[:uid])
+    render json: @allfile
+  end
+
+  def user_files
+    @user_files = Csvfile.where(uid: params[:id])
+  end
+
+  def delete
+    return unless params[:id] && params[:uid].to_i == current_user.uid
+    file = Csvfile.where(id: params[:id].to_i)
+    if file.destroy(params[:id].to_i)
+      flash[:notice] = "Deleted the file"
+    else
+      flash[:error] = "Could not delete the file"
+    end
+    redirect_to "simple-data-grapher/data/#{params[:uid]}"
+  end
+end

app/helpers/csvfiles_helper.rb

@@ -0,0 +1,2 @@
+module CsvfilesHelper
+end

app/models/csvfile.rb

@@ -0,0 +1,3 @@
+class Csvfile < ApplicationRecord
+  belongs_to :user, foreign_key: :uid
+end

app/models/user.rb

@@ -44,6 +44,7 @@ module Frequency
 
   has_many :images, foreign_key: :uid
   has_many :node, foreign_key: 'uid'
+  has_many :csvfiles, foreign_key: :uid
   has_many :node_selections, foreign_key: :user_id
   has_many :revision, foreign_key: 'uid'
   has_many :user_tags, foreign_key: 'uid', dependent: :destroy

app/views/csvfiles/new.html.erb

@@ -0,0 +1,122 @@
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.3/papaparse.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.33.1/plotly-basic.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
+<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
+<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
+<%= javascript_include_tag('/lib/simple-data-grapher/dist/PublicLab.Grapher.js')%>
+<%= stylesheet_link_tag '/lib/simple-data-grapher/examples/upload_file.css'%>
+<div id="first"></div>
+<script>
+    var headerContainer = document.getElementsByClassName("body-container")[0];
+    SimpleDataGrapherObject = new SimpleDataGrapher("first");
+    var value = '<%= current_user %>';
+    <% if current_user %>
+        SimpleDataGrapherObject.view.createButtons("yes");
+        var saveButton = SimpleDataGrapherObject.view.elementId+"_save_CSV";
+        var prevFile = SimpleDataGrapherObject.view.elementId+"_prev_file";
+        var saveFlag = false;
+        $("#" + saveButton).click(function(){
+            let divAlert = document.createElement('div');
+            divAlert.classList.add("alert");
+            divAlert.classList.add("alert-success");
+            divAlert.innerHTML = "File save successfully!";
+            headerContainer.appendChild(divAlert);
+            saveFlag = true;
+        });
+        $("#" + SimpleDataGrapherObject.view.plotGraphId).click(function(){
+            if (saveFlag){
+                var arr = {};
+                arr["completeCsvMatrix"] = SimpleDataGrapherObject.view.csvParser.completeCsvMatrix;
+                arr["csvHeaders"] = SimpleDataGrapherObject.view.csvParser.csvHeaders;
+                arr["csvSampleData"] = SimpleDataGrapherObject.view.csvParser.csvSampleData;
+                arr["csvValidForYAxis"] = SimpleDataGrapherObject.view.csvParser.csvValidForYAxis;
+                arr["completeCsvMatrixTranspose"] = SimpleDataGrapherObject.view.csvParser.completeCsvMatrixTranspose;
+                let csvStringMatrix=SimpleDataGrapherObject.view.csvParser.completeCsvMatrixTranspose;
+                let csvStringForDownload = encodeURI("data:text/csv;charset=utf-8," + csvStringMatrix.map(e => e.join(",")).join("\n"));
+                $.ajax({
+                    url: '/simple-data-grapher/object',
+                    type: 'post',
+                    data:   {object: JSON.stringify(arr), 
+                            uid: <%= current_user.id %>, 
+                            filetitle: SimpleDataGrapherObject.view.fileTitle, 
+                            filedescription: SimpleDataGrapherObject.view.fileDescription, 
+                            filestring: csvStringForDownload},
+                    success: function(data){
+                    },
+                    error: function(XMLHttpRequest, textStatus, errorThrown){
+                        console.log(errorThrown);
+                        let divAlert = document.createElement('div');
+                        divAlert.classList.add("alert");
+                        divAlert.classList.add("alert-danger");
+                        divAlert.innerHTML = "There was some error in saving the file.";
+                        headerContainer.appendChild(divAlert);
+                    }
+                });
+            }
+        });
+
+        $("#"+prevFile).click(function(){
+            $.ajax({
+                url: '/simple-data-grapher/prev_file',
+                type: 'get',
+                data: {uid: <%= current_user.id %>},
+                success: function(data){
+                    displayPreviousFiles(data);
+                },
+                error: function(XMLHttpRequest, textStatus, errorThrown){
+                        console.log(errorThrown);
+                        let divAlert = document.createElement('div');
+                        divAlert.classList.add("alert");
+                        divAlert.classList.add("alert-danger");
+                        divAlert.innerHTML = "There was some error in retrieving the file.";
+                        headerContainer.appendChild(divAlert);
+                }
+            });
+        });
+
+        function displayPreviousFiles(data){
+            var table=document.createElement("table");
+            for (let i = 0;i<data.length;i++){
+                let tr = document.createElement('tr');
+                let td = document.createElement('td');
+                let radio = document.createElement('input');
+                radio.type = 'radio';
+                radio.value = i;
+                radio.name = data[0]["csvfile"]["uid"]+"user_id";
+                td.appendChild(radio);
+                td.appendChild(document.createTextNode(data[i]["csvfile"]["filetitle"]));
+                tr.appendChild(td);
+                table.appendChild(tr);
+            }
+            let div = document.getElementById(SimpleDataGrapherObject.view.upload_button_container);
+            div.appendChild(table);
+            selectFile(data);
+        }
+        function selectFile(data){
+            $("#"+SimpleDataGrapherObject.view.uploadButtonId).click(function(){
+                let name = data[0]["csvfile"]["uid"]+"user_id";
+                let index = $('input[name='+ name +']:checked').val();
+                let allfiles = JSON.parse(data[index]["csvfile"]["filepath"]);
+                SimpleDataGrapherObject.view.usingPreviouslyUploadedFile();
+                SimpleDataGrapherObject.view.csvParser.completeCsvMatrix = allfiles["completeCsvMatrix"];
+                SimpleDataGrapherObject.view.csvParser.csvHeaders = allfiles["csvHeaders"];
+                SimpleDataGrapherObject.view.csvParser.csvSampleData = allfiles["csvSampleData"];
+                SimpleDataGrapherObject.view.csvParser.csvValidForYAxis = allfiles["csvValidForYAxis"];
+                SimpleDataGrapherObject.view.csvParser.completeCsvMatrixTranspose = allfiles["completeCsvMatrixTranspose"];
+                SimpleDataGrapherObject.view.continueViewManipulation("prevfile");
+            }); 
+        }
+
+    <% end %>
+    setTimeout("$('.alert-success .alert-danger').fadeOut('slow')", 7000)
+</script>
+

app/views/csvfiles/user_files.html.erb

@@ -0,0 +1,70 @@
+<div class="main_conatiner">
+    <div class="heading_container_data">
+        <h2 class="main_heading_data"> Your Data</h2>
+        <p class="sub_heading_data">View, download and delete CSV files and Research Noted on charts</p>
+    </div>
+</div>
+<table class="table">
+  <thead>
+    <tr>
+      <th scope="col">S.No</th>
+      <th scope="col">File Title</th>
+      <th scope="col">Download</th>
+      <th scope="col">Delete</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+    <% count=1 %>
+    <% @user_files.each do |file,index| %>
+        <tr>
+            <th scope="row"><%= count %></th>
+            <td> 
+                <% if file.filetitle!="" %>
+                    <%= file.filetitle %>
+                <% else %>
+                    <%= file.filename %>
+                <% end %>
+            </td>
+            <% download_link = file.filetitle + ".csv"%>
+            <% if file.filetitle=="" %>
+                <% download_link = file.filename + ".csv" %>
+            <% end %>
+            <td><a href="<%= file.filestring %>" download="<%= download_link %>"><i class="fa fa-download" aria-hidden="true"></i></a></td>
+            <td><a href="/simple-data-grapher/file/<%= file.uid %>/<%= file.id %>"><i class="fa fa-trash" aria-hidden="true"></i></a></td>
+            <td>
+                <% if file.filedescription!="" %>
+                    <%= file.filedescription %>
+                <% else %>
+                    <p> No Description </p>
+                <% end %>
+            </td>
+            <% count += 1 %>
+        </tr>
+    <% end %>
+</table>
+
+<style>
+.main_heading_data{
+    font-family: 'Ubuntu Condensed';
+    text-align: center;
+    color: #001a66;
+    font-size: 40px;
+    align-items: center;
+  justify-content: center;
+
+}
+.sub_heading_data{
+    font-family: 'Ubuntu Condensed';
+    text-align: center;
+    color: #525357;
+    font-size: 18px;
+    padding-top: 5px;
+    align-items: center;
+  justify-content: center;
+}
+.main_conatiner{
+    display: flex;
+    flex-direction: column;
+    margin-left: 300px;
+}
+</style>

config/routes.rb

@@ -123,6 +123,13 @@
   get 'wiki/edit/:lang/:id' => 'wiki#edit'
   get 'wiki' => 'wiki#index'
 
+  #routes for simple-data-grapher
+  get 'simple-data-grapher' => 'csvfiles#new'
+  post 'simple-data-grapher/object' => 'csvfiles#setter'
+  get 'simple-data-grapher/prev_file' => 'csvfiles#prev_files'
+  get 'simple-data-grapher/data/:id' => 'csvfiles#user_files'
+  get 'simple-data-grapher/file/:uid/:id' => 'csvfiles#delete'
+
   get 'place/:id/feed' => 'place#feed'
   get 'n/:id' => 'notes#shortlink'
   get 'i/:id' => 'images#shortlink'

db/migrate/20190708141605_create_csvfiles.rb

@@ -0,0 +1,14 @@
+class CreateCsvfiles < ActiveRecord::Migration[5.2]
+  def change
+    create_table :csvfiles do |t|
+      t.integer :uid
+      t.string :filetitle
+      t.text :filedescription
+      t.string :filepath
+      t.string :filename
+      t.string :filestring
+
+      t.timestamps
+    end
+  end
+end

db/migrate/20190708141804_add_csvfile_to_rusers.rb

@@ -0,0 +1,5 @@
+class AddCsvfileToRusers < ActiveRecord::Migration[5.2]
+  def change
+    add_column :rusers, :csvfile, :string
+  end
+end

db/schema.rb.example

@@ -11,7 +11,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2019_06_13_193708) do
+ActiveRecord::Schema.define(version: 2019_07_08_141804) do
 
   create_table "answer_selections", force: true do |t|
     t.integer "user_id"
@@ -140,6 +140,18 @@ ActiveRecord::Schema.define(version: 2019_06_13_193708) do
 
   add_index "content_type_map", ["nid"], name: "index_content_type_map_nid", using: :btree
 
+  create_table "csvfiles", force: :cascade do |t|
+    t.integer "uid"
+    t.string "filename"
+    t.string "filepath"
+    t.string "filetitle"
+    t.text "filedescription"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.string "filestring"
+    t.string "string"
+  end
+
   create_table "files", primary_key: "fid", force: true do |t|
     t.integer "uid",       default: 0,  null: false
     t.string  "filename",  default: "", null: false
@@ -327,6 +339,7 @@ ActiveRecord::Schema.define(version: 2019_06_13_193708) do
     t.datetime "created_at",                                              null: false
     t.datetime "updated_at",                                              null: false
     t.string   "openid_identifier"
+    t.string   "csvfile"
     t.string   "role",                                  default: "basic"
     t.string   "reset_key"
     t.string   "photo_file_name"

package.json

@@ -52,6 +52,7 @@
     "popper.js": "^1.15.0",
     "publiclab-editor": "~2.0.0",
     "short-code-forms": "jywarren/short-code-forms#~0.0.1",
+    "simple-data-grapher": "^1.2.2",
     "typeahead.js": "^0.11.1",
     "typeahead.js-browserify": "Javier-Rotelli/typeahead.js-browserify#~1.0.7",
     "woofmark": "~4.2.0"

test/fixtures/csvfiles.yml

@@ -0,0 +1,17 @@
+# Read about fixtures at http://api.rubyonrails.org/classes/ActiveRecord/FixtureSet.html
+
+one:
+  uid: 1
+  filetitle: MyString
+  filedescription: MyText
+  filepath: MyString
+  filename: MyString
+  filestring: MyString
+
+two:
+  uid: 1
+  filetitle: MyString
+  filedescription: MyText
+  filepath: MyString
+  filename: MyString
+  filestring: MyString