@mwater/visualization 5.0.0

package/lib/compressJson.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Gzips and base64 encodes JSON object if larger than 100 bytes
+ */
+export default function compressJson(json: any): string;

package/lib/compressJson.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const pako_1 = __importDefault(require("pako"));
+/**
+ * Gzips and base64 encodes JSON object if larger than 100 bytes
+ */
+function compressJson(json) {
+    const str = JSON.stringify(json);
+    if (str && str.length > 100) {
+        return btoa(pako_1.default.deflate(str, { to: "string" }));
+    }
+    else {
+        return str;
+    }
+}
+exports.default = compressJson;

package/lib/dashboards/DashboardComponent.d.ts

@@ -0,0 +1,115 @@
+import PropTypes from "prop-types";
+import React, { ReactNode } from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import UndoStack from "../UndoStack";
+import DashboardViewComponent from "./DashboardViewComponent";
+import QuickfiltersComponent from "../quickfilter/QuickfiltersComponent";
+import SettingsModalComponent from "./SettingsModalComponent";
+import { DashboardDesign } from "./DashboardDesign";
+import DashboardDataSource from "./DashboardDataSource";
+import { JsonQLFilter } from "..";
+export interface DashboardComponentProps {
+    design: DashboardDesign;
+    /** If not set, readonly */
+    onDesignChange?: (design: DashboardDesign) => void;
+    schema: Schema;
+    dataSource: DataSource;
+    /** dashboard data source */
+    dashboardDataSource: DashboardDataSource;
+    /** Extra element to include in title at left */
+    titleElem?: ReactNode;
+    /** Extra elements to add to right */
+    extraTitleButtonsElem?: ReactNode;
+    /** Key that changes when the undo stack should be reset. Usually a document id or suchlike */
+    undoStackKey?: any;
+    /** True to scale for printing */
+    printScaling?: boolean;
+    /** Called with (tableId, rowId) when item is clicked */
+    onRowClick?: (tableId: string, rowId: any) => void;
+    /** Optional lookup of string name to value. Used for {{branding}} and other replacement strings in text widget */
+    namedStrings?: {
+        [key: string]: string;
+    };
+    /** Locked quickfilter values. See README in quickfilters */
+    quickfilterLocks?: any[];
+    /** Initial quickfilter values */
+    quickfiltersValues?: any[];
+    /** Filters to add to the dashboard */
+    filters?: JsonQLFilter[];
+    /** True to hide title bar and related controls */
+    hideTitleBar?: boolean;
+}
+export interface DashboardComponentState {
+    undoStack: UndoStack;
+    quickfiltersValues: any[] | null;
+    editing: boolean;
+    layoutOptionsOpen: boolean;
+    hideQuickfilters: boolean;
+    refreshKey: number;
+}
+/** Dashboard component that includes an action bar at the top
+ * Manages undo stack and quickfilter value
+ */
+export default class DashboardComponent extends React.Component<DashboardComponentProps, DashboardComponentState> {
+    dashboardView: DashboardViewComponent | null;
+    static defaultProps: {
+        printScaling: boolean;
+    };
+    static childContextTypes: {
+        locale: PropTypes.Requireable<string>;
+        activeTables: PropTypes.Requireable<string[]>;
+    };
+    settings: SettingsModalComponent | null;
+    getChildContext(): {
+        locale: string | undefined;
+        activeTables: string[];
+    };
+    constructor(props: any);
+    getQuickfilterValues: () => any[];
+    componentWillReceiveProps(nextProps: any): void;
+    handlePrint: () => void;
+    handleUndo: () => void;
+    handleRedo: () => void;
+    handleSaveDesignFile: () => void;
+    handleSettings: () => void;
+    handleToggleEditing: () => void;
+    handleOpenLayoutOptions: () => void;
+    handleRefreshData: () => void;
+    handleStyleChange: (style: any) => void;
+    handleDesignChange: (design: any) => void;
+    handleShowQuickfilters: () => void;
+    handleUpgrade: () => void;
+    getCompiledFilters(): JsonQLFilter[];
+    renderEditingSwitch(): React.DetailedReactHTMLElement<{
+        key: string;
+        className: string;
+        onClick: () => void;
+    }, HTMLElement>;
+    renderStyleItem(style: any): React.DetailedReactHTMLElement<{
+        key: any;
+        className: string;
+        onClick: () => void;
+    }, HTMLElement>;
+    renderStyle(): React.DetailedReactHTMLElement<{
+        type: string;
+        key: string;
+        className: string;
+        onClick: () => void;
+    }, HTMLElement>;
+    renderActionLinks(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderTitleBar(): React.DetailedReactHTMLElement<{
+        style: {
+            height: number;
+            padding: number;
+        };
+    }, HTMLElement>;
+    renderQuickfilter(): React.CElement<import("../quickfilter/QuickfiltersComponent").QuickfiltersComponentProps, QuickfiltersComponent>;
+    refDashboardView: (el: any) => any;
+    render(): React.DetailedReactHTMLElement<{
+        style: {
+            display: "grid";
+            gridTemplateRows: string;
+            height: string;
+        };
+    }, HTMLElement>;
+}

package/lib/dashboards/DashboardComponent.js

@@ -0,0 +1,297 @@
+"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 lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const UndoStack_1 = __importDefault(require("../UndoStack"));
+const DashboardUtils = __importStar(require("./DashboardUtils"));
+const DashboardViewComponent_1 = __importDefault(require("./DashboardViewComponent"));
+const QuickfiltersComponent_1 = __importDefault(require("../quickfilter/QuickfiltersComponent"));
+const QuickfilterCompiler_1 = __importDefault(require("../quickfilter/QuickfilterCompiler"));
+const SettingsModalComponent_1 = __importDefault(require("./SettingsModalComponent"));
+const LayoutManager_1 = __importDefault(require("../layouts/LayoutManager"));
+const DashboardUpgrader_1 = __importDefault(require("./DashboardUpgrader"));
+const LayoutOptionsComponent_1 = require("./LayoutOptionsComponent");
+const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
+const layoutOptions_1 = require("./layoutOptions");
+/** Dashboard component that includes an action bar at the top
+ * Manages undo stack and quickfilter value
+ */
+class DashboardComponent extends react_1.default.Component {
+    dashboardView;
+    static defaultProps = { printScaling: true };
+    static childContextTypes = {
+        locale: prop_types_1.default.string,
+        activeTables: prop_types_1.default.arrayOf(prop_types_1.default.string.isRequired)
+    };
+    settings;
+    getChildContext() {
+        return {
+            // Pass locale down. Both here and DashboardViewComponent to ensure that quickfilters also get context
+            locale: this.props.design.locale,
+            // Pass active tables down to table select components so they can present a shorter list
+            activeTables: DashboardUtils.getFilterableTables(this.props.design, this.props.schema)
+        };
+    }
+    constructor(props) {
+        super(props);
+        const layoutOptions = (0, layoutOptions_1.getLayoutOptions)(props.design);
+        this.state = {
+            undoStack: new UndoStack_1.default().push(props.design),
+            quickfiltersValues: props.quickfiltersValues,
+            editing: LayoutManager_1.default.createLayoutManager(props.design.layout).isEmpty(props.design.items) &&
+                props.onDesignChange != null,
+            layoutOptionsOpen: false,
+            hideQuickfilters: layoutOptions.hideQuickfiltersWidth != null && layoutOptions.hideQuickfiltersWidth > document.body.clientWidth,
+            refreshKey: 1
+        };
+    }
+    // Get the values of the quick filters
+    getQuickfilterValues = () => {
+        return this.state.quickfiltersValues || [];
+    };
+    componentWillReceiveProps(nextProps) {
+        let { undoStack } = this.state;
+        // Clear stack if key changed
+        if (nextProps.undoStackKey !== this.props.undoStackKey) {
+            undoStack = new UndoStack_1.default();
+        }
+        // Save on stack
+        undoStack = undoStack.push(nextProps.design);
+        this.setState({ undoStack });
+        // Clear quickfilters if definition changed
+        if (!lodash_1.default.isEqual(this.props.design.quickfilters, nextProps.design.quickfilters)) {
+            this.setState({ quickfiltersValues: nextProps.quickfiltersValues });
+        }
+        if (nextProps.onDesignChange == null) {
+            this.setState({ editing: false });
+        }
+    }
+    handlePrint = () => {
+        this.dashboardView.print();
+    };
+    handleUndo = () => {
+        const undoStack = this.state.undoStack.undo();
+        // We need to use callback as state is applied later
+        this.setState({ undoStack }, () => this.props.onDesignChange(undoStack.getValue()));
+    };
+    handleRedo = () => {
+        const undoStack = this.state.undoStack.redo();
+        // We need to use callback as state is applied later
+        this.setState({ undoStack }, () => this.props.onDesignChange(undoStack.getValue()));
+    };
+    // Saves a json file to disk
+    handleSaveDesignFile = () => {
+        // Make a blob and save
+        const blob = new Blob([JSON.stringify(this.props.design, null, 2)], { type: "text/json" });
+        // Require at use as causes server problems
+        const FileSaver = require("file-saver");
+        FileSaver.saveAs(blob, "Dashboard.json");
+    };
+    handleSettings = () => {
+        this.settings.show(this.props.design);
+    };
+    handleToggleEditing = () => {
+        this.setState({ editing: !this.state.editing });
+    };
+    handleOpenLayoutOptions = () => {
+        this.setState({ layoutOptionsOpen: true });
+    };
+    handleRefreshData = () => {
+        this.props.dataSource.clearCache?.();
+        this.setState({ refreshKey: this.state.refreshKey + 1 });
+    };
+    handleStyleChange = (style) => {
+        this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, { style: style || null }));
+    };
+    handleDesignChange = (design) => {
+        // If quickfilters have changed, reset values
+        if (!lodash_1.default.isEqual(this.props.design.quickfilters, design.quickfilters)) {
+            this.setState({ quickfiltersValues: null });
+        }
+        this.props.onDesignChange(design);
+    };
+    handleShowQuickfilters = () => {
+        return this.setState({ hideQuickfilters: false });
+    };
+    handleUpgrade = () => {
+        if (!confirm("This will upgrade your dashboard to the new kind with enhanced features. You can click Undo immediately afterwards if you wish to revert it. Continue?")) {
+            return;
+        }
+        const design = new DashboardUpgrader_1.default().upgrade(this.props.design);
+        this.props.onDesignChange(design);
+        alert("Upgrade completed. Some widgets may need to be resized. Click Undo to revert back to old dashboard style.");
+    };
+    // Get filters from props filters combined with dashboard filters
+    getCompiledFilters() {
+        let compiledFilters = DashboardUtils.getCompiledFilters(this.props.design, this.props.schema, DashboardUtils.getFilterableTables(this.props.design, this.props.schema));
+        compiledFilters = compiledFilters.concat(this.props.filters || []);
+        return compiledFilters;
+    }
+    renderEditingSwitch() {
+        return R("a", {
+            key: "edit",
+            className: `btn btn-primary btn-sm ${this.state.editing ? "active" : ""}`,
+            onClick: this.handleToggleEditing
+        }, R("span", { className: "fas fa-pencil-alt" }), this.state.editing ? " Editing" : " Edit");
+    }
+    renderStyleItem(style) {
+        const isActive = (this.props.design.style || "default") === style;
+        const content = (() => {
+            switch (style) {
+                case "default":
+                    return [
+                        R("h4", { key: "name", className: "list-group-item-heading" }, "Classic Dashboard"),
+                        R("p", { key: "description", className: "" }, "Ideal for data display with minimal text")
+                    ];
+                case "greybg":
+                    return [
+                        R("h4", { key: "name", className: "list-group-item-heading" }, "Framed Dashboard"),
+                        R("p", { key: "description", className: "" }, "Each widget is white on a grey background")
+                    ];
+                case "story":
+                    return [
+                        R("h4", { key: "name", className: "list-group-item-heading" }, "Story"),
+                        R("p", { key: "description", className: "" }, "Ideal for data-driven storytelling with lots of text. Responsive and mobile-friendly")
+                    ];
+            }
+            return null;
+        })();
+        return R("a", {
+            key: style,
+            className: `list-group-item ${isActive ? "active" : ""}`,
+            onClick: this.handleStyleChange.bind(null, style)
+        }, content);
+    }
+    renderStyle() {
+        return R("button", { type: "button", key: "style", className: "btn btn-link btn-sm", onClick: this.handleOpenLayoutOptions }, R("span", { className: "fa fa-mobile" }), R("span", { className: "hide-600px" }, " Layout "));
+    }
+    renderActionLinks() {
+        return R("div", null, this.state.editing && (this.props.design.layout || "grid") === "grid"
+            ? R("a", { key: "upgrade", className: "btn btn-info btn-sm", onClick: this.handleUpgrade }, "Upgrade Dashboard...")
+            : undefined, this.state.editing
+            ? [
+                R("a", {
+                    key: "undo",
+                    className: `btn btn-link btn-sm ${!this.state.undoStack.canUndo() ? "disabled" : ""}`,
+                    onClick: this.handleUndo
+                }, R("span", { className: "fas fa-caret-left" }), R("span", { className: "hide-600px" }, " Undo")),
+                " ",
+                R("a", {
+                    key: "redo",
+                    className: `btn btn-link btn-sm ${!this.state.undoStack.canRedo() ? "disabled" : ""}`,
+                    onClick: this.handleRedo
+                }, R("span", { className: "fas fa-caret-right" }), R("span", { className: "hide-600px" }, " Redo"))
+            ]
+            : undefined, R("a", { key: "print", className: "btn btn-link btn-sm", onClick: this.handlePrint }, R("span", { className: "fas fa-print" }), R("span", { className: "hide-600px" }, " Print")), R("a", { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData }, R("span", { className: "fas fa-sync" }), R("span", { className: "hide-600px" }, " Refresh")), this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
+            ? R("a", { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters }, R("span", { className: "fa fa-filter" }), R("span", { className: "hide-600px" }, " Show Quickfilters"))
+            : undefined, 
+        // R 'a', key: "export", className: "btn btn-link btn-sm", onClick: @handleSaveDesignFile,
+        //   R('span', className: "glyphicon glyphicon-download-alt")
+        //   " Export"
+        this.state.editing
+            ? R("a", { key: "settings", className: "btn btn-link btn-sm", onClick: this.handleSettings }, R("span", { className: "fas fa-cog" }), R("span", { className: "hide-600px" }, " Settings"))
+            : undefined, this.state.editing ? this.renderStyle() : undefined, this.props.extraTitleButtonsElem, this.props.onDesignChange != null ? this.renderEditingSwitch() : undefined);
+    }
+    renderTitleBar() {
+        return R("div", { style: { height: 40, padding: 4 } }, R("div", { style: { float: "right" } }, this.renderActionLinks()), this.props.titleElem);
+    }
+    renderQuickfilter() {
+        return R(QuickfiltersComponent_1.default, {
+            design: this.props.design.quickfilters || [],
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            quickfiltersDataSource: this.props.dashboardDataSource.getQuickfiltersDataSource(),
+            values: this.state.quickfiltersValues || undefined,
+            onValuesChange: (values) => this.setState({ quickfiltersValues: values }),
+            locks: this.props.quickfilterLocks,
+            filters: this.getCompiledFilters(),
+            hideTopBorder: this.props.hideTitleBar,
+            onHide: () => this.setState({ hideQuickfilters: true })
+        });
+    }
+    refDashboardView = (el) => {
+        return (this.dashboardView = el);
+    };
+    render() {
+        let filters = this.props.filters || [];
+        // Compile quickfilters
+        filters = filters.concat(new QuickfilterCompiler_1.default(this.props.schema).compile(this.props.design.quickfilters || [], this.state.quickfiltersValues, this.props.quickfilterLocks));
+        const dashboardView = R(DashboardViewComponent_1.default, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            dashboardDataSource: this.props.dashboardDataSource,
+            ref: this.refDashboardView,
+            design: this.props.design,
+            onDesignChange: this.state.editing ? this.props.onDesignChange : undefined,
+            filters,
+            onRowClick: this.props.onRowClick,
+            namedStrings: this.props.namedStrings,
+            hideScopes: this.state.hideQuickfilters,
+            refreshKey: this.state.refreshKey
+        });
+        const readonlyDashboardView = R(DashboardViewComponent_1.default, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            dashboardDataSource: this.props.dashboardDataSource,
+            ref: this.refDashboardView,
+            design: this.props.design,
+            filters,
+            onRowClick: this.props.onRowClick,
+            namedStrings: this.props.namedStrings,
+            hideScopes: this.state.hideQuickfilters
+        });
+        return R("div", {
+            style: {
+                display: "grid",
+                gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
+                height: "100%"
+            }
+        }, !this.props.hideTitleBar ? this.renderTitleBar() : undefined, R("div", null, !this.state.hideQuickfilters ? this.renderQuickfilter() : undefined), dashboardView, this.props.onDesignChange != null
+            ? R(SettingsModalComponent_1.default, {
+                onDesignChange: this.handleDesignChange,
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                ref: (c) => {
+                    this.settings = c;
+                }
+            })
+            : undefined, this.state.layoutOptionsOpen
+            ? R(ModalWindowComponent_1.default, { isOpen: true, outerPadding: 10, innerPadding: 10 }, R(LayoutOptionsComponent_1.LayoutOptionsComponent, {
+                design: this.props.design,
+                onDesignChange: this.props.onDesignChange,
+                onClose: () => this.setState({ layoutOptionsOpen: false }),
+                dashboardView: readonlyDashboardView,
+                quickfiltersView: this.renderQuickfilter()
+            }))
+            : undefined);
+    }
+}
+exports.default = DashboardComponent;

