@mwater/visualization 5.0.0

package/lib/valueFormatter.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatValue = exports.getDefaultFormat = exports.getFormatOptions = exports.canFormatType = void 0;
+const d3_format_1 = require("d3-format");
+const utm_1 = require("utm");
+/** Determine if can format type */
+function canFormatType(type) {
+    return type == "number" || type == "geometry";
+}
+exports.canFormatType = canFormatType;
+/** Get available options for formatting a type. Null if not available */
+function getFormatOptions(type) {
+    if (type == "number") {
+        return [
+            { value: "", label: "Plain: 1234.567" },
+            { value: ",", label: "Normal: 1,234.567" },
+            { value: ",.0f", label: "Rounded: 1,234" },
+            { value: ",.2f", label: "Two decimals: 1,234.56" },
+            { value: "$,.2f", label: "Currency: $1,234.56" },
+            { value: "$,.0f", label: "Currency rounded: $1,234" },
+            { value: ".0%", label: "Percent rounded: 12%" },
+            { value: ".2%", label: "Percent decimal: 12.34%" }
+        ];
+    }
+    if (type == "geometry") {
+        return [
+            { value: "lat, lng", label: "Latitude, Longitude" },
+            { value: "UTM", label: "UTM" }
+        ];
+    }
+    return null;
+}
+exports.getFormatOptions = getFormatOptions;
+/** Get default format */
+function getDefaultFormat(type) {
+    if (type == "number") {
+        return ",";
+    }
+    if (type == "geometry") {
+        return "lat, lng";
+    }
+    throw new Error("Not supported");
+}
+exports.getDefaultFormat = getDefaultFormat;
+/** Format a value of a specified type as a string. For historical reasons,
+ * LayeredCharts multiply by 100 before adding the % sign. Set legacyPercentFormat to true to replicate
+ */
+function formatValue(type, value, format, locale, legacyPercentFormat) {
+    if (value == null) {
+        return "";
+    }
+    // Default
+    format = format != null ? format : getDefaultFormat(type);
+    // Use d3 format if number
+    if (type == "number") {
+        // Do not convert % (d3Format multiplies by 100 which is annoying)
+        if (format.match(/%/) && !legacyPercentFormat) {
+            value = value / 100.0;
+        }
+        return (0, d3_format_1.format)(format)(value);
+    }
+    if (type == "geometry") {
+        if (format == "UTM") {
+            if (value.type == "Point") {
+                const latitude = value.coordinates[1];
+                const longitude = value.coordinates[0];
+                if (latitude > 84 || latitude < -80) {
+                    return "latitude out of range";
+                }
+                if (longitude > 180 || longitude < -180) {
+                    return "longitude out of range";
+                }
+                const { easting, northing, zoneNum, zoneLetter } = (0, utm_1.fromLatLon)(latitude, longitude);
+                return `${zoneNum}${zoneLetter} ${easting.toFixed(0)} ${northing.toFixed(0)}`;
+            }
+            return value.type;
+        }
+        else {
+            // Display as lat/lng if Point, otherwise type
+            if (value.type == "Point") {
+                return `${value.coordinates[1].toFixed(6)}, ${value.coordinates[0].toFixed(6)}`;
+            }
+            else {
+                return value.type;
+            }
+        }
+    }
+    else {
+        // Should not happen
+        return value + "";
+    }
+}
+exports.formatValue = formatValue;

package/lib/widgets/DirectWidgetDataSource.d.ts

@@ -0,0 +1,43 @@
+import { DataSource, Schema } from "@mwater/expressions";
+import { JsonQLFilter } from "../JsonQLFilter";
+import { MapDataSource } from "../maps/MapDataSource";
+import { MapDesign } from "../maps/MapDesign";
+import Widget from "./Widget";
+import { WidgetDataSource } from "./WidgetDataSource";
+export default class DirectWidgetDataSource implements WidgetDataSource {
+    options: {
+        /** widget object */
+        widget: Widget;
+        /** schema to use */
+        schema: Schema;
+        /** general data source */
+        dataSource: DataSource;
+        /** API url to use for talking to mWater server. Not needed if no map widgets */
+        apiUrl?: string;
+        /** client id to use for talking to mWater server. Not needed if no map widgets */
+        client?: string | undefined;
+    };
+    constructor(options: {
+        /** widget object */
+        widget: Widget;
+        /** schema to use */
+        schema: Schema;
+        /** general data source */
+        dataSource: DataSource;
+        /** API url to use for talking to mWater server. Not needed if no map widgets */
+        apiUrl?: string;
+        /** client id to use for talking to mWater server. Not needed if no map widgets */
+        client?: string;
+    });
+    /** Get the data that the widget needs. The widget should implement getData method (see above) to get the actual data on 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
+     * callback: (error, data)
+     */
+    getData(design: any, filters: JsonQLFilter[], callback: (error: any, data: any) => void): void;
+    /** For map widgets, the following is required */
+    getMapDataSource(design: MapDesign): MapDataSource;
+    /** Get the url to download an image (by id from an image or imagelist column)
+     * Height, if specified, is minimum height needed. May return larger image */
+    getImageUrl(imageId: string, height?: number): string;
+}

