Skip to content

Axis and Grid Helpers #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nkyllonen wants to merge 16 commits into
base: philosophical-rewrite
Choose a base branch
from
Open

Axis and Grid Helpers #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
2668c8e
Add text and line components + position helper fns
nkyllonen Jan 16, 2026
9668d44
Update demo_live to use new text and line components for labels and g…
nkyllonen Jan 16, 2026
dbd623d
Add Constants module for organization
nkyllonen Jan 16, 2026
f0dc91a
Replace new text/line components with text/line SVG elements
nkyllonen Jan 16, 2026
700b160
Add new Axis and Grid helper modules
nkyllonen Jan 20, 2026
972454a
Update DemoLive to use new Axis and Grid helpers
nkyllonen Jan 20, 2026
3445a09
Update new Axis and Grid helpers
nkyllonen Jan 21, 2026
9f679c9
Update AnimatedDemoLive to use new Axis and Grid helpers
nkyllonen Jan 21, 2026
c14d849
Remove dimensions from Axis label helpers and require XAxis or YAxis …
nkyllonen Jan 21, 2026
f718628
Update README and migration guide to use new Axis and Grid helpers
nkyllonen Jan 21, 2026
7479edd
Remove old label and grid line components
nkyllonen Jan 21, 2026
5ecdd91
Add dominant-baseline and text-anchor attrs so that they are customiz…
nkyllonen Jan 21, 2026
a16c0b3
Apply suggestions from code review
nkyllonen Jan 22, 2026
a808319
Test scale_values/2 delegates to Scale.values/2
nkyllonen Jan 23, 2026
6038dbc
Update positional helpers to include padding + Add tests
nkyllonen Jan 23, 2026
1893ef2
Make positional helper tests easier to understand
nkyllonen Jan 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,6 @@ plox-*.tar

# Temporary files, for example, from tests.
/tmp/

# Ignore "Desktop Services Store" hidden file
.DS_Store
12 changes: 6 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,16 +58,16 @@ Once you have those, you can render a `graph` component within your HEEx templat

```html
<.graph id="example_graph" dimensions={@dimensions}>
<.x_axis_labels :let={date} axis={@x_axis}>
<Plox.Helpers.Axis.x_labels :let={date} axis={@x_axis}>
{Calendar.strftime(date, "%-m/%-d")}
</.x_axis_labels>
</Plox.Helpers.Axis.x_labels>

<.y_axis_labels :let={value} axis={@y_axis} ticks={5}>
<Plox.Helpers.Axis.y_labels :let={value} axis={@y_axis} ticks={5}>
{value}
</.y_axis_labels>
</Plox.Helpers.Axis.y_labels>

<.x_axis_grid_lines axis={@x_axis} stroke="#D3D3D3" />
<.y_axis_grid_lines axis={@y_axis} ticks={5} stroke="#D3D3D3" />
<Plox.Helpers.Grid.vertical_lines axis={@x_axis} dimensions={@dimensions} />
<Plox.Helpers.Grid.horizontal_lines axis={@y_axis} dimensions={@dimensions} ticks={5} />

<.polyline points={points(@dataset[:x], @dataset[:y])} stroke="#EC7E16" stroke-width={2} />

Expand Down
24 changes: 17 additions & 7 deletions docs/migration_guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,16 +92,26 @@ dataset =
```html
<.graph id="example_graph" dimensions={@dimensions}>
<!-- Render axis labels and lines individually -->
<.x_axis_labels :let={date} axis={@x_axis}>
<Plox.Helpers.Axis.x_labels :let={date} axis={@x_axis}>
{Calendar.strftime(date, "%-m/%-d")}
</.x_axis_labels>
</Plox.Helpers.Axis.x_labels>

<.y_axis_labels :let={value} axis={@y_axis} ticks={5}>
<Plox.Helpers.Axis.y_labels :let={value} axis={@y_axis} ticks={5}>
{value}
</.y_axis_labels>

<.x_axis_grid_lines axis={@x_axis} stroke="#D3D3D3" />
<.y_axis_grid_lines axis={@y_axis} ticks={5} stroke="#D3D3D3" />
</Plox.Helpers.Axis.y_labels>

<Plox.Helpers.Grid.vertical_lines
axis={@x_axis}
dimensions={@dimensions}
stroke="#D3D3D3"
/>

<Plox.Helpers.Grid.horizontal_lines
axis={@y_axis}
dimensions={@dimensions}
ticks={5}
stroke="#D3D3D3"
/>

<!-- Use the `points/2` helper to generate a list of {x, y} tuples from our Dataset -->
<.polyline points={points(@dataset[:x], @dataset[:y])} stroke="#EC7E16" stroke-width={2} />
Expand Down
57 changes: 44 additions & 13 deletions examples/animated_demo_live.exs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ defmodule AnimatedDemoLive do

import Plox

alias Plox.Helpers.Axis
alias Plox.Helpers.Grid

@interval 1000