package/lib/dashboards/DashboardDataSource.d.ts

@@ -0,0 +1,9 @@
+import { QuickfiltersDataSource } from "../quickfilter/QuickfiltersDataSource";
+import { WidgetDataSource } from "../widgets/WidgetDataSource";
+/** Data source for a dashboard */
+export default class DashboardDataSource {
+    /** Gets the widget data source for a specific widget */
+    getWidgetDataSource(widgetType: string, widgetId: string): WidgetDataSource;
+    /** Gets the quickfilters data source */
+    getQuickfiltersDataSource(): QuickfiltersDataSource;
+}

package/lib/dashboards/DashboardDataSource.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/** Data source for a dashboard */
+class DashboardDataSource {
+    /** Gets the widget data source for a specific widget */
+    getWidgetDataSource(widgetType, widgetId) {
+        throw new Error("Not implemented");
+    }
+    /** Gets the quickfilters data source */
+    getQuickfiltersDataSource() {
+        throw new Error("Not implemented");
+    }
+}
+exports.default = DashboardDataSource;

package/lib/dashboards/DashboardDesign.d.ts

@@ -0,0 +1,45 @@
+import { Quickfilter } from "../quickfilter/Quickfilter";
+import { LiteralType, Expr } from "@mwater/expressions";
+import { BlocksLayoutOptions, DashboardTheme } from "./layoutOptions";
+/** Dashboard design
+ * Each understands enough of the dashboard design to create widgets.
+ * Widget refers to the widget itself, where *item* refers also to the layout and id that it has in the dashboard.
+ */
+export interface DashboardDesign {
+    /** dashboard items. Format depends on layout of dashboard. See layouts/.../README.md */
+    items: any;
+    /** array of quick filters (user-selectable filters). See quickfilter/README.md */
+    quickfilters?: Quickfilter[];
+    /** layout engine to use (`blocks` is new default)  */
+    layout: "blocks" | "grid";
+    /** optional theme to use */
+    style?: DashboardTheme;
+    /** Options for layout including responsiveness, scaling, etc */
+    layoutOptions?: BlocksLayoutOptions;
+    /** filter expression indexed by table. e.g. { sometable: logical expression, etc. } */
+    filters?: {
+        [tableId: string]: Expr;
+    };
+    /** optional locale (e.g. "fr") to use for display */
+    locale?: string;
+    /** true to enable implicit filtering (see ImplicitFilterBuilder). Defaults to true for older dashboards. */
+    implicitFiltersEnabled?: boolean;
+    /** array of global filters. See below. */
+    globalFilters?: GlobalFilter[];
+}
+/** Global Filters:
+
+Global filters apply to multiple tables at once if a certain column is present. User-interface to set them is application-specific
+and the default (non-mWater) dashboard applies them but does not allow editing.
+
+*/
+export interface GlobalFilter {
+    /** id of column to filter */
+    columnId: string;
+    /** type of column to filter (to ensure that consistent) */
+    columnType: LiteralType;
+    /** op of expression for filtering */
+    op: string;
+    /** array of expressions to use for filtering. field expression for column will be injected as expression 0 in the resulting filter expression */
+    exprs: Expr[];
+}

