@mwater/visualization 5.5.0 → 5.6.0

package/lib/MWaterContextComponent.d.ts

@@ -8,7 +8,7 @@ export interface GlobalFiltersElementFactoryProps {
     dataSource: DataSource;
     filterableTables: string[];
     globalFilters?: GlobalFilter[];
-    onChange: (globalFilters: GlobalFilter[]) => void;
+    onChange?: (globalFilters: GlobalFilter[]) => void;
     /** If true, return null element if not applicable to filterableTables */
     nullIfIrrelevant?: boolean;
 }

package/lib/MWaterGlobalFiltersComponent.d.ts

@@ -8,10 +8,10 @@ export interface MWaterGlobalFiltersComponentProps {
     dataSource: DataSource;
     filterableTables: string[];
     globalFilters?: GlobalFilter[];
-    onChange: (globalFilters: GlobalFilter[]) => void;
+    onChange?: (globalFilters: GlobalFilter[]) => void;
 }
 export default class MWaterGlobalFiltersComponent extends React.Component<MWaterGlobalFiltersComponentProps> {
     handleRegionsChange: (regions: any) => void;
     handleManagedByChange: (managedBy: any) => void;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    render(): React.JSX.Element;
 }

package/lib/MWaterGlobalFiltersComponent.js

@@ -28,12 +28,14 @@ var __importDefault = (this && this.__importDefault) || function (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 ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
 // Control to edit the global filters (_managed_by and admin_region)
 class MWaterGlobalFiltersComponent extends react_1.default.Component {
     handleRegionsChange = (regions) => {
+        if (!this.props.onChange) {
+            return;
+        }
         // Remove existing filter
         const globalFilters = lodash_1.default.filter(this.props.globalFilters || [], (gf) => !(gf.op === "within any" && gf.columnId === "admin_region"));
         // Add new filter if present
@@ -48,6 +50,9 @@ class MWaterGlobalFiltersComponent extends react_1.default.Component {
         this.props.onChange(globalFilters);
     };
     handleManagedByChange = (managedBy) => {
+        if (!this.props.onChange) {
+            return;
+        }
         // Remove existing filter
         const globalFilters = lodash_1.default.filter(this.props.globalFilters || [], (gf) => !(gf.op === "within" && gf.columnId === "_managed_by"));
         // Add new filter if present
@@ -79,25 +84,11 @@ class MWaterGlobalFiltersComponent extends react_1.default.Component {
         else {
             adminRegions = null;
         }
-        return R("div", null, R(ui.FormGroup, { label: T `Only sites managed by`, labelMuted: true }, R(expressions_ui_1.IdLiteralComponent, {
-            value: managedBy,
-            onChange: this.handleManagedByChange,
-            idTable: "groups",
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            placeholder: T `All Organizations`,
-            multi: false,
-            filter: { type: "field", tableAlias: "main", column: "canManageEntities" }
-        })), R(ui.FormGroup, { label: T `Only sites located in`, labelMuted: true }, R(expressions_ui_1.IdLiteralComponent, {
-            value: adminRegions,
-            onChange: this.handleRegionsChange,
-            idTable: "admin_regions",
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            placeholder: T `All Regions`,
-            multi: true,
-            orderBy: [{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }]
-        })));
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(ui.FormGroup, { label: T `Only sites managed by`, labelMuted: true },
+                react_1.default.createElement(expressions_ui_1.IdLiteralComponent, { value: managedBy, onChange: this.props.onChange ? this.handleManagedByChange : undefined, idTable: "groups", schema: this.props.schema, dataSource: this.props.dataSource, placeholder: T `All Organizations`, multi: false, filter: { type: "field", tableAlias: "main", column: "canManageEntities" } })),
+            react_1.default.createElement(ui.FormGroup, { label: T `Only sites located in`, labelMuted: true },
+                react_1.default.createElement(expressions_ui_1.IdLiteralComponent, { value: adminRegions, onChange: this.props.onChange ? this.handleRegionsChange : undefined, idTable: "admin_regions", schema: this.props.schema, dataSource: this.props.dataSource, placeholder: T `All Regions`, multi: true, orderBy: [{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }] }))));
     }
 }
 exports.default = MWaterGlobalFiltersComponent;

package/lib/MWaterLoaderComponent.d.ts

@@ -1,8 +1,7 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, ReactNode } from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent";
-import LoadingComponent from "@mwater/react-library/lib/LoadingComponent";
-import MWaterContextComponent, { AddLayerElementFactory } from "./MWaterContextComponent";
+import { AddLayerElementFactory } from "./MWaterContextComponent";
 export interface MWaterLoaderComponentProps {
     apiUrl: string;
     client?: string;
@@ -24,7 +23,7 @@ export interface MWaterLoaderComponentProps {
         dataSource: DataSource;
     }) => ReactElement<any> | null;
     /** Custom error formatter that returns React node or string, gets passed the error response from server */
