Saravanan666/pypi-org huggingface dataset:
Package: dash-qr-manager
Dash QR manger is a wrapper aroundreact-google-qrcodeandreact-qr-reader.Installationpipinstalldash-qr-managerUsageCreating QR codeimportdash_qr_managerasdqmimportdashimportdash_html_componentsashtmlapp=dash.Dash(__name__)app.layout=html.Div(children=[dqm.DashQrGenerator(id='qr-code',data='http://example.com/',framed=True,)])if__name__=='__main__':app.run_server(debug=True)Reading QR codeimportdash_qr_managerasdqmimportdashfromdash.dependenciesimportInput,Outputimportdash_html_componentsashtmlapp=dash.Dash(__name__)app.layout=html.Div(children=[dqm.DashQrReader(id='qr-code-reader',style={'width':'50%'}),html.Div(id='qr-code-data')])@app.callback(Output('qr-code-data','children'),Input('qr-code-reader','result'))defcode(qr_code_data):returnqr_code_dataif__name__=='__main__':app.run_server(debug=True)DocumentationDashQrGeneratorKeyword arguments:

- id (string; optional):
    The ID used to identify this component in Dash callbacks.

- data (string; optional):
    The data to encode.

- framed (boolean; optional):
    Adds a frame to the image.

- size (number; optional):
    Image size in pixels (width x height). Min value: 30, Max value:
    547.

- style (dict; optional):
    The style of the QR code.

for more information: https://www.npmjs.com/package/react-google-qrcodeDashQrReaderKeyword arguments:

- id (string; optional):
    The ID used to identify this component in Dash callbacks.

- className (string; optional):
    ClassName for the container element.

- containerStyle (dict; optional):
    Style object for the container element.

- result (string; optional):
    decoded data.

- scanDelay (number; optional):
    The scan period for the QR hook.

- style (dict; optional):
    The style of the QR code.

- videoContainerStyle (dict; optional):
    Style object for the video container element.

- videoId (string; optional):
    The ID for the video element.

- videoStyle (dict; optional):
    Style object for the video element.

