Skip to content

Commit

Permalink
Merge pull request #9 from jpmorganchase/column-chooser
Browse files Browse the repository at this point in the history 
A new column chooser UX which also allows column reordering.
  • Loading branch information
@texodus
texodus authored Jan 22, 2018
2 parents f4ddc32 + 2d07b2d commit 9961911
Show file tree
Hide file tree
Showing 14 changed files with 421 additions and 187 deletions.
23 changes: 21 additions & 2 deletions packages/perspective-viewer-highcharts/src/js/highcharts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -372,6 +372,9 @@ export function draw(mode) {
});
}
Object.assign(config, {
colors: [
colors[0]
],
xAxis: {
type: xaxis_type === "date" ? "datetime" : undefined,
startOnTick: false,
Expand Down Expand Up @@ -518,6 +521,10 @@ global.registerPlugin("vertical", {
name: "Bar Chart",
create: draw("vertical_bar"),
resize: resize,
initial: {
"type": "number",
"count": 1
},
selectMode: "select",
delete: delete_chart
});
Expand All @@ -526,6 +533,10 @@ global.registerPlugin("horizontal", {
name: "Bar Chart (inverted)",
create: draw("horizontal_bar"),
resize: resize,
initial: {
"type": "number",
"count": 1
},
selectMode: "select",
delete: delete_chart
});
Expand All @@ -534,15 +545,23 @@ global.registerPlugin("line", {
name: "Line Chart",
create: draw("line"),
resize: resize,
selectMode: "select",
initial: {
"type": "number",
"count": 2
},
selectMode: "toggle",
delete: delete_chart
});

global.registerPlugin("scatter", {
name: "Scatter Chart",
create: draw('scatter'),
resize: resize,
selectMode: "select",
initial: {
"type": "number",
"count": 2
},
selectMode: "toggle",
delete: delete_chart
});

42 changes: 21 additions & 21 deletions packages/perspective-viewer-highcharts/test/results/results.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,27 @@
"superstore.html/sorts by an alpha column.": "2643e0b5787b6e8e85f122b1713d01cd",
"superstore.html/displays visible columns.": "1da296527f149393be8f3f99e34b3e4a",
"scatter.html/shows a grid without any settings applied.": "352854b8fa9466ddf9f884462f1fcfbf",
"scatter.html/pivots by a row.": "d747a811424247f2e82fbd1f3e4b102d",
"scatter.html/pivots by two rows.": "327f10b204fc30b4f09a3c78b0fb0789",
"scatter.html/pivots by a row and a column.": "aefd420b9568e75b2e4aa28fa48e78b2",
"scatter.html/pivots by two rows and two columns.": "5f32d38e1d95c92f29578d18ebd6f917",
"scatter.html/sorts by a numeric column.": "a5cea557d54498d931272f9aba20cb38",
"scatter.html/sorts by an alpha column.": "bcf36f6eaaa17eada7c284e6257cf6a7",
"scatter.html/displays visible columns.": "7f4568381b35950da01a23b7a13fa216",
"scatter.html/pivots by a row.": "c83bb7518a026a223241652958b3dfb0",
"scatter.html/pivots by two rows.": "4f180e399b2e7c0e99df1bffd3326afb",
"scatter.html/pivots by a row and a column.": "06d1400c500d94dcb84d36bf7181bb6e",
"scatter.html/pivots by two rows and two columns.": "8076a1aa797aa57c3e09977bb12a49e3",
"scatter.html/sorts by a numeric column.": "384eea0345e7a35e444f26aa3eb3d208",
"scatter.html/sorts by an alpha column.": "fac0df141d22b3868d87e1ce30c9a045",
"scatter.html/displays visible columns.": "7a919ee86624d9b91c6c494214a9f3f1",
"bar.html/shows a grid without any settings applied.": "fa9f33409c8409155b403c30e97b9397",
"bar.html/pivots by a row.": "667024057e32ac7dcff85f714e991345",
"bar.html/pivots by two rows.": "38985a461a70412e91ba04ed08630f56",
"bar.html/pivots by a row and a column.": "d3c12fafa6aa6e48a65fb772633db007",
"bar.html/pivots by two rows and two columns.": "f8541acf149555a07db51b75fe25b3de",
"bar.html/sorts by a numeric column.": "89ca3dd689ac395e44e77520845055f4",
"bar.html/sorts by an alpha column.": "9116319b7b31aed9beba0632e474ddf0",
"bar.html/pivots by a row.": "8848040374bbf4817169054d69b88012",
"bar.html/pivots by two rows.": "d3f8bf092cb96bd753b7a94597f0af8a",
"bar.html/pivots by a row and a column.": "ad663c1e96648ca4fa2efdd1c458e6d1",
"bar.html/pivots by two rows and two columns.": "b1109c198404146f5b24bc85b3169002",
"bar.html/sorts by a numeric column.": "fe61f4c5f7e36e5b44e180b8d59da0ce",
"bar.html/sorts by an alpha column.": "fcbe1b22ab0875ba61969823f096b96a",
"line.html/shows a grid without any settings applied.": "5c7d75d2872635968019ef08bc505ff3",
"line.html/pivots by a row.": "a5c448c1f00f22657dae1ce3e059b075",
"line.html/pivots by two rows.": "1944115018252f8dceb03f84fab2ebf4",
"line.html/pivots by a row and a column.": "79c490c3f843b24af104b6681685b82f",
"line.html/pivots by two rows and two columns.": "2199f0cb57cdab991f9a62c5c277e3b3",
"line.html/sorts by a numeric column.": "604f906365754839e95d0c7f01f15241",
"line.html/sorts by an alpha column.": "a9cf05d78de91c435055049ed538d1ad",
"line.html/displays visible columns.": "010890a5ebf5e4bd32557191a6b11c27",
"bar.html/displays visible columns.": "a5662668dffce69048d1823052a83ab6"
"line.html/pivots by a row.": "08a29f9475d0f20cb3d4c222e39bce2d",
"line.html/pivots by two rows.": "30d68c75a3fb96af91958cc5a28f66c2",
"line.html/pivots by a row and a column.": "fa8d53bf92b5eeb9daafcb04d8da07b0",
"line.html/pivots by two rows and two columns.": "87ddd8a09a18f1c15c4a9c7569cbb0cb",
"line.html/sorts by a numeric column.": "5c87dd9ff1f99bc0f050e247bc31b297",
"line.html/sorts by an alpha column.": "81eaf4a5de51953b7ec28250d5b050d9",
"line.html/displays visible columns.": "80d6712db433c15efe24d43d32987b9c",
"bar.html/displays visible columns.": "0a602ffdcb9bb75fcfd0fddf96ce4adc"
}
2 changes: 1 addition & 1 deletion packages/perspective-viewer-hypergrid/src/js/fixes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export function GridUIFixPlugin(grid) {
this.bounds = new rectangular.Rectangle(0, 0, this.width, this.height);
this.component.setBounds(this.bounds);
this.resizeNotification();
this.paintNow();
await this.paintNow();
}

grid._getGridCellFromMousePoint = grid.getGridCellFromMousePoint;
Expand Down
8 changes: 4 additions & 4 deletions packages/perspective-viewer-hypergrid/src/js/hypergrid-tree-cell-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,16 +159,16 @@ export function treeLineRendererPaint(gc, config) {
gc.closePath();

// render message text
var cellTextOffset = xOffset + lineNodeSpace + (2 * nodeRadius) + 3;
config.minWidth = cellTextOffset + gc.getTextWidth(value);
var metrics = gc.getTextWidthTruncated(value, width - cellTextOffset + (x - 3), true);
var yOffset = y + height / 2;

gc.globalAlpha = 1.0;
gc.fillStyle = config.isSelected ? config.foregroundSelectionColor : config.color;
gc.textAlign = 'start';
gc.textBaseline = 'middle';
gc.font = config.isSelected ? config.foregroundSelectionFont : config.treeHeaderFont;
var cellTextOffset = xOffset + lineNodeSpace + (2 * nodeRadius) + 3;
config.minWidth = cellTextOffset + gc.getTextWidth(value) + 15;
var metrics = gc.getTextWidthTruncated(value, width - cellTextOffset + (x - 3), true);
var yOffset = y + height / 2;
gc.fillText(metrics.string ? metrics.string : value, cellTextOffset, yOffset);
gc.restore();
}
Expand Down
45 changes: 26 additions & 19 deletions packages/perspective-viewer-hypergrid/src/js/hypergrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -520,7 +520,7 @@ function CachedRendererPlugin(grid) {
if (this.component.grid._lazy_load) {
let range = estimate_range(this.component.grid);
if (
this.component.grid._cache_update
!(Number.isNaN(range[0]) || Number.isNaN(range[1]))
&& (
(this.component.grid._updating_cache && !is_subrange(range, this.component.grid._updating_cache.range))
|| (!this.component.grid._updating_cache && !is_subrange(range, this.component.grid._cached_range))
Expand Down Expand Up @@ -646,8 +646,12 @@ async function fill_page(view, json, hidden, start_row, end_row) {

const LAZY_THRESHOLD = 10000;

const PRIVATE = Symbol("Hypergrid private");

async function grid(div, view, hidden, redraw, task) {

this[PRIVATE] = this[PRIVATE] || {};

let [nrows, json, schema] = await Promise.all([
view.num_rows(),
view.to_json({end_row: 1}),
Expand All @@ -656,8 +660,12 @@ async function grid(div, view, hidden, redraw, task) {

let visible_rows;

if (!this.grid) {
this.grid = document.createElement('perspective-hypergrid');
if (!this.hypergrid) {
let grid = document.createElement('perspective-hypergrid');
this[PRIVATE].grid = grid;
Object.defineProperty(this, 'hypergrid', {
get: () => this[PRIVATE].grid.grid
});
}

json.length = nrows;
Expand All @@ -667,12 +675,12 @@ async function grid(div, view, hidden, redraw, task) {
if (!lazy_load) {
json = view.to_json().then(json => filter_hidden(hidden, json));
} else {
json = Promise.resolve(json);
json = fill_page(view, json, hidden, 0, 1000);
}

if (!(document.contains ? document.contains(this.grid) : false)) {
if (!(document.contains ? document.contains(this[PRIVATE].grid) : false)) {
div.innerHTML = "";
div.appendChild(this.grid);
div.appendChild(this[PRIVATE].grid);
await new Promise(resolve => setTimeout(resolve));
}

Expand All @@ -681,36 +689,35 @@ async function grid(div, view, hidden, redraw, task) {
return;
}

this.grid.grid._lazy_load = lazy_load;
this.grid.grid._cached_range = undefined;
this.hypergrid._lazy_load = lazy_load;
this.hypergrid._cached_range = undefined;

this.grid.grid._cache_update = async (s, e) => {
this.hypergrid._cache_update = async (s, e) => {
json = await fill_page(view, json, hidden, s, e);
let new_range = estimate_range(this.grid.grid);
let new_range = estimate_range(this.hypergrid);
if (is_subrange(new_range, [s, e])) {
let rows = psp2hypergrid(json, schema, s, Math.min(e, nrows), nrows).rows;
rows[0] = this.grid.grid.behavior.dataModel.viewData[0];
this.grid.grid.setData({data: rows});
rows[0] = this.hypergrid.behavior.dataModel.viewData[0];
this.hypergrid.setData({data: rows});
return true;
} else {
return false;
}
}

this.grid.set_data(json, schema);
await this.grid.grid.canvas.resize();
await this.grid.grid._updating_cache;
await this.grid.grid.canvas.resize();
await this.grid.grid._updating_cache;
this[PRIVATE].grid.set_data(json, schema);
await this.hypergrid.canvas.resize();
await this.hypergrid.canvas.resize();
}

global.registerPlugin("hypergrid", {
name: "Grid",
create: grid,
selectMode: "toggle",
deselectMode: "pivots",
resize: function () {
if (this.grid) {
this.grid.grid.canvas.resize();
if (this.hypergrid) {
this.hypergrid.canvas.resize();
}
},
delete: function () {
Expand Down
4 changes: 2 additions & 2 deletions packages/perspective-viewer-hypergrid/test/js/superstore.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ const simple_tests = require('@jpmorganchase/perspective-viewer/test/js/simple_t
async function set_lazy(page) {
const viewer = await page.$('perspective-viewer');
await page.evaluate(element => {
element.grid.grid.properties.repaintIntervalRate = 1;
Object.defineProperty(element.grid.grid, '_lazy_load', {
element.hypergrid.properties.repaintIntervalRate = 1;
Object.defineProperty(element.hypergrid, '_lazy_load', {
set: () => {},
get: () => true
});
Expand Down
20 changes: 10 additions & 10 deletions packages/perspective-viewer-hypergrid/test/results/results.json
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"superstore.html/shows a grid without any settings applied.": "b09dc5301dbfe6afbfcd2dc58843a475",
"superstore.html/pivots by a row.": "5260127d95553860fcc9ad56768ea427",
"superstore.html/pivots by two rows.": "f53fdf0be253dc4a3c5d86a03c50044f",
"superstore.html/pivots by a row and a column.": "47ea6ae4282c002c2da57d3e2008646d",
"superstore.html/pivots by two rows and two columns.": "c3939b8853d3db3d380fa3936dfb0559",
"superstore.html/sorts by a numeric column.": "2eb4a45b85bedbdd2cef8bb8c712ed5c",
"superstore.html/sorts by an alpha column.": "f99960fb04d633f96a190df6f55ed000",
"superstore.html/displays visible columns.": "95ea7a90e503ed69e4cc87b9f71adbb4",
"superstore.html/resets viewable area when the logical size expands.": "a7933b107656467730a115cec818d625",
"superstore.html/shows a grid without any settings applied.": "45055f06b933226373579c5e3b03608f",
"superstore.html/pivots by a row.": "02d1622170029c721ef995904e13330c",
"superstore.html/pivots by two rows.": "fd0b7398c8d49d790ffcf04f9902f3a8",
"superstore.html/pivots by a row and a column.": "88656add4d88bd3abf76496f4ec2f9d7",
"superstore.html/pivots by two rows and two columns.": "e987eee39602ed26060cbb60f7de0618",
"superstore.html/sorts by a numeric column.": "b1cab634c6f028aadca4cb80d45da0d2",
"superstore.html/sorts by an alpha column.": "75f2524a106af8f9f5a032561cf8ffbd",
"superstore.html/displays visible columns.": "5e92e91cfbfa7dd864e3381bd834dfab",
"superstore.html/resets viewable area when the logical size expands.": "cde73369571f2d991f683add8b894ae3",
"superstore.html/selecting a column does not log a context deleted error.": "2563581d3556c4576745443c8498bea9",
"superstore.html/resets viewable area when the physical size expands.": "75b1b246d3c2612c45fc6c5bc7c3660a"
"superstore.html/resets viewable area when the physical size expands.": "b5e7dffa2272e6b6daf465a9af34e2bc"
}
6 changes: 4 additions & 2 deletions packages/perspective-viewer/src/html/view.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,14 @@

<div id="app">
<div id='side_panel' class="column fixed noselect">
<div>
<div id="vis_selector_container">
<div style="width:25px;margin-left:5px"></div>
<select id="vis_selector">
</select>
</div>
<ul id='column_names'></ul>
<ul id='active_columns' ondragenter="dragEnter(event)"></ul>
<div id='divider'></div>
<ul id='inactive_columns'></ul>
</div>
<div class="column noselect">
<div id='top_panel'>
Expand Down
5 changes: 3 additions & 2 deletions packages/perspective-viewer/src/js/row.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,13 @@ import "../less/row.less";

global.dragEnter = function dragEnter(ev) {
ev.preventDefault();
ev.currentTarget.classList.add('dropping');
}

global.allowDrop = function allowDrop(ev) {
ev.preventDefault();
ev.currentTarget.classList.add('dropping')
ev.currentTarget.classList.add('dropping');
ev.dataTransfer.dropEffect = 'move';
}

global.disallowDrop = function disallowDrop(ev) {
Expand Down Expand Up @@ -91,7 +93,6 @@ registerElement(template, {
this.dispatchEvent(new CustomEvent('row-drag'));
});
li.addEventListener('dragend', ev => {
ev.currentTarget.classList.remove('dropping');
this.dispatchEvent(new CustomEvent('row-dragend'));
});
let visible = this.querySelector('.is_visible');
Expand Down
Loading

0 comments on commit 9961911

Please sign in to comment.