-    errorFormatter?: (data: any, defaultError: string) => string;
+    errorFormatter?: (data: any, defaultError: ReactNode) => ReactNode;
     /** Origin of usage. e.g. "dashboards:43445364..." */
     origin?: string;
 }
@@ -43,13 +42,5 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<MWaterLoad
     constructor(props: MWaterLoaderComponentProps);
     isLoadNeeded(newProps: MWaterLoaderComponentProps, oldProps: MWaterLoaderComponentProps): boolean;
     load(props: MWaterLoaderComponentProps, prevProps: MWaterLoaderComponentProps, callback: any): void;
-    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.CElement<import("@mwater/react-library/lib/LoadingComponent").LoadingComponentProps, LoadingComponent> | React.CElement<{
-        apiUrl: string;
-        client?: string;
-        user?: string;
-        schema: Schema;
-        extraTables?: string[];
-        onExtraTablesChange?: (extraTables: string[]) => void;
-        addLayerElementFactory?: AddLayerElementFactory;
-    }, MWaterContextComponent> | null;
+    render(): React.JSX.Element | null;
 }

package/lib/MWaterLoaderComponent.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (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 AsyncLoadComponent_1 = __importDefault(require("@mwater/react-library/lib/AsyncLoadComponent"));
 const LoadingComponent_1 = __importDefault(require("@mwater/react-library/lib/LoadingComponent"));
 const mWaterLoader_1 = __importDefault(require("./mWaterLoader"));
@@ -69,18 +68,10 @@ class MWaterLoaderComponent extends AsyncLoadComponent_1.default {
             return this.props.children(this.state.error);
         }
         // Inject context
-        return R(MWaterContextComponent_1.default, {
-            apiUrl: this.props.apiUrl,
-            client: this.props.client,
-            user: this.props.user,
-            schema: this.state.schema,
-            extraTables: this.props.extraTables,
-            onExtraTablesChange: this.props.onExtraTablesChange,
-            addLayerElementFactory: this.props.addLayerElementFactory
-        }, this.props.children(this.state.error, {
+        return (react_1.default.createElement(MWaterContextComponent_1.default, { apiUrl: this.props.apiUrl, client: this.props.client, user: this.props.user, schema: this.state.schema, extraTables: this.props.extraTables, onExtraTablesChange: this.props.onExtraTablesChange, addLayerElementFactory: this.props.addLayerElementFactory }, this.props.children(this.state.error, {
             schema: this.state.schema,
             dataSource: this.state.dataSource
-        }));
+        })));
     }
 }
 exports.default = MWaterLoaderComponent;

package/lib/UndoStack.d.ts

