@mwater/visualization 5.0.0

package/lib/layout-styles.css

@@ -0,0 +1,263 @@
+/* TEXT WIDGET STYLES */
+.mwater-visualization-text-widget-style-default {
+  font-size: 15px;
+}
+
+.mwater-visualization-text-widget-style-default div:not(:first-child) {
+  margin-top: 5px;
+}
+
+.mwater-visualization-text-widget-style-default h1:not(:first-child) {
+  margin-top: 10px;
+}
+
+.mwater-visualization-text-widget-style-default h2:not(:first-child) {
+  margin-top: 8px;
+}
+
+.mwater-visualization-text-widget-style-default h3:not(:first-child) {
+  margin-top: 5px;
+}
+
+.mwater-visualization-text-widget-style-default h1 {
+  font-size: 19px;
+  margin: 0px;
+  font-family: inherit;
+  font-weight: normal;
+  line-height: 1.2;
+  color: inherit;
+}
+
+.mwater-visualization-text-widget-style-default h2 {
+  font-size: 17px;
+  margin: 0px;
+  font-family: inherit;
+  font-weight: normal;
+  line-height: 1.2;
+  color: inherit;
+}
+
+/* h3 is deprecated */
+.mwater-visualization-text-widget-style-default h3 {
+  font-size: 15px;
+  margin: 0px;
+  font-weight: bold;
+  font-family: inherit;
+  line-height: 1.2;
+  color: inherit;
+}
+
+.mwater-visualization-text-widget-style-title {
+  font-size: 25px;
+}
+
+/* For InlineExprEditorComponent */
+.mwater-visualization-text-widget-expr {
+  cursor: pointer;
+  border-radius: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
+  background-color: rgba(212, 235, 255, 0.8);
+}
+
+.mwater-visualization-block-parent-inner {
+  height: 100%;
+}
+
+/* 
+There are several styles of block layouts:
+ default: dashboard look
+ popup: allows narrow for popups
+ greybg: dashboard look with grey background
+ story: story-style (large text, fixed width)
+*/
+
+/* DEFAULT */
+.mwater-visualization-block-parent-outer-default {
+  padding: 20px;
+}
+
+.mwater-visualization-block-parent-inner-default {
+  margin-left: auto;
+  margin-right: auto;
+  padding: 10px;
+  /* min-width: 1000px;
+  max-width: 1800px; */
+}
+
+.mwater-visualization-block-parent-outer-default .mwater-visualization-block {
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-bottom: 15px;
+}
+
+/* POPUP */
+.mwater-visualization-block-parent-outer-popup {
+}
+
+.mwater-visualization-block-parent-inner-popup {
+  padding: 30px;
+}
+
+.mwater-visualization-block-parent-outer-popup .mwater-visualization-block {
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-bottom: 15px;
+}
+
+/* GREYBG */
+.mwater-visualization-block-parent-outer-greybg {
+  background-color: #ddd;
+}
+
+.mwater-visualization-block-parent-inner-greybg {
+  margin-left: auto;
+  margin-right: auto;
+  padding: 10px;
+
+  /* Special workaround for CSS fill issues */
+  min-height: 100%;
+  height: 1px;
+}
+
+/* Special workaround for CSS fill issues: cancel for print */
+@media print {
+  .mwater-visualization-block-parent-inner-greybg {
+    height: auto;
+    min-height: auto;
+  }
+
+  /* Add a border on printing */
+  .mwater-visualization-block-parent-outer-greybg .mwater-visualization-block {
+    border: solid 1px #aaa;
+  }
+}
+
+.mwater-visualization-block-parent-outer-greybg .mwater-visualization-block {
+  margin: 9px;
+  padding: 8px;
+  border-radius: 5px;
+  background-color: white;
+}
+
+.mwater-visualization-block-parent-outer-greybg .mwater-visualization-block-spacer {
+  background-color: #ddd;
+}
+
+/* STORY */
+.mwater-visualization-block-parent-outer-story {
+  padding: 20px;
+}
+
+.mwater-visualization-block-parent-inner-story {
+  padding: 10px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mwater-visualization-block-parent-outer-story .mwater-visualization-block {
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-bottom: 15px;
+}
+
+.mwater-visualization-block-parent-outer-story .mwater-visualization-text-widget-style-default {
+  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+  font-size: 20px;
+  color: #333;
+  font-style: normal;
+  font-weight: normal;
+  word-wrap: break-word;
+  -webkit-font-smoothing: antialiased;
+  line-height: 33px;
+}
+
+.mwater-visualization-block-parent-outer-story .mwater-visualization-text-widget-style-default div:not(:first-child) {
+  margin-top: 8px;
+}
+
+.mwater-visualization-block-parent-outer-story .mwater-visualization-text-widget-style-default ul {
+  line-height: 28px;
+}
+
+.mwater-visualization-block-parent-outer-story .mwater-visualization-text-widget-style-default h1 {
+  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
+  font-size: 32px;
+  font-weight: 700;
+  margin-top: 40px;
+  color: black;
+}
+
+.mwater-visualization-block-parent-outer-story .mwater-visualization-text-widget-style-default h2 {
+  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
+  font-size: 24px;
+  font-weight: 700;
+  margin-top: 30px;
+  color: black;
+}
+
+/* h3 is deprecated */
+.mwater-visualization-block-parent-outer-story .mwater-visualization-text-widget-style-default h3 {
+  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
+  font-size: 20px;
+  font-weight: bold;
+  margin-top: 20px;
+  color: black;
+}
+
+.mwater-visualization-block-parent-outer-story .mwater-visualization-text-widget-style-title {
+  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
+  font-size: 38px;
+  font-weight: bold;
+}
+
+@media only screen and (max-width: 1000px) {
+  /* Fill screen when small */
+  .mwater-visualization-block-parent-outer-story.mwater-visualization-block-viewing
+    .mwater-visualization-horizontal-block-item {
+    width: 100% !important;
+  }
+
+  /* Hide spacers when small */
+  .mwater-visualization-block-parent-outer-story.mwater-visualization-block-viewing .mwater-visualization-block-spacer {
+    display: none;
+  }
+}
+
+/* Used for TextWidgets inside of other widgets */
+.mwater-visualization-text-widget-style-header {
+  font-size: 14px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.mwater-visualization-text-widget-style-footer {
+  font-size: 13px;
+  text-align: center;
+}
+
+.mwater-visualization-widget-placeholder {
+  position: absolute;
+  bottom: 0;
+  left: 0px;
+  right: 0px;
+  text-align: center;
+  top: 0;
+  cursor: pointer;
+  background: #f8f8f8;
+}
+
+.mwater-visualization-widget-placeholder .fa,
+.mwater-visualization-widget-placeholder .glyphicon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #e0e0e0;
+  font-size: 60px;
+}
+
+.mwater-visualization-widget-placeholder:hover .fa,
+.mwater-visualization-widget-placeholder:hover .glyphicon {
+  color: #c0c0c0;
+}

package/lib/layouts/DecoratedBlockComponent.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+export interface DecoratedBlockComponentProps {
+    /** Style to add to outer div */
+    style?: any;
+    /** Called when block is removed */
+    onBlockRemove: any;
+    /** the move handle connector */
+    connectMoveHandle?: any;
+    /** the drag preview connector */
+    connectDragPreview?: any;
+    /** Connects resize handle for dragging. Null to not render */
+    connectResizeHandle?: any;
+    /** Set to allow changing aspect ratio */
+    aspectRatio?: number;
+    onAspectRatioChange?: any;
+    isDragging: boolean;
+}
+interface DecoratedBlockComponentState {
+    initialClientY: any;
+    initialAspectDragY: any;
+    aspectDragY: any;
+}
+export default class DecoratedBlockComponent extends React.Component<DecoratedBlockComponentProps, DecoratedBlockComponentState> {
+    constructor(props: any);
+    componentWillUnmount(): void;
+    handleAspectMouseDown: (ev: any) => void;
+    handleMouseMove: (ev: any) => void;
+    handleMouseUp: (ev: any) => void;
+    renderAspectDrag(): React.ReactElement<{
+        style: {
+            position: string;
+            borderTop: string;
+            top: any;
+            left: number;
+            right: number;
+        };
+        key: string;
+    }, string | React.JSXElementConstructor<any>> | null;
+    render(): React.DetailedReactHTMLElement<{
+        className: string;
+        style: any;
+    }, HTMLElement>;
+}
+export {};

package/lib/layouts/DecoratedBlockComponent.js

@@ -0,0 +1,96 @@
+"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;
+// Block decorated with drag/remove hover controls
+// TODO make zero border
+class DecoratedBlockComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            aspectDragY: null,
+            initialAspectDragY: null,
+            initialClientY: null // first y of mousemove (for calculating difference)
+        };
+    }
+    componentWillUnmount() {
+        // Remove listeners
+        document.removeEventListener("mousemove", this.handleMouseMove);
+        return document.removeEventListener("mouseup", this.handleMouseUp);
+    }
+    handleAspectMouseDown = (ev) => {
+        // Prevent html5 drag
+        ev.preventDefault();
+        // Get height of overall block
+        this.setState({
+            aspectDragY: ev.currentTarget.parentElement.offsetHeight,
+            initialAspectDragY: ev.currentTarget.parentElement.offsetHeight
+        });
+        document.addEventListener("mousemove", this.handleMouseMove);
+        return document.addEventListener("mouseup", this.handleMouseUp);
+    };
+    handleMouseMove = (ev) => {
+        if (this.state.initialClientY != null) {
+            const aspectDragY = this.state.initialAspectDragY + ev.clientY - this.state.initialClientY;
+            if (aspectDragY > 20) {
+                return this.setState({ aspectDragY });
+            }
+        }
+        else {
+            return this.setState({ initialClientY: ev.clientY });
+        }
+    };
+    handleMouseUp = (ev) => {
+        // Remove listeners
+        document.removeEventListener("mousemove", this.handleMouseMove);
+        document.removeEventListener("mouseup", this.handleMouseUp);
+        // Fire new aspect ratio
+        this.props.onAspectRatioChange(this.props.aspectRatio / (this.state.aspectDragY / this.state.initialAspectDragY));
+        return this.setState({ aspectDragY: null, initialAspectDragY: null, initialClientY: null });
+    };
+    renderAspectDrag() {
+        if (this.state.aspectDragY != null) {
+            const lineStyle = {
+                position: "absolute",
+                borderTop: "solid 3px #38D",
+                top: this.state.aspectDragY,
+                left: 0,
+                right: 0
+            };
+            return R("div", { style: lineStyle, key: "aspectDrag" });
+        }
+        else {
+            return null;
+        }
+    }
+    render() {
+        const elem = R("div", { className: "mwater-visualization-decorated-block", style: this.props.style }, this.props.children, this.renderAspectDrag(), !this.props.isDragging && this.props.connectMoveHandle != null
+            ? this.props.connectMoveHandle(R("div", { key: "move", className: "mwater-visualization-decorated-block-move" }, R("i", { className: "fa fa-arrows" })))
+            : undefined, !this.props.isDragging && this.props.onBlockRemove != null
+            ? R("div", {
+                key: "remove",
+                className: "mwater-visualization-decorated-block-remove",
+                onClick: this.props.onBlockRemove
+            }, R("i", { className: "fa fa-times" }))
+            : undefined, !this.props.isDragging && this.props.onAspectRatioChange != null
+            ? // TODO sometimes drags (onDragStart) and so doesn't work. Disable dragging?
+                R("div", {
+                    key: "aspect",
+                    className: "mwater-visualization-decorated-block-aspect",
+                    onMouseDown: this.handleAspectMouseDown
+                }, R("i", { className: "fa fa-arrows-v" }))
+            : undefined, !this.props.isDragging && this.props.connectResizeHandle != null
+            ? this.props.connectResizeHandle(R("div", { key: "resize", className: "mwater-visualization-decorated-block-resize" }, R("i", { className: "fa fa-expand fa-rotate-90" })))
+            : undefined, (() => {
+            if (this.props.connectDragPreview) {
+                const preview = R("div", { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, pointerEvents: "none" } }, " ");
+                return this.props.connectDragPreview(preview);
+            }
+        })());
+        return elem;
+    }
+}
+exports.default = DecoratedBlockComponent;

