@mwater/visualization 5.4.1 → 5.4.3

package/lib/widgets/ImageWidget.d.ts

@@ -27,23 +27,26 @@ export default class ImageWidget extends Widget {
         dataSource: DataSource;
         widgetDataSource: import("./WidgetDataSource").WidgetDataSource;
         filters: JsonQLFilter[];
-        design: object;
-        onDesignChange: ((design: object) => void) | null | undefined;
+        design: any;
+        onDesignChange: ((design: any) => void) | null | undefined;
         width: number | undefined;
         height: number | undefined;
         singleRowTable: string | undefined;
+        translate: (input: string) => string;
     }, React.Component<{
         schema: Schema;
         dataSource: DataSource;
         widgetDataSource: import("./WidgetDataSource").WidgetDataSource;
         filters: JsonQLFilter[];
-        design: object;
-        onDesignChange: ((design: object) => void) | null | undefined;
+        design: any;
+        onDesignChange: ((design: any) => void) | null | undefined;
         width: number | undefined;
         height: number | undefined;
         singleRowTable: string | undefined;
+        translate: (input: string) => string;
     }, any, any>>;
     getData(design: ImageWidgetDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): any;
     isAutoHeight(): boolean;
     getFilterableTables(design: any, schema: Schema): any[];
+    getTranslatableStrings(design: ImageWidgetDesign, schema: Schema): string[];
 }

package/lib/widgets/ImageWidget.js

@@ -35,7 +35,8 @@ class ImageWidget extends Widget_1.default {
             onDesignChange: options.onDesignChange,
             width: options.width,
             height: options.height,
-            singleRowTable: options.singleRowTable
+            singleRowTable: options.singleRowTable,
+            translate: options.translate
         });
     }
     // Get the data that the widget needs. This will be called on the server, typically.
@@ -108,5 +109,12 @@ class ImageWidget extends Widget_1.default {
         }
         return [];
     }
+    getTranslatableStrings(design, schema) {
+        const strings = [];
+        if (design.caption) {
+            strings.push(design.caption);
+        }
+        return strings;
+    }
 }
 exports.default = ImageWidget;

package/lib/widgets/ImageWidgetComponent.d.ts

@@ -17,6 +17,7 @@ export interface ImageWidgetComponentProps {
     width: number;
     height: number;
     singleRowTable?: string;
+    translate: (input: string) => string;
 }
 export default class ImageWidgetComponent extends AsyncLoadComponent<ImageWidgetComponentProps, {
     data: any;

package/lib/widgets/ImageWidgetComponent.js

@@ -143,7 +143,7 @@ class ImageWidgetComponent extends AsyncLoadComponent_1.default {
             : R("div", {
                 className: "mwater-visualization-image-widget",
                 style: { position: "relative", width: this.props.width, height: this.props.height }
-            }, captionPosition === "top" ? R("div", { className: "caption" }, this.props.design.caption) : undefined, R("div", { className: "image" }, this.renderContent()), captionPosition === "bottom" ? R("div", { className: "caption" }, this.props.design.caption) : undefined));
+            }, captionPosition === "top" && this.props.design.caption ? R("div", { className: "caption" }, this.props.translate(this.props.design.caption)) : undefined, R("div", { className: "image" }, this.renderContent()), captionPosition === "bottom" && this.props.design.caption ? R("div", { className: "caption" }, this.props.translate(this.props.design.caption)) : undefined));
     }
 }
 exports.default = ImageWidgetComponent;

package/lib/widgets/MapWidget.d.ts

@@ -1,52 +1,9 @@
 import React from "react";
 import Widget, { CreateViewElementOptions } from "./Widget";
