{"id":20879146,"url":"https://github.com/vk/dash-express-components","last_synced_at":"2025-05-12T16:31:19.629Z","repository":{"id":38415757,"uuid":"441935229","full_name":"VK/dash-express-components","owner":"VK","description":"Widgets to bring Plotly Express style plots to Dash","archived":false,"fork":false,"pushed_at":"2025-05-09T20:10:11.000Z","size":12942,"stargazers_count":9,"open_issues_count":69,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-09T21:24:41.069Z","etag":null,"topics":["dash","plotly-dash","python"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VK.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-12-26T16:27:19.000Z","updated_at":"2025-04-03T17:00:59.000Z","dependencies_parsed_at":"2023-11-08T11:29:19.570Z","dependency_job_id":"4a86e28d-792e-4fe4-9333-8be2f7bc32a3","html_url":"https://github.com/VK/dash-express-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VK%2Fdash-express-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VK%2Fdash-express-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VK%2Fdash-express-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VK%2Fdash-express-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VK","download_url":"https://codeload.github.com/VK/dash-express-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253776811,"owners_count":21962562,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dash","plotly-dash","python"],"created_at":"2024-11-18T07:15:25.892Z","updated_at":"2025-05-12T16:31:18.995Z","avatar_url":"https://github.com/VK.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dash Express Components\n![Publish release](https://github.com/VK/dash-express-components/workflows/Publish%20release/badge.svg)\n[![PyPI](https://img.shields.io/pypi/v/dash-express-components?logo=pypi)](https://pypi.org/project/dash-express-components)\n[![npm](https://img.shields.io/npm/v/dash_express_components.svg?logo=npm)](https://www.npmjs.com/package/dash_express_components)\n[![Documentation](https://github.com/VK/dash-express-components/workflows/Documentation/badge.svg)](https://vk.github.io/dash-express-components)\n[![Test](https://github.com/VK/dash-express-components/actions/workflows/test.yml/badge.svg)](https://github.com/VK/dash-express-components/actions/workflows/test.yml)\n[![codecov](https://codecov.io/gh/VK/dash-express-components/branch/main/graph/badge.svg?token=13XCRAQY0D)](https://codecov.io/gh/VK/dash-express-components)\n\n### Components to bring [Plotly Express](https://plotly.com/python/plotly-express/) style plots to [Dash](https://dash.plotly.com/):\n\n* [**dxc.Filter**](https://vk.github.io/dash-express-components/Filter.html) to define  filter configurations for numerical, categorical or temporal columns.\n* [**dxc.Transform**](https://vk.github.io/dash-express-components/Transform.html) to specify a series of data transformations like melt, group by or aggregate.\n* [**dxc.Plotter**](https://vk.github.io/dash-express-components/Plotter.html) to set a plot layout like scatter, box, image or table.\n* [**dxc.Configurator**](https://vk.github.io/dash-express-components/Configurator.html) is a component that combines\n[**dxc.Filter**](https://vk.github.io/dash-express-components/Filter.html),\n[**dxc.Transform**](https://vk.github.io/dash-express-components/Transform.html) and\n[**dxc.Plotter**](https://vk.github.io/dash-express-components/Plotter.html)\nto make the components even easier to use, since the interaction between them is handled automatically.\n* [**dxc.Graph**](https://vk.github.io/dash-express-components/Graph.html) uses [dcc.Graph](https://dash.plotly.com/dash-core-components/graph) and [dash_table.DataTable](https://dash.plotly.com/datatable) to show a plot or a table based on the plot configuration.\n\n\n\n### A typical data flow looks like this:\n\n\u003cimg align=\"right\" src=\"https://raw.githubusercontent.com/VK/dash-express-components/main/.media/dataflow.png\" width=\"370px\"\u003e\n\nFirst, the metadata is extracted from the dataframe ***df*** with **dxc.get_meta(*df*)**. This ***meta*** json is needed for\n[**dxc.Filter**](https://vk.github.io/dash-express-components/Filter.html),\n[**dxc.Transform**](https://vk.github.io/dash-express-components/Transform.html) or  [**dxc.Plotter**](https://vk.github.io/dash-express-components/Plotter.html) to show all options without additional queries to the dataframe. As a result, the components react quite quickly.\n\nSince the metadata can be changed by filter or transform operations, and we don't want additional server calls, the changes are directly computed in the web components. You can access the metadata after transformations via the ***meta_out*** property of [**dxc.Filter**](https://vk.github.io/dash-express-components/Filter.html) and [**dxc.Transform**](https://vk.github.io/dash-express-components/Transform.html). \n\nA combined ***config*** is needed to compute the final plot with **dxc.get_plot(*df*, *config*)**. You can combine the configurations of each component yourself or use the [**dxc.Configurator**](https://vk.github.io/dash-express-components/Configurator.html) to get a combined configuration like: \n\n\u003cimg align=\"right\" src=\"https://raw.githubusercontent.com/VK/dash-express-components/main/.media/box.png\" width=\"370px\"\u003e\n\n```python\n{\n    \"filter\": [\n        {\n            \"col\": \"continent\",\n            \"type\": \"isnotin\",\n            \"value\": [\"Oceania\"]\n        }\n    ],    \n    \"transform\": [\n        {\n            \"type\": \"aggr\",\n            \"groupby\": [\n                \"country\",\n                \"continent\"\n            ],\n            \"cols\": [\"gdpPercap\"],\n            \"types\": [\"median\"]\n        }\n    ],\n    \"plot\": {\n        \"type\": \"box\",\n        \"params\": {\n            \"x\": \"continent\",\n            \"y\": \"gdpPercap_median\",\n            \"color\": \"continent\",\n            \"aggr\": [\"mean\"],\n            \"reversed_x\": True\n        }\n    }\n}\n```\n\nAn example with the gapminder dataset and [**dash-lumino-components**](https://github.com/VK/dash-lumino-components) for the MDI layout.\n![example](https://raw.githubusercontent.com/VK/dash-express-components/main/examples/lumino/recording.gif)  \n \n\n\n## Try it\nInstall dependencies\n```console\n$ pip install dash-express-components\n```\nand start with quickly editable graphs:\n```python\nimport dash_express_components as dxc\napp.layout = html.Div([\n\n    # add a plot dxc.Configurator\n    html.Div([\n        dxc.Configurator(\n            id=\"plotConfig\",\n            meta=meta,\n        ),\n    ], style={\"width\": \"500px\", \"float\": \"left\"}),\n\n    # add an editable dxc.Graph \n    html.Div([\n        dxc.Graph(id=\"fig\",\n                  meta=meta,\n                  style={\"height\": \"100%\", \"width\": \"100%\"}\n                 )],\n        style={\"width\": \"calc(100% - 500px)\", \"height\": \"calc(100vh - 30px)\",\n               \"display\": \"inline-block\", \"float\": \"left\"}\n    )\n])\n```\n\n## Develop\n1. Install npm packages\n    ```console\n    $ npm install\n    ```\n    \n2. Create a virtual env and activate.\n    ```console\n    $ virtualenv venv\n    $ . venv/bin/activate\n    ```\n    _Note: venv\\Scripts\\activate for windows_\n\n3. Install python packages required to build components.\n    ```console\n    $ pip install -r requirements.txt\n    ```\n\n4. Build your code\n    ```console\n    $ npm run build\n    ```\n\n5. Run the example\n    ```console\n    $ python usage.py\n    ```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvk%2Fdash-express-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvk%2Fdash-express-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvk%2Fdash-express-components/lists"}