@mwater/visualization 5.0.0

package/lib/datagrids/LabeledExprGenerator.js

@@ -0,0 +1,252 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const expressions_1 = require("@mwater/expressions");
+/** Generates labeled expressions (expr, label and joins) for a table. Used to make a datagrid, do export or import. */
+class LabeledExprGenerator {
+    schema;
+    constructor(schema) {
+        this.schema = schema;
+    }
+    // Generate labeled exprs, an array of ({ expr: mwater expression, label: plain string, joins: array of join column ids to get to current table. Usually []. Only present for 1-n joins })
+    // table is id of table to generate from
+    generate(table, options = {}) {
+        lodash_1.default.defaults(options, {
+            locale: null,
+            headerFormat: "code",
+            enumFormat: "code",
+            splitLatLng: false,
+            splitEnumset: false,
+            useJoinIds: false,
+            columnFilter: null,
+            multipleJoinCondition: null,
+            useConfidential: false,
+            numberDuplicatesLabels: false
+        });
+        // Create a label for a column
+        function createLabel(column, suffix) {
+            // By header mode
+            let label;
+            if (options.headerFormat === "code" && column.code) {
+                label = column.code;
+                if (suffix) {
+                    label += ` (${expressions_1.ExprUtils.localizeString(suffix, options.locale)})`;
+                }
+            }
+            else if (options.headerFormat === "both" && column.code) {
+                label = column.code;
+                if (suffix) {
+                    label += ` (${expressions_1.ExprUtils.localizeString(suffix, options.locale)})`;
+                }
+                label += "\n" + expressions_1.ExprUtils.localizeString(column.name, options.locale);
+                if (suffix) {
+                    label += ` (${expressions_1.ExprUtils.localizeString(suffix, options.locale)})`;
+                }
+            }
+            else {
+                // text
+                label = expressions_1.ExprUtils.localizeString(column.name, options.locale);
+                if (suffix) {
+                    label += ` (${expressions_1.ExprUtils.localizeString(suffix, options.locale)})`;
+                }
+            }
+            return label;
+        }
+        // Convert a table + schema column into multiple labeled expres
+        var convertColumn = (table, column, joins) => {
+            // Filter if present
+            let joinColumn;
+            if (options.columnFilter && !options.columnFilter(table, column)) {
+                return [];
+            }
+            // Skip deprecated
+            if (column.deprecated) {
+                return [];
+            }
+            // Skip redacted if confidential on
+            if (column.redacted && options.useConfidential) {
+                return [];
+            }
+            // Skip confidential data
+            if (column.confidential && !options.useConfidential) {
+                return [];
+            }
+            // Override handling
+            if (options.overrideColumn) {
+                const result = options.overrideColumn(table, column, joins, createLabel(column));
+                if (result) {
+                    return result;
+                }
+            }
+            if (column.type === "id") {
+                // Use id if that option is enabled
+                if (options.useJoinIds) {
+                    return [
+                        {
+                            expr: { type: "scalar", table, joins: [column.id], expr: { type: "id", table: column.idTable } },
+                            label: createLabel(column),
+                            joins
+                        }
+                    ];
+                }
+                else {
+                    // Use label, code, full name, or name of dest table
+                    const destTable = this.schema.getTable(column.idTable);
+                    if (destTable) {
+                        const label = destTable.label;
+                        if (label && typeof label == "string") {
+                            joinColumn = this.schema.getColumn(column.idTable, label);
+                        }
+                        joinColumn = joinColumn || this.schema.getColumn(column.idTable, "code");
+                        joinColumn = joinColumn || this.schema.getColumn(column.idTable, "full_name");
+                        joinColumn = joinColumn || this.schema.getColumn(column.idTable, "name");
+                        joinColumn = joinColumn || this.schema.getColumn(column.idTable, "username");
+                        if (joinColumn) {
+                            return [
+                                {
+                                    expr: {
+                                        type: "scalar",
+                                        table,
+                                        joins: [column.id],
+                                        expr: { type: "field", table: column.idTable, column: joinColumn.id }
+                                    },
+                                    label: createLabel(column),
+                                    joins
+                                }
+                            ];
+                        }
+                        else {
+                            return [];
+                        }
+                    }
+                }
+            }
+            if (column.type === "join") {
+                // If n-1, 1-1 join, create scalar
+                if (["n-1", "1-1"].includes(column.join.type)) {
+                    // Use id if that option is enabled
+                    if (options.useJoinIds) {
+                        return [
+                            {
+                                expr: { type: "scalar", table, joins: [column.id], expr: { type: "id", table: column.join.toTable } },
+                                label: createLabel(column),
+                                joins
+                            }
+                        ];
+                        // Support cascading ref question
+                    }
+                    else if (column.join.type === "n-1" && column.join.toTable.match(/^custom./)) {
+                        return this.schema
+                            .getColumns(column.join.toTable)
+                            .filter((c) => c.id[0] !== "_")
+                            .map((c) => ({
+                            expr: {
+                                type: "scalar",
+                                table,
+                                joins: [column.id],
+                                expr: { type: "field", table: column.join.toTable, column: c.id }
+                            },
+                            label: `${createLabel(column)} > ${createLabel(c)}`,
+                            joins
+                        }));
+                    }
+                    else {
+                        // use code, full name, or name of dest table
+                        joinColumn = this.schema.getColumn(column.join.toTable, "code");
+                        joinColumn = joinColumn || this.schema.getColumn(column.join.toTable, "full_name");
+                        joinColumn = joinColumn || this.schema.getColumn(column.join.toTable, "name");
+                        joinColumn = joinColumn || this.schema.getColumn(column.join.toTable, "username");
+                        if (joinColumn) {
+                            return [
+                                {
+                                    expr: {
+                                        type: "scalar",
+                                        table,
+                                        joins: [column.id],
+                                        expr: { type: "field", table: column.join.toTable, column: joinColumn.id }
+                                    },
+                                    label: createLabel(column),
+                                    joins
+                                }
+                            ];
+                        }
+                        else {
+                            return [];
+                        }
+                    }
+                }
+                // If 1-n/n-n, convert each child
+                if (["1-n", "n-n"].includes(column.join.type) &&
+                    options.multipleJoinCondition &&
+                    options.multipleJoinCondition(table, column)) {
+                    let childExprs = [];
+                    for (let childColumn of this.schema.getColumns(column.join.toTable)) {
+                        childExprs = childExprs.concat(convertColumn(column.join.toTable, childColumn, joins.concat([column.id])));
+                    }
+                    return childExprs;
+                }
+            }
+            else if (column.type === "geometry" && options.splitLatLng) {
+                // Use lat/lng
+                return [
+                    {
+                        expr: { table, type: "op", op: "latitude", exprs: [{ type: "field", table, column: column.id }] },
+                        label: createLabel(column, "latitude"),
+                        joins
+                    },
+                    {
+                        expr: { table, type: "op", op: "longitude", exprs: [{ type: "field", table, column: column.id }] },
+                        label: createLabel(column, "longitude"),
+                        joins
+                    }
+                ];
+            }
+            else if (column.type === "enumset" && options.splitEnumset) {
+                // Split into one for each enumset value
+                return lodash_1.default.map(column.enumValues, (ev) => {
+                    return {
+                        expr: {
+                            table,
+                            type: "op",
+                            op: "contains",
+                            exprs: [
+                                { type: "field", table, column: column.id },
+                                { type: "literal", valueType: "enumset", value: [ev.id] }
+                            ]
+                        },
+                        label: createLabel(column, options.enumFormat === "name" ? ev.name : ev.code || ev.name),
+                        joins
+                    };
+                });
+            }
+            else {
+                // Simple columns
+                return [{ expr: { type: "field", table, column: column.id }, label: createLabel(column), joins }];
+            }
+        };
+        // For each column in form
+        let labeledExprs = [];
+        for (let column of this.schema.getColumns(table)) {
+            // Convert column into labels and exprs
+            labeledExprs = labeledExprs.concat(convertColumn(table, column, []));
+        }
+        // If numberDuplicatesLabels, label distinctly
+        if (options.numberDuplicatesLabels) {
+            const labelGroups = lodash_1.default.groupBy(labeledExprs, "label");
+            for (let key in labelGroups) {
+                const group = labelGroups[key];
+                if (group.length > 1) {
+                    for (let i = 0; i < group.length; i++) {
+                        const item = group[i];
+                        item.label = item.label + ` (${i + 1})`;
+                    }
+                }
+            }
+        }
+        return lodash_1.default.compact(labeledExprs);
+    }
+}
+exports.default = LabeledExprGenerator;

