Skip to content

Commit c4b9619

Browse files
nkyllonennkyllonen
committed
Add Simple Line LV and basic components for rendering example pages
1 parent 6355fda commit c4b9619

6 files changed

Lines changed: 219 additions & 9 deletions

File tree

‎demo/lib/plox_demo_web/components/code_helpers.ex‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
defmodule PloxDemoWeb.CodeHelpers do
2+
@moduledoc """
3+
Collection of components for easily rendering
4+
code snippets.
5+
"""
6+
use Phoenix.Component
7+
8+
attr :code, :string, required: true
9+
attr :language, :atom, values: [:elixir, :heex], default: :elixir
10+
11+
def code_block(%{language: :elixir} = assigns) do
12+
~H"""
13+
<div class="bg-slate-100 p-4 rounded-md w-fit">
14+
<%= @code |> Makeup.highlight() |> Phoenix.HTML.raw() %>
15+
</div>
16+
"""
17+
end
18+
19+
def code_block(%{language: :heex} = assigns) do
20+
~H"""
21+
<div class="bg-slate-100 p-4 rounded-md w-fit">
22+
<%= @code |> Makeup.highlight(lexer: Makeup.Lexers.HEExLexer) |> Phoenix.HTML.raw() %>
23+
</div>
24+
"""
25+
end
26+
end

‎demo/lib/plox_demo_web/components/headings.ex‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
defmodule PloxDemoWeb.Headings do
2+
@moduledoc """
3+
Collection of heading components for easy reuse.
4+
"""
5+
use Phoenix.Component
6+
7+
slot :inner_block, required: true
8+
9+
def heading1(assigns) do
10+
~H"""
11+
<h1 class="bg-purple-100 font-bold mb-4 p-2 rounded-md text-purple-950 text-2xl w-fit">
12+
<%= render_slot(@inner_block) %>
13+
</h1>
14+
"""
15+
end
16+
17+
slot :inner_block, required: true
18+
19+
def heading2(assigns) do
20+
~H"""
21+
<h2 class="bg-purple-900 font-bold mb-4 p-2 rounded-md text-purple-50 w-fit">
22+
<%= render_slot(@inner_block) %>
23+
</h2>
24+
"""
25+
end
26+
end

‎demo/lib/plox_demo_web/components/layouts/app.html.heex‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
<header class="px-4 sm:px-6 lg:px-8">
2-
<img class="mx-auto" src={~p"/images/logo-plot@2x.png"} width="400" />
3-
</header>
4-
<main class="px-4 py-20 sm:px-6 lg:px-8">
5-
<div class="max-w-2xl">
1+
<main class="px-4 py-10 sm:px-6 lg:px-8">
2+
<div>
63
<.flash_group flash={@flash} />
74
<%= @inner_content %>
85
</div>

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ defmodule PloxDemoWeb.GraphsLive do
99

