{"id":13398292,"url":"https://github.com/stitchfix/pyxley","last_synced_at":"2025-04-14T00:58:49.857Z","repository":{"id":37752158,"uuid":"37883782","full_name":"stitchfix/pyxley","owner":"stitchfix","description":"Python helpers for building dashboards using Flask and React","archived":false,"fork":false,"pushed_at":"2018-03-06T21:13:30.000Z","size":5687,"stargazers_count":2270,"open_issues_count":27,"forks_count":259,"subscribers_count":275,"default_branch":"master","last_synced_at":"2025-04-14T00:58:27.052Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stitchfix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-22T22:23:26.000Z","updated_at":"2025-04-09T05:27:01.000Z","dependencies_parsed_at":"2022-07-08T04:54:42.236Z","dependency_job_id":null,"html_url":"https://github.com/stitchfix/pyxley","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/stitchfix%2Fpyxley","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stitchfix%2Fpyxley/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stitchfix%2Fpyxley/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stitchfix%2Fpyxley/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stitchfix","download_url":"https://codeload.github.com/stitchfix/pyxley/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248804790,"owners_count":21164132,"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":[],"created_at":"2024-07-30T19:00:22.028Z","updated_at":"2025-04-14T00:58:49.840Z","avatar_url":"https://github.com/stitchfix.png","language":"JavaScript","readme":"# Pyxley\n\nThe Pyxley python library makes use of the [pyxleyJS](https://github.com/stitchfix/pyxleyJS) React components to create Flask-based web applications. Through the use of the PyReact library, we can use Jinja templating to construct and transform a single React component. The specific UI components are passed as props to the parent component. A simpler interface is provided through the use of specific wrappers for each of the component types.\n\n\u003cimg src=\"http://multithreaded.stitchfix.com/assets/images/blog/pyxley_examples_grid.png\"\u003e\n\nAn example of the Jinja template for a single React component is presented below.\n```python\n    _react = (\n    \"\"\"\n    var Component = require(\"{{path}}\").{{name}};\n    {{vars}}\n    React.render(\n        \u003cComponent\n        {{props}} /\u003e,\n        document.getElementById(\"{{id}}\")\n    );\n    \"\"\")\n```\n\nBy constructing the template in this way, the developer can easily integrate a custom React component. The only requirements are the props, elementId, and location of the React component.\n\n## Documentation and Testing\n### Documentation\nAvailable at [readthedocs](http://pyxley.readthedocs.org/)\n\n### Testing\nComing Soon!\n\n## Python versions\nCurrently supporting Python 2 and 3.\n\n## Installation\nInstall via pip\n```\npip install pyxley\n```\n\n## metricsgraphics.js Example\nAn example flask app has been included. It demonstrates how to add a filter and several charts.\n\n\n## Filters \u0026 Charts\nEach Filter and Chart inherits from the base UIComponent class. Wrappers have been written to provide a clearer interface. An example of a “SelectButton” is provided below. The user only specifies the options, while the type is set by the implementation.\n\n```python\nclass SelectButton(Filter):\n    \"\"\"\n    \"\"\"\n    def __init__(self, label, items, filter_id, default):\n        opts = {\n            \"label\": label,\n            \"items\": items,\n            \"alias\": filter_id,\n            \"default\": default\n        }\n        super(SelectButton, self).__init__(\"SelectButton\", opts, None)\n```\n\n## UILayout\nThe UILayout class is designed to integrate the filters and charts with the Flask app. It collects the UIComponents and registers the relevant urls with the app. Within this class, the developer must specify the React layout component, the location of the source jsx file, and the elementid for which the component will be mounted.\n\n## Pandas Integration\nThis library is built with the pandas dataframe in mind. That is, we expect the data to be some sort of structured data that’s easy to filter and easy to plot. Each Javascript charting library has it’s own expected format for the data which makes integration with python challenging. Included in this library are several helper functions that format the data in the way the Javascript libraries are expecting.\n\n\n\n","funding_links":[],"categories":["JavaScript","Python","Dasboard + Plugin","Charts and Dashboards"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstitchfix%2Fpyxley","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstitchfix%2Fpyxley","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstitchfix%2Fpyxley/lists"}