189 lines
4.6 KiB
Markdown
189 lines
4.6 KiB
Markdown
---
|
|
components:
|
|
- rx.recharts.PieChart
|
|
---
|
|
|
|
# Pie Chart
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
from pcweb.templates.docpage import docgraphing
|
|
|
|
data01 = [
|
|
{
|
|
"name": "Group A",
|
|
"value": 400
|
|
},
|
|
{
|
|
"name": "Group B",
|
|
"value": 300
|
|
},
|
|
{
|
|
"name": "Group C",
|
|
"value": 300
|
|
},
|
|
{
|
|
"name": "Group D",
|
|
"value": 200
|
|
},
|
|
{
|
|
"name": "Group E",
|
|
"value": 278
|
|
},
|
|
{
|
|
"name": "Group F",
|
|
"value": 189
|
|
}
|
|
]
|
|
data02 = [
|
|
{
|
|
"name": "Group A",
|
|
"value": 2400
|
|
},
|
|
{
|
|
"name": "Group B",
|
|
"value": 4567
|
|
},
|
|
{
|
|
"name": "Group C",
|
|
"value": 1398
|
|
},
|
|
{
|
|
"name": "Group D",
|
|
"value": 9800
|
|
},
|
|
{
|
|
"name": "Group E",
|
|
"value": 3908
|
|
},
|
|
{
|
|
"name": "Group F",
|
|
"value": 4800
|
|
}
|
|
]
|
|
|
|
pie_chart_simple_example = """rx.recharts.pie_chart(
|
|
rx.recharts.pie(
|
|
data=data01,
|
|
data_key="value",
|
|
name_key="name",
|
|
cx="50%",
|
|
cy="50%",
|
|
fill="#8884d8",
|
|
label=True,
|
|
)
|
|
)"""
|
|
|
|
pie_chart_complex_example = """rx.recharts.pie_chart(
|
|
rx.recharts.pie(
|
|
data=data01,
|
|
data_key="value",
|
|
name_key="name",
|
|
cx="50%",
|
|
cy="50%",
|
|
fill="#82ca9d",
|
|
inner_radius="60%",
|
|
),
|
|
rx.recharts.pie(
|
|
data=data02,
|
|
data_key="value",
|
|
name_key="name",
|
|
cx="50%",
|
|
cy="50%",
|
|
fill="#8884d8",
|
|
outer_radius="50%",
|
|
),
|
|
rx.recharts.graphing_tooltip(),
|
|
)"""
|
|
|
|
```
|
|
|
|
A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion.
|
|
|
|
For a pie chart we must define an `rx.recharts.pie()` component for each set of values we wish to plot. Each `rx.recharts.pie()` component has a `data`, a `data_key` and a `name_key` which clearly states which data and which variables in our data we are tracking. In this simple example we plot `value` column as our `data_key` against the `name` column which we set as our `name_key`.
|
|
|
|
```python eval
|
|
docgraphing(pie_chart_simple_example, comp=eval(pie_chart_simple_example), data = "data01=" + str(data01))
|
|
```
|
|
|
|
We can also add two pies on one chart by using two `rx.recharts.pie` components.
|
|
|
|
```python eval
|
|
docgraphing(pie_chart_complex_example, comp=eval(pie_chart_complex_example), data = "data01=" + str(data01) + "&data02=" + str(data02))
|
|
```
|
|
|
|
# Dynamic Data
|
|
|
|
Chart data tied to a State var causes the chart to automatically update when the
|
|
state changes, providing a nice way to visualize data in response to user
|
|
interface elements. View the "Data" tab to see the substate driving this
|
|
half-pie chart.
|
|
|
|
```python exec
|
|
from typing import Any
|
|
|
|
|
|
class PieChartState(rx.State):
|
|
resources: list[dict[str, Any]] = [
|
|
dict(type_="🏆", count=1),
|
|
dict(type_="🪵", count=1),
|
|
dict(type_="🥑", count=1),
|
|
dict(type_="🧱", count=1),
|
|
]
|
|
|
|
@rx.cached_var
|
|
def resource_types(self) -> list[str]:
|
|
return [r["type_"] for r in self.resources]
|
|
|
|
def increment(self, type_: str):
|
|
for resource in self.resources:
|
|
if resource["type_"] == type_:
|
|
resource["count"] += 1
|
|
break
|
|
|
|
def decrement(self, type_: str):
|
|
for resource in self.resources:
|
|
if resource["type_"] == type_ and resource["count"] > 0:
|
|
resource["count"] -= 1
|
|
break
|
|
|
|
|
|
pie_chart_state_example = """
|
|
rx.hstack(
|
|
rx.recharts.pie_chart(
|
|
rx.recharts.pie(
|
|
data=PieChartState.resources,
|
|
data_key="count",
|
|
name_key="type_",
|
|
cx="50%",
|
|
cy="50%",
|
|
start_angle=180,
|
|
end_angle=0,
|
|
fill="#8884d8",
|
|
label=True,
|
|
),
|
|
rx.recharts.graphing_tooltip(),
|
|
),
|
|
rx.vstack(
|
|
rx.foreach(
|
|
PieChartState.resource_types,
|
|
lambda type_, i: rx.hstack(
|
|
rx.button("-", on_click=PieChartState.decrement(type_)),
|
|
rx.text(type_, PieChartState.resources[i]["count"]),
|
|
rx.button("+", on_click=PieChartState.increment(type_)),
|
|
),
|
|
),
|
|
),
|
|
width="100%",
|
|
height="15em",
|
|
)"""
|
|
```
|
|
|
|
```python eval
|
|
docgraphing(
|
|
pie_chart_state_example,
|
|
comp=eval(pie_chart_state_example),
|
|
# data=inspect.getsource(PieChartState),
|
|
)
|
|
```
|