package/lib/datagrids/OrderBysDesignerComponent.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+export interface OrderBysDesignerComponentProps {
+    /** schema to use */
+    schema: Schema;
+    /** dataSource to use */
+    dataSource: DataSource;
+    table: string;
+    /** Columns list See README.md of this folder */
+    orderBys: any;
+    /** Called when columns changes */
+    onChange: any;
+}
+export default class OrderBysDesignerComponent extends React.Component<OrderBysDesignerComponentProps> {
+    static defaultProps: {
+        orderBys: never[];
+    };
+    handleChange: (index: any, orderBy: any) => any;
+    handleRemove: (index: any) => any;
+    handleAdd: () => any;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}

package/lib/datagrids/OrderBysDesignerComponent.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const expressions_ui_1 = require("@mwater/expressions-ui");
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+// Edits an orderBys which is a list of expressions and directions. See README.md
+class OrderBysDesignerComponent extends react_1.default.Component {
+    static defaultProps = { orderBys: [] };
+    handleChange = (index, orderBy) => {
+        const orderBys = this.props.orderBys.slice();
+        orderBys[index] = orderBy;
+        return this.props.onChange(orderBys);
+    };
+    handleRemove = (index) => {
+        const orderBys = this.props.orderBys.slice();
+        orderBys.splice(index, 1);
+        return this.props.onChange(orderBys);
+    };
+    handleAdd = () => {
+        const orderBys = this.props.orderBys.slice();
+        orderBys.push({ expr: null, direction: "asc" });
+        return this.props.onChange(orderBys);
+    };
+    render() {
+        return R("div", null, lodash_1.default.map(this.props.orderBys, (orderBy, index) => {
+            return R(OrderByDesignerComponent, {
+                key: index,
+                schema: this.props.schema,
+                table: this.props.table,
+                dataSource: this.props.dataSource,
+                orderBy,
+                onChange: this.handleChange.bind(null, index),
+                onRemove: this.handleRemove.bind(null, index)
+            });
+        }), R("button", {
+            key: "add",
+            type: "button",
+            className: "btn btn-link",
+            onClick: this.handleAdd
+        }, R("span", { className: "fas fa-plus" }), " " + T("Add Ordering")));
+    }
+}
+exports.default = OrderBysDesignerComponent;
+class OrderByDesignerComponent extends react_1.default.Component {
+    handleExprChange = (expr) => {
+        return this.props.onChange(lodash_1.default.extend({}, this.props.orderBy, { expr }));
+    };
+    handleDirectionChange = (value) => {
+        return this.props.onChange(lodash_1.default.extend({}, this.props.orderBy, { direction: value ? "desc" : "asc" }));
+    };
+    render() {
+        return R("div", { className: "row" }, R("div", { className: "col-7" }, R(expressions_ui_1.ExprComponent, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            table: this.props.table,
+            types: ["text", "number", "boolean", "date", "datetime"],
+            aggrStatuses: ["individual", "literal", "aggregate"],
+            value: this.props.orderBy.expr,
+            onChange: this.handleExprChange
+        })), R("div", { className: "col-3" }, react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, value: this.props.orderBy.direction === "desc", onChange: this.handleDirectionChange }, T("Reverse"))), R("div", { className: "col-1" }, R("button", { className: "btn btn-sm btn-link", type: "button", onClick: this.props.onRemove }, R("span", { className: "fas fa-times" }))));
+    }
+}

