@mwater/visualization 5.1.0 → 5.3.0

package/src/layouts/grid/GridLayoutManager.ts

@@ -1,185 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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: any[] = []
-    const results: any = {}
-
-    // 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 }
-  }
-}

package/src/layouts/grid/PaletteItemComponent.ts

@@ -1,28 +0,0 @@
-import PropTypes from "prop-types"
-import React from "react"
-const R = React.createElement
-
-const DragSourceComponent = require("../DragSourceComponent").default("block-move")
-
-export interface PaletteItemComponentProps {
-  /** Create the drag item */
-  createItem: any
-  title?: any
-  subtitle?: any
-}
-
-// Item in a palette that can be dragged to add a widget or other item
-export default class PaletteItemComponent extends React.Component<PaletteItemComponentProps> {
-  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)
-      )
-    )
-  }
-}

package/src/layouts/grid/README.md

@@ -1,14 +0,0 @@
-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