@mwater/visualization 5.2.0 → 5.3.1

package/lib/datagrids/ServerDatagridDataSource.js

@@ -3,9 +3,8 @@ 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 compressJson_1 = __importDefault(require("../compressJson"));
+const querystring_1 = __importDefault(require("querystring"));
 /** Uses mWater server to get datagrid data to allow sharing with unprivileged users */
 class ServerDatagridDataSource {
     options;
@@ -21,37 +20,75 @@ class ServerDatagridDataSource {
     // 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) {
+    async 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));
-        });
+        const filtersJson = JSON.stringify(filters);
+        const baseUrl = this.options.apiUrl + `datagrids/${this.options.datagridId}/data`;
+        try {
+            let response;
+            // If the filters are too large, we need to send them in the body
+            if (filtersJson.length > 5000) {
+                response = await fetch(baseUrl + '?' + querystring_1.default.stringify(query), {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ filters: (0, compressJson_1.default)(filters) }),
+                });
+            }
+            else {
+                query.filters = (0, compressJson_1.default)(filters);
+                const url = baseUrl + '?' + querystring_1.default.stringify(query);
+                response = await fetch(url);
+            }
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            callback(null, data);
+        }
+        catch (error) {
+            console.error(error);
+            callback(error);
+        }
     }
-    countRows(design, filters, callback) {
+    async countRows(design, filters, callback) {
         const query = {
             client: this.options.client,
             share: this.options.share,
-            filters: (0, compressJson_1.default)(filters),
-            rev: this.options.rev,
+            rev: this.options.rev
         };
-        const url = this.options.apiUrl + `datagrids/${this.options.datagridId}/summary?` + querystring_1.default.stringify(query);
-        return jquery_1.default.getJSON(url, (data) => {
-            return callback(null, data?.[0]?.cnt);
-        }).fail((xhr) => {
-            console.log(xhr.responseText);
-            return callback(new Error(xhr.responseText));
-        });
+        const filtersJson = JSON.stringify(filters);
+        const baseUrl = this.options.apiUrl + `datagrids/${this.options.datagridId}/summary`;
+        try {
+            let response;
+            // If the filters are too large, we need to send them in the body
+            if (filtersJson.length > 5000) {
+                response = await fetch(baseUrl + '?' + querystring_1.default.stringify(query), {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ filters: (0, compressJson_1.default)(filters) }),
+                });
+            }
+            else {
+                query.filters = (0, compressJson_1.default)(filters);
+                const url = baseUrl + '?' + querystring_1.default.stringify(query);
+                response = await fetch(url);
+            }
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            callback(null, data?.[0]?.cnt);
+        }
+        catch (error) {
+            console.error(error);
+            callback(error);
+        }
     }
     getQuickfiltersDataSource() {
         return new ServerQuickfilterDataSource(this.options);
@@ -70,23 +107,40 @@ class ServerQuickfilterDataSource {
         this.options = options;
     }
     // Gets the values of the quickfilter at index
-    getValues(index, expr, filters, offset, limit, callback) {
+    async getValues(index, expr, filters, offset, limit, callback) {
         const query = {
             client: this.options.client,
             share: this.options.share,
-            filters: (0, compressJson_1.default)(filters),
-            offset,
+            offset: offset ?? 0,
             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));
-        });
+        try {
+            let response;
+            const url = this.options.apiUrl + `datagrids/${this.options.datagridId}/quickfilters/${index}/values`;
+            const filtersJson = JSON.stringify(filters);
+            // If the filters are too large, we need to send them in the body
+            if (filtersJson.length > 5000) {
+                query.filters = (0, compressJson_1.default)(filters);
+                response = await fetch(url + '?' + querystring_1.default.stringify(query), {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ filters: (0, compressJson_1.default)(filters) }),
+                });
+            }
+            else {
+                query.filters = filtersJson;
+                response = await fetch(url + '?' + querystring_1.default.stringify(query));
+            }
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            callback(null, data);
+        }
+        catch (error) {
+            console.error(error);
+            callback(error);
+        }
     }
 }

