Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required.

Overview

Dash

CircleCI GitHub PyPI PyPI - Python Version GitHub commit activity LGTM Alerts LGTM Grade

Dash is the most downloaded, trusted Python framework for building ML & data science web apps.

Built on top of Plotly.js, React and Flask, Dash ties modern UI elements like dropdowns, sliders, and graphs directly to your analytical Python code. Read our tutorial proudly crafted ❤️ by Dash itself.

App Samples

App Description
Sample Dash App Here’s a simple example of a Dash App that ties a Dropdown to a D3.js Plotly Graph. As the user selects a value in the Dropdown, the application code dynamically exports data from Google Finance into a Pandas DataFrame. This app was written in just 43 lines of code (view the source).
Crossfiltering Dash App Dash app code is declarative and reactive, which makes it easy to build complex apps that contain many interactive elements. Here’s an example with 5 inputs, 3 outputs, and cross filtering. This app was composed in just 160 lines of code, all of which were Python.
Dash App with Mapbox map showing walmart store openings Dash uses Plotly.js for charting. Over 35 chart types are supported, including maps.
Financial report Dash isn't just for dashboards. You have full control over the look and feel of your applications. Here's a Dash App that's styled to look like a PDF report.

To learn more about Dash, read the extensive announcement letter or jump in with the user guide.

Dash OSS & Dash Enterprise

With Dash Open Source, Dash apps run on your local laptop or workstation, but cannot be easily accessed by others in your organization.

Scale up with Dash Enterprise when your Dash app is ready for department or company-wide consumption. Or, launch your initiative with Dash Enterprise from the start to unlock developer productivity gains and hands-on acceleration from Plotly's team.

ML Ops Features: A one-stop shop for ML Ops: Horizontally scalable hosting, deployment, and authentication for your Dash apps. No IT or DevOps required.

  • App manager Deploy & manage Dash apps without needing IT or a DevOps team. App Manager gives you point & click control over all aspects of your Dash deployments.
  • Kubernetes scaling Ensure high availability of Dash apps and scale horizontally with Dash Enterprise’s Kubernetes architecture. No IT or Helm required.
  • No code auth Control Dash app access in a few clicks. Dash Enterprise supports LDAP, AD, PKI, Okta, SAML, OpenID Connect, OAuth, SSO, and simple email authentication.
  • Job Queue The Job Queue is the key to building scalable Dash apps. Move heavy computation from synchronous Dash callbacks to the Job Queue for asynchronous background processing.

Low-Code Features: Low-code Dash app capabilities that supercharge developer productivity.

  • Design Kit Design like a pro without writing a line of CSS. Easily arrange, style, brand, and customize your Dash apps.
  • Snapshot Engine Save & share Dash app views as links or PDFs. Or, run a Python job through Dash and have Snapshot Engine email a report when the job is done.
  • Dashboard Toolkit Drag & drop layouts, chart editing, and crossfilter for your Dash apps.
  • Embedding Natively embed Dash apps in an existing web application or website without the use of IFrames.

Enterprise AI Features: Everything that your data science team needs to rapidly deliver AI/ML research and business initiatives.

  • AI App Marketplace Dash Enterprise ships with dozens of Dash app templates for business problems where AI/ML is having the greatest impact.
  • Big Data for Pything Connect to Python's most popular big data back ends: Dask, Databricks, NVIDIA RAPIDS, Snowflake, Postgres, Vaex, and more.
  • GPU & Dask Acceleration Dash Enterprise puts Python’s most popular HPC stack for GPU and parallel CPU computing in the hands of business users.
  • Data Science Workspaces Be productive from Day 1. Write and execute Python, R, & Julia code from Dash Enterprise's onboard code editor.

See https://plotly.com/contact-us/ to get in touch.

image

