@mwater/visualization 5.0.0

package/lib/layouts/decorated-block.css

@@ -0,0 +1,100 @@
+/* Styles for decorated blocks */
+
+.mwater-visualization-decorated-block {
+  border: solid 1px transparent;
+  padding: 5px;
+  margin: -5px;
+  border-radius: 4px;
+  position: relative;
+}
+
+.mwater-visualization-decorated-block:hover {
+  border: solid 1px #88ceff;
+}
+
+.mwater-visualization-decorated-block-move,
+.mwater-visualization-decorated-block-remove,
+.mwater-visualization-decorated-block-aspect,
+.mwater-visualization-decorated-block-resize {
+  display: none;
+}
+
+.mwater-visualization-decorated-block:hover > .mwater-visualization-decorated-block-move {
+  display: block;
+  position: absolute;
+  left: -14px;
+  top: -11px;
+  border: solid 1px #88ceff;
+  color: #88ceff;
+  background-color: white;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 5px;
+  border-radius: 5px;
+  padding-right: 5px;
+  cursor: move;
+}
+
+.mwater-visualization-decorated-block-move:hover {
+  background-color: #88ceff !important;
+  color: white !important;
+}
+
+.mwater-visualization-decorated-block:hover > .mwater-visualization-decorated-block-remove {
+  display: block;
+  position: absolute;
+  right: -5px;
+  top: -10px;
+  border: solid 1px #88ceff;
+  background-color: white;
+  color: #88ceff;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.mwater-visualization-decorated-block-remove:hover {
+  background-color: #88ceff !important;
+  color: white !important;
+  /*background-color: red !important;*/
+  /*color: white !important;*/
+}
+
+.mwater-visualization-decorated-block:hover > .mwater-visualization-decorated-block-aspect {
+  display: block;
+  position: absolute;
+  right: 50%;
+  bottom: -12px;
+  border: solid 1px #88ceff;
+  color: #88ceff;
+  background-color: white;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 5px;
+  border-radius: 5px;
+  padding-right: 5px;
+  cursor: move;
+}
+
+.mwater-visualization-decorated-block-aspect:hover {
+  background-color: #88ceff !important;
+  color: white !important;
+}
+
+.mwater-visualization-decorated-block:hover > .mwater-visualization-decorated-block-resize {
+  display: block;
+  position: absolute;
+  right: -10px;
+  bottom: -10px;
+  border: solid 1px #88ceff;
+  color: #88ceff;
+  background-color: white;
+  border-radius: 5px;
+  padding-left: 5px;
+  padding-right: 5px;
+  cursor: move;
+}
+
+.mwater-visualization-decorated-block-resize:hover {
+  background-color: #88ceff !important;
+  color: white !important;
+}

package/lib/layouts/grid/GridLayoutComponent.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+export interface GridLayoutComponentProps {
+    width: number;
+    items?: any;
+    onItemsChange?: any;
+    renderWidget: any;
+}
+export default class GridLayoutComponent extends React.Component<GridLayoutComponentProps> {
+    renderPageBreaks(layoutEngine: any, layouts: any): React.DetailedReactHTMLElement<{
+        className: string;
+        key: string;
+        style: {
+            position: "absolute";
+            top: number;
+        };
+    }, HTMLElement>[];
+    render(): React.ReactElement<{
+        style: {
+            height: string;
+            position: string;
+        };
+    }, string | React.JSXElementConstructor<any>>;
+}

package/lib/layouts/grid/GridLayoutComponent.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const WidgetContainerComponent_1 = __importDefault(require("./WidgetContainerComponent"));
+const LegoLayoutEngine_1 = __importDefault(require("./LegoLayoutEngine"));
+class GridLayoutComponent extends react_1.default.Component {
+    renderPageBreaks(layoutEngine, layouts) {
+        // Get height
+        const height = layoutEngine.calculateHeight(layouts);
+        // Page breaks are 8.5x11 with 0.5" margin
+        const pageHeight = (this.props.width / 7.5) * 10;
+        const number = Math.floor(height / pageHeight);
+        const elems = [];
+        if (number > 0) {
+            for (let i = 1, end = number, asc = 1 <= end; asc ? i <= end : i >= end; asc ? i++ : i--) {
+                elems.push(R("div", {
+                    className: "mwater-visualization-page-break",
+                    key: `page${i}`,
+                    style: { position: "absolute", top: i * pageHeight }
+                }));
+            }
+        }
+        return elems;
+    }
+    render() {
+        // Create layout engine
+        const layoutEngine = new LegoLayoutEngine_1.default(this.props.width, 24);
+        // Get layouts indexed by id
+        const layouts = lodash_1.default.mapValues(this.props.items, "layout");
+        const style = {
+            height: "100%",
+            position: "relative"
+        };
+        // Render widget container
+        return R("div", { style }, R(WidgetContainerComponent_1.default, {
+            layoutEngine,
+            items: this.props.items,
+            onItemsChange: this.props.onItemsChange,
+            renderWidget: this.props.renderWidget,
+            width: this.props.width
+        }), this.renderPageBreaks(layoutEngine, layouts));
+    }
+}
+exports.default = GridLayoutComponent;

