Dashboard application

The Dashboard application is a grid-based layout panel where you can place your widgets, in a similiar way as one can organize window applications in a desktop.

• Responsive, with different layouts for phone, tablet and desktop sizes (sm, md and lg)
• Saves your custom layouts into your browser's local storage.
• Add, remove, resize and move any widgets.
• Have several dashboards running at the same time.
• Add your own applications as custom widgets.

Simple dashboard

The default Dashboard renders a default panel with 3 widgets: a notes widget, a smiley widget and a cat midget.

Click on the icon to enter edit mode. Here you can resize the widgets, delete them, or add new from a given list of default widgets.

There is a mandatory property, id, which is used to namespace the localStorage item when saving custom configurations.

Legg til nye widgeterNullstill dashbordetLagre endringerGlem endringer

Note widget

• Eggs
• Milk
• Bread

Dra her for å flytte widgeten

🗑

color

whiteyelloworangepinklightgreen

Er du sikker på at du vil slett dette widget?

Du kan legg til andre senere, men alle innstillinger vil gå tapt

Yes, deleteNo, cancel

Today's mood

😁

Dra her for å flytte widgeten

🗑

mood

grin - 😁happy - 😃smiling - 😊unamused - 😒angry - 😠pouting - 😡

Er du sikker på at du vil slett dette widget?

Du kan legg til andre senere, men alle innstillinger vil gå tapt

Yes, deleteNo, cancel

Dra her for å flytte widgeten

🗑

Er du sikker på at du vil slett dette widget?

Du kan legg til andre senere, men alle innstillinger vil gå tapt

Yes, deleteNo, cancel

<Dashboard id='eessi-pensjon-ui-demo-1'/>

Custom dashboard

This custom dashboard illustrates how the dashboard layout object looks like:

• Object keys are tab labels; if only key is used, the tabs are not shown
• There are 3 default breakpoints: sm, md and lg(they can be changed in the Dashboard configuration object)
• Each breakpoint has a list of widgets, which contain:
  • i, the widget ID (matched in the widget configuration object)
  • x, the horizontal position
  • y, the vertical position
  • w, the widget width
  • h, the widget height (conditioned to widget resize)
  • minW, the minimum widget width
  • maxW, the maximum widget width
  • minH, the minimum widget height
  • maxH, the maximum widget height

<Dashboard
  id='eessi-pensjon-ui-demo'
  defaultLayout={{
  'Side 1': {
    lg: [
      { i: 'w-1-note', x: 0, y: 0, w: 4, h: 5, minW: 4, maxW: 6, minH: 5, maxH: 999 }
    ],
    md: [
      { i: 'w-1-note', x: 0, y: 0, w: 2, h: 6, minW: 2, maxW: 3, minH: 1, maxH: 999 }
    ],
    sm: [
      { i: 'w-1-note', x: 0, y: 0, w: 1, h: 1, minW: 1, maxW: 1, minH: 1, maxH: 999 }
    ]
  },
  'Side 2': {
    lg: [
      { i: 'w-2-smiley', x: 0, y: 0, w: 4, h: 5, minW: 4, maxW: 6, minH: 5, maxH: 999 }
    ],
    md: [
      { i: 'w-2-smiley', x: 0, y: 0, w: 2, h: 6, minW: 2, maxW: 3, minH: 1, maxH: 999 }
    ],
    sm: [
      { i: 'w-2-smiley', x: 0, y: 0, w: 1, h: 1, minW: 1, maxW: 1, minH: 1, maxH: 999 }
    ]
  },
  'Side 3': {
    lg: [
      { i: 'w-3-cat', x: 0, y: 0, w: 4, h: 5, minW: 4, maxW: 6, minH: 5, maxH: 999 }
    ],
    md: [
      { i: 'w-3-cat', x: 0, y: 0, w: 2, h: 6, minW: 2, maxW: 3, minH: 1, maxH: 999 }
    ],
    sm: [
      { i: 'w-3-cat', x: 0, y: 0, w: 1, h: 1, minW: 1, maxW: 1, minH: 1, maxH: 999 }
    ]
  }}
  defaultWidgets={[{
    i: 'w-1-note',
    type: 'note',
    title: 'Note widget',
    visible: true,
    options: {
      backgroundColor: 'yellow',
      content: '<ul><li>Eggs</li><li>Milk</li><li>Bread</li></ul>'
    }
  }, {
    i: 'w-2-smiley',
    type: 'smiley',
    title: 'Smiley widget',
    visible: true,
    options: {
      mood: '😁'
    }
  }, {
    i: 'w-3-cat',
    type: 'cat',
    title: 'Cat midget',
    visible: true,
    options: {}
  }]}  defaultConfig={{
    cols: { lg: 12, md: 3, sm: 1 },
    breakpoints: { lg: 900, md: 600, sm: 0 },
    margin: [10, 10],
    containerPadding: [10, 10],
    rowHeight: 30,
    defaultTabIndex: 0,
    version: 1
  }}  defaultTabIndex={0}
  allowedWidgets={['cat', 'smiley', 'note']}
/>

Component import

import Dashboard from 'nav-dashboard'

React props