@mwater/visualization 5.1.0 → 5.3.0

package/lib/dashboards/DashboardDesign.d.ts

@@ -1,6 +1,7 @@
 import { Quickfilter } from "../quickfilter/Quickfilter";
-import { LiteralType, Expr } from "@mwater/expressions";
+import { Expr } from "@mwater/expressions";
 import { BlocksLayoutOptions, DashboardTheme } from "./layoutOptions";
+import { GlobalFilter } from "../GlobalFilter";
 /** 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.
@@ -11,11 +12,11 @@ export interface DashboardDesign {
     /** 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 */
+    layout: "blocks";
+    /** Optional theme to use. Defaults to "default" theme. */
     style?: DashboardTheme;
     /** Options for layout including responsiveness, scaling, etc */
-    layoutOptions?: BlocksLayoutOptions;
+    layoutOptions?: Partial<BlocksLayoutOptions>;
     /** filter expression indexed by table. e.g. { sometable: logical expression, etc. } */
     filters?: {
         [tableId: string]: Expr;
@@ -27,19 +28,3 @@ export interface DashboardDesign {
     /** 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/DashboardUpgrader.js

@@ -54,7 +54,42 @@ class DashboardUpgrader {
                 }
             }
             else if (lineItems.length === 1) {
-                newItems.blocks.push(convertBlock(lineItems[0], items[lineItems[0]]));
+                const item = items[lineItems[0]];
+                const convertedBlock = convertBlock(lineItems[0], item);
+                // If widget goes all the way across
+                if (item.layout.x + item.layout.w == 24) {
+                    newItems.blocks.push(convertedBlock);
+                }
+                else {
+                    const leftSpacerWidth = item.layout.x;
+                    const rightSpacerWidth = 24 - (item.layout.x + item.layout.w);
+                    const blocks = [];
+                    const weights = [];
+                    if (leftSpacerWidth > 0) {
+                        blocks.push({
+                            id: (0, uuid_1.default)(),
+                            type: "spacer",
+                            aspectRatio: 3,
+                        });
+                        weights.push(leftSpacerWidth);
+                    }
+                    blocks.push(convertedBlock);
+                    weights.push(item.layout.w);
+                    if (rightSpacerWidth > 0) {
+                        blocks.push({
+                            id: (0, uuid_1.default)(),
+                            type: "spacer",
+                            aspectRatio: 3,
+                        });
+                        weights.push(rightSpacerWidth);
+                    }
+                    newItems.blocks.push({
+                        id: (0, uuid_1.default)(),
+                        type: "horizontal",
+                        blocks,
+                        weights,
+                    });
+                }
                 delete items[lineItems[0]];
             }
             y += 1;

package/lib/dashboards/DashboardViewComponent.d.ts

@@ -1,8 +1,5 @@
-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 */
@@ -34,38 +31,12 @@ export interface DashboardViewComponentProps {
     /** Change to force a refresh */
     refreshKey?: any;
 }
+export interface DashboardViewComponentHandle {
+    print: () => Promise<void>;
+}
 /**
  * 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>;
-}
+declare const DashboardViewComponent: React.ForwardRefExoticComponent<DashboardViewComponentProps & React.RefAttributes<DashboardViewComponentHandle>>;
+export default DashboardViewComponent;

package/lib/dashboards/DashboardViewComponent.js

@@ -27,9 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (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 react_1 = __importStar(require("react"));
 const ImplicitFilterBuilder_1 = __importDefault(require("../ImplicitFilterBuilder"));
 const DashboardUtils = __importStar(require("./DashboardUtils"));
 const WidgetFactory_1 = __importDefault(require("../widgets/WidgetFactory"));
@@ -40,196 +38,174 @@ const WidgetScopesViewComponent_1 = __importDefault(require("../widgets/WidgetSc
 const layoutOptions_1 = require("./layoutOptions");
 const WidgetComponent_1 = require("./WidgetComponent");
 const vectorMaps_1 = require("../maps/vectorMaps");
+const WidgetDataSourcePrioritizer_1 = require("./WidgetDataSourcePrioritizer");
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 /**
  * 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
+const DashboardViewComponent = react_1.default.forwardRef((props, ref) => {
+    const [widgetScoper, setWidgetScoper] = (0, react_1.useState)(new WidgetScoper_1.default());
+    const widgetComps = (0, react_1.useRef)({});
+    const [forceUpdate, setForceUpdate] = (0, react_1.useState)(0);
+    const widgetDataSourcePrioritizer = (0, react_1.useMemo)(() => {
+        return new WidgetDataSourcePrioritizer_1.WidgetDataSourcePrioritizer(props.dashboardDataSource, 10);
+    }, [props.dashboardDataSource]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            // Clear queue on component unmount
+            widgetDataSourcePrioritizer.cancel();
         };
-        this.widgetComps = {}; // Lookup of widget components by id
-    }
-    componentDidMount() {
-        if (this.props.initialTOCEntryScroll) {
+    }, [widgetDataSourcePrioritizer]);
+    (0, react_1.useEffect)(() => {
+        if (props.initialTOCEntryScroll) {
             // Getting heights of widgets properly requires a 0 length timeout
             setTimeout(() => {
-                return this.handleScrollToTOCEntry(this.props.initialTOCEntryScroll.widgetId, this.props.initialTOCEntryScroll.entryId);
+                handleScrollToTOCEntry(props.initialTOCEntryScroll.widgetId, 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();
+        window.addEventListener("storage", handleStorageChange);
+        return () => {
+            // Remove listener
+            window.removeEventListener("storage", handleStorageChange);
+        };
+    }, [props.initialTOCEntryScroll]);
+    const handleStorageChange = () => {
+        setForceUpdate(forceUpdate + 1);
     };
-    handleScopeChange = (id, scope) => {
-        return this.setState({ widgetScoper: this.state.widgetScoper.applyScope(id, scope) });
+    const handleScopeChange = (id, scope) => {
+        setWidgetScoper(widgetScoper.applyScope(id, scope));
     };
-    handleRemoveScope = (id) => {
-        return this.setState({ widgetScoper: this.state.widgetScoper.applyScope(id, null) });
+    const handleRemoveScope = (id) => {
+        setWidgetScoper(widgetScoper.applyScope(id, null));
     };
-    handleItemsChange = (items) => {
-        const design = lodash_1.default.extend({}, this.props.design, { items });
-        return this.props.onDesignChange(design);
+    const handleItemsChange = (items) => {
+        const design = lodash_1.default.extend({}, props.design, { items });
+        props.onDesignChange(design);
     };
-    // Handle a change of the clipboard and determine which tables the clipboard block uses
-    handleClipboardChange = (block) => {
+    const handleClipboardChange = (block) => {
         try {
             // If empty, just set it
             if (!block) {
                 window.localStorage.removeItem("DashboardViewComponent.clipboard");
-                this.forceUpdate();
+                setForceUpdate(forceUpdate + 1);
                 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");
+            const tables = lodash_1.default.pluck(lodash_1.default.filter(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();
+            setForceUpdate(forceUpdate + 1);
         }
         catch (err) {
             return alert("Clipboard not available");
         }
     };
-    getClipboardContents() {
+    const 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)();
+    };
+    const print = async () => {
+        // Temporarily enable print mode for vector maps
         try {
-            (0, vectorMaps_1.setMapTilerApiKey)("");
+            (0, vectorMaps_1.setPrintingModeEnabled)(true);
             // 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 elem = (react_1.default.createElement("div", { style: { width: 1080 } },
+                react_1.default.createElement(DashboardViewComponent, { ...props, onDesignChange: undefined, printMode: true })));
             const printer = new ReactElementPrinter_1.default();
             await printer.print(elem, { delay: 5000 });
         }
         finally {
-            (0, vectorMaps_1.setMapTilerApiKey)(mapTilerAPIKey);
+            (0, vectorMaps_1.setPrintingModeEnabled)(false);
         }
     };
-    // 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 || []);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        print
+    }));
+    const getCompiledFilters = () => {
+        let compiledFilters = DashboardUtils.getCompiledFilters(props.design, props.schema, DashboardUtils.getFilterableTables(props.design, props.schema));
+        compiledFilters = compiledFilters.concat(props.filters || []);
         return compiledFilters;
-    }
-    // Get list of TOC entries
-    getTOCEntries(layoutManager) {
+    };
+    const getTOCEntries = (layoutManager) => {
         const entries = [];
-        for (let { id, type, design } of layoutManager.getAllWidgets(this.props.design.items)) {
+        for (let { id, type, design } of layoutManager.getAllWidgets(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)) {
+            for (let entry of widget.getTOCEntries(design, props.namedStrings)) {
                 entries.push(lodash_1.default.extend({}, entry, { widgetId: id }));
             }
         }
         return entries;
-    }
-    handleScrollToTOCEntry = (widgetId, entryId) => {
-        const widgetComp = this.widgetComps[widgetId];
+    };
+    const handleScrollToTOCEntry = (widgetId, entryId) => {
+        const widgetComp = widgetComps.current[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);
+    const renderScopes = () => {
+        return (react_1.default.createElement(WidgetScopesViewComponent_1.default, { scopes: widgetScoper.getScopes(), onRemoveScope: handleRemoveScope }));
     };
-    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";
+    const compRef = (widgetId, comp) => {
+        return (widgetComps.current[widgetId] = comp);
+    };
+    let cantPasteMessage = "";
+    const layoutManager = LayoutManager_1.default.createLayoutManager(props.design.layout);
+    const compiledFilters = getCompiledFilters();
+    // Get filterable tables
+    const filterableTables = DashboardUtils.getFilterableTables(props.design, props.schema);
+    // Determine toc entries
+    const tocEntries = getTOCEntries(layoutManager);
+    // Get clipboard contents
+    const clipboardContents = getClipboardContents();
+    // Check if can't paste because of missing table
+    if (clipboardContents && !lodash_1.default.all(clipboardContents.tables, (table) => props.schema.getTable(table))) {
+        cantPasteMessage = "Dashboard is missing one or more data sources needed for the copied item.";
+    }
+    const renderWidget = (options) => {
+        const widgetDataSource = widgetDataSourcePrioritizer.getWidgetDataSource(options.type, options.id, options.priority ?? 0);
+        // Get filters (passed in plus dashboard widget scoper filters)
+        let filters = compiledFilters.concat(widgetScoper.getFilters(options.id));
+        // Extend the filters to include implicit filters (filter children in 1-n relationships)
+        if (props.design.implicitFiltersEnabled || props.design.implicitFiltersEnabled == null) {
+            // Default is true
+            const implicitFilterBuilder = new ImplicitFilterBuilder_1.default(props.schema);
+            filters = implicitFilterBuilder.extendFilters(filterableTables, filters);
         }
-        // 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
-        }));
+        const widgetElem = (react_1.default.createElement(WidgetComponent_1.WidgetComponent, { key: options.id, id: options.id, type: options.type, schema: props.schema, dataSource: props.dataSource, widgetDataSource: widgetDataSource, design: options.design, scope: widgetScoper.getScope(options.id), filters: filters, onScopeChange: handleScopeChange.bind(null, options.id), onDesignChange: options.onDesignChange, width: options.width, height: options.height, onRowClick: props.onRowClick, namedStrings: props.namedStrings, tocEntries: tocEntries, onScrollToTOCEntry: handleScrollToTOCEntry, 
+            // Keep references to widget elements
+            widgetRef: compRef.bind(null, options.id), refreshKey: props.refreshKey }));
+        return widgetElem;
+    };
+    const style = {
+        height: "100%",
+        position: "relative"
+    };
+    if (!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 (react_1.default.createElement(contexts_1.LocaleContext.Provider, { value: props.design.locale ?? "en" },
+        react_1.default.createElement("div", { style: style },
+            !props.hideScopes ? renderScopes() : undefined,
+            layoutManager.renderLayout({
+                items: props.design.items,
+                onItemsChange: props.onDesignChange != null ? handleItemsChange : undefined,
+                layoutOptions: (0, layoutOptions_1.getLayoutOptions)(props.design),
+                renderWidget,
+                clipboard: clipboardContents?.block,
+                onClipboardChange: handleClipboardChange,
+                cantPasteMessage
+            }))));
+});
 exports.default = DashboardViewComponent;

package/lib/dashboards/FontStyleEditor.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { FontStyle } from "./layoutOptions";
+interface FontStyleEditorProps {
+    value: FontStyle;
+    onChange: (value: FontStyle) => void;
+}
+export declare const FontStyleEditor: ({ value, onChange }: FontStyleEditorProps) => React.JSX.Element;
+export {};

package/lib/dashboards/FontStyleEditor.js

@@ -0,0 +1,130 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontStyleEditor = void 0;
+const react_1 = __importStar(require("react"));
+const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
+const layoutOptions_1 = require("./layoutOptions");
+const react_select_1 = __importDefault(require("react-select"));
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+const ColorComponent_1 = __importDefault(require("../ColorComponent"));
+const FontStyleEditor = ({ value, onChange }) => {
+    const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
+    const handleOpenModal = () => setIsModalOpen(true);
+    const handleCloseModal = () => setIsModalOpen(false);
+    const handleSave = (newValue) => {
+        onChange(newValue);
+        handleCloseModal();
+    };
+    return react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', cursor: 'pointer', border: 'solid 1px #DDD', padding: '4px', borderRadius: '6px', justifyContent: 'space-between' }, onClick: handleOpenModal },
+            react_1.default.createElement("div", { style: {
+                    fontFamily: (0, layoutOptions_1.expandFontFamily)(value.family),
+                    fontSize: `${value.size}px`,
+                    fontWeight: value.weight,
+                    color: value.color
+                } }, "Sample"),
+            react_1.default.createElement("div", { style: { fontSize: '10px', color: '#888', marginTop: '2px' } },
+                value.family,
+                ", ",
+                value.size,
+                "px")),
+        isModalOpen && (react_1.default.createElement(FontEditorModal, { initialValue: value, onSave: handleSave, onCancel: handleCloseModal })));
+};
+exports.FontStyleEditor = FontStyleEditor;
+const FontEditorModal = ({ initialValue, onSave, onCancel }) => {
+    const [currentValue, setCurrentValue] = (0, react_1.useState)(initialValue);
+    const handleChange = (field, value) => {
+        if (field == "family") {
+            setCurrentValue(prev => ({ ...prev, [field]: value, weight: "400" }));
+        }
+        else {
+            setCurrentValue(prev => ({ ...prev, [field]: value }));
+        }
+    };
+    // Generate font size options from 5 to 48
+    const fontSizeOptions = Array.from({ length: 44 }, (_, i) => i + 5).map(size => ({
+        value: size,
+        label: `${size}px`
+    }));
+    // If the font is variable, then the font weight options are much wider
+    const fontWeightOptions = [];
+    if (currentValue.family === "Roboto") {
+        fontWeightOptions.push("100", "300", "400", "500", "700", "900");
+    }
+    else if (currentValue.family === "Lora") {
+        fontWeightOptions.push("400", "500", "600", "700");
+    }
+    else if (currentValue.family === "Inter") {
+        fontWeightOptions.push("100", "200", "300", "400", "500", "600", "700", "800", "900");
+    }
+    else if (currentValue.family === "Merriweather") {
+        fontWeightOptions.push("300", "400", "700", "900");
+    }
+    else if (currentValue.family === "Lato") {
+        fontWeightOptions.push("100", "300", "400", "700", "900");
+    }
+    else {
+        fontWeightOptions.push("400", "700");
+    }
+    return (react_1.default.createElement(ActionCancelModalComponent_1.default, { title: "Edit Font", onAction: () => onSave(currentValue), onCancel: onCancel },
+        react_1.default.createElement("div", { style: {
+                border: '1px solid #ccc',
+                padding: '10px',
+                marginBottom: '15px',
+                borderRadius: '4px'
+            } },
+            react_1.default.createElement("div", { style: {
+                    marginBottom: '10px',
+                    fontSize: '14px',
+                    fontWeight: 'bold'
+                } }, "Sample Text:"),
+            react_1.default.createElement("div", { style: {
+                    fontFamily: (0, layoutOptions_1.expandFontFamily)(currentValue.family),
+                    fontSize: `${currentValue.size}px`,
+                    fontWeight: currentValue.weight,
+                    color: currentValue.color
+                } }, "The quick brown fox jumps over the lazy dog.")),
+        react_1.default.createElement(bootstrap_1.FormGroup, { label: "Font Family" },
+            react_1.default.createElement(react_select_1.default, { value: { value: currentValue.family, label: currentValue.family }, onChange: (option) => handleChange('family', option?.value || ''), options: [
+                    { value: 'Helvetica Neue', label: 'Helvetica Neue' },
+                    { value: 'Georgia', label: 'Georgia' },
+                    { value: 'Inter', label: 'Inter' },
+                    { value: 'Lato', label: 'Lato' },
+                    { value: 'Lora', label: 'Lora' },
+                    { value: 'Lucida Grande', label: 'Lucida Grande' },
+                    { value: 'Merriweather', label: 'Merriweather' },
+                    { value: 'Roboto', label: 'Roboto' },
+                ], formatOptionLabel: (option) => (react_1.default.createElement("span", { style: { fontFamily: (0, layoutOptions_1.expandFontFamily)(option.value) } }, option.label)), isClearable: false, menuPortalTarget: document.body, styles: { menuPortal: (style) => ({ ...style, zIndex: 2000 }) } })),
+        react_1.default.createElement(bootstrap_1.FormGroup, { label: "Font Size:", horizontal: true },
+            react_1.default.createElement(bootstrap_1.Select, { value: currentValue.size, onChange: (value) => handleChange('size', value || 12), options: fontSizeOptions })),
+        react_1.default.createElement(bootstrap_1.FormGroup, { label: "Font Weight:", horizontal: true },
+            react_1.default.createElement(bootstrap_1.Select, { value: currentValue.weight, onChange: (value) => handleChange('weight', value), options: fontWeightOptions.map(weight => ({ value: weight, label: weight })) })),
+        react_1.default.createElement(bootstrap_1.FormGroup, { label: "Font Color:", horizontal: true },
+            react_1.default.createElement(ColorComponent_1.default, { color: currentValue.color, onChange: (value) => handleChange('color', value), disableReset: true }))));
+};

package/lib/dashboards/LayoutOptionsComponent.d.ts

@@ -3,7 +3,6 @@ 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 */