deleted

examples/custom_spinner.py

@@ -0,0 +1,77 @@
+import dash
+from dash import dcc
+from dash import html
+import dash_bootstrap_components as dbc
+from dash.dependencies import Input, Output, State
+import plotly.express as px
+import time
+
+app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
+tips = px.data.tips()
+iris = px.data.iris()
+carshare = px.data.carshare()
+
+app.layout = html.Div([
+    html.Label('Dataset', style={'margin-top': '15px', 'margin-bottom': '5px', 'font-weight': 'bold', 'display': 'flex', 'justify-content': 'center'}),
+    html.Div([
+    dcc.Dropdown(
+        id='dataset-dropdown',
+        options=[
+            {'label': 'Tips', 'value': 'tips'},
+            {'label': 'Iris', 'value': 'iris'},
+            {'label': 'Carshare', 'value': 'carshare'}
+        ],
+        placeholder="Select a dataset",
+        style={'width': '100%', 'max-width': '600px'}
+    ),], style={'display':'flex', 'justify-content': 'center', 'align-items': 'center', 'margin-bottom': '40px', 'margin-top':'10px'}),
+    html.Div([
+        dbc.Button('Show Pie Chart', id='pie-button', n_clicks=0, color="primary", className="mr-1"),
+        dbc.Button('Show Bar Plot', id='histogram-button', n_clicks=0, color="primary", className="mr-1")
+    ], style={'display': 'flex', 'justify-content': 'center', 'margin-top': '20px', 'gap': '150px'}),
+    html.Div(id='error-message', style={'color': 'red', 'margin-top': '20px', 'text-align': 'center'}),
+    dcc.Loading(
+        id="loading",
+        type="circle",
+        children=[html.Div(id='graph-container', children=[], style={'margin-top': '20px'})],
+        custom_spinner=html.H2(["Loading in progress...  ", dbc.Spinner(color="primary", id="loading-output")]),
+    ),
+])
+
+@app.callback(
+    Output('graph-container', 'children'),
+    Output('loading-output', 'children'),
+    Output('error-message', 'children'),
+    Input('pie-button', 'n_clicks'),
+    Input('histogram-button', 'n_clicks'),
+    State('dataset-dropdown', 'value')
+)
+
+def update_graph(n_clicks_pie, n_clicks_bar, selected_dataset):
+    if n_clicks_pie == 0 and n_clicks_bar == 0:
+        return [], '', ''
+
+    if not selected_dataset:
+        return [], '', 'Please select a dataset!'
+
+    ctx = dash.callback_context
+    time.sleep(0.40)
+    if not ctx.triggered:
+        return [], '', ''
+
+    else:
+        datasets = {'tips': tips, 'iris': iris, 'carshare': carshare}
+        pie_names = {'tips': 'day', 'iris': 'petal_length', 'carshare': 'peak_hour'}
+        bar_x_y = {'tips': ('day', 'total_bill'), 'iris': ('species', 'sepal_length'), 'carshare': ('peak_hour', 'car_hours')}
+
+        button_id = ctx.triggered[0]['prop_id'].split('.')[0]
+        if button_id == 'pie-button':
+            fig = px.pie(datasets[selected_dataset], names=pie_names[selected_dataset])
+            fig.update_layout(title_text=f'Pie Chart for {selected_dataset} dataset')
+        elif button_id == 'histogram-button':
+            x, y = bar_x_y[selected_dataset]
+            fig = px.histogram(datasets[selected_dataset], x=x, color=y, nbins=50)
+            fig.update_layout(title_text=f'Histogram for {selected_dataset} dataset')
+        return dcc.Graph(figure=fig, style={'border': '2px solid black', 'margin':'50px'}), '', ''
+
+if __name__ == '__main__':
+    app.run_server(debug=True)

examples/datepicker-plots.py

