Dash Grocery Components 🎇

[stu]

Hi Community,

I just released a Dash component that wraps some interesting React components. This package currently includes lazy loading, particles, QR codes and weather components. Welcome to try it out, send issues and PRs.

GitHub - IcToxi/dash-grocery: Dash Grocery is a Dash component library...

Installation:

pip install dash-grocery

LazyLoad:

import dash_grocery
from dash import html, dcc, Dash
import plotly.express as px

df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species")

app = Dash(__name__)

app.layout = html.Div(
    [
        html.Div(
            [
                dash_grocery.LazyLoad(
                    html.Img(
                        src="https://hddesktopwallpapers.in/wp-content/uploads/2015/09/cat-eyes-cute.jpg",
                        height=300,
                    ),
                    throttle=200,
                    height=300,
                ),
                dash_grocery.LazyLoad(dcc.Graph(figure=fig), throttle=200, height=300),
            ]
        )
        for i in range(10)
    ],
)


if __name__ == "__main__":
    app.run_server(debug=True)

Particles:

import dash_grocery
from dash import html, dcc, Dash

app = Dash(__name__)

app.layout = html.Div(
    [
        dash_grocery.MouseParticles(),
        dash_grocery.ParticlesBg(),
        dash_grocery.PowerModeInput(
            style=dict(
                position="absolute",
                top="50%",
                left="50%",
                transform="translateX(-50%) translateY(-50%)",
            )
        ),
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

import dash_grocery
from dash import html, dcc, Dash

app = Dash(__name__)

app.layout = html.Div(
    [
        dash_grocery.QRCodeCanvas(value="https://plotly.com/"),
        dash_grocery.QRCodeSVG(value="https://github.com/"),
        dash_grocery.Barcode(value=5901234123457, format="EAN13", displayValue=True),
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Weather:

Daily Tips - Convert a React Component to Dash

Hi there, You know, they said that the entire React ecosystem can be used in Dash applications, right? Today we’re going to try converting or wrapping a React component to dash. Look at the result first. [dw] Yes, it’s a weather component. I found it at random. With the selected components to be converted, let’s do it step by step from the official docs. We need nodejs and cookiecutter. And the plotly team has prepared a template for us. cookiecutter https://github.com/plotl…

Clock:

import dash_grocery
from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div(
    [
        dash_grocery.Textfit(
            dash_grocery.Clock(format="dddd, MMMM Mo, YY, HH:mm:ss", ticking=True),
            max=400,
            mode="single",
        )
    ]
)


if __name__ == "__main__":
    app.run_server(debug=True)

This is an initial version, I haven’t made the documentation yet.

Hope you like this. XD

[chriddyp]

Great collection!!

[double12]

Great stuff!

[taylorsegell]

[stu]

How is my greedy snake playing?

import dash_grocery
from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div(
    dash_grocery.Snake(color1="black", color2="tomato", backgroundColor="darkgrey")
)


if __name__ == "__main__":
    app.run_server(debug=True)

[ramyasree]

Well done mate! Amazing stuff to integrate… all pumped up to use lazy loading!!

[PipInstallPython]

Just a rough draft for demo of all particle type options for ParticlesBg

import dash
from dash import dcc, html
from dash.dependencies import Input, Output, State
import dash_grocery

# Initialize the app
app = dash.Dash(__name__, suppress_callback_exceptions=True)

# App layout
app.layout = html.Div([
    html.H1("Dynamic Particles Background"),

    html.Div([
        html.Label("Particle Type"),
        dcc.Dropdown(
            id="particle-type",
            options=[
                {"label": "Color", "value": "color"},
                {"label": "Ball", "value": "ball"},
                {"label": "Lines", "value": "lines"},
                {"label": "Thick", "value": "thick"},
                {"label": "Circle", "value": "circle"},
                {"label": "Cobweb", "value": "cobweb"},
                {"label": "Polygon", "value": "polygon"},
                {"label": "Square", "value": "square"},
                {"label": "Tadpole", "value": "tadpole"},
                {"label": "Fountain", "value": "fountain"},
                {"label": "Random", "value": "random"},
                {"label": "Custom", "value": "custom"},
            ],
            value="random",
        ),
    ], style={'marginBottom': '20px'}),

    html.Div([
        html.Label("Particle Color"),
        dcc.Input(id="particle-color", type="text", value="random"),
    ], style={'marginBottom': '20px'}),

    html.Div([
        html.Label("Background Enabled"),
        dcc.Checklist(
            id="particle-bg",
            options=[
                {"label": "Enable", "value": "enabled"},
            ],
            value=["enabled"],
        ),
    ], style={'marginBottom': '20px'}),

    html.Div(id='custom-options', children=[], style={'marginBottom': '20px'}),

    # The ParticlesBg component to be updated
    html.Div(id="particles-bg-container"),

    # Hidden div to store custom config
    dcc.Store(id='custom-config', storage_type='memory')
])

# Callback to update custom options when 'custom' is selected as type
@app.callback(
    Output('custom-options', 'children'),
    [Input('particle-type', 'value')]
)
def display_custom_options(particle_type):
    if particle_type == "custom":
        return html.Div([
            html.H4("Custom Configuration"),
            html.Div([
                html.Label("Number of Particles"),
                dcc.Input(id="custom-num", type="number", value=50),
            ], style={'marginBottom': '10px'}),
            html.Div([
                html.Label("Particle Speed (rps)"),
                dcc.Input(id="custom-rps", type="number", value=0.1, step=0.1),
            ], style={'marginBottom': '10px'}),
            html.Div([
                html.Label("Particle Radius"),
                dcc.Input(id="custom-radius", type="number", value=10),
            ], style={'marginBottom': '10px'}),
            html.Div([
                html.Label("Particle Life"),
                dcc.Input(id="custom-life", type="number", value=10),
            ], style={'marginBottom': '10px'}),
            html.Div([
                html.Label("Particle Velocity (v)"),
                dcc.Input(id="custom-v", type="number", value=2, step=0.1),
            ], style={'marginBottom': '10px'}),
        ])
    return []

# Callback to update custom config
@app.callback(
    Output('custom-config', 'data'),
    [Input('particle-type', 'value')],
    [State('custom-num', 'value'),
     State('custom-rps', 'value'),
     State('custom-radius', 'value'),
     State('custom-life', 'value'),
     State('custom-v', 'value')]
)
def update_custom_config(p_type, num, rps, radius, life, v):
    if p_type == "custom":
        return {
            "num": num or 50,
            "rps": rps or 0.1,
            "radius": radius or 10,
            "life": life or 10,
            "v": v or 2,
        }
    return None

# Callback to update ParticlesBg properties based on input
@app.callback(
    Output("particles-bg-container", "children"),
    [Input("particle-color", "value"),
     Input("particle-type", "value"),
     Input("particle-bg", "value"),
     Input("custom-config", "data")]
)
def update_particles_bg(color, p_type, bg, custom_config):
    bg_value = True if bg and "enabled" in bg else False

    return dash_grocery.ParticlesBg(
        id="particles-bg",
        color=color,
        type=p_type,
        bg=bg_value,
        config=custom_config
    )

# Run the app
if __name__ == '__main__':
    app.run_server(debug=True, port=8751)