Skip to content

Commit

Permalink
Add documentation, remove perspective methods
Browse files Browse the repository at this point in the history
  • Loading branch information
@texodus
texodus committed Jun 1, 2020
1 parent e6de117 commit 24fe1e6
Show file tree
Hide file tree
Showing 9 changed files with 50 additions and 174 deletions.
34 changes: 12 additions & 22 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,13 @@
#

A regular Javascript library for the browser, `regular-table` exports
a single [Custom
Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
a [Custom Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
named `<regular-table>`,
which renders a regular HTML `<table>` to a `fixed` position within a scollable
viewport. Only visible cells are rendered and queried from a natively `async`
virtual data model, making `regular-table` ideal for enormous or remote data
sets. Use it to build Data Grids,
Spreadsheets, Pivot Tables, File Trees, or anytime you need:
sets. Use it to build Data Grids, Spreadsheets, Pivot Tables, File Trees, or
anytime you need:

* Just a regular `<table>`.
* Virtually rendered for high-performance.
Expand Down Expand Up @@ -122,14 +121,10 @@ this rectangular `slice` of `DATA`:

```javascript
function getDataSlice(x0, y0, x1, y1) {
const data = DATA.slice(x0, x1).map(col => col.slice(y0, y1));
const num_columns = DATA.length;
const num_rows = DATA[0].length;

return {
num_rows,
num_columns,
data
num_rows: num_rows = DATA[0].length,
num_columns: DATA.length,
data: DATA.slice(x0, x1).map(col => col.slice(y0, y1))
};
}
```
Expand Down Expand Up @@ -181,7 +176,7 @@ scroll, more data will be fetched from `getDataSlice()`, and parts of the
</regular-table>
```

## Column and Row Headers
### Column and Row Headers

`regular-table` can also generate Hierarchial Row and Column Headers, using
`<th>` elements which layout in a `fixed` position within the virtual table.
Expand Down Expand Up @@ -222,16 +217,11 @@ const COLUMN_HEADERS = [
];

function getDataSlice(x0, y0, x1, y1) {
const data = DATA.slice(x0, x1).map(col => col.slice(y0, y1));
const column_headers = COLUMN_NAMES.slice(x0, x1);
const num_columns = DATA.length;
const num_rows = DATA[0].length;

return {
column_headers,
num_rows,
num_columns,
data
column_headers: COLUMN_NAMES.slice(x0, x1),
num_rows: DATA[0].length,
num_columns: DATA.length,
data: DATA.slice(x0, x1).map(col => col.slice(y0, y1));
};
}
```
Expand Down Expand Up @@ -280,7 +270,7 @@ Resulting HTML:
</regular-table>
```

## Hierarchial/Group Headers
### Hierarchial/Group Headers

`regular-table` supports multiple `<tr>` of `<th>`, and also uses `colspan` and
`rowspan` to merge simple consecutive names, which allows description of simple
Expand Down
3 changes: 1 addition & 2 deletions babel.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ module.exports = {
node: "12",
ios: "13",
},
useBuiltIns: "usage",
corejs: 3,
},
],
],
Expand All @@ -21,4 +19,5 @@ module.exports = {
"./scripts/babel-plugin-html-template.js",
"./scripts/babel-plugin-css-template.js",
],
sourceMaps: true,
};
12 changes: 6 additions & 6 deletions examples/perspective_headers.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
return FORMATTERS[type]?.format(val) || val;
}

async getData(x0, y0, x1, y1) {
async dataListener(x0, y0, x1, y1) {
let columns = {};
if (x1 - x0 > 0 && y1 - y0 > 0) {
columns = await this.view.to_columns({
Expand Down Expand Up @@ -112,7 +112,7 @@
};
}

applyStyle({detail: regularTable}) {
styleListener({detail: regularTable}) {
for (const td of regularTable.querySelectorAll("td, thead tr:last-child th")) {
const metadata = regularTable.get_meta(td);
let type;
Expand Down Expand Up @@ -184,12 +184,12 @@
columns: ["Sales", "Profit"],
});

const data_model = new window.PerspectiveDataModel();
await data_model.set_view(table, view);
const model = new window.PerspectiveDataModel();
await model.set_view(table, view);

const regular = document.getElementsByTagName("regular-table")[0];
regular.addStyleListener(data_model.applyStyle.bind(data_model));
regular.setDataListener(data_model.getData.bind(data_model));
regular.addStyleListener(model.styleListener.bind(model));
regular.setDataListener(model.dataListener.bind(model));
await regular.draw();
});
</script>
Expand Down
15 changes: 7 additions & 8 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,17 @@
"babel.config.js"
],
"scripts": {
"prebuild": "mkdirp dist/esm dist/css",
"build:babel": "babel src/js --source-maps --out-dir dist/esm",
"build:webpack": "webpack --color",
"build:babel": "babel src/js --out-dir dist/esm",
"build:webpack": "webpack",
"build:less": "lessc src/less/material.less dist/css/material.css",
"build": "npm-run-all build:babel build:webpack build:less",
"build": "npm-run-all -p build:*",
"clean": "rimraf dist",
"lint": "eslint src examples/*.html",
"fix": "eslint src examples/*.html --fix",
"test": "yarn jest --verbose",
"fix": "yarn lint --fix",
"test": "jest --noStackTrace",
"start": "http-server",
"watch:babel": "babel src/js --source-maps --watch --out-dir dist/esm",
"watch:webpack": "webpack --watch --color",
"watch:babel": "babel src/js --watch --out-dir dist/esm",
"watch:webpack": "webpack --watch",
"watch": "npm-run-all -p watch:*"
},
"publishConfig": {
Expand Down
2 changes: 1 addition & 1 deletion scripts/sync_gist.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ for (const file in hashes) {

// Retarget source assets to jsdelivr
let source = fs.readFileSync(`examples/${file}.html`).toString();
source = source.replace(/\.\.\/node_modules\//g, `https://cdn.jsdelivr.net/npm/@${pkg.version}/`);
source = source.replace(/\.\.\/node_modules\//g, `https://cdn.jsdelivr.net/npm/`);
source = source.replace(/\.\.\//g, `https://cdn.jsdelivr.net/npm/regular-table@${pkg.version}/`);

fs.writeFileSync(`dist/${hashes[file]}/index.html`, source);
Expand Down
24 changes: 22 additions & 2 deletions src/js/custom_element.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,14 +97,34 @@ export class RegularViewModel extends RegularViewEventModel {
return key;
}

setDataListener(view) {
/**
*
* @param {Function<Promise<DataResponse>>} dataListener
* `dataListener` is called by to request a rectangular section of data
* for a virtual viewport, (x0, y0, x1, y1), and returns a `DataReponse`
* object with this structure:
* ```
* column_headers: num_columns:
* [["X00", ["X00", ["X00", X > 3
* "X0"], "X1"], "X2"]]
*
* row_headers: data:
* [["Y00", "Y0"] [["A", [true, [0,
* ["Y00", "Y1"] "B", false, 1,
* ["Y00", "Y2"]] "C"], true]], 2]]
*
* num_rows:
* Y > 3
* ```
*/
setDataListener(dataListener) {
let schema = {};
let config = {
row_pivots: [],
column_pivots: [],
};

this._invalid_schema = true;
this._view_cache = {view, config, schema};
this._view_cache = {view: dataListener, config, schema};
}
}
2 changes: 1 addition & 1 deletion src/js/scroll_panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ export class RegularVirtualTableViewModel extends HTMLElement {
scrollTo(x, y, ncols, nrows) {
const row_height = this._virtual_panel.offsetHeight / nrows;
this.scrollTop = row_height * y;
this.scrollLeft = (x / (this._max_scroll_column() || ncols)) * this.scrollWidth;
this.scrollLeft = (x / (this._max_scroll_column() || ncols)) * (this.scrollWidth - this.offsetWidth);
}

/**
Expand Down
127 changes: 0 additions & 127 deletions src/js/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,47 +10,6 @@

import {DEBUG} from "./constants";

/******************************************************************************
*
* Events
*
*/

export async function getCellConfig({view, config}, row_idx, col_idx) {
const row_pivots = config.row_pivots;
const column_pivots = config.column_pivots;
const start_row = row_idx >= 0 ? row_idx : 0;
const end_row = start_row + 1;
const r = await view.to_json({start_row, end_row});
const row_paths = r.map((x) => x.__ROW_PATH__);
const row_pivots_values = row_paths[0] || [];
const row_filters = row_pivots
.map((pivot, index) => {
const pivot_value = row_pivots_values[index];
return pivot_value ? [pivot, "==", pivot_value] : undefined;
})
.filter((x) => x);
const column_index = row_pivots.length > 0 ? col_idx + 1 : col_idx;
const column_paths = Object.keys(r[0])[column_index];
const result = {row: r[0]};
let column_filters = [];
if (column_paths) {
const column_pivot_values = column_paths.split("|");
result.column_names = [column_pivot_values[column_pivot_values.length - 1]];
column_filters = column_pivots
.map((pivot, index) => {
const pivot_value = column_pivot_values[index];
return pivot_value ? [pivot, "==", pivot_value] : undefined;
})
.filter((x) => x)
.filter(([, , value]) => value !== "__ROW_PATH__");
}

const filters = config.filter.concat(row_filters).concat(column_filters);
result.config = {filters};
return result;
}

/******************************************************************************
*
* Profling
Expand Down Expand Up @@ -152,89 +111,3 @@ export function throttlePromise(target, property, descriptor) {
};
return descriptor;
}

export function get_type_config(type) {
const config = {};
if (default_types[type]) {
Object.assign(config, default_types[type]);
}
if (config.type) {
const props = get_type_config(config.type);
Object.assign(props, config);
return props;
} else {
return config;
}
}

export const default_types = {
/**
* `types` are the type-specific configuration options. Each key is the
* name of a perspective type; their values are configuration objects for
* that type.
*/
types: {
float: {
/**
* Which filter operator should be the default when a column of this
* type is pivotted.
*/
filter_operator: "==",

/**
* Which aggregate should be the default when a column of this type
* is pivotted.
*/
aggregate: "sum",

/**
* The format object for this type. Can be either an
* `toLocaleString()` `options` object for this type (or supertype),
* or a function which returns the formatted string for this type.
*/
format: {
style: "decimal",
minimumFractionDigits: 2,
maximumFractionDigits: 2,
},
},
string: {
filter_operator: "==",
aggregate: "count",
},
integer: {
filter_operator: "==",
aggregate: "sum",
format: {},
},
boolean: {
filter_operator: "==",
aggregate: "count",
},
datetime: {
filter_operator: "==",
aggregate: "count",
format: {
week: "numeric",
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric",
},
null_value: -1,
},
date: {
filter_operator: "==",
aggregate: "count",
format: {
week: "numeric",
year: "numeric",
month: "numeric",
day: "numeric",
},
null_value: -1,
},
},
};
5 changes: 0 additions & 5 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,6 @@ module.exports = {
},
],
},
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000,
},
output: {
filename: "regular-table.js",
library: "regular-table",
Expand Down

0 comments on commit 24fe1e6

Please sign in to comment.