@mwater/visualization 5.0.1 → 5.2.0

package/lib/axes/Axis.d.ts

@@ -4,35 +4,15 @@ import { Expr } from "@mwater/expressions";
 An axis is an expression with optional aggregation, transform and color mapping
 In ggplot2 parlance, an "aesthetic"
 
-It contains:
- expr: expression
- aggr: DEPRECATED: optional aggregation (e.g. sum)
- xform: optional transformation to be applied. object with `type` field. See below
- colorMap: optional array of color mappings. See below
- excludedValues: Array of post-xform values to exclude when displaying.
- format: optional d3-format format for numeric values. Default if null is ","
-
-## Xforms
-
-types:
-
-
 */
 export interface Axis {
+    /** Expression to be displayed on axis */
     expr: Expr;
-    /**
-     * `bin`: convert into bins. always has `numBins` integer and `min` and `max`. Can have `excludeUpper` and/or `excludeLower` to remove open bin on top or bottem. type enum
-     * `date`: convert to complete date e.g. `2015-02-08`. type date
-     * `year`: year only e.g. `2015-01-01`. type date
-     * `yearmonth`: year and month only e.g. `2015-02-01`. type date
-     * `yearquarter`: year and quarter only e.g. `2015-01`. type enum
-     * `yearweek`: year and week (ISO) only e.g. `2015-31`. type enum
-     * `month`: month only e.g. `02`. type enum
-     * `week`: ISO week of year e.g. `01` for the first week that contains January 4th
-     * `ranges`: convert to ranges. type enum. `ranges` is array of { id (unique id), label (optional label), minValue (null for none), maxValue (null for none), minOpen (true for >, false for >=), maxOpen (true for <, false for <=) }
-     * `floor`: convert to floor. type enum
+    /** Optional transformation to be applied. If a date is used, for example, it's generally
+     * better to use a transform to convert to a year or month rather than creating an expression.
      */
     xform?: AxisXform;
+    /** optional array of color mappings */
     colorMap?: ColorMap;
     /** optional array of category values which define the order in which categories should be rendered */
     drawOrder?: any[];
@@ -42,9 +22,11 @@ export interface Axis {
     };
     /** optional string for null category */
     nullLabel?: string;
+    /** Array of post-xform values to exclude when displaying. */
     excludedValues?: any[];
+    /** optional d3-format format for numeric values. Default if null is "," */
     format?: string;
-    /** @deprecated */
+    /** @deprecated optional aggregation (e.g. sum) */
     aggr?: string;
 }
 /**
@@ -63,6 +45,19 @@ export interface AxisCategory {
     value: any;
 }
 export interface AxisXform {
+    /**
+     * Type of transformation
+     * `bin`: convert into bins. always has `numBins` integer and `min` and `max`. Can have `excludeUpper` and/or `excludeLower` to remove open bin on top or bottem. type enum
+     * `date`: convert to complete date e.g. `2015-02-08`. type date
+     * `year`: year only e.g. `2015-01-01`. type date
+     * `yearmonth`: year and month only e.g. `2015-02-01`. type date
+     * `yearquarter`: year and quarter only e.g. `2015-01`. type enum
+     * `yearweek`: year and week (ISO) only e.g. `2015-31`. type enum
+     * `month`: month only e.g. `02`. type enum
+     * `week`: ISO week of year e.g. `01` for the first week that contains January 4th
+     * `ranges`: convert to ranges. type enum. `ranges` is array of { id (unique id), label (optional label), minValue (null for none), maxValue (null for none), minOpen (true for >, false for >=), maxOpen (true for <, false for <=) }
+     * `floor`: convert to floor. type enum
+     */
     type: "bin" | "date" | "year" | "yearmonth" | "month" | "week" | "ranges" | "yearweek" | "yearquarter" | "floor";
     numBins?: number;
     min?: number;

package/lib/axes/AxisBuilder.js

@@ -38,6 +38,7 @@ const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const immer_1 = __importDefault(require("immer"));
 const valueFormatter_1 = require("../valueFormatter");
