Fix: assets paths

KyleKing · Jun 14, 2019 · cb6c74a · cb6c74a
1 parent f714d65
commit cb6c74a
Show file tree

Hide file tree

Showing 13 changed files with 76 additions and 53 deletions.
diff --git a/pages/02-Dash-Layout.py b/pages/02-Dash-Layout.py
@@ -19,7 +19,9 @@
 import pandas as pd
 import plotly.graph_objs as go
 
-app = dash.Dash(__name__)
+assets_dir = Path.cwd() / 'pages/assets'
+
+app = dash.Dash(__name__, assets_folder=str(assets_dir))
 
 colors = {
     'background': '#FFF',
@@ -46,8 +48,6 @@ def randY():
 # =====================================================================================================================
 # Table
 
-assets_dir = Path('assets')
-
 agricDF = pd.read_csv(assets_dir / 'usa-agricultural-exports-2011.csv')
 
 

diff --git a/pages/0201-Dash-Core-Components.py b/pages/0201-Dash-Core-Components.py
@@ -12,13 +12,14 @@
 """
 
 from datetime import datetime as dt
+from pathlib import Path
 
 import dash
 import dash_core_components as dcc
 import dash_html_components as html
 import plotly.graph_objs as go
 
-app = dash.Dash(__name__)
+app = dash.Dash(__name__, assets_folder=str(Path.cwd() / 'pages/assets'))
 
 # =====================================================================================================================
 # Layout the application
@@ -33,7 +34,7 @@
             # Dropdowns
             # ==========
 
-            html.Label('Dropdown', style={'margin-top': '20px'}),
+            html.Label('Dropdown'),
             dcc.Dropdown(
                 options=[
                     {'label': 'New York City', 'value': 'NYC'},
@@ -43,7 +44,7 @@
                 value='MTL',
             ),
 
-            html.Label('Multi-Select Dropdown', style={'margin-top': '20px'}),
+            html.Label('Multi-Select Dropdown'),
             dcc.Dropdown(
                 options=[
                     {'label': 'New York City', 'value': 'NYC'},
@@ -58,7 +59,7 @@
             # Sliders
             # ==========
 
-            html.Label('Basic Slider', style={'margin-top': '20px'}),
+            html.Label('Basic Slider'),
             dcc.Slider(
                 id='example-id',
                 min=0,
@@ -67,7 +68,7 @@
                 value=3.3,
                 updatemode='drag',  # Faster updates
             ),
-            html.Label('Labeled Slider', style={'margin-top': '20px'}),
+            html.Label('Labeled Slider'),
             dcc.Slider(
                 min=0,
                 max=10,
@@ -76,7 +77,7 @@
                 dots=False,
             ),
 
-            html.Label('Range Slider With Nice Labels (No Inclusion)', style={'margin-top': '45px'}),
+            html.Label('Range Slider With Nice Labels (No Inclusion)'),
             dcc.RangeSlider(
                 min=0,
                 max=100,
@@ -89,9 +90,8 @@
                 },
                 included=False,
             ),
-            html.Label('Pushable Multi-Range Slider', style={'margin-top': '45px'}),
+            html.Label('Pushable Multi-Range Slider'),
             dcc.RangeSlider(
-                marks={i: i for i in range(-5, 30)},
                 min=-5,
                 max=30,
                 value=[1, 3, 4, 5, 12, 17],
@@ -102,7 +102,7 @@
             # Inputs
             # ==========
 
-            html.Label('Input and Text Area', style={'margin-top': '45px'}),
+            html.Label('Input and Text Area'),
             dcc.Input(
                 placeholder='Enter a value...',
                 type='text',
@@ -118,7 +118,7 @@
             # Select (Radio/Checkbox)
             # ==========
 
-            html.Label('Radio Items', style={'margin-top': '20px'}),
+            html.Label('Radio Items'),
             dcc.RadioItems(
                 options=[
                     {'label': 'New York City', 'value': 'NYC'},
@@ -128,7 +128,7 @@
                 value='MTL',
                 # labelStyle={'display': 'inline-block'},
             ),
-            html.Label('Checkboxes', style={'margin-top': '20px'}),
+            html.Label('Checkboxes'),
             dcc.Checklist(
                 options=[
                     {'label': 'New York City', 'value': 'NYC'},
@@ -142,30 +142,30 @@
             # Button and Callback
             # ==========
 
-            html.Label('Example Button with Callback', style={'margin-top': '20px'}),
+            html.Label('Example Button with Callback'),
             html.Div(dcc.Input(id='input-box', type='text')),
             html.Button('Submit', id='button'),
             html.Div(
                 id='output-container-button',
-                children='Enter a value and press submit'
+                children='Enter a value and press submit',
             ),
 
             # ==========
             # Datepicker
             # ==========
 
-            html.Label('Single Date Picker', style={'margin-top': '20px'}),
+            html.Label('Single Date Picker'),
             dcc.DatePickerSingle(
                 id='date-picker-single',
                 date=dt(2020, 4, 1),
             ),
-            html.Label('Ranged Date Picker', style={'margin-top': '20px'}),
+            html.Label('Ranged Date Picker'),
             dcc.DatePickerRange(
                 id='date-picker-range',
                 start_date=dt(1997, 5, 3),
-                end_date_placeholder_text='Select a date!'
+                end_date_placeholder_text='Select a date!',
             ),
-            html.H6('^ fyi: need padding below for dropdown element', style={'margin-top': '20px'}),
+            html.H6('^ fyi: need padding below for dropdown element'),
 
             # ==========
             # Graphs - of course
@@ -180,28 +180,28 @@
                             y=[219, 99, 97, 112, 127, 180, 236, 207, 236, 263, 350, 430, 474, 526, 488, 537, 500, 439],
                             name='Rest of world',
                             marker=go.bar.Marker(
-                                color='rgb(55, 83, 109)'
-                            )
+                                color='rgb(55, 83, 109)',
+                            ),
                         ),
                         go.Bar(
                             x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
                                 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
                             y=[16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270, 299, 340, 403, 549, 499],
                             name='China',
                             marker=go.bar.Marker(
-                                color='rgb(26, 118, 255)'
-                            )
-                        )
+                                color='rgb(26, 118, 255)',
+                            ),
+                        ),
                     ],
                     layout=go.Layout(
                         title='US Export of Plastic Scrap',
                         showlegend=True,
                         legend=go.layout.Legend(
                             x=0,
-                            y=1.0
+                            y=1.0,
                         ),
                         margin=go.layout.Margin(l=40, r=0, t=40, b=30),  # noqa: E741
-                    )
+                    ),
                 ),
                 style={'height': 300},
                 id='my-graph',

diff --git a/pages/020201-Dash-DataTable.py b/pages/020201-Dash-DataTable.py
@@ -7,6 +7,8 @@
 
 """
 
+from pathlib import Path
+
 import dash
 import dash_html_components as html
 import dash_table
@@ -15,7 +17,7 @@
 df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/26k-consumer-complaints.csv')
 df = df[:45]
 
-app = dash.Dash(__name__)
+app = dash.Dash(__name__, assets_folder=str(Path.cwd() / 'pages/assets'))
 
 # =====================================================================================================================
 # Layout the application
@@ -27,8 +29,8 @@
             html.H2(children='Example DataTable'),
             dash_table.DataTable(
                 id='table',
-                columns=[{"name": i, "id": i} for i in df.columns],
-                data=df.to_dict("rows"),
+                columns=[{'name': i, 'id': i} for i in df.columns],
+                data=df.to_dict('rows'),
                 # # > Setting a fixed row can cause the header row to have the wrong horizontal spacing as the data
                 # n_fixed_rows=1,
                 style_table={
@@ -55,9 +57,9 @@
                 }],
                 merge_duplicate_headers=True,
                 # style_as_list_view=True,  # Remove vertical lines for short tables
-            )
-        ]
-    )
+            ),
+        ],
+    ),
 ])
 
 if __name__ == '__main__':

