diff --git a/apps/dash-pivottable/.gitignore b/apps/dash-pivottable/.gitignore new file mode 100644 index 000000000..8e1af00b7 --- /dev/null +++ b/apps/dash-pivottable/.gitignore @@ -0,0 +1,190 @@ +# .gitignore specifies the files that shouldn't be included +# in version control and therefore shouldn't be included when +# deploying an application to Dash Enterprise +# This is a very exhaustive list! +# This list was based off of https://github.com/github/gitignore + +# Ignore data that is generated during the runtime of an application +# This folder is used by the "Large Data" sample applications +runtime_data/ + +# Omit SQLite databases that may be produced by dash-snapshots in development +*.db + +# Byte-compiled / optimized / DLL files +__pycache__/ +*.py[cod] +*$py.class + + +# Jupyter Notebook + +.ipynb_checkpoints +*/.ipynb_checkpoints/* + +# IPython +profile_default/ +ipython_config.py + +# Environments +.env +.venv +env/ +venv/ +ENV/ +env.bak/ +venv.bak/ + +# Spyder project settings +.spyderproject +.spyproject + +*.log +local_settings.py +db.sqlite3 +db.sqlite3-journal + + +# macOS General +.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + +# Windows thumbnail cache files +Thumbs.db +Thumbs.db:encryptable +ehthumbs.db +ehthumbs_vista.db + +# Dump file +*.stackdump + +# Folder config file +[Dd]esktop.ini + +# Recycle Bin used on file shares +$RECYCLE.BIN/ + +# Windows Installer files +*.cab +*.msi +*.msix +*.msm +*.msp + +# Windows shortcuts +*.lnk + +# History files +.Rhistory +.Rapp.history + +# Session Data files +.RData + +# User-specific files +.Ruserdata + +# Example code in package build process +*-Ex.R + +# Output files from R CMD check +/*.Rcheck/ + +# RStudio files +.Rproj.user/ + +# produced vignettes +vignettes/*.html +vignettes/*.pdf + +# OAuth2 token, see https://github.com/hadley/httr/releases/tag/v0.3 +.httr-oauth + +# knitr and R markdown default cache directories +*_cache/ +/cache/ + +# Temporary files created by R markdown +*.utf8.md +*.knit.md + +# R Environment Variables +.Renviron + +# Linux +*~ + +# temporary files which can be created if a process still has a handle open of a deleted file +.fuse_hidden* + +# KDE directory preferences +.directory + +# Linux trash folder which might appear on any partition or disk +.Trash-* + +# .nfs files are created when an open file is removed but is still being accessed +.nfs* + +# VSCode +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +*.code-workspace + +# SublineText +# Cache files for Sublime Text +*.tmlanguage.cache +*.tmPreferences.cache +*.stTheme.cache + +# Workspace files are user-specific +*.sublime-workspace + +# Project files should be checked into the repository, unless a significant +# proportion of contributors will probably not be using Sublime Text +# *.sublime-project + +# SFTP configuration file +sftp-config.json + +# Package control specific files +Package Control.last-run +Package Control.ca-list +Package Control.ca-bundle +Package Control.system-ca-bundle +Package Control.cache/ +Package Control.ca-certs/ +Package Control.merged-ca-bundle +Package Control.user-ca-bundle +oscrypto-ca-bundle.crt +bh_unicode_properties.cache + +# Sublime-github package stores a github token in this file +# https://packagecontrol.io/packages/sublime-github +GitHub.sublime-settings \ No newline at end of file diff --git a/apps/dash-pivottable/app.py b/apps/dash-pivottable/app.py index bc1d69ea2..b3de57b01 100644 --- a/apps/dash-pivottable/app.py +++ b/apps/dash-pivottable/app.py @@ -1,46 +1,16 @@ -import dash -from dash.dependencies import Input, Output -import dash_html_components as html +from dash import Dash, html, Input, Output import dash_pivottable -from data import data +from data.data import data +from utils.components import header - -def Header(name, app): - img_style = {"float": "right", "height": 40, "margin-right": 10} - dash_logo = html.Img(src=app.get_asset_url("dash.png"), style=img_style) - ghub_logo = html.Img(src=app.get_asset_url("github.png"), style=img_style) - - return html.Div( - [ - html.H1(name, style={"margin": 10, "display": "inline"}), - html.A(dash_logo, href="https://plotly.com/dash/"), - html.A(ghub_logo, href="https://github.com/plotly/dash-pivottable"), - html.A( - html.Button( - "Enterprise Demo", - style={ - "float": "right", - "margin-right": "10px", - "margin-top": "5px", - "padding": "5px 10px", - "font-size": "15px", - }, - ), - href="https://plotly.com/get-demo/", - ), - html.Hr(), - ] - ) - - -app = dash.Dash(__name__) -app.title = "Dash Pivottable" +app = Dash(__name__, title="Dash Pivottable") server = app.server -app.layout = html.Div( - [ - Header("Dash Pivottable", app), +app.layout = html.Div([ + header(app, "black", "Dash PivotTable"), + + html.Div([ dash_pivottable.PivotTable( id="table", data=data, @@ -54,29 +24,32 @@ def Header(name, app): valueFilter={"Day of Week": {"Thursday": False}}, ), html.Div(id="output"), - ] -) + ], + className="app-body") +]) @app.callback( Output("output", "children"), - [ - Input("table", "cols"), - Input("table", "rows"), - Input("table", "rowOrder"), - Input("table", "colOrder"), - Input("table", "aggregatorName"), - Input("table", "rendererName"), - ], + Input("table", "cols"), + Input("table", "rows"), + Input("table", "rowOrder"), + Input("table", "colOrder"), + Input("table", "aggregatorName"), + Input("table", "rendererName"), ) def display_props(cols, rows, row_order, col_order, aggregator, renderer): + """ + This callback demonstrates how to access the properties of the PivotTable, which can then be used as needed. + """ return [ - html.P(str(cols), id="columns"), - html.P(str(rows), id="rows"), - html.P(str(row_order), id="row_order"), - html.P(str(col_order), id="col_order"), - html.P(str(aggregator), id="aggregator"), - html.P(str(renderer), id="renderer"), + html.H3("PivotTable parameters:"), + html.P("cols: " + str(cols)), + html.P("rows: " + str(rows)), + html.P("row_order: " + str(row_order)), + html.P("col_order: " + str(col_order)), + html.P("aggregator: " + str(aggregator)), + html.P("renderer: " + str(renderer)), ] diff --git a/apps/dash-pivottable/assets/css/app.css b/apps/dash-pivottable/assets/css/app.css new file mode 100644 index 000000000..f38272b3a --- /dev/null +++ b/apps/dash-pivottable/assets/css/app.css @@ -0,0 +1,70 @@ +body { + background-color: #9db2db; +} + +.app-body { + display: flex; + gap: 1%; +} + +/* Header */ +.header { + height: 10vh; + display: flex; + padding-left: 2%; + padding-right: 2%; + font-family: playfair display, sans-serif; + font-weight: bold; +} + +.header .header-title { + font-size: 5vh; +} +.subheader-title { + font-size: 1.5vh; +} + +.header-logos { + margin-left: auto; +} +.header-logos img { + margin-left: 3vh !important; + max-height: 5vh; +} + + +/* Demo button css */ +.demo-button { + font-size: 1.5vh; + font-family: Open Sans, sans-serif; + text-decoration: none; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 8px; + font-weight: 700; + -webkit-padding-start: 1rem; + padding-inline-start: 1rem; + -webkit-padding-end: 1rem; + padding-inline-end: 1rem; + color: #ffffff; + letter-spacing: 1.5px; + border: solid 1.5px transparent; + box-shadow: 2px 1000px 1px #0c0c0c inset; + background-image: linear-gradient(135deg, #7A76FF, #7A76FF, #7FE4FF); + -webkit-background-size: 200% 100%; + background-size: 200% 100%; + -webkit-background-position: 99%; + background-position: 99%; + background-origin: border-box; + transition: all .4s ease-in-out; + padding-top: 1vh; + padding-bottom: 1vh; + vertical-align: super; +} + +.demo-button:hover { + color: #7A76FF; + background-position: 0%; +} \ No newline at end of file diff --git a/apps/dash-pivottable/assets/dash.png b/apps/dash-pivottable/assets/dash.png deleted file mode 100644 index 9ed7cd160..000000000 Binary files a/apps/dash-pivottable/assets/dash.png and /dev/null differ diff --git a/apps/dash-pivottable/assets/github.png b/apps/dash-pivottable/assets/github.png deleted file mode 100644 index ea6ff545a..000000000 Binary files a/apps/dash-pivottable/assets/github.png and /dev/null differ diff --git a/apps/dash-pivottable/assets/images/plotly-logo-light-theme.png b/apps/dash-pivottable/assets/images/plotly-logo-light-theme.png new file mode 100644 index 000000000..4920c6e34 Binary files /dev/null and b/apps/dash-pivottable/assets/images/plotly-logo-light-theme.png differ diff --git a/apps/dash-pivottable/data.py b/apps/dash-pivottable/data/data.py similarity index 100% rename from apps/dash-pivottable/data.py rename to apps/dash-pivottable/data/data.py diff --git a/apps/dash-pivottable/requirements.txt b/apps/dash-pivottable/requirements.txt index 5f008311f..205e40f51 100644 --- a/apps/dash-pivottable/requirements.txt +++ b/apps/dash-pivottable/requirements.txt @@ -1,24 +1,4 @@ -Brotli==1.0.7 -certifi==2020.6.20 -click==7.1.2 -dash==1.14.0 -dash-core-components==1.10.2 -dash-html-components==1.0.3 -dash-pivottable==0.0.1 -dash-renderer==1.6.0 -dash-table==4.9.0 -Flask==1.1.2 -Flask-Compress==1.5.0 -future==0.18.2 -gunicorn==20.0.4 -itsdangerous==1.1.0 -Jinja2==2.11.2 -MarkupSafe==1.1.1 -numpy==1.19.1 -pandas==1.1.0 -plotly==4.9.0 -python-dateutil==2.8.1 -pytz==2020.1 -retrying==1.3.3 -six==1.15.0 -Werkzeug==1.0.1 +dash==2.4.1 +dash-pivottable==0.0.2 +pandas==1.4.2 +gunicorn==20.1.0 \ No newline at end of file diff --git a/apps/dash-pivottable/runtime.txt b/apps/dash-pivottable/runtime.txt index 257b314f5..cfa660c42 100644 --- a/apps/dash-pivottable/runtime.txt +++ b/apps/dash-pivottable/runtime.txt @@ -1 +1 @@ -python-3.7.6 \ No newline at end of file +python-3.8.0 \ No newline at end of file diff --git a/apps/dash-pivottable/utils/components.py b/apps/dash-pivottable/utils/components.py new file mode 100644 index 000000000..7d362de69 --- /dev/null +++ b/apps/dash-pivottable/utils/components.py @@ -0,0 +1,22 @@ +from dash import html + +def header(app, header_color, header, subheader=None, header_background_color="transparent"): + left_headers = html.Div( + [ + html.Div(header, className="header-title"), + html.Div(subheader, className="subheader-title"), + ], + style={"color": header_color} + ) + + logo = html.Img(src=app.get_asset_url("images/plotly-logo-light-theme.png")) + logo_link = html.A(logo, href="https://plotly.com/get-demo/", target="_blank") + demo_link = html.A( + "LEARN MORE", + href="https://plotly.com/dash/", + target="_blank", + className="demo-button", + ) + right_logos = html.Div([demo_link, logo_link], className="header-logos") + + return html.Div([left_headers, right_logos], className="header", style={"background-color": header_background_color}) \ No newline at end of file