package/lib/demo.js

@@ -53,14 +53,14 @@ global.T = ez_localize_1.defaultT;
 // Set demo key
 (0, vectorMaps_1.setMapTilerApiKey)("cNNyJl2nwIIKEUYSeXYc");
 (0, jquery_1.default)(function () {
-    const sample = R(react_dnd_1.DragDropContextProvider, { backend: react_dnd_html5_backend_1.default }, R("div", { className: "container-fluid", style: { height: "100%", paddingLeft: 0, paddingRight: 0 } }, R("style", null, "html, body, #main { height: 100% }"), R(MWaterDirectMapPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
+    const sample = R(react_dnd_1.DragDropContextProvider, { backend: react_dnd_html5_backend_1.default }, R("div", { className: "container-fluid", style: { height: "100%", paddingLeft: 0, paddingRight: 0 } }, R("style", null, "html, body, #main { height: 100% }"), R(MWaterDirectDashboardPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
+    //R(MWaterDashboardPane, {apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1), dashboardId: "38d803820a7a4bf5a1d5ef19cf8c64f3"})
+    // R(MWaterDirectMapPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
     // R(RichTextPane)
     // R(MWaterMapPane, {apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1)})
     // R(TestPane, apiUrl: "https://api.mwater.co/v3/")
     // R(MWaterDashboardPane, apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1), dashboardId: "a855eb0587d845d3ac27aed03c463976", share: "817c76088c7649ec8cc0b8193e547a09")
     // R(MWaterDashboardPane, {apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1), dashboardId: "f99f206ddd4442a981761b8342c58058"})
-    // R(MWaterDashboardPane, {apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1), dashboardId: "38d803820a7a4bf5a1d5ef19cf8c64f3"})
-    // R(MWaterDirectDashboardPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
     //R(MWaterDirectDashboardPane, { apiUrl: "http://localhost:1234/v3/", client: window.location.hash.substr(1) })
     //R(MWaterDatagridPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
     // R(MWaterDirectMapPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })

package/lib/index.css

@@ -1,3 +1,8 @@
+/*
+Lato, Lora, Inter, Merriweather, Roboto
+*/
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400..700;1,400..700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
 /** Plain link with cursor pointer. Can be span or a */
 .link-plain {
   color: var(--bs-primary);

package/lib/index.d.ts

@@ -20,6 +20,7 @@ export { languages } from "./languages";
 export { default as MWaterLoaderComponent } from "./MWaterLoaderComponent";
 export { default as MWaterContextComponent } from "./MWaterContextComponent";
 export { default as mWaterLoader } from "./mWaterLoader";
+export { WidgetDataSource } from "./widgets/WidgetDataSource";
 export { default as DirectWidgetDataSource } from "./widgets/DirectWidgetDataSource";
 import "leaflet/dist/leaflet.css";
 import "fixed-data-table-2/dist/fixed-data-table.min.css";
@@ -28,7 +29,6 @@ import "./layouts/decorated-block.css";
 import "react-datepicker/dist/react-datepicker.css";
 import "billboard.js/dist/billboard.css";
 import "./index.css";
-import "./layout-styles.css";
 export { setMapTilerApiKey } from "./maps/vectorMaps";
 export { default as UndoStack } from "./UndoStack";
 export { default as DashboardViewComponent } from "./dashboards/DashboardViewComponent";

package/lib/index.js

@@ -63,7 +63,6 @@ require("./layouts/decorated-block.css");
 require("react-datepicker/dist/react-datepicker.css");
 require("billboard.js/dist/billboard.css");
 require("./index.css");
-require("./layout-styles.css");
 var vectorMaps_1 = require("./maps/vectorMaps");
 Object.defineProperty(exports, "setMapTilerApiKey", { enumerable: true, get: function () { return vectorMaps_1.setMapTilerApiKey; } });
 var UndoStack_1 = require("./UndoStack");

package/lib/layouts/LayoutManager.d.ts

@@ -1,37 +1,41 @@
 import { ReactElement, ReactNode } from "react";
 import { BlocksLayoutOptions } from "../dashboards/layoutOptions";
+/** Options for rendering a widget */
+export interface RenderWidgetOptions {
+    id: string;
+    type: string;
+    design: any;
+    onDesignChange?: (design: any) => void;
+    width: number;
+    /** height of widget. If not specified, is auto height */
+    height?: number;
+    /** Priority of widget. Higher priority widgets are rendered first */
+    priority?: number;
+}
+export interface RenderLayoutOptions {
+    /** width of layout */
+    width?: number;
+    /** opaque items object that layout manager understands */
+    items: any;
+    /** Called when items changes */
+    onItemsChange?: (items: any) => void;
+    /** called with ({ id:, type:, design:, onDesignChange:, width:, height:  }) */
+    renderWidget: (options: RenderWidgetOptions) => ReactElement;
+    /** layout options to use */
+    layoutOptions: BlocksLayoutOptions;
+    /** true to disable maps */
+    disableMaps?: boolean;
+    /** clipboard contents */
+    clipboard?: any;
+    /** called when clipboard is changed */
+    onClipboardChange?: (clipboard: any) => void;
+    /** message to display if clipboard can't be pasted into current dashboard */
+    cantPasteMessage?: string;
+}
 /** Responsible for laying out items, rendering widgets and holding them in a data structure that is layout manager specific */
 export default class LayoutManager {
     /** Renders the layout as a react element */
-    renderLayout(options: {
-        /** width of layout */
-        width?: number;
-        /** opaque items object that layout manager understands */
-        items: any;
-        /** Called when items changes */
-        onItemsChange?: (items: any) => void;
-        /** called with ({ id:, type:, design:, onDesignChange:, width:, height:  }) */
-        renderWidget: (options: {
-            id: string;
-            type: string;
-            design: any;
-            onDesignChange: (design: any) => void;
-            width: number;
-            height: number;
-        }) => ReactElement;
-        /** style to use for layout. null for default */
-        style: string | null;
-        /** layout options to use */
-        layoutOptions: BlocksLayoutOptions | null;
-        /** true to disable maps */
-        disableMaps?: boolean;
-        /** clipboard contents */
-        clipboard: any;
-        /** called when clipboard is changed */
-        onClipboardChange: (clipboard: any) => void;
-        /** message to display if clipboard can't be pasted into current dashboard */
-        cantPasteMessage: string;
-    }): ReactNode;
+    renderLayout(options: RenderLayoutOptions): ReactNode;
     /** Tests if dashboard has any items */
     isEmpty(items: any): boolean;
     /** Gets { type, design } of a widget */

package/lib/layouts/LayoutManager.js

@@ -19,17 +19,11 @@ class LayoutManager {
         return [];
     }
     static createLayoutManager(type) {
-        // Default is old grid type
-        type = type || "grid";
+        type = type || "blocks";
         switch (type) {
-            case "grid": // Old one
-                var GridLayoutManager = require("./grid/GridLayoutManager").default;
-                return new GridLayoutManager();
-                break;
-            case "blocks": // New one
+            case "blocks":
                 var BlocksLayoutManager = require("./blocks/BlocksLayoutManager").default;
                 return new BlocksLayoutManager();
-                break;
             default:
                 throw new Error(`Unknown layout manager type ${type}`);
         }

package/lib/layouts/blocks/BlocksDisplayComponent.d.ts

@@ -1,76 +1,45 @@
-import React from "react";
-import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent";
-import HorizontalBlockComponent from "./HorizontalBlockComponent";
+import React, { ReactElement } from "react";
+import { DashboardTheme } from "../../dashboards/layoutOptions";
 import { LayoutBlock } from "./blockUtils";
+import { RenderWidgetOptions } from "../LayoutManager";
 export interface BlocksDisplayComponentProps {
     items: LayoutBlock;
     onItemsChange?: (items: LayoutBlock) => void;
     /** Stylesheet to use. null for default */
-    style?: string;
+    style?: DashboardTheme;
     /** layout options to use */
     layoutOptions?: any;
     /** Renders a widget. Passed (options) */
-    renderWidget: any;
+    renderWidget: (options: RenderWidgetOptions) => ReactElement;
     /** True to prevent maps */
     disableMaps?: boolean;
-    /** Including onClipboardChange adds a clipboard palette item that can be used to copy and paste widgets */
+    /** clipboard contents */
     clipboard?: any;
-    onClipboardChange?: any;
+    /** Including onClipboardChange adds a clipboard palette item that can be used to copy and paste widgets */
+    onClipboardChange?: (clipboard: any) => void;
+    /** message to display if clipboard can't be pasted into current dashboard */
     cantPasteMessage?: string;
 }
+/**
+  Renders the complete layout of the blocks and also optionally a palette to the left
+  that can be used to drag new items into the layout. Palette is only displayed if onItemsChange is not null
+*/
 declare class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps> {
-    handleBlockDrop: (sourceBlock: any, targetBlock: any, side: "top" | "left" | "right" | "bottom") => void;
-    handleBlockRemove: (block: any) => void;
-    handleBlockUpdate: (block: any) => void;
-    renderBlock: (block: any, collapseColumns?: boolean) => React.CElement<RootBlockComponentProps, RootBlockComponent> | React.CElement<any, HorizontalBlockComponent> | React.DetailedReactHTMLElement<{
-        key: any;
-        className: string;
-    }, HTMLElement>;
+    handleBlockDrop: (sourceBlock: LayoutBlock, targetBlock: LayoutBlock, side: "top" | "left" | "right" | "bottom") => void;
+    handleBlockRemove: (block: LayoutBlock) => void;
+    handleBlockUpdate: (block: LayoutBlock) => void;
+    /**
+     * Render a single block (and its children)
+     * @param block Block to render
+     * @param collapseColumns True to collapse columns
+     * @param priority Priority of widget. Higher priority widgets are rendered first
+     * @returns
+     */
+    renderBlock: (block: LayoutBlock, collapseColumns: boolean, priority: number) => ReactElement;
     createBlockItem(block: any): () => {
         block: {};
     };
-    renderPalette(): React.DetailedReactHTMLElement<{
-        key: string;
-        style: {
-            width: number;
-            height: string;
-            position: "absolute";
-            top: number;
-            left: number;
-        };
-    }, HTMLElement>;
-    render(): React.CElement<import("@mwater/react-library/lib/AutoSizeComponent").AutoSizeComponentProps, AutoSizeComponent> | React.DetailedReactHTMLElement<{
-        style: {
-            width: string;
-            height: string;
-            overflow: "hidden";
-            position: "relative";
-        };
-    }, HTMLElement>;
+    renderPalette(): React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export default BlocksDisplayComponent;
-interface RootBlockComponentProps {
-    block: any;
-    collapseColumns?: boolean;
-    renderBlock: any;
-    /** Called with (sourceBlock, targetBlock, side) when block is dropped on it. side is top, left, bottom, right */
-    onBlockDrop?: any;
-    onBlockRemove?: any;
-}
-declare class RootBlockComponent extends React.Component<RootBlockComponentProps> {
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<{
-        block: any;
-        onBlockDrop: any;
-        style: {
-            height: string;
-        };
-        onlyBottom: boolean;
-    }, React.Component<{
-        block: any;
-        onBlockDrop: any;
-        style: {
-            height: string;
-        };
-        onlyBottom: boolean;
-    }, any, any>>;
-}