-import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent";
-import { DataSource, Schema } from "@mwater/expressions";
-import { WidgetDataSource } from "./WidgetDataSource";
+import { Schema } from "@mwater/expressions";
+import { MapDesign } from "../maps/MapDesign";
 export default class MapWidget extends Widget {
-    createViewElement(options: CreateViewElementOptions): React.CElement<any, MapWidgetComponent>;
-    getFilterableTables(design: any, schema: Schema): string[];
+    createViewElement(options: CreateViewElementOptions): React.JSX.Element;
+    getFilterableTables(design: MapDesign, schema: Schema): string[];
+    getTranslatableStrings(design: MapDesign, schema: Schema): string[];
 }
-interface MapWidgetComponentProps {
-    /** Schema to use */
-    schema: Schema;
-    /** Data source to use */
-    dataSource: DataSource;
-    widgetDataSource: WidgetDataSource;
-    /** See Map Design.md */
-    design: any;
-    /** Called with new design.  null/undefined for readonly */
-    onDesignChange?: any;
-    width?: number;
-    height?: number;
-    /** scope of the widget (when the widget self-selects a particular scope) */
-    scope?: any;
-    /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
-    filters?: any;
-    /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
-    onScopeChange?: any;
-    onRowClick?: any;
-    /** TODO: implement refreshing */
-    refreshKey?: any;
-}
-interface MapWidgetComponentState {
-    editDesign: any;
-    transientDesign: any;
-}
-declare class MapWidgetComponent extends React.Component<MapWidgetComponentProps, MapWidgetComponentState> {
-    constructor(props: any);
-    componentDidUpdate(prevProps: any): void;
-    handleStartEditing: () => void;
-    handleEndEditing: () => void;
-    handleEditDesignChange: (design: any) => void;
-    renderEditor(): React.CElement<import("@mwater/react-library/lib/ModalWindowComponent").ModalWindowComponentProps, ModalWindowComponent> | null;
-    renderContent(design: any, onDesignChange: any, width: any, height: any): React.DetailedReactHTMLElement<{
-        style: {
-            width: any;
-            height: any;
-            padding: number;
-        };
-    }, HTMLElement>;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-}
-export {};