package/lib/widgets/DirectWidgetDataSource.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const DirectMapDataSource_1 = __importDefault(require("../maps/DirectMapDataSource"));
+class DirectWidgetDataSource {
+    options;
+    constructor(options) {
+        this.options = options;
+    }
+    /** Get the data that the widget needs. The widget should implement getData method (see above) to get the actual data on 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
+     * callback: (error, data)
+     */
+    getData(design, filters, callback) {
+        this.options.widget.getData(design, this.options.schema, this.options.dataSource, filters, callback);
+    }
+    /** For map widgets, the following is required */
+    getMapDataSource(design) {
+        if (!this.options.apiUrl) {
+            throw new Error("Maps not supported");
+        }
+        return new DirectMapDataSource_1.default({
+            apiUrl: this.options.apiUrl,
+            client: this.options.client,
+            design,
+            schema: this.options.schema,
+            dataSource: this.options.dataSource
+        });
+    }
+    /** Get the url to download an image (by id from an image or imagelist column)
+     * Height, if specified, is minimum height needed. May return larger image */
+    getImageUrl(imageId, height) {
+        return this.options.dataSource.getImageUrl(imageId, height);
+    }
+}
+exports.default = DirectWidgetDataSource;

package/lib/widgets/DropdownWidgetComponent.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="jquery" />
+/// <reference types="bootstrap" />
+import React from "react";
+export interface DropdownWidgetComponentProps {
+    /** Width specification */
+    width?: any;
+    /** Height specification */
+    height?: any;
+    dropdownItems: any;
+}
+export default class DropdownWidgetComponent extends React.Component<DropdownWidgetComponentProps> {
+    renderDropdownItem: (item: any, i: any) => React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderDropdown(): React.ReactElement<{
+        style: {
+            position: string;
+            right: number;
+            top: number;
+            cursor: string;
+            zIndex: number;
+        };
+    }, string | React.JSXElementConstructor<any>> | null;
+    closeMenu: () => JQuery<HTMLElement>;
+    render(): React.DetailedReactHTMLElement<{
+        className: string;
+        onMouseLeave: () => JQuery<HTMLElement>;
+        style: {
+            width: any;
+            height: any;
+        };
+    }, HTMLElement>;
+}

package/lib/widgets/DropdownWidgetComponent.js

@@ -0,0 +1,41 @@
+"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 jquery_1 = __importDefault(require("jquery"));
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const R = react_1.default.createElement;
+// Widget wrapper that adds a dropdown menu in a gear floating
+class DropdownWidgetComponent extends react_1.default.Component {
+    renderDropdownItem = (item, i) => {
+        return R("li", { key: `${i}` }, R("a", { className: "dropdown-item", onClick: item.onClick }, item.icon ? R("span", { className: `glyphicon glyphicon-${item.icon} text-muted` }) : undefined, item.icon ? " " : undefined, item.label));
+    };
+    renderDropdown() {
+        if (this.props.dropdownItems.length === 0) {
+            return null;
+        }
+        const dropdownStyle = {
+            position: "absolute",
+            right: 3,
+            top: 3,
+            cursor: "pointer",
+            zIndex: 1029
+        };
+        const elem = R("div", { style: dropdownStyle, "data-bs-toggle": "dropdown" }, R("div", { className: "mwater-visualization-simple-widget-gear-button" }, R("span", { className: "fas fa-cog" })));
+        return R("div", { style: dropdownStyle }, elem, R("ul", { className: "dropdown-menu dropdown-menu-end", style: { top: 25 } }, lodash_1.default.map(this.props.dropdownItems, this.renderDropdownItem)));
+    }
+    closeMenu = () => {
+        return (0, jquery_1.default)(react_dom_1.default.findDOMNode(this)).find('[data-bs-toggle="dropdown"]').parent().removeClass("open");
+    };
+    render() {
+        return R("div", {
+            className: "mwater-visualization-simple-widget",
+            onMouseLeave: this.closeMenu,
+            style: { width: this.props.width, height: this.props.height }
+        }, this.props.children, this.renderDropdown());
+    }
+}
+exports.default = DropdownWidgetComponent;

