Skip to content

Column resize fix refactor #246

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

Merged
texodus merged 5 commits into from
Sep 25, 2018
Merged

Column resize fix refactor #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
273dc35
Fixed column selector resize behavior
texodus Sep 24, 2018
bb72a0a
Fixed tests
texodus Sep 24, 2018
de412bb
Added HTML+LESS autofix tasks
texodus Sep 24, 2018
ad515ff
Fixed spurious test
texodus Sep 24, 2018
27cefc8
Parallelize autofix
texodus Sep 24, 2018
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
8 changes: 4 additions & 4 deletions .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@
"tabWidth": 4,
"bracketSpacing": false
}],
"no-const-assign": "warn",
"no-this-before-super": "warn",
"no-undef": "warn",
"no-const-assign": "error",
"no-this-before-super": "error",
"no-undef": "error",
"no-unreachable": "error",
"no-unused-vars": "error",
"constructor-super": "warn",
"constructor-super": "error",
"valid-typeof": "error"
}
}
7 changes: 6 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"eslint": "^4.19.1",
"eslint-config-prettier": "^3.0.1",
"eslint-plugin-prettier": "^2.6.2",
"js-beautify": "^1.8.6",
"lerna": "^2.11.0",
"pre-commit": "^1.2.2",
"prettier": "^1.14.2",
Expand All @@ -30,7 +31,11 @@
"postinstall": "lerna bootstrap --hoist",
"precommit": "npm run lint:autofix && git add . -u",
"lint": "eslint packages/*/src/**/*.js packages/*/test/**/*.js",
"lint:autofix": "npm run lint -- --fix && lerna run lint:autofix:clang",
"lint:autofix:es": "npm run lint -- --fix",
"lint:autofix:clang": "lerna run lint:autofix:clang",
"lint:autofix:less": "css-beautify packages/**/src/less/*.less -r",
"lint:autofix:html": "html-beautify packages/**/src/html/*.html -r",
"lint:autofix": "npm-run-all --silent lint:autofix:*",
"_build": "lerna run build ${PACKAGE:+--scope=@jpmorganchase/${PACKAGE}} --stream",
"_build_test": "lerna run test:build ${PACKAGE:+--scope=@jpmorganchase/${PACKAGE}} --stream",
"_emsdk": "docker run --rm -it ${PSP_CPU_COUNT:+--cpus=\"${PSP_CPU_COUNT}.0\"} -v $(pwd):/src -e PACKAGE=${PACKAGE} perspective/emsdk",
Expand Down
45 changes: 23 additions & 22 deletions packages/perspective-examples/src/html/citibike.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,34 +9,35 @@

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<head>

<script src="mobile_fix.js"></script>
<script src="perspective.view.js"></script>
<script src="hypergrid.plugin.js"></script>
<script src="highcharts.plugin.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<link rel='stylesheet' href="demo.css">
<script src="mobile_fix.js"></script>
<script src="perspective.view.js"></script>
<script src="hypergrid.plugin.js"></script>
<script src="highcharts.plugin.js"></script>

</head>
<body>
<link rel='stylesheet' href="demo.css">

<perspective-viewer view='xy_scatter' columns='["longitude","latitude","availableBikes"]'></perspective-viewer>
</head>

<script>
<body>

window.addEventListener('WebComponentsReady', function () {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'citibike.json', true);
xhr.onload = function () {
document.getElementsByTagName('perspective-viewer')[0].load(JSON.parse(xhr.response).stationBeanList);
}
xhr.send(null);
});
<perspective-viewer view='xy_scatter' columns='["longitude","latitude","availableBikes"]'></perspective-viewer>

</script>
<script>
window.addEventListener('WebComponentsReady', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'citibike.json', true);
xhr.onload = function() {
document.getElementsByTagName('perspective-viewer')[0].load(JSON.parse(xhr.response).stationBeanList);
}
xhr.send(null);
});
</script>

</body>
</html>
</body>

</html>
51 changes: 24 additions & 27 deletions packages/perspective-examples/src/html/coincap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,40 +9,37 @@

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<head>

<script src="mobile_fix.js"></script>
<script src="perspective.view.js"></script>
<script src="hypergrid.plugin.js"></script>
<script src="highcharts.plugin.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
<script src="mobile_fix.js"></script>
<script src="perspective.view.js"></script>
<script src="hypergrid.plugin.js"></script>
<script src="highcharts.plugin.js"></script>

<link rel='stylesheet' href="demo.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>

</head>
<body>
<link rel='stylesheet' href="demo.css">

<perspective-viewer
index="long"
sort='["mktcap"]'
row-pivots='["long"]'
columns='["mktcap","price","vwapData","supply","volume","perc","shapeshift"]'>

</perspective-viewer>
</head>

<script>
<body>

window.addEventListener('WebComponentsReady', function () {
var socket = io.connect('https://coincap.io');
socket.on('trades', function (tradeMsg) {
document.getElementsByTagName('perspective-viewer')[0].update([tradeMsg.msg]);
})
});
<perspective-viewer index="long" sort='["mktcap"]' row-pivots='["long"]' columns='["mktcap","price","vwapData","supply","volume","perc","shapeshift"]'>