package/lib/widgets/MapWidget.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (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 Widget_1 = __importDefault(require("./Widget"));
 const DropdownWidgetComponent_1 = __importDefault(require("./DropdownWidgetComponent"));
@@ -49,26 +48,16 @@ class MapWidget extends Widget_1.default {
     //  height: height in pixels on screen
     //  onRowClick: Called with (tableId, rowId) when item is clicked
     createViewElement(options) {
-        return react_1.default.createElement(MapWidgetComponent, {
-            schema: options.schema,
-            dataSource: options.dataSource,
-            widgetDataSource: options.widgetDataSource,
-            design: options.design,
-            onDesignChange: options.onDesignChange,
-            scope: options.scope,
-            filters: options.filters,
-            onScopeChange: options.onScopeChange,
-            width: options.width,
-            height: options.height,
-            onRowClick: options.onRowClick,
-            refreshKey: options.refreshKey
-        });
+        return react_1.default.createElement(MapWidgetComponent, { schema: options.schema, dataSource: options.dataSource, widgetDataSource: options.widgetDataSource, design: options.design, onDesignChange: options.onDesignChange, scope: options.scope, filters: options.filters, onScopeChange: options.onScopeChange, width: options.width, height: options.height, onRowClick: options.onRowClick, refreshKey: options.refreshKey, locale: options.locale, translate: options.translate });
     }
     // Get a list of table ids that can be filtered on
     getFilterableTables(design, schema) {
         // Get filterable tables
         return MapUtils.getFilterableTables(design, schema);
     }
+    getTranslatableStrings(design, schema) {
+        return MapUtils.getTranslatableStrings(design, schema);
+    }
 }
 exports.default = MapWidget;
 class MapWidgetComponent extends react_1.default.Component {
@@ -102,53 +91,31 @@ class MapWidgetComponent extends react_1.default.Component {
         // Require here to prevent server require problems
         const MapDesignerComponent = require("../maps/MapDesignerComponent").default;
         // Create editor
-        const editor = react_1.default.createElement(MapDesignerComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            design: this.state.editDesign,
-            onDesignChange: this.handleEditDesignChange,
-            filters: this.props.filters
-        });
+        const editor = react_1.default.createElement(MapDesignerComponent, { schema: this.props.schema, dataSource: this.props.dataSource, design: this.state.editDesign, onDesignChange: this.handleEditDesignChange, filters: this.props.filters });
         // Create map (maxing out at half of width of screen)
-        const width = Math.min(document.body.clientWidth / 2, this.props.width);
-        const height = (this.props.height * width) / this.props.width;
+        const width = Math.min(document.body.clientWidth / 2, this.props.width || 0);
+        const height = ((this.props.height || 0) * width) / (this.props.width || 1);
         const chart = this.renderContent(this.state.editDesign, this.handleEditDesignChange, width, height);
-        const content = R("div", { style: { height: "100%", width: "100%" } }, R("div", {
-            style: {
-                position: "absolute",
-                left: 0,
-                top: 0,
-                border: "solid 2px #EEE",
-                borderRadius: 8,
-                padding: 10,
-                width: width + 20,
-                height: height + 20
-            }
-        }, chart), R("div", { style: { width: "100%", height: "100%", paddingLeft: width + 40 } }, R("div", {
-            style: { width: "100%", height: "100%", overflowY: "auto", paddingLeft: 20, borderLeft: "solid 3px #AAA" }
-        }, editor)));
-        return react_1.default.createElement(ModalWindowComponent_1.default, {
-            isOpen: true,
-            onRequestClose: this.handleEndEditing
-        }, content);
+        const content = react_1.default.createElement("div", { style: { height: "100%", width: "100%" } },
+            react_1.default.createElement("div", { style: {
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    border: "solid 2px #EEE",
+                    borderRadius: 8,
+                    padding: 10,
+                    width: width + 20,
+                    height: height + 20
+                } }, chart),
+            react_1.default.createElement("div", { style: { width: "100%", height: "100%", paddingLeft: width + 40 } },
+                react_1.default.createElement("div", { style: { width: "100%", height: "100%", overflowY: "auto", paddingLeft: 20, borderLeft: "solid 3px #AAA" } }, editor)));
+        return react_1.default.createElement(ModalWindowComponent_1.default, { isOpen: true, onRequestClose: this.handleEndEditing }, content);
     }
     renderContent(design, onDesignChange, width, height) {
         // Require here to prevent server require problems
         const { MapViewComponent } = require("../maps/MapViewComponent");
-        return R("div", { style: { width, height, padding: 10 } }, react_1.default.createElement(MapViewComponent, {
-            schema: this.props.schema,
-            design,
-            dataSource: this.props.dataSource,
-            mapDataSource: this.props.widgetDataSource.getMapDataSource(design),
-            onDesignChange,
-            scope: this.props.scope,
-            onScopeChange: this.props.onScopeChange,
-            extraFilters: this.props.filters,
-            width: width - 20,
-            height: height - 20,
-            scrollWheelZoom: false, // Prevent accidental zooming
-            onRowClick: this.props.onRowClick
-        }));
+        return react_1.default.createElement("div", { style: { width, height, padding: 10 } },
+            react_1.default.createElement(MapViewComponent, { schema: this.props.schema, design: design, dataSource: this.props.dataSource, mapDataSource: this.props.widgetDataSource.getMapDataSource(design), onDesignChange: onDesignChange, scope: this.props.scope, onScopeChange: this.props.onScopeChange, extraFilters: this.props.filters, width: width - 20, height: height - 20, scrollWheelZoom: false, onRowClick: this.props.onRowClick, locale: this.props.locale, translate: this.props.translate }));
     }
     render() {
         const dropdownItems = [];
@@ -157,12 +124,8 @@ class MapWidgetComponent extends react_1.default.Component {
         }
         const handleDesignChange = (d) => this.setState({ transientDesign: d });
         // Wrap in a simple widget
-        return R("div", null, this.props.onDesignChange != null ? this.renderEditor() : undefined, 
-        // Use transient design (as it may be affected by toggling layers)
-        react_1.default.createElement(DropdownWidgetComponent_1.default, {
-            width: this.props.width,
-            height: this.props.height,
-            dropdownItems
-        }, this.renderContent(this.state.transientDesign, handleDesignChange, this.props.width, this.props.height)));
+        return react_1.default.createElement("div", null,
+            this.props.onDesignChange != null ? this.renderEditor() : undefined,
+            react_1.default.createElement(DropdownWidgetComponent_1.default, { width: this.props.width, height: this.props.height, dropdownItems: dropdownItems }, this.renderContent(this.state.transientDesign, handleDesignChange, this.props.width, this.props.height)));
     }
 }

