Chart v0

config/surface.exs

@@ -38,6 +38,8 @@ config :surface, :components, [
   {Moon.Design.Tabs, propagate_context_to_slots: true},
   {Moon.Design.Tabs.List, propagate_context_to_slots: true},
   {Moon.Design.Tooltip.Content, propagate_context_to_slots: true},
+  # parts part
+  {Moon.Parts.Chart.Field, propagate_context_to_slots: true},
   # app part
   {MoonWeb.Components.ExampleAndCode, propagate_context_to_slots: true},
   {MoonWeb.Components.SidebarLink, propagate_context_to_slots: false}

lib/moon/parts/chart.ex

@@ -0,0 +1,41 @@
+defmodule Moon.Parts.Chart do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  @doc "Just an id for a table tag"
+  prop(id, :string)
+
+  @doc "Data-testid attribute for a table tag"
+  prop(testid, :string)
+
+  @doc "Additional classes for a table tag"
+  prop(class, :css_class)
+
+  # @doc "Labels for x-axis"
+  # prop(labels, :list, default: [])
+
+  # @doc "List of lines - lists of values to be shown"
+  # prop(data, :list, default: [])
+
+  @doc "HTML-grid-formatted inner content of the chart - axis, field, etc."
+  slot(default)
+
+  def render(assigns) do
+    ~F"""
+    <div
+      {=@id}
+      class={merge([
+        "w-full",
+        "grid gap-4 place-items-stretch",
+        "grid-cols-[auto_1fr]",
+        "grid-rows-[1fr_auto]",
+        @class
+      ])}
+      data-testid={@testid}
+    >
+      <#slot />
+    </div>
+    """
+  end
+end

lib/moon/parts/chart/axis_x.ex

@@ -0,0 +1,32 @@
+defmodule Moon.Parts.Chart.AxisX do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  @doc "Just an id for a table tag"
+  prop(id, :string)
+
+  @doc "Data-testid attribute for a table tag"
+  prop(testid, :string)
+
+  @doc "Additional classes for a table tag"
+  prop(class, :css_class)
+
+  @doc "Labels for axis"
+  prop(labels, :list, default: [])
+
+  @doc "Label for the axis"
+  slot(default)
+
+  def render(assigns) do
+    ~F"""
+    <div
+      data-testid={@testid}
+      {=@id}
+      class={merge(["flex min-h-8 justify-around col-start-2 row-start-2 flex-row", @class])}
+    >
+      <span :for={label <- @labels}>{label}</span>
+    </div>
+    """
+  end
+end

lib/moon/parts/chart/axis_y.ex

@@ -0,0 +1,35 @@
+defmodule Moon.Parts.Chart.AxisY do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  @doc "Just an id for a table tag"
+  prop(id, :string)
+
+  @doc "Data-testid attribute for a table tag"
+  prop(testid, :string)
+
+  @doc "Additional classes for a table tag"
+  prop(class, :css_class)
+
+  @doc "Labels for axis"
+  prop(labels, :list, default: [])
+
+  @doc "Axis label"
+  slot(default)
+
+  def render(assigns) do
+    ~F"""
+    <div
+      {=@id}
+      data-testid={@testid}
+      class={merge([
+        "flex min-w-8 content-around col-start-1 row-start-1 flex-col-reverse",
+        @class
+      ])}
+    >
+      <span :for={label <- @labels}>{label}</span>
+    </div>
+    """
+  end
+end

lib/moon/parts/chart/corner.ex

@@ -0,0 +1,32 @@
+defmodule Moon.Parts.Chart.Corner do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  @doc "Just an id for a table tag"
+  prop(id, :string)
+
+  @doc "Data-testid attribute for a table tag"
+  prop(testid, :string)
+
+  @doc "Additional classes for a table tag"
+  prop(class, :css_class)
+
+  @doc "Inner content of the corner"
+  slot(default)
+
+  def render(assigns) do
+    ~F"""
+    <div
+      {=@id}
+      class={merge([
+        "min-w-8 min-h-8 col-start-1 row-start-2",
+        @class
+      ])}
+      data-testid={@testid}
+    >
+      <#slot> </#slot>
+    </div>
+    """
+  end
+end

lib/moon/parts/chart/field.ex

@@ -0,0 +1,45 @@
+defmodule Moon.Parts.Chart.Field do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  @doc "Just an id for a table tag"
+  prop(id, :string)
+
+  @doc "Data-testid attribute for a table tag"
+  prop(testid, :string)
+
+  @doc "Additional classes for a table tag"
+  prop(class, :css_class)
+
+  # @doc "Labels for x-axis"
+  # prop(labels, :list, default: [])
+
+  # @doc "List of lines - lists of values to be shown"
+  # prop(data, :list, default: [])
+
+  @doc "Min value on a graph"
+  prop(min, :integer, required: true)
+
+  @doc "Max value on a graph"
+  prop(max, :integer, required: true)
+
+  @doc "HTML-grid-formatted inner content of the "
+  slot(default)
+
+  @spec render(map) :: Phoenix.LiveView.Rendered.t()
+  def render(assigns) do
+    ~F"""
+    <div
+      {=@id}
+      class={merge([
+        "relative col-start-2 row-start-1",
+        @class
+      ])}
+      data-testid={@testid}
+    >
+      <#slot context_put={min: @min, max: @max} />
+    </div>
+    """
+  end
+end

lib/moon/parts/chart/histo.ex

@@ -0,0 +1,45 @@
+defmodule Moon.Parts.Chart.Histo do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  @doc "Just an id for a table tag"
+  prop(id, :string)
+
+  @doc "Data-testid attribute for a table tag"
+  prop(testid, :string)
+
+  @doc "Additional classes for a table tag"
+  prop(class, :css_class)
+
+  @doc "Line - lists of integer values to be shown"
+  prop(data, :list, default: [])
+
+  @doc "Min value on a graph"
+  prop(min, :integer, from_context: :min)
+
+  @doc "Max value on a graph"
+  prop(max, :integer, from_context: :max)
+
+  @doc "Line color and other css props"
+  prop(color, :css_class)
+
+  def render(assigns) do
+    ~F"""
+    <div
+      {=@id}
+      class={merge([
+        "flex justify-around items-end absolute inset-0",
+        @class
+      ])}
+      data-testid={@testid}
+    >
+      <div
+        :for={height <- @data}
+        class={merge(["w-4 bg-krillin rounded-t-full", @color])}
+        style={"height: #{(height - @min) * 100.0 / (@max - @min)}%"}
+      > </div>
+    </div>
+    """
+  end
+end

lib/moon_web/examples/parts/chart_example/default.ex

@@ -0,0 +1,28 @@
+defmodule MoonWeb.Examples.Parts.ChartExample.Default do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  use MoonWeb, :example
+
+  alias Moon.Parts.Chart
+
+  def render(assigns) do
+    ~F"""
+    <Chart>
+      <Chart.AxisX labels={~w(one two three five)} />
+      <Chart.AxisY labels={1..5 |> Enum.to_list() |> Enum.map(&(&1 * 100))} />
+      <Chart.Field min={100} max={500}>
+        <Chart.Histo data={[411, 370, 456, 376]} color="bg-hit" class="translate-x-1" />
+        <Chart.Histo data={[311, 270, 406, 176]} color="bg-krillin" class="-translate-x-1" />
+      </Chart.Field>
+    </Chart>
+    """
+  end
+
+  def code() do
+    """
+
+    """
+  end
+end

lib/moon_web/pages/example_page.ex

@@ -12,8 +12,7 @@ defmodule MoonWeb.Pages.ExamplePage do
   def mount(params, _session, socket) do
     {:ok,
      assign(socket,
-       example_module:
-         String.to_existing_atom("Elixir.MoonWeb.Examples.Design." <> params["example"]),
+       example_module: String.to_existing_atom("Elixir.MoonWeb.Examples." <> params["example"]),
        direction: params["direction"] || "ltr",
        theme_name: params["theme_name"] || "theme-moon-light"
      )}

test/moon_web/examples/accordion/content_outside_test.exs

@@ -2,7 +2,7 @@ defmodule MoonWeb.Examples.Accordion.ContentOutsideTest do
   use MoonWeb.ConnCase, async: true
 
   test "should contain example with content outside", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/AccordionExample.ContentOutside")
+    {:ok, view, _html} = live(conn, "/example/Design.AccordionExample.ContentOutside")
 
     assert view
            |> element("#outside-accordion button[value=0][is-content-outside=true]")

test/moon_web/examples/accordion/default_test.exs

@@ -2,7 +2,7 @@ defmodule MoonWeb.Examples.Accordion.DefaultTest do
   use MoonWeb.ConnCase, async: true
 
   test "should expand and collapse", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/AccordionExample.Default")
+    {:ok, view, _html} = live(conn, "/example/Design.AccordionExample.Default")
 
     refute view
            |> element("#simple-accordion button[value=0][aria-expanded=true]")

test/moon_web/examples/accordion/disabled_item_test.exs

@@ -2,7 +2,7 @@ defmodule MoonWeb.Examples.Accordion.DisabledItemTest do
   use MoonWeb.ConnCase, async: true
 
   test "should have one disabled item", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/AccordionExample.DisabledItem")
+    {:ok, view, _html} = live(conn, "/example/Design.AccordionExample.DisabledItem")
 
     refute view
            |> element("#disabled-accordion button[value=0][aria-expanded=true]")

test/moon_web/examples/accordion/on_change_event_test.exs

@@ -2,7 +2,7 @@ defmodule MoonWeb.Examples.Accordion.OnChangeEventTest do
   use MoonWeb.ConnCase, async: true
 
   test "should change colour", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/AccordionExample.OnChangeEvent")
+    {:ok, view, _html} = live(conn, "/example/Design.AccordionExample.OnChangeEvent")
 
     assert view
            |> element("#on-change-accordion button.bg-goku[value=bg-krillin]")

test/moon_web/examples/accordion/open_by_default_test.exs

@@ -2,7 +2,7 @@ defmodule MoonWeb.Examples.Accordion.OpenByDefaultTest do
   use MoonWeb.ConnCase, async: true
 
   test "should be open by default", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/AccordionExample.OpenByDefault")
+    {:ok, view, _html} = live(conn, "/example/Design.AccordionExample.OpenByDefault")
 
     assert view
            |> element("#open-accordion button[value=0][aria-expanded=true]")

test/moon_web/examples/accordion/single_open_test.exs

@@ -2,7 +2,7 @@ defmodule MoonWeb.Examples.Accordion.SingleOpenTest do
   use MoonWeb.ConnCase, async: true
 
   test "should expand one and collapse others", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/AccordionExample.SingleOpen")
+    {:ok, view, _html} = live(conn, "/example/Design.AccordionExample.SingleOpen")
 
     refute view
            |> element("#single-accordion button[value=0][aria-expanded=true]")

test/moon_web/examples/accordion/sizes_test.exs

@@ -2,7 +2,7 @@ defmodule MoonWeb.Examples.Accordion.SizesTest do
   use MoonWeb.ConnCase, async: true
 
   test "should contain Accordion items with all sizes", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/AccordionExample.Sizes")
+    {:ok, view, _html} = live(conn, "/example/Design.AccordionExample.Sizes")
 
     assert view
            |> element("#accordion-sizes-xl button[value=0][size=xl]")

test/moon_web/examples/alert/handle_close_test.exs

@@ -2,7 +2,7 @@ defmodule MoonWeb.Examples.Alert.HandleCloseTest do
   use MoonWeb.ConnCase, async: true
 
   test "should close and open alert", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/AlertExample.HandleClose")
+    {:ok, view, _html} = live(conn, "/example/Design.AlertExample.HandleClose")
 
     assert view |> element("div[role=alert] button[data-size=xs]") |> has_element?()
 

test/moon_web/examples/bottom_sheet/customization_test.exs

@@ -2,7 +2,7 @@ defmodule MoonWeb.Examples.BottomSheet.CustomizationTest do
   use MoonWeb.ConnCase, async: true
 
   test "should open and close BottomSheet", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/BottomSheetExample.Customization")
+    {:ok, view, _html} = live(conn, "/example/Design.BottomSheetExample.Customization")
 
     button_to_open_bottomsheet = view |> element("button[data-size=md]")
     assert button_to_open_bottomsheet |> render() =~ "Customized Bottom Sheet"

test/moon_web/examples/bottom_sheet/default_test.exs

@@ -2,7 +2,7 @@ defmodule MoonWeb.Examples.BottomSheet.DefaultTest do
   use MoonWeb.ConnCase, async: true
 
   test "should open and close BottomSheet", %{conn: conn} do
-    {:ok, view, _html} = live(conn, "/example/BottomSheetExample.Default")
+    {:ok, view, _html} = live(conn, "/example/Design.BottomSheetExample.Default")
 
     button_to_open_bottomsheet = view |> element("button[data-size=md]")
     assert button_to_open_bottomsheet |> render() =~ "Default Bottom Sheet"