package/lib/dashboards/DashboardDesign.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/dashboards/DashboardUpgrader.d.ts

@@ -0,0 +1,4 @@
+import { DashboardDesign } from "..";
+export default class DashboardUpgrader {
+    upgrade(design: any): DashboardDesign;
+}

package/lib/dashboards/DashboardUpgrader.js

@@ -0,0 +1,95 @@
+"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 uuid_1 = __importDefault(require("uuid"));
+const WidgetFactory_1 = __importDefault(require("../widgets/WidgetFactory"));
+// Upgrades old dashboards to new ones (grid -> blocks)
+class DashboardUpgrader {
+    upgrade(design) {
+        // Get list of all items
+        const items = lodash_1.default.clone(design.items);
+        const newItems = {
+            id: "root",
+            type: "root",
+            blocks: []
+        };
+        function convertBlock(id, item) {
+            const widget = WidgetFactory_1.default.createWidget(item.widget.type);
+            const block = {
+                type: "widget",
+                widgetType: item.widget.type,
+                design: item.widget.design,
+                id
+            };
+            if (!widget.isAutoHeight()) {
+                block.aspectRatio = item.layout.w / item.layout.h;
+            }
+            return block;
+        }
+        // Scan horizontally
+        let y = 0;
+        while (lodash_1.default.keys(items).length > 0) {
+            var id;
+            let lineItems = [];
+            for (id in items) {
+                const item = items[id];
+                if (item.layout.y <= y && item.layout.y + item.layout.h > y) {
+                    lineItems.push(id);
+                }
+            }
+            // Sort by x
+            lineItems = lodash_1.default.sortBy(lineItems, (id) => items[id].layout.x);
+            // Convert
+            if (lineItems.length > 1) {
+                newItems.blocks.push({
+                    id: (0, uuid_1.default)(),
+                    type: "horizontal",
+                    blocks: lodash_1.default.map(lineItems, (li) => convertBlock(li, items[li]))
+                });
+                for (let li of lineItems) {
+                    delete items[li];
+                }
+            }
+            else if (lineItems.length === 1) {
+                newItems.blocks.push(convertBlock(lineItems[0], items[lineItems[0]]));
+                delete items[lineItems[0]];
+            }
+            y += 1;
+        }
+        return {
+            items: newItems,
+            layout: "blocks",
+            style: "default"
+        };
+    }
+}
+exports.default = DashboardUpgrader;
+/*
+
+Old style:
+
+items: dashboard items, indexed by id. Each item contains:
+
+ `layout`: layout-engine specific data for layout of item
+ `widget`: details of the widget (see below)
+
+`widget` contains:
+ `type`: type string of the widget. Understandable by widget factory
+ `version`: version of the widget. semver string
+ `design`: design of the widget as a JSON object
+
+
+New style:
+
+id: id of block
+type: "root"/"vertical"/"horizontal"/"widget"/"spacer"
+widgetType: if a widget
+aspectRatio: w/h if not autoHeight
+design: widget design
+weights: weights for proportioning horizontal blocks. Default is 1
+blocks: other blocks if not a widget
+
+*/

package/lib/dashboards/DashboardUtils.d.ts

@@ -0,0 +1,7 @@
+import { Schema } from "@mwater/expressions";
+import { JsonQLFilter } from "..";
+import { DashboardDesign } from "./DashboardDesign";
+/** Gets filterable tables for a dashboard */
+export declare function getFilterableTables(design: DashboardDesign, schema: Schema): string[];
+/** Get filters from props filters combined with dashboard filters */
+export declare function getCompiledFilters(design: DashboardDesign, schema: Schema, filterableTables: string[]): JsonQLFilter[];