@mwater/visualization 5.0.0

package/src/layouts/blocks/blockUtils.ts

@@ -0,0 +1,207 @@
+import _ from "lodash"
+import uuid from "uuid"
+
+/** Layout that does blocks that are stacked vertically or horizontally 
+ * alternately. That is, first is vertical stack, which can contain horizontal 
+ * stack, etc. */
+export interface LayoutBlock {
+  /** id of block */
+  id: string
+
+  type: "root" | "vertical" | "horizontal" | "widget" | "spacer"
+
+  /** if a widget */
+  widgetType?: string
+
+  /** w/h if not autoHeight */
+  aspectRatio?: number
+
+  /** widget design */
+  design?: any
+
+  /** weights for proportioning horizontal blocks. Default is 1 */
+  weights?: number[]
+
+  /** other blocks if not a widget */
+  blocks?: LayoutBlock[]
+}
+
+// When block is dropped on it. side is top, left, bottom, right)
+// returns new root block
+export function dropBlock(rootBlock: LayoutBlock, sourceBlock: LayoutBlock, targetBlock: LayoutBlock, side: "top" | "left" | "right" | "bottom"): LayoutBlock {
+  // Handle root case, only dropping on bottom
+  if (targetBlock.type === "root" && rootBlock.id === targetBlock.id) {
+    const blocks = rootBlock.blocks!.slice()
+    blocks.push(sourceBlock)
+    return _.extend({}, rootBlock, { blocks })
+  }
+
+  // If vertical
+  if (["vertical", "root"].includes(rootBlock.type)) {
+    let blocks = rootBlock.blocks!
+
+    // Find target block
+    const index = _.findIndex(blocks, { id: targetBlock.id })
+    if (index >= 0) {
+      blocks = blocks.slice()
+
+      // Add
+      switch (side) {
+        case "top":
+          blocks.splice(index, 0, sourceBlock)
+          break
+
+        case "bottom":
+          blocks.splice(index + 1, 0, sourceBlock)
+          break
+
+        case "left":
+          blocks.splice(index, 1, { id: uuid(), type: "horizontal", blocks: [sourceBlock, targetBlock] })
+          break
+
+        case "right":
+          blocks.splice(index, 1, { id: uuid(), type: "horizontal", blocks: [targetBlock, sourceBlock] })
+          break
+      }
+
+      return _.extend({}, rootBlock, { blocks })
+    } else {
+      // Recurse
+      blocks = _.map(blocks, (block) => dropBlock(block, sourceBlock, targetBlock, side))
+      return _.extend({}, rootBlock, { blocks })
+    }
+  }
+
+  // If horizontal
+  if (rootBlock.type === "horizontal") {
+    let blocks = rootBlock.blocks!
+
+    // Find target block
+    const index = _.findIndex(blocks, { id: targetBlock.id })
+    if (index >= 0) {
+      blocks = blocks.slice()
+
+      // TODO splice into weights
+      // TODO weights as map?
+
+      // Add
+      switch (side) {
+        case "left":
+          blocks.splice(index, 0, sourceBlock)
+          break
+
+        case "right":
+          blocks.splice(index + 1, 0, sourceBlock)
+          break
+
+        case "top":
+          blocks.splice(index, 1, { id: uuid(), type: "vertical", blocks: [sourceBlock, targetBlock] })
+          break
+
+        case "bottom":
+          blocks.splice(index, 1, { id: uuid(), type: "vertical", blocks: [targetBlock, sourceBlock] })
+          break
+      }
+
+      return _.extend({}, rootBlock, { blocks })
+    } else {
+      // Recurse
+      blocks = _.map(blocks, (block) => dropBlock(block, sourceBlock, targetBlock, side))
+      return _.extend({}, rootBlock, { blocks })
+    }
+  }
+
+  return rootBlock
+}
+
+// Updates a block
+// returns new root block
+export function updateBlock(rootBlock: LayoutBlock, block: LayoutBlock): LayoutBlock {
+  // If vertical or horizontal
+  if (["vertical", "horizontal", "root"].includes(rootBlock.type)) {
+    let { blocks } = rootBlock
+
+    // Update block
+    blocks = _.map(blocks!, function (b) {
+      if (b.id === block.id) {
+        return block
+      } else {
+        return b
+      }
+    })
+
+    // Recurse
+    blocks = _.map(blocks, (b) => updateBlock(b, block))
+
+    return _.extend({}, rootBlock, { blocks })
+  }
+
+  return rootBlock
+}
+
+// When block is removed
+// returns new root block
+export function removeBlock(rootBlock: LayoutBlock, block: LayoutBlock): LayoutBlock | null {
+  // If vertical or horizontal
+  if (["vertical", "horizontal", "root"].includes(rootBlock.type)) {
+    let blocks = rootBlock.blocks!
+
+    // Remove blocks
+    blocks = _.filter(blocks, (b) => b.id !== block.id)
+
+    // TODO remove weight
+
+    // Recurse
+    blocks = _.compact(_.map(blocks, (b) => removeBlock(b, block))) as LayoutBlock[]
+
+    // If empty and not root, return null
+    if (blocks.length === 0 && rootBlock.type !== "root") {
+      return null
+    }
+
+    return { ...rootBlock, blocks }
+  }
+
+  return rootBlock
+}
+
+// Clean blocks, simplifying as needed
+export function cleanBlock(rootBlock: LayoutBlock): LayoutBlock {
+  // If vertical or horizontal
+  if (["vertical", "horizontal", "root"].includes(rootBlock.type)) {
+    let blocks = rootBlock.blocks!
+
+    // Simplify
+    if (blocks.length === 1 && rootBlock.type !== "root") {
+      return blocks[0]
+    }
+
+    // Simplify nested blocks of same type (e.g. vertical inside root becomes a flat list)
+    blocks = _.flatten(
+      _.map(blocks, function (b) {
+        if (b.type === "horizontal" && rootBlock.type === "horizontal") {
+          return b.blocks
+        }
+
+        if (b.type === "vertical" && ["root", "vertical"].includes(rootBlock.type)) {
+          return b.blocks
+        }
+
+        return b
+      })
+    ) as LayoutBlock[]
+
+    // TODO # Truncate weights
+    // weights = null
+    // if rootBlock.type == "horizontal" and rootBlock.weights
+    //   if rootBlock.weights.length > blocks.length
+    //     weights = _.take(rootBlock.w)
+
+    // Recurse
+    blocks = _.map(blocks, (b) => cleanBlock(b))
+
+    return _.extend({}, rootBlock, { blocks })
+  }
+
+  return rootBlock
+}

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