</script>
</perspective-viewer>

</body>
</html>
<script>
window.addEventListener('WebComponentsReady', function() {
var socket = io.connect('https://coincap.io');
socket.on('trades', function(tradeMsg) {
document.getElementsByTagName('perspective-viewer')[0].update([tradeMsg.msg]);
})
});
</script>

</body>

</html>
168 changes: 86 additions & 82 deletions packages/perspective-examples/src/html/csv.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,22 @@

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<head>

<script src="mobile_fix.js"></script>
<script src="perspective.view.js"></script>
<script src="hypergrid.plugin.js"></script>
<script src="highcharts.plugin.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<link rel='stylesheet' href="demo.css">
<link rel='stylesheet' href="material.css">
<script src="mobile_fix.js"></script>
<script src="perspective.view.js"></script>
<script src="hypergrid.plugin.js"></script>
<script src="highcharts.plugin.js"></script>

<style>
<link rel='stylesheet' href="demo.css">
<link rel='stylesheet' href="material.css">

#drop-area {
<style>

#drop-area {
border: 1px solid #ccc;
width: 480px;
font-family: sans-serif;
Expand Down Expand Up @@ -64,88 +65,91 @@
}
</style>

</head>
<body>

<div id="drop-area">
<form class="my-form">
<p>Upload a CSV file by dragging from your desktop and dropping onto the dashed region.</p>
<p>(Data is processed in browser, and never sent to any server).</p>
<input type="file" id="fileElem" multiple accept="text/csv" >
<label class="button" for="fileElem">Select a file</label>
</form>
</div>

<script>

window.addEventListener('WebComponentsReady', function () {
var dropArea = document.getElementById('drop-area')
var input = document.getElementById('fileElem');

dropArea.addEventListener('dragenter', () => {}, false);
dropArea.addEventListener('dragleave', () => {}, false);
dropArea.addEventListener('dragover', () => {}, false);
dropArea.addEventListener('drop', x => {
console.log(x);
}, false);

;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
})

function preventDefaults (e) {
e.preventDefault();
e.stopPropagation();
}
</head>

<body>

<div id="drop-area">
<form class="my-form">
<p>Upload a CSV file by dragging from your desktop and dropping onto the dashed region.</p>
<p>(Data is processed in browser, and never sent to any server).</p>
<input type="file" id="fileElem" multiple accept="text/csv">
<label class="button" for="fileElem">Select a file</label>
</form>
</div>

<script>
window.addEventListener('WebComponentsReady', function() {
var dropArea = document.getElementById('drop-area')
var input = document.getElementById('fileElem');

dropArea.addEventListener('dragenter', () => {}, false);
dropArea.addEventListener('dragleave', () => {}, false);
dropArea.addEventListener('dragover', () => {}, false);
dropArea.addEventListener('drop', x => {
console.log(x);
}, false);

;
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
})

function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}

;['dragenter', 'dragover'].forEach(function (eventName) {
dropArea.addEventListener(eventName, highlight, false);
})
;
['dragenter', 'dragover'].forEach(function(eventName) {
dropArea.addEventListener(eventName, highlight, false);
})

;['dragleave', 'drop'].forEach(function (eventName) {
dropArea.addEventListener(eventName, unhighlight, false);
})
;
['dragleave', 'drop'].forEach(function(eventName) {
dropArea.addEventListener(eventName, unhighlight, false);
})

function highlight(e) {
dropArea.classList.add('highlight')
}
function highlight(e) {
dropArea.classList.add('highlight')
}

function unhighlight(e) {
dropArea.classList.remove('highlight')
}
function unhighlight(e) {
dropArea.classList.remove('highlight')
}

dropArea.addEventListener('drop', handleDrop, false)
dropArea.addEventListener('drop', handleDrop, false)

input.addEventListener('change', function () {
handleFiles(this.files);
});
input.addEventListener('change', function() {
handleFiles(this.files);
});

function handleDrop(e) {
let dt = e.dataTransfer
let files = dt.files
function handleDrop(e) {
let dt = e.dataTransfer
let files = dt.files

handleFiles(files)
}
handleFiles(files)
}

function handleFiles(files) {
([...files]).forEach(uploadFile)
}
function handleFiles(files) {
([...files]).forEach(uploadFile)
}

function uploadFile(file) {
let reader = new FileReader();
reader.onload = function (fileLoadedEvent) {
let txt = fileLoadedEvent.target.result;
const parent = dropArea.parentElement;
parent.removeChild(dropArea);
let psp = document.createElement('perspective-viewer');
parent.appendChild(psp);
psp.load(txt);
}
reader.readAsText(file);
function uploadFile(file) {
let reader = new FileReader();
reader.onload = function(fileLoadedEvent) {
let txt = fileLoadedEvent.target.result;
const parent = dropArea.parentElement;
parent.removeChild(dropArea);
let psp = document.createElement('perspective-viewer');
parent.appendChild(psp);
psp.load(txt);
}
});
reader.readAsText(file);
}
});
</script>

</script>
</body>

</body>
</html>
</html>
Loading