[ENG-4406] cell component wrapper

[LineIndent]

@Lendemor

import reflex as rx
from reflex import Var, Color

from reflex.components.recharts.recharts import Recharts


class Cell(Recharts):
    """A Cell component in Recharts."""

    tag = "Cell"

    alias = "RechartsCell"

    # The presentation attribute of a rectangle in bar or a sector in pie.
    fill: Var[str | Color]

    # The presentation attribute of a rectangle in bar or a sector in pie.
    stroke: Var[str]


cell = Cell.create



class State:
    data: list[dict[str, int]] = [
        {"browser": "chrome", "visitors": 275},
        {"browser": "safari", "visitors": 200},
        {"browser": "firefox", "visitors": 187},
        {"browser": "edge", "visitors": 173},
        {"browser": "other", "visitors": 90},
    ]


def piechart_v1():
    return rx.vstack(
        rx.recharts.pie_chart(
            rx.recharts.pie(
                rx.foreach(
                    State.data,
                    lambda item, index: cell(
                        fill=rx.color('red', index + 4)
                    )
                ),
                data=State.data,
                data_key="visitors",
                name_key="browser",
                stroke="0",
                is_animation_active=False,
            ),
            width="100%",
            height=250,
        ),
        width="100%",
        align="center",
        padding="0.5em",
    )


app = rx.App()
app.add_page(piechart_v1(), "/")

[linear]

ENG-4406 Pie chart block should accept colors