@@ -1,7 +1,8 @@
 export default class UndoStack {
     undoStack: any[];
     redoStack: any[];
-    constructor(undoStack?: any, redoStack?: any);
+    maxDepth?: number;
+    constructor(undoStack?: any, redoStack?: any, maxDepth?: number);
     push(value: any): UndoStack;
     canUndo(): boolean;
     canRedo(): boolean;

package/lib/UndoStack.js

@@ -8,20 +8,26 @@ const lodash_1 = __importDefault(require("lodash"));
 class UndoStack {
     undoStack;
     redoStack;
-    constructor(undoStack, redoStack) {
+    maxDepth;
+    constructor(undoStack, redoStack, maxDepth) {
         this.undoStack = undoStack || [];
         this.redoStack = redoStack || [];
+        this.maxDepth = maxDepth;
     }
     // Add a value to the stack
     push(value) {
         // No trivial pushes
-        if (lodash_1.default.isEqual(this.getValue(), value)) {
+        if (JSON.stringify(this.getValue()) === JSON.stringify(value)) {
             return this;
         }
-        const undoStack = this.undoStack.slice();
+        let undoStack = this.undoStack.slice();
         undoStack.push(value);
+        // Limit stack depth if maxDepth is set
+        if (this.maxDepth && undoStack.length > this.maxDepth) {
+            undoStack = undoStack.slice(undoStack.length - this.maxDepth);
+        }
         const redoStack = [];
-        return new UndoStack(undoStack, redoStack);
+        return new UndoStack(undoStack, redoStack, this.maxDepth);
     }
     canUndo() {
         return this.undoStack.length > 1;
@@ -34,14 +40,14 @@ class UndoStack {
         const redoStack = this.redoStack.slice();
         redoStack.push(lodash_1.default.last(this.undoStack));
         const undoStack = lodash_1.default.initial(this.undoStack);
-        return new UndoStack(undoStack, redoStack);
+        return new UndoStack(undoStack, redoStack, this.maxDepth);
     }
     redo() {
         // Put last redo on to undoStack
         const undoStack = this.undoStack.slice();
         undoStack.push(lodash_1.default.last(this.redoStack));
         const redoStack = lodash_1.default.initial(this.redoStack);
-        return new UndoStack(undoStack, redoStack);
+        return new UndoStack(undoStack, redoStack, this.maxDepth);
     }
     // Get the current value
     getValue() {

package/lib/dashboards/DashboardComponent.js

@@ -202,25 +202,25 @@ class DashboardComponent extends react_1.default.Component {
                 : undefined,
             react_1.default.createElement("a", { key: "print", className: "btn btn-link btn-sm", onClick: this.handlePrint },
                 react_1.default.createElement("span", { className: "fas fa-print" }),
-                react_1.default.createElement("span", { className: "hide-600px" },
+                react_1.default.createElement("span", { className: "hide-800px" },
                     " ",
                     T `Print`)),
             react_1.default.createElement("a", { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData },
                 react_1.default.createElement("span", { className: "fas fa-sync" }),
-                react_1.default.createElement("span", { className: "hide-600px" },
+                react_1.default.createElement("span", { className: "hide-800px" },
                     " ",
                     T `Refresh`)),
             this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
                 ? react_1.default.createElement("a", { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters },
                     react_1.default.createElement("span", { className: "fa fa-filter" }),
-                    react_1.default.createElement("span", { className: "hide-600px" },
+                    react_1.default.createElement("span", { className: "hide-800px" },
                         " ",
                         T `Show Quickfilters`))
                 : undefined,
             this.state.editing
                 ? react_1.default.createElement("a", { key: "settings", className: "btn btn-link btn-sm", onClick: this.handleSettings },
                     react_1.default.createElement("span", { className: "fas fa-cog" }),
-                    react_1.default.createElement("span", { className: "hide-600px" },
+                    react_1.default.createElement("span", { className: "hide-800px" },
                         " ",
                         T `Settings`))
                 : undefined,
@@ -271,6 +271,7 @@ class DashboardComponent extends react_1.default.Component {
                 react_1.default.createElement("div", { style: {
                         display: "grid",
                         gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
+                        gridTemplateColumns: "minmax(0, 1fr)",
                         height: "100%"
                     } },
                     !this.props.hideTitleBar ? this.renderTitleBar() : undefined,

package/lib/dashboards/DashboardDesign.d.ts

@@ -34,6 +34,6 @@ export interface DashboardDesign {
     };
     /** true to enable implicit filtering (see ImplicitFilterBuilder). Defaults to true for older dashboards. */
     implicitFiltersEnabled?: boolean;
-    /** array of global filters. See below. */
+    /** Array of global filters */
     globalFilters?: GlobalFilter[];
 }

package/lib/dashboards/ServerDashboardDataSource.js

@@ -298,22 +298,12 @@ class ServerWidgetLayerDataSource {
             query.cacheExpiry = cacheExpiry;
         }
         let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?` + querystring_1.default.stringify(query);
-        // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-        // Used to speed queries
-        if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-            url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/");
-        }
         return url;
     }
     // Create query string
     createLegacyUrl(design, extension, filters) {
         let where;
         let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?type=${design.type}&radius=1000`;
-        // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-        // Used to speed queries
-        if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-            url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/");
-        }
         if (this.options.client) {
             url += `&client=${this.options.client}`;
         }

package/lib/dashboards/SettingsModalComponent.js

@@ -149,7 +149,7 @@ function LanguageTab({ design, onDesignChange, schema }) {
         for (const locale of design.otherLocales || []) {
             const translatedCount = translatableStrings.filter(str => design.translations?.[locale]?.[str] != null).length;
             // Round down to nearest percent
-            percentages[locale] = Math.floor((translatedCount / totalStrings) * 100);
+            percentages[locale] = (totalStrings > 0) ? Math.floor((translatedCount / totalStrings) * 100) : 0;
         }
         return percentages;
     }, [design.translations, design.otherLocales, translatableStrings]);

package/lib/datagrids/DatagridComponent.js

@@ -342,8 +342,28 @@ exports.default = (0, react_1.forwardRef)(function DatagridComponent(props, ref)
                     return (react_1.default.createElement(DatagridViewComponent_1.default, { ref: datagridViewRef, width: size.width - 1, height: size.height - 1, pageSize: 100, schema: schema, dataSource: dataSource, datagridDataSource: datagridDataSource, design: cleanedDesign, filters: activeFilters, onDesignChange: onDesignChange, onRowClick: onRowClick, onRowDoubleClick: onRowDoubleClick, selectedRows: dataEditingEnabled && props.onRowsDelete != null ? selectedRows : undefined, onSelectedRowsChange: dataEditingEnabled && props.onRowsDelete != null ? setSelectedRows : undefined, canEditExpr: dataEditingEnabled ? canEditExpr : undefined, updateExprValues: dataEditingEnabled ? updateExprValues : undefined, refreshKey: refreshKey }));
                 }
                 else if (onDesignChange) {
-                    return (react_1.default.createElement("div", { style: { textAlign: "center", marginTop: size.height / 2 } },
-                        react_1.default.createElement("a", { className: "btn btn-link", onClick: handleEdit }, T `Click Here to Configure`)));
+                    return (react_1.default.createElement("div", { style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            height: "100%",
+                            padding: "40px"
+                        } },
+                        react_1.default.createElement("div", { style: {
+                                textAlign: "center",
+                                marginBottom: "24px"
+                            } },
+                            react_1.default.createElement("i", { className: "fas fa-table text-muted", style: {
+                                    fontSize: "48px",
+                                    marginBottom: "16px"
+                                } }),
+                            react_1.default.createElement("div", { style: {
+                                    fontSize: "14px"
+                                }, className: "text-muted" }, T `Configure a data source and columns to get started.`)),
+                        react_1.default.createElement("button", { className: "btn btn-primary", onClick: handleEdit },
+                            react_1.default.createElement("i", { className: "fas fa-cog", style: { marginRight: "8px" } }),
+                            T `Configure`)));
                 }
                 else {
                     return null;

package/lib/datagrids/DatagridDesignerComponent.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
-import TabbedComponent from "@mwater/react-library/lib/TabbedComponent";
 import { DatagridDesign } from "..";
 export interface DatagridDesignerComponentProps {
     /** schema to use */
@@ -18,6 +17,6 @@ export default class DatagridDesignerComponent extends React.Component<DatagridD
     handleFilterChange: (filter: any) => void;
     handleGlobalFiltersChange: (globalFilters: any) => void;
     handleOrderBysChange: (orderBys: any) => void;
-    renderTabs(): React.CElement<any, TabbedComponent>;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderTabs(): React.JSX.Element;
+    render(): React.JSX.Element;
 }