package/lib/layouts/DragSourceComponent.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (type: any) => import("react-dnd").DndComponentClass<any>;
+export default _default;

package/lib/layouts/DragSourceComponent.js

@@ -0,0 +1,26 @@
+"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 react_dnd_1 = require("react-dnd");
+// Draggable sample that becomes a block when dragged on
+const sourceSpec = {
+    beginDrag(props, monitor, component) {
+        return props.createDragItem();
+    }
+};
+function collectSource(connect, monitor) {
+    return {
+        connectDragSource: connect.dragSource(),
+        connectDragPreview: connect.dragPreview()
+    };
+}
+// Simple drag source that runs a function to get the drag item.
+class DragSourceComponent extends react_1.default.Component {
+    render() {
+        return this.props.connectDragPreview(this.props.connectDragSource(this.props.children));
+    }
+}
+exports.default = (type) => (0, react_dnd_1.DragSource)(type, sourceSpec, collectSource)(DragSourceComponent);

package/lib/layouts/LayoutManager.d.ts

@@ -0,0 +1,50 @@
+import { ReactElement, ReactNode } from "react";
+import { BlocksLayoutOptions } from "../dashboards/layoutOptions";
+/** Responsible for laying out items, rendering widgets and holding them in a data structure that is layout manager specific */
+export default class LayoutManager {
+    /** Renders the layout as a react element */
+    renderLayout(options: {
+        /** width of layout */
+        width?: number;
+        /** opaque items object that layout manager understands */
+        items: any;
+        /** Called when items changes */
+        onItemsChange?: (items: any) => void;
+        /** called with ({ id:, type:, design:, onDesignChange:, width:, height:  }) */
+        renderWidget: (options: {
+            id: string;
+            type: string;
+            design: any;
+            onDesignChange: (design: any) => void;
+            width: number;
+            height: number;
+        }) => ReactElement;
+        /** style to use for layout. null for default */
+        style: string | null;
+        /** layout options to use */
+        layoutOptions: BlocksLayoutOptions | null;
+        /** true to disable maps */
+        disableMaps?: boolean;
+        /** clipboard contents */
+        clipboard: any;
+        /** called when clipboard is changed */
+        onClipboardChange: (clipboard: any) => void;
+        /** message to display if clipboard can't be pasted into current dashboard */
+        cantPasteMessage: string;
+    }): ReactNode;
+    /** Tests if dashboard has any items */
+    isEmpty(items: any): boolean;
+    /** Gets { type, design } of a widget */
+    getWidgetTypeAndDesign(items: any, widgetId: string): {
+        type: string;
+        design: any;
+    } | null;
+    /** Gets all widgets in items as array of { id, type, design } */
+    getAllWidgets(items: any): {
+        id: string;
+        type: string;
+        design: any;
+    }[];
+    static createLayoutManager(type: string): LayoutManager;
+    addWidget(items: any, widgetType: string, widgetDesign: any): any;
+}