1010
def render(assigns) do
1111
~H"""
12+
<header class="px-4 sm:px-6 lg:px-8">
13+
<img class="mx-auto" src={~p"/images/logo-plot@2x.png"} width="400" />
14+
</header>
15+
1216
<div class="space-y-8">
1317
<.simple_line simple_line={@simple_line} />
1418
@@ -49,7 +53,7 @@ defmodule PloxDemoWeb.GraphsLive do
4953
defp simple_line(assigns) do
5054
~H"""
5155
<div>
52-
<.heading>1. Simple Line Plot</.heading>
56+
<.heading navigate={~p"/simple_line"}>1. Simple Line</.heading>
5357
5458
<.graph :let={graph} id="simple_line" for={@simple_line} width="670" height="250">
5559
<:legend>
@@ -158,7 +162,7 @@ defmodule PloxDemoWeb.GraphsLive do
158162
defp logo_graph(assigns) do
159163
~H"""
160164
<div>
161-
<.heading>2. Logo graph</.heading>
165+
<.heading>2. Logo</.heading>
162166
163167
<.graph :let={graph} id="logo_graph" for={@logo_graph} width="440" height="250">
164168
<.x_axis :let={value} scale={graph[:x_scale]}>
@@ -224,7 +228,7 @@ defmodule PloxDemoWeb.GraphsLive do
224228
defp math_stuff(assigns) do
225229
~H"""
226230
<div class="space-y-4">
227-
<.heading>3. Sine/Cosine/ArcTangent Graph</.heading>
231+
<.heading>3. Sine/Cosine/ArcTangent</.heading>
228232
229233
<.graph :let={graph} id="math_stuff" for={@math_stuff} width={800} height={250}>
230234
<.x_axis :let={degrees} scale={graph[:x_scale]} ticks={9}>
@@ -255,12 +259,15 @@ defmodule PloxDemoWeb.GraphsLive do
255259
"""
256260
end
257261

262+
attr :navigate, :string, default: nil
258263
slot :inner_block, required: true
259264

260265
defp heading(assigns) do
261266
~H"""
262267
<h2 class="bg-slate-100 font-bold p-2 rounded-md w-fit">
263-
<%= render_slot(@inner_block) %>
268+
<.link navigate={@navigate} class="">
269+
<%= render_slot(@inner_block) %>
270+
</.link>
264271
</h2>
265272
"""
266273
end

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

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
defmodule PloxDemoWeb.SimpleLineLive do
2+
@moduledoc """
3+
LiveView displaying the "Simple Line Plot" 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+
data = [
13+
%{date: ~D[2023-08-01], value: 35.0},
14+
%{date: ~D[2023-08-02], value: 60.0},
15+
%{date: ~D[2023-08-03], value: 65.0},
16+
%{date: ~D[2023-08-04], value: 10.0},
17+
%{date: ~D[2023-08-05], value: 50.0}
18+
]
19+
20+
date_scale = date_scale(Date.range(~D[2023-08-01], ~D[2023-08-05]))
21+
number_scale = number_scale(0.0, 80.0)
22+
23+
dataset =
24+
dataset(data,
25+
x: {date_scale, & &1.date},
26+
y: {number_scale, & &1.value}
27+
)
28+
29+
socket =
30+
assign(socket,
31+
graph:
32+
to_graph(
33+
scales: [date_scale: date_scale, number_scale: number_scale],
34+
datasets: [dataset: dataset]
35+
)
36+
)
37+
38+
{:ok, socket}
39+
end
40+
41+
def render(assigns) do
42+
~H"""
43+
<.heading1>Simple Line Plot</.heading1>
44+
45+
<div class="flex flex-col 2xl:flex-row gap-4">
46+
<div class="space-y-4">
47+
<.example_graph graph={@graph} />
48+
49+
<.heading2>HEEx Template</.heading2>
50+
51+
<.code_block code={code()} />
52+
</div>
53+
54+
<div>
55+
<.heading2>Setup</.heading2>
56+
57+
<.code_block code={setup()} />
58+
</div>
59+
</div>
60+
"""
61+
end
62+
63+
defp example_graph(assigns) do
64+
~H"""
65+
<.graph :let={graph} id="simple_line" for={@graph} width="670" height="250">
66+
<:legend>
67+
<.legend_item color="#EC7E16" label="Data" />
68+
</:legend>
69+
70+
<.x_axis :let={date} scale={graph[:date_scale]}>
71+
<%= Calendar.strftime(date, "%-m/%-d") %>
72+
</.x_axis>
73+
74+
<.y_axis :let={value} scale={graph[:number_scale]} ticks={5}>
75+
<%= value %>
76+
</.y_axis>
77+
78+
<.line_plot dataset={graph[:dataset]} />
79+
80+
<.points_plot dataset={graph[:dataset]} />
81+
</.graph>
82+
"""
83+
end
84+
85+
defp code() do
86+
"""
87+
<.graph :let={graph} id="simple_line" for={@graph} width="670" height="250">
88+
<:legend>
89+
<.legend_item color="#EC7E16" label="Data" />
90+
</:legend>
91+
92+
<.x_axis :let={date} scale={graph[:date_scale]}>
93+
<%= Calendar.strftime(date, "%-m/%-d") %>
94+
</.x_axis>
95+
96+
<.y_axis :let={value} scale={graph[:number_scale]} ticks={5}>
97+
<%= value %>
98+
</.y_axis>
99+
100+
<.line_plot dataset={graph[:dataset]} />
101+
102+
<.points_plot dataset={graph[:dataset]} />
103+
</.graph>
104+
"""
105+
end
106+
107+
defp setup() do
108+
"""
109+
# 1. fetch data
110+
111+
data = [
112+
%{date: ~D[2023-08-01], value: 35.0},
113+
%{date: ~D[2023-08-02], value: 60.0},
114+
%{date: ~D[2023-08-03], value: 65.0},
115+
%{date: ~D[2023-08-04], value: 10.0},
116+
%{date: ~D[2023-08-05], value: 50.0}
117+
]
118+
119+
# 2. set up `Plox.Scale`s for the x and y scales
120+
121+
date_scale = date_scale(Date.range(~D[2023-08-01], ~D[2023-08-05]))
122+
number_scale = number_scale(0.0, 80.0)
123+
124+
# 3. set up `Plox.Dataset`s with data and scales
125+
126+
dataset =
127+
dataset(data,
128+
x: {date_scale, & &1.date},
129+
y: {number_scale, & &1.value}
130+
)
131+
132+
# 4. assign newly constructed `Plox.Graph` to the socket
133+
134+
assign(socket,
135+
graph:
136+
to_graph(
137+
scales: [date_scale: date_scale, number_scale: number_scale],
138+
datasets: [dataset: dataset]
139+
)
140+
)
141+
"""
142+
end
143+
144+
# slot :inner_block, required: true
145+
146+
# defp code_block(assigns) do
147+
# ~H"""
148+
# <div class="bg-slate-100 p-4 rounded-md w-fit">
149+
# <%= render_slot(@inner_block) %>
150+
# </div>
151+
# """
152+
# end
153+
end

‎demo/lib/plox_demo_web/router.ex‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ defmodule PloxDemoWeb.Router do
1818
pipe_through :browser
1919

2020
live "/", GraphsLive
21+
live "/simple_line", SimpleLineLive
2122
end
2223

2324
# Other scopes may use custom stacks.

0 commit comments

Comments
 (0)