@mwater/visualization 5.2.0 → 5.3.0

package/lib/axes/ColorPaletteCollectionComponent.js

@@ -1,14 +1,37 @@
 "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 react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
+const react_1 = __importStar(require("react"));
 const ColorSchemeFactory_1 = __importDefault(require("../ColorSchemeFactory"));
-class ColorPaletteCollectionComponent extends react_1.default.Component {
-    static palettes = [
+const CustomColorsContext_1 = require("../CustomColorsContext");
+function ColorPaletteCollectionComponent(props) {
+    const palettes = [
         { type: "schemeSet1", reversed: false },
         { type: "schemeSet2", reversed: false },
         { type: "schemeSet3", reversed: false },
@@ -72,59 +95,67 @@ class ColorPaletteCollectionComponent extends react_1.default.Component {
         { type: "interpolateRdYlGn", reversed: false },
         { type: "interpolateRdYlGn", reversed: true }
     ];
-    onPaletteSelected = (index) => {
-        // Generate color map
-        const scheme = ColorSchemeFactory_1.default.createColorScheme({
-            type: ColorPaletteCollectionComponent.palettes[index].type,
-            // Null doesn't count to length
-            number: lodash_1.default.any(this.props.categories, (c) => c.value == null)
-                ? this.props.categories.length - 1
-                : this.props.categories.length,
-            reversed: ColorPaletteCollectionComponent.palettes[index].reversed
+    // Get custom colors
+    const customColorsContext = (0, react_1.useContext)(CustomColorsContext_1.CustomColorsContext);
+    // Number of colors needed. Null doesn't count to length
+    const numColors = props.categories.filter((c) => c.value != null).length;
+    if (customColorsContext && customColorsContext.customColors.filter((c) => c != null).length > 0) {
+        const filteredCustomColors = customColorsContext.customColors.filter((c) => c != null);
+        const customPalettes = [];
+        for (let i = 0; i < filteredCustomColors.length; i += 6) {
+            const customPalette = filteredCustomColors.slice(i, i + 6);
+            customPalettes.push({ type: "custom", reversed: false, colors: customPalette });
+        }
+        palettes.unshift(...customPalettes);
+    }
+    function generatePaletteColors(palette, numColors) {
+        if (palette.type === "custom") {
+            return palette.colors;
+        }
+        return ColorSchemeFactory_1.default.createColorScheme({
+            type: palette.type,
+            number: numColors,
+            reversed: palette.reversed
         });
-        const colorMap = lodash_1.default.map(this.props.categories, (category, i) => ({
+    }
+    const onPaletteSelected = (index) => {
+        // Generate color map
+        const scheme = generatePaletteColors(palettes[index], Math.min(numColors, 6));
+        const colorMap = lodash_1.default.map(props.categories, (category, i) => ({
             value: category.value,
             color: category.value === null ? "#aaaaaa" : scheme[i % scheme.length]
         }));
-        return this.props.onPaletteSelected(colorMap);
+        return props.onPaletteSelected(colorMap);
     };
-    renderCancel = () => {
-        if (this.props.axis.colorMap) {
-            return R("div", null, R("a", { className: "link-plain", onClick: this.props.onCancel, key: "cancel-customize" }, "Cancel"));
+    const renderCancel = () => {
+        if (props.axis.colorMap) {
+            return (react_1.default.createElement("div", null,
+                react_1.default.createElement("a", { className: "link-plain", onClick: props.onCancel, key: "cancel-customize" }, "Cancel")));
         }
         return null;
     };
-    render() {
-        return R("div", null, R("p", null, "Please select a color scheme"), lodash_1.default.map(ColorPaletteCollectionComponent.palettes, (config, index) => {
-            return R(ColorPaletteComponent, {
-                key: index,
-                index,
-                colorSet: ColorSchemeFactory_1.default.createColorScheme({
-                    type: config.type,
-                    number: Math.min(this.props.categories.length - 1, 6),
-                    reversed: config.reversed
-                }),
-                onPaletteSelected: this.onPaletteSelected,
-                number: this.props.categories.length
-            });
-        }), this.renderCancel());
+    function renderPalette(palette, index) {
+        return (react_1.default.createElement(ColorPaletteComponent, { key: index, index: index, colorSet: generatePaletteColors(palette, 6), onPaletteSelected: onPaletteSelected }));
     }
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("p", null, "Please select a color scheme"),
+        palettes.map((palette, index) => renderPalette(palette, index)),
+        renderCancel()));
 }
 exports.default = ColorPaletteCollectionComponent;
 class ColorPaletteComponent extends react_1.default.Component {
-    static defaultProps = { number: 6 };
     handleSelect = () => {
         return this.props.onPaletteSelected(this.props.index);
     };
     render() {
-        return R("div", { onClick: this.handleSelect, className: "axis-palette" }, lodash_1.default.map(this.props.colorSet.slice(0, this.props.number), (color, i) => {
+        return (react_1.default.createElement("div", { onClick: this.handleSelect, className: "axis-palette" }, lodash_1.default.map(this.props.colorSet, (color, i) => {
             const cellStyle = {
                 display: "inline-block",
                 height: 20,
                 width: 20,
                 backgroundColor: color
             };
-            return R("div", { style: cellStyle, key: i }, " ");
-        }));
+            return react_1.default.createElement("div", { style: cellStyle, key: i }, " ");
+        })));
     }
 }

package/lib/dashboards/DashboardComponent.d.ts

@@ -1,8 +1,7 @@
-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 { DashboardViewComponentHandle } from "./DashboardViewComponent";
 import QuickfiltersComponent from "../quickfilter/QuickfiltersComponent";
 import SettingsModalComponent from "./SettingsModalComponent";
 import { DashboardDesign } from "./DashboardDesign";
@@ -51,18 +50,12 @@ export interface DashboardComponentState {
  * Manages undo stack and quickfilter value
  */
 export default class DashboardComponent extends React.Component<DashboardComponentProps, DashboardComponentState> {
-    dashboardView: DashboardViewComponent | null;
+    dashboardView: DashboardViewComponentHandle | null;
     static defaultProps: {
         printScaling: boolean;
     };
-    static childContextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
     settings: SettingsModalComponent | null;
-    getChildContext(): {
-        locale: string | undefined;
-    };
-    constructor(props: any);
+    constructor(props: DashboardComponentProps);
     getQuickfilterValues: () => any[];
     componentWillReceiveProps(nextProps: any): void;
     handlePrint: () => void;
@@ -76,7 +69,6 @@ export default class DashboardComponent extends React.Component<DashboardCompone
     handleStyleChange: (style: any) => void;
     handleDesignChange: (design: any) => void;
     handleShowQuickfilters: () => void;
-    handleUpgrade: () => void;
     getCompiledFilters(): JsonQLFilter[];
     renderEditingSwitch(): React.DetailedReactHTMLElement<{
         key: string;
@@ -97,6 +89,6 @@ export default class DashboardComponent extends React.Component<DashboardCompone
         };
     }, HTMLElement>;
     renderQuickfilter(): React.CElement<import("../quickfilter/QuickfiltersComponent").QuickfiltersComponentProps, QuickfiltersComponent>;
-    refDashboardView: (el: any) => any;
+    refDashboardView: (el: any) => void;
     render(): React.JSX.Element;
 }

package/lib/dashboards/DashboardComponent.js

@@ -26,7 +26,6 @@ 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;
@@ -37,7 +36,6 @@ const QuickfiltersComponent_1 = __importDefault(require("../quickfilter/Quickfil
 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");
@@ -48,22 +46,13 @@ const expressions_ui_1 = require("@mwater/expressions-ui");
 class DashboardComponent extends react_1.default.Component {
     dashboardView;
     static defaultProps = { printScaling: true };
-    static childContextTypes = {
-        locale: prop_types_1.default.string,
-    };
     settings;
-    getChildContext() {
-        return {
-            // Pass locale down. Both here and DashboardViewComponent to ensure that quickfilters also get context
-            locale: this.props.design.locale,
-        };
-    }
     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,
+            quickfiltersValues: props.quickfiltersValues || null,
             editing: LayoutManager_1.default.createLayoutManager(props.design.layout).isEmpty(props.design.items) &&
                 props.onDesignChange != null,
             layoutOptionsOpen: false,
@@ -93,7 +82,7 @@ class DashboardComponent extends react_1.default.Component {
         }
     }
     handlePrint = () => {
-        this.dashboardView.print();
+        this.dashboardView?.print();
     };
     handleUndo = () => {
         const undoStack = this.state.undoStack.undo();
@@ -139,14 +128,6 @@ class DashboardComponent extends react_1.default.Component {
     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));
@@ -164,9 +145,7 @@ class DashboardComponent extends react_1.default.Component {
         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
+        return R("div", null, this.state.editing
             ? [
                 R("a", {
                     key: "undo",
@@ -209,7 +188,7 @@ class DashboardComponent extends react_1.default.Component {
         });
     }
     refDashboardView = (el) => {
-        return (this.dashboardView = el);
+        this.dashboardView = el;
     };
     render() {
         let filters = this.props.filters || [];
@@ -241,19 +220,20 @@ class DashboardComponent extends react_1.default.Component {
         });
         // Pass active tables down to table select components so they can present a shorter list
         return react_1.default.createElement(expressions_ui_1.ActiveTablesContext.Provider, { value: DashboardUtils.getFilterableTables(this.props.design, this.props.schema) },
-            react_1.default.createElement("div", { style: {
-                    display: "grid",
-                    gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
-                    height: "100%"
-                } },
-                !this.props.hideTitleBar ? this.renderTitleBar() : undefined,
-                react_1.default.createElement("div", null, !this.state.hideQuickfilters ? this.renderQuickfilter() : undefined),
-                dashboardView,
-                this.props.onDesignChange != null && (react_1.default.createElement(SettingsModalComponent_1.default, { onDesignChange: this.handleDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, ref: (c) => {
-                        this.settings = c;
-                    } })),
-                this.state.layoutOptionsOpen && (react_1.default.createElement(ModalWindowComponent_1.default, { isOpen: true, outerPadding: 10, innerPadding: 10 },
-                    react_1.default.createElement(LayoutOptionsComponent_1.LayoutOptionsComponent, { design: this.props.design, onDesignChange: this.props.onDesignChange, onClose: () => this.setState({ layoutOptionsOpen: false }), dashboardView: readonlyDashboardView, quickfiltersView: this.renderQuickfilter() })))));
+            react_1.default.createElement(expressions_ui_1.LocaleContext.Provider, { value: this.props.design.locale ?? "en" },
+                react_1.default.createElement("div", { style: {
+                        display: "grid",
+                        gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
+                        height: "100%"
+                    } },
+                    !this.props.hideTitleBar ? this.renderTitleBar() : undefined,
+                    react_1.default.createElement("div", null, !this.state.hideQuickfilters ? this.renderQuickfilter() : undefined),
+                    dashboardView,
+                    this.props.onDesignChange != null && (react_1.default.createElement(SettingsModalComponent_1.default, { onDesignChange: this.handleDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, ref: (c) => {
+                            this.settings = c;
+                        } })),
+                    this.state.layoutOptionsOpen && (react_1.default.createElement(ModalWindowComponent_1.default, { isOpen: true, outerPadding: 10, innerPadding: 10, onRequestClose: () => this.setState({ layoutOptionsOpen: false }) },
+                        react_1.default.createElement(LayoutOptionsComponent_1.LayoutOptionsComponent, { design: this.props.design, onDesignChange: this.props.onDesignChange, dashboardView: readonlyDashboardView, quickfiltersView: this.renderQuickfilter() }))))));
     }
 }
 exports.default = DashboardComponent;

package/lib/dashboards/DashboardDesign.d.ts

@@ -12,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;

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;