package/lib/widgets/IFrameWidget.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import Widget, { CreateViewElementOptions } from "./Widget";
+export default class IFrameWidget extends Widget {
+    createViewElement(options: CreateViewElementOptions): React.CElement<{
+        design: object;
+        onDesignChange: ((design: object) => void) | null | undefined;
+        width: number | undefined;
+        height: number | undefined;
+    }, React.Component<{
+        design: object;
+        onDesignChange: ((design: object) => void) | null | undefined;
+        width: number | undefined;
+        height: number | undefined;
+    }, any, any>>;
+    isAutoHeight(): boolean;
+}

package/lib/widgets/IFrameWidget.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const Widget_1 = __importDefault(require("./Widget"));
+class IFrameWidget extends Widget_1.default {
+    // Creates a React element that is a view of the widget
+    // options:
+    //  schema: schema to use
+    //  dataSource: data source to use
+    //  widgetDataSource: Gives data to the widget in a way that allows client-server separation and secure sharing. See definition in WidgetDataSource.
+    //  design: widget design
+    //  scope: scope of the widget (when the widget self-selects a particular scope)
+    //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
+    //  onScopeChange: called with scope of widget
+    //  onDesignChange: called with new design. null/undefined for readonly
+    //  width: width in pixels on screen
+    //  height: height in pixels on screen
+    //  singleRowTable: optional table name of table that will be filtered to have a single row present. Widget designer should optionally account for this
+    createViewElement(options) {
+        // Put here so IFrameWidget can be created on server
+        const IFrameWidgetComponent = require("./IFrameWidgetComponent").default;
+        return R(IFrameWidgetComponent, {
+            design: options.design,
+            onDesignChange: options.onDesignChange,
+            width: options.width,
+            height: options.height
+        });
+    }
+    // Determine if widget is auto-height, which means that a vertical height is not required.
+    isAutoHeight() {
+        return false;
+    }
+}
+exports.default = IFrameWidget;

package/lib/widgets/IFrameWidgetComponent.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import DropdownWidgetComponent from "./DropdownWidgetComponent";
+export interface IFrameWidgetComponentProps {
+    design: any;
+    /** Called with new design. null/undefined for readonly */
+    onDesignChange?: any;
+    width?: number;
+    height?: number;
+}
+interface IFrameWidgetComponentState {
+    editUrl: any;
+    editing: any;
+}
+export default class IFrameWidgetComponent extends React.Component<IFrameWidgetComponentProps, IFrameWidgetComponentState> {
+    constructor(props: any);
+    handleStartEditing: () => void;
+    handleEndEditing: () => any;
+    renderEditor(): React.CElement<{
+        header: string;
+        showCloseX: boolean;
+        onClose: () => any;
+    }, React.Component<{
+        header: string;
+        showCloseX: boolean;
+        onClose: () => any;
+    }, any, any>> | null;
+    renderEditLink(): React.DetailedReactHTMLElement<{
+        className: string;
+        onClick: () => void;
+    }, HTMLElement>;
+    render(): React.CElement<import("./DropdownWidgetComponent").DropdownWidgetComponentProps, DropdownWidgetComponent>;
+}
+export {};

package/lib/widgets/IFrameWidgetComponent.js

