@mwater/visualization 5.0.0

package/lib/maps/vectorMaps.js

@@ -0,0 +1,331 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePersistedMapBounds = exports.VectorMapLogo = exports.AttributionControl = exports.mergeBaseAndUserStyle = exports.useBaseStyle = exports.useStyleMap = exports.useHoverCursor = exports.useVectorMap = exports.areVectorMapsEnabled = exports.getMapTilerApiKey = exports.setMapTilerApiKey = void 0;
+const maplibre_gl_1 = __importDefault(require("maplibre-gl"));
+const react_1 = require("react");
+const mapSymbols_1 = require("./mapSymbols");
+require("maplibre-gl/dist/maplibre-gl.css");
+require("./VectorMapViewComponent.css");
+const react_2 = __importDefault(require("react"));
+/* Hooks and functions related to displaying a vector map */
+let mapTilerApiKey = "";
+/** This must be called to set the appropriate key before use. If it is not set, vector maps will not function.
+ * Maps will fall back to leaflet if the key is not set or if set to ""
+ */
+function setMapTilerApiKey(key) {
+    mapTilerApiKey = key;
+}
+exports.setMapTilerApiKey = setMapTilerApiKey;
+function getMapTilerApiKey() {
+    return mapTilerApiKey;
+}
+exports.getMapTilerApiKey = getMapTilerApiKey;
+/** Check if vector maps are enabled by setting API key */
+function areVectorMapsEnabled() {
+    return mapTilerApiKey !== "";
+}
+exports.areVectorMapsEnabled = areVectorMapsEnabled;
+/** Loads a vector map, refreshing the WebGL context as needed */
+function useVectorMap(options) {
+    const { divRef, bounds, scrollZoom, dragPan, touchZoomRotate } = options;
+    // Maplibre map
+    const [map, setMap] = (0, react_1.useState)();
+    // Tracks if map div is visible
+    const [mapDivVisible, setMapDivVisible] = (0, react_1.useState)(false);
+    // Tracks if map has webgl context
+    const [hasWebGLContext, setHasWebGLContext] = (0, react_1.useState)(false);
+    // Increments to trigger a map reload
+    const [mapReloadCount, setMapReloadCount] = (0, react_1.useState)(0);
+    // Observe visibility of map
+    (0, react_1.useEffect)(() => {
+        if (!divRef) {
+            return;
+        }
+        const observer = new IntersectionObserver(function (entries) {
+            setMapDivVisible(entries[0].isIntersecting);
+        });
+        observer.observe(divRef);
+        return () => {
+            observer.disconnect();
+        };
+    }, [divRef]);
+    // If map div is visible, and no webgl context, trigger map load
+    (0, react_1.useEffect)(() => {
+        if (mapDivVisible && !hasWebGLContext) {
+            setMapReloadCount(rc => rc + 1);
+        }
+    }, [mapDivVisible, hasWebGLContext]);
+    // Load map and symbols
+    (0, react_1.useEffect)(() => {
+        // Don't enable if invisible
+        if (!mapDivVisible || !divRef) {
+            return;
+        }
+        const m = new maplibre_gl_1.default.Map({
+            container: divRef,
+            bounds: bounds,
+            scrollZoom: scrollZoom === false ? false : true,
+            dragPan: dragPan === false ? false : true,
+            touchZoomRotate: touchZoomRotate === false ? false : true,
+            attributionControl: false,
+            boxZoom: false,
+            style: {
+                version: 8,
+                layers: [],
+                sources: {}
+            },
+            // Prevent scrolling outside of world bounds
+            maxBounds: [
+                [-179.9, -85],
+                [179.9, 85] // Northeast coordinates
+            ],
+        });
+        setHasWebGLContext(true);
+        // Add listener for losing context
+        m.on("webglcontextlost", () => {
+            console.warn("Lost WebGL context");
+            setHasWebGLContext(false);
+        });
+        // Add zoom controls to the map.
+        m.addControl(new maplibre_gl_1.default.NavigationControl({}), "top-left");
+        // Add scale control
+        const scale = new maplibre_gl_1.default.ScaleControl({
+            unit: "metric"
+        });
+        m.addControl(scale);
+        // Speed up wheel scrolling
+        m.scrollZoom.setWheelZoomRate(1 / 250);
+        // Dynamically load symbols
+        m.on("styleimagemissing", function (ev) {
+            // Check if known
+            const mapSymbol = mapSymbols_1.mapSymbols.find((s) => s.value == ev.id);
+            if (mapSymbol) {
+                m.loadImage(mapSymbol.url, (err, image) => {
+                    if (image && !m.hasImage(mapSymbol.value)) {
+                        m.addImage(mapSymbol.value, image, { sdf: true });
+                    }
+                });
+            }
+        });
+        setMap(m);
+        return () => {
+            m.remove();
+            setHasWebGLContext(false);
+        };
+    }, [mapReloadCount]);
+    return map;
+}
+exports.useVectorMap = useVectorMap;
+/** Sets cursor as pointer when over any layers with the specified ids */
+function useHoverCursor(map, layerIds) {
+    // Setup hover effect
+    (0, react_1.useEffect)(() => {
+        if (!map) {
+            return;
+        }
+        const removes = [];
+        for (const layerId of layerIds) {
+            const onEnter = (ev) => {
+                map.getCanvas().style.cursor = 'pointer';
+            };
+            const onLeave = (ev) => {
+                map.getCanvas().style.cursor = '';
+            };
+            map.on("mousemove", layerId, onEnter);
+            map.on("mouseleave", layerId, onLeave);
+            removes.push(() => {
+                map.off("mousemove", layerId, onEnter);
+                map.off("mouseleave", layerId, onLeave);
+            });
+        }
+        return () => {
+            for (const remove of removes) {
+                remove();
+            }
+        };
+    }, [map, layerIds]);
+}
+exports.useHoverCursor = useHoverCursor;
+/** Apply user style to a map with base style */
+function useStyleMap(options) {
+    const { map, baseLayer, baseLayerOpacity, userStyle } = options;
+    // Load base style
+    const baseStyle = useBaseStyle(baseLayer);
+    // Update map style
+    const style = (0, react_1.useMemo)(() => {
+        return mergeBaseAndUserStyle(baseStyle, userStyle, baseLayerOpacity);
+    }, [baseStyle, userStyle, baseLayerOpacity]);
+    // Set map style
+    (0, react_1.useEffect)(() => {
+        // Can't load until map and style are present
+        if (!map || !style) {
+            return;
+        }
+        map.setStyle(style);
+    }, [map, style]);
+}
+exports.useStyleMap = useStyleMap;
+/** Loads a base style for the map */
+function useBaseStyle(baseLayer) {
+    // Load base layer
+    const [baseStyle, setBaseStyle] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        function loadStyle(styleUrl) {
+            // Load style
+            fetch(styleUrl)
+                .then((response) => response.json())
+                .then((styleData) => {
+                // Set style and update layers
+                setBaseStyle(styleData);
+            });
+        }
+        if (baseLayer == "cartodb_positron") {
+            loadStyle(`https://api.maptiler.com/maps/positron/style.json?key=${mapTilerApiKey}`);
+        }
+        else if (baseLayer == "cartodb_dark_matter") {
+            loadStyle(`https://api.maptiler.com/maps/darkmatter/style.json?key=${mapTilerApiKey}`);
+        }
+        else if (baseLayer == "bing_road") {
+            loadStyle(`https://api.maptiler.com/maps/streets/style.json?key=${mapTilerApiKey}`);
+        }
+        else if (baseLayer == "bing_aerial") {
+            // Switched to Bing for superior aerial imagery
+            loadBingBasemap("AerialWithLabels", 1).then(setBaseStyle);
+            // loadStyle(`https://api.maptiler.com/maps/hybrid/style.json?key=${mapTilerApiKey}`)
+        }
+        else if (baseLayer == "blank") {
+            setBaseStyle({
+                version: 8,
+                layers: [],
+                sources: {}
+            });
+        }
+    }, [baseLayer]);
+    return baseStyle;
+}
+exports.useBaseStyle = useBaseStyle;
+/** Combines a base style and a user style */
+function mergeBaseAndUserStyle(baseStyle, userStyle, baseLayerOpacity) {
+    // Merge until baseStyle and userStyle are present
+    if (!baseStyle || !userStyle) {
+        return null;
+    }
+    // Create background layer to simulate base layer opacity
+    const baseLayerOpacityLayer = {
+        id: "baseLayerOpacity",
+        type: "background",
+        paint: {
+            "background-color": "white",
+            "background-opacity": 1 - (baseLayerOpacity != null ? baseLayerOpacity : 1)
+        }
+    };
+    // Create style
+    let layers = baseStyle.layers || [];
+    // Simulate base opacity
+    if (baseLayerOpacity != null && baseLayerOpacity < 1) {
+        layers = layers.concat([baseLayerOpacityLayer]);
+    }
+    layers = layers.concat(userStyle.layers || []);
+    const style = {
+        ...baseStyle,
+        sources: {
+            ...baseStyle.sources,
+            ...userStyle.sources
+        },
+        glyphs: baseStyle.glyphs || `https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key=${mapTilerApiKey}`,
+        layers
+    };
+    return style;
+}
+exports.mergeBaseAndUserStyle = mergeBaseAndUserStyle;
+function AttributionControl(props) {
+    if (props.baseLayer == "blank") {
+        return react_2.default.createElement("div", { className: "newmap-attribution-control" }, props.extraText ? " " + props.extraText : null);
+    }
+    if (props.baseLayer == "bing_aerial") {
+        return (react_2.default.createElement("div", { className: "newmap-attribution-control" },
+            "Copyright \u00A9 2022 Microsoft and its suppliers.",
+            props.extraText ? " " + props.extraText : null));
+    }
+    return (react_2.default.createElement("div", { className: "newmap-attribution-control" },
+        react_2.default.createElement("a", { href: "https://www.maptiler.com/copyright/", target: "_blank" }, "\u00A9 MapTiler"),
+        " ",
+        react_2.default.createElement("a", { href: "https://www.openstreetmap.org/about/", target: "_blank" }, "\u00A9 OpenStreetMap"),
+        props.extraText ? " " + props.extraText : null));
+}
+exports.AttributionControl = AttributionControl;
+function VectorMapLogo(props) {
+    if (props.baseLayer == "blank") {
+        return null;
+    }
+    if (props.baseLayer == "bing_aerial") {
+        return react_2.default.createElement("img", { src: "https://dev.virtualearth.net/Branding/logo_powered_by.png", style: { position: "absolute", bottom: 38, left: 11, height: 22, zIndex: 1000, pointerEvents: "none" } });
+    }
+    return react_2.default.createElement("img", { src: require("./Maptiler-logo.png").default, style: { position: "absolute", bottom: 38, left: 11, height: 22, zIndex: 1000, pointerEvents: "none" } });
+}
+exports.VectorMapLogo = VectorMapLogo;
+async function loadBingBasemap(basemapType, opacity) {
+    // Load metadata
+    const bingApiKey = "Ao26dWY2IC8PjorsJKFaoR85EPXCnCohrJdisCWXIULAXFo0JAXquGauppTMQbyU";
+    const metadata = await fetch(`https://dev.virtualearth.net/REST/v1/Imagery/Metadata/${basemapType}?key=${bingApiKey}`).then((response) => response.json());
+    const resource = metadata.resourceSets[0].resources[0];
+    return {
+        sources: {
+            "bing_raster": {
+                type: "raster",
+                tiles: resource.imageUrlSubdomains.map((subdomain) => resource.imageUrl.replace("{subdomain}", subdomain).replace("{culture}", "").replace("http:", "https:")),
+                tileSize: resource.imageHeight,
+            }
+        },
+        layers: [
+            {
+                id: "bing_raster",
+                type: "raster",
+                source: "bing_raster",
+                paint: {
+                    "raster-opacity": opacity
+                }
+            }
+        ],
+        version: 8
+    };
+}
+/** Persists map bounds to local storage */
+function usePersistedMapBounds(map, localStorageKey) {
+    const [bounds, setBounds] = (0, react_1.useState)(null);
+    // Load bounds from local storage on initial render
+    (0, react_1.useEffect)(() => {
+        const persistedBounds = localStorage.getItem(localStorageKey);
+        if (persistedBounds) {
+            setBounds(JSON.parse(persistedBounds));
+        }
+    }, [localStorageKey]);
+    // Apply loaded bounds to map when map and bounds are available
+    (0, react_1.useEffect)(() => {
+        if (map && bounds) {
+            map.fitBounds([
+                [bounds.w, bounds.s],
+                [bounds.e, bounds.n]
+            ], { duration: 2000 });
+        }
+    }, [map, bounds]);
+    // Update bounds in local storage when map moves
+    (0, react_1.useEffect)(() => {
+        if (!map) {
+            return;
+        }
+        function onMoveEnd() {
+            const bounds = map.getBounds();
+            const mapBounds = { n: bounds.getNorth(), e: bounds.getEast(), s: bounds.getSouth(), w: bounds.getWest() };
+            localStorage.setItem(localStorageKey, JSON.stringify(mapBounds));
+        }
+        map.on("moveend", onMoveEnd);
+        return () => {
+            map.off("moveend", onMoveEnd);
+        };
+    }, [map]);
+}
+exports.usePersistedMapBounds = usePersistedMapBounds;

