@mwater/visualization 5.0.0

package/lib/MWaterAddRelatedIndicatorComponent.js

@@ -0,0 +1,129 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const querystring_1 = __importDefault(require("querystring"));
+const expressions_1 = require("@mwater/expressions");
+// List of indicators related to an entity
+class MWaterAddRelatedIndicatorComponent extends react_1.default.Component {
+    static contextTypes = { locale: prop_types_1.default.string };
+    constructor(props) {
+        super(props);
+        this.state = {
+            addingTables: [],
+            indicators: null
+        };
+    }
+    componentDidMount() {
+        // Get all response-type indicators
+        const query = {};
+        query.selector = JSON.stringify({ type: "response" });
+        query.fields = JSON.stringify({
+            "design.name": 1,
+            "design.desc": 1,
+            "design.properties": 1,
+            "design.recommended": 1,
+            deprecated: 1
+        });
+        if (this.props.client) {
+            query.client = this.props.client;
+        }
+        // Get list of all indicators
+        return jquery_1.default.getJSON(this.props.apiUrl + "indicators?" + querystring_1.default.stringify(query), (indicators) => {
+            // Filter by table reference
+            indicators = lodash_1.default.filter(indicators, (indicator) => this.doesIndicatorReferenceTable(indicator, this.props.table) && !indicator.deprecated);
+            // Sort by recommended then name
+            indicators = lodash_1.default.sortByOrder(indicators, [
+                (indicator) => (indicator.design.recommended ? 0 : 1),
+                (indicator) => expressions_1.ExprUtils.localizeString(indicator.design.name, this.context.locale)
+            ], ["asc", "asc"]);
+            return this.setState({ indicators });
+        }).fail((xhr) => {
+            return this.setState({ error: xhr.responseText });
+        });
+    }
+    // See if a property references the indicator
+    doesIndicatorReferenceTable(indicator, table) {
+        for (let proplist of lodash_1.default.values(indicator.design.properties)) {
+            for (let property of flattenProperties(proplist)) {
+                if (property.idTable === table) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    handleSelect = (table) => {
+        // Mark as being added
+        this.setState({ addingTables: lodash_1.default.union(this.state.addingTables, [table]) });
+        return this.props.onSelect(table);
+    };
+    render() {
+        // Filter out ones that are known and not recently added
+        let indicators = lodash_1.default.filter(this.state.indicators, (indicator) => {
+            return (!this.props.schema.getTable(`indicator_values:${indicator._id}`) ||
+                this.state.addingTables.includes(`indicator_values:${indicator._id}`));
+        });
+        // Filter by search
+        if (this.props.filter) {
+            indicators = lodash_1.default.filter(indicators, (indicator) => filterMatches(this.props.filter, expressions_1.ExprUtils.localizeString(indicator.design.name, this.context.locale)));
+        }
+        return R("div", null, R("div", { style: { paddingLeft: 5 }, className: "text-muted" }, "Other Available Indicators. Click to enable. ", R("i", { className: "fa fa-check-circle" }), " = recommended", !this.state.indicators
+            ? R("div", { className: "text-muted" }, R("i", { className: "fa fa-spin fa-spinner" }), " Loading...")
+            : undefined, R("div", { style: { paddingLeft: 10 } }, lodash_1.default.map(indicators, (indicator) => {
+            const name = expressions_1.ExprUtils.localizeString(indicator.design.name, this.context.locale);
+            const desc = expressions_1.ExprUtils.localizeString(indicator.design.desc, this.context.locale);
+            // If added, put special message
+            if (this.props.schema.getTable(`indicator_values:${indicator._id}`)) {
+                return R("div", { key: indicator._id, style: { cursor: "pointer", padding: 4 }, className: "text-success" }, `${name} added. See above.`);
+            }
+            return R("div", {
+                key: indicator._id,
+                style: { cursor: "pointer", color: "#478", padding: 4 },
+                onClick: this.handleSelect.bind(null, `indicator_values:${indicator._id}`)
+            }, 
+            // If in process of adding
+            this.state.addingTables.includes(indicator._id)
+                ? R("i", { className: "fa fa-spin fa-spinner" })
+                : undefined, indicator.design.recommended
+                ? R("i", { className: "fa fa-check-circle fa-fw", style: { color: "#337ab7" } })
+                : undefined, name, desc
+                ? R("span", { className: "text-muted", style: { fontSize: 12, paddingLeft: 3 } }, " - " + desc)
+                : undefined);
+        }))));
+    }
+}
+exports.default = MWaterAddRelatedIndicatorComponent;
+// Flattens a nested list of properties
+function flattenProperties(properties) {
+    // Flatten
+    let props = [];
+    for (let prop of properties) {
+        if (prop.contents) {
+            props = props.concat(flattenProperties(prop.contents));
+        }
+        else {
+            props.push(prop);
+        }
+    }
+    return props;
+}
+// Filters text based on lower-case
+function filterMatches(filter, text) {
+    if (!filter) {
+        return true;
+    }
+    if (!text) {
+        return false;
+    }
+    if (text.match(new RegExp(lodash_1.default.escapeRegExp(filter), "i"))) {
+        return true;
+    }
+    return false;
+}

package/lib/MWaterAssetSystemsListComponent.d.ts

@@ -0,0 +1,17 @@
+import { Schema } from "@mwater/expressions";
+import React from "react";
+/** Searchable list of asset system tables */
+export declare const MWaterAssetSystemsListComponent: (props: {
+    apiUrl: string;
+    schema: Schema;
+    client?: string | undefined;
+    /** User id */
+    user?: string | undefined;
+    /** Called with table selected */
+    onChange: (tableId: string | null) => void;
+    extraTables: string[];
+    onExtraTableAdd: (tableId: string) => void;
+    onExtraTableRemove: (tableId: string) => void;
+    /** e.g. "en" */
+    locale?: string | undefined;
+}) => React.JSX.Element;

package/lib/MWaterAssetSystemsListComponent.js

@@ -0,0 +1,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MWaterAssetSystemsListComponent = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const expressions_1 = require("@mwater/expressions");
+const react_1 = require("react");
+const react_2 = __importDefault(require("react"));
+const UIComponents_1 = require("./UIComponents");
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+/** Searchable list of asset system tables */
+const MWaterAssetSystemsListComponent = (props) => {
+    const [systems, setSystems] = (0, react_1.useState)();
+    const [search, setSearch] = (0, react_1.useState)("");
+    const [extraTableNeeded, setExtraTableNeeded] = (0, react_1.useState)();
+    // Get list of all systems
+    (0, react_1.useEffect)(() => {
+        fetch(`${props.apiUrl}asset_systems?client=${props.client || ""}`)
+            .then((response) => response.json())
+            .then((body) => {
+            // Put included ones first
+            setSystems(lodash_1.default.sortByAll(body, [
+                (m) => (props.extraTables.some(t => t == `assets:${m.sid}`)) ? 0 : 1,
+                (m) => expressions_1.ExprUtils.localizeString(m.design.name, props.locale)
+            ]));
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (extraTableNeeded && props.schema.getTable(extraTableNeeded)) {
+            props.onChange(extraTableNeeded);
+        }
+    });
+    const selectTable = (system) => {
+        const qualifiedTableId = `assets:${system.sid}`;
+        // If already included, select it
+        if (props.schema.getTable(qualifiedTableId)) {
+            props.onChange(qualifiedTableId);
+            return;
+        }
+        // Request extra tables as wildcard
+        setExtraTableNeeded(qualifiedTableId);
+        props.onExtraTableAdd(qualifiedTableId);
+    };
+    const handleRemove = (system) => {
+        // Remove from extra tables
+        const match = props.extraTables.find((t) => t == `assets:${system.sid}`);
+        if (match) {
+            if (confirm("Remove this table? Some widgets may not work correctly.")) {
+                props.onChange(null);
+                props.onExtraTableRemove(match);
+            }
+        }
+    };
+    if (!systems || extraTableNeeded) {
+        return (react_2.default.createElement("div", null,
+            react_2.default.createElement("i", { className: "fa fa-spin fa-spinner" }),
+            " Loading..."));
+    }
+    const renderAssetSystems = () => {
+        const items = systems
+            .map((m) => {
+            const alreadyIncluded = props.extraTables.some((t) => t == `systems:${m.sid}`);
+            return {
+                name: expressions_1.ExprUtils.localizeString(m.design.name, props.locale) || "",
+                onClick: () => selectTable(m),
+                onRemove: alreadyIncluded ? handleRemove.bind(null, m) : undefined
+            };
+        })
+            .filter((item) => !search || !item.name.toLowerCase().includes(search.toLowerCase()));
+        return react_2.default.createElement(UIComponents_1.OptionListComponent, { items: items });
+    };
+    return (react_2.default.createElement("div", null,
+        react_2.default.createElement(bootstrap_1.TextInput, { value: search, onChange: setSearch, placeholder: "Search..." }),
+        renderAssetSystems()));
+};
+exports.MWaterAssetSystemsListComponent = MWaterAssetSystemsListComponent;

package/lib/MWaterCompleteTableSelectComponent.d.ts

@@ -0,0 +1,224 @@
+/// <reference types="jquery" />
+import PropTypes from "prop-types";
+import React from "react";
+import * as uiComponents from "./UIComponents";
+import { Schema } from "@mwater/expressions";
+interface MWaterCompleteTableSelectComponentProps {
+    /** Url to hit api */
+    apiUrl: string;
+    /** Optional client */
+    client?: string;
+    schema: Schema;
+    /** User id */
+    user?: string;
+    table?: string;
+    /** Called with table selected */
+    onChange: any;
+    extraTables: any;
+    onExtraTablesChange: any;
+}
+export default class MWaterCompleteTableSelectComponent extends React.Component<MWaterCompleteTableSelectComponentProps, {
+    showLegacyAssets: boolean;
+}> {
+    static contextTypes: {
+        locale: PropTypes.Requireable<string>;
+    };
+    constructor(props: MWaterCompleteTableSelectComponentProps);
+    handleExtraTableAdd: (tableId: any) => any;
+    handleExtraTableRemove: (tableId: any) => any;
+    renderSites(): React.CElement<{
+        items: {
+            name: string;
+            desc?: string | undefined;
+            onClick: () => void;
+            onRemove?: (() => void) | undefined;
+        }[];
+        hint?: string | undefined;
+    }, uiComponents.OptionListComponent>;
+    renderForms(): React.CElement<any, FormsListComponent>;
+    renderIndicators(): React.CElement<any, IndicatorsListComponent>;
+    renderIssues(): React.CElement<any, IssuesListComponent>;
+    renderSweetSense(): React.CElement<{
+        items: {
+            name: string;
+            desc?: string | undefined;
+            onClick: () => void;
+            onRemove?: (() => void) | undefined;
+        }[];
+        hint?: string | undefined;
+    }, uiComponents.OptionListComponent>;
+    renderTablesets(): React.FunctionComponentElement<{
+        apiUrl: string;
+        schema: Schema;
+        client?: string | undefined;
+        user?: string | undefined;
+        onChange: (tableId: string | null) => void;
+        extraTables: string[];
+        onExtraTableAdd: (tableId: string) => void;
+        onExtraTableRemove: (tableId: string) => void;
+        locale?: string | undefined;
+    }>;
+    renderMetrics(): React.FunctionComponentElement<{
+        apiUrl: string;
+        schema: Schema;
+        client?: string | undefined;
+        user?: string | undefined;
+        onChange: (tableId: string | null) => void;
+        extraTables: string[];
+        onExtraTableAdd: (tableId: string) => void;
+        onExtraTableRemove: (tableId: string) => void;
+        locale?: string | undefined;
+    }>;
+    renderAssets(): React.JSX.Element;
+    renderLegacyAssets(): React.FunctionComponentElement<{
+        apiUrl: string;
+        schema: Schema;
+        client?: string | undefined;
+        user?: string | undefined;
+        onChange: (tableId: string | null) => void;
+        extraTables: string[];
+        onExtraTableAdd: (tableId: string) => void;
+        onExtraTableRemove: (tableId: string) => void;
+        locale?: string | undefined;
+    }>;
+    renderOther(): React.CElement<{
+        items: {
+            name: string;
+            desc?: string | undefined;
+            onClick: () => void;
+            onRemove?: (() => void) | undefined;
+        }[];
+        hint?: string | undefined;
+    }, uiComponents.OptionListComponent>;
+    getSweetSenseTables(): import("@mwater/expressions").Table[];
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}
+interface FormsListComponentProps {
+    /** Url to hit api */
+    apiUrl: string;
+    /** Optional client */
+    client?: string;
+    schema: Schema;
+    /** User id */
+    user?: string;
+    /** Called with table selected */
+    onChange: any;
+    extraTables: any;
+    onExtraTableAdd: any;
+    onExtraTableRemove: any;
+}
+interface FormsListComponentState {
+    error?: any;
+    search: any;
+    forms: {
+        id: string;
+        name: string;
+        desc?: string;
+    }[] | null;
+}
+declare class FormsListComponent extends React.Component<FormsListComponentProps, FormsListComponentState> {
+    static contextTypes: {
+        locale: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    componentDidMount(): void;
+    handleTableRemove: (table: any) => any;
+    searchRef: (comp: any) => any;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+}
+interface IndicatorsListComponentProps {
+    /** Url to hit api */
+    apiUrl: string;
+    /** Optional client */
+    client?: string;
+    schema: Schema;
+    /** User id */
+    user?: string;
+    /** Called with table selected */
+    onChange: any;
+    extraTables: any;
+    onExtraTableAdd: any;
+    onExtraTableRemove: any;
+}
+interface IndicatorsListComponentState {
+    error?: any;
+    search: any;
+    indicators: any[] | null;
+}
+declare class IndicatorsListComponent extends React.Component<IndicatorsListComponentProps, IndicatorsListComponentState> {
+    static contextTypes: {
+        locale: PropTypes.Requireable<string>;
+    };
+    addIndicatorConfirmPopup: AddIndicatorConfirmPopupComponent | null;
+    constructor(props: any);
+    componentDidMount(): JQuery.jqXHR<any>;
+    handleTableRemove: (table: any) => any;
+    searchRef: (comp: any) => any;
+    handleSelect: (tableId: any) => void;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+}
+interface AddIndicatorConfirmPopupComponentProps {
+    schema: Schema;
+    /** Called with table selected */
+    onChange: any;
+    onExtraTableAdd: any;
+}
+interface AddIndicatorConfirmPopupComponentState {
+    indicatorTable: any;
+    visible: any;
+}
+declare class AddIndicatorConfirmPopupComponent extends React.Component<AddIndicatorConfirmPopupComponentProps, AddIndicatorConfirmPopupComponentState> {
+    static contextTypes: {
+        locale: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    show(indicatorTable: any): void;
+    renderContents(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+    render(): React.CElement<{
+        showCloseX: boolean;
+        onClose: () => void;
+        header: string;
+    }, React.Component<{
+        showCloseX: boolean;
+        onClose: () => void;
+        header: string;
+    }, any, any>> | null;
+}
+interface IssuesListComponentProps {
+    /** Url to hit api */
+    apiUrl: string;
+    /** Optional client */
+    client?: string;
+    schema: Schema;
+    /** User id */
+    user?: string;
+    /** Called with table selected */
+    onChange: any;
+    extraTables: any;
+    onExtraTableAdd: any;
+    onExtraTableRemove: any;
+}
+interface IssuesListComponentState {
+    error?: any;
+    search: any;
+    issueTypes: any[] | null;
+}
+declare class IssuesListComponent extends React.Component<IssuesListComponentProps, IssuesListComponentState> {
+    static contextTypes: {
+        locale: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    componentDidMount(): JQuery.jqXHR<any>;
+    handleTableRemove: (table: any) => any;
+    searchRef: (comp: any) => any;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+}
+export {};