@mwater/visualization 5.0.0

package/lib/dashboards/DashboardUtils.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCompiledFilters = exports.getFilterableTables = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const expressions_1 = require("@mwater/expressions");
+const LayoutManager_1 = __importDefault(require("../layouts/LayoutManager"));
+const WidgetFactory_1 = __importDefault(require("../widgets/WidgetFactory"));
+/** Gets filterable tables for a dashboard */
+function getFilterableTables(design, schema) {
+    const layoutManager = LayoutManager_1.default.createLayoutManager(design.layout);
+    // Get filterable tables
+    let filterableTables = [];
+    for (let widgetItem of layoutManager.getAllWidgets(design.items)) {
+        // Create widget
+        const widget = WidgetFactory_1.default.createWidget(widgetItem.type);
+        // Get filterable tables
+        filterableTables = filterableTables.concat(widget.getFilterableTables(widgetItem.design, schema));
+    }
+    // Remove non-existant tables
+    filterableTables = lodash_1.default.filter(lodash_1.default.uniq(filterableTables), (table) => schema.getTable(table));
+    return filterableTables;
+}
+exports.getFilterableTables = getFilterableTables;
+/** Get filters from props filters combined with dashboard filters */
+function getCompiledFilters(design, schema, filterableTables) {
+    let expr, jsonql, table;
+    const exprCompiler = new expressions_1.ExprCompiler(schema);
+    const exprCleaner = new expressions_1.ExprCleaner(schema);
+    const exprUtils = new expressions_1.ExprUtils(schema);
+    const compiledFilters = [];
+    // Compile filters to JsonQL expected by widgets
+    const object = design.filters || {};
+    for (table in object) {
+        // Clean expression first TODO remove this when dashboards are properly cleaned before being rendered
+        expr = object[table];
+        expr = exprCleaner.cleanExpr(expr, { table });
+        jsonql = exprCompiler.compileExpr({ expr, tableAlias: "{alias}" });
+        if (jsonql) {
+            compiledFilters.push({ table, jsonql });
+        }
+    }
+    // Add global filters
+    for (let filter of design.globalFilters || []) {
+        for (table of filterableTables) {
+            // Check if exists and is correct type
+            const column = schema.getColumn(table, filter.columnId);
+            if (!column) {
+                continue;
+            }
+            const columnExpr = { type: "field", table, column: column.id };
+            if (exprUtils.getExprType(columnExpr) !== filter.columnType) {
+                continue;
+            }
+            // Create expr
+            expr = { type: "op", op: filter.op, table, exprs: [columnExpr].concat(filter.exprs) };
+            // Clean expr
+            expr = exprCleaner.cleanExpr(expr, { table });
+            jsonql = exprCompiler.compileExpr({ expr, tableAlias: "{alias}" });
+            if (jsonql) {
+                compiledFilters.push({ table, jsonql });
+            }
+        }
+    }
+    return compiledFilters;
+}
+exports.getCompiledFilters = getCompiledFilters;

package/lib/dashboards/DashboardViewComponent.d.ts

@@ -0,0 +1,71 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import WidgetScoper from "../widgets/WidgetScoper";
+import WidgetScopesViewComponent from "../widgets/WidgetScopesViewComponent";
+import { DashboardDataSource, DashboardDesign, JsonQLFilter } from "..";
+export interface DashboardViewComponentProps {
+    /** schema to use */
+    schema: Schema;
+    /** data source to use. Only used when designing, for display uses dashboardDataSource */
+    dataSource: DataSource;
+    /** dashboard data source */
+    dashboardDataSource: DashboardDataSource;
+    design: DashboardDesign;
+    /** Leave unset for readonly */
+    onDesignChange?: (design: DashboardDesign) => void;
+    /** 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;
+    };
+    /** Filters to add to the dashboard (includes extra filters and any quickfilters from the dashboard component. Does not include dashboard level filters) */
+    filters?: JsonQLFilter[];
+    /** Entry to scroll to initially when dashboard is loaded */
+    initialTOCEntryScroll?: {
+        widgetId: string;
+        entryId: any;
+    };
+    /** True to hide scope display */
+    hideScopes?: boolean;
+    /** True to render in print mode (prevents odd clipping issue) */
+    printMode?: boolean;
+    /** Change to force a refresh */
+    refreshKey?: any;
+}
+/**
+ * Displays a dashboard, handling removing of widgets. No title bar or other decorations.
+ * Handles scoping and stores the state of scope
+ */
+export default class DashboardViewComponent extends React.Component<DashboardViewComponentProps, {
+    widgetScoper: WidgetScoper;
+}> {
+    static childContextTypes: {
+        locale: PropTypes.Requireable<string>;
+    };
+    widgetComps: {
+        [widgetId: string]: any;
+    };
+    getChildContext(): {
+        locale: string | undefined;
+    };
+    constructor(props: any);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleStorageChange: () => void;
+    handleScopeChange: (id: any, scope: any) => void;
+    handleRemoveScope: (id: any) => void;
+    handleItemsChange: (items: any) => void;
+    handleClipboardChange: (block: any) => void;
+    getClipboardContents(): any;
+    print: () => Promise<void>;
+    getCompiledFilters(): JsonQLFilter[];
+    getTOCEntries(layoutManager: any): any[];
+    handleScrollToTOCEntry: (widgetId: any, entryId: any) => any;
+    renderScopes(): React.CElement<import("../widgets/WidgetScopesViewComponent").WidgetScopesViewComponentProps, WidgetScopesViewComponent>;
+    compRef: (widgetId: any, comp: any) => any;
+    render(): React.DetailedReactHTMLElement<{
+        style: React.CSSProperties;
+    }, HTMLElement>;
+}

