fds-polaris-stats-dashboard v1.0.0

User dashboard

Dev Usage

1. $ npm install

2. Update webpack.dev.js path: path.resolve('path/to/polariswebsite/static/fds/js/page/')

3. $ npm run dev

   Development build saved to the path specified in (2)

For production build:

$ npm run build

This will create a minified production build in the ./dist folder.

Overview

Source code for the polaris user dashboard. The dashboard works with charts created in a plotly format, currently retrieved via an api in flight data statistics. All report bookmarks made by users (and presets) are options available to be displayed on the dashboard. The dashboard layout is persistant, moving and resizing will be the same next time a user visits the dashboard.

Components

Dashboard

• Fetches a list of all available bookmarks
  • Stores charts in state
  • creates b64 ident for each chart
  • Sets bookmarks found in dashboard layout as active
• Fetches dashboard layout
  • Removes any charts on layout that no longer exists as stats bookmarks
• Displays list of available charts in a sidebar
  • Categorizes bookmarks based on report or if its a preset
• Provides method to update individual chart attributes

Grid

• Responsible for managing the react-grid-layout
• Allows for dynamic placment/removal of charts
  • Reflows layout for all breakpoints
• Saves layout changes

Chart

• Fetches chart data
  • Stores chart figure and filters in state
• Manages loading state of each chart
• Displays error when chart fails to load
• Wraps react-plotly, which renders the figure
• Displays filters

PopperButton

• Wraps react popper js
• Displays a button, which displays the text given to the 'title' prop
  • currently a div that looks like a button to avoid jQuery conflicts on polaris
• Displays children when button is clicked, inside a popper object