+const dayjs_1 = __importDefault(require("../dayjs"));
 const xforms = [
     { type: "bin", input: "number", output: "enum" },
     { type: "ranges", input: "number", output: "enum" },
@@ -827,7 +828,7 @@ class AxisBuilder {
                 }
                 if (options.onlyValuesPresent) {
                     // Sort and take only present
-                    categories = lodash_1.default.sortBy(lodash_1.default.uniq(values), item => item).map(value => ({ value, label: (0, moment_1.default)(value, "YYYY-MM-DD").format("ll") }));
+                    categories = lodash_1.default.sortBy(lodash_1.default.uniq(values), item => item).map(value => ({ value, label: (0, valueFormatter_1.formatValue)("date", value, axis.format) }));
                     if (hasNone) {
                         categories.push(noneCategory);
                     }
@@ -837,12 +838,12 @@ class AxisBuilder {
                 min = values.sort()[0];
                 max = values.sort().slice(-1)[0];
                 // Use moment to get range
-                current = (0, moment_1.default)(min, "YYYY-MM-DD");
-                end = (0, moment_1.default)(max, "YYYY-MM-DD");
+                current = (0, dayjs_1.default)(min);
+                end = (0, dayjs_1.default)(max);
                 categories = [];
                 while (!current.isAfter(end)) {
-                    categories.push({ value: current.format("YYYY-MM-DD"), label: current.format("ll") });
-                    current.add(1, "days");
+                    categories.push({ value: current.format("YYYY-MM-DD"), label: current.format(axis.format ?? "ll") });
+                    current = current.add(1, "days");
                     if (categories.length >= 1000) {
                         break;
                     }
@@ -947,9 +948,10 @@ class AxisBuilder {
                 }
                 return R("div", null, lodash_1.default.map(value, (v, i) => R("div", { key: i }, v)));
             case "date":
-                return (0, moment_1.default)(value, moment_1.default.ISO_8601).format("ll");
+                console.log(axis);
+                return (0, valueFormatter_1.formatValue)(type, value, axis.format);
             case "datetime":
-                return (0, moment_1.default)(value, moment_1.default.ISO_8601).format("lll");
+                return (0, valueFormatter_1.formatValue)(type, value, axis.format);
         }
         return "" + value;
     }

package/lib/axes/AxisComponent.d.ts

@@ -50,10 +50,10 @@ export default class AxisComponent extends AsyncLoadComponent<AxisComponentProps
     constructor(props: any);
     isLoadNeeded(newProps: any, oldProps: any): boolean;
     load(props: any, prevProps: any, callback: any): any;
-    handleExprChange: (expr: any) => any;
-    handleFormatChange: (ev: any) => any;
-    handleXformTypeChange: (type: any) => any;
-    handleXformChange: (xform: any) => any;
+    handleExprChange: (expr: any) => void;
+    handleFormatChange: (ev: any) => void;
+    handleXformTypeChange: (type: any) => void;
+    handleXformChange: (xform: any) => void;
     cleanAxis(axis: any): Axis | null;
     renderXform(axis: any): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<ui.RadioToggleComponentProps, ui.RadioToggleComponent> | null;
     renderColorMap(axis: any): (React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<any, AxisColorEditorComponent>)[] | null;

package/lib/axes/RangesComponent.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { AxisXform } from "./Axis";
+import { AxisXform, AxisXformRange } from "./Axis";
 import { Expr, Schema } from "@mwater/expressions";
 export interface RangesComponentProps {
     schema: Schema;
@@ -18,9 +18,9 @@ export default class RangesComponent extends React.Component<RangesComponentProp
 }
 interface RangeComponentProps {
     /** Range to edit */
-    range: any;
-    onChange: any;
-    onRemove: any;
+    range: AxisXformRange;
+    onChange: (range: AxisXformRange) => void;
+    onRemove: () => void;
     /** reorderable connector */
     connectDragSource: any;
     /** reorderable connector */
@@ -28,8 +28,14 @@ interface RangeComponentProps {
     connectDropTarget: any;
 }
 declare class RangeComponent extends React.Component<RangeComponentProps> {
-    handleMinOpenChange: (minOpen: any) => any;
-    handleMaxOpenChange: (maxOpen: any) => any;
+    /**
+     * Handles change in minimum open value
+     */
+    handleMinOpenChange: (minOpen: boolean) => void;
+    /**
+     * Handles change in maximum open value
+     */
+    handleMaxOpenChange: (maxOpen: boolean) => void;
     render(): any;
 }
 export {};

package/lib/axes/RangesComponent.js

@@ -10,6 +10,7 @@ const update_object_1 = __importDefault(require("update-object"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const NumberInputComponent_1 = __importDefault(require("@mwater/react-library/lib/NumberInputComponent"));
 const ReorderableListComponent_1 = __importDefault(require("@mwater/react-library/lib/reorderable/ReorderableListComponent"));
+const immer_1 = __importDefault(require("immer"));
 // Allows setting of ranges
 class RangesComponent extends react_1.default.Component {
     handleRangeChange = (index, range) => {
@@ -59,11 +60,21 @@ class RangesComponent extends react_1.default.Component {
 exports.default = RangesComponent;
 // Single range (row)
 class RangeComponent extends react_1.default.Component {
+    /**
+     * Handles change in minimum open value
+     */
     handleMinOpenChange = (minOpen) => {
-        return this.props.onChange((0, update_object_1.default)(this.props.range, { minOpen: { $set: minOpen } }));
+        return this.props.onChange((0, immer_1.default)(this.props.range, draft => {
+            draft.minOpen = minOpen;
+        }));
     };
+    /**
+     * Handles change in maximum open value
+     */
     handleMaxOpenChange = (maxOpen) => {
-        return this.props.onChange((0, update_object_1.default)(this.props.range, { maxOpen: { $set: maxOpen } }));
+        return this.props.onChange((0, immer_1.default)(this.props.range, draft => {
+            draft.maxOpen = maxOpen;
+        }));
     };
     render() {
         let placeholder = "";
@@ -88,23 +99,23 @@ class RangeComponent extends react_1.default.Component {
         }
         return this.props.connectDragPreview(this.props.connectDropTarget(R("tr", null, R("td", null, this.props.connectDragSource(R("span", { className: "fa fa-bars" }))), R("td", { key: "minOpen" }, R(expressions_ui_1.LinkComponent, {
             dropdownItems: [
-                { id: true, name: "greater than" },
-                { id: false, name: "greater than or equal to" }
+                { id: "true", name: "greater than" },
+                { id: "false", name: "greater than or equal to" }
             ],
-            onDropdownItemClicked: this.handleMinOpenChange
+            onDropdownItemClicked: (id) => this.handleMinOpenChange(id === "true")
         }, this.props.range.minOpen ? "greater than" : "greater than or equal to")), R("td", { key: "minValue" }, R(NumberInputComponent_1.default, {
-            value: this.props.range.minValue,
+            value: this.props.range.minValue ?? undefined,
             placeholder: "None",
             small: true,
             onChange: (v) => this.props.onChange((0, update_object_1.default)(this.props.range, { minValue: { $set: v } }))
         })), R("td", { key: "and" }, "\u00A0and\u00A0"), R("td", { key: "maxOpen" }, R(expressions_ui_1.LinkComponent, {
             dropdownItems: [
-                { id: true, name: "less than" },
-                { id: false, name: "less than or equal to" }
+                { id: "true", name: "less than" },
+                { id: "false", name: "less than or equal to" }
             ],
-            onDropdownItemClicked: this.handleMaxOpenChange
+            onDropdownItemClicked: (id) => this.handleMaxOpenChange(id === "true")
         }, this.props.range.maxOpen ? "less than" : "less than or equal to")), R("td", { key: "maxValue" }, R(NumberInputComponent_1.default, {
-            value: this.props.range.maxValue,
+            value: this.props.range.maxValue ?? undefined,
             placeholder: "None",
             small: true,
             onChange: (v) => this.props.onChange((0, update_object_1.default)(this.props.range, { maxValue: { $set: v } }))

package/lib/dashboards/DashboardComponent.d.ts

@@ -57,12 +57,10 @@ export default class DashboardComponent extends React.Component<DashboardCompone
     };
     static childContextTypes: {
         locale: PropTypes.Requireable<string>;
-        activeTables: PropTypes.Requireable<string[]>;
     };
     settings: SettingsModalComponent | null;
     getChildContext(): {
         locale: string | undefined;
-        activeTables: string[];
     };
     constructor(props: any);
     getQuickfilterValues: () => any[];
@@ -85,11 +83,6 @@ export default class DashboardComponent extends React.Component<DashboardCompone
         className: string;
         onClick: () => void;
     }, HTMLElement>;
-    renderStyleItem(style: any): React.DetailedReactHTMLElement<{
-        key: any;
-        className: string;
-        onClick: () => void;
-    }, HTMLElement>;
     renderStyle(): React.DetailedReactHTMLElement<{
         type: string;
         key: string;
@@ -105,11 +98,5 @@ export default class DashboardComponent extends React.Component<DashboardCompone
     }, HTMLElement>;
     renderQuickfilter(): React.CElement<import("../quickfilter/QuickfiltersComponent").QuickfiltersComponentProps, QuickfiltersComponent>;
     refDashboardView: (el: any) => any;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            display: "grid";
-            gridTemplateRows: string;
-            height: string;
-        };
-    }, HTMLElement>;
+    render(): React.JSX.Element;
 }

package/lib/dashboards/DashboardComponent.js

@@ -41,6 +41,7 @@ const DashboardUpgrader_1 = __importDefault(require("./DashboardUpgrader"));
 const LayoutOptionsComponent_1 = require("./LayoutOptionsComponent");
 const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
 const layoutOptions_1 = require("./layoutOptions");
+const expressions_ui_1 = require("@mwater/expressions-ui");
 /** Dashboard component that includes an action bar at the top
  * Manages undo stack and quickfilter value
  */
@@ -49,15 +50,12 @@ class DashboardComponent extends react_1.default.Component {
     static defaultProps = { printScaling: true };
     static childContextTypes = {
         locale: prop_types_1.default.string,
-        activeTables: prop_types_1.default.arrayOf(prop_types_1.default.string.isRequired)
     };
     settings;
     getChildContext() {
         return {
             // Pass locale down. Both here and DashboardViewComponent to ensure that quickfilters also get context
             locale: this.props.design.locale,
-            // Pass active tables down to table select components so they can present a shorter list
-            activeTables: DashboardUtils.getFilterableTables(this.props.design, this.props.schema)
         };
     }
     constructor(props) {
@@ -162,34 +160,6 @@ class DashboardComponent extends react_1.default.Component {
             onClick: this.handleToggleEditing
         }, R("span", { className: "fas fa-pencil-alt" }), this.state.editing ? " Editing" : " Edit");
     }
-    renderStyleItem(style) {
-        const isActive = (this.props.design.style || "default") === style;
-        const content = (() => {
-            switch (style) {
-                case "default":
-                    return [
-                        R("h4", { key: "name", className: "list-group-item-heading" }, "Classic Dashboard"),
-                        R("p", { key: "description", className: "" }, "Ideal for data display with minimal text")
-                    ];
-                case "greybg":
-                    return [
-                        R("h4", { key: "name", className: "list-group-item-heading" }, "Framed Dashboard"),
-                        R("p", { key: "description", className: "" }, "Each widget is white on a grey background")
-                    ];
-                case "story":
-                    return [
-                        R("h4", { key: "name", className: "list-group-item-heading" }, "Story"),
-                        R("p", { key: "description", className: "" }, "Ideal for data-driven storytelling with lots of text. Responsive and mobile-friendly")
-                    ];
-            }
-            return null;
-        })();
-        return R("a", {
-            key: style,
-            className: `list-group-item ${isActive ? "active" : ""}`,
-            onClick: this.handleStyleChange.bind(null, style)
-        }, content);
-    }
     renderStyle() {
         return R("button", { type: "button", key: "style", className: "btn btn-link btn-sm", onClick: this.handleOpenLayoutOptions }, R("span", { className: "fa fa-mobile" }), R("span", { className: "hide-600px" }, " Layout "));
     }
@@ -234,7 +204,8 @@ class DashboardComponent extends react_1.default.Component {
             locks: this.props.quickfilterLocks,
             filters: this.getCompiledFilters(),
             hideTopBorder: this.props.hideTitleBar,
-            onHide: () => this.setState({ hideQuickfilters: true })
+            // Don't hide if title bar is hidden as it can't be shown again
+            onHide: () => !this.props.hideTitleBar ? this.setState({ hideQuickfilters: true }) : undefined
         });
     }
     refDashboardView = (el) => {
@@ -268,30 +239,21 @@ class DashboardComponent extends react_1.default.Component {
             namedStrings: this.props.namedStrings,
             hideScopes: this.state.hideQuickfilters
         });
-        return R("div", {
-            style: {
-                display: "grid",
-                gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
-                height: "100%"
-            }
-        }, !this.props.hideTitleBar ? this.renderTitleBar() : undefined, R("div", null, !this.state.hideQuickfilters ? this.renderQuickfilter() : undefined), dashboardView, this.props.onDesignChange != null
-            ? R(SettingsModalComponent_1.default, {
-                onDesignChange: this.handleDesignChange,
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                ref: (c) => {
-                    this.settings = c;
-                }
-            })
-            : undefined, this.state.layoutOptionsOpen
-            ? R(ModalWindowComponent_1.default, { isOpen: true, outerPadding: 10, innerPadding: 10 }, R(LayoutOptionsComponent_1.LayoutOptionsComponent, {
-                design: this.props.design,
-                onDesignChange: this.props.onDesignChange,
-                onClose: () => this.setState({ layoutOptionsOpen: false }),
-                dashboardView: readonlyDashboardView,
-                quickfiltersView: this.renderQuickfilter()
-            }))
-            : undefined);
+        // Pass active tables down to table select components so they can present a shorter list
+        return react_1.default.createElement(expressions_ui_1.ActiveTablesContext.Provider, { value: DashboardUtils.getFilterableTables(this.props.design, this.props.schema) },
+            react_1.default.createElement("div", { style: {
+                    display: "grid",
+                    gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
+                    height: "100%"
+                } },
+                !this.props.hideTitleBar ? this.renderTitleBar() : undefined,
+                react_1.default.createElement("div", null, !this.state.hideQuickfilters ? this.renderQuickfilter() : undefined),
+                dashboardView,
+                this.props.onDesignChange != null && (react_1.default.createElement(SettingsModalComponent_1.default, { onDesignChange: this.handleDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, ref: (c) => {
+                        this.settings = c;
+                    } })),
+                this.state.layoutOptionsOpen && (react_1.default.createElement(ModalWindowComponent_1.default, { isOpen: true, outerPadding: 10, innerPadding: 10 },
+                    react_1.default.createElement(LayoutOptionsComponent_1.LayoutOptionsComponent, { design: this.props.design, onDesignChange: this.props.onDesignChange, onClose: () => this.setState({ layoutOptionsOpen: false }), dashboardView: readonlyDashboardView, quickfiltersView: this.renderQuickfilter() })))));
     }
 }
 exports.default = DashboardComponent;

package/lib/dashboards/DashboardDesign.d.ts

@@ -1,6 +1,7 @@
 import { Quickfilter } from "../quickfilter/Quickfilter";
-import { LiteralType, Expr } from "@mwater/expressions";
+import { Expr } from "@mwater/expressions";
 import { BlocksLayoutOptions, DashboardTheme } from "./layoutOptions";
+import { GlobalFilter } from "../GlobalFilter";
 /** Dashboard design
  * Each understands enough of the dashboard design to create widgets.
  * Widget refers to the widget itself, where *item* refers also to the layout and id that it has in the dashboard.
@@ -27,19 +28,3 @@ export interface DashboardDesign {
     /** array of global filters. See below. */
     globalFilters?: GlobalFilter[];
 }
-/** Global Filters:
-
-Global filters apply to multiple tables at once if a certain column is present. User-interface to set them is application-specific
-and the default (non-mWater) dashboard applies them but does not allow editing.
-
-*/
-export interface GlobalFilter {
-    /** id of column to filter */
-    columnId: string;
-    /** type of column to filter (to ensure that consistent) */
-    columnType: LiteralType;
-    /** op of expression for filtering */
-    op: string;
-    /** array of expressions to use for filtering. field expression for column will be injected as expression 0 in the resulting filter expression */
-    exprs: Expr[];
-}

package/lib/dashboards/DashboardViewComponent.js

@@ -114,17 +114,16 @@ class DashboardViewComponent extends react_1.default.Component {
     }
     // Call to print the dashboard
     print = async () => {
-        // Temporarily disable vector maps as WebGL is not supported in print mode
-        const mapTilerAPIKey = (0, vectorMaps_1.getMapTilerApiKey)();
+        // Temporarily enable print mode for vector maps
         try {
-            (0, vectorMaps_1.setMapTilerApiKey)("");
+            (0, vectorMaps_1.setPrintingModeEnabled)(true);
             // Create element at 1080 wide (use as standard printing width)
             const elem = R("div", { style: { width: 1080 } }, R(DashboardViewComponent, lodash_1.default.extend({}, this.props, { onDesignChange: null, printMode: true })));
             const printer = new ReactElementPrinter_1.default();
             await printer.print(elem, { delay: 5000 });
         }
         finally {
-            (0, vectorMaps_1.setMapTilerApiKey)(mapTilerAPIKey);
+            (0, vectorMaps_1.setPrintingModeEnabled)(false);
         }
     };
     // Get filters from props filters combined with dashboard filters

package/lib/dashboards/LayoutOptionsComponent.js

@@ -103,9 +103,10 @@ function ThemeToggle(props) {
         return null;
     }
     return (react_1.default.createElement(bootstrap_1.FormGroup, { label: "Theme" },
-        renderStyleItem("default"),
-        renderStyleItem("greybg"),
-        renderStyleItem("story")));
+        react_1.default.createElement("div", { className: "list-group" },
+            renderStyleItem("default"),
+            renderStyleItem("greybg"),
+            renderStyleItem("story"))));
 }
 function WidthSelector(props) {
     return (react_1.default.createElement(bootstrap_1.Select, { value: props.value, onChange: props.onChange, nullLabel: "N/A", options: [

package/lib/dashboards/ServerDashboardDataSource.d.ts

@@ -56,6 +56,7 @@ declare class ServerWidgetMapDataSource implements MapDataSource {
         e: number;
         s: number;
     } | null) => void): void;
+    getQuickfiltersDataSource(): QuickfiltersDataSource;
 }
 interface ServerWidgetLayerDataSourceOptions extends ServerDashboardDataSourceOptions {
     widgetId: string;

package/lib/dashboards/ServerDashboardDataSource.js

@@ -184,6 +184,9 @@ class ServerWidgetMapDataSource {
             return callback(new Error(xhr.responseText));
         });
     }
+    getQuickfiltersDataSource() {
+        return new ServerQuickfilterDataSource(this.options);
+    }
 }
 class ServerWidgetLayerDataSource {
     options;

package/lib/dashboards/SettingsModalComponent.d.ts

@@ -1,33 +1,22 @@
-import PropTypes from "prop-types";
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
+import { DashboardDesign } from "./DashboardDesign";
 export interface SettingsModalComponentProps {
     onDesignChange: any;
     schema: Schema;
     dataSource: DataSource;
 }
 interface SettingsModalComponentState {
-    design: any;
+    design: DashboardDesign | null;
 }
 export default class SettingsModalComponent extends React.Component<SettingsModalComponentProps, SettingsModalComponentState> {
-    static contextTypes: {
-        globalFiltersElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    constructor(props: any);
+    constructor(props: SettingsModalComponentProps);
     show(design: any): void;
     handleSave: () => void;
     handleCancel: () => void;
     handleDesignChange: (design: any) => void;
     handleFiltersChange: (filters: any) => void;
     handleGlobalFiltersChange: (globalFilters: any) => void;
-    render(): React.CElement<{
-        size: string;
-        onCancel: () => void;
-        onAction: () => void;
-    }, React.Component<{
-        size: string;
-        onCancel: () => void;
-        onAction: () => void;
-    }, any, any>> | null;
+    render(): React.JSX.Element | null;
 }
 export {};

package/lib/dashboards/SettingsModalComponent.js

@@ -26,7 +26,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
@@ -38,9 +37,9 @@ const DashboardUtils = __importStar(require("./DashboardUtils"));
 const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
 const QuickfiltersDesignComponent_1 = __importDefault(require("../quickfilter/QuickfiltersDesignComponent"));
 const FiltersDesignerComponent_1 = __importDefault(require("../FiltersDesignerComponent"));
+const MWaterContextComponent_1 = require("../MWaterContextComponent");
 // Popup with settings for dashboard
 class SettingsModalComponent extends react_1.default.Component {
-    static contextTypes = { globalFiltersElementFactory: prop_types_1.default.func };
     constructor(props) {
         super(props);
         this.state = {
@@ -81,42 +80,29 @@ class SettingsModalComponent extends react_1.default.Component {
                 label: language.en + " (" + language.name + ")"
             };
         });
-        return R(ActionCancelModalComponent_1.default, {
-            size: "large",
-            onCancel: this.handleCancel,
-            onAction: this.handleSave
-        }, R("div", { style: { paddingBottom: 200 } }, R("h4", null, "Quick Filters"), R("div", { className: "text-muted" }, "Quick filters are shown to the user as a dropdown at the top of the dashboard and can be used to filter data of widgets."), filterableTables.length > 0
-            ? R(QuickfiltersDesignComponent_1.default, {
-                design: this.state.design.quickfilters || [],
-                onDesignChange: (design) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { quickfilters: { $set: design } })),
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                tables: filterableTables
-            })
-            : "Nothing to quickfilter. Add widgets to the dashboard", R("h4", { style: { paddingTop: 10 } }, "Filters"), R("div", { className: "text-muted" }, "Filters are built in to the dashboard and cannot be changed by viewers of the dashboard."), filterableTables.length > 0
-            ? R(FiltersDesignerComponent_1.default, {
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                filters: this.state.design.filters,
-                onFiltersChange: this.handleFiltersChange,
-                filterableTables
-            })
-            : "Nothing to filter. Add widgets to the dashboard", this.context.globalFiltersElementFactory
-            ? R("div", null, R("h4", { style: { paddingTop: 10 } }, "Global Filters"), this.context.globalFiltersElementFactory({
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                filterableTables,
-                globalFilters: this.state.design.globalFilters || [],
-                onChange: this.handleGlobalFiltersChange
-            }))
-            : undefined, R("h4", { style: { paddingTop: 10 } }, "Language"), R("div", { className: "text-muted" }, "Controls the preferred language of widgets and uses specified language when available"), R(react_select_1.default, {
-            value: lodash_1.default.findWhere(localeOptions, { value: this.state.design.locale || "en" }) || null,
-            options: localeOptions,
-            onChange: (locale) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { locale: { $set: locale.value } }))
-        }), R("h4", { style: { paddingTop: 10 } }, "Advanced"), R(ui.Checkbox, {
-            value: this.state.design.implicitFiltersEnabled != null ? this.state.design.implicitFiltersEnabled : true,
-            onChange: (value) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { implicitFiltersEnabled: { $set: value } }))
-        }, "Enable Implicit Filtering (leave unchecked for new dashboards)")));
+        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { size: "large", onCancel: this.handleCancel, onAction: this.handleSave },
+            react_1.default.createElement("div", { style: { paddingBottom: 200 } },
+                react_1.default.createElement("h4", null, "Quick Filters"),
+                react_1.default.createElement("div", { className: "text-muted" }, "Quick filters are shown to the user as a dropdown at the top of the dashboard and can be used to filter data of widgets."),
+                filterableTables.length > 0 ? (react_1.default.createElement(QuickfiltersDesignComponent_1.default, { design: this.state.design.quickfilters || [], onDesignChange: (design) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { quickfilters: { $set: design } })), schema: this.props.schema, dataSource: this.props.dataSource, tables: filterableTables })) : ("Nothing to quickfilter. Add widgets to the dashboard"),
+                react_1.default.createElement("h4", { style: { paddingTop: 10 } }, "Filters"),
+                react_1.default.createElement("div", { className: "text-muted" }, "Filters are built in to the dashboard and cannot be changed by viewers of the dashboard."),
+                filterableTables.length > 0 ? (react_1.default.createElement(FiltersDesignerComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, filters: this.state.design.filters, onFiltersChange: this.handleFiltersChange, filterableTables: filterableTables })) : ("Nothing to filter. Add widgets to the dashboard"),
+                react_1.default.createElement(MWaterContextComponent_1.GlobalFiltersElementFactoryContext.Consumer, null, globalFiltersElementFactory => globalFiltersElementFactory ? (react_1.default.createElement("div", null,
+                    react_1.default.createElement("h4", { style: { paddingTop: 10 } }, "Global Filters"),
+                    globalFiltersElementFactory({
+                        schema: this.props.schema,
+                        dataSource: this.props.dataSource,
+                        filterableTables,
+                        globalFilters: this.state.design.globalFilters || [],
+                        onChange: this.handleGlobalFiltersChange
+                    }))) : undefined),
+                react_1.default.createElement("h4", { style: { paddingTop: 10 } }, "Language"),
+                react_1.default.createElement("div", { className: "text-muted" }, "Controls the preferred language of widgets and uses specified language when available"),
+                react_1.default.createElement(react_select_1.default, { value: lodash_1.default.findWhere(localeOptions, { value: this.state.design.locale || "en" }) || null, options: localeOptions, onChange: (locale) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { locale: { $set: locale.value } })) }),
+                this.state.design.implicitFiltersEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("h4", { style: { paddingTop: 10 } }, "Advanced"),
+                    react_1.default.createElement(ui.Checkbox, { value: this.state.design.implicitFiltersEnabled != null ? this.state.design.implicitFiltersEnabled : true, onChange: (value) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { implicitFiltersEnabled: { $set: value } })) }, "Enable Implicit Filtering (leave unchecked for new dashboards)"))))));
     }
 }
 exports.default = SettingsModalComponent;