Packages
petal_components
4.7.0
4.7.0
4.6.2
4.6.1
4.6.0
4.5.0
4.4.0
4.3.0
4.2.1
4.2.0
4.1.2
4.1.1
4.1.0
4.0.12
4.0.11
4.0.10
4.0.6
4.0.5
4.0.4
4.0.3
4.0.1
3.2.2
3.2.1
3.2.0
3.1.0
3.0.2
3.0.1
3.0.0
2.9.3
2.9.2
retired
2.9.1
retired
2.9.0
retired
2.8.4
2.8.3
2.8.2
2.8.1
2.8.0
2.7.4
2.7.3
2.7.2
2.7.1
2.7.0
2.6.1
2.6.0
2.5.2
2.5.1
2.5.0
2.4.3
2.4.2
2.4.1
2.4.0
2.3.0
2.2.1
2.2.0
2.1.2
2.1.1
2.1.0
2.0.6
2.0.5
2.0.4
2.0.3
2.0.2
2.0.1
2.0.0
1.9.3
1.9.2
1.9.1
1.9.0
1.8.0
1.7.1
1.7.0
1.6.2
1.6.1
1.6.0
1.5.5
1.5.4
1.5.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.0
1.2.14
1.2.13
1.2.12
1.2.11
1.2.10
1.2.9
1.2.8
1.2.7
1.2.6
1.2.5
1.2.4
1.2.3
1.2.2
1.2.1
1.2.0
1.1.6
1.1.5
1.1.4
1.1.3
1.1.2
1.1.1
1.1.0
1.0.8
1.0.7
1.0.6
1.0.5
1.0.4
1.0.3
1.0.2
1.0.1
1.0.0
0.19.10
0.19.9
0.19.8
0.19.7
0.19.6
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.7
0.17.6
0.17.5
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.0
0.15.0
0.14.1
0.14.0
0.13.7
0.13.6
0.13.5
0.13.4
0.13.3
0.13.2
0.13.1
0.13.0
0.12.0
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.8
0.10.7
0.10.6
0.10.5
0.10.4
0.10.3
0.10.2
0.10.1
0.10.0
0.9.3
0.9.2
0.9.1
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.1
0.2.0
0.1.0
Shadcn-style Phoenix LiveView components that AI assistants can actually use. Pair with the MCP server so AI coding tools can inspect the real component API.
Current section
Files
Jump to
Current section
Files
lib/petal_components/showcase/chart.ex
defmodule PetalComponents.Showcase.Chart do
@moduledoc false
use PetalComponents.Showcase,
component: PetalComponents.Chart,
title: "Chart",
functions: [:chart]
example :area_line, "Area line",
description:
"A smooth line with the soft gradient fade. The spec is a plain Elixir map; colours derive from your theme tokens at mount." do
~H"""
<.chart
id="showcase-chart-line"
height="16rem"
option={
%{
grid: %{left: 8, right: 16, top: 16, bottom: 8, containLabel: true},
xAxis: %{type: "category", boundaryGap: false, data: ~w(Mon Tue Wed Thu Fri Sat Sun)},
yAxis: %{type: "value"},
tooltip: %{trigger: "axis"},
series: [
%{
type: "line",
name: "Visitors",
smooth: true,
areaStyle: %{color: "petal:fade"},
data: [820, 932, 901, 1290, 1330, 1520, 1710]
}
]
}
}
/>
"""
end
example :grouped_bar, "Grouped bars",
description:
"Two series side by side. Series colours come from the --pc-chart-* palette, falling back to your semantic ramps." do
~H"""
<.chart
id="showcase-chart-bar"
height="16rem"
option={
%{
grid: %{left: 8, right: 8, top: 32, bottom: 8, containLabel: true},
legend: %{top: 0},
tooltip: %{trigger: "axis"},
xAxis: %{type: "category", data: ~w(Q1 Q2 Q3 Q4)},
yAxis: %{type: "value"},
series: [
%{name: "Pro", type: "bar", barGap: 0, data: [320, 402, 391, 534]},
%{name: "Teams", type: "bar", data: [120, 182, 231, 290]}
]
}
}
/>
"""
end
example :donut, "Donut with a centre total",
description: "A pie with an inner radius and a title placed in the hole." do
~H"""
<.chart
id="showcase-chart-donut"
height="16rem"
option={
%{
tooltip: %{trigger: "item"},
legend: %{bottom: 0},
title: %{
text: "960",
subtext: "customers",
left: "center",
top: "33%",
itemGap: 2,
textStyle: %{fontSize: 24, fontWeight: 650},
subtextStyle: %{fontSize: 12}
},
series: [
%{
name: "Plan",
type: "pie",
radius: ["48%", "72%"],
center: ["50%", "44%"],
itemStyle: %{borderRadius: 5, borderWidth: 2},
label: %{show: false},
data: [
%{value: 580, name: "Individual"},
%{value: 260, name: "Team"},
%{value: 120, name: "Legacy"}
]
}
]
}
}
/>
"""
end
example :live_currency, "Money axes and tooltips",
description:
"Named formatters stand in for the JavaScript callbacks ECharts normally wants: petal:currency-compact for the axis, petal:currency for the tooltip." do
~H"""
<.chart
id="showcase-chart-currency"
height="16rem"
option={
%{
grid: %{left: 8, right: 16, top: 16, bottom: 8, containLabel: true},
xAxis: %{type: "category", boundaryGap: false, data: ~w(Jan Feb Mar Apr May Jun)},
yAxis: %{type: "value", axisLabel: %{formatter: "petal:currency-compact:USD"}},
tooltip: %{trigger: "axis", valueFormatter: "petal:currency:USD"},
series: [
%{
type: "line",
name: "MRR",
smooth: true,
areaStyle: %{color: "petal:fade"},
data: [9200, 9840, 10100, 11200, 11900, 12480]
}
]
}
}
/>
"""
end
end