package/lib/layouts/grid/GridLayoutManager.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import LayoutManager from "../LayoutManager";
+export default class GridLayoutManager extends LayoutManager {
+    renderPalette(width: any): React.DetailedReactHTMLElement<{
+        className: string;
+        style: {
+            position: "absolute";
+            top: number;
+            left: number;
+            bottom: number;
+            width: number;
+        };
+    }, HTMLElement>;
+    renderLayout(options: any): React.CElement<any, React.Component<any, any, any>>;
+    isEmpty(items: any): boolean;
+    getWidgetTypeAndDesign(items: any, widgetId: any): any;
+    getAllWidgets(items: any): {
+        id: string;
+        type: any;
+        design: any;
+    }[];
+    addWidget(items: any, widgetType: any, widgetDesign: any): any;
+    findOpenLayout(items: any, width: any, height: any): {
+        x: number;
+        y: number;
+        w: any;
+        h: any;
+    };
+}

package/lib/layouts/grid/GridLayoutManager.js

@@ -0,0 +1,141 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const uuid_1 = __importDefault(require("uuid"));
+const LayoutManager_1 = __importDefault(require("../LayoutManager"));
+const LegoLayoutEngine_1 = __importDefault(require("./LegoLayoutEngine"));
+const AutoSizeComponent_1 = __importDefault(require("@mwater/react-library/lib/AutoSizeComponent"));
+class GridLayoutManager extends LayoutManager_1.default {
+    renderPalette(width) {
+        const PaletteItemComponent = require("./PaletteItemComponent").default;
+        const createWidgetItem = (type, design // Add unique id
+        ) => () => ({
+            id: (0, uuid_1.default)(),
+            widget: { type, design },
+            bounds: { x: 0, y: 0, width: width / 3, height: width / 4 }
+        });
+        return R("div", {
+            className: "mwater-visualization-palette",
+            style: { position: "absolute", top: 0, left: 0, bottom: 0, width: 185 }
+        }, R(PaletteItemComponent, {
+            createItem: createWidgetItem("Text", { style: "title" }),
+            title: R("i", { className: "fa fa-font" }),
+            subtitle: "Title"
+        }), R(PaletteItemComponent, {
+            createItem: createWidgetItem("Text", {}),
+            title: R("i", { className: "fa fa-align-left" }),
+            subtitle: "Text"
+        }), R(PaletteItemComponent, {
+            createItem: createWidgetItem("LayeredChart", {}),
+            title: R("i", { className: "fa fa-bar-chart" }),
+            subtitle: "Chart"
+        }), R(PaletteItemComponent, {
+            createItem: createWidgetItem("Image", {}),
+            title: R("i", { className: "fa fa-image" }),
+            subtitle: "Image"
+        }), R(PaletteItemComponent, {
+            createItem: createWidgetItem("Map", {
+                baseLayer: "bing_road",
+                layerViews: [],
+                filters: {},
+                bounds: { w: -40, n: 25, e: 40, s: -25 }
+            }),
+            title: R("i", { className: "fa fa-map-o" }),
+            subtitle: "Map"
+        }), R(PaletteItemComponent, {
+            createItem: createWidgetItem("TableChart", {}),
+            title: R("i", { className: "fa fa-table" }),
+            subtitle: "Table"
+        }), R(PaletteItemComponent, {
+            createItem: createWidgetItem("CalendarChart", {}),
+            title: R("i", { className: "fa fa-calendar" }),
+            subtitle: "Calendar"
+        }), R(PaletteItemComponent, {
+            createItem: createWidgetItem("ImageMosaicChart", {}),
+            title: R("i", { className: "fa fa-th" }),
+            subtitle: "Mosaic"
+        }), R(PaletteItemComponent, {
+            createItem: createWidgetItem("IFrame", {}),
+            title: R("i", { className: "fa fa-youtube-play" }),
+            subtitle: "Video"
+        }));
+    }
+    // Renders the layout as a react element
+    // options:
+    //  items: opaque items object that layout manager understands
+    //  onItemsChange: Called when items changes
+    //  renderWidget: called with ({ id:, type:, design:, onDesignChange:, width:, height:  })
+    renderLayout(options) {
+        const GridLayoutComponent = require("./GridLayoutComponent").default;
+        return R(AutoSizeComponent_1.default, { injectWidth: true, injectHeight: true }, (size) => {
+            if (options.onItemsChange != null) {
+                return R("div", { style: { position: "relative", height: "100%", overflow: "hidden" } }, this.renderPalette(size.width), R("div", { style: { position: "absolute", left: 185, top: 0, right: 0, bottom: 0, overflow: "scroll" } }, R("div", { style: { position: "absolute", left: 20, top: 20, right: 20, bottom: 20 } }, R(GridLayoutComponent, {
+                    width: size.width - 40 - 185,
+                    items: options.items,
+                    onItemsChange: options.onItemsChange,
+                    renderWidget: options.renderWidget
+                }))));
+            }
+            else {
+                return R("div", { style: { position: "relative", height: "100%", width: size.width, padding: 20 } }, R(GridLayoutComponent, {
+                    width: size.width - 40,
+                    items: options.items,
+                    onItemsChange: options.onItemsChange,
+                    renderWidget: options.renderWidget
+                }));
+            }
+        });
+    }
+    // Tests if dashboard has any items
+    isEmpty(items) {
+        return lodash_1.default.isEmpty(items);
+    }
+    // Gets { type, design } of a widget
+    getWidgetTypeAndDesign(items, widgetId) {
+        return items[widgetId]?.widget;
+    }
+    // Gets all widgets in items as array of { type, design }
+    getAllWidgets(items) {
+        const widgets = [];
+        for (let id in items) {
+            const item = items[id];
+            widgets.push({ id, type: item.widget.type, design: item.widget.design });
+        }
+        return widgets;
+    }
+    // Add a widget to the items
+    addWidget(items, widgetType, widgetDesign) {
+        // Find place for new item
+        const layout = this.findOpenLayout(items, 12, 12);
+        // Create item
+        const item = {
+            layout,
+            widget: {
+                type: widgetType,
+                design: widgetDesign
+            }
+        };
+        const id = (0, uuid_1.default)();
+        // Add item
+        items = lodash_1.default.clone(items);
+        items[id] = item;
+        return items;
+    }
+    // Find a layout that the new widget fits in. width and height are in 24ths
+    findOpenLayout(items, width, height) {
+        // Create layout engine
+        // TODO create from design
+        // TODO uses fake width
+        const layoutEngine = new LegoLayoutEngine_1.default(100, 24);
+        // Get existing layouts
+        const layouts = lodash_1.default.pluck(lodash_1.default.values(items), "layout");
+        // Find place for new item
+        return layoutEngine.appendLayout(layouts, width, height);
+    }
+}
+exports.default = GridLayoutManager;

