@mwater/visualization 5.0.0 → 5.1.0

package/lib/quickfilter/TextLiteralComponent.d.ts

@@ -22,192 +22,8 @@ export default class TextLiteralComponent extends React.Component<TextLiteralCom
     handleSingleChange: (val: any) => any;
     handleMultipleChange: (val: any) => any;
     getOptions: (input: any, cb: any) => void;
-    renderSingle(): React.FunctionComponentElement<Omit<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
-        tabIndex?: number | undefined;
-        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
-        placeholder?: React.ReactNode;
-        'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        isLoading?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        isRtl?: boolean | undefined;
-        isMulti?: boolean | undefined;
-        controlShouldRenderValue?: boolean | undefined;
-        loadingMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        noOptionsMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        backspaceRemovesValue?: boolean | undefined;
-        blurInputOnSelect?: boolean | undefined;
-        captureMenuScroll?: boolean | undefined;
-        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        closeMenuOnSelect?: boolean | undefined;
-        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
-        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
-        escapeClearsValue?: boolean | undefined;
-        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
-        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
-        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
-        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
-        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
-        isSearchable?: boolean | undefined;
-        minMenuHeight?: number | undefined;
-        maxMenuHeight?: number | undefined;
-        menuIsOpen?: boolean | undefined;
-        menuPlacement?: import("react-select").MenuPlacement | undefined;
-        menuPosition?: import("react-select").MenuPosition | undefined;
-        menuShouldBlockScroll?: boolean | undefined;
-        menuShouldScrollIntoView?: boolean | undefined;
-        openMenuOnFocus?: boolean | undefined;
-        openMenuOnClick?: boolean | undefined;
-        pageSize?: number | undefined;
-        screenReaderStatus?: ((obj: {
-            count: number;
-        }) => string) | undefined;
-        tabSelectsValue?: boolean | undefined;
-        unstyled?: boolean | undefined;
-    } & {}, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
-        tabIndex?: number | undefined;
-        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
-        placeholder?: React.ReactNode;
-        'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        isLoading?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        isRtl?: boolean | undefined;
-        isMulti?: boolean | undefined;
-        controlShouldRenderValue?: boolean | undefined;
-        loadingMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        noOptionsMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        backspaceRemovesValue?: boolean | undefined;
-        blurInputOnSelect?: boolean | undefined;
-        captureMenuScroll?: boolean | undefined;
-        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        closeMenuOnSelect?: boolean | undefined;
-        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
-        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
-        escapeClearsValue?: boolean | undefined;
-        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
-        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
-        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
-        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
-        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
-        isSearchable?: boolean | undefined;
-        minMenuHeight?: number | undefined;
-        maxMenuHeight?: number | undefined;
-        menuIsOpen?: boolean | undefined;
-        menuPlacement?: import("react-select").MenuPlacement | undefined;
-        menuPosition?: import("react-select").MenuPosition | undefined;
-        menuShouldBlockScroll?: boolean | undefined;
-        menuShouldScrollIntoView?: boolean | undefined;
-        openMenuOnFocus?: boolean | undefined;
-        openMenuOnClick?: boolean | undefined;
-        pageSize?: number | undefined;
-        screenReaderStatus?: ((obj: {
-            count: number;
-        }) => string) | undefined;
-        tabSelectsValue?: boolean | undefined;
-        unstyled?: boolean | undefined;
-    } & {}> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & import("react-select/dist/declarations/src/useAsync").AsyncAdditionalProps<unknown, import("react-select").GroupBase<unknown>> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>>;
-    renderMultiple(): React.FunctionComponentElement<Omit<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
-        tabIndex?: number | undefined;
-        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
-        placeholder?: React.ReactNode;
-        'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        isLoading?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        isRtl?: boolean | undefined;
-        isMulti?: boolean | undefined;
-        controlShouldRenderValue?: boolean | undefined;
-        loadingMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        noOptionsMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        backspaceRemovesValue?: boolean | undefined;
-        blurInputOnSelect?: boolean | undefined;
-        captureMenuScroll?: boolean | undefined;
-        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        closeMenuOnSelect?: boolean | undefined;
-        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
-        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
-        escapeClearsValue?: boolean | undefined;
-        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
-        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
-        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
-        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
-        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
-        isSearchable?: boolean | undefined;
-        minMenuHeight?: number | undefined;
-        maxMenuHeight?: number | undefined;
-        menuIsOpen?: boolean | undefined;
-        menuPlacement?: import("react-select").MenuPlacement | undefined;
-        menuPosition?: import("react-select").MenuPosition | undefined;
-        menuShouldBlockScroll?: boolean | undefined;
-        menuShouldScrollIntoView?: boolean | undefined;
-        openMenuOnFocus?: boolean | undefined;
-        openMenuOnClick?: boolean | undefined;
-        pageSize?: number | undefined;
-        screenReaderStatus?: ((obj: {
-            count: number;
-        }) => string) | undefined;
-        tabSelectsValue?: boolean | undefined;
-        unstyled?: boolean | undefined;
-    } & {}, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
-        tabIndex?: number | undefined;
-        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
-        placeholder?: React.ReactNode;
-        'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        isLoading?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        isRtl?: boolean | undefined;
-        isMulti?: boolean | undefined;
-        controlShouldRenderValue?: boolean | undefined;
-        loadingMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        noOptionsMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        backspaceRemovesValue?: boolean | undefined;
-        blurInputOnSelect?: boolean | undefined;
-        captureMenuScroll?: boolean | undefined;
-        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        closeMenuOnSelect?: boolean | undefined;
-        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
-        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
-        escapeClearsValue?: boolean | undefined;
-        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
-        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
-        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
-        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
-        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
-        isSearchable?: boolean | undefined;
-        minMenuHeight?: number | undefined;
-        maxMenuHeight?: number | undefined;
-        menuIsOpen?: boolean | undefined;
-        menuPlacement?: import("react-select").MenuPlacement | undefined;
-        menuPosition?: import("react-select").MenuPosition | undefined;
-        menuShouldBlockScroll?: boolean | undefined;
-        menuShouldScrollIntoView?: boolean | undefined;
-        openMenuOnFocus?: boolean | undefined;
-        openMenuOnClick?: boolean | undefined;
-        pageSize?: number | undefined;
-        screenReaderStatus?: ((obj: {
-            count: number;
-        }) => string) | undefined;
-        tabSelectsValue?: boolean | undefined;
-        unstyled?: boolean | undefined;
-    } & {}> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & import("react-select/dist/declarations/src/useAsync").AsyncAdditionalProps<unknown, import("react-select").GroupBase<unknown>> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>>;
+    renderSingle(): React.FunctionComponentElement<Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & import("react-select/dist/declarations/src/useAsync").AsyncAdditionalProps<unknown, import("react-select").GroupBase<unknown>> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>>;
+    renderMultiple(): React.FunctionComponentElement<Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & import("react-select/dist/declarations/src/useAsync").AsyncAdditionalProps<unknown, import("react-select").GroupBase<unknown>> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>>;
     render(): React.DetailedReactHTMLElement<{
         style: {
             width: string;

package/lib/quickfilter/TextLiteralComponent.js

@@ -33,6 +33,9 @@ class TextLiteralComponent extends react_1.default.Component {
         const exprType = exprUtils.getExprType(this.props.expr);
         // Create query to get matches
         const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
+        if (!this.props.expr.table) {
+            return;
+        }
         // Add filter for input (simple if just text)
         if (exprType === "text") {
             if (input) {

package/lib/valueFormatter.js

@@ -1,11 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 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");
+const dayjs_1 = __importDefault(require("./dayjs"));
 /** Determine if can format type */
 function canFormatType(type) {
-    return type == "number" || type == "geometry";
+    return type == "number" || type == "geometry" || type === "date" || type === "datetime";
 }
 exports.canFormatType = canFormatType;
 /** Get available options for formatting a type. Null if not available */
@@ -28,6 +32,41 @@ function getFormatOptions(type) {
             { value: "UTM", label: "UTM" }
         ];
     }
+    if (type == "date") {
+        return [
+            { value: "ll", label: (0, dayjs_1.default)().format("ll") },
+            { value: "YYYY-MM-DD", label: (0, dayjs_1.default)().format("YYYY-MM-DD") },
+            { value: "YYYY-MMM-DD", label: (0, dayjs_1.default)().format("YYYY-MMM-DD") },
+            { value: "YYYY-MM", label: (0, dayjs_1.default)().format("YYYY-MM") },
+            { value: "YYYY", label: (0, dayjs_1.default)().format("YYYY") },
+            { value: "MMM YYYY", label: (0, dayjs_1.default)().format("MMM YYYY") },
+            { value: "MMM DD, YYYY", label: (0, dayjs_1.default)().format("MMM DD, YYYY") },
+            { value: "MMMM D, YYYY", label: (0, dayjs_1.default)().format("MMMM D, YYYY") },
+            { value: "MM/DD/YYYY", label: (0, dayjs_1.default)().format("MM/DD/YYYY") },
+            { value: "DD/MM/YYYY", label: (0, dayjs_1.default)().format("DD/MM/YYYY") },
+            { value: "DD-MM-YYYY", label: (0, dayjs_1.default)().format("DD-MM-YYYY") },
+        ];
+    }
+    if (type == "datetime") {
+        return [
+            { value: "lll", label: (0, dayjs_1.default)().format("lll") },
+            { value: "llll", label: (0, dayjs_1.default)().format("llll") },
+            { value: "YYYY-MM-DD", label: (0, dayjs_1.default)().format("YYYY-MM-DD") },
+            { value: "YYYY-MMM-DD", label: (0, dayjs_1.default)().format("YYYY-MMM-DD") },
+            { value: "YYYY-MM", label: (0, dayjs_1.default)().format("YYYY-MM") },
+            { value: "YYYY", label: (0, dayjs_1.default)().format("YYYY") },
+            { value: "MMM YYYY", label: (0, dayjs_1.default)().format("MMM YYYY") },
+            { value: "MMM DD, YYYY h:mm A", label: (0, dayjs_1.default)().format("MMM DD, YYYY h:mm A") },
+            { value: "MMMM D, YYYY h:mm A", label: (0, dayjs_1.default)().format("MMMM D, YYYY h:mm A") },
+            { value: "MMM DD, YYYY", label: (0, dayjs_1.default)().format("MMM DD, YYYY") },
+            { value: "MMMM D, YYYY", label: (0, dayjs_1.default)().format("MMMM D, YYYY") },
+            { value: "MM/DD/YYYY", label: (0, dayjs_1.default)().format("MM/DD/YYYY") },
+            { value: "DD/MM/YYYY", label: (0, dayjs_1.default)().format("DD/MM/YYYY") },
+            { value: "DD-MM-YYYY", label: (0, dayjs_1.default)().format("DD-MM-YYYY") },
+            { value: "YYYY-MM-DD HH:mm:ss", label: (0, dayjs_1.default)().format("YYYY-MM-DD HH:mm:ss") },
+            { value: "ISO 8601", label: (0, dayjs_1.default)().toISOString() },
+        ];
+    }
     return null;
 }
 exports.getFormatOptions = getFormatOptions;
@@ -39,6 +78,12 @@ function getDefaultFormat(type) {
     if (type == "geometry") {
         return "lat, lng";
     }
+    if (type == "date") {
+        return "ll";
+    }
+    if (type == "datetime") {
+        return "lll";
+    }
     throw new Error("Not supported");
 }
 exports.getDefaultFormat = getDefaultFormat;
@@ -59,6 +104,12 @@ function formatValue(type, value, format, locale, legacyPercentFormat) {
         }
         return (0, d3_format_1.format)(format)(value);
     }
+    if (["date", "datetime"].includes(type)) {
+        if (format == "ISO 8601") {
+            return (0, dayjs_1.default)(value).toISOString();
+        }
+        return (0, dayjs_1.default)(value).format(format);
+    }
     if (type == "geometry") {
         if (format == "UTM") {
             if (value.type == "Point") {

package/lib/widgets/ImageWidgetComponent.js

@@ -37,7 +37,7 @@ const DropdownWidgetComponent_1 = __importDefault(require("./DropdownWidgetCompo
 const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalPopupComponent"));
 const TabbedComponent_1 = __importDefault(require("@mwater/react-library/lib/TabbedComponent"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
-const TableSelectComponent_1 = __importDefault(require("../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const ImageUploaderComponent_1 = __importDefault(require("./ImageUploaderComponent"));
 const ImagelistCarouselComponent_1 = __importDefault(require("./ImagelistCarouselComponent"));
 class ImageWidgetComponent extends AsyncLoadComponent_1.default {
@@ -257,7 +257,7 @@ class ImageWidgetDesignComponent extends react_1.default.Component {
         });
     };
     renderExpressionEditor() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, { schema: this.props.schema, value: this.state.table, onChange: this.handleTableChange }), R("br"), this.state.table
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, { schema: this.props.schema, value: this.state.table, onChange: this.handleTableChange }), R("br"), this.state.table
             ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Field"), ": ", R(expressions_ui_1.ExprComponent, {
                 schema: this.props.schema,
                 dataSource: this.props.dataSource,

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

@@ -32,7 +32,7 @@ const R = react_1.default.createElement;
 const ui = __importStar(require("../../../UIComponents"));
 const AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
-const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const ColorComponent_1 = __importDefault(require("../../../ColorComponent"));
 class CalendarChartDesignerComponent extends react_1.default.Component {
     // Updates design with the specified changes
@@ -67,7 +67,7 @@ class CalendarChartDesignerComponent extends react_1.default.Component {
         this.updateDesign({ cellColor });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,

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

@@ -15,7 +15,7 @@ export default class ImageMosaicChart extends Chart {
     }>;
     getData(design: any, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[] | null, callback: any): void;
     createViewElement(options: ChartCreateViewElementOptions): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-    createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any): null;
+    createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any): never[];
     getFilterableTables(design: any, schema: Schema): any[];
     getPlaceholderIcon(): string;
 }

package/lib/widgets/charts/imagemosaic/ImageMosaicChart.js

@@ -157,7 +157,7 @@ class ImageMosaicChart extends Chart_1.default {
     }
     createDataTable(design, schema, dataSource, data) {
         alert("Not available for Image Mosaics");
-        return null;
+        return [];
     }
     // TODO
     // renderHeaderCell = (column) =>

package/lib/widgets/charts/imagemosaic/ImageMosaicChartDesignerComponent.js

@@ -32,7 +32,7 @@ const R = react_1.default.createElement;
 const ui = __importStar(require("../../../UIComponents"));
 const AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
-const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 class ImageMosaicChartDesignerComponent extends react_1.default.Component {
     // Updates design with the specified changes
     updateDesign(changes) {
@@ -52,7 +52,7 @@ class ImageMosaicChartDesignerComponent extends react_1.default.Component {
         return this.updateDesign({ imageAxis });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,

package/lib/widgets/charts/layered/LayeredChartCompiler.d.ts

@@ -3,7 +3,7 @@ import { ExprUtils } from "@mwater/expressions";
 import AxisBuilder from "../../../axes/AxisBuilder";
 import { JsonQLFilter, WidgetScope } from "../../..";
 import { LayeredChartDesign } from "./LayeredChartDesign";
-import { JsonQLQuery } from "@mwater/jsonql";
+import { JsonQLExpr, JsonQLQuery } from "@mwater/jsonql";
 import { ChartOptions, PrimitiveArray, ChartTypes } from "billboard.js";
 /** Data for a chart */
 type C3ChartData = {

package/lib/widgets/charts/layered/LayeredChartLayerDesignerComponent.js

@@ -37,7 +37,7 @@ const ColorComponent_1 = __importDefault(require("../../../ColorComponent"));
 const LayeredChartUtils = __importStar(require("./LayeredChartUtils"));
 const LayeredChartCompiler_1 = __importDefault(require("./LayeredChartCompiler"));
 const uiComponents = __importStar(require("../../../UIComponents"));
-const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
 const PopoverHelpComponent_1 = __importDefault(require("@mwater/react-library/lib/PopoverHelpComponent"));
@@ -165,7 +165,7 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
     }
     renderTable() {
         const layer = this.props.design.layers[this.props.index];
-        return R(uiComponents.SectionComponent, { icon: "fa-database", label: "Data Source" }, R(TableSelectComponent_1.default, {
+        return R(uiComponents.SectionComponent, { icon: "fa-database", label: "Data Source" }, R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: layer.table,
             onChange: this.handleTableChange,

package/lib/widgets/charts/pivot/PivotChartDesignerComponent.js

@@ -32,7 +32,7 @@ const R = react_1.default.createElement;
 const uuid_1 = __importDefault(require("uuid"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
-const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
 // Designer for overall chart. Has a special setup mode first time it is run
 class PivotChartDesignerComponent extends react_1.default.Component {
@@ -76,7 +76,7 @@ class PivotChartDesignerComponent extends react_1.default.Component {
         return this.updateDesign({ intersections });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,

package/lib/widgets/charts/pivot/PivotChartLayout.d.ts

@@ -32,8 +32,9 @@ export interface PivotChartLayoutCell {
     text?: string;
     align: "left" | "center" | "right";
     /** section id of either a segment or intersection or blank area. Always a rectangle.
-     * Id is like intersection id if intersection, id of segment if segment */
-    section: string;
+     * Id is like intersection id if intersection, id of segment if segment. Undefined if doesn't
+     * exist yet. */
+    section?: string;
     /** true if cell is on top edge of section */
     sectionTop?: boolean;
     /** true if cell is on bottom edge of section */

package/lib/widgets/charts/pivot/PivotChartLayoutComponent.js

@@ -62,7 +62,7 @@ class PivotChartLayoutComponent extends react_1.default.Component {
                 layout: this.props.layout,
                 rowIndex,
                 columnIndex,
-                onHover: this.props.editable ? () => this.setState({ hoverSection: cell.section }) : undefined,
+                onHover: this.props.editable ? () => this.setState({ hoverSection: cell.section ?? null }) : undefined,
                 hoverSection: this.props.editable ? this.state.hoverSection : undefined,
                 onEditSection: this.props.onEditSection ? this.props.onEditSection.bind(null, cell.section) : undefined,
                 onSummarizeSegment: this.props.onSummarizeSegment
@@ -248,6 +248,9 @@ class LayoutCellComponent extends react_1.default.Component {
     }
     // Render an unconfigured cell
     renderUnconfigured(cell) {
+        if (!cell.section) {
+            return null;
+        }
         return R("span", { style: { fontSize: "90%" } }, R("a", { className: "link-plain", onClick: this.props.onEditSection }, "Edit"), cell.summarize
             ? [
                 R("span", { className: "text-muted" }, " / "),

package/lib/widgets/charts/pivot/PivotChartQueryBuilder.js

@@ -119,7 +119,7 @@ class PivotChartQueryBuilder {
                     const columnSegment = columnPath[i];
                     query.selects.push({
                         type: "select",
-                        expr: this.axisBuilder.compileAxis({ axis: columnSegment.valueAxis, tableAlias: "main" }),
+                        expr: compileSegmentAxis(columnSegment.valueAxis),
                         alias: `c${i}`
                     });
                     query.groupBy.push(i + 1 + rowPath.length);

package/lib/widgets/charts/table/TableChart.js

@@ -234,18 +234,29 @@ class TableChart extends Chart_1.default {
             }),
             from: { type: "subquery", query, alias: "t" },
         };
-        return dataSource.performQuery(query, (error, data) => {
-            if (totalColumns.length > 0)
+        // Query for the data in question. 
+        dataSource.performQuery(query, (error, data) => {
+            if (error) {
+                callback(error);
+            }
+            else if (totalColumns.length > 0) {
+                // Query for the summaries
                 dataSource.performQuery(summaryQuery, (error, summary) => {
-                    callback(error, { main: data, summary: summary[0] });
+                    if (error) {
+                        callback(error);
+                    }
+                    else {
+                        callback(error, { main: data, summary: summary[0] });
+                    }
                 });
+            }
             else
                 callback(error, { main: data });
         });
     }
     // Create a view element for the chart
     // Options include:
-    //   schema: schema to use
+    // p  schema: schema to use
     //   dataSource: dataSource to use
     //   design: design of the chart
     //   data: results from queries

package/lib/widgets/charts/table/TableChartDesignerComponent.js

@@ -36,7 +36,7 @@ const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_ui_2 = require("@mwater/expressions-ui");
 const OrderingsComponent_1 = __importDefault(require("./OrderingsComponent"));
-const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const expressions_ui_3 = require("@mwater/expressions-ui");
 const ReorderableListComponent_1 = __importDefault(require("@mwater/react-library/lib/reorderable/ReorderableListComponent"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const valueFormatter_1 = require("../../../valueFormatter");
@@ -79,7 +79,7 @@ class TableChartDesignerComponent extends react_1.default.Component {
         this.updateDesign({ columns });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_3.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,

package/lib/widgets/charts/table/TableChartViewComponent.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
+import { TableChartDesign } from "./TableChart";
 export interface TableChartViewComponentProps {
     /** Design of chart */
-    design: any;
+    design: TableChartDesign;
     /** Data that the table has requested */
     data: any;
     /** Schema to use */

package/lib/widgets/charts/table/TableChartViewComponent.js

@@ -7,7 +7,6 @@ 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 react_linkify_1 = __importDefault(require("react-linkify"));
 const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
 const expressions_1 = require("@mwater/expressions");
@@ -149,7 +148,13 @@ class TableContentsComponent extends react_1.default.Component {
             else {
                 // Parse if should be JSON
                 if (["image", "imagelist", "geometry", "text[]"].includes(exprType || "") && lodash_1.default.isString(value)) {
-                    value = JSON.parse(value);
+                    try {
+                        value = JSON.parse(value);
+                    }
+                    catch (e) {
+                        // Ignore as can happen when re-arranging columns
+                        value = null;
+                    }
                 }
                 if (column.backgroundColorAxis && row[`bc${columnIndex}`] != null) {
                     backgroundColor = axisBuilder.getValueColor(column.backgroundColorAxis, row[`bc${columnIndex}`]) ?? "#fff";
@@ -170,10 +175,10 @@ class TableContentsComponent extends react_1.default.Component {
                         node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale);
                         break;
                     case "date":
-                        node = (0, moment_1.default)(value, "YYYY-MM-DD").format("ll");
+                        node = (0, valueFormatter_1.formatValue)(exprType, value, column.format);
                         break;
                     case "datetime":
-                        node = (0, moment_1.default)(value, moment_1.default.ISO_8601).format("lll");
+                        node = (0, valueFormatter_1.formatValue)(exprType, value, column.format);
                         break;
                     case "image":
                         node = this.renderImage(value.id);

package/lib/widgets/text/ExprItemEditorComponent.js

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const expressions_1 = require("@mwater/expressions");
 const expressions_ui_1 = require("@mwater/expressions-ui");
-const TableSelectComponent_1 = __importDefault(require("../../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const valueFormatter_1 = require("../../valueFormatter");
 const valueFormatter_2 = require("../../valueFormatter");
 const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
@@ -61,7 +61,7 @@ class ExprItemEditorComponent extends react_1.default.Component {
         }, lodash_1.default.map(formats, (format) => R("option", { key: format.value, value: format.value }, format.label))));
     }
     render() {
-        return R("div", { style: { paddingBottom: 200 } }, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+        return R("div", { style: { paddingBottom: 200 } }, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.state.table,
             onChange: this.handleTableChange