@@ -0,0 +1,67 @@
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+
+import WidgetContainerComponent from "./WidgetContainerComponent"
+import LegoLayoutEngine from "./LegoLayoutEngine"
+
+export interface GridLayoutComponentProps {
+  width: number
+  items?: any
+  onItemsChange?: any
+  renderWidget: any
+}
+
+export default class GridLayoutComponent extends React.Component<GridLayoutComponentProps> {
+  renderPageBreaks(layoutEngine: any, layouts: any) {
+    // 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(this.props.width, 24)
+
+    // Get layouts indexed by id
+    const layouts = _.mapValues(this.props.items, "layout")
+
+    const style = {
+      height: "100%",
+      position: "relative"
+    }
+
+    // Render widget container
+    return R(
+      "div",
+      { style },
+      R(WidgetContainerComponent, {
+        layoutEngine,
+        items: this.props.items,
+        onItemsChange: this.props.onItemsChange,
+        renderWidget: this.props.renderWidget,
+        width: this.props.width
+      }),
+      this.renderPageBreaks(layoutEngine, layouts)
+    )
+  }
+}

package/src/layouts/grid/GridLayoutManager.ts

@@ -0,0 +1,185 @@
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+
+import uuid from "uuid"
+import LayoutManager from "../LayoutManager"
+import LegoLayoutEngine from "./LegoLayoutEngine"
+import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent"
+
+export default class GridLayoutManager extends LayoutManager {
+  renderPalette(width: any) {
+    const PaletteItemComponent = require("./PaletteItemComponent").default
+
+    const createWidgetItem =
+      (
+        type: any,
+        design: any // Add unique id
+      ) =>
+      () => ({
+        id: uuid(),
+        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: any) {
+    const GridLayoutComponent = require("./GridLayoutComponent").default
+
+    return R(AutoSizeComponent, { injectWidth: true, injectHeight: true } as any, (size: any) => {
+      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: any) {
+    return _.isEmpty(items)
+  }
+
+  // Gets { type, design } of a widget
+  getWidgetTypeAndDesign(items: any, widgetId: any) {
+    return items[widgetId]?.widget
+  }
+
+  // Gets all widgets in items as array of { type, design }
+  getAllWidgets(items: any) {
+    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: any, widgetType: any, widgetDesign: any) {
+    // Find place for new item
+    const layout = this.findOpenLayout(items, 12, 12)
+
+    // Create item
+    const item = {
+      layout,
+      widget: {
+        type: widgetType,
+        design: widgetDesign
+      }
+    }
+
+    const id = uuid()
+
+    // Add item
+    items = _.clone(items)
+    items[id] = item
+
+    return items
+  }
+
+  // Find a layout that the new widget fits in. width and height are in 24ths
+  findOpenLayout(items: any, width: any, height: any) {
+    // Create layout engine
+    // TODO create from design
+    // TODO uses fake width
+    const layoutEngine = new LegoLayoutEngine(100, 24)
+
+    // Get existing layouts
+    const layouts = _.pluck(_.values(items) as any, "layout")
+
+    // Find place for new item
+    return layoutEngine.appendLayout(layouts, width, height)
+  }
+}

package/src/layouts/grid/LegoLayoutEngine.ts

@@ -0,0 +1,142 @@
+import _ from "lodash"
+
+// Layout engine that places blocks like lego and displaces others out of the way
+export default class LegoLayoutEngine {
+  width: any
+  blocksAcross: any
+  scale: number
+  
+  constructor(width: any, blocksAcross: any) {
+    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: any) {
+    const bottom = _.max(_.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: any) {
+    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: any) {
+    // 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: any, priority: any) {
+    // 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 = _.sortBy(_.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 (_.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: any, w: any, h: any) {
+    // Check if overlaps
+    let layout = { x: 0, y: 0, w, h }
+    while (_.any(_.values(layouts), (pl) => this.overlaps(pl, layout))) {
+      // Move around until fits
+      layout = this.shiftLayout(layout)
+    }
+    return layout
+  }
+
+  // Check if layouts overlap
+  overlaps(a: any, b: any) {
+    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: any) {
+    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 }
+  }
+}