@@ -0,0 +1,101 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const lodash_1 = __importDefault(require("lodash"));
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const DropdownWidgetComponent_1 = __importDefault(require("./DropdownWidgetComponent"));
+const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalPopupComponent"));
+class IFrameWidgetComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            // True when editing chart
+            editing: false,
+            editUrl: null
+        };
+    }
+    handleStartEditing = () => {
+        return this.setState({ editing: true, editUrl: this.props.design.url });
+    };
+    handleEndEditing = () => {
+        this.setState({ editing: false });
+        return this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, { url: this.state.editUrl }));
+    };
+    renderEditor() {
+        if (!this.state.editing) {
+            return null;
+        }
+        const content = R("div", { className: "mb-3" }, R("label", null, "URL to embed"), R("input", {
+            type: "text",
+            className: "form-control",
+            value: this.state.editUrl || "",
+            onChange: (ev) => this.setState({ editUrl: ev.target.value })
+        }), R("div", { className: "form-text text-muted" }, "e.g. https://www.youtube.com/embed/dQw4w9WgXcQ"));
+        return R(ModalPopupComponent_1.default, {
+            header: "Configure",
+            showCloseX: true,
+            onClose: this.handleEndEditing
+        }, content);
+    }
+    // Render a link to start editing
+    renderEditLink() {
+        return R("div", { className: "mwater-visualization-widget-placeholder", onClick: this.handleStartEditing }, R(ui.Icon, { id: "fa-youtube-play" }));
+    }
+    // R 'div', style: { position: "absolute", bottom: @props.height / 2, left: 0, right: 0, textAlign: "center" },
+    //   R 'a', className: "btn btn-link", onClick: @handleStartEditing, "Click Here to Configure"
+    render() {
+        const dropdownItems = [];
+        if (this.props.onDesignChange != null) {
+            dropdownItems.push({ label: "Edit", icon: "pencil", onClick: this.handleStartEditing });
+        }
+        return R(DropdownWidgetComponent_1.default, {
+            width: this.props.width,
+            height: this.props.height,
+            dropdownItems
+        }, this.renderEditor(), (() => {
+            if (this.props.design.url) {
+                return R("iframe", {
+                    src: this.props.design.url,
+                    width: this.props.width,
+                    height: this.props.height,
+                    frameborder: 0,
+                    allowfullscreen: "allowfullscreen"
+                });
+            }
+            else {
+                if (this.props.onDesignChange != null) {
+                    return this.renderEditLink();
+                }
+            }
+            return null;
+        })());
+    }
+}
+exports.default = IFrameWidgetComponent;

package/lib/widgets/ImageUploaderComponent.d.ts

