@mwater/visualization 5.0.0

package/src/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/src/layouts/DecoratedBlockComponent.ts

@@ -0,0 +1,167 @@
+import PropTypes from "prop-types"
+import React from "react"
+const R = React.createElement
+
+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
+}
+
+// Block decorated with drag/remove hover controls
+// TODO make zero border
+export default class DecoratedBlockComponent extends React.Component<
+  DecoratedBlockComponentProps,
+  DecoratedBlockComponentState
+> {
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      aspectDragY: null, // y position of aspect ratio drag
+      initialAspectDragY: null, // Initial y position of aspect ratio drag
+      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: any) => {
+    // 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: any) => {
+    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: any) => {
+    // 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
+  }
+}

package/src/layouts/DragSourceComponent.ts

@@ -0,0 +1,35 @@
+import _ from "lodash"
+import React from "react"
+
+import { DragSource } from "react-dnd"
+
+// Draggable sample that becomes a block when dragged on
+const sourceSpec = {
+  beginDrag(props: any, monitor: any, component: any) {
+    return props.createDragItem()
+  }
+}
+
+function collectSource(connect: any, monitor: any) {
+  return {
+    connectDragSource: connect.dragSource(),
+    connectDragPreview: connect.dragPreview()
+  }
+}
+
+interface DragSourceComponentProps {
+  /** Created DnD item when dragged. */
+  createDragItem: any
+  /** the drag source connector, supplied by React DND */
+  connectDragSource: any
+  connectDragPreview: any
+}
+
+// Simple drag source that runs a function to get the drag item.
+class DragSourceComponent extends React.Component<DragSourceComponentProps> {
+  render() {
+    return this.props.connectDragPreview(this.props.connectDragSource(this.props.children))
+  }
+}
+
+export default (type: any) => DragSource(type, sourceSpec, collectSource)(DragSourceComponent)

package/src/layouts/LayoutManager.ts

@@ -0,0 +1,86 @@
+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 {
+    return null
+  }
+
+  /** Tests if dashboard has any items */
+  isEmpty(items: any): boolean {
+    return true
+  }
+
+  /** Gets { type, design } of a widget */
+  getWidgetTypeAndDesign(items: any, widgetId: string): { type: string; design: any } | null {
+    throw new Error("Not implemented")
+  }
+
+  /** Gets all widgets in items as array of { id, type, design } */
+  getAllWidgets(items: any): { id: string; type: string; design: any }[] {
+    return []
+  }
+
+  static createLayoutManager(type: string): LayoutManager {
+    // 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: any, widgetType: string, widgetDesign: any): any {
+    throw new Error("Not implemented")
+  }
+}