---
name: Dashboard
description: A flexible module for quickly building dashboards. --
  There are some widgets readily available out of the box, but you have complete control
  to override them as you wish with your own styles and layout
workflow: ""
user_stories:
  - As a user I want to lay out a collection of widgets on a specified grid layout
  - As a user I want to be able to easily add/remove widgets to my dashboard
  - As a user I want to be able to edit the order, location, and relative sizes of the widgets in my dashboard using Drag and Drop
  - As a developer I want to be able to specify actions that users can take with each widget
test_plan:
  - scenario: Rendering
    expected: Should show a collection of widgets on the dashboard.  Amount should be equal to the number of objects in the widgets array found in the prop
    automated: "Yes"
    type: End to End
  - scenario: Rendering
    expected: Should show widgets on a grid laid out according to the settings found in the layout prop
    automated: "Yes"
    type: End to End
  - scenario: Rendering
    expected: Should show in "edit" mode when inEditMode prop is true
    automated: "Yes"
    type: End to End
  - scenario: Rendering
    expected: Should show a custom style (provided by editModeStyle prop) on widgets when inEditMode prop is true
    automated: "Yes"
    type: End to End
  - scenario: Rendering
    expected: Should be able to drag a widget from one column to another when in edit mode
    automated: "Yes"
    type: End to End
  - scenario: Rendering
    expected: Should show a custom style (provided by the droppableStyle prop) in available dropzones while dragging over
    automated: "Yes"
    type: End to End
  - scenario: Rendering
    expected: Should show a custom component (provided by the widgetComponent prop) instead the default widget container when one is provided
    automated: "Yes"
    type: End to End
  - scenario: Rendering
    expected: Should trigger the onCreate() event when a new widget has been added to the dashboard
    automated: "Yes"
    type: End to End
  - scenario: Rendering
    expected: Should trigger the onDelete() event when a widget is removed
    automated: "Yes"
    type: End to End
  - scenario: Rendering
    expected: Should trigger the onMove() event when a widget is moved
    automated: "Yes"
    type: End to End
  - scenario: Rendering
    expected: Should trigger the "onWidgetCreate" plugin hooks when a new widget has been added to the dashboard
    automated: "Yes"
    type: End to End
  - scenario: Rendering
    expected: Should trigger the "onWidgetDelete" plugin hooks when a widget is removed
    automated: "Yes"
    type: End to End
  - scenario: Rendering
    expected: Should trigger the "onWidgetMove" plugin hooks when a widget is moved
    automated: "Yes"
    type: End to End
  - scenario: Rendering
    expected: Should trigger the "onWidgetRender" plugin hooks when widget is rendered
    automated: "Yes"
    type: End to End
  - scenario: Rendering
    expected: Should trigger the "onDashboardRender" plugin hooks when dashboard is rendered
    automated: "Yes"
    type: End to End
screens: "http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/hf_dashboard.png"
components:
  - name: Dashboard
    type: Containers
    description: A flexible module for quickly building dashboards.
    behaviors: ""
    exists: "No"
    package: "No"
    schema:
      - name: name
        type: string
        description: The name to use for the Dashboard component.  Useful for plugins that want to hook into your specific dashboard vs others
        required: false
        schema_type: prop
      - name: widgets
        type: any[]
        description: The widgets that can should be on the dashboard
        required: false
        schema_type: prop
      - name: layout
        type: object
        description: The layout of the dashboard
        required: false
        schema_type: prop
      - name: inEditMode
        type: boolean
        description: Whether or not the dashboard is in edit mode
        required: false
        schema_type: prop
      - name: droppableStyle
        type: React.CSSProperties
        description: Style used to indicate that a column is droppable
        required: false
        schema_type: prop
      - name: editModeStyle
        type: React.CSSProperties
        description: Style used to indicate that widgets are in edit mode
        required: false
        schema_type: prop
      - name: widgetComponent
        type: component
        description: Custom component to be used instead of the default widget component
        required: false
        schema_type: prop
      - name: onCreate
        type: () => any
        description: Trigger when a new widget has been added to the dashboard
        required: false
        schema_type: prop
      - name: onDelete
        type: () => any
        description: Trigger when a widget is removed
        required: false
        schema_type: prop
      - name: onMove
        type: () => any
        description: Trigger when a widget is moved
        required: false
        schema_type: prop
    tests:
      - it: Should show a collection of widgets on the dashboard.  Amount should be equal to the number of objects in the widgets array found in the prop
        type: Integration
      - it: Should show widgets on a grid laid out according to the settings found in the layout prop
        type: Integration
      - it: Should show in "edit" mode when inEditMode prop is true
        type: Integration
      - it: Should show a custom style (provided by editModeStyle prop) on widgets when inEditMode prop is true
        type: Integration
      - it: Should be able to drag a widget from one column to another when in edit mode
        type: Integration
      - it: Should show a custom style (provided by the droppableStyle prop) in available dropzones while dragging over
        type: Integration
      - it: Should show a custom component (provided by the widgetComponent prop) instead the default widget container when one is provided
        type: Integration
      - it: Should trigger the onCreate() event when a new widget has been added to the dashboard
        type: Integration
      - it: Should trigger the onDelete() event when a widget is removed
        type: Integration
      - it: Should trigger the onMove() event when a widget is moved
        type: Integration
      - it: Should trigger the "onWidgetCreate" plugin hooks when a new widget has been added to the dashboard
        type: Integration
      - it: Should trigger the "onWidgetDelete" plugin hooks when a widget is removed
        type: Integration
      - it: Should trigger the "onWidgetMove" plugin hooks when a widget is moved
        type: Integration
      - it: Should trigger the "onWidgetRender" plugin hooks when widget is rendered
        type: Integration
      - it: Should trigger the "onDashboardRender" plugin hooks when dashboard is rendered
        type: Integration
  - name: WidgetContainer
    type: Components
    description: A container for showing custom dashboard widget components
    behaviors: ""
    exists: "No"
    package: "No"
    schema:
      - name: children
        schema_type: prop
        type: component
        description: Will contain the actual widget contents
      - name: title
        schema_type: prop
        type: string
        description: The caption to display as the title of the widget
      - name: actions
        schema_type: prop
        type: { id: string, label: string, icon: string, onSelect: () => any }
        description: An array of objects that represent the items in to show in the dropdown menu and associated actions to take
      - name: actionComponent
        schema_type: prop
        type: component
        description: Custom component to use instead of the default action component
    tests:
      - it: Should render widget with provided title prop as the caption
        type: Integration
      - it: Should render child component
        type: Integration
      - it: Should show an action menu that reflects the items provided in the actions prop
        type: Integration
      - it: Should render a custom action component if one is provided
        type: Integration
database: []
api: []