@@ -0,0 +1,96 @@
+import pandas as pd
+from dash import Dash, dcc, html, Input, Output, State
+import plotly.express as px
+import time
+
+df = px.data.stocks()
+df['date'] = pd.to_datetime(df['date'])
+app = Dash(__name__, external_stylesheets=[
+    'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'
+])
+
+app.layout = html.Div([
+    html.Label('Plot Type', style={'marginBottom': '5px', 'fontWeight': 'bold'}),
+    dcc.Dropdown(
+        id='datepicker-plots-x-dropdown',
+        options=[
+            {'label': 'Line Plot', 'value': 'line'},
+            {'label': 'Scatter Plot', 'value': 'scatter'},
+            {'label': 'Area Plot', 'value': 'area'},
+            {'label': 'Correlation Matrix', 'value': 'correlation'}
+        ],
+        clearable=False,
+        value='correlation',
+        className='mb-3'
+    ),
+    html.Div([
+        html.Div([
+            html.Label('Start Date', style={'marginRight': '10px', 'fontWeight': 'bold'}),
+            dcc.DatePickerSingle(
+                id='datepicker-plots-x-start-date',
+                date=df['date'].min(),
+                min_date_allowed=df['date'].min(),
+                max_date_allowed=df['date'].max(),
+                placeholder='Select a date'
+            ),
+        ], style={'marginRight': '20px'}),
+        html.Div([
+            html.Label('End Date', style={'marginRight': '10px', 'fontWeight': 'bold'}),
+            dcc.DatePickerSingle(
+                id='datepicker-plots-x-end-date',
+                date=df['date'].max(),
+                min_date_allowed=df['date'].min(),
+                max_date_allowed=df['date'].max(),
+                placeholder='Select a date'
+            ),
+        ], style={'marginLeft': '20px'}),
+    ], style={'display': 'flex', 'justifyContent': 'space-evenly'}),
+
+    html.Div([
+        html.Button('Submit', id='datepicker-plots-x-submit', n_clicks=0, style={'backgroundColor': '#1976D2', 'color': 'white', 'border': 'none', 'padding': '10px 20px', 'textAlign': 'center', 'textDecoration': 'none', 'display': 'inline-block', 'fontSize': '16px', 'margin': '4px 2px', 'cursor': 'pointer', 'borderRadius': '4px'})
+    ], style={'display': 'flex', 'justifyContent': 'center', 'marginTop': '20px'}),
+    html.Div(id='datepicker-plots-x-error-msg', style={'color': 'orange', 'marginTop': '20px', 'fontSize': 30, 'textAlign': 'center'}),
+    dcc.Loading(
+        id="datepicker-plots-x-loading",
+        type="circle",
+        children=[html.Div(id='datepicker-plots-x-graph', children=[], style={'marginTop': '20px'})],
+    ),
+])
+
+@app.callback(
+        Output('datepicker-plots-x-graph', 'children'),
+        Output('datepicker-plots-x-error-msg', 'children'),
+        Input('datepicker-plots-x-submit', 'n_clicks'),
+        State('datepicker-plots-x-dropdown', 'value'),
+        State('datepicker-plots-x-start-date', 'date'),
+        State('datepicker-plots-x-end-date', 'date')
+)
+def update_graph(n_clicks, plot_type, start_date, end_date):
+    if not start_date:
+        return [], 'Please select a start date!'
+    if not end_date:
+        return [], 'Please select an end date!'
+    if end_date <= start_date:
+        return [], 'End date should be greater than start date!'
+
+    mask = (df['date'] >= start_date) & (df['date'] <= end_date)
+    filtered_df = df.loc[mask]
+
+    time.sleep(1) #To simulate a longer running callback
+
+    plot_funcs = {
+        'line': px.line,
+        'scatter': px.scatter,
+        'area': px.area,
+        'correlation': lambda data, x, y: px.imshow(data.corr())
+    }
+
+    if plot_type == 'correlation':
+        fig = plot_funcs[plot_type](filtered_df.drop('date', axis=1), x=None, y=None)
+    else:
+        fig = plot_funcs[plot_type](filtered_df, x='date', y=filtered_df.columns.drop('date'))
+
+    return dcc.Graph(figure=fig), ''
+
+if __name__ == '__main__':
+    app.run_server(debug=True)