for more information: https://www.npmjs.com/package/react-qr-reader
Package: dash-react-table
dash-react-tableDash component for react-tabledash-react-table provides a lightweight table component built on top ofreact-table.Note: This above link will take you to version 6 which is the one I used for this component (v6.8.6 to be exact)Installationdash-react-tableis hosted on PyPI, and can be installed by
runningpip install dash-react-tableUsageimportdashimportdash_html_componentsashtmlimportpandasaspdfromdash_react_tableimportDashReactTabledf=pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')data=df.to_json(orient='records')columns=[{'Header':i,'accessor':i}foriindf.columns]app.layout=html.Div([DashReactTable(id='table',data=data,columns=columns)])if__name__=='__main__':app.run_server(debug=True)DashReactTable PropertiesAttributeDescriptionTypeDefault valueidOptional identifier used to reference component in callbacksstringdataAn array of datalist of dict where each dict corresponds to a row of datacolumnsAn array of column attributeslist of dict which can contain the followings keys: Header(string), accessor(string), sortable(boolean), filterable(boolean), show(boolean), width(int), minWidth(int), maxWidth(int), className(string), style(string), headerClassName(string), headerStyle(string)showPaginationTurn on paginationbooleanfalseshowPaginationTopPut pagination on topbooleanfalseshowPaginationBottomPut pagination on topbooleantrueshowPageSizeOptionsProvide options for paginationbooleantruepageSizeOptionsDefine the size options for paginationlist of int[5, 10, 20, 25, 50, 100]defaultPageSizeDefault page sizeint20minRowsControls the minimum number of rows to displayintsortableAllow columns to be sortedbooleantrueresizableAllow columns to be resizablebooleantruefilterableAllow columns to be filterable. The component has a custom filter which performs a case/order insensitive filter.booleanfalseclassNameAdd classname to react-table. The main use case for this is to add "-striped" and/or "-highlight"stringstyleinline table stylesdictconditionalFormattingCustom conditional color formatting. Currently only supportsd3.scaleThreshold.dict with contains the following keys: domain(list of int), range(list of dict styles), ignore(list of string)Additonal notes:All column properties can override table level propertiesTo use conditional formatting you must have N + 1 range values for N domain values. Range values must be camelcased styles.To make a scrolling table with fixed headers, be sure to add a fixed height to the table's style property.
Package: dash-recording-components
OverviewA Dash component for recording audio. The component is built usingmicrophone-stream. The component is a work in progress and is not yet ready for production use.InstallationSimply install the package using pip:pipinstalldash-recording-componentsand import theAudioRecordercomponent:fromdash_recording_componentsimportAudioRecorderUse-CasesCurrently, there is only one Dash component being built:AudioRecorder, in thedash_recording_componentspackage, which is built from the React component insrc/lib/components/AudioRecorder.react.js. An example application using the component can be seen below (note this also uses the excellent librarysoundfileand numpy to save the audio to a wav file for use in anAudioPlayer).importdashfromdashimporthtmlfromdash.dependenciesimportInput,Output,Statefromdash_recording_componentsimportAudioRecorderimportsoundfileassfimportnumpyasnpimportioimportbase64app=dash.Dash(__name__)app.layout=html.Div([html.H1("Audio Recorder and Player"),html.Button("Record",id="record-button"),html.Button("Stop Recording",id="stop-button",n_clicks=0),html.Button("Play",id="play-button"),html.Div(id="audio-output"),html.Div(id="dummy-output",style={"display":"none"}),AudioRecorder(id="audio-recorder")])audio_samples=[]@app.callback(Output("audio-recorder","recording"),Input("record-button","n_clicks"),Input("stop-button","n_clicks"),State("audio-recorder","recording"),prevent_initial_call=True)defcontrol_recording(record_clicks,stop_clicks,recording):returnrecord_clicks>stop_clicks@app.callback(Output("audio-output","children"),Input("play-button","n_clicks"),prevent_initial_call=True)defplay_audio(play_clicks):ifplay_clicks:ifaudio_samples:# when we play the audio we need to convert to b64 encoded wav and provide it as a data URIaudio_array=np.array(audio_samples)withio.BytesIO()aswav_buffer:sf.write(wav_buffer,audio_array,16000,format="WAV")wav_bytes=wav_buffer.getvalue()wav_base64=base64.b64encode(wav_bytes).decode()audio_src=f"data:audio/wav;base64,{wav_base64}"returnhtml.Audio(src=audio_src,controls=True)return""@app.callback(Output("dummy-output","children"),Input("audio-recorder","audio"),prevent_initial_call=True)defupdate_audio(audio):# running list of the audio samples, aggregated on the serverglobalaudio_samplesifaudioisnotNone:# Update the audio samples with the new audioaudio_samples+=list(audio.values())return""if__name__=="__main__":app.run_server(debug=True)Development and ContributingContributions welcome! To get started, clone the repo and follow the steps below:Create a Poetry environment and install all required development dependencies:poetry install --devInstallwebpackInstallnpmnpm installto install the dependenciesBuild the js files:npm run build:jsBuild the Dash components (Python modules):npm run build:pyChanges in the React components  (src/lib/components), such as exposing new properties or updating audio collection logic require running steps 5 and 6 above. The existing autogenerated Python modules should not be edited.
Package: dash-resizable-panels
dash resizable panelsdash resizable panels is a Dash component library.Get started with:Install Dash and its dependencies:https://dash.plotly.com/installationRunpython usage.pyVisithttp://localhost:8050in your web browserContributingSeeCONTRIBUTING.mdInstall dependenciesIf you have selected install_dependencies during the prompt, you can skip this part.Install npm packages$ npm installCreate a virtual env and activate.$ virtualenv venv
$ . venv/bin/activateNote: venv\Scripts\activate for windowsInstall python packages required to build components.$ pip install -r requirements.txtInstall the python packages for testing (optional)$ pip install -r tests/requirements.txtWrite your component code insrc/lib/components/DashResizablePanels.react.js.The demo app is insrc/demoand you will import your example component code into your demo app.Test your code in a Python environment:Build your code$ npm run buildRun and modify theusage.pysample dash app:$ python usage.pyWrite tests for your component.A sample test is available intests/test_usage.py, it will loadusage.pyand you can then automate interactions with selenium.Run the tests with$ pytest tests.The Dash team uses these types of integration tests extensively. Browse the Dash component code on GitHub for more examples of testing (e.g.https://github.com/plotly/dash-core-components)Add custom styles to your component by putting your custom CSS files into your distribution folder (dash_resizable_panels).Make sure that they are referenced inMANIFEST.inso that they get properly included when you're ready to publish your component.Make sure the stylesheets are added to the_css_distdict indash_resizable_panels/__init__.pyso dash will serve them automatically when the component suite is requested.Review your codeCreate a production build and publish:Build your code:$ npm run buildCreate a Python distribution$ python setup.py sdist bdist_wheelThis will create source and wheel distribution in the generated thedist/folder.
SeePyPAfor more information.Test your tarball by copying it into a new environment and installing it locally:$ pip install dash_resizable_panels-0.0.1.tar.gzIf it works, then you can publish the component to NPM and PyPI:Publish on PyPI$ twine upload dist/*Cleanup the dist folder (optional)$ rm -rf distPublish on NPM (Optional if chosen False inpublish_on_npm)$ npm publishPublishing your component to NPM will make the JavaScript bundles available on the unpkg CDN. By default, Dash serves the component library's CSS and JS locally, but if you choose to publish the package to NPM you can setserve_locallytoFalseand you may see faster load times.Share your component with the community!https://community.plotly.com/c/dashPublish this repository to GitHubTag your GitHub repository with the plotly-dash tag so that it appears here:https://github.com/topics/plotly-dashCreate a post in the Dash community forum:https://community.plotly.com/c/dash
Package: dash-rjsf
Dash component to make input forms from json schemaUsageimport dash_rjsf
import dash
from dash.dependencies import Input, Output
import dash_html_components as html

app = dash.Dash(__name__)
schema = {
        "$schema": "http://json-schema.org/draft-07/schema#",
        "title": "Hello form",
        "description": "Demo hello form",
        "type": "object",
        "properties": {
            "hello": { "type": "string", "description": "hello value"}
        }
    }
app.layout = html.Div([
    dash_rjsf.DashRjsf(
        id='input',
        schema=schema,
    ),
    html.Div(id='output')
])


@app.callback(Output('output', 'children'), [Input('input', 'value')])
def display_output(value):
    return 'You have entered {}'.format(value)


if __name__ == '__main__':
    app.run_server(debug=True)
Package: dash-rotate
Dash RotateDash Rotate is a Dash component library.
Components for smartphones that detect screen rotation.Installation$ pip install dash_alertPropertiesid (string)orientation (string)Correct orientation of the screen. Valid only if reload is true or if a message is specified.message (dash component)Message to be displayed in case of unintended screen orientation.reload (bool; default: true)Reloading on screen rotation?timing ("all" | "match"; default: "all")When to reload. "all": if the screen is rotated. "match": only if the screen is oriented correctly.delay (int; default: 10)The time from the time the screen is rotated until it is reloaded (milliseconds).
Package: dash-router
dash_routerA simple router for multi page Dash applications. UsesWerkzeug rules.Install$ pip install dash-routerUsageUse the built-in helper method:import dash
import dash_core_components as dcc
import dash_html_components as html
from dash_router import Router


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']


app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
router = Router()
router.register_callbacks(app)


@router.route('/')
def page1():
    return html.Div([
        dcc.Link('Navigate to "/"', href='/'),
        html.Br(),
        dcc.Link('Navigate to "/page-2"', href='/page-2'),

        html.H1(children='Hello from Page 1')
    ])


@router.route('/page-2')
def page2():
    return html.Div([
        dcc.Link('Navigate to "/"', href='/'),
        html.Br(),
        dcc.Link('Navigate to "/page-2"', href='/page-2'),

        html.H1(children='Hello from Page 2')
    ])



if __name__ == '__main__':
    app.run_server(debug=True)or manually add it to an existing app:import dash
import dash_core_components as dcc
import dash_html_components as html
from dash_router import Router


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']


app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
router = Router()


@router.route('/')
def page1():
    return html.H1(children='Hello from Page 1')


@router.route('/page-2')
def page2():
    return html.H1(children='Hello from Page 2')



app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    dcc.Link('Navigate to "/"', href='/'),
    html.Br(),
    dcc.Link('Navigate to "/page-2"', href='/page-2'),

    html.Div(id='page-content'),
])


@app.callback(
    dash.dependencies.Output('page-content', 'children'),
    [dash.dependencies.Input('url', 'pathname')]
)
def display_page(pathname):
    return router.dispatch(pathname)


if __name__ == '__main__':
    app.run_server(debug=True)
Package: dash-select
Descriptiondash_selectis a simple wrapper over<select>component that can be used in Dash.
Under the hood handlesonChangeevent and returns a selected value (or list of them if used inmultiplemode)InstallationThis module can only be installed from pippip install dash-selectAPISelect(
    id: str
    options: List[str]
    value: str | List[str]
    class_name: str
    size: int
    disabled: bool
    multiple: bool
    style: dict
)UsageSeeusage.pyfor a code example
Package: dashserve
dashservesupports developing and serving Plotly Dash apps within Jupyter Notebook and JupyterLab.
dashserve can also serialize Dash apps to a file and serve it using your favorite WSGI server.Documentationhttps://omegaml.github.io/dashserveRun from within Jupyter Notebook or Jupyter Lab# in Jupyter Notebook
from dashserve import JupyterDash

app = JupyterDash(__name__)
app.layout = html.Div(children=[
   ...
]
app.run_server()

* Serving Flask app "__main__" (lazy loading)
* Environment: production
  WARNING: Do not use the development server in a production environment.
  Use a production WSGI server instead.
* Debug mode: off
* Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)More options are available, see documentationLicensedashserve is MIT licensed. Details see LICENSE fileNote Plotly Dash is Copyright (c) 2018 Plotly Inc, and is not part of dashserveCommercial optionsdashserve is brought to you by omega|ml - productize machine learningThe commercial version of dashserve is a module of omega|ml to provide multi-user
analytics dashboards, enterprise-grade security, full data integration and machine
learning applications. From laptop to web scale, all deployed with a single-line of code.We can help you build and deploy analytics applications easily. Get in touch
atinfo@omegaml.ioor chat with us athttp://omegaml.ioServing machine learning models to applications via a state-of-the art REST APIGetting your data science team from zero to speed using omega|ml, batteries includedConsulting on data science, visualizations using Plotly and machine learning
Package: dash-sign
Dash Signature PadDash Signature Pad is a Dash component library.signature canvas for dashGet started with:Install Dash and its dependencies:https://dash.plotly.com/installationRunpython usage.pyVisithttp://localhost:8050in your web browserContributingSeeCONTRIBUTING.mdInstall dependenciesIf you have selected install_dependencies during the prompt, you can skip this part.Install npm packages$ npm installCreate a virtual env and activate.$ virtualenv venv
$ . venv/bin/activateNote: venv\Scripts\activate for windowsInstall python packages required to build components.$ pip install -r requirements.txtInstall the python packages for testing (optional)$ pip install -r tests/requirements.txtWrite your component code insrc/lib/components/DashSign.react.js.The demo app is insrc/demoand you will import your example component code into your demo app.Test your code in a Python environment:Build your code$ npm run buildRun and modify theusage.pysample dash app:$ python usage.pyWrite tests for your component.A sample test is available intests/test_usage.py, it will loadusage.pyand you can then automate interactions with selenium.Run the tests with$ pytest tests.The Dash team uses these types of integration tests extensively. Browse the Dash component code on GitHub for more examples of testing (e.g.https://github.com/plotly/dash-core-components)Add custom styles to your component by putting your custom CSS files into your distribution folder (dash_sign).Make sure that they are referenced inMANIFEST.inso that they get properly included when you're ready to publish your component.Make sure the stylesheets are added to the_css_distdict indash_sign/__init__.pyso dash will serve them automatically when the component suite is requested.Review your codeCreate a production build and publish:Build your code:$ npm run buildCreate a Python distribution$ python setup.py sdist bdist_wheelThis will create source and wheel distribution in the generated thedist/folder.
SeePyPAfor more information.Test your tarball by copying it into a new environment and installing it locally:$ pip install dash_sign-0.0.2.tar.gzIf it works, then you can publish the component to NPM and PyPI:Publish on PyPI$ twine upload dist/*Cleanup the dist folder (optional)$ rm -rf distPublish on NPM (Optional if chosen False inpublish_on_npm)$ npm publishPublishing your component to NPM will make the JavaScript bundles available on the unpkg CDN. By default, Dash serves the component library's CSS and JS locally, but if you choose to publish the package to NPM you can setserve_locallytoFalseand you may see faster load times.Share your component with the community!https://community.plotly.com/c/dashPublish this repository to GitHubTag your GitHub repository with the plotly-dash tag so that it appears here:https://github.com/topics/plotly-dashCreate a post in the Dash community forum:https://community.plotly.com/c/dash
Package: dash-slick
Dash SlickDash Slick is a Dash component library.SlickSliderA component to wrap react-slickSlidercomponent (https://github.com/akiran/react-slick/blob/master/src/slider.js).Code Exampleimportdash_slickimportdashimportdash_html_componentsashtmlimportdash_bootstrap_componentsasdbcapp=dash.Dash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])placeholder_text="""Est nostrud non nulla labore aute dolore incididuntenim adipisicing irure est nisi excepteur cillum.Magna duis enim voluptate deserunt ullamco in cillumduis magna. Elit ipsum consequat culpa ullamco incididunt.Esse mollit ex amet labore non laboris minim.Dolore labore mollit labore aliquip ad. Proident quis occaecataute ad quis veniam aliqua eiusmod laboris Lorem do occaecat.Nisi proident labore magna cillum nostrud adipisicing."""app.layout=html.Div([dash_slick.SlickSlider(dots=True,arrows=True,infinite=True,autoplay=True,speed=2000,slides_to_show=5,slides_to_scroll=1,center_mode=True,swipe_to_slide=True,slide_navigator=True,id="slick-slide",children=[html.Div(dbc.Card([dbc.CardHeader(f"Slide{i}"),dbc.CardBody(placeholder_text),dbc.CardFooter(dbc.Button('Details'),style={'text-align':'right'}),]),style={'padding':'1em'})foriinrange(20)],labels=[f"Slide{i}"foriinrange(20)]),],style={'margin-top':'10%'})if__name__=='__main__':app.run_server(debug=True)Result
Package: dash-snapshots
dash-snapshotsdash-snapshots is a part ofDash Enterprise,
Plotly's end-to-end Dash application platform. This public copy of the package
is a stub published on pypi.org designed to shield Dash Enterprise users fromdependency confusion,
a remote code execution attack publicly disclosed in 2021 by Alex Birsan.If you are a Dash Enterprise user, you will only see this public package if your
app is not properly configured to find the local package repository built into
Dash Enterprise. Visit the docs for your Dash Enterprise installation for details.If you never see this public package, it's still doing its job of protecting you
from the dependency confusion attack!
Package: dash-snapshot-testing
# dash-snapshot-testingUse snapshot testing, inspired by Jest snapshot testing, to test [Dash][] components.See the project [README](https://github.com/StratoDem/dash-snapshot-testing/blob/master/README.md) for more detailed information.## InspirationTesting a long HTML component output for a Dash application is difficult.It typically requires hardcoding data or setting up a dummy database.Using snapshot tests that JSON serialize the Dash component output provide anothereasy testing layer to ensure that code refactors/changes do not change theoutput unexpectedly.To learn more about snapshot testing in general, see a much more elaborate explanation from the [Facebook Jest site](https://facebook.github.io/jest/docs/en/snapshot-testing.html)## Installation and usage```bash$ pip install dash-snapshot-testing``````pythonimport dash_html_components as htmlfrom dash_snapshot_testing.snapshot_test import DashSnapshotTestCaseclass MyUnitTestCase(DashSnapshotTestCase):def test_component(self):my_component = html.Div([html.P('wow'), html.Span('this works')], id='test-id')self.assertSnapshotEqual(my_component, 'my-test-unique-id')```This outputs/checks this JSON at `__snapshots__/MyUnitTestCase-my-test-unique-id.json`:```json{"type": "Div","props": {"id": "test-id","children": [{"type": "P","props": {"children": "wow"},"namespace": "dash_html_components"},{"type": "Span","props": {"children": "this works"},"namespace": "dash_html_components"}]},"namespace": "dash_html_components"}```### Setting a custom `snapshots_dir` for the class```pythonclass MyOtherUnitTestCase(DashSnapshotTestCase):snapshots_dir = '__snapshots_2__'def test_component(self):my_component = html.Div([html.P('wow'), html.Span('another one')], id='test-id')self.assertSnapshotEqual(my_component, 'my-test-unique-id')```This outputs/checks this JSON at `__snapshots_2__/MyOtherUnitTestCase-my-test-unique-id.json`:```json{"type": "Div","props": {"id": "test-id","children": [{"type": "P","props": {"children": "wow"},"namespace": "dash_html_components"},{"type": "Span","props": {"children": "another one"},"namespace": "dash_html_components"}]},"namespace": "dash_html_components"}```### Overwriting snapshotsTo overwrite pre-existing snapshots, [like in Jest](https://facebook.github.io/jest/docs/en/snapshot-testing.html#updating-snapshots), set an environment variable as `UPDATE_DASH_SNAPSHOTS=TRUE`:```bash# This will run and make new snapshots> UPDATE_DASH_SNAPSHOTS=TRUE python -m unittest my_test_module# This will run against the previous snapshots> python -m unittest my_test_module```### How this worksAt its core, this `unittest.TestCase` compares a JSON-serialized Dash componentagainst a previously stored JSON-serialized Dash component, and checks if the `dict`objects from `json.loads` are equivalent using `assertEqual`.[Dash]: https://github.com/plotly/dash