2022 refactor - dash-pivottable

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 

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)),
     ]
 
 

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%;
+} 

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