package/lib/memoizedDebounce.d.ts

@@ -0,0 +1,6 @@
+import _ from "lodash";
+export interface MemoizeDebouncedFunction<F extends (...args: any[]) => any> {
+    (...args: Parameters<F>): void;
+    flush: (...args: Parameters<F>) => void;
+}
+export declare function memoizedDebounce<F extends (...args: any[]) => any>(func: F, wait?: number, options?: _.DebounceSettings, resolver?: (...args: Parameters<F>) => unknown): MemoizeDebouncedFunction<F>;

package/lib/memoizedDebounce.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.memoizedDebounce = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function memoizedDebounce(func, wait = 0, options = {}, resolver) {
+    const debounceMemo = lodash_1.default.memoize(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    (..._args) => lodash_1.default.debounce(func, wait, options), resolver);
+    function wrappedFunction(...args) {
+        return debounceMemo(...args)(...args);
+    }
+    wrappedFunction.flush = (...args) => {
+        debounceMemo(...args).cancel();
+    };
+    return wrappedFunction;
+}
+exports.memoizedDebounce = memoizedDebounce;

package/lib/quickfilter/DateExprComponent.d.ts

@@ -0,0 +1,81 @@
+import React from "react";
+import moment from "moment";
+export interface DateExprComponentProps {
+    /** Current value of quickfilter (state of filter selected) */
+    value?: any;
+    /** Called when value changes */
+    onChange?: any;
+    datetime?: boolean;
+}
+interface DateExprComponentState {
+    custom: any;
+    dropdownOpen: any;
+}
+export default class DateExprComponent extends React.Component<DateExprComponentProps, DateExprComponentState> {
+    constructor(props: any);
+    toMoment(value: any): moment.Moment | null;
+    fromMoment(value: any): any;
+    toLiteral(value: any): {
+        type: string;
+        valueType: string;
+        value: any;
+    };
+    handleClickOut: () => void;
+    handleStartChange: (value: any) => any;
+    handleEndChange: (value: any) => void;
+    handlePreset: (preset: any) => void;
+    renderClear: () => React.DetailedReactHTMLElement<{
+        style: {
+            position: "absolute";
+            right: number;
+            top: number;
+            color: "#AAA";
+        };
+        onClick: () => any;
+    }, HTMLElement>;
+    renderSummary(): string | React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+    renderPresets(): React.DetailedReactHTMLElement<{
+        style: {
+            position: "absolute";
+            top: string;
+            left: number;
+            zIndex: number;
+            padding: number;
+            border: string;
+            backgroundColor: "white";
+            borderRadius: number;
+        };
+    }, HTMLElement>;
+    renderDropdown(): React.DetailedReactHTMLElement<{
+        style: {
+            position: "absolute";
+            top: string;
+            left: number;
+            zIndex: number;
+            padding: number;
+            border: string;
+            backgroundColor: "white";
+            borderRadius: number;
+        };
+    }, HTMLElement>;
+    renderCustomDropdown(): React.DetailedReactHTMLElement<{
+        style: {
+            position: "absolute";
+            top: string;
+            left: number;
+            zIndex: number;
+            padding: number;
+            border: string;
+            backgroundColor: "white";
+            borderRadius: number;
+        };
+    }, HTMLElement>;
+    render(): React.CElement<{
+        onClickOut: () => void;
+    }, React.Component<{
+        onClickOut: () => void;
+    }, any, any>>;
+}
+export {};

