Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding CSV string import function #28

Merged
merged 3 commits into from
May 25, 2019
Merged

Adding CSV string import function #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
649120c
Adding CSV string import function
IshaGupta18 May 21, 2019
94c0a76
small fix
IshaGupta18 May 21, 2019
55bc1e3
keeping up to date
IshaGupta18 May 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 119 additions & 22 deletions examples/upload_file.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
}
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;
}
104 changes: 75 additions & 29 deletions examples/upload_file.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,42 +8,88 @@
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="upload_file.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.3/papaparse.min.js"></script>
<script src="../src/parsing.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.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="../src/RangeSlider-all.min.js"></script> -->
<!-- <script src="https://gitcdn.link/cdn/schme16/Chart.js-RangeSlider/677a7eb6c295772606d300697eaf552245e7f171/dist/RangeSlider-all.min.js"></script> -->
<link rel="stylesheet" href="https://gitcdn.link/cdn/schme16/Chart.js-RangeSlider/677a7eb6c295772606d300697eaf552245e7f171/dist/RangeSlider-all.min.css">
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css
"></script> -->

</head>
<body>
<div class="main_container">
<div class="container_drag_drop">
<span class="btn btn-outline-primary btn-file">
<p class="drag_drop_heading"> <u> Choose a csv file </u> or drag & drop it here </p>
<input type="file" class="csv_file" accept=".csv">
</span>

</div>
<h6 class="or"><span>OR</span></h2>
<div class="container_remote_link">
<input type="text" class="remote_file" placeholder="url of remote file" >
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="indicators">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active" id="up"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
</div>
<div class="upload_button">
<button type="button" class="btn btn-primary" id="upload" >Upload CSV</button>
</div>

</div>
<div>
<table id="tablex" border="1"></table>
</div>
<div>
<table id="tabley" border="1"></table>
</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"> <u> Choose a csv file </u> or drag & drop it here </p>
<input type="file" class="csv_file" accept=".csv">
</span>

<div style="width:75%;" id="canvas_container">
<canvas id="canvas"></canvas>
</div>
<div>
<table id="graph_menu" border="1"></table>
</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" >
</div>
<h6 class="or"><span>OR</span></h6>
<div class="container_csv_string">
<textarea class="csv_string text_field" placeholder="Paste a CSV string here" ></textarea>
</div>

<div class="upload_button">
<button type="button" class="btn btn-primary" id="upload" >Upload CSV</button>
</div>


</div>
</div>
<div class="carousel-item tables">
<div class="button_container">
<div>
<input type="checkbox" name="xy" 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="plot_graph" >Plot Graph</button>
</div>
</div>
<div class="table_container">
<div id="xtable">
<table id="tablex" class="table"></table>
</div>
<div id="ytable" class="hidden">
<table id="tabley" class="table"></table>
</div>
<div>
<table id="graph_menu" 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="update_graph">Update Graph</button>
<button type="button" class="btn btn-primary" id="save_as_image"> Save as image</button>
<button type="button" class="btn btn-primary" id="add_graph"> Add Graph</button>
</div>
<div id="canvas_container">
</div>
</div>
</div>
</div>

</body>
</html>

<script src="../src/parsing.js"></script>
Loading