package/lib/layouts/LayoutManager.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/** Responsible for laying out items, rendering widgets and holding them in a data structure that is layout manager specific */
+class LayoutManager {
+    /** Renders the layout as a react element */
+    renderLayout(options) {
+        return null;
+    }
+    /** Tests if dashboard has any items */
+    isEmpty(items) {
+        return true;
+    }
+    /** Gets { type, design } of a widget */
+    getWidgetTypeAndDesign(items, widgetId) {
+        throw new Error("Not implemented");
+    }
+    /** Gets all widgets in items as array of { id, type, design } */
+    getAllWidgets(items) {
+        return [];
+    }
+    static createLayoutManager(type) {
+        // Default is old grid type
+        type = type || "grid";
+        switch (type) {
+            case "grid": // Old one
+                var GridLayoutManager = require("./grid/GridLayoutManager").default;
+                return new GridLayoutManager();
+                break;
+            case "blocks": // New one
+                var BlocksLayoutManager = require("./blocks/BlocksLayoutManager").default;
+                return new BlocksLayoutManager();
+                break;
+            default:
+                throw new Error(`Unknown layout manager type ${type}`);
+        }
+    }
+    addWidget(items, widgetType, widgetDesign) {
+        throw new Error("Not implemented");
+    }
+}
+exports.default = LayoutManager;