package/lib/quickfilter/DateExprComponent.js

@@ -0,0 +1,197 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const moment_1 = __importDefault(require("moment"));
+const react_onclickout_1 = __importDefault(require("react-onclickout"));
+const react_datepicker_1 = __importDefault(require("react-datepicker"));
+// Allows selection of a date expressions for quickfilters
+class DateExprComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            dropdownOpen: false,
+            custom: false // True when custom dates displayed
+        };
+    }
+    toMoment(value) {
+        if (!value) {
+            return null;
+        }
+        if (this.props.datetime) {
+            return (0, moment_1.default)(value, moment_1.default.ISO_8601);
+        }
+        else {
+            return (0, moment_1.default)(value, "YYYY-MM-DD");
+        }
+    }
+    fromMoment(value) {
+        if (!value) {
+            return null;
+        }
+        if (this.props.datetime) {
+            return value.toISOString();
+        }
+        else {
+            return value.format("YYYY-MM-DD");
+        }
+    }
+    toLiteral(value) {
+        if (this.props.datetime) {
+            return { type: "literal", valueType: "datetime", value };
+        }
+        else {
+            return { type: "literal", valueType: "date", value };
+        }
+    }
+    handleClickOut = () => {
+        return this.setState({ dropdownOpen: false });
+    };
+    handleStartChange = (value) => {
+        // Clear end if after
+        if (this.props.value?.exprs[1] && this.fromMoment(value) > this.props.value.exprs[1]?.value) {
+            return this.props.onChange({ type: "op", op: "between", exprs: [this.toLiteral(this.fromMoment(value)), null] });
+        }
+        else {
+            return this.props.onChange({
+                type: "op",
+                op: "between",
+                exprs: [this.toLiteral(this.fromMoment(value)), this.props.value?.exprs[1]]
+            });
+        }
+    };
+    handleEndChange = (value) => {
+        // Go to end of day if datetime
+        if (this.props.datetime) {
+            value = (0, moment_1.default)(value);
+            value.endOf("day");
+        }
+        // Clear start if before
+        if (this.props.value?.exprs[0] && this.fromMoment(value) < this.props.value.exprs[0]?.value) {
+            this.props.onChange({ type: "op", op: "between", exprs: [null, this.toLiteral(this.fromMoment(value))] });
+        }
+        else {
+            this.props.onChange({
+                type: "op",
+                op: "between",
+                exprs: [this.props.value?.exprs[0], this.toLiteral(this.fromMoment(value))]
+            });
+        }
+        return this.setState({ dropdownOpen: false });
+    };
+    handlePreset = (preset) => {
+        this.props.onChange({ type: "op", op: preset.id, exprs: [] });
+        return this.setState({ dropdownOpen: false });
+    };
+    renderClear = () => {
+        return R("div", {
+            style: { position: "absolute", right: 10, top: 7, color: "#AAA" },
+            onClick: () => this.props.onChange(null)
+        }, R("i", { className: "fa fa-remove" }));
+    };
+    renderSummary() {
+        if (!this.props.value) {
+            return R("span", { className: "text-muted" }, "All");
+        }
+        const preset = lodash_1.default.findWhere(presets, { id: this.props.value.op });
+        if (preset) {
+            return preset.name;
+        }
+        if (this.props.value.op === "between") {
+            const startDate = this.toMoment(this.props.value.exprs[0]?.value);
+            const endDate = this.toMoment(this.props.value.exprs[1]?.value);
+            // Add/subtract hours to work around https://github.com/moment/moment/issues/2749
+            if (this.props.datetime) {
+                return ((startDate ? startDate.add("hours", 3).format("ll") : "") +
+                    " - " +
+                    (endDate ? endDate.subtract("hours", 3).format("ll") : ""));
+            }
+            else {
+                return (startDate ? startDate.format("ll") : "") + " - " + (endDate ? endDate.format("ll") : "");
+            }
+        }
+        return "???";
+    }
+    renderPresets() {
+        return R("div", {
+            style: {
+                position: "absolute",
+                top: "100%",
+                left: 0,
+                zIndex: 4000,
+                padding: 5,
+                border: "solid 1px #AAA",
+                backgroundColor: "white",
+                borderRadius: 4
+            }
+        }, R("ul", { className: "nav nav-pills flex-column" }, lodash_1.default.map(presets, (preset) => {
+            return R("li", { className: "nav-item" }, R("a", { className: "nav-link", style: { padding: 5 }, onClick: this.handlePreset.bind(null, preset) }, preset.name));
+        }), R("li", { className: "nav-item" }, R("a", { className: "nav-link", style: { padding: 5 }, onClick: () => this.setState({ custom: true }) }, "Custom Date Range..."))));
+    }
+    renderDropdown() {
+        if (this.state.custom) {
+            return this.renderCustomDropdown();
+        }
+        else {
+            return this.renderPresets();
+        }
+    }
+    renderCustomDropdown() {
+        const startDate = this.toMoment(this.props.value?.exprs[0]?.value);
+        const endDate = this.toMoment(this.props.value?.exprs[1]?.value);
+        return R("div", {
+            style: {
+                position: "absolute",
+                top: "100%",
+                left: 0,
+                zIndex: 4000,
+                padding: 5,
+                border: "solid 1px #AAA",
+                backgroundColor: "white",
+                borderRadius: 4
+            }
+        }, R("div", { style: { whiteSpace: "nowrap" } }, R("div", { style: { display: "inline-block", verticalAlign: "top" } }, R(react_datepicker_1.default, {
+            inline: true,
+            selectsStart: true,
+            selected: startDate,
+            startDate: startDate || undefined,
+            endDate: endDate || undefined,
+            showYearDropdown: true,
+            onChange: this.handleStartChange
+        })), R("div", { style: { display: "inline-block", verticalAlign: "top" } }, R(react_datepicker_1.default, {
+            inline: true,
+            selectsEnd: true,
+            selected: endDate,
+            startDate: startDate || undefined,
+            endDate: endDate || undefined,
+            showYearDropdown: true,
+            onChange: this.handleEndChange
+        }))));
+    }
+    render() {
+        return R(react_onclickout_1.default, { onClickOut: this.handleClickOut }, R("div", { style: { display: "inline-block", position: "relative" } }, R("div", {
+            style: { width: 220, height: 36, paddingTop: "0.5rem" },
+            className: "form-control",
+            onClick: () => this.setState({ dropdownOpen: true, custom: false })
+        }, this.renderSummary()), 
+        // Clear button
+        this.props.value && this.props.onChange != null ? this.renderClear() : undefined, this.state.dropdownOpen ? this.renderDropdown() : undefined));
+    }
+}
+exports.default = DateExprComponent;
+var presets = [
+    { id: "thisyear", name: "This Year" },
+    { id: "lastyear", name: "Last Year" },
+    { id: "thismonth", name: "This Month" },
+    { id: "lastmonth", name: "Last Month" },
+    { id: "today", name: "Today" },
+    { id: "yesterday", name: "Yesterday" },
+    { id: "last24hours", name: "In Last 24 Hours" },
+    { id: "last7days", name: "In Last 7 Days" },
+    { id: "last30days", name: "In Last 30 Days" },
+    { id: "last365days", name: "In Last 365 Days" }
+];

package/lib/quickfilter/IdArrayQuickfilterComponent.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { DataSource, Expr, Schema } from "@mwater/expressions";
+import { JsonQLFilter } from "..";
+export interface IdArrayQuickfilterComponentProps {
+    label: string;
+    schema: Schema;
+    dataSource: DataSource;
+    expr: Expr;
+    index: number;
+    /** Current value of quickfilter (state of filter selected) */
+    value: any;
+    onValueChange?: (value: any) => void;
+    /** true to display multiple values */
+    multi?: boolean;
+    filters?: JsonQLFilter[];
+}
+export default class IdArrayQuickfilterComponent extends React.Component<IdArrayQuickfilterComponentProps> {
+    render(): React.DetailedReactHTMLElement<{
+        style: {
+            display: "inline-block";
+            paddingRight: number;
+        };
+    }, HTMLElement>;
+}