@@ -0,0 +1,29 @@
+import { DataSource } from "@mwater/expressions";
+import React from "react";
+export interface ImageUploaderComponentProps {
+    /** Data source to use for chart */
+    dataSource: DataSource;
+    /** callback for when upload is successful */
+    onUpload: any;
+    uid?: string;
+}
+interface ImageUploaderComponentState {
+    uid: any;
+    uploading: any;
+    editing: any;
+    files: File[] | null;
+}
+export default class ImageUploaderComponent extends React.Component<ImageUploaderComponentProps, ImageUploaderComponentState> {
+    progressBar: HTMLDivElement | null;
+    xhr: XMLHttpRequest;
+    constructor(props: any);
+    onFileDrop: (files: any) => void;
+    uploadProgress: (e: any) => string | undefined;
+    uploadComplete: (e: any) => void;
+    createId(): string;
+    renderUploader(): React.JSX.Element;
+    renderPreview(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    handleChangeImage: () => void;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}
+export {};

package/lib/widgets/ImageUploaderComponent.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const react_dropzone_1 = __importDefault(require("react-dropzone"));
+const uuid_1 = __importDefault(require("uuid"));
+class ImageUploaderComponent extends react_1.default.Component {
+    progressBar;
+    xhr;
+    constructor(props) {
+        super(props);
+        this.state = {
+            uid: props.uid,
+            files: null,
+            uploading: false,
+            editing: props.uid ? false : true
+        };
+    }
+    onFileDrop = (files) => {
+        this.setState({ files, uploading: true });
+        this.xhr = new XMLHttpRequest();
+        const fd = new FormData();
+        fd.append("image", files[0]);
+        this.xhr.upload.onprogress = this.uploadProgress;
+        this.xhr.addEventListener("load", this.uploadComplete, false);
+        const id = this.createId();
+        this.xhr.open("POST", this.props.dataSource.getImageUploadUrl(id));
+        this.xhr.send(fd);
+        return this.setState({ uid: id });
+    };
+    uploadProgress = (e) => {
+        if (!this.progressBar) {
+            return;
+        }
+        if (e.lengthComputable) {
+            const percentComplete = Math.round((e.loaded * 100) / e.total);
+            return (this.progressBar.style.width = `${percentComplete}%`);
+        }
+        else {
+            return (this.progressBar.style.width = "100%");
+        }
+    };
+    uploadComplete = (e) => {
+        if (e.target.status === 200) {
+            this.setState({ uploading: false, files: null, editing: false });
+            this.props.onUpload(this.state.uid);
+        }
+        else {
+            this.setState({ uploading: false, files: null, editing: false });
+            alert(`Upload failed: ${e.target.responseText}`);
+        }
+    };
+    createId() {
+        return (0, uuid_1.default)().replace(/-/g, "");
+    }
+    renderUploader() {
+        return react_1.default.createElement("div", null,
+            react_1.default.createElement(react_dropzone_1.default, { multiple: false, onDrop: this.onFileDrop, noDragEventsBubbling: true }, ({ getRootProps, getInputProps, isDragActive }) => (react_1.default.createElement("div", { ...getRootProps({ className: "dropzone" }) },
+                react_1.default.createElement("input", { ...getInputProps() }),
+                this.state.uploading
+                    ? react_1.default.createElement("div", { className: "progress" },
+                        react_1.default.createElement("div", { className: "progress-bar", style: { width: "0%" }, ref: (c) => {
+                                this.progressBar = c;
+                            } }))
+                    : react_1.default.createElement("div", null, isDragActive ?
+                        "Drop the files here"
+                        : "Drop file here or click to select file")))),
+            this.state.uid && react_1.default.createElement("a", { className: "link-plain", onClick: () => this.setState({ editing: false }) }, "Cancel"));
+    }
+    renderPreview() {
+        const thumbnailStyle = {
+            width: "100px",
+            maxWidth: "100%",
+            maxHeight: "100%",
+            padding: 4,
+            border: "1px solid #aeaeae",
+            marginRight: 20
+        };
+        return R("div", null, R("img", { style: thumbnailStyle, src: this.props.dataSource.getImageUrl(this.state.uid) }), R("a", { className: "btn btn-secondary", onClick: this.handleChangeImage }, "Change"));
+    }
+    handleChangeImage = () => {
+        return this.setState({ editing: true });
+    };
+    render() {
+        return R("div", null, this.state.uid && !this.state.editing ? this.renderPreview() : undefined, this.state.editing || !this.state.uid ? this.renderUploader() : undefined);
+    }
+}
+exports.default = ImageUploaderComponent;

package/lib/widgets/ImageWidget.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import { DataSource, Expr, Schema } from "@mwater/expressions";
+import Widget, { CreateViewElementOptions } from "./Widget";
+import { JsonQLFilter } from "..";
+/** Image widget. Design is */
+export interface ImageWidgetDesign {
+    /** arbitrary url of image if using url */
+    imageUrl?: string | null;
+    /** uid of image if on server */
+    uid?: string | null;
+    /** image or imagelist expression if using expression */
+    expr?: Expr;
+    /** string caption */
+    caption?: string | null;
+    /** optional rotation in degrees for imageUrl or uid */
+    rotation?: number;
+    /** "top"/"bottom". Defaults to "bottom" */
+    captionPosition?: "top" | "bottom";
+    /** Optional URL to open when clicked */
+    url?: string;
+    /** Opens URL in same tab if true*/
+    openUrlInSameTab?: boolean;
+}
+export default class ImageWidget extends Widget {
+    createViewElement(options: CreateViewElementOptions): React.CElement<{
+        schema: Schema;
+        dataSource: DataSource;
+        widgetDataSource: import("./WidgetDataSource").WidgetDataSource;
+        filters: JsonQLFilter[];
+        design: object;
+        onDesignChange: ((design: object) => void) | null | undefined;
+        width: number | undefined;
+        height: number | undefined;
+        singleRowTable: string | undefined;
+    }, React.Component<{
+        schema: Schema;
+        dataSource: DataSource;
+        widgetDataSource: import("./WidgetDataSource").WidgetDataSource;
+        filters: JsonQLFilter[];
+        design: object;
+        onDesignChange: ((design: object) => void) | null | undefined;
+        width: number | undefined;
+        height: number | undefined;
+        singleRowTable: string | undefined;
+    }, any, any>>;
+    getData(design: ImageWidgetDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): any;
+    isAutoHeight(): boolean;
+    getFilterableTables(design: any, schema: Schema): any[];
+}