ff-dashboard

The ff-dashboard component is a flimflam component comprised of a header, a main panel, a left panel and a right panel. As a user of the component, you just have to set the dashboard's displayPanel$ stream to either 'main', 'right' or 'left'. Some CSS is included but only for functional styling (as opposed to aesthetic styling). I recommend using postcss-import for importing the CSS.

You can see an example of the dashboard here. The example uses some minimal aesthetic styling.

Getting started

In the parent state's init function, initialize the dashboard by calling its init function.

import dashboard from 'ff-dashboard'
import flyd from 'flyd'
import flydMergeall from 'flyd/module/mergeall'

const init = _ => {
  const state = {
    openLeftPanel$: flyd.stream(),
    openRightPanel$: flyd.stream(),
    openMainPanel$: flyd.stream()
  }
  
  const displayPanel$ = flydMergeall([
      flyd.map(_ => 'left', state.openLeftPanel$),
      flyd.map(_ => 'right', state.openRightPanel$),
      flyd.map(_ => 'main', state.openMainPanel$)
  ])
  
  state.dashboard = dashboard.init({displayPanel$})
  return state
}

Here are all of the options that can be passed to the dashboard's init function:

key	type	default	description
displayPanel$	stream	flyd.stream('main')	a stream, which when called can have the following strings as values: 'main', 'left', 'right'
leftPanelWidth	number	300	left panel max width in pixels
leftPanelOffset	number	80	min pixels between the right side of the screen and the right side of the left panel
rightPanelWidth	number	600	right panel max width in pixels
rightPanelOffset	number	0	min pixels between the left side of the screen and the left side of the right panel
transition	string	'0.2s ease-out'	transition style to be applied to panel movements

Next, call the dashboard's view function:

const view = state => 
  h('div', [
    dashboard.view(state.dashboard, {
        header: h('header', [
          h('button', {on: {click: state.openLeftPanel$}}, 'Open Left Panel'),
          h('button', {on: {click: state.openRightPanel$}}, 'Open Right Panel'),
          h('button', {on: {click: state.openMainPanel$}}, 'Open Main Panel')
        ]),
        mainPanel: h('div', 'Main content'),
        rightPanel: h('div', 'Right panel content'),
        leftPanel: h('div', 'Left panel content')
    })
  ])

The dashboard's view function takes the dashboard's state as the first argument and an object with snabbdom views as the second argument. You can safely omit any of the views if you want. Here are all of the views that you can pass in:

• header
• mainPanel
• rightPanel
• leftPanel