@impl Phoenix.LiveView
Expand Down Expand Up @@ -83,26 +86,54 @@ defmodule AnimatedDemoLive do
def render(assigns) do
~H"""
<.graph dimensions={@dimensions}>
<.y_axis_labels :let={value} axis={@y_axis} ticks={5}>
<Axis.y_labels :let={value} axis={@y_axis} ticks={5}>
{value}
</.y_axis_labels>
</Axis.y_labels>

<.y_axis_grid_lines axis={@y_axis} ticks={5} stroke="#D3D3D3" />
<Grid.horizontal_lines axis={@y_axis} dimensions={@dimensions} ticks={5} />

<.x_axis_labels :let={datetime} axis={@x_axis} step={5} start={@nearest_5_second}>
<Axis.x_labels :let={datetime} axis={@x_axis} step={5} start={@nearest_5_second}>
{Calendar.strftime(datetime, "%-I:%M:%S")}
</.x_axis_labels>
</Axis.x_labels>

<.x_axis_grid_lines axis={@x_axis} step={5} start={@nearest_5_second} stroke="#D3D3D3" />
<.x_axis_grid_line axis={@x_axis} value={@x_axis.scale.first} stroke="#D3D3D3" />
<.x_axis_grid_line axis={@x_axis} value={@x_axis.scale.last} stroke="#D3D3D3" />
<Grid.vertical_lines axis={@x_axis} dimensions={@dimensions} step={5} start={@nearest_5_second} />

<%!-- vertical marker for "now" with a label --%>
<.x_axis_label axis={@x_axis} value={@now} position={:top} stroke="red">
Now ({Calendar.strftime(@now, "%-I:%M:%S")})
</.x_axis_label>
<%!-- draw left boundary of the graph --%>
<line
x1={graph_left(@dimensions)}
x2={graph_left(@dimensions)}
y1={graph_top(@dimensions)}
y2={graph_bottom(@dimensions)}
stroke="#D3D3D3"
/>

<.x_axis_grid_line axis={@x_axis} value={@now} stroke="red" />
<%!-- draw right boundary of the graph --%>
<line
x1={graph_right(@dimensions)}
x2={graph_right(@dimensions)}
y1={graph_top(@dimensions)}
y2={graph_bottom(@dimensions)}
stroke="#D3D3D3"
/>

<%!-- vertical marker for "now" with a label above the graph --%>
<text
x={@x_axis[@now]}
y={above_graph(@dimensions)}
dominant-baseline="text-bottom"
text-anchor="middle"
stroke="red"
>
({Calendar.strftime(@now, "%-I:%M:%S")})
</text>

<line
x1={@x_axis[@now]}
x2={@x_axis[@now]}
y1={graph_top(@dimensions)}
y2={graph_bottom(@dimensions)}
stroke="red"
/>

<.polyline points={points(@dataset1[:x], @dataset1[:y])} stroke="orange" stroke-width="2" />
<.polyline points={points(@dataset2[:x], @dataset2[:y])} stroke="blue" stroke-width="2" />
Expand Down
38 changes: 25 additions & 13 deletions examples/demo_live.exs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ defmodule DemoLive do

import Plox

alias Plox.Helpers.Axis
alias Plox.Helpers.Grid

@impl Phoenix.LiveView
def mount(_params, _session, socket) do
{:ok, mount_simple_line_graph(socket)}
Expand Down Expand Up @@ -69,22 +72,31 @@ defmodule DemoLive do
<h2>Example graph</h2>

<.graph dimensions={@dimensions}>
<.x_axis_labels :let={date} axis={@x_axis}>
<%!-- X-axis labels --%>
<Axis.x_labels :let={date} axis={@x_axis}>
{Calendar.strftime(date, "%-m/%-d")}
</.x_axis_labels>

<%!-- this wraps text... why does it take in `axis`?? if we want to follow the SVG, we need to pass in `x` --%>
<.x_axis_label axis={@x_axis} value={~D[2023-08-02]} position={:top} color="red">
{"Important Day"}
</.x_axis_label>

<.x_axis_grid_lines axis={@x_axis} stroke="#D3D3D3" />

<.y_axis_labels :let={value} axis={@y_axis} ticks={5}>
</Axis.x_labels>

<%!-- Add label for a specific date above the graph --%>
<text
x={@x_axis[~D[2023-08-02]]}
y={above_graph(@dimensions)}
dominant-baseline="text-bottom"
text-anchor="middle"
>
Important Day
</text>

<%!-- X-axis grid lines --%>
<Grid.vertical_lines axis={@x_axis} dimensions={@dimensions} ticks={5} />

<%!-- Y-axis labels --%>
<Axis.y_labels :let={value} axis={@y_axis} ticks={5}>
{value}
</.y_axis_labels>
</Axis.y_labels>

<.y_axis_grid_lines axis={@y_axis} ticks={5} stroke="#D3D3D3" />
<%!-- Y-axis grid lines --%>
<Grid.horizontal_lines axis={@y_axis} dimensions={@dimensions} ticks={5} />

<.polyline points={points(@dataset[:x], @dataset[:y])} stroke="orange" stroke-width={2} />

Expand Down
Loading