Skip to content

Commit 9781033

Browse files
nkyllonennkyllonen
committed
Add Math Plot LV
1 parent 7707afa commit 9781033

3 files changed

Lines changed: 191 additions & 1 deletion

File tree

‎demo/lib/plox_demo_web/live/graphs_live.ex‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ defmodule PloxDemoWeb.GraphsLive do
228228
defp math_stuff(assigns) do
229229
~H"""
230230
<div class="space-y-4">
231-
<.heading>3. Sine/Cosine/ArcTangent</.heading>
231+
<.heading navigate={~p"/math"}>3. Sine/Cosine/ArcTangent</.heading>
232232
233233
<.graph :let={graph} id="math_stuff" for={@math_stuff} width={800} height={250}>
234234
<.x_axis :let={degrees} scale={graph[:x_scale]} ticks={9}>

‎demo/lib/plox_demo_web/live/math_live.ex‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
defmodule PloxDemoWeb.MathLive do
2+
@moduledoc """
3+
LiveView displaying the "Simple Line" example.
4+
"""
5+
use PloxDemoWeb, :live_view
6+
7+
import Plox
8+
import PloxDemoWeb.CodeHelpers
9+
import PloxDemoWeb.Headings
10+
11+
def mount(_params, _session, socket) do
12+
sine_data =
13+
Enum.map(-360..360//30, fn deg ->
14+
%{degrees: deg, sin: :math.sin(deg * :math.pi() / 180)}
15+
end)
16+
17+
cosine_data =
18+
Enum.map(-360..360//20, fn deg ->
19+
%{degrees: deg, cos: :math.cos(deg * :math.pi() / 180)}
20+
end)
21+
22+
arctangent_data =
23+
Enum.map(-180..180//10, fn deg ->
24+
%{degrees: deg, atan: :math.atan(deg * :math.pi() / 180)}
25+
end)
26+
27+
x_scale = number_scale(-360, 360)
28+
y_scale = number_scale(-1.5, 1.5)
29+
30+
sine_dataset = dataset(sine_data, x: {x_scale, & &1.degrees}, y: {y_scale, & &1.sin})
31+
cosine_dataset = dataset(cosine_data, x: {x_scale, & &1.degrees}, y: {y_scale, & &1.cos})
32+
33+
arctangent_dataset =
34+
dataset(arctangent_data, x: {x_scale, & &1.degrees}, y: {y_scale, & &1.atan})
35+
36+
socket =
37+
assign(socket,
38+
graph:
39+
to_graph(
40+
scales: [x_scale: x_scale, y_scale: y_scale],
41+
datasets: [sine: sine_dataset, cosine: cosine_dataset, arctangent: arctangent_dataset]
42+
)
43+
)
44+
45+
{:ok, socket}
46+
end
47+
48+
def render(assigns) do
49+
~H"""
50+
<.heading1>Sine/Cosine/ArcTangent Plot</.heading1>
51+
52+
<div class="flex flex-col 2xl:flex-row gap-4">
53+
<div class="space-y-4">
54+
<.example_graph graph={@graph} />
55+
56+
<.heading2>HEEx Template</.heading2>
57+
58+
<.code_block code={code()} />
59+
</div>
60+
61+
<div>
62+
<.heading2>Setup</.heading2>
63+
64+
<.code_block code={setup()} />
65+
</div>
66+
</div>
67+
"""
68+
end
69+
70+
defp example_graph(assigns) do
71+
~H"""
72+
<.graph :let={graph} id="math_stuff" for={@graph} width={800} height={250}>
73+
<.x_axis :let={degrees} scale={graph[:x_scale]} ticks={9}>
74+
<%= round(degrees) %>°
75+
</.x_axis>
76+
77+
<.y_axis :let={y} scale={graph[:y_scale]} ticks={7}>
78+
<%= y %>
79+
</.y_axis>
80+
81+
<.line_plot dataset={graph[:sine]} color="#8FDA5D" line_style={:dashed} />
82+
83+
<.line_plot dataset={graph[:cosine]} color="#35A9C0" width="2" line_style={:dotted} />
84+
<.points_plot dataset={graph[:cosine]} color="#35A9C0" />
85+
86+
<.line_plot dataset={graph[:arctangent]} color="#FF5954" width="1" />
87+
<.points_plot dataset={graph[:arctangent]} color="#FF5954" radius="3" />
88+
89+
<.marker at={-180} scale={graph[:x_scale]}>
90+
Start
91+
</.marker>
92+
93+
<.marker at={180} scale={graph[:x_scale]}>
94+
End
95+
</.marker>
96+
</.graph>
97+
"""
98+
end
99+
100+
defp code() do
101+
"""
102+
<.graph :let={graph} id="math_stuff" for={@graph} width={800} height={250}>
103+
<.x_axis :let={degrees} scale={graph[:x_scale]} ticks={9}>
104+
<%= round(degrees) %>°
105+
</.x_axis>
106+
107+
<.y_axis :let={y} scale={graph[:y_scale]} ticks={7}>
108+
<%= y %>
109+
</.y_axis>
110+
111+
<.line_plot dataset={graph[:sine]} color="#8FDA5D" line_style={:dashed} />
112+
113+
<.line_plot dataset={graph[:cosine]} color="#35A9C0" width="2" line_style={:dotted} />
114+
<.points_plot dataset={graph[:cosine]} color="#35A9C0" />
115+
116+
<.line_plot dataset={graph[:arctangent]} color="#FF5954" width="1" />
117+
<.points_plot dataset={graph[:arctangent]} color="#FF5954" radius="3" />
118+
119+
<.marker at={-180} scale={graph[:x_scale]}>
120+
Start
121+
</.marker>
122+
123+
<.marker at={180} scale={graph[:x_scale]}>
124+
End
125+
</.marker>
126+
</.graph>
127+
"""
128+
end
129+
130+
defp setup() do
131+
"""
132+
# 1. calculate data
133+
134+
sine_data =
135+
Enum.map(-360..360//30, fn deg ->
136+
%{degrees: deg, sin: :math.sin(deg * :math.pi() / 180)}
137+
end)
138+
139+
cosine_data =
140+
Enum.map(-360..360//20, fn deg ->
141+
%{degrees: deg, cos: :math.cos(deg * :math.pi() / 180)}
142+
end)
143+
144+
arctangent_data =
145+
Enum.map(-180..180//10, fn deg ->
146+
%{degrees: deg, atan: :math.atan(deg * :math.pi() / 180)}
147+
end)
148+
149+
# 2. set up `Plox.Scale`s for the x and y scales
150+
151+
x_scale = number_scale(-360, 360)
152+
y_scale = number_scale(-1.5, 1.5)
153+
154+
# 3. set up `Plox.Dataset`s with data and scales
155+
156+
sine_dataset =
157+
dataset(sine_data,
158+
x: {x_scale, & &1.degrees},
159+
y: {y_scale, & &1.sin}
160+
)
161+
162+
cosine_dataset =
163+
dataset(cosine_data,
164+
x: {x_scale, & &1.degrees},
165+
y: {y_scale, & &1.cos}
166+
)
167+
168+
arctangent_dataset =
169+
dataset(arctangent_data,
170+
x: {x_scale, & &1.degrees},
171+
y: {y_scale, & &1.atan}
172+
)
173+
174+
# 4. assign newly constructed `Plox.Graph` to the socket
175+
176+
assign(socket,
177+
graph:
178+
to_graph(
179+
scales: [x_scale: x_scale, y_scale: y_scale],
180+
datasets: [
181+
sine: sine_dataset,
182+
cosine: cosine_dataset,
183+
arctangent: arctangent_dataset
184+
]
185+
)
186+
)
187+
"""
188+
end
189+
end

‎demo/lib/plox_demo_web/router.ex‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ defmodule PloxDemoWeb.Router do
2020
live "/", GraphsLive
2121
live "/simple_line", SimpleLineLive
2222
live "/logo", LogoLive
23+
live "/math", MathLive
2324
end
2425

2526
# Other scopes may use custom stacks.

0 commit comments

Comments
 (0)