diff --git a/pages/020202-Dash-Sortable-DataTable.py b/pages/020202-Dash-Sortable-DataTable.py
@@ -5,6 +5,8 @@
 
 """
 
+from pathlib import Path
+
 import dash
 import dash_core_components as dcc
 import dash_html_components as html
@@ -14,7 +16,7 @@
 
 df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
 
-app = dash.Dash(__name__)
+app = dash.Dash(__name__, assets_folder=str(Path.cwd() / 'pages/assets'))
 
 # =====================================================================================================================
 # Layout the application

diff --git a/pages/020203-Dash-Backend-Datatable.py b/pages/020203-Dash-Backend-Datatable.py
@@ -7,14 +7,16 @@
 
 """
 
+from pathlib import Path
+
 import dash
 import dash_core_components as dcc
 import dash_html_components as html
 import dash_table
 import pandas as pd
 from dash.dependencies import Input, Output
 
-app = dash.Dash(__name__)
+app = dash.Dash(__name__, assets_folder=str(Path.cwd() / 'pages/assets'))
 
 df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
 

diff --git a/pages/0203-Dash-Tabs.py b/pages/0203-Dash-Tabs.py
@@ -5,6 +5,8 @@
 
 """
 
+from pathlib import Path
+
 import dash
 import dash_core_components as dcc
 import dash_html_components as html

diff --git a/pages/assets/_external_scripts.txt b/pages/assets/_external_scripts.txt
@@ -1,4 +1,4 @@
 # (This line is a comment, all non-comments lines must be URLs)
 # List all external files necessary for the Dash app. This will be downloaded and bundled with the PyInstaller output
 # During development, these links will be based as CLI arguments to the app, so the app can live reload as you edit the source files in this folder
-https://codepen.io/chriddyp/pen/bWLwgP.css
+# https://codepen.io/chriddyp/pen/bWLwgP.css
diff --git a/pages/assets/styles.css b/pages/assets/styles.css
@@ -7,3 +7,11 @@ body {
     margin-right: auto;
     margin-left: auto;
 }
+
+._dash-undo-redo {
+    display: none;
+}
+
+.rc-slider {
+    min-height: 45px;
+}
diff --git a/pages/modules/distortion_chart.py b/pages/modules/distortion_chart.py
@@ -7,6 +7,7 @@
 """
 
 import math
+from pathlib import Path
 
 import dash
 import dash_core_components as dcc
@@ -15,7 +16,7 @@
 import plotly.graph_objs as go
 from dash.dependencies import Input, Output
 
-app = dash.Dash(__name__)
+app = dash.Dash(__name__, assets_folder=str(Path.cwd() / 'pages/assets'))
 
 app.layout = html.Div(
     className='app-content',

diff --git a/pages/modules/pareto_chart.py b/pages/modules/pareto_chart.py
@@ -5,13 +5,15 @@
 
 """
 
+from pathlib import Path
+
 import dash
 import dash_core_components as dcc
 import dash_html_components as html
 import pandas as pd
 import plotly.graph_objs as go
 
-app = dash.Dash(__name__)
+app = dash.Dash(__name__, assets_folder=str(Path.cwd() / 'pages/assets'))
 
 
 def createPareto(df, ylabel='Measurement (units)', colors=('#62A4D1', '#C5676B')):

diff --git a/poetry.lock b/poetry.lock