package/lib/widgets/MarkdownWidget.d.ts

@@ -1,6 +1,9 @@
 import React from "react";
 import Widget, { CreateViewElementOptions } from "./Widget";
 import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent";
+/** Widget for displaying markdown. Deprecated. Use TextWidget instead.
+ * @deprecated
+*/
 export default class MarkdownWidget extends Widget {
     createViewElement(options: CreateViewElementOptions): React.CElement<any, MarkdownWidgetComponent>;
     isAutoHeight(): boolean;

package/lib/widgets/MarkdownWidget.js

@@ -10,6 +10,9 @@ const Widget_1 = __importDefault(require("./Widget"));
 const DropdownWidgetComponent_1 = __importDefault(require("./DropdownWidgetComponent"));
 const markdown_it_1 = __importDefault(require("markdown-it"));
 const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
+/** Widget for displaying markdown. Deprecated. Use TextWidget instead.
+ * @deprecated
+*/
 class MarkdownWidget extends Widget_1.default {
     // Creates a React element that is a view of the widget
     // options:

package/lib/widgets/TOCWidget.d.ts

@@ -1,32 +1,20 @@
-import PropTypes from "prop-types";
 import React from "react";
 import Widget, { CreateViewElementOptions } from "./Widget";
-import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent";
+import { Schema } from "@mwater/expressions";
+export interface TOCWidgetDesign {
+    /** Header text. Defaults to blank */
+    header?: string;
+    /** Border weight. Defaults to 0=None. 1=light, 2=medium, 3=heavy */
+    borderWeight?: number;
+    /** True/false for prepending numbering to entries (e.g. 3.4.1) */
+    numbering?: boolean;
+}
+/**
+ * Table of contents widget that displays the h1, h2, etc entries from all text fields in one widget
+ */
 export default class TOCWidget extends Widget {
-    createViewElement(options: CreateViewElementOptions): React.CElement<any, TOCWidgetComponent>;
+    /** Creates a React element that is a view of the widget */
+    createViewElement(options: CreateViewElementOptions): React.JSX.Element;
     isAutoHeight(): boolean;
+    getTranslatableStrings(design: TOCWidgetDesign, schema: Schema): string[];
 }
-declare class TOCWidgetComponent extends React.Component {
-    static propTypes: {
-        design: PropTypes.Validator<object>;
-        onDesignChange: PropTypes.Requireable<(...args: any[]) => any>;
-        width: PropTypes.Requireable<number>;
-        height: PropTypes.Requireable<number>;
-        tocEntries: PropTypes.Requireable<(PropTypes.InferProps<{
-            id: PropTypes.Requireable<any>;
-            widgetId: PropTypes.Validator<string>;
-            level: PropTypes.Validator<number>;
-            text: PropTypes.Validator<string>;
-        }> | null | undefined)[]>;
-        onScrollToTOCEntry: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    constructor(props: any);
-    handleStartEditing: () => void;
-    handleEndEditing: () => void;
-    renderEditor(): React.CElement<import("@mwater/react-library/lib/ModalPopupComponent").ModalPopupComponentProps, ModalPopupComponent> | null;
-    renderContent(): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-    render(): React.DetailedReactHTMLElement<{
-        onDoubleClick: () => void;
-    }, HTMLElement>;
-}
-export {};