Issues
  • A simple working example for embedding dash in flask under a path

    A simple working example for embedding dash in flask under a path

    Dash documentation lacks a simple but full working example of how to embed dash layout as a path in a flask app, so that the dash layout becomes a div in the flask and follows the base template. For example path '/plot&type=plot1' return dash layout for plot type 1. I know that one can get the underlying flask app in dash, but how to get rendered dash layout in flask is not well documented.

    opened by Aso1977 48
  • 475 Pattern Matching Callbacks (codenamed wildcards)

    475 Pattern Matching Callbacks (codenamed wildcards)

    Pattern Matching Callbacks! (Codenamed, Wildcards!)

    ➡️ See official documentation here: https://dash.plotly.com/pattern-matching-callbacks

    Closes #475 - using the API discussed there (I'll post some examples soon, but for now here's the description):

    • String IDs still work the same way in both layout and callbacks
    • Now you can also make dict IDs. Keys should be strings, values can be strings, numbers, booleans, like:
      • id={"type": "cat", "age": 4, "purrs": True}
      • IDs must still be unique
    • Callbacks can use dict IDs with wildcard values for any of the keys. The supported wildcards are MATCH, ALL, and ALLSMALLER - and can be imported from dash.dependencies. There are various rules about how these can combine, driven by the need to resolve these to a unique callback invocation for each set of outputs and identify uniquely the inputs required for this invocation...

    To do before this is ready:

    • [x] Move most callback validation logic to the front end (so it doesn't need to be replicated in R)
    • [x] Do something with the callback graph when there are wildcards
    • [x] Test that this PR closes callback failure bugs: #1053, #1071, #1084, #1105
    • [x] See if it also closes redundant callback bugs #635, #832

    Contributor Checklist

    • [x] I have run the tests locally and they passed. (refer to testing section in contributing)
    • [x] I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
    • [x] I have added entry in the CHANGELOG.md
    • [ ] If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follow
      • [ ] this github #PR number updates the dash docs
      • [ ] here is the show and tell thread in plotly dash community

    Closes #832 (among other callback bugs - the others all have commits that close them with matching tests, but #832 is a bit heavy for a test of its own) Closes #1146

    size: 25 
    opened by alexcjohnson 38
  • Clientside Callbacks

    Clientside Callbacks

    In Dash, changes to component properties in the front-end trigger user-supplied Python functions (@app.callback). This framework is very flexible: users have full control over the Python code that they write in their app.callback functions.

    However, app.callback functions are simple. They filter some data or change the color of the chart or display some text. These data transformations, although simple, currently need to be processed entirely over the network in the Python backend. This makes the apps slower than they could be (because of the network delay) and less portable than they could be (because they require a running Python server).

    Clientside Callbacks will introduce an interface for describing data transformation relationships between components in JavaScript. These data transformations will happen entirely in the client-side without passing data over the network. The Clientside callbacks Dash framework will enable developers to swap out their python-driven @app.callback functions with javascript-executed data transformations, enabling more performant apps.


    As a quick background, here is what Dash Apps currently look like in Python:

    The first part describes what the app looks like. These classes just declaratively describe the names and the props of the React components that they generate. These objects get serialized as JSON.

    image

    app.layout = html.Div([
    
        html.H1('Example'),
    
        comonents.TextInput(
            id='my-text-input',
            value='Initial value'
        ),
        components.Dropdown(
            id='my-dropdown',
            options=[
                'Option A', 'Option B', 'Option C'
            ]
            value='Option A'
        ),
    
        components.Graph(
            id='my-graph'
            figure={             # Just a plotly figure
                'data': [...],
                'layout': {...}
            }
        )
    ])
    

    The second part of dash apps describe the relationship between graphs. This sets up "sources" ("inputs") and "sinks" ("outputs") in the Dash front-end. Whenever any of the Input properties change, the AJAX call gets made.

    It's Reactive like a spreadsheet: as inputs change, the new values propagate down the dependency graph, updating components in the correct order:

    1_basic_reactive

    @callback(
        Input(
            id='my-dropdown',
            property='value'
        ),
        Input(
            id='my-text-input',
            property='value'
        ),
        Output(
            id='my-graph',
            property='figure'
        )
    )
    def update_graph(new_dropdown_value, new_text_input_value):
        # compute a new figure based off of the new values of the dropdown
        # or text input
        return {
            'data': [{
                'x': [1, 2, 3],
                'y': ({
                    'Option A': [3, 1, 2],
                    'Option B': [4, 3, 5],
                    'Option C': [1, 2, 4]
                })[dropdown]
            }],
            'layout': {'title': text}
        }
    

    These reactive updates happen entirely server-side through HTTP requests. (This allows dash developers to do complicated updates or analytics through their python context).

    I think that we could extend this framework to work client-side as well. Instead of a custom function defining how Inputs ("sources") update Outputs ("sinks"), we could define a library of transformations components and a syntax for relating input properties to output properties. These transformations could be just be functional React components.

    Here are some conceptual examples: 2_input_updates_text

    from dash.serverless import Selector as S
    
    layout = Div([
        Input(id='my-input', value='initial-value'),
        H3(children=S('my-input', 'value'))
    ])
    

    In this example, we're setting the "children" property of the HTML H3 element to just be the "value" of the "my-input" component. When "value" changes, the content of the H3 element updates to match the new value.

    I'm wrapping the ID and property with S to denote that the string represents a "reactive" property corresponding to the component with the specified ID and that component's property. (The actual API might be different, just using s for conceptual purposes.)

    Now, consider a "Dataset" component and a "Graph":

    3_dataset_graph

    layout = Div([
        Dataset(
            id='my-dataset'
            columns={
                'column-1': [1, 2, 3],
                'column-2': [3, 1, 4]
            },
            column_names={
                'column-1': 'My first column',
                'column-2': 'My second column'
            }
        ),
    
        Graph(
            figure={
                'data': [{
                    'x': S('my-dataset', 'column-1'),
                    'y': S('my-dataset', 'column-2')
                }]
            }
        )
    ])
    

    Note that not all components actually get rendered in the DOM. In this case, the Dataset component isn't actually visible. It's just included as state. If you wanted to view it as a table, it would look like:

    image

    layout = Div([
        Dataset(
            id='my-dataset'
            columns={
                'column-1': [1, 2, 3],
                'column-2': [3, 1, 4]
            },
            column_names={
                'column-1': 'My first column',
                'column-2': 'My second column'
            }
        ),
    
        Table(data='::my-dataset.columns'),
    
        Graph(
            figure={
                'data': [{
                    'x': S('my-dataset', 'columns', 'column-1'),
                    'y': S('my-dataset', 'columns', 'column-2')
                }]
            }
        )
    ])
    

    You can imagine how there might be several datasets and several graphs in one (like a dashboard or a report).

    layout = Div([
        Dataset(id='dataset-1', columns={...}),
        Dataset(id='dataset-2', columns={...}),
        Dataset(id='dataset-3', columns={...}),
        Graph(id='graph-1',
              data=[{'x': S('dataset-1', 'columns', 'column-1'), ...}]
        ),
        Graph(id='graph-2',
              data=[{'x': S('dataset-2', 'columns', 'column-1'), ...}]
        ),
        Graph(id='graph-3',
              data=[{'x': S('dataset-3, 'columns', 'column-1'), ...}]
        )
    ])
    

    Now, we would also need a library for lightweight data transformations. I'm thinking something like Ramda.

    import dash.clientside.transformations as T
    import dash.clientside.selector as S
    
    df = pd.DataFrame([
        {'col-1': 1, 'col-2': 5, 'col-3': 10},
        {'col-1': 2, 'col-2': 6, 'col-3': 11},
        {'col-1': 3, 'col-2': 7, 'col-3': 12},
        # ...
    ])
    
    app.layout = html.Div([
    
        # "Virtual" component that doesn't render anything
        # to the screen, it just contains the data for other
        # components to reference
        dcc.Dataset(
            id='my-dataset',
            columns=df.columns,
            rows=df.to_dict(),
        ),
    
        # `Table` renders an actual table to the screen
        dcc.Table(
            rows=S('my-dataset', 'rows'),
            columns=S('my-dataset', 'rows')
        ),
    
        dcc.Graph(
            figure={
    
                # T.pluck('col-1', [{'col-1': 1}, {'col-1': 2}]) -> [1, 2]
    
                'x': T.pluck(
                    'col-1',
                    S('my-dataset', 'rows')
                ),
                'y': T.pluck(
                    'col-2',
                    S('my-dataset', 'rows')
                )
            }
        )
    ])
    

    Or, extending this with dynamic components:

    app.layout = html.Div([
        dcc.Dataset(
            id='my-dataset',
            columns=df.columns,
            rows=df.to_dict(),
        ),
    
        dcc.Dropdown(
            id='my-dropdown',
            options=[
                {'option': i, 'label': i}
                for i in df.columns
            ],
            value=df.columns[0]
        ),
    
        dcc.Graph(
            figure={
                'x': T.pluck(
                    'col-1',
                    S('my-dataset', 'rows')
                ),
                'y': T.pluck(
                    S('my-dropdown', 'value'),
                    S('my-dataset', 'rows')
                )
            }
        )
    ])
    

    5_simple_declarative_dropdown


    Here are some high-level architectural requirements and goals for this work item:

    • The Dash Apps will still be created with Python
    • The clientside callbacks will be executed in JavaScript
    • The existing set of Dash components will be available (with the exception of network-connected components like the mapbox charts)
    • We will introduce a new syntax or language ("data transformation language") for declaratively describing the relationships and simple operations between component properties. This language will have a Python interface, will be serialized as JSON, and executed in JavaScript.
    • This client-side data transformation will be available in server-connected Dash apps as well, enabling certain simple updates to happen quickly
    • The app will not run arbitrary JavaScript, it will be designed in a way to be safe from XSS injections
    • The "data transformation language" will operations like filtering, plucking values from nested objects, sorting, and arithmetic. It will draw inspiration from functional programming libraries and languages that enable concise, chainable, and immutable data transformations. See Ramda (http://ramdajs.com/) for an example.
    dash-meta-sponsored 
    opened by chriddyp 37
  • Validate component properties #264

    Validate component properties #264

    PR for #264

    Current Prerelease

    pip install dash==0.29.0rc8
    pip install dash-renderer==0.15.0rc1
    pip install dash-core-components==0.31.0rc2
    pip install dash-html-components==0.14.0rc3
    

    Validation is on by default. To turn it off, you can set app.config.disable_component_validation = True

    Test Cases to run for demo

    import dash
    import dash_html_components as html
    import dash_core_components as dcc
    import plotly.graph_objs as go
    from dash.dependencies import Input, Output
    
    app = dash.Dash()
    app.scripts.config.serve_locally=True
    
    app.layout = html.Div([
        html.Button(id='click1', children='click to return bad Div children'),
        html.Div(id='output1', **{'data-cb': 'foo'}),
        html.Button(id='click2', children='click to return a bad figure'),
        dcc.Graph(id='output2', figure={'data': [], 'layout': {}}),
        html.Button(id='click3', children='click to return a bad radio'),
        dcc.RadioItems(id='output3', options=[{'value': 'okay', 'label': 'okay'}]),
        html.Button(id='click4', children='click to make a figure with no id'),
        html.Div(id='output4'),
    ])
    
    
    
    @app.callback(Output('output1', 'children'),
                  [Input('click1', 'n_clicks')])
    def crash_it1(clicks):
        if clicks:
            return [[]]
        return clicks
    
    @app.callback(Output('output2', 'figure'),
                  [Input('click2', 'n_clicks')])
    def crash_it2(clicks):
        if clicks:
            return {'data': {'x': [1, 2, 3], 'y': [1, 2, 3], 'type': 'scatter'}, 'layout': {}}
        return go.Figure(data=[go.Scatter(x=[1,2,3], y=[1,2,3])], layout=go.Layout()) 
    
    @app.callback(Output('output3', 'options'),
                  [Input('click3', 'n_clicks')])
    def crash_it3(clicks):
        if clicks:
            return [{'value': {'not okay': True}, 'labl': 'not okay'}]
        return [{'value': 'okay', 'label': 'okay'}]
    
    @app.callback(Output('output4', 'children'),
                  [Input('click4', 'n_clicks')])
    def crash_it4(clicks):
        if clicks:
            return dcc.Graph()
        return dcc.Graph(id='hi')
    
    app.run_server(debug=True, port=8050)
    

    Example Error Messages

    CallbackOutputValidationError: 
    
    
    A Dash Callback produced an invalid value!
    
    Dash tried to update the `figure` prop of the
    `Graph` with id `output2` by calling the
    `crash_it2` function with `(1)` as arguments.
    
    This function call returned `{'layout': {}, 'data': {'y': [1, 2, 3], 'x': [1, 2, 3], 'type': 'scatter'}}`, which did not pass
    validation tests for the `Graph` component.
    
    The expected schema for the `figure` prop of the
    `Graph` component is:
    
    ***************************************************************
    {'validator': 'plotly_figure'}
    ***************************************************************
    
    The errors in validation are as follows:
    
    * figure	<- Invalid Plotly Figure:
    
    
        Invalid value of type '__builtin__.dict' received for the 'data' property of 
            Received value: {'y': [1, 2, 3], 'x': [1, 2, 3], 'type': 'scatter'}
    
        The 'data' property is a tuple of trace instances
        that may be specified as:
          - A list or tuple of trace instances
            (e.g. [Scatter(...), Bar(...)])
          - A list or tuple of dicts of string/value properties where:
            - The 'type' property specifies the trace type
                One of: ['mesh3d', 'splom', 'scattercarpet',
                         'scattergl', 'scatterternary', 'pie',
                         'surface', 'histogram', 'ohlc', 'heatmapgl',
                         'cone', 'scatterpolar', 'table',
                         'scatterpolargl', 'histogram2d', 'contour',
                         'carpet', 'box', 'violin', 'bar',
                         'contourcarpet', 'area', 'choropleth',
                         'candlestick', 'streamtube', 'parcoords',
                         'heatmap', 'barpolar', 'scattermapbox',
                         'scatter3d', 'pointcloud',
                         'histogram2dcontour', 'scatter', 'scattergeo',
                         'sankey']
    
            - All remaining properties are passed to the constructor of
              the specified trace type
    
            (e.g. [{'type': 'scatter', ...}, {'type': 'bar, ...}])
    
    
    CallbackOutputValidationError: 
    
    
    A Dash Callback produced an invalid value!
    
    Dash tried to update the `options` prop of the
    `RadioItems` with id `output3` by calling the
    `crash_it3` function with `(1)` as arguments.
    
    This function call returned `[{'value': {'not okay': True}, 'labl': 'not okay'}]`, which did not pass
    validation tests for the `RadioItems` component.
    
    The expected schema for the `options` prop of the
    `RadioItems` component is:
    
    ***************************************************************
    {'schema': {'allow_unknown': False,
                'nullable': False,
                'schema': {'disabled': {'type': 'boolean'},
                           'label': {'type': 'string'},
                           'value': {'type': 'string'}},
                'type': 'dict'},
     'type': 'list'}
    ***************************************************************
    
    The errors in validation are as follows:
    
    * options
     * 0
      * value	<- must be of string type
      * labl	<- unknown field
    
    
    ComponentInitializationValidationError: 
    
    
    A Dash Component was initialized with invalid properties!
    
    Dash tried to create a `RadioItems` component with the
    following arguments, which caused a validation failure:
    
    ***************************************************************
    {'id': 'output3', 'options': [{'label': 'okay', 'value': {}}]}
    ***************************************************************
    
    The expected schema for the `RadioItems` component is:
    
    ***************************************************************
    {'className': {'type': 'string'},
     'dashEvents': {'allowed': ['change'], 'type': ('string', 'number')},
     'fireEvent': {},
     'id': {'type': 'string'},
     'inputClassName': {'type': 'string'},
     'inputStyle': {'type': 'dict'},
     'labelClassName': {'type': 'string'},
     'labelStyle': {'type': 'dict'},
     'options': {'schema': {'allow_unknown': False,
                            'nullable': False,
                            'schema': {'disabled': {'type': 'boolean'},
                                       'label': {'type': 'string'},
                                       'value': {'type': 'string'}},
                            'type': 'dict'},
                 'type': 'list'},
     'setProps': {},
     'style': {'type': 'dict'},
     'value': {'type': 'string'}}
    ***************************************************************
    
    The errors in validation are as follows:
    
    
    * options
     * 0
      * value	<- must be of string type
    
    

    PropTypes to Cerberus reference

    | PropType | Cerberus Schema Validated Against | Known Current Limitations | | ---------- | ------------------------------------ | -------------------------- | | array | {'type': 'list'} | | | bool | {'type': 'boolean'} | | | func | {} | No validation occurs. | | object | {'type': 'dict'} | Validates that input is explicitly a dict object. We cannot be more general (e.g. collections.abc.Mapping) since the core Component is an instance of that.| | string | {'type': 'string'} | | | symbol | {} | No validation occurs | | node | {'anyof': [{'type': 'component'}, {'type': 'boolean'}, {'type': 'number'}, {'type': 'string'}, {'type': 'list', 'schema': {'anyof': [{'type': 'component'}, {'type': 'boolean'}, {'type': 'number'}, {'type': 'string'}]}}]} | | | instanceOf(Object) | {} | No validation occurs | | oneOf(['val1', 2]) | {'allowed': [None, 'val1', 2]} | Strings will have ' characters stripped off each end. This is because metadata.json generation serializes the literal values as json, so for example PropTypes.oneOf(['News', 'Photos']) serializes to ["'News'", "'Photos'"]. https://github.com/reactjs/react-docgen/issues/57 | | oneOfType( [ PropTypes.string, PropTypes.bool ] ) | {'anyof': [{'type': 'string', 'type': 'boolean'}]} | If one of the types is a PropType that cannot be validated individually (e.g. PropType.func), no validation will occur and the schema will effectively be {} | | arrayOf( PropTypes.number ) | {'type': 'list', 'schema': {'type': 'number'}} | | | objectOf( PropTypes.number ) | {'type': 'dict', 'valueschema': {'type': 'number'}} | | | shape( { k1: PropTypes.string, k2: PropTypes.number } ) | {'type': 'dict', 'allow_unknown': False, 'schema': {'k1': {'type': 'string}, 'k2': {'type': 'number'}}} | | | any | {'type': ('boolean', 'number', 'string', 'dict', 'list')} | |

    opened by rmarren1 37
  • Dash Dev Tools

    Dash Dev Tools

    In https://github.com/orgs/plotly/projects/3, many of our issues involve Dash's front-end: Front-end error handling, front-end live-DAG, front-end hot-reload.

    I'd like to open this issue to discuss an architecture for handling these requirements.

    Some framing:

    JavaScript Error Handling

    • We should expose Dash's front-end errors to the users. Currently, they are only available in the browser's dev tools, which is too hidden for our community.

    For example, consider Atom's plugins: image

    Python Error Handling Could we use the same architecture that we use for JavaScript errors to display python errors? That way, the user never needs to look at the terminal for errors, they only need to focus on their app.

    For example, consider create-react-app: image

    or werkzeug: image

    Hot Reloading If we had hot-reloading, could we build a nice little "control bar" that users could use to configure hot reloading? For example, it could:

    • Tell the user if hot-reloading is on or off
    • Users could turn hot-reloading on and off
    • It could provide build times or "last updated" times

    Displaying the DAG If we wanted to display the DAG to the user, could we place this in the Dash Dev Tools container as well? image


    cc @plotly/dash

    dash-meta-sponsored 
    opened by chriddyp 31
  • error UnsupportedOperation: not writable

    error UnsupportedOperation: not writable

    I had dash running on my pc before without problems. I had to reinstall and now I can't get it to work. Even when I use the most basic code I get the same error. Here I used the very first code example of the tutorial with montreal and sf https://dash.plot.ly/getting-started#installation

    I still always get this error:


    File "", line 25, in app.run_server(debug=True)

    File "/Users/Wheez/anaconda3/envs/py36/lib/python3.6/site-packages/dash/dash.py", line 568, in run_server self.server.run(port=port, debug=debug, **flask_run_options)

    File "/Users/Wheez/anaconda3/envs/py36/lib/python3.6/site-packages/flask/app.py", line 938, in run cli.show_server_banner(self.env, self.debug, self.name, False)

    File "/Users/Wheez/anaconda3/envs/py36/lib/python3.6/site-packages/flask/cli.py", line 629, in show_server_banner click.echo(message)

    File "/Users/Wheez/anaconda3/envs/py36/lib/python3.6/site-packages/click/utils.py", line 259, in echo file.write(message)

    UnsupportedOperation: not writable


    I run it on python 3.6 with anaconda and spyder and followed the installation tutorial. I have no idea what to do. Thanks for any help.

    opened by wheeeee 29
  • Embedding or displaying local images

    Embedding or displaying local images

    I can't find a way to embed or display local images, either through html or in a plotly graph. This seems to be a limitation with the server can do (in the former case) or a lack of support (in the later case).

    My intended use case is have a user point to a directory of images. I want to display the image that the user selects. The image is then classified using a model built in Keras.

    Is there any way to display an image locally?

    opened by FaustineLi 27
  • allow optional header and footer

    allow optional header and footer

    This PR depends on html components having a HTML serializer, see https://github.com/plotly/dash-html-components/pull/29

    This PR simplifies adding custom JavaScript and CSS to Dash apps - a more flexible and declarative alternative to app.css.append_css and app.scripts.append_script

    Example usage:

    app.head = [
        html.Link(
            href='https://codepen.io/chriddyp/pen/bWLwgP.css',
            rel='stylesheet'
        ),
        ('''
        <style type="text/css">
        html {
            font-size: 50px;
        }
        </style>
        '''),
        html.Title(path)
    ]
    
    app.footer = [
        html.Script(type='text/javascript', children='alert("hello world")')
    ]
    

    app.head and app.footer can also be functions, which enables setting variables dynamically based off of the URL (i.e. unique page titles)

    def head():
        path = request.path
        return html.Title(path)
    
    app.head = head
    

    Unlike app.layout, app.head and app.footer are templated directly into the HTML (as HTML!) rather than generated in Dash’s front-end. This allows the components to be rendered immediately on page load rather than after page load (required for things like page title and meta descriptions and for preventing a “Flash of Unstyled Content” https://en.wikipedia.org/wiki/Flash_of_unstyled_content).

    This makes the components in app.head and app.footer different than the components in app.layout. In particular:

    • Callbacks can’t be applied to components rendered in app.head or app.footer
    • Only dash_html_components can be applied to the app.head and app.footer as these are the only valid HTML tags (a `dash_core_components.Graph is not a valid HTML tag, it’s a rich component generated by React.js with dynamic javascript and CSS)

    Fixes #https://github.com/plotly/dash/issues/170 and several issues brought up in the dash community forum (https://community.plot.ly/c/dash)

    opened by chriddyp 23
  • Proposal for Offline CSS and JS and Customizable `index.html`

    Proposal for Offline CSS and JS and Customizable `index.html`

    Opening this issue to propose the officially endorsed and documented method for embedding custom, local CSS and JavaScript in Dash apps.

    This development for this issue has been sponsored by an organization. Many thanks! If your company or organization would like to sponsor development, please reach out.

    Background: In Dash, HTML tags and higher-level components are embedded in the App by assigning the app.layout property to a nested hierarchy of Dash components (e.g. the components in the dash-core-components or the dash-html-components library). These components are serialized as JSON and then rendered client-side with React.js. On page load, Dash serves a very minimal HTML string which includes the blank container for rendering the app within, the component library's JavaScript and CSS, and a few meta HTML tags like the page title and the encoding (see https://github.com/plotly/dash/blob/6a1809fc619671f8bf7e1294d12ef1180e90df6b/dash/dash.py#L293-L318).

    This architecture doesn't work well for embedding custom JavaScript scripts and CSS Stylesheets because these scripts and stylesheets usually need to be included in the HTML that is served on page load.

    We will support user-supplied JavaScript and CSS through two enhancements:

    Enhancement 1 - Automatic

    • This "automatic" method will template in all stylesheets (CSS) and scripts (JavaScript) that are included in a static folder
    • These links will be included in alphabetical order
    • These links will be included after the component library's stylesheets and scripts
    • The server route (/static/<path:string>) for serving these files will be configured automatically by Dash

    This method will be what most Dash users will use. It's very easy to use and easy to document ("To include custom CSS, just place your CSS files in static folder. Dash will take care of the rest"). Since the files will be templated alphabetically, the user can control the order (if necessary) by prefixing ordered numbers to the files (e.g. 1-loading.css, 2-app.css).

    With this method, we'll be able to add custom CSS processing middleware like minifying CSS or creating cache-busting URLs completely automatically.

    If the user needs more control over the placement of these files, they can use the method in "Enhancement 2 - Manual Override".

    Enhancement 2 - Manual Override

    Currently on page load, Dash serves this HTML string: https://github.com/plotly/dash/blob/6a1809fc619671f8bf7e1294d12ef1180e90df6b/dash/dash.py#L293-L318.

    This enhancement will make this overridable:

    • The user will assign a HTML string or a function that returns an HTML string to a property on the app object (e.g. app.index).
    • This HTML string will include several predefined template variable names that will correspond to the stylesheets and scripts that Dash needs to include to render the component libraries.
    • The user can include extra meta tags in their template or even include other HTML around their Dash app container.

    Here is an example:

    def custom_index():
        return '''
        <!DOCTYPE html>
        <html>
    
            <head>
                <meta charset="UTF-8">
                <meta description="This is my dash app">
    
                <title>My Custom Dash App</title>
                <link ref="stylesheet" href="/static/my-custom-css-normalize.css">
                {dash_renderer_css_bundle}
                {dash_component_css_bundles}
                <link ref="stylesheet" href="/static/my-component-css-override.css">
    
            </head>
    
            <body>
                <div>
                    My Custom Header
                </div>
                <div id="react-entry-point">
                    <div class="_dash-loading">
                        Loading...
                    </div>
                </div>
            </body>
    
            <footer>
                <script type="javascript" src="/static/my-custom-javascript-bundle.js">
                {dash_renderer_javascript_bundle}
                {dash_component_javascript_bundles}
                <script type="javascript" src="/static/my-custom-javascript-override.js">
            </footer>
    
        </html>
        '''
    
    app.index = custom_index
    

    The following items will be required in creating an index string:

    • The dash_component_css_bundles, dash_component_javascript_bundles, dash_renderer_css_bundle, dash_renderer_javascript_bundle template names. Dash will look for these names and fill them in with the appropriate component CSS and JavaScript on page load.
    • A <div/> with an id react-entry-point. Dash's front-end will render the app within this div once the JavaScript has been evaluated.

    Note the level of customizability in this solution:

    • The user has full control over the location of the custom JS and CSS files with respect to the auto-templated CSS and JavaScript files
    • The user can include custom meta tags in the <head/>. In the example, see the custom <title/> and custom <meta/> description.
    • The user can include custom HTML around their Dash app container (see the <div/> with My Custom Header)
    • The user can omit the templated tags if they want to supply their own front-end JavaScript bundles. This ties in nicely with the "Custom JavaScript Hooks" requirement: if the user adds their own hooks to a custom dash-renderer build, they could remove the default dash_renderer template variable and include their own version.
    • If the tags depend on the URL of the page, they could program in different values that depend on the flask.request.url variable.
    dash-meta-sponsored 
    opened by chriddyp 23
  • Improve Callback Graph

    Improve Callback Graph

    Attempt to improve and significantly expand the features available in the callback graph to improve its usefulness in debugging and testing. Will try to cover the ideas given in https://github.com/plotly/dash/issues/1176. Comments/suggestions would be welcome, especially for styling.

    Current Status

    captured (1)

    captured (2)

    Changes

    • Replaced viz.js with cytoscape.js via react-cytoscape. This results in some minor visual and layout changes.
    • CallbackGraphContainer now subscribes to layout and paths so it can introspect the current state.
    • Added new reducers to compute profiling information and report all changed props (not just those that are inputs).

    Issues

    • State layout is finicky. dagre was giving horrible results even when cycles were pruned away. Using breadthfirst for now, but layout properties may need to be tailored to viewport size instead of being fixed.
    • Outputs that return no_update are still being flashed during execution highlighting. No way to detect them right now.

    Contributor Checklist

    • [ ] I have broken down my PR scope into the following TODO tasks
      • [X] Zoom in/out functionality for large/complex callback chains
      • [ ] Callback graph accessible from a dedicated url.
      • [X] Distinguish between clientside and serverside callbacks using different node colors.
      • [x] Add state information to the callback graph
      • [x] Report profiling information
        • [x] Number of times a callback was invoked per node
        • [x] Time spent (total or average) in the callback. Maybe link to the node color?
        • [ ] Label each edge with the number of times that input triggered a callback
      • [ ] Live introspection
        • [X] Components, properties, and callback inputs/outputs are inspect-able in real time.
        • [ ] Component properties are modifiable.
      • [ ] Live debugging
        • [x] Highlight currently executing callbacks and modified outputs
        • [ ] Probe the last input/output by hovering/focusing an edge
        • [ ] Manually emit a property changed event to trigger callback paths
    • [x] I have run the tests locally and they passed. (refer to testing section in contributing)
    • [x] I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR

    optionals

    • [x] I have added entry in the CHANGELOG.md
    • [ ] If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follow
      • [ ] this github #PR number updates the dash docs
      • [ ] here is the show and tell thread in plotly dash community
    size: 2 feature 
    opened by jjaraalm 22
  • [Feature Request] `dcc.RangeSlider` tooltip - allow displaying something else than `value`

    [Feature Request] `dcc.RangeSlider` tooltip - allow displaying something else than `value`

    Problem

    Currently, the tooltip of dcc.RangeSlider can be used to display the value property of the slider. It would be nice if it could display an arbitrary string. E.g. using a dictionary, where keys are the values of the slider and values are the strings to be displayed in the tooltip.

    Solution(?)

    Apparently, such functionality is present in the react slider.

    http://react-component.github.io/slider/?path=/story/rc-slider–handle

    <div style={wrapperStyle}>
          <p>Range with custom tooltip</p>
          <Range min={0} max={20} defaultValue={[3, 10]} tipFormatter={value => `${value}%`} />
    </div>
    

    See the tipFormatter property. Could this property be added to dcc.RangeSlider?

    Example use-case

    Imagine that your slider values are actually indexes of a list of the real values. You want to present the real values to the user instead of the indexes. You cannot use the marks property of the slider because there are too many values and it would look messy. Thus, you want to use the tooltip to display something else than the value property of the slider.

    opened by vsisl 0
  • [BUG] - Dash 2.1 list of properties for components are not updated

    [BUG] - Dash 2.1 list of properties for components are not updated

    Describe your context Please provide us your environment, so we can easily reproduce the issue.

    • replace the result of pip list | grep dash below
    dash         2.1.0
    

    Describe the bug Generating the docs for a component with dash.dcc.Dropdown, for example, shows the properties lists are not updated. Here for Dropdown, id is listed first, which doesn't suggest that options and value can be provided as first positional arguments.

    Expected behavior

    Updated list with arguments in new order.

    opened by LiamConnors 0
  • [BUG] Dash 2.1 - DataTable not accepting correct positional arguments

    [BUG] Dash 2.1 - DataTable not accepting correct positional arguments

    • replace the result of pip list | grep dash below
    dash                 2.1.0
    

    Describe the Bug The changelog says Rearranged Keyword Arguments - data and columns the first two keyword arguments which means they can be supplied as positional arguments without the keyword.

    But the following code, based on the example in the changelog under Datatable, throws an error.

    import pandas as pd
    
    df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
    
    app = Dash(__name__)
    
    app.layout = dash_table.DataTable(df.to_dict('records'),id='table')
    
    if __name__ == '__main__':
        app.run_server(debug=True)
    
    

    Error:

    Invalid argument `active_cell` passed into DataTable with ID "table".
    Expected `object`.
    Was supplied type `array`.
    Value provided: 
    [
      {
        "Average MW Per Plant": 15.3,
        "Generation (GWh)": 10826,
        "Installed Capacity (MW)": 4395,
        "Number of Solar Plants": 289,
        "State": "California"
      },
      {
        "Average MW Per Plant": 22.5,
        "Generation (GWh)": 2550,
        "Installed Capacity (MW)": 1078,
        "Number of Solar Plants": 48,
        "State": "Arizona"
      },.....
    

    Expected behavior That based on the position of the argument, this would be taken as the data and columns would be generated from the first row.

    opened by LiamConnors 0
  • [BUG] - Docs example 'Non-Linear Slider and Updatemode' doesn't render correctly in Dash 2.1

    [BUG] - Docs example 'Non-Linear Slider and Updatemode' doesn't render correctly in Dash 2.1

    This Slider example: https://dash.plotly.com/dash-core-components/slider#non-linear-slider-and-updatemode has a functioning slider on the docs page. image

    Using Dash 2.1, and without any update to the example code, the slider no longer works.

    image

    I can't see any changes in the Slider's functioning that should cause this. step and marks are both provided.

    opened by LiamConnors 0
  • OK good. I'll close this issue, but yes, conda-forge is a bit behind. Currently the dash feedstock is a community effort, we'll discuss whether Plotly folks could take a more proactive role there. Sorry about the confusion!

    OK good. I'll close this issue, but yes, conda-forge is a bit behind. Currently the dash feedstock is a community effort, we'll discuss whether Plotly folks could take a more proactive role there. Sorry about the confusion!

    OK good. I'll close this issue, but yes, conda-forge is a bit behind. Currently the dash feedstock is a community effort, we'll discuss whether Plotly folks could take a more proactive role there. Sorry about the confusion!

    Originally posted by @alexcjohnson in https://github.com/plotly/dash/issues/1196#issuecomment-614069028

    opened by TessieTong 1
  • [BUG] share_xaxes in subplot prevents data from showing up

    [BUG] share_xaxes in subplot prevents data from showing up

    I am making subplot for my dash app. I am using make_subplot to show two plots in a column. I want them to share the x axis and with the window height 0.75:0.25. It worked fine with plot.ly fig.show(), however, when I put in into GCC.graph, the data is not showing up. When I remove share_xaxes=True, the data show up, but the two subplots do not react simultaneously (for example, when zoom in one, the other doesn't).

    Here is the reproduceable code (I am using Jupyter Lab, therefore debug=False in the main):

    import pandas as pd
    columns=['Date','col1','col2', 'col3']
    data={'row1':['2019-01-31',166.440, 73.417283, 59.702568],
    'row2':['2019-02-01', 166.520, 73.530398, 59.782428],
    'row3':['2019-02-04', 171.250, 79.536789, 64.288669],
    'row4':['2019-02-05', 174.179, 82.418937, 66.771527],
    'row5':['2019-02-06', 174.240, 82.478897, 66.823261],
    'row6':['2019-02-07', 170.940, 67.869795, 61.266096],
    'row7':['2019-02-08', 170.410, 65.689645, 60.397355],
    'row8':['2019-02-11', 169.429, 61.428562, 58.737154],
    'row9':['2019-02-12', 170.889, 65.333093, 60.478345],
    'row10':['2019-02-13', 170.179, 61.784665, 59.170717]}
    
    df=pd.DataFrame.from_dict(data, orient='index')
    df.columns = columns
    
    import plotly.graph_objs as go
    from plotly.subplots import make_subplots
    
    import dash
    import dash_core_components as dcc
    import dash_html_components as html
    from dash.dependencies import Input, Output
    
    app = dash.Dash(__name__)
    
    app.layout = html.Div([
        html.Div([
                dcc.Checklist(
                    id='variables',
                    values='value')
            ]),
        dcc.Graph(id='chart', figure={})
    ])
    
    @app.callback(
        Output(component_id='chart', component_property='figure'), #],
        [Input('variables','values')])
    def update_graph(variable):
        
        fig = make_subplots(rows=2, cols=1, row_heights = [0.75, 0.25], vertical_spacing=0.01, subplot_titles=(' ', ''), shared_xaxes=True)
    
        fig.add_trace(go.Scatter(x=df.Date, 
                            y=df['col1'], line_color='black', line_width = 1), row = 1, col = 1)
        fig.add_trace(go.Scatter(x = df.Date, 
                            y = df['col2'], line_color='cyan', line_width = 1), row = 2, col =1)
         
        return fig
    
    # -------------------------------------------------- ----------------------------
    if __name__ == '__main__':
        app.run_server(debug=False)
    

    ----- Here are the versions:

    dash                          2.0.0
    dash-core-components          2.0.0
    dash-html-components          2.0.0
    dash-renderer                 0.20.0
    dash-table                    5.0.0
    
    - OS: Windows 10 Home
    - Browser: chrome 96.0.4664.45
    

    Wrong behavior Capture

    Expected behavior Capture1

    opened by TessieTong 0
  • [BUG] Dash 2.1 - `RadioItems` doesn't take `value` as 2nd positional argument

    [BUG] Dash 2.1 - `RadioItems` doesn't take `value` as 2nd positional argument

    Dash 2.1 - RadioItems doesn't take value as 2nd positional argument.

    • replace the result of pip list | grep dash below
    dash                 2.1
    

    Describe the bug

    Running the following app where value is provided as a keyword argument loads with Montreal selected:

    import dash_core_components as dcc
    import dash
    
    app = dash.Dash(__name__)
    
    app.layout = dcc.RadioItems(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': 'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='MTL'
    )
    
    if __name__ == "__main__":
        app.run_server(debug=True)
    
    

    Running it with positional arguments for options and value, no value is selected on load:

    import dash_core_components as dcc
    import dash
    
    app = dash.Dash(__name__)
    
    app.layout = dcc.RadioItems(
        [
            {'label': 'New York City', 'value': 'NYC'},
            {'label': 'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        'MTL'
    )
    
    if __name__ == "__main__":
        app.run_server(debug=True)
    

    Expected behavior

    Montreal should show on load as the value is set to 'MTL' with the second positional argument

    opened by LiamConnors 0
  • Calling callback functions directly (eg. for tests)

    Calling callback functions directly (eg. for tests)

    As per https://github.com/plotly/dash/issues/1195, sometimes there's a need to unit-test some of the callback functions. What we're doing in the team right now is adding a wrapper so that the callback calls a wrapper and we're able to call the function outside of the dash framework.

    Initially I thought that what has been suggested in the issue description would be more appropriate (so, having .inner attribute on the returned value), but eventually the other suggested solution is more "intuitive" (in the former case, we'd have to update the documentation as well :( )

    The solution is not ideal, obviously, cause if somebody uses the callback context within the callbacks which he/she intends to call in isolation, it's gonna crash (unless it's somehow mocked in the calling context)

    Contributor Checklist

    • [ ] I have broken down my PR scope into the following TODO tasks
      • [X] Implement as suggested in the issue discussion
      • [X] Adjust unit tests
      • [X] Add integration test
    • [X] I have run the tests locally and they passed. (refer to testing section in contributing)
    • [X] I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR

    optionals

    • [ ] I have added entry in the CHANGELOG.md
    • [ ] If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follows
      • [ ] this GitHub #PR number updates the dash docs
      • [ ] here is the show and tell thread in Plotly Dash community
    opened by marekpiotrowski 0
  • Two way serialization

    Two way serialization

    Replaces previous PR with squashed commits

    Idea

    Provide non-lossy data exchange between server & renderer client in initial layout and callbacks, namely two-way serialization that allows either party sends any object then receive it back in its original type.

    CHANGELOG

    Added a serialization support of pandas.DataFrame as the very first type, which will be followed by a few more types like numpy.array, DateTime, Plotly figures and more.

    Quick preview of how serialization work

    - Layout

    Before :

    xValues = numpy.linspace(0, 3, 4)
    yValues = numpy.linspace(4, 7, 4)
    df = pandas.DataFrame({'x': xValues, 'y': yValues})
    table = DataTable(data=df.to_dict('records'), id='data_table_1')
    

    After :

    xValues = numpy.linspace(0, 3, 4)
    yValues = numpy.linspace(4, 7, 4)
    df = pandas.DataFrame({'x': xValues, 'y': yValues})
    table = DataTable(data=df, id='data_table_1')
    

    - Callback

    Before :

    @callback(Output('data_table_2', 'data'), Input('data_table_1', 'data'))
    def update(data): # <-- You would receive array object
    	return data
    

    After :

    @callback(Output('data_table_2', 'data'), Input('data_table_1', 'data'))
    def update(data): # <-- You would receive pandas.DataFrame object as it's what you've passed to data_table_1
    	return data
    
    opened by workaholicpanda 0
  • [BUG] dcc.Download cannot download files without UTF-8 encoding.

    [BUG] dcc.Download cannot download files without UTF-8 encoding.

    I am trying to implement a dash_core_components.Download (Python). I am following the code of this web page step by step: https://dash.plotly.com/dash-core-components/download

    image

    The point is that this component does not download elements other than text with UTF-8 encoding. I have seen that on the aforementioned website the test buttons for CSV files, images, Excel...

    Captura de pantalla (107)

    Captura de pantalla (105)

    Captura de pantalla (106)

    Could this functionality have been corrupted at some point? It only happens when trying to download files without UTF-8 encoding.

    I hope it has been helpfull. Thank you very much for this work.

    opened by enriquemoralesmontero 1
Releases(v2.0.0)
  • v2.0.0(Sep 4, 2021)

    Dash and Dash Renderer

    Added

    • #1702 Added a new @app.long_callback decorator to support callback functions that take a long time to run. See the PR and documentation for more information.
    • #1514 Perform json encoding using the active plotly JSON engine. This will default to the faster orjson encoder if the orjson package is installed.
    • #1736 Add support for request_refresh_jwt hook and retry requests that used expired JWT tokens.

    Changed

    • #1679 Restructure dash, dash-core-components, dash-html-components, and dash-table into a singular monorepo and move component packages into dash. This change makes the component modules available for import within the dash namespace, and simplifies the import pattern for a Dash app. From a development standpoint, all future changes to component modules will be made within the components directory, and relevant packages updated with the dash-update-components CLI command.
    • #1707 Change the default value of the compress argument to the dash.Dash constructor to False. This change reduces CPU usage, and was made in recognition of the fact that many deployment platforms (e.g. Dash Enterprise) already apply their own compression. If deploying to an environment that does not already provide compression, the Dash 1 behavior may be restored by adding compress=True to the dash.Dash constructor.
    • #1734 Added npm run build script to simplify build process involving dash-renderer and subcomponent libraries within dash.

    Dash Core Components

    Added

    • #1729 Include F#, C#, and MATLAB in markdown code highlighting, for the upcoming .NET and MATLAB flavors of dash.

    • #1735 Upgrade Plotly.js to v2.4.2. This includes:

      • Feature release 2.3.0:
        • More number formatting options due to d3-format upgrade.
        • Many new geo projections.
        • Improved rendering and performance of scattergl, splom and parcoords traces.
      • Feature release 2.4.0:
        • legend.groupclick
        • bbox of hover items in event data, to support custom dash-driven hover effects
      • Patch releases 2.3.1, 2.4.1, and 2.4.2 containing various bug fixes.
    • #1735 New dcc.Tooltip component. This is particularly useful for rich hover information on dcc.Graph charts, using the bbox information included in the event data in plotly.js v2.4.0

    Dash Table

    Added

    • #1729 Include F#, C#, and MATLAB in markdown code highlighting, for the upcoming .NET and MATLAB flavors of dash.

    Dash HTML Components

    Removed

    • #1734 Removed the following obsolete html elements - <command>, <element>, <isindex>, <listing>, <multicol>, <nextid>. These are obsolete and had been previously removed from the reference table.
    Source code(tar.gz)
    Source code(zip)
  • v1.21.0(Jul 13, 2021)

    Dash and Dash Renderer

    Added

    • #1675 Add new Dash constructor argument extra_hot_reload_paths. This allows you to re-initialize the Python code of the app when non-Python files change, if you know that these files impact the app.

    Changed

    • #1675 Remove the constraint that requests_pathname_prefix ends with routes_pathname_prefix. When you are serving your app behind a reverse proxy that rewrites URLs that constraint needs to be violated.
    • #1611 and #1685 Package dash-renderer artifacts and dependencies with Dash, and source renderer resources from within Dash.
    • #1567 Julia component generator puts components into src/jl - fixes an issue on case-insensitive filesystems when the component name and module name match (modulo case) and no prefix is used. Also reduces JS/Julia clutter in the overloaded src directory.

    Fixed

    • #1664 Fix #1649, makes the devtools readable with a dark theme.
    • #1640 Fix #1475, missing timing_information after certain modifications to Flask behavior

    Dash Core Components

    Fixed

    • #963 Fixes #885

      This applies the fix from #878 to the RangeSlider. It not only fixes the bug where the tooltips were visible when slider was not, but it also reduces the lag in the tooltip when the slider handles are moved.

    Updated

    • #939 Upgrade Plotly.js to v2.2.1. Note that this is a major version upgrade to Plotly.js, however we are not treating this as a breaking change for DCC as the majority of breaking changes in Plotly.js do not affect the Dash API. The one exception is that several trace types that have long been deprecated are removed entirely.
      • Major release 2.0.0:
        • Stop exporting d3 as Plotly.d3, and remove many other deep pieces of the public API. This does not affect the dcc.Graph component, but if you make use of Plotly from the global scope in some other way you may be affected.
        • Drop the deprecated trace types contourgl and area, as well as legacy pre-scatterpolar polar attributes bar.r, bar.t, scatter.r, scatter.t, layout.radialaxis, layout.angularaxis. Use scatterpolar, barpolar, and polar subplots instead.
        • heatmapgl and pointcloud trace types, and the transform attribute are deprecated, and will be removed in a future release.
        • Increase CSP safety by removing function constructors. 3D plots still use function constructors, but if you place one of the non-3D bundles (including the new strict bundle) in your assets folder you will have no function constructors.
        • Remove "Aa" text in legends.
        • Default hovermode to "closest".
        • Default textposition to "auto" in bar traces. If you previously used the bar.text attribute for hover only, you will need to explicitly set textposition="none".
        • Add bar.marker.pattern, image.zsmooth, and various other features and bugfixes.
      • Feature release 2.1.0:
        • New icicle trace type.
        • New legendrank trace attribute.
        • Several other additions and bug fixes.
      • Feature release 2.2.0:
        • Legend group titles
        • Half-year directive (%h) for date formatting
        • Several other bug fixes and performance improvements
      • Patch release 2.2.1 containing a security fix.

    Added

    • #932 Adds a new copy to clipboard component.
    • #948] Adds disabled_days prop to DatePickerRange and DatePickerSingle components. With this prop you can specify days that should be made unselectable in the date picker, in addition to those that fall outside of the range specified by min_date_allowed and max_date_allowed.

    Changed

    • #972 Updated R package vignettes and dash-info.yaml to regenerate examples without attaching now-deprecated core component packages (dashHtmlComponents, dashCoreComponents, or dashTable).

    Dash HTML Components

    Changed

    • #194 Updated dependencies and build process
    • #190 Updated R package vignettes and dash-info.yaml to regenerate examples without attaching now-deprecated core component packages (dashHtmlComponents, dashCoreComponents, or dashTable).

    Dash Table

    Fixed

    • #907
      • Fix a bug where pagination did not work or was not visible. #834
      • Fix a bug where if you are on a page that no longer exists after the data is updated, no data is displayed. #892

    Added

    • #916

      • Added html option to markdown_options prop. This enables the use of html tags in markdown text.
    • #545

      • Case insensitive filtering
      • New props: filter_options - to control case of all filters, columns.filter_options - to control filter case for each column
      • New operators: i=, ieq, i>=, ige, i>, igt, i<=, ile, i<, ilt, i!=, ine, icontains - for case-insensitive filtering, s=, seq, s>=, sge, s>, sgt, s<=, sle, s<, slt, s!=, sne, scontains - to force case-sensitive filtering on case-insensitive columns

    Changed

    • #918 Updated all dependencies. In particular the highlight.js upgrade changes code highlighting in markdown: we have long used their "github" style, this has been updated to more closely match current github styles.
    • #901 Updated R package dash-info.yaml to regenerate example without attaching now-deprecated core component packages (dashHtmlComponents, dashCoreComponents, or dashTable).
    Source code(tar.gz)
    Source code(zip)
  • v1.20.0(Apr 8, 2021)

    Dash and Dash Renderer

    Changed

    • #1531 Update the format of the docstrings to make them easier to read in the reference pages of Dash Docs and in the console. This also addresses #1205
    • #1553 Increase the z-index of the Dash error menu from 1001 to 1100 in order to make sure it appears above Bootstrap components.

    Fixed

    • #1546 Validate callback request outputs vs output to avoid a perceived security issue.

    Dash Core Components

    Added

    • #863 Adds a new Download component. Along with this several utility functions are added to help construct the appropriate data format:
      • dcc.send_file - send a file from disk
      • dcc.send_data_frame - send a DataFrame, using one of its writer methods
      • dcc.send_bytes - send a bytestring or the result of a bytestring writer
      • dcc.send_string - send a string or the result of a string writer

    Changed

    • #923 Set autoComplete to off in dcc.Dropdown. This fixes #808

    Fixed

    • #930 Fixed a bug #867 with DatePickerRange that would sometimes shift the allowed dates by one day.
    • #934 Fixed a bug in EnhancedTab component that ignored disabled_className property

    Dash HTML Components

    Fixed

    • #179 - Fixes #77 Added allow and referrerPolicy properties to html.Iframe

    • #178 - Fix #161 data property, and fix #129 obsolete, deprecated, and discouraged elements. No elements were removed, but comments were added to the documentation about these elements detailing their limitations.

      Dash Table

      Changed

      • #862 - update docstrings per https://github.com/plotly/dash/issues/1205
      • #878 - update build process to use Webpack 5 and other latest dependencies
      Source code(tar.gz)
      Source code(zip)
    • v1.19.0(Jan 20, 2021)

      Dash and Dash Renderer

      Added

      • #1508 Fix #1403: Adds an x button to close the error messages box.
      • #1525 Adds support for callbacks which have overlapping inputs and outputs. Combined with dash.callback_context this addresses many use cases which require circular callbacks.

      Changed

      • #1503 Fix #1466: loosen dash[testing] requirements for easier integration in external projects. This PR also bumps many dash[dev] requirements.

      Fixed

      • #1530 Dedent error messages more carefully.
      • #1527🐛 get_asset_url now pulls from an external source if assets_external_path is set.
        • updated _add_assets_resource to build asset urls the same way as get_asset_url.
        • updated doc string for assets_external_path Dash argument to be more clear that it will allways be joined with the assets_url_path argument when determining the url to an external asset.
      • #1493 Fix #1143, a bug where having a file with one of several common names (test.py, code.py, org.py, etc) that imports a dash component package would make import dash fail with a cryptic error message asking whether you have a file named "dash.py"

      Dash Core Components

      Fixed

      • #905 Make sure the figure prop of dcc.Graph receives updates from user interactions in the graph, by using the same layout object as provided in the prop rather than cloning it. Fixes #879.
      • #903 Part of fixing dash import bug https://github.com/plotly/dash/issues/1143

      Updated

      Added

      • #888 Adds a drag_value prop to dcc.Sliderto be able to fire callbacks from dragging and releasing the slider.

      Dash HTML Components

      Fixed

      • #169 - part of fixing dash import bug https://github.com/plotly/dash/issues/1143

      Dash Table

      Fixed

      • #854 - part of fixing dash import bug https://github.com/plotly/dash/issues/1143
      Source code(tar.gz)
      Source code(zip)
    • v1.18.1(Dec 9, 2020)

    • v1.18.0(Dec 7, 2020)

      Dash-Table

      Fixed

      • #844 Fix a bug where the table is using classes that are styled by Bootstrap

      Dash-Core-Components

      Updated

      Source code(tar.gz)
      Source code(zip)
    • v1.17.0(Oct 29, 2020)

      Dash and Dash-Renderer

      Changed

      • #1442 Update from React 16.13.0 to 16.14.0

      Fixed

      • #1434 Fix #1432 for Julia to import non-core component packages without possible errors.

      Changed

      • #1448 Provide a hint in the callback error when the user forgot to make app.callback(...) a decorator.

      Dash-Core-Components

      Added

      • #871 Add Julia syntax highlighting support for dcc.Markdown

      Fixed

      • #878
        • Fixed #751, a bug that causes dcc.Slider and dcc.RangerSlider tooltips to be visible even if the slider component isn't visible (e.g. overflow),

      Updated

      Dash-Table

      Fixed

      • #841
        • Fix prop-types regression causing console errors in browser devtools
        • Fix syntax highlighting regression for Markdown cells
      • #842 Fix a regression introduced with #722 causing the tooltips to be misaligned with respect to their parent cell and incompletely addressed in #817

      Added

      • #841 Add Julia syntax highlighting support for Markdown cells
      • #831 Add the tooltip_header prop and add nested prop use_with (with values: header, data, both) to the tooltip prop to configure header cell tooltips
      Source code(tar.gz)
      Source code(zip)
    • v1.16.3(Oct 7, 2020)

    • v1.16.2(Sep 25, 2020)

      Dash and Dash-Renderer

      Fixed

      • #1415 Fix a regression with some layouts callbacks involving dcc.Tabs, not yet loaded dash_table.DataTable and dcc.Graph to not be called
      • #1416 Make callback graph more robust for complex apps and some specific props (width in particular) that previously caused errors.
      Source code(tar.gz)
      Source code(zip)
    • v1.16.1(Sep 16, 2020)

      Dash and Dash-Renderer

      Changed

      • #1376 Extends the getTransform logic in the renderer to handle persistenceTransforms for both nested and non-nested persisted props. This was used to to fix dcc#700 in conjunction with dcc#854 by using persistenceTransforms to strip the time part of the datetime so that datepickers can persist when defined in callbacks.

      Fixed

      • #1408 Fixes a bug where the callback graph layout would reset whenever a callback fired, losing user-initiated layout changes (#1402) or creating a new force layout (#1401)

      Dash-Core-Components

      Fixed

      • #854 Used persistenceTransforms to strip the time part of the datetime in the persited props of DatePickerSingle (date) and DatePickerRange (end_date, start_date), fixing dcc#700.

      Added

      • #850 Add property prependData to Graph to support Plotly.prependTraces
        • refactored the existing extendTraces API to be a single mergeTraces API that can handle both prepend as well as extend.

      Updated

      Source code(tar.gz)
      Source code(zip)
    • v1.16.0(Sep 3, 2020)

      Dash and Dash-Renderer

      Added

      • #1371 You can now get CSP script-src hashes of all added inline scripts by calling app.csp_hashes() (both Dash internal inline scripts, and those added with app.clientside_callback) .

      Changed

      • #1385 Closes #1350 and fixes a previously undefined callback behavior when multiple elements are stacked on top of one another and their n_clicks props are used as inputs of the same callback. The callback will now trigger once with all the triggered n_clicks props changes.
      • #1179 New and improved callback graph in the debug menu. Now based on Cytoscape for much more interactivity, plus callback profiling including number of calls, fine-grained time information, bytes sent and received, and more. You can even add custom timing information on the server with callback_context.record_timing(name, seconds)

      Fixed

      • #1384 Fixed a bug introduced by #1180 breaking use of prevent_initial_call as a positional arg in callback definitions

      Dash-Core-Components

      Updated

      Source code(tar.gz)
      Source code(zip)
    • v1.15.0(Aug 25, 2020)

      Dash and Dash Renderer

      Added

      • #1355 Removed redundant log message and consolidated logger initialization. You can now control the log level - for example suppress informational messages from Dash with app.logger.setLevel(logging.WARNING).
      • #1253, #1377 Added experimental --jl-prefix option to dash-generate-components, optionally generates Julia version of components and corresponding Julia package

      Changed

      • #1180 and #1375 Input, Output, and State in callback definitions don't need to be in lists. You still need to provide Output items first, then Input items, then State, and the list form is still supported. In particular, if you want to return a single output item wrapped in a length-1 list, you should still wrap the Output in a list. This can be useful for procedurally-generated callbacks.
      • #1368 Updated pytest to v6.0.1. To avoid deprecation warnings, this also updated pytest-sugar to 0.9.4 and pytest-mock to 3.2.0. The pytest-mock update only effects python >= 3.0. Pytest-mock remains pinned at 2.0.0 for python == 2.7.

      Dash Core Components

      Added

      • #851 Add support for Dash.jl Julia built components
      • #840 Add styling properties to dcc.Loading component
        • parent_className: Add CSS class for the outermost dcc.Loading parent div DOM node
        • parent_style: Add CSS style property for the outermost dcc.Loading parent div DOM node
        • provides a workaround for the previous behaviour the of className property, which changed in #740. parent_className (or inline styles in parent_style) now allow CSS rules to be applied to the outermost dcc.Loading div, which is no longer covered by className on loading completion as of Dash Core Components >= 1.9.1 (Dash >= 1.11.0).

      Dash HTML Components

      Added

      • #165 Add support for Dash.jl Julia component generation.

      Dash Table

      Added

      • #820 Add support for Dash.jl Julia built components

      Fixed

      • #817 Fix a regression introduced with #722 causing the tooltips to be misaligned with respect to their parent cell
      • #818 Fix a regression causing copy/paste not to work when selecting a range of cells with Shift + mouse click
      • #819 Fix pagination page_current and page_count fields to accommodate larger numbers
      Source code(tar.gz)
      Source code(zip)
    • v1.14.0(Jul 28, 2020)

      Dash and Dash-Renderer

      Added

      • #1343 Add title parameter to set the document title. This is the recommended alternative to setting app.title or overriding the index HTML.
      • #1315 Add update_title parameter to set or disable the "Updating...." document title during updates. Closes #856 and #732

      Dash-Core-Components

      Dash-Table

      Added

      • #808Fix a regression introduced with #787 making it impossible to open markdown links in the current tab.
        • Adds a new markdown_options property that supports:
          • link_target nested prop with values _blank, _parent, _self, _top or an arbitrary string (default: _blank)
      Source code(tar.gz)
      Source code(zip)
    • v1.13.4(Jun 25, 2020)

    • v1.13.3(Jun 19, 2020)

    • v1.13.2(Jun 18, 2020)

      Dash and Dash-Renderer

      Fixed

      • #1305
        • Fix regression that causes crash when FLASK_ENV is modified during app execution
        • Fix regression that caused tests using _wait_for_callbacks to fail
      Source code(tar.gz)
      Source code(zip)
    • v1.13.1(Jun 18, 2020)

    • v1.13(Jun 17, 2020)

      Dash and Dash-Renderer

      Added

      • #1289 Supports DASH_PROXY env var to tell app.run_server to report the correct URL to view your app, when it's being proxied. Throws an error if the proxy is incompatible with the host and port you've given the server.
      • #1240 Adds callback_context to clientside callbacks (e.g. dash_clientside.callback_context.triggered). Supports triggered, inputs, inputs_list, states, and states_list, all of which closely resemble their serverside cousins.

      Changed

      • #1237 Closes #920: Converts hot reload fetch failures into a server status indicator showing whether the latest fetch succeeded or failed. Callback fetch failures still appear as errors but have a clearer message.
      • #1254 Modifies the callback chain implementation and improves performance for apps with a lot of components

      Fixed

      • #1255 Hard hot reload targets only the current window, not the top - so if your app is in an iframe you will only reload the app
      • #1249 Fixes #919 so dash.testing is compatible with more pytest plugins, particularly pytest-flake8 and pytest-black.
      • #1248 Fixes #1245, so you can use prop persistence with components that have dict IDs, ie for pattern-matching callbacks.
      • #1185 Sort asset directories, same as we sort files inside those directories. This way if you need your assets loaded in a certain order, you can add prefixes to subdirectory names and enforce that order.
      • #1288 Closes #1285: Debug=True should work in the main module.

      Dash-Table

      Added

      • #787 Add cell_selectable property to allow/disallow cell selection

      Changed

      • #787
        • Clicking on a link in a Markdown cell now requires a single click instead of two
        • Links in Markdown cells now open a new tab (target="_blank")

      Fixed

      • #785 Fix a bug where the table does not refresh correctly if a property was previously missing
      • #793
        • Fix a bug where headers aren't aligned with columns with fixed_rows #777
        • Fix a regression where headers don't scroll horizontally with fixed_rows #780
      Source code(tar.gz)
      Source code(zip)
    • v1.12(May 5, 2020)

      Dash and Dash-Renderer

      Added

      • #1228 Adds control over firing callbacks on page (or layout chunk) load. Individual callbacks can have their initial calls disabled in their definition @app.callback(..., prevent_initial_call=True) and similar for app.clientside_callback. The app-wide default can also be changed with app=Dash(prevent_initial_callbacks=True), then individual callbacks may disable this behavior.
      • #1201 New attribute app.validation_layout allows you to create a multi-page app without suppress_callback_exceptions=True or layout function tricks. Set this to a component layout containing the superset of all IDs on all pages in your app.
      • #1078 Permit usage of arbitrary file extensions for assets within component libraries

      Fixed

      • #1224 Fixes #1223, a very specific situation in which initial callbacks will not fire.
      • #1220 Fixes #1216, a set of related issues about pattern-matching callbacks with ALL wildcards in their Output which would fail if no components matched the pattern.
      • #1212 Fixes #1200 - prior to Dash 1.11, if none of the inputs to a callback were on the page, it was not an error. This was, and is now again, treated as though the callback raised PreventUpdate. The one exception to this is with pattern-matching callbacks, when every Input uses a multi-value wildcard (ALL or ALLSMALLER), and every Output is on the page. In that case the callback fires as usual.
      • #1201 Fixes #1193 - prior to Dash 1.11, you could use flask.has_request_context() == False inside an app.layout function to provide a special layout containing all IDs for validation purposes in a multi-page app. Dash 1.11 broke this when we moved most of this validation into the renderer. This change makes it work again.

      Dash-Core-Components

      Changed

      • #793 Added title key (i.e. HTML title attribute) to option dicts in dcc.Dropdown options[] list property.

      Fixed

      • #792 Improved the robustness of dcc.Store components, fixing #456 whereby persistent storage could become corrupted, and fixing lifecycle issues that prevented adding Store components to the page after initial loading.
      • #790 Fixed bug where the dcc.Dropdown dropdown was hidden by the dash_table.DataTable fixed rows and columns.

      Updated

      • #800
        • Upgraded plotly.js to 1.54.1
        • Feature release of Plotly.js 1.54.0 which:
          • Introduces new drag modes "drawline", "drawrect", "drawcircle", "drawopenpath", "drawclosedpath", adds optional modebar buttons for drawing & removing new shapes inside cartesian subplots, adds newshape and activeshape attributes to layout, and adds editable and fillrule attributes to layout.shapes#4775
        • Add angle and allowoverlap attributes to marker of scattermapbox traces#4575, #4794
        • Also contains various other fixes

      Dash-Table

      Added

      • #729 Improve conditional styling
        • style_data_conditional: Add support for row_index and column_id array of values
        • style_header_conditional: Add support for header_index and column_id array of values
        • style_filter_conditional: Add support for column_id array of values
        • style_cell_conditional: Add support for column_id array of values
        • style_data_conditional: Add new conditions state: 'active'|'selected' to customize selected and active cell styles

      Fixed

      • #722 Fix a bug where row height is misaligned when using fixed_columns and/or fixed_rows
      • #728 Fix copy/paste on readonly cells
      • #724 Fix active_cell docstring: clarify optional nature of the row_id nested prop
      • #732 Fix a bug where opening a dropdown scrolled the table down its last row
      • #731 Fix a bug where data=None and columns=None caused the table to throw an error
      • #766 Sanitize table id for stylesheet injection (fixes usage with Pattern-Matching callbacks)

      Changed

      • #758 Improve error message for invalid filter queries
      Source code(tar.gz)
      Source code(zip)
    • v1.11.0(Apr 10, 2020)

      Dash and Dash-Renderer

      Added

      • #1103 Pattern-matching IDs and callbacks. Component IDs can be dictionaries, and callbacks can reference patterns of components, using three different wildcards: ALL, MATCH, and ALLSMALLER, available from dash.dependencies. This lets you create components on demand, and have callbacks respond to any and all of them. To help with this, dash.callback_context gets three new entries: outputs_list, inputs_list, and states_list, which contain all the ids, properties, and except for the outputs, the property values from all matched components.
      • #1103 dash.testing option --pause: after opening the dash app in a test, will invoke pdb for live debugging of both Javascript and Python. Use with a single test case like pytest -k cbwc001 --pause.

      Changed

      • #1103 Multiple changes to the callback pipeline:
        • dash.callback_context.triggered now does NOT reflect any initial values, and DOES reflect EVERY value which has been changed either by activity in the app or as a result of a previous callback. That means that the initial call of a callback with no prerequisite callbacks will list nothing as triggering. For backward compatibility, we continue to provide a length-1 list for triggered, but its id and property are blank strings, and bool(triggered) is False.
        • A user interaction which returns the same property value as was previously present will not trigger the component to re-render, nor trigger callbacks using that property as an input.
        • Callback validation is now mostly done in the browser, rather than in Python. A few things - mostly type validation, like ensuring IDs are strings or dicts and properties are strings - are still done in Python, but most others, like ensuring outputs are unique, inputs and outputs don't overlap, and (if desired) that IDs are present in the layout, are done in the browser. This means you can define callbacks BEFORE the layout and still validate IDs to the layout; and while developing an app, most errors in callback definitions will not halt the app.

      Fixed

      • #1103 Fixed multiple bugs with chained callbacks either not triggering, inconsistently triggering, or triggering multiple times. This includes: #635, #832, #1053, #1071, and #1084. Also fixed #1105: async components that aren't rendered by the page (for example in a background Tab) would block the app from executing callbacks.

      Dash-Core-Components

      Changed

      • #740 Keep components that are loading in the DOM, but not visible, as opposed to removing them entirely. This will ensure that the size of the component's container does not shrink or expand when the component goes into the loading state.

      Fixed

      • #740 Fixed bug in which mapbox uirevision was not behaving when inside a dcc.Loading component
      Source code(tar.gz)
      Source code(zip)
    • v1.10.0(Apr 1, 2020)

      Dash and Dash-Renderer

      Added

      • #1134 Allow dash.run_server() host and port parameters to be set with environment variables HOST & PORT, respectively

      Changed

      • #1145 Update from React 16.8.6 to 16.13.0

      Fixed

      Dash-Core-Components

      Changed

      • #766 Update from React 16.8.6 to 16.13.0
      • #768 Added title property to dcc.Link
      • #776 Update dcc.Link to set href as children if children not defined. Makes href a required prop as well.
      • #767 Updated dcc.Link to respond to click modifiers, and added a target prop.
      • #774 Fixed dcc.Location firing callbacks for wrong property.
      • 772 Modified dcc.Link to work with absolute paths if refresh=True.

      Updated

      Dash-Html-Components

      Updated

      • Update generated props
      • Update generated R artifacts

      Dash-Table

      Changed

      • #713 Update from React 16.8.6 to 16.13.0
      Source code(tar.gz)
      Source code(zip)
    • v1.9.0(Feb 4, 2020)

      Dash and Dash-Renderer

      Fixed

      • #1080 Handle case where dash fails to load when used inside an iframe with a sandbox attribute that only has allow-scripts

      Dash-Core-Components

      Changed

      • #743 Location component now emits an event on URL path update from Link component
      • #739 Async Slider and RangeSlider
      • #729 Handle case where dcc fails to load when used inside an iframe with a sandbox attribute that only has allow-scripts

      Fixed

      • #730 Fixed bug in which input components with type number did not correctly update their values.
      • #731 Fixed bug where non-clearable dropdowns could still be cleared by typing backspace

      Updated

      Source code(tar.gz)
      Source code(zip)
    • v1.8.0(Jan 14, 2020)

      Dash and Dash-Renderer

      Added

      • #1073 Two new functions to simplify usage handling URLs and pathnames: app.get_relative_path & app.trim_relative_path. These functions are particularly useful for apps deployed on Dash Enterprise where the apps served under a URL prefix (the app name) which is unlike apps served on localhost:8050.
        • app.get_relative_path returns a path with the config setting requests_pathname_prefix prefixed. Use app.get_relative_path anywhere you would provide a relative pathname, like dcc.Link(href=app.relative_path('/page-2')) or even as an alternative to app.get_asset_url with e.g. html.Img(src=app.get_relative_path('/assets/logo.png')).
        • app.trim_relative_path a path with requests_pathname_prefix and leading & trailing slashes stripped from it. Use this function in callbacks that deal with dcc.Location pathname routing. Example usage:
        app.layout = html.Div([
            dcc.Location(id='url'),
            html.Div(id='content')
        ])
        @app.callback(Output('content', 'children'), [Input('url', 'pathname')])
        def display_content(path):
            page_name = app.strip_relative_path(path)
            if not page_name:  # None or ''
                return html.Div([
                    html.Img(src=app.get_relative_path('/assets/logo.png')),
                    dcc.Link(href=app.get_relative_path('/page-1')),
                    dcc.Link(href=app.get_relative_path('/page-2')),
                ])
            elif page_name == 'page-1':
                return chapters.page_1
            if page_name == "page-2":
                return chapters.page_2
        

      Changed

      • #1035 Simplify our build process.
      • #1074 Error messages when providing an incorrect property to a component have been improved: they now specify the component type, library, version, and ID (if available).

      Fixed

      • #1037 Fix no_update test to allow copies, such as those stored and retrieved from a cache.

      Dash-Core-Components

      Added

      • #711 Added support for dcc.Link (dccLink) and nested dcc.Markdown (dccMarkdown) react components inside of dcc.Markdown
      • #706
        • Added new responsive property that overrides the underlying Plotly.js graph responsiveness from Dash-land
        • Added responsiveness on graph parent element resize (previously only worked on window.resize)
        • Added new dash-graph--pending class to dcc.Graph, present while resizing, (re-)rendering, loading

      Changed

      • #723 Changed npm package content to allow source code inclusion from other projects
      • #725 Improve async graph performance by parallelizing resource fetching instead of fetching sequentially
      • #720 highlight.js is now bundled into the package, and no longer sets the window.hljs variable. Similarly to how plotly.js is handled, it is overridden by a user-provided version if one exists.

      Updated

      Dash-Table

      Added

      • #606 Add markdown support for table cells. Cells will be rendered as markdown if the column presentation is specified as markdown.
        • Add highlight.js for syntax highlighting. If window.hljs is specified, that will be used for highlighting instead.

      Fixed

      • #670 Fix a bug where derived_filter_query_structure was not getting updated properly
      • #677 Fix a bug where the table fails to load when used inside an iframe with a sandbox attribute that only has allow-scripts
      • #665 Fix a bug in Firefox where the dropdown cells height is incorrect
      Source code(tar.gz)
      Source code(zip)
    • v1.7.0(Nov 27, 2019)

      Dash and Dash-Renderer

      Added

      • #967 Add support for defining clientside JavaScript callbacks via inline strings.
      • #1020 Allow visit_and_snapshot API in dash.testing.browser to stay on the page so you can run other checks.

      Changed

      • #1026 Better error message when you forget to wrap multiple children in an array, and they get passed to other props.

      Fixed

      • #1018 Fix the dash.testing stop API with process application runner in Python2. Use kill() instead of communicate() to avoid hanging.
      • #1027 Fix bug with renderer callback lock never resolving with non-rendered async component using the asyncDecorator

      Dash-Core-Components

      Updated

      • Upgraded plotly.js to 1.51.2 #708
        • Patch release 1.51.2 containing several bug fixes.

      Changed

      • #695 Improvements to Slider and RangeSlider
        • Marks outside of the range specified by min and max are now omitted when the slider renders.
        • Padding is now dependent on the orientation (vertical or horizontal), and whether or not tooltips are always displayed.
        • The whitespace is now preserved for marks labels.

      Added

      • #695 Added new property verticalHeight to Slider and RangeSlider, to allow the user to specify the height (in px) of vertical sliders. This defaults to 400.
      Source code(tar.gz)
      Source code(zip)
    • v1.6.1(Nov 14, 2019)

      Dash

      Fixed

      • #1006 Fix IE11 / ES5 compatibility and validation issues
      • #1006 Fix bug with renderer wrapper component TreeContainer to prevent useless re-renders
      • #1001
        • Fix and improve the clear_input() API in dash.testing, so it's more robust handling react input.
        • make the percy_snapshot() API more robust, and the timeout of wait_for_callbacks (if set to True) will not fail the snapshot execution, but logged as potential error.

      Dash-Core-Components

      Fixed

      • #696 Fix IE11 compatibility issues and ES5 compatibility and validation

      Changed

      • #687 Use start_date, min_date_allowed, end_date, or max_date_allowed for the initial visible month if the value of the parameter initial_visible_month is not supplied.

      Dash-Html-Components

      Fixed

      • #143 Fix IE11 compatibility issues and ES5 compatibility and validation

      Dash-Table

      Fixed

      • #637 Fix multiple issues
        • Fix IE11 compatibility issues and add ES5 compatibility and validation
        • Fix a bug with loading_state being handled incorrectly, causing the table to steal focus
      Source code(tar.gz)
      Source code(zip)
    • v1.6.0(Nov 4, 2019)

      Dash

      Fixed

      • #999 Fix fingerprint for component suites with metadata in version.
      • #983 Fix the assets loading issues when dashR application runner is handling with an app defined by string chunk.

      Dash-Core-Components

      Added

      • #692 Async DatePickerSingle, DatePickerRange, Dropdown, Markdown, Upload components
      Source code(tar.gz)
      Source code(zip)
    • v1.5.1(Oct 30, 2019)

      Dash and Dash-Renderer

      Fixed

      • #987 Fix cache string handling for component suites with nested folders in their packages.
      • #986 Fix a bug with evaluation of _force_eager_loading when application is loaded with gunicorn
      Source code(tar.gz)
      Source code(zip)
    • v1.5.0(Oct 29, 2019)

      Dash and Dash-Renderer

      Added

      • #964 Adds support for preventing updates in clientside functions.
        • Reject all updates with throw window.dash_clientside.PreventUpdate;
        • Reject a single output by returning window.dash_clientside.no_update
      • #899 Add support for async dependencies and components
      • #973 Adds support for resource caching and adds a fallback caching mechanism through etag

      Dash-Core-Components

      Added

      • #616 Async Graph and Plotly.js

      Dash-Table

      Changed

      • #554 Async loading of xlsx library on export
      Source code(tar.gz)
      Source code(zip)
    • v1.4.1(Oct 17, 2019)

      Dash and Dash-Renderer

      Fixed

      • #969 Fix warnings emitted by react devtools coming from our own devtools components.

      Dash-Core-Components

      Updated

      • Upgraded plotly.js to 1.50.1 #681
        • Patch release 1.50.1 containing several bug fixes.

      Fixed

      • #681 Fix a bug with the dcc.Graph component logging errors in certain circumstances when nested inside a dcc.Loading component

      Dash-Table

      Fixed

      • #618 Fix a bug with keyboard navigation not working correctly in certain circumstances when the table contains readonly columns.
      • #206 Fix a bug with copy/paste to and from column filters not working.
      • #561 Fix an incorrect React PureComponent usage causing warnings in DevTools.
      • #611 Fix a bug with copy/paste causing hidden columns to be removed from the table
      Source code(tar.gz)
      Source code(zip)
    • v1.4.0(Oct 8, 2019)

      Dash and Dash-Renderer

      Added

      • #948 Support setting working directory for R apps run using the dashr fixture, primarily useful for tests with assets. dashr.start_server supports a cwd argument to set an explicit working directory, and has smarter defaults when it's omitted: if app is a path to an R script, uses the directory of that path; if app is a string, uses the directory the test file itself is in.
      • #944
        • Relevant dash.testing methods can now be called with either an element or a CSS selector: select_dcc_dropdown, multiple_click, clear_input, zoom_in_graph_by_ratio, click_at_coord_fractions.
        • Three new dash.testing methods: clear_local_storage, clear_session_storage, and clear_storage (to clear both together)
      • #937 dash.testing adds two APIs zoom_in_graph_by_ratio and click_at_coord_fractions about advanced interactions using mouse ActionChain
      • #938 Add debugging traces to dash backend about serving component suites, to verify the installed packages whenever in doubt.

      Fixed

      • #944 Fix a bug with persistence being toggled on/off on an existing component.

      Dash-Table

      Added

      #546

      • New prop export_columns that takes values all or visible (default). This prop controls the columns used during export

      #597

      • Add is blank unary operator. Returns true for undefined, null and ''.

      #299

      • New prop page_count that sets the maximum number of pages that are accessible via the pagination menu when using backend pagination.

      Changed

      #598

      • Allow values with whitespaces in column filters

      #580

      • Change pagination menu button UI to use arrow icons instead of plain buttons
      • Move pagination menu to bottom-right of table
      • Include go-to-first and go-to-last buttons
      • Include current-page and total-pages display in pagination menu
      • Include input box for user to navigate directly to a page

      Fixed

      #460

      • The datestartswith relational operator now supports number comparison
      • Fixed a bug where the implicit operator for columns was equal instead of the expected default for the column type

      #546

      • Visible columns are used correctly for both header and data rows

      #563

      • Fixed a bug where any string beginning with a relational operator was being interpreted as that operator being applied to the rest of the string (e.g., "lens" was interpreted as "<=ns")

      #591

      • Fixed row and column selection when multiple tables are present

      #600

      • Fixed reconciliation when validation default value is 0 (number)
      • Apply reconciliation value when deleting cells, if possible

      Dash-Core-Components

      Added

      • Added search_value prop to Dropdown, for server-side options loading/filtering. #660

      Updated

      • Upgraded plotly.js to 1.50.0 #675
        • Feature release 1.50.0 which contains:
          • A new treemap trace type for display of hierarchical data.
          • texttemplate support for all traces with on-graph text, and custom date formatting for templated on-graph and hover text.
          • Transitions (animation) for bar charts.
          • Numerous other performance improvements, features, and bug fixes.
        • Patch release 1.49.5 containing several bug fixes.
      Source code(tar.gz)
      Source code(zip)
    • Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required.

      Dash Dash is the most downloaded, trusted Python framework for building ML & data science web apps. Built on top of Plotly.js, React and Flask, Dash t

      Plotly 14k Feb 18, 2021
      Visual Python is a GUI-based Python code generator, developed on the Jupyter Notebook environment as an extension.

      Visual Python is a GUI-based Python code generator, developed on the Jupyter Notebook environment as an extension.

      Visual Python 371 Nov 22, 2021
      IPython/Jupyter notebook module for Vega and Vega-Lite

      IPython Vega IPython/Jupyter notebook module for Vega 5, and Vega-Lite 4. Notebooks with embedded visualizations can be viewed on GitHub and nbviewer.

      Vega 315 Nov 24, 2021
      Drag’n’drop Pivot Tables and Charts for Jupyter/IPython Notebook, care of PivotTable.js

      pivottablejs: the Python module Drag’n’drop Pivot Tables and Charts for Jupyter/IPython Notebook, care of PivotTable.js Installation pip install pivot

      Nicolas Kruchten 452 Nov 15, 2021
      IPython/Jupyter notebook module for Vega and Vega-Lite

      IPython Vega IPython/Jupyter notebook module for Vega 5, and Vega-Lite 4. Notebooks with embedded visualizations can be viewed on GitHub and nbviewer.

      Vega 294 Feb 12, 2021
      Drag’n’drop Pivot Tables and Charts for Jupyter/IPython Notebook, care of PivotTable.js

      pivottablejs: the Python module Drag’n’drop Pivot Tables and Charts for Jupyter/IPython Notebook, care of PivotTable.js Installation pip install pivot

      Nicolas Kruchten 419 Feb 11, 2021
      Plotting library for IPython/Jupyter notebooks

      bqplot 2-D plotting library for Project Jupyter Introduction bqplot is a 2-D visualization system for Jupyter, based on the constructs of the Grammar

      null 3.2k Dec 2, 2021
      An interactive GUI for WhiteboxTools in a Jupyter-based environment

      whiteboxgui An interactive GUI for WhiteboxTools in a Jupyter-based environment GitHub repo: https://github.com/giswqs/whiteboxgui Documentation: http

      Qiusheng Wu 86 Nov 14, 2021
      Plotting library for IPython/Jupyter notebooks

      bqplot 2-D plotting library for Project Jupyter Introduction bqplot is a 2-D visualization system for Jupyter, based on the constructs of the Grammar

      null 3.2k Nov 24, 2021
      A Jupyter - Three.js bridge

      pythreejs A Python / ThreeJS bridge utilizing the Jupyter widget infrastructure. Getting Started Installation Using pip: pip install pythreejs And the

      Jupyter Widgets 773 Nov 20, 2021
      Plotting library for IPython/Jupyter notebooks

      bqplot 2-D plotting library for Project Jupyter Introduction bqplot is a 2-D visualization system for Jupyter, based on the constructs of the Grammar

      null 3k Feb 18, 2021
      A Jupyter - Three.js bridge

      pythreejs A Python / ThreeJS bridge utilizing the Jupyter widget infrastructure. Getting Started Installation Using pip: pip install pythreejs And the

      Jupyter Widgets 700 Feb 17, 2021
      Render Jupyter notebook in the terminal

      jut - JUpyter notebook Terminal viewer. The command line tool view the IPython/Jupyter notebook in the terminal. Install pip install jut Usage $jut --

      Kracekumar 136 Nov 25, 2021
      A Jupyter - Leaflet.js bridge

      ipyleaflet A Jupyter / Leaflet bridge enabling interactive maps in the Jupyter notebook. Usage Selecting a basemap for a leaflet map: Loading a geojso

      Jupyter Widgets 1.2k Nov 23, 2021
      Draw datasets from within Jupyter.

      drawdata This small python app allows you to draw a dataset in a jupyter notebook. This should be very useful when teaching machine learning algorithm

      vincent d warmerdam 466 Nov 24, 2021
      BrowZen correlates your emotional states with the web sites you visit to give you actionable insights about how you spend your time browsing the web.

      BrowZen BrowZen correlates your emotional states with the web sites you visit to give you actionable insights about how you spend your time browsing t

      Nick Bild 32 Jul 24, 2021
      Easily convert matplotlib plots from Python into interactive Leaflet web maps.

      mplleaflet mplleaflet is a Python library that converts a matplotlib plot into a webpage containing a pannable, zoomable Leaflet map. It can also embe

      Jacob Wasserman 479 Nov 24, 2021
      This is a web application to visualize various famous technical indicators and stocks tickers from user

      Visualizing Technical Indicators Using Python and Plotly. Currently facing issues hosting the application on heroku. As soon as I am able to I'll like

      null 2 Nov 25, 2021
      Show Data: Show your dataset in web browser!

      Show Data is to generate html tables for large scale image dataset, especially for the dataset in remote server. It provides some useful commond line tools and fully customizeble API reference to generate html table different tasks.

      Dechao Meng 29 Nov 23, 2021