@mwater/visualization 5.1.0 → 5.3.0

package/lib/widgets/charts/ChartViewComponent.d.ts

@@ -24,6 +24,8 @@ export interface ChartViewComponentProps {
     /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
     onScopeChange?: (scope: WidgetScope | null) => void;
     onRowClick?: (tableId: string, rowId: any) => void;
+    /** A key that changes when the widget should be refreshed */
+    refreshKey?: any;
 }
 interface ChartViewComponentState {
     cacheExpiry?: any;
@@ -40,6 +42,8 @@ interface ChartViewComponentState {
 export default class ChartViewComponent extends React.Component<ChartViewComponentProps, ChartViewComponentState> {
     /** Ordinal of update (0, 1, 2...) to ensure using latest */
     updateSeq: number;
+    /** Abort controller for the current data load */
+    abortController: AbortController | undefined;
     constructor(props: ChartViewComponentProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: ChartViewComponentProps): void;

package/lib/widgets/charts/ChartViewComponent.js

@@ -13,6 +13,8 @@ const R = react_1.default.createElement;
 class ChartViewComponent extends react_1.default.Component {
     /** Ordinal of update (0, 1, 2...) to ensure using latest */
     updateSeq;
+    /** Abort controller for the current data load */
+    abortController;
     constructor(props) {
         super(props);
         this.updateSeq = 0;
@@ -31,7 +33,8 @@ class ChartViewComponent extends react_1.default.Component {
     componentDidUpdate(prevProps) {
         if (!lodash_1.default.isEqual(prevProps.design, this.props.design) ||
             !lodash_1.default.isEqual(prevProps.filters, this.props.filters) ||
-            this.props.dataSource.getCacheExpiry() !== this.state.cacheExpiry) {
+            this.props.dataSource.getCacheExpiry() !== this.state.cacheExpiry ||
+            prevProps.refreshKey !== this.props.refreshKey) {
             // Save new cache expiry
             this.setState({ cacheExpiry: this.props.dataSource.getCacheExpiry() });
             this.updateData();
@@ -46,20 +49,25 @@ class ChartViewComponent extends react_1.default.Component {
             return;
         }
         this.updateSeq += 1;
+        if (this.abortController) {
+            this.abortController.abort("Aborting previous data load");
+        }
         // Set loading data after interval to prevent unnecessary refresh
         const dataLoadingTimeout = setTimeout(() => {
             this.setState({ dataLoading: true });
         }, 100);
         // Store updateSeq to check if latest
         const loadingUpdateSeq = this.updateSeq;
-        this.props.widgetDataSource.getData(design, this.props.filters || [], (error, data) => {
+        this.abortController = this.props.widgetDataSource.getData(design, this.props.filters || [], (error, data) => {
             // Prevent setting data loading if ready
             clearTimeout(dataLoadingTimeout);
             // Only update if latest
             if (loadingUpdateSeq == this.updateSeq) {
+                // Clear the abort controller
+                this.abortController = undefined;
                 this.setState({ dataLoading: false, dataError: error, data, validDesign: design });
             }
-        });
+        }) ?? undefined;
     }
     renderSpinner() {
         return R("div", { style: { position: "absolute", bottom: "50%", left: 0, right: 0, textAlign: "center", fontSize: 20 } }, R("i", { className: "fa fa-spinner fa-spin" }));

package/lib/widgets/charts/ChartWidget.d.ts

@@ -1,11 +1,8 @@
-import PropTypes from "prop-types";
 import React from "react";
 import Widget, { CreateViewElementOptions } from "./../Widget";
-import ChartViewComponent from "./ChartViewComponent";
 import { DataSource, Schema } from "@mwater/expressions";
-import { WidgetDataSource } from "../WidgetDataSource";
 import Chart from "./Chart";
-import { JsonQLFilter } from "../../JsonQLFilter";
+import { ChartWidgetComponent } from "./ChartWidgetComponent";
 /** A widget which is a chart */
 export default class ChartWidget extends Widget {
     chart: Chart;
@@ -15,73 +12,3 @@ export default class ChartWidget extends Widget {
     getFilterableTables(design: any, schema: Schema): string[];
     isAutoHeight(): boolean;
 }
-interface ChartWidgetComponentProps {
-    /** schema to use */
-    schema: Schema;
-    /** data source to use */
-    dataSource: DataSource;
-    widgetDataSource: WidgetDataSource;
-    /** Chart object to use */
-    chart: Chart;
-    /** Design of chart */
-    design: any;
-    /** null/undefined for readonly */
-    onDesignChange?: any;
-    /** Width in pixels */
-    width: number;
-    /** Height, if a fixed height widget, or one that uses aspect ratio */
-    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: JsonQLFilter[];
-    /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
-    onScopeChange?: any;
-    /** Called with (tableId, rowId) when item is clicked */
-    onRowClick?: any;
-    /** Connects move handle for dragging (see WidgetContainerComponent) TODO REMOVE */
-    connectMoveHandle?: any;
-    /** Connects resize handle for dragging (see WidgetContainerComponent) TODO REMOVE */
-    connectResizeHandle?: any;
-}
-declare class ChartWidgetComponent extends React.PureComponent<ChartWidgetComponentProps, {
-    editDesign: any;
-}> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
-    constructor(props: any);
-    handleSaveCsvFile: () => void;
-    handleStartEditing: () => void;
-    handleEndEditing: () => void;
-    handleCancelEditing: () => void;
-    handleEditDesignChange: (design: any) => void;
-    renderChart(design: any, onDesignChange: any, width: any, height: any): React.CElement<import("./ChartViewComponent").ChartViewComponentProps, ChartViewComponent>;
-    renderEditor(): React.CElement<{
-        isOpen: boolean;
-        onRequestClose: () => void;
-    }, React.Component<{
-        isOpen: boolean;
-        onRequestClose: () => void;
-    }, any, any>> | React.CElement<{
-        size: string;
-        onCancel: () => void;
-        onAction: () => void;
-    }, React.Component<{
-        size: string;
-        onCancel: () => void;
-        onAction: () => void;
-    }, any, any>> | null;
-    renderEditLink(): React.DetailedReactHTMLElement<{
-        className: string;
-        onClick: () => void;
-    }, HTMLElement>;
-    render(): React.DetailedReactHTMLElement<{
-        onDoubleClick: (() => void) | undefined;
-        style: {
-            position: "relative";
-            width: number;
-        };
-    }, HTMLElement>;
-}
-export {};

package/lib/widgets/charts/ChartWidget.js

@@ -1,41 +1,12 @@
 "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 prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const Widget_1 = __importDefault(require("./../Widget"));
-const DropdownWidgetComponent_1 = __importDefault(require("./../DropdownWidgetComponent"));
-const CsvBuilder_1 = __importDefault(require("./../../CsvBuilder"));
-const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
-const ChartViewComponent_1 = __importDefault(require("./ChartViewComponent"));
-const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
-const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const ChartWidgetComponent_1 = require("./ChartWidgetComponent");
 /** A widget which is a chart */
 class ChartWidget extends Widget_1.default {
     chart;
@@ -57,7 +28,7 @@ class ChartWidget extends Widget_1.default {
     //  height: height in pixels on screen
     //  onRowClick: Called with (tableId, rowId) when item is clicked
     createViewElement(options) {
-        return R(ChartWidgetComponent, {
+        return R(ChartWidgetComponent_1.ChartWidgetComponent, {
             chart: this.chart,
             design: options.design,
             schema: options.schema,
@@ -69,7 +40,8 @@ class ChartWidget extends Widget_1.default {
             onDesignChange: options.onDesignChange,
             width: options.width,
             height: options.height,
-            onRowClick: options.onRowClick
+            onRowClick: options.onRowClick,
+            refreshKey: options.refreshKey
         });
     }
     // Get the data that the widget needs. This will be called on the server, typically.
@@ -95,154 +67,3 @@ class ChartWidget extends Widget_1.default {
     }
 }
 exports.default = ChartWidget;
-// Complete chart widget
-class ChartWidgetComponent extends react_1.default.PureComponent {
-    static contextTypes = { locale: prop_types_1.default.string };
-    constructor(props) {
-        super(props);
-        this.state = {
-            // Design that is being edited. Change is propagated on closing window
-            editDesign: null
-        };
-    }
-    // Saves a csv file to disk
-    handleSaveCsvFile = () => {
-        // Get the data
-        return this.props.widgetDataSource.getData(this.props.design, this.props.filters, (err, data) => {
-            if (err) {
-                return alert("Failed to get data: " + err.message);
-            }
-            // Create data table
-            const table = this.props.chart.createDataTable(this.props.design, this.props.schema, this.props.dataSource, data, this.context.locale);
-            if (!table) {
-                return;
-            }
-            // Convert to csv
-            let csv = new CsvBuilder_1.default().build(table);
-            // Add BOM
-            csv = "\uFEFF" + csv;
-            // Make a blob and save
-            const blob = new Blob([csv], { type: "text/csv" });
-            // Require at use as causes server problems
-            const FileSaver = require("file-saver");
-            return FileSaver.saveAs(blob, "Exported Data.csv");
-        });
-    };
-    handleStartEditing = () => {
-        // Can't edit if already editing
-        if (this.state.editDesign) {
-            return;
-        }
-        this.setState({ editDesign: this.props.design });
-    };
-    handleEndEditing = () => {
-        this.props.onDesignChange(this.state.editDesign);
-        this.setState({ editDesign: null });
-    };
-    handleCancelEditing = () => {
-        this.setState({ editDesign: null });
-    };
-    handleEditDesignChange = (design) => {
-        this.setState({ editDesign: design });
-    };
-    renderChart(design, onDesignChange, width, height) {
-        return R(ChartViewComponent_1.default, {
-            chart: this.props.chart,
-            design,
-            onDesignChange,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            widgetDataSource: this.props.widgetDataSource,
-            scope: this.props.scope,
-            filters: this.props.filters,
-            width,
-            height,
-            onScopeChange: this.props.onScopeChange,
-            onRowClick: this.props.onRowClick
-        });
-    }
-    renderEditor() {
-        if (!this.state.editDesign) {
-            return null;
-        }
-        // Create editor
-        const editor = this.props.chart.createDesignerElement({
-            schema: this.props.schema,
-            filters: this.props.filters,
-            dataSource: this.props.dataSource,
-            design: this.state.editDesign,
-            onDesignChange: this.handleEditDesignChange
-        });
-        if (this.props.chart.hasDesignerPreview()) {
-            // Create chart (maxing out at half of width of screen)
-            const chartWidth = Math.min(document.body.clientWidth / 2, this.props.width);
-            const chartHeight = this.props.height != null ? this.props.height * (chartWidth / this.props.width) : undefined;
-            const chart = this.renderChart(this.state.editDesign, (design) => this.setState({ editDesign: design }), chartWidth, chartHeight);
-            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: chartWidth + 20,
-                    height: chartHeight != null ? chartHeight + 20 : undefined,
-                    overflow: "hidden"
-                }
-            }, chart), R("div", { style: { width: "100%", height: "100%", paddingLeft: chartWidth + 40 } }, R("div", {
-                style: {
-                    width: "100%",
-                    height: "100%",
-                    overflowY: "auto",
-                    paddingLeft: 20,
-                    paddingRight: 20,
-                    borderLeft: "solid 3px #AAA"
-                }
-            }, editor)));
-            return R(ModalWindowComponent_1.default, {
-                isOpen: true,
-                onRequestClose: this.handleEndEditing
-            }, content);
-        }
-        else {
-            return R(ActionCancelModalComponent_1.default, {
-                size: "large",
-                onCancel: this.handleCancelEditing,
-                onAction: this.handleEndEditing
-            }, editor);
-        }
-    }
-    // Render a link to start editing
-    renderEditLink() {
-        return R("div", { className: "mwater-visualization-widget-placeholder", onClick: this.handleStartEditing }, R(ui.Icon, { id: this.props.chart.getPlaceholderIcon() }));
-    }
-    render() {
-        const design = this.props.chart.cleanDesign(this.props.design, this.props.schema);
-        // Determine if valid design
-        const validDesign = !this.props.chart.validateDesign(design, this.props.schema);
-        // Determine if empty
-        const emptyDesign = this.props.chart.isEmpty(design);
-        // Create dropdown items
-        const dropdownItems = this.props.chart.createDropdownItems(design, this.props.schema, this.props.widgetDataSource, this.props.filters);
-        if (validDesign) {
-            dropdownItems.push({ label: "Export Data", icon: "save-file", onClick: this.handleSaveCsvFile });
-        }
-        if (this.props.onDesignChange != null) {
-            dropdownItems.unshift({
-                label: this.props.chart.getEditLabel(),
-                icon: "pencil",
-                onClick: this.handleStartEditing
-            });
-        }
-        // Wrap in a simple widget
-        return R("div", {
-            onDoubleClick: this.props.onDesignChange != null ? this.handleStartEditing : undefined,
-            style: { position: "relative", width: this.props.width }
-        }, this.props.onDesignChange != null ? this.renderEditor() : undefined, react_1.default.createElement(DropdownWidgetComponent_1.default, {
-            width: this.props.width,
-            height: this.props.height,
-            dropdownItems
-        }, this.renderChart(design, this.props.onDesignChange, this.props.width, this.props.height)), (emptyDesign || !validDesign) && this.props.onDesignChange != null ? this.renderEditLink() : undefined);
-    }
-}

package/lib/widgets/charts/ChartWidgetComponent.d.ts

@@ -0,0 +1,51 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import { WidgetDataSource } from "../WidgetDataSource";
+import Chart from "./Chart";
+import { JsonQLFilter } from "../../JsonQLFilter";
+export interface ChartWidgetComponentProps {
+    /** schema to use */
+    schema: Schema;
+    /** data source to use */
+    dataSource: DataSource;
+    widgetDataSource: WidgetDataSource;
+    /** Chart object to use */
+    chart: Chart;
+    /** Design of chart */
+    design: any;
+    /** null/undefined for readonly */
+    onDesignChange?: any;
+    /** Width in pixels */
+    width: number;
+    /** Height, if a fixed height widget, or one that uses aspect ratio */
+    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: JsonQLFilter[];
+    /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
+    onScopeChange?: any;
+    /** Called with (tableId, rowId) when item is clicked */
+    onRowClick?: any;
+    /** Connects move handle for dragging (see WidgetContainerComponent) TODO REMOVE */
+    connectMoveHandle?: any;
+    /** Connects resize handle for dragging (see WidgetContainerComponent) TODO REMOVE */
+    connectResizeHandle?: any;
+    /** A key that changes when the widget should be refreshed */
+    refreshKey?: any;
+}
+export declare class ChartWidgetComponent extends React.PureComponent<ChartWidgetComponentProps, {
+    editDesign: any;
+}> {
+    static contextType: React.Context<string>;
+    constructor(props: any);
+    handleSaveCsvFile: () => void | AbortController | undefined;
+    handleStartEditing: () => void;
+    handleEndEditing: () => void;
+    handleCancelEditing: () => void;
+    handleEditDesignChange: (design: any) => void;
+    renderChart(design: any, onDesignChange: any, width: any, height: any): React.JSX.Element;
+    renderEditor(): React.JSX.Element | null;
+    renderEditLink(message: string): React.JSX.Element;
+    render(): React.JSX.Element;
+}

package/lib/widgets/charts/ChartWidgetComponent.js

@@ -0,0 +1,167 @@
+"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 });
+exports.ChartWidgetComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const DropdownWidgetComponent_1 = __importDefault(require("../DropdownWidgetComponent"));
+const CsvBuilder_1 = __importDefault(require("../../CsvBuilder"));
+const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
+const ChartViewComponent_1 = __importDefault(require("./ChartViewComponent"));
+const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const layoutOptions_1 = require("../../dashboards/layoutOptions");
+// Complete chart widget
+class ChartWidgetComponent extends react_1.default.PureComponent {
+    static contextType = contexts_1.LocaleContext;
+    constructor(props) {
+        super(props);
+        this.state = {
+            // Design that is being edited. Change is propagated on closing window
+            editDesign: null
+        };
+    }
+    // Saves a csv file to disk
+    handleSaveCsvFile = () => {
+        // Get the data
+        return this.props.widgetDataSource.getData(this.props.design, this.props.filters, (err, data) => {
+            if (err) {
+                return alert("Failed to get data: " + err.message);
+            }
+            // Create data table
+            const table = this.props.chart.createDataTable(this.props.design, this.props.schema, this.props.dataSource, data, this.context);
+            if (!table) {
+                return;
+            }
+            // Convert to csv
+            let csv = new CsvBuilder_1.default().build(table);
+            // Add BOM
+            csv = "\uFEFF" + csv;
+            // Make a blob and save
+            const blob = new Blob([csv], { type: "text/csv" });
+            // Require at use as causes server problems
+            const FileSaver = require("file-saver");
+            return FileSaver.saveAs(blob, "Exported Data.csv");
+        });
+    };
+    handleStartEditing = () => {
+        // Can't edit if already editing
+        if (this.state.editDesign) {
+            return;
+        }
+        this.setState({ editDesign: this.props.design });
+    };
+    handleEndEditing = () => {
+        this.props.onDesignChange(this.state.editDesign);
+        this.setState({ editDesign: null });
+    };
+    handleCancelEditing = () => {
+        this.setState({ editDesign: null });
+    };
+    handleEditDesignChange = (design) => {
+        this.setState({ editDesign: design });
+    };
+    renderChart(design, onDesignChange, width, height) {
+        return react_1.default.createElement(ChartViewComponent_1.default, { chart: this.props.chart, design: design, onDesignChange: onDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, widgetDataSource: this.props.widgetDataSource, scope: this.props.scope, filters: this.props.filters, width: width, height: height, onScopeChange: this.props.onScopeChange, onRowClick: this.props.onRowClick, refreshKey: this.props.refreshKey });
+    }
+    renderEditor() {
+        if (!this.state.editDesign) {
+            return null;
+        }
+        // Create editor
+        const editor = this.props.chart.createDesignerElement({
+            schema: this.props.schema,
+            filters: this.props.filters,
+            dataSource: this.props.dataSource,
+            design: this.state.editDesign,
+            onDesignChange: this.handleEditDesignChange
+        });
+        if (this.props.chart.hasDesignerPreview()) {
+            // Create chart (maxing out at half of width of screen)
+            const chartWidth = Math.min(document.body.clientWidth / 2, this.props.width);
+            const chartHeight = this.props.height != null ? this.props.height * (chartWidth / this.props.width) : undefined;
+            let chart = this.renderChart(this.state.editDesign, (design) => this.setState({ editDesign: design }), chartWidth, chartHeight);
+            const content = (react_1.default.createElement("div", { style: { height: "100%", width: "100%" } },
+                react_1.default.createElement(layoutOptions_1.BlocksLayoutOptionsContext.Consumer, null, blocksLayoutOptions => (react_1.default.createElement("style", { dangerouslySetInnerHTML: { __html: (0, layoutOptions_1.createDashboardStyles)("#chart-editor", blocksLayoutOptions || (0, layoutOptions_1.getDefaultLayoutOptions)()) } }))),
+                react_1.default.createElement("div", { style: {
+                        position: "absolute",
+                        left: 0,
+                        top: 0,
+                        border: "solid 2px #EEE",
+                        borderRadius: 8,
+                        padding: 10,
+                        width: chartWidth + 20,
+                        height: chartHeight != null ? chartHeight + 20 : undefined,
+                        overflow: "hidden"
+                    }, id: "chart-editor" }, chart),
+                react_1.default.createElement("div", { style: { width: "100%", height: "100%", paddingLeft: chartWidth + 40 } },
+                    react_1.default.createElement("div", { style: {
+                            width: "100%",
+                            height: "100%",
+                            overflowY: "auto",
+                            paddingLeft: 20,
+                            paddingRight: 20,
+                            borderLeft: "solid 3px #AAA"
+                        } }, editor))));
+            return (react_1.default.createElement(ModalWindowComponent_1.default, { isOpen: true, onRequestClose: this.handleEndEditing }, content));
+        }
+        else {
+            return (react_1.default.createElement(ActionCancelModalComponent_1.default, { size: "large", onCancel: this.handleCancelEditing, onAction: this.handleEndEditing }, editor));
+        }
+    }
+    // Render a link to start editing
+    renderEditLink(message) {
+        return (react_1.default.createElement("div", { className: "mwater-visualization-widget-placeholder", onClick: this.handleStartEditing },
+            react_1.default.createElement(ui.Icon, { id: this.props.chart.getPlaceholderIcon() }),
+            react_1.default.createElement("div", { className: "mwater-visualization-widget-placeholder-message" }, message)));
+    }
+    render() {
+        const design = this.props.chart.cleanDesign(this.props.design, this.props.schema);
+        // Determine if valid design
+        const designError = this.props.chart.validateDesign(design, this.props.schema);
+        // Determine if empty
+        const emptyDesign = this.props.chart.isEmpty(design);
+        // Create dropdown items
+        const dropdownItems = this.props.chart.createDropdownItems(design, this.props.schema, this.props.widgetDataSource, this.props.filters);
+        if (!designError) {
+            dropdownItems.push({ label: "Export Data", icon: "save-file", onClick: this.handleSaveCsvFile });
+        }
+        if (this.props.onDesignChange != null) {
+            dropdownItems.unshift({
+                label: this.props.chart.getEditLabel(),
+                onClick: this.handleStartEditing
+            });
+        }
+        // Wrap in a simple widget
+        return (react_1.default.createElement("div", { onDoubleClick: this.props.onDesignChange != null ? this.handleStartEditing : undefined, style: { position: "relative", width: this.props.width } },
+            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.renderChart(design, this.props.onDesignChange, this.props.width, this.props.height)),
+            (emptyDesign || designError) && this.props.onDesignChange != null ? this.renderEditLink(designError || "") : undefined));
+    }
+}
+exports.ChartWidgetComponent = ChartWidgetComponent;

package/lib/widgets/charts/calendar/CalendarChartViewComponent.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
 import AxisBuilder from "../../../axes/AxisBuilder";
 import { Schema } from "@mwater/expressions";
@@ -30,9 +29,7 @@ export default class CalendarChartViewComponent extends React.Component<Calendar
         monthsStrokeWidth: number;
         highlightCellFillColor: string;
     };
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     axisBuilder: AxisBuilder;
     reloading: boolean;
     chart_container: any;

package/lib/widgets/charts/calendar/CalendarChartViewComponent.js

@@ -27,13 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jquery_1 = __importDefault(require("jquery"));
-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;
 const moment_1 = __importDefault(require("moment"));
 const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
 const d3 = __importStar(require("d3"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 // Require d3-tip to use it
 const d3_tip_1 = __importDefault(require("d3-tip"));
 // creates a d3 calendar visualization
@@ -43,7 +43,7 @@ class CalendarChartViewComponent extends react_1.default.Component {
         monthsStrokeWidth: 1,
         highlightCellFillColor: "#000000"
     };
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     axisBuilder;
     reloading;
     chart_container;
@@ -91,9 +91,9 @@ class CalendarChartViewComponent extends react_1.default.Component {
             return;
         }
         const scopeData = {
-            name: this.axisBuilder.summarizeAxis(this.props.design.dateAxis, this.context.locale) +
+            name: this.axisBuilder.summarizeAxis(this.props.design.dateAxis, this.context) +
                 " is " +
-                this.axisBuilder.formatValue(this.props.design.dateAxis, data, this.context.locale),
+                this.axisBuilder.formatValue(this.props.design.dateAxis, data, this.context),
             filter: {
                 jsonql: this.axisBuilder.createValueFilter(this.props.design.dateAxis, data),
                 table: this.props.design.table

package/lib/widgets/charts/imagemosaic/ImagePopupComponent.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent";
 export interface ImagePopupComponentProps {
     imageManager: any;
 }
@@ -9,12 +10,6 @@ interface ImagePopupComponentState {
 export default class ImagePopupComponent extends React.Component<ImagePopupComponentProps, ImagePopupComponentState> {
     constructor(props: any);
     show(image: any): any;
-    render(): React.CElement<{
-        isOpen: boolean;
-        onRequestClose: () => void;
-    }, React.Component<{
-        isOpen: boolean;
-        onRequestClose: () => void;
-    }, any, any>> | null;
+    render(): React.CElement<import("@mwater/react-library/lib/ModalWindowComponent").ModalWindowComponentProps, ModalWindowComponent> | null;
 }
 export {};