package/lib/layouts/grid/LegoLayoutEngine.d.ts

@@ -0,0 +1,33 @@
+export default class LegoLayoutEngine {
+    width: any;
+    blocksAcross: any;
+    scale: number;
+    constructor(width: any, blocksAcross: any);
+    calculateHeight(layouts: any): number;
+    getLayoutBounds(layout: any): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    rectToLayout(rect: any): {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    performLayout(layouts: any, priority: any): {};
+    appendLayout(layouts: any, w: any, h: any): {
+        x: number;
+        y: number;
+        w: any;
+        h: any;
+    };
+    overlaps(a: any, b: any): boolean;
+    shiftLayout(layout: any): {
+        x: any;
+        y: any;
+        w: any;
+        h: any;
+    };
+}

package/lib/layouts/grid/LegoLayoutEngine.js

@@ -0,0 +1,129 @@
+"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"));
+// Layout engine that places blocks like lego and displaces others out of the way
+class LegoLayoutEngine {
+    width;
+    blocksAcross;
+    scale;
+    constructor(width, blocksAcross) {
+        this.width = width;
+        this.blocksAcross = blocksAcross;
+        this.scale = this.width / this.blocksAcross;
+    }
+    // Calculate the total height needed to fit all layouts plus one row
+    calculateHeight(layouts) {
+        const bottom = lodash_1.default.max(lodash_1.default.map(layouts, (l) => this.getLayoutBounds(l).y + this.getLayoutBounds(l).height));
+        return bottom + this.scale;
+    }
+    // Get the bounds of a layout (x, y, width, height)
+    getLayoutBounds(layout) {
+        return {
+            x: this.scale * layout.x,
+            y: this.scale * layout.y,
+            width: this.scale * layout.w,
+            height: this.scale * layout.h
+        };
+    }
+    // Converts a rectangle to a layout
+    rectToLayout(rect) {
+        // Get snapped approximate location
+        let x = Math.round(rect.x / this.scale);
+        let y = Math.round(rect.y / this.scale);
+        let w = Math.round(rect.width / this.scale);
+        let h = Math.round(rect.height / this.scale);
+        // Clip
+        if (x < 0) {
+            x = 0;
+        }
+        if (y < 0) {
+            y = 0;
+        }
+        if (x >= this.blocksAcross) {
+            x = this.blocksAcross - 1;
+        }
+        if (w < 1) {
+            w = 1;
+        }
+        if (x + w > this.blocksAcross) {
+            w = this.blocksAcross - x;
+        }
+        if (h < 1) {
+            h = 1;
+        }
+        return { x, y, w, h };
+    }
+    // Arranges a layout, making all blocks fit. Optionally prioritizes
+    // a particular item.
+    // layouts is lookup of id -> layout
+    // priority is optional id to layout first
+    // Returns layout lookup of id -> layout
+    performLayout(layouts, priority) {
+        // Create list of placed layouts to avoid as placing new ones
+        const placedLayouts = [];
+        const results = {};
+        // Add priority first to displace others
+        if (priority) {
+            placedLayouts.push(layouts[priority]);
+            results[priority] = layouts[priority];
+        }
+        // Order all by reading order (l->r, top->bottom)
+        const toProcess = lodash_1.default.sortBy(lodash_1.default.keys(layouts), (id) => {
+            const l = layouts[id];
+            return l.x + l.y * this.blocksAcross;
+        });
+        // Process each layout, avoiding all previous
+        for (let id of toProcess) {
+            // Skip priority one
+            if (id === priority) {
+                continue;
+            }
+            // Check if overlaps
+            var layout = layouts[id];
+            while (lodash_1.default.any(placedLayouts, (pl) => this.overlaps(pl, layout))) {
+                // Move around until fits
+                layout = this.shiftLayout(layout);
+            }
+            placedLayouts.push(layout);
+            results[id] = layout;
+        }
+        return results;
+    }
+    // Adds a layout with the w and h (width and height in blocks)
+    appendLayout(layouts, w, h) {
+        // Check if overlaps
+        let layout = { x: 0, y: 0, w, h };
+        while (lodash_1.default.any(lodash_1.default.values(layouts), (pl) => this.overlaps(pl, layout))) {
+            // Move around until fits
+            layout = this.shiftLayout(layout);
+        }
+        return layout;
+    }
+    // Check if layouts overlap
+    overlaps(a, b) {
+        if (a.x + a.w <= b.x) {
+            return false;
+        }
+        if (a.y + a.h <= b.y) {
+            return false;
+        }
+        if (a.x >= b.x + b.w) {
+            return false;
+        }
+        if (a.y >= b.y + b.h) {
+            return false;
+        }
+        return true;
+    }
+    // Shifts layout right or down if no more room
+    shiftLayout(layout) {
+        if (layout.x + layout.w < this.blocksAcross) {
+            return { x: layout.x + 1, y: layout.y, w: layout.w, h: layout.h };
+        }
+        return { x: 0, y: layout.y + 1, w: layout.w, h: layout.h };
+    }
+}
+exports.default = LegoLayoutEngine;