package/lib/datagrids/README.md

@@ -0,0 +1,3 @@
+## Design of data grid
+
+See `DatagridDesign.d.ts`

package/lib/datagrids/ServerDatagridDataSource.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="jquery" />
+import DatagridDataSource from "./DatagridDataSource";
+import { DatagridDesign } from "..";
+export interface ServerDatagridDataSourceOptions {
+    /** API url to use for talking to mWater server */
+    apiUrl: string;
+    /** client id to use for talking to mWater server */
+    client?: string;
+    /** share id to use for talking to mWater server */
+    share?: string;
+    /** datagrid id to use on server */
+    datagridId: string;
+    /** revision to use to allow caching */
+    rev?: number;
+}
+/** Uses mWater server to get datagrid data to allow sharing with unprivileged users */
+export default class ServerDatagridDataSource extends DatagridDataSource {
+    options: ServerDatagridDataSourceOptions;
+    constructor(options: ServerDatagridDataSourceOptions);
+    getRows(design: DatagridDesign, offset: any, limit: any, filters: any, callback: any): JQuery.jqXHR<any>;
+    getQuickfiltersDataSource(): ServerQuickfilterDataSource;
+}
+interface ServerQuickfilterDataSourceOptions {
+    /** API url to use for talking to mWater server */
+    apiUrl: string;
+    /** client id to use for talking to mWater server */
+    client?: string;
+    /** share id to use for talking to mWater server */
+    share?: string;
+    /** datagrid id to use on server */
+    datagridId: string;
+    /** revision to use to allow caching */
+    rev?: number;
+}
+declare class ServerQuickfilterDataSource {
+    options: ServerQuickfilterDataSourceOptions;
+    constructor(options: ServerQuickfilterDataSourceOptions);
+    getValues(index: any, expr: any, filters: any, offset: any, limit: any, callback: any): JQuery.jqXHR<any>;
+}
+export {};