package/lib/layouts/blocks/BlocksDisplayComponent.d.ts

@@ -0,0 +1,75 @@
+import React from "react";
+import HorizontalBlockComponent from "./HorizontalBlockComponent";
+import { LayoutBlock } from "./blockUtils";
+export interface BlocksDisplayComponentProps {
+    items: LayoutBlock;
+    onItemsChange?: (items: LayoutBlock) => void;
+    /** Stylesheet to use. null for default */
+    style?: string;
+    /** layout options to use */
+    layoutOptions?: any;
+    /** Renders a widget. Passed (options) */
+    renderWidget: any;
+    /** True to prevent maps */
+    disableMaps?: boolean;
+    /** Including onClipboardChange adds a clipboard palette item that can be used to copy and paste widgets */
+    clipboard?: any;
+    onClipboardChange?: any;
+    cantPasteMessage?: string;
+}
+declare class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps> {
+    handleBlockDrop: (sourceBlock: any, targetBlock: any, side: "top" | "left" | "right" | "bottom") => void;
+    handleBlockRemove: (block: any) => void;
+    handleBlockUpdate: (block: any) => void;
+    renderBlock: (block: any, collapseColumns?: boolean) => React.CElement<RootBlockComponentProps, RootBlockComponent> | React.CElement<any, HorizontalBlockComponent> | React.DetailedReactHTMLElement<{
+        key: any;
+        className: string;
+    }, HTMLElement>;
+    createBlockItem(block: any): () => {
+        block: {};
+    };
+    renderPalette(): React.DetailedReactHTMLElement<{
+        key: string;
+        style: {
+            width: number;
+            height: string;
+            position: "absolute";
+            top: number;
+            left: number;
+        };
+    }, HTMLElement>;
+    render(): React.CElement<any, React.Component<any, any, any>> | React.DetailedReactHTMLElement<{
+        style: {
+            width: string;
+            height: string;
+            overflow: "hidden";
+            position: "relative";
+        };
+    }, HTMLElement>;
+}
+export default BlocksDisplayComponent;
+interface RootBlockComponentProps {
+    block: any;
+    collapseColumns?: boolean;
+    renderBlock: any;
+    /** Called with (sourceBlock, targetBlock, side) when block is dropped on it. side is top, left, bottom, right */
+    onBlockDrop?: any;
+    onBlockRemove?: any;
+}
+declare class RootBlockComponent extends React.Component<RootBlockComponentProps> {
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<{
+        block: any;
+        onBlockDrop: any;
+        style: {
+            height: string;
+        };
+        onlyBottom: boolean;
+    }, React.Component<{
+        block: any;
+        onBlockDrop: any;
+        style: {
+            height: string;
+        };
+        onlyBottom: boolean;
+    }, any, any>>;
+}