package/lib/layouts/grid/PaletteItemComponent.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface PaletteItemComponentProps {
+    /** Create the drag item */
+    createItem: any;
+    title?: any;
+    subtitle?: any;
+}
+export default class PaletteItemComponent extends React.Component<PaletteItemComponentProps> {
+    render(): React.CElement<{
+        createDragItem: any;
+    }, React.Component<{
+        createDragItem: any;
+    }, any, any>>;
+}

package/lib/layouts/grid/PaletteItemComponent.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const DragSourceComponent = require("../DragSourceComponent").default("block-move");
+// Item in a palette that can be dragged to add a widget or other item
+class PaletteItemComponent extends react_1.default.Component {
+    render() {
+        return R(DragSourceComponent, { createDragItem: this.props.createItem }, R("div", { className: "mwater-visualization-palette-item" }, R("div", { className: "title", key: "title" }, this.props.title), R("div", { className: "subtitle", key: "subtitle" }, this.props.subtitle)));
+    }
+}
+exports.default = PaletteItemComponent;

package/lib/layouts/grid/README.md

@@ -0,0 +1,14 @@
+Items is:
+
+`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 data
+
+`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

package/lib/layouts/grid/WidgetContainerComponent.d.ts

@@ -0,0 +1,9 @@
+export interface LayoutComponentProps {
+    /** Opaque information to be used when a block is dragged */
+    dragInfo: any;
+    canDrag: boolean;
+    connectMoveHandle: any;
+    connectResizeHandle: any;
+}
+declare const _default: import("react-dnd").DndComponentClass<any>;
+export default _default;