package/lib/datagrids/ServerDatagridDataSource.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jquery_1 = __importDefault(require("jquery"));
+const querystring_1 = __importDefault(require("querystring"));
+const DatagridDataSource_1 = __importDefault(require("./DatagridDataSource"));
+const compressJson_1 = __importDefault(require("../compressJson"));
+/** Uses mWater server to get datagrid data to allow sharing with unprivileged users */
+class ServerDatagridDataSource extends DatagridDataSource_1.default {
+    options;
+    // options:
+    //   apiUrl: API url to use for talking to mWater server
+    //   client: client id to use for talking to mWater server
+    //   share: share id to use for talking to mWater server
+    //   datagridId: datagrid id to use on server
+    //   rev: revision to use to allow caching
+    constructor(options) {
+        super();
+        this.options = options;
+    }
+    // Get the data that the widget needs. The widget should implement getData method (see above) to get the data from the server
+    //  design: design of the widget. Ignored in the case of server-side rendering
+    //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
+    getRows(design, offset, limit, filters, callback) {
+        const query = {
+            client: this.options.client,
+            share: this.options.share,
+            filters: (0, compressJson_1.default)(filters),
+            rev: this.options.rev,
+            offset,
+            limit
+        };
+        const url = this.options.apiUrl + `datagrids/${this.options.datagridId}/data?` + querystring_1.default.stringify(query);
+        return jquery_1.default.getJSON(url, (data) => {
+            return callback(null, data);
+        }).fail((xhr) => {
+            console.log(xhr.responseText);
+            return callback(new Error(xhr.responseText));
+        });
+    }
+    getQuickfiltersDataSource() {
+        return new ServerQuickfilterDataSource(this.options);
+    }
+}
+exports.default = ServerDatagridDataSource;
+class ServerQuickfilterDataSource {
+    options;
+    // options:
+    //   apiUrl: API url to use for talking to mWater server
+    //   client: client id to use for talking to mWater server
+    //   share: share id to use for talking to mWater server
+    //   datagridId: datagrid id to use on server
+    //   rev: revision to use to allow caching
+    constructor(options) {
+        this.options = options;
+    }
+    // Gets the values of the quickfilter at index
+    getValues(index, expr, filters, offset, limit, callback) {
+        const query = {
+            client: this.options.client,
+            share: this.options.share,
+            filters: (0, compressJson_1.default)(filters),
+            offset,
+            limit,
+            rev: this.options.rev
+        };
+        const url = this.options.apiUrl +
+            `datagrids/${this.options.datagridId}/quickfilters/${index}/values?` +
+            querystring_1.default.stringify(query);
+        return jquery_1.default.getJSON(url, (data) => {
+            return callback(null, data);
+        }).fail((xhr) => {
+            console.log(xhr.responseText);
+            return callback(new Error(xhr.responseText));
+        });
+    }
+}

package/lib/demo.d.ts

@@ -0,0 +1 @@
+import "./index";