package/lib/dashboards/DashboardViewComponent.js

@@ -0,0 +1,235 @@
+"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 lodash_1 = __importDefault(require("lodash"));
+const prop_types_1 = __importDefault(require("prop-types"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const ImplicitFilterBuilder_1 = __importDefault(require("../ImplicitFilterBuilder"));
+const DashboardUtils = __importStar(require("./DashboardUtils"));
+const WidgetFactory_1 = __importDefault(require("../widgets/WidgetFactory"));
+const WidgetScoper_1 = __importDefault(require("../widgets/WidgetScoper"));
+const ReactElementPrinter_1 = __importDefault(require("@mwater/react-library/lib/ReactElementPrinter"));
+const LayoutManager_1 = __importDefault(require("../layouts/LayoutManager"));
+const WidgetScopesViewComponent_1 = __importDefault(require("../widgets/WidgetScopesViewComponent"));
+const layoutOptions_1 = require("./layoutOptions");
+const WidgetComponent_1 = require("./WidgetComponent");
+const vectorMaps_1 = require("../maps/vectorMaps");
+/**
+ * Displays a dashboard, handling removing of widgets. No title bar or other decorations.
+ * Handles scoping and stores the state of scope
+ */
+class DashboardViewComponent extends react_1.default.Component {
+    static childContextTypes = { locale: prop_types_1.default.string };
+    widgetComps;
+    // Pass locale down. Both here and DashboardViewComponent to ensure that quickfilters also get context
+    getChildContext() {
+        return { locale: this.props.design.locale };
+    }
+    constructor(props) {
+        super(props);
+        this.state = {
+            widgetScoper: new WidgetScoper_1.default() // Empty scoping
+        };
+        this.widgetComps = {}; // Lookup of widget components by id
+    }
+    componentDidMount() {
+        if (this.props.initialTOCEntryScroll) {
+            // Getting heights of widgets properly requires a 0 length timeout
+            setTimeout(() => {
+                return this.handleScrollToTOCEntry(this.props.initialTOCEntryScroll.widgetId, this.props.initialTOCEntryScroll.entryId);
+            }, 0);
+        }
+        // Add listener to localstorage to update clipboard display
+        return window.addEventListener("storage", this.handleStorageChange);
+    }
+    componentWillUnmount() {
+        // Remove listener
+        return window.addEventListener("storage", this.handleStorageChange);
+    }
+    handleStorageChange = () => {
+        return this.forceUpdate();
+    };
+    handleScopeChange = (id, scope) => {
+        return this.setState({ widgetScoper: this.state.widgetScoper.applyScope(id, scope) });
+    };
+    handleRemoveScope = (id) => {
+        return this.setState({ widgetScoper: this.state.widgetScoper.applyScope(id, null) });
+    };
+    handleItemsChange = (items) => {
+        const design = lodash_1.default.extend({}, this.props.design, { items });
+        return this.props.onDesignChange(design);
+    };
+    // Handle a change of the clipboard and determine which tables the clipboard block uses
+    handleClipboardChange = (block) => {
+        try {
+            // If empty, just set it
+            if (!block) {
+                window.localStorage.removeItem("DashboardViewComponent.clipboard");
+                this.forceUpdate();
+                return;
+            }
+            // Determine which tables are used (just peek for any uses of the table name. Not ideal, but easy)
+            const tables = lodash_1.default.pluck(lodash_1.default.filter(this.props.schema.getTables(), (table) => JSON.stringify(block).includes(JSON.stringify(table.id))), "id");
+            // Store in clipboard
+            window.localStorage.setItem("DashboardViewComponent.clipboard", JSON.stringify({ block, tables }));
+            return this.forceUpdate();
+        }
+        catch (err) {
+            return alert("Clipboard not available");
+        }
+    };
+    getClipboardContents() {
+        try {
+            return JSON.parse(window.localStorage.getItem("DashboardViewComponent.clipboard") || "null");
+        }
+        catch (err) {
+            return null;
+        }
+    }
+    // Call to print the dashboard
+    print = async () => {
+        // Temporarily disable vector maps as WebGL is not supported in print mode
+        const mapTilerAPIKey = (0, vectorMaps_1.getMapTilerApiKey)();
+        try {
+            (0, vectorMaps_1.setMapTilerApiKey)("");
+            // Create element at 1080 wide (use as standard printing width)
+            const elem = R("div", { style: { width: 1080 } }, R(DashboardViewComponent, lodash_1.default.extend({}, this.props, { onDesignChange: null, printMode: true })));
+            const printer = new ReactElementPrinter_1.default();
+            await printer.print(elem, { delay: 5000 });
+        }
+        finally {
+            (0, vectorMaps_1.setMapTilerApiKey)(mapTilerAPIKey);
+        }
+    };
+    // 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;
+    }
+    // Get list of TOC entries
+    getTOCEntries(layoutManager) {
+        const entries = [];
+        for (let { id, type, design } of layoutManager.getAllWidgets(this.props.design.items)) {
+            const widget = WidgetFactory_1.default.createWidget(type);
+            // Add widgetId to each one
+            for (let entry of widget.getTOCEntries(design, this.props.namedStrings)) {
+                entries.push(lodash_1.default.extend({}, entry, { widgetId: id }));
+            }
+        }
+        return entries;
+    }
+    handleScrollToTOCEntry = (widgetId, entryId) => {
+        const widgetComp = this.widgetComps[widgetId];
+        if (!widgetComp) {
+            return;
+        }
+        // Call scrollToTOCEntry if present
+        return widgetComp.scrollToTOCEntry?.(entryId);
+    };
+    renderScopes() {
+        return R(WidgetScopesViewComponent_1.default, {
+            scopes: this.state.widgetScoper.getScopes(),
+            onRemoveScope: this.handleRemoveScope
+        });
+    }
+    compRef = (widgetId, comp) => {
+        return (this.widgetComps[widgetId] = comp);
+    };
+    render() {
+        let cantPasteMessage = "";
+        const layoutManager = LayoutManager_1.default.createLayoutManager(this.props.design.layout);
+        const compiledFilters = this.getCompiledFilters();
+        // Get filterable tables
+        const filterableTables = DashboardUtils.getFilterableTables(this.props.design, this.props.schema);
+        // Determine toc entries
+        const tocEntries = this.getTOCEntries(layoutManager);
+        // Get clipboard contents
+        const clipboardContents = this.getClipboardContents();
+        // Check if can't paste because of missing table
+        if (clipboardContents && !lodash_1.default.all(clipboardContents.tables, (table) => this.props.schema.getTable(table))) {
+            cantPasteMessage = "Dashboard is missing one or more data sources needed for the copied item.";
+        }
+        const renderWidget = (options) => {
+            const widget = WidgetFactory_1.default.createWidget(options.type);
+            // Get filters (passed in plus dashboard widget scoper filters)
+            let filters = compiledFilters.concat(this.state.widgetScoper.getFilters(options.id));
+            // Extend the filters to include implicit filters (filter children in 1-n relationships)
+            if (this.props.design.implicitFiltersEnabled || this.props.design.implicitFiltersEnabled == null) {
+                // Default is true
+                const implicitFilterBuilder = new ImplicitFilterBuilder_1.default(this.props.schema);
+                filters = implicitFilterBuilder.extendFilters(filterableTables, filters);
+            }
+            const widgetElem = R(WidgetComponent_1.WidgetComponent, {
+                key: options.id,
+                id: options.id,
+                type: options.type,
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                dashboardDataSource: this.props.dashboardDataSource,
+                design: options.design,
+                scope: this.state.widgetScoper.getScope(options.id),
+                filters,
+                onScopeChange: this.handleScopeChange.bind(null, options.id),
+                onDesignChange: options.onDesignChange,
+                width: options.width,
+                height: options.height,
+                onRowClick: this.props.onRowClick,
+                namedStrings: this.props.namedStrings,
+                tocEntries,
+                onScrollToTOCEntry: this.handleScrollToTOCEntry,
+                // Keep references to widget elements
+                widgetRef: this.compRef.bind(null, options.id),
+                refreshKey: this.props.refreshKey
+            });
+            return widgetElem;
+        };
+        const style = {
+            height: "100%",
+            position: "relative"
+        };
+        if (!this.props.printMode) {
+            // Prevent this block from taking up too much space. Scrolling handled by layout manager.
+            // Setting overflow-x stops the inner div from becoming too tall
+            style.overflowX = "auto";
+        }
+        // Render widget container
+        return R("div", { style }, !this.props.hideScopes ? this.renderScopes() : undefined, layoutManager.renderLayout({
+            items: this.props.design.items,
+            onItemsChange: this.props.onDesignChange != null ? this.handleItemsChange : undefined,
+            style: this.props.design.style || null,
+            layoutOptions: (0, layoutOptions_1.getLayoutOptions)(this.props.design),
+            renderWidget,
+            clipboard: clipboardContents?.block,
+            onClipboardChange: this.handleClipboardChange,
+            cantPasteMessage
+        }));
+    }
+}
+exports.default = DashboardViewComponent;

package/lib/dashboards/DirectDashboardDataSource.d.ts

@@ -0,0 +1,31 @@
+import DirectWidgetDataSource from "../widgets/DirectWidgetDataSource";
+import DashboardDataSource from "./DashboardDataSource";
+import { Schema, DataSource } from "@mwater/expressions";
+/** Uses direct DataSource queries */
+export default class DirectDashboardDataSource extends DashboardDataSource {
+    options: {
+        /** schema to use */
+        schema: Schema;
+        /** data source to use */
+        dataSource: DataSource;
+        /** API url to use for talking to mWater server */
+        apiUrl: string;
+        /** client id to use for talking to mWater server */
+        client?: string | undefined;
+    };
+    /** Create dashboard data source that uses direct jsonql calls */
+    constructor(options: {
+        /** schema to use */
+        schema: Schema;
+        /** data source to use */
+        dataSource: DataSource;
+        /** API url to use for talking to mWater server */
+        apiUrl: string;
+        /** client id to use for talking to mWater server */
+        client?: string;
+    });
+    getWidgetDataSource(widgetType: any, widgetId: any): DirectWidgetDataSource;
+    getQuickfiltersDataSource(): {
+        getValues: (index: any, expr: any, filters: any, offset: any, limit: any, callback: any) => void;
+    };
+}

package/lib/dashboards/DirectDashboardDataSource.js

@@ -0,0 +1,62 @@
+"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 WidgetFactory_1 = __importDefault(require("../widgets/WidgetFactory"));
+const DirectWidgetDataSource_1 = __importDefault(require("../widgets/DirectWidgetDataSource"));
+const QuickfilterUtils = __importStar(require("../quickfilter/QuickfilterUtils"));
+const DashboardDataSource_1 = __importDefault(require("./DashboardDataSource"));
+/** Uses direct DataSource queries */
+class DirectDashboardDataSource extends DashboardDataSource_1.default {
+    options;
+    /** Create dashboard data source that uses direct jsonql calls */
+    constructor(options) {
+        super();
+        this.options = options;
+    }
+    // Gets the widget data source for a specific widget
+    getWidgetDataSource(widgetType, widgetId) {
+        const widget = WidgetFactory_1.default.createWidget(widgetType);
+        return new DirectWidgetDataSource_1.default({
+            apiUrl: this.options.apiUrl,
+            client: this.options.client,
+            widget,
+            schema: this.options.schema,
+            dataSource: this.options.dataSource
+        });
+    }
+    // Gets the quickfilters data source
+    getQuickfiltersDataSource() {
+        return {
+            getValues: (index, expr, filters, offset, limit, callback) => {
+                // Perform query
+                return QuickfilterUtils.findExprValues(expr, this.options.schema, this.options.dataSource, filters, offset, limit, callback);
+            }
+        };
+    }
+}
+exports.default = DirectDashboardDataSource;

package/lib/dashboards/LayoutOptionsComponent.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+import { DashboardDesign } from "./DashboardDesign";
+export declare function LayoutOptionsComponent(props: {
+    design: DashboardDesign;
+    onDesignChange: (design: DashboardDesign) => void;
+    onClose: () => void;
+    /** Dashboard view to preview*/
+    dashboardView: ReactNode;
+    /** Quickfilters to preview */
+    quickfiltersView: ReactNode;
+}): React.JSX.Element;

package/lib/dashboards/LayoutOptionsComponent.js

@@ -0,0 +1,119 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutOptionsComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+const layoutOptions_1 = require("./layoutOptions");
+const sizeOptions = [
+    { value: { width: 360, height: 640 }, label: "Phone (360x640)" },
+    { value: { width: 768, height: 1024 }, label: "Tablet (768x1024)" },
+    { value: { width: 1000, height: 800 }, label: "Laptop (1000x800)" },
+    { value: { width: 1280, height: 1024 }, label: "Desktop (1280x1024)" }
+];
+function LayoutOptionsComponent(props) {
+    const [previewSize, setPreviewSize] = (0, react_2.useState)(2);
+    const layoutOptions = (0, layoutOptions_1.getLayoutOptions)(props.design);
+    function setLayoutOptions(layoutOptions) {
+        props.onDesignChange({ ...props.design, layoutOptions });
+    }
+    function handleResetDefaults() {
+        props.onDesignChange({ ...props.design, layoutOptions: (0, layoutOptions_1.getDefaultLayoutOptions)(props.design.style) });
+    }
+    return (react_1.default.createElement("div", { style: { display: "grid", gridTemplateRows: "auto 1fr", gridTemplateColumns: "auto 1fr", height: "100%" } },
+        react_1.default.createElement("div", { style: { padding: 5, gridRow: "1 / 3" } },
+            react_1.default.createElement("div", { key: "back" },
+                react_1.default.createElement("button", { className: "btn btn-sm btn-link", onClick: props.onClose },
+                    react_1.default.createElement("i", { className: "fa fa-arrow-left" }),
+                    " Close")),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement(ThemeToggle, { theme: props.design.style, onChange: (theme) => {
+                    props.onDesignChange({ ...props.design, style: theme, layoutOptions: (0, layoutOptions_1.getDefaultLayoutOptions)(theme) });
+                } }),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("h4", null, "Advanced"),
+            react_1.default.createElement("a", { className: "btn btn-sm btn-link", style: { float: "right" }, onClick: handleResetDefaults }, "Reset to Defaults"),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Collapse to Single Column" },
+                react_1.default.createElement(WidthSelector, { value: layoutOptions.collapseColumnsWidth, onChange: (collapseColumnsWidth) => {
+                        setLayoutOptions({ ...layoutOptions, collapseColumnsWidth });
+                    }, sign: "< " })),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Hide Quickfilters" },
+                react_1.default.createElement(WidthSelector, { value: layoutOptions.hideQuickfiltersWidth, onChange: (hideQuickfiltersWidth) => {
+                        setLayoutOptions({ ...layoutOptions, hideQuickfiltersWidth });
+                    }, sign: "< " })),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Minimum Width (before scrolling or scaling)" },
+                react_1.default.createElement(WidthSelector, { value: layoutOptions.minimumWidth, onChange: (minimumWidth) => {
+                        setLayoutOptions({ ...layoutOptions, minimumWidth });
+                    }, sign: "< " }),
+                react_1.default.createElement(bootstrap_1.FormGroup, { label: "When Below Minimum Width" },
+                    react_1.default.createElement(bootstrap_1.Toggle, { value: layoutOptions.belowMinimumWidth, onChange: (belowMinimumWidth) => {
+                            setLayoutOptions({ ...layoutOptions, belowMinimumWidth: belowMinimumWidth });
+                        }, options: [
+                            { value: "scroll", label: "Scroll" },
+                            { value: "scale", label: "Scale" }
+                        ] }))),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Maximum Width (before padding)" },
+                react_1.default.createElement(WidthSelector, { value: layoutOptions.maximumWidth, onChange: (maximumWidth) => {
+                        setLayoutOptions({ ...layoutOptions, maximumWidth });
+                    }, sign: "> " }))),
+        react_1.default.createElement("div", { style: { textAlign: "center", padding: 3 } },
+            react_1.default.createElement("span", { className: "text-muted" }, "Preview As:\u00A0"),
+            react_1.default.createElement(bootstrap_1.Toggle, { value: previewSize, onChange: setPreviewSize, size: "xs", options: sizeOptions.map((so, index) => ({ value: index, label: so.label })) })),
+        react_1.default.createElement("div", { style: { overflow: "auto" } },
+            react_1.default.createElement("div", { style: {
+                    display: "grid",
+                    gridTemplateColumns: `1fr ${sizeOptions[previewSize].value.width}px 1fr`,
+                    gridTemplateRows: `1fr ${sizeOptions[previewSize].value.height}px 1fr`,
+                    height: "100%",
+                    border: "solid 1px #AAA"
+                } },
+                react_1.default.createElement("div", { style: { backgroundColor: "#888", gridColumn: "1 / 4" } }),
+                react_1.default.createElement("div", { style: { backgroundColor: "#888" } }),
+                react_1.default.createElement("div", { style: { height: "100%", display: "grid", gridTemplateRows: "auto 1fr" } },
+                    react_1.default.createElement("div", { key: "quickfilters" }, layoutOptions.hideQuickfiltersWidth == null ||
+                        sizeOptions[previewSize].value.width > layoutOptions.hideQuickfiltersWidth
+                        ? props.quickfiltersView
+                        : null),
+                    props.dashboardView),
+                react_1.default.createElement("div", { style: { backgroundColor: "#888" } }),
+                react_1.default.createElement("div", { style: { backgroundColor: "#888", gridColumn: "1 / 4" } })))));
+}
+exports.LayoutOptionsComponent = LayoutOptionsComponent;
+function ThemeToggle(props) {
+    function renderStyleItem(theme) {
+        const isActive = (props.theme || "default") == theme;
+        if (theme == "default") {
+            return (react_1.default.createElement("a", { key: theme, className: isActive ? "list-group-item active" : "list-group-item", onClick: props.onChange.bind(null, "default") },
+                react_1.default.createElement("div", null, "Classic Dashboard"),
+                react_1.default.createElement("div", { style: { opacity: 0.6 } }, "Ideal for data display with minimal text")));
+        }
+        if (theme == "greybg") {
+            return (react_1.default.createElement("a", { key: theme, className: isActive ? "list-group-item active" : "list-group-item", onClick: props.onChange.bind(null, "greybg") },
+                react_1.default.createElement("div", null, "Framed Dashboard"),
+                react_1.default.createElement("div", { style: { opacity: 0.6 } }, "Each widget is white on a grey background")));
+        }
+        if (theme == "story") {
+            return (react_1.default.createElement("a", { key: theme, className: isActive ? "list-group-item active" : "list-group-item", onClick: props.onChange.bind(null, "story") },
+                react_1.default.createElement("div", null, "Story"),
+                react_1.default.createElement("div", { style: { opacity: 0.6 } }, "Ideal for data-driven storytelling with lots of text")));
+        }
+        return null;
+    }
+    return (react_1.default.createElement(bootstrap_1.FormGroup, { label: "Theme" },
+        renderStyleItem("default"),
+        renderStyleItem("greybg"),
+        renderStyleItem("story")));
+}
+function WidthSelector(props) {
+    return (react_1.default.createElement(bootstrap_1.Select, { value: props.value, onChange: props.onChange, nullLabel: "N/A", options: [
+            { value: 400, label: `${props.sign}400px (Phone)` },
+            { value: 600, label: `${props.sign}600px (Small tablet)` },
+            { value: 800, label: `${props.sign}800px (Tablet)` },
+            { value: 1000, label: `${props.sign}1000px (Laptop)` },
+            { value: 1200, label: `${props.sign}1200px (Desktop)` },
+            { value: 1600, label: `${props.sign}1600px (Wide Desktop)` }
+        ] }));
+}

package/lib/dashboards/README.md

@@ -0,0 +1,13 @@
+## Layout
+
+`DashboardComponent` is the top level dashboard class. It holds the view and designer elements, widget factory and undo stack
+
+It creates a view `DashboardViewComponent` that handles scoping of widgets
+
+### Dashboard design
+
+See DashboardDesign.ts
+
+### Widget scoping
+
+Each widget may have a scope (private data indicating which part is highlighted) and apply filters as a result to other widgets