Merge pull request #644 from finos/perspective-config

Perspective config

docs/md/usage.md

@@ -333,6 +333,38 @@ view.delete();
 // on this `table()`!
 table.delete();
 ```
+### Customizing behavior with `perspective.config.js`
+
+For ease of configu synchronization between the Node.js, WebWorker and Browser,
+Perspective supports configuration statically.  You may override Perspective's
+[default settings](https://github.com/finos/perspective/blob/master/packages/perspective/src/js/config/settings.js)
+via a `perspective.config.js` or `perspective.config.json`
+file in your project's root or parent path, or via the `"perspective"` key in
+your project's `package.json`.
+
+Note that, while in Node.js this config file is read at runtime, for the browser
+this file must be read at compile time (handled automatically via
+[`@finos/perspective-webpack-plugin`](https://github.com/finos/perspective/tree/master/packages/perspective-webpack-plugin)).
+Thus, to update it you must either
+rebuild your code, or supply the JSON configuration object to the `worker()`
+constructor on initialization.
+
+```javascript
+module.exports = {
+    types: {
+        string: {
+            aggregate: "dominant"
+        },
+        float: {
+            format: {
+                style: "decimal",
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2
+            }
+        }
+    }
+};
+```
 
 ## `perspective-viewer` web component
 

packages/perspective-viewer-d3fc/src/js/tooltip/generateHTML.js

@@ -8,6 +8,7 @@
  */
 import {select} from "d3";
 import {getGroupValues, getSplitValues, getDataValues} from "./selectionData";
+import {get_type_config} from "@finos/perspective/dist/esm/config";
 
 export function generateHtml(tooltipDiv, data, settings) {
     const tooltipValues = getGroupValues(data, settings)
@@ -30,4 +31,9 @@ function addDataValues(tooltipDiv, values) {
         });
 }
 
-const formatNumber = value => value.toLocaleString(undefined, {style: "decimal"});
+const formatNumber = value =>
+    value.toLocaleString(undefined, {
+        style: "decimal",
+        minimumFractionDigits: get_type_config("float").precision,
+        maximumFractionDigits: get_type_config("float").precision
+    });

packages/perspective-viewer-highcharts/src/js/highcharts/tooltip.js

@@ -7,6 +7,8 @@
  *
  */
 
+import {get_type_config} from "@finos/perspective/dist/esm/config";
+
 export function format_tooltip(context, type, schema, axis_titles, pivot_titles) {
     const row_pivots_titles = pivot_titles.row,
         column_pivot_titles = pivot_titles.column;
@@ -145,9 +147,9 @@ function value_exists(value) {
 
 function format_value(value, type) {
     if (type === "datetime") {
-        return new Date(value).toLocaleString();
+        return new Date(value).toLocaleString("en-us", get_type_config("datetime").format);
     } else if (type === "date") {
-        return new Date(value).toLocaleString("en-us", {year: "numeric", month: "numeric", day: "numeric"});
+        return new Date(value).toLocaleString("en-us", get_type_config("date").format);
     } else if (type === "float" || type === "integer") {
         return format_number(value, type);
     } else {
@@ -157,8 +159,8 @@ function format_value(value, type) {
 
 function format_number(num, format) {
     if (format === "float") {
-        return Number.parseFloat(num).toLocaleString();
+        return Number.parseFloat(num).toLocaleString(get_type_config("float").format);
     } else {
-        return Number.parseInt(num).toLocaleString();
+        return Number.parseInt(num).toLocaleString(get_type_config("float").format);
     }
 }

packages/perspective-viewer-hypergrid/src/js/hypergrid.js

@@ -22,6 +22,7 @@ import {bindTemplate} from "@finos/perspective-viewer/dist/esm/utils.js";
 const TEMPLATE = require("../html/hypergrid.html");
 
 import style from "../less/hypergrid.less";
+import {get_type_config} from "@finos/perspective/src/js/config";
 
 const COLUMN_HEADER_FONT = "12px Helvetica, sans-serif";
 const GROUP_LABEL_FONT = "12px Open Sans, sans-serif"; // overrides COLUMN_HEADER_FONT for group labels
@@ -245,41 +246,15 @@ bindTemplate(TEMPLATE, style)(
                 // Add tree cell renderer
                 this.grid.cellRenderers.add("TreeCell", Base.extend({paint: treeLineRendererPaint}));
 
-                const float_formatter = null_formatter(
-                    new this.grid.localization.NumberFormatter("en-US", {
-                        minimumFractionDigits: 2,
-                        maximumFractionDigits: 2
-                    })
-                );
-                this.grid.localization.add("FinanceFloat", float_formatter);
-
-                const integer_formatter = null_formatter(new this.grid.localization.NumberFormatter("en-us", {}));
-                this.grid.localization.add("FinanceInteger", integer_formatter);
-
-                const datetime_formatter = null_formatter(
-                    new this.grid.localization.DateFormatter("en-us", {
-                        week: "numeric",
-                        year: "numeric",
-                        month: "numeric",
-                        day: "numeric",
-                        hour: "numeric",
-                        minute: "numeric",
-                        second: "numeric"
-                    }),
-                    -1
-                );
-
-                const date_formatter = null_formatter(
-                    new this.grid.localization.DateFormatter("en-us", {
-                        week: "numeric",
-                        year: "numeric",
-                        month: "numeric",
-                        day: "numeric"
-                    }),
-                    -1
-                );
-                this.grid.localization.add("FinanceDatetime", datetime_formatter);
-                this.grid.localization.add("FinanceDate", date_formatter);
+                const float_formatter = new this.grid.localization.NumberFormatter("en-US", get_type_config("float").format);
+                const integer_formatter = new this.grid.localization.NumberFormatter("en-us", get_type_config("integer").format);
+                this.grid.localization.add("FinanceFloat", null_formatter(float_formatter));
+                this.grid.localization.add("FinanceInteger", null_formatter(integer_formatter));
+
+                const datetime_formatter = new this.grid.localization.DateFormatter("en-us", get_type_config("datetime").format);
+                const date_formatter = new this.grid.localization.DateFormatter("en-us", get_type_config("date").format);
+                this.grid.localization.add("FinanceDatetime", null_formatter(datetime_formatter, -1));
+                this.grid.localization.add("FinanceDate", null_formatter(date_formatter, -1));
 
                 this.grid.localization.add("FinanceTree", {
                     format: function(val, type) {

packages/perspective-viewer/package.json

@@ -28,7 +28,7 @@
         "clean:screenshots": "rimraf \"screenshots/**/*.@(failed|diff).png\"",
         "docs": "npm-run-all docs:jsdoc docs:deploy",
         "docs:jsdoc": "jsdoc2md src/js/viewer.js -p list --separators --no-gfm > README.md",
-        "docs:deploy": "(echo \"---\nid: perspective-viewer\ntitle: \\`perspective-viewer\\` API\n---\n\n\"; cat README.md) > ../../docs/obj/perspective-viewer-site.md"
+        "docs:deploy": "(echo \"---\nid: perspective-viewer\ntitle: \\`perspective-viewer\\` API\n---\n\n\"; cat README.md) > ../../docs/obj/perspective-viewer.md"
     },
     "publishConfig": {
         "access": "public"

packages/perspective-viewer/src/js/row.js

@@ -15,6 +15,7 @@ import awesomplete_style from "!!css-loader!awesomplete/awesomplete.css";
 import {bindTemplate} from "./utils.js";
 
 import perspective from "@finos/perspective";
+import {get_type_config} from "@finos/perspective/dist/esm/config";
 import template from "../html/row.html";
 
 import style from "../less/row.less";
@@ -73,7 +74,7 @@ class Row extends HTMLElement {
             default:
         }
         if (!this.hasAttribute("aggregate")) {
-            this.setAttribute("aggregate", perspective.AGGREGATE_DEFAULTS[type]);
+            this.setAttribute("aggregate", get_type_config(type).aggregate);
         }
         let filter_operand = this.shadowRoot.querySelector("#filter_operand");
         this._callback = event => this._update_filter(event);
@@ -119,7 +120,7 @@ class Row extends HTMLElement {
         const filter_dropdown = this.shadowRoot.querySelector("#filter_operator");
         const filter = JSON.parse(this.getAttribute("filter"));
         if (filter_dropdown.value !== filter.operator) {
-            filter_dropdown.value = filter.operator || perspective.FILTER_DEFAULTS[this.getAttribute("type")];
+            filter_dropdown.value = filter.operator || get_type_config(this.getAttribute("type")).filter_operator;
         }
         filter_dropdown.style.width = get_text_width(filter_dropdown.value);
         const filter_input = this.shadowRoot.querySelector("#filter_operand");
@@ -135,7 +136,7 @@ class Row extends HTMLElement {
         let aggregate = this.getAttribute("aggregate");
         if (agg_dropdown.value !== aggregate && this.hasAttribute("type")) {
             let type = this.getAttribute("type");
-            agg_dropdown.value = aggregate || perspective.AGGREGATE_DEFAULTS[type];
+            agg_dropdown.value = aggregate || get_type_config(type).aggregate;
         }
     }
 
@@ -190,7 +191,7 @@ class Row extends HTMLElement {
         } else {
             event.dataTransfer.setData(
                 "text",
-                JSON.stringify([this.getAttribute("name"), perspective.FILTER_DEFAULTS[this.getAttribute("type")], undefined, this.getAttribute("type"), this.getAttribute("aggregate")])
+                JSON.stringify([this.getAttribute("name"), get_type_config(this.getAttribute("type")).filter_operator, undefined, this.getAttribute("type"), this.getAttribute("aggregate")])
             );
         }
         this.dispatchEvent(new CustomEvent("row-drag"));

packages/perspective-viewer/src/js/viewer.js

@@ -221,7 +221,7 @@ class PerspectiveViewer extends ActionElement {
      * config object is an array of three elements:
      *     * The column name.
      *     * The filter operation as a string.  See
-     *       {@link perspective/src/js/defaults.js}
+     *       {@link perspective/src/js/config/constants.js}
      *     * The filter argument, as a string, float or Array<string> as the
      *       filter operation demands.
      * @fires PerspectiveViewer#perspective-config-update

packages/perspective-viewer/src/js/viewer/dom_element.js

@@ -7,7 +7,7 @@
  *
  */
 
-import perspective from "@finos/perspective";
+import {get_type_config} from "@finos/perspective/dist/esm/config";
 import {dragend} from "./dragdrop.js";
 import {renderers} from "./renderers.js";
 
@@ -56,10 +56,10 @@ export class DomElement extends PerspectiveElement {
                 if (aggregate) {
                     aggregate = aggregate.op;
                 } else {
-                    aggregate = perspective.AGGREGATE_DEFAULTS[type];
+                    aggregate = get_type_config(type).aggregate;
                 }
             } else {
-                aggregate = perspective.AGGREGATE_DEFAULTS[type];
+                aggregate = get_type_config(type).aggregate;
             }
         }
 

packages/perspective-viewer/src/js/viewer/perspective_element.js

@@ -10,6 +10,7 @@
 import _ from "lodash";
 
 import perspective from "@finos/perspective";
+import {get_type_config} from "@finos/perspective/dist/esm/config";
 import {CancelTask} from "./cancel_task.js";
 import {COMPUTATIONS} from "../computed_column.js";
 
@@ -47,7 +48,7 @@ function get_aggregates_with_defaults(aggregate_attribute, schema, cols) {
         found.add(col.column);
         if (type) {
             if (col.op === "" || perspective.TYPE_AGGREGATES[type].indexOf(col.op) === -1) {
-                col.op = perspective.AGGREGATE_DEFAULTS[type];
+                col.op = get_type_config(type).aggregate;
             }
             aggregates.push(col);
         } else {
@@ -60,7 +61,7 @@ function get_aggregates_with_defaults(aggregate_attribute, schema, cols) {
         if (!found.has(col)) {
             aggregates.push({
                 column: col,
-                op: perspective.AGGREGATE_DEFAULTS[schema[col]]
+                op: get_type_config(schema[col]).aggregate
             });
         }
     }

packages/perspective-webpack-plugin/index.js

@@ -10,6 +10,7 @@
 const PSP_WORKER_LOADER = require.resolve("./src/js/psp-worker-loader");
 const WASM_LOADER = require.resolve("./src/js/wasm-loader.js");
 const PSP_WORKER_COMPILER_LOADER = require.resolve("./src/js/psp-worker-compiler-loader.js");
+const {get_config} = require("@finos/perspective/dist/esm/config");
 
 class PerspectiveWebpackPlugin {
     constructor(options = {}) {
@@ -78,6 +79,23 @@ class PerspectiveWebpackPlugin {
             ]
         });
 
+        const perspective_config = get_config();
+        if (perspective_config) {
+            rules.push({
+                test: /\.js$/,
+                include: /perspective[\\/].+?[\\/]config[\\/]index\.js$/,
+                use: [
+                    {
+                        loader: "string-replace-loader",
+                        options: {
+                            search: "global.__TEMPLATE_CONFIG__",
+                            replace: JSON.stringify(perspective_config, null, 4)
+                        }
+                    }
+                ]
+            });
+        }
+
         rules.push({
             test: /psp\.async\.wasm\.js$/,
             include: this.options.load_path,

packages/perspective-webpack-plugin/package.json

@@ -31,6 +31,7 @@
         "bufferutil": "~3.0.0"
     },
     "peerDependencies": {
-        "webpack": ">=3.5 <5"
+        "webpack": ">=3.5 <5",
+        "@finos/perspective": "0.3.1"
     }
 }

packages/perspective/index.d.ts

@@ -139,8 +139,6 @@ declare module '@finos/perspective' {
     type perspective = {
         TYPE_AGGREGATES: ValuesByType,
         TYPE_FILTERS: ValuesByType,
-        AGGREGATE_DEFAULTS: ValueByType,
-        FILTER_DEFAULTS: ValueByType,
         SORT_ORDERS: SortOrders,
         table(): Table,
         worker(): PerspectiveWorker,

packages/perspective/src/js/API/client.js → packages/perspective/src/js/api/client.js

@@ -97,14 +97,13 @@ Client.prototype._handle = function(e) {
         }
 
         const msgs = this._worker.messages;
-
         this._worker.initialized.value = true;
         this._worker.messages = [];
 
         if (msgs) {
             for (const m in msgs) {
                 if (msgs.hasOwnProperty(m)) {
-                    setTimeout(msgs[m]);
+                    msgs[m]();
                 }
             }
         }

packages/perspective/src/js/API/server.js → packages/perspective/src/js/api/server.js

@@ -7,6 +7,8 @@
  *
  */
 
+import {override_config} from "../config";
+
 function error_to_json(error) {
     const obj = {};
     if (typeof error !== "string") {
@@ -38,6 +40,9 @@ export class Server {
      * `Server` must be extended and the `post` method implemented before it can be initialized.
      */
     init(msg) {
+        if (msg.config) {
+            override_config(msg.config);
+        }
         this.post(msg);
     }
 

packages/perspective/src/js/defaults.js → packages/perspective/src/js/config/constants.js

@@ -61,15 +61,6 @@ export const TYPE_AGGREGATES = {
     date: STRING_AGGREGATES
 };
 
-export const AGGREGATE_DEFAULTS = {
-    string: "count",
-    float: "sum",
-    integer: "sum",
-    boolean: "count",
-    datetime: "count",
-    date: "count"
-};
-
 const BOOLEAN_FILTERS = ["&", "|", "==", "!=", "or", "and"];
 
 const NUMBER_FILTERS = ["<", ">", "==", "<=", ">=", "!=", "is nan", "is not nan"];
@@ -88,18 +79,3 @@ export const TYPE_FILTERS = {
     datetime: DATETIME_FILTERS,
     date: DATETIME_FILTERS
 };
-
-export const FILTER_DEFAULTS = {
-    string: "==",
-    float: "==",
-    integer: "==",
-    boolean: "==",
-    datetime: "==",
-    date: "=="
-};
-
-export const TYPED_ARRAY_SENTINEL_VALUE_INT8 = 255;
-export const TYPED_ARRAY_SENTINEL_VALUE_INT16 = 32767;
-export const TYPED_ARRAY_SENTINEL_VALUE_INT32 = 2147483647;
-export const TYPED_ARRAY_SENTINEL_VALUE_FLOAT32 = 3.40282e38;
-export const TYPED_ARRAY_SENTINEL_VALUE_FLOAT64 = Number.MAX_VALUE;