|
| 1 | +=========== |
| 2 | +Finish Line |
| 3 | +=========== |
| 4 | + |
| 5 | +Finish Line is a framework for quickly building beautiful customizable dashboards in Plotly Dash. |
| 6 | +The framework provides utility for developers to easily plugin new interactive visualization |
| 7 | +components into the dashboard. Components are automatically added to the dashboard using a responsive |
| 8 | +grid layout. |
| 9 | + |
| 10 | +---------------------- |
| 11 | +How to use Finish Line |
| 12 | +---------------------- |
| 13 | + |
| 14 | +An example use of the framework is located in the GitHub repo under the ``example`` directory. The |
| 15 | +following shows the minimum code required to start a Finish Line dashboard server. |
| 16 | + |
| 17 | +.. code:: python |
| 18 | +
|
| 19 | + from finishline import FinishLine |
| 20 | + import dash |
| 21 | +
|
| 22 | + app = dash.Dash() |
| 23 | + data = load_my_data() |
| 24 | +
|
| 25 | + fl = FinishLine(app=app, data=data) |
| 26 | + fl.load_plugins() |
| 27 | + app.layout = fl.generate_layout() |
| 28 | +
|
| 29 | + if __name__ == '__main__': |
| 30 | + fl.run_server(debug=True, port=5000, host='0.0.0.0') |
| 31 | + |
| 32 | +Visualization components are loaded from the ``plugins`` folder. The default location is in a folder |
| 33 | +called ``plugins`` in the current working directory (directory the web server is started). Individual |
| 34 | +plugins are located in subfolders under the ``plugins`` folder. The entry point to a plugin is in the |
| 35 | +file ``__init__.py``. |
| 36 | + |
| 37 | +Here is an example component. The code is placed in ``./plugins/HelloWorld/__init__.py`` |
| 38 | + |
| 39 | +.. code:: python |
| 40 | +
|
| 41 | + import dash_html_components as html |
| 42 | + import dash_core_components as dcc |
| 43 | +
|
| 44 | + def initialize(app, data, fl): |
| 45 | +
|
| 46 | + fl.register_vis( |
| 47 | + 'HelloWorld', |
| 48 | + dcc.Graph( |
| 49 | + id='basic-chart', |
| 50 | + figure={ |
| 51 | + 'data': [ |
| 52 | + { |
| 53 | + 'x': [1, 2, 3, 4], |
| 54 | + 'y': [4, 1, 3, 5], |
| 55 | + 'text': ['a', 'b', 'c', 'd'], |
| 56 | + 'customdata': ['c.a', 'c.b', 'c.c', 'c.d'], |
| 57 | + 'name': 'Trace 1', |
| 58 | + 'mode': 'markers', |
| 59 | + 'marker': {'size': 12} |
| 60 | + }, |
| 61 | + { |
| 62 | + 'x': [1, 2, 3, 4], |
| 63 | + 'y': [9, 4, 1, 4], |
| 64 | + 'text': ['w', 'x', 'y', 'z'], |
| 65 | + 'customdata': ['c.w', 'c.x', 'c.y', 'c.z'], |
| 66 | + 'name': 'Trace 2', |
| 67 | + 'mode': 'markers', |
| 68 | + 'marker': {'size': 12} |
| 69 | + } |
| 70 | + ] |
| 71 | + }, |
| 72 | + config={ |
| 73 | + 'autosizable': True |
| 74 | + } |
| 75 | + ) |
| 76 | + ) |
| 77 | + |
| 78 | + def finalize(app, data, fl): |
| 79 | + pass |
| 80 | +
|
| 81 | +
|
| 82 | +------------ |
| 83 | +Installation |
| 84 | +------------ |
| 85 | + |
| 86 | +Finish Line depends upon ``dash``. Note, we have only tested with ``python3``. |
| 87 | + |
| 88 | +Requirements: |
| 89 | + |
| 90 | +* dash |
| 91 | +* dash-responsive-grid-layout |
| 92 | + |
| 93 | +**Install Options** |
| 94 | + |
| 95 | +.. code:: bash |
| 96 | +
|
| 97 | + pip3 install finishline |
| 98 | +
|
| 99 | +
|
| 100 | +-------- |
| 101 | +Features |
| 102 | +-------- |
| 103 | + |
| 104 | +* Client and server side data store API |
| 105 | +* Plugin visualization component API |
| 106 | +* Responsive grid layout |
| 107 | +* Customizable grid layout via drag and drop |
| 108 | +* Developer mode |
| 109 | + |
| 110 | +---------- |
| 111 | +To Do List |
| 112 | +---------- |
| 113 | + |
| 114 | +* Save layout |
| 115 | +* Reusable components API |
| 116 | +* Hide/Show components |
| 117 | +* Support multiple pages |
| 118 | +* Better support for resizing plotly charts |
0 commit comments