CardCanvas - Runtime configurable dashboard

Hi,
I built a package called cardcanvas for building runtime configurable dashboards using dash. Here’s a screenshot/animation.

And a interactive demo using titanic dataset.

GitHub: GitHub - idling-mind/cardcanvas: A configurable dashboard library with dash

Here’s a sample code

from cardcanvas import CardCanvas, Card
import dash_mantine_components as dmc

settings = {
    "title": "CardCanvas Demo",
    "subtitle": "A Demo application showing the capabilities of CardCanvas",
    "start_config": {},
    "logo": "https://img.icons8.com/?size=80&id=cjlQopC5NR3D&format=png",
    "grid_compact_type": "vertical",
    "grid_row_height": 100,
}


class TextCard(Card):
    title = "White text with a background color"
    description = "Testing out CardCanvas"
    icon = "mdi:file-document-edit"

    def render(self):
        return dmc.Card(
            dmc.Title(
                self.settings.get("text", "Hello CardCanvas"),
                c="white",
            ),
            bg=self.settings.get("color", "blue"),
            style={"height": "100%", "width": "100%"},
        )

    def render_settings(self):
        return dmc.Stack(
            [
                dmc.TextInput(
                    id={"type": "card-settings", "id": self.id, "setting": "text"},
                    value=self.settings.get("text", "Hello CardCanvas"),
                ),
                dmc.ColorPicker(
                    id={"type": "card-settings", "id": self.id, "setting": "color"},
                    value=self.settings.get("color", "grey"),
                ),
            ]
        )


canvas = CardCanvas(settings)
canvas.card_manager.register_card_class(TextCard)

canvas.app.run_server(debug=True)

Some backstory.
I have been using dash to build tools at my work. One such tool was a dashboard which displayed a varied list of useful info for my colleageus. One of the issue with that interface was, different engineers were interested in different things (read cards) in the dashboard. Also, in each card, they wanted some level of configuration (not much, but some). I couldnt solve in a reasonable way with just bare Dash (or it became too complicated). And this was my way to solve it.

I just wanted to get some feedback before investing more time with this :slight_smile:

To install, pip install cardcanvas

5 Likes

this looks amazing! I will definitely give it a try

1 Like