From 9692944174e770b0e1c6fa6aa59fcbfaafa53c89 Mon Sep 17 00:00:00 2001
From: levin <mail.an.levin@gmail.com>
Date: Sun, 20 Oct 2024 13:32:15 +0000
Subject: [PATCH] new graph

---
 .../live/pages/live_home_page.ex              | 130 +++++++++++++++++-
 mix.exs                                       |   3 +-
 mix.lock                                      |   2 +
 3 files changed, 127 insertions(+), 8 deletions(-)

diff --git a/lib/algground_web/live/pages/live_home_page.ex b/lib/algground_web/live/pages/live_home_page.ex
index 3b69421..9a9df3f 100644
--- a/lib/algground_web/live/pages/live_home_page.ex
+++ b/lib/algground_web/live/pages/live_home_page.ex
@@ -31,33 +31,59 @@ defmodule AlggroundWeb.LiveHomePage do
         }
       end)
 
-    Process.send_after(self(), "new_values", 30_000)
+    Process.send_after(self(), "new_values", 3_000)
 
     {:ok,
      socket
+     |> assign(:groundwater_levels, [
+       trunc(:rand.uniform() * 10),
+       trunc(:rand.uniform() * 100)
+     ])
+     |> assign(:rainfall_levels, [
+       trunc(:rand.uniform() * 10),
+       trunc(:rand.uniform() * 100)
+     ])
+     |> assign(:reservoir_levels, [
+       trunc(:rand.uniform() * 10_000_000),
+       trunc(:rand.uniform() * 10_000_000)
+     ])
      |> assign(:date, Datex.Date.today())
      |> assign(:regions, regions)
      |> assign(:groundwater, trunc(:rand.uniform() * 100))
      |> assign(:rainfall, trunc(:rand.uniform() * 100))
-     |> assign(:reservoirs, trunc(:rand.uniform() * 10_000_000))}
+     |> assign(:reservoirs, trunc(:rand.uniform() * 10_000_000))
+     |> assign(:display_groundwater, true)
+     |> assign(:display_rainfall, false)
+     |> assign(:display_reservoir, false)}
   end
 
   def handle_info("new_values", socket) do
-    Process.send_after(self(), "new_values", 30_000)
+    Process.send_after(self(), "new_values", 1_000)
+
+    groundwater = trunc(:rand.uniform() * 100)
+    rainfall = trunc(:rand.uniform() * 100)
+    reservoir = trunc(:rand.uniform() * 10_000_000)
 
     regions =
       Enum.map(@region_names, fn region ->
         %{
           region: region.region,
-          groundwater: trunc(:rand.uniform() * 100),
-          rainfall: trunc(:rand.uniform() * 100),
-          reservoir: trunc(:rand.uniform() * 10_000_000),
+          groundwater: groundwater,
+          rainfall: rainfall,
+          reservoir: reservoir,
           image: region.image
         }
       end)
 
+    new_groundwaters = maybe_add_value(socket.assigns.groundwater_levels ++ [groundwater])
+    new_rainfalls = maybe_add_value(socket.assigns.rainfall_levels ++ [rainfall])
+    new_reservoirs = maybe_add_value(socket.assigns.reservoir_levels ++ [reservoir])
+
     {:noreply,
      socket
+     |> assign(:groundwater_levels, new_groundwaters)
+     |> assign(:rainfall_levels, new_rainfalls)
+     |> assign(:reservoir_levels, new_reservoirs)
      |> assign(:regions, regions)
      |> assign(:date, Datex.Date.add(socket.assigns.date, 31))
      |> assign(:groundwater, trunc(:rand.uniform() * 100))
@@ -65,6 +91,27 @@ defmodule AlggroundWeb.LiveHomePage do
      |> assign(:reservoirs, trunc(:rand.uniform() * 10_000_000))}
   end
 
+  def handle_event("display_groundwater", _params, socket) do
+    {:noreply,
+     socket
+     |> assign(:display_groundwater, true)
+     |> assign(:display_reservoir, false)}
+  end
+
+  def handle_event("display_rainfall", _params, socket) do
+    {:noreply,
+     socket
+     |> assign(:display_groundwater, false)
+     |> assign(:display_rainfall, true)}
+  end
+
+  def handle_event("display_reservoir", _params, socket) do
+    {:noreply,
+     socket
+     |> assign(:display_rainfall, false)
+     |> assign(:display_reservoir, true)}
+  end
+
   def render(assigns) do
     ~H"""
     <div>
@@ -82,7 +129,7 @@ defmodule AlggroundWeb.LiveHomePage do
           <p class="mx-auto max-w-lg text-pretty text-center font-sm tracking-tight text-gray-400 text-sm">
             Ground Water Level
           </p>
-          <div class="mt-10 grid gap-4 sm:mt-4 ">
+          <div class="mt-10 grid gap-4 sm:mt-4 lg:rounded-t-[2rem]">
             <div class="relative mb-4">
               <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(2rem+1px)]">
                 <div class="flex justify-evenly mb-8">
@@ -108,6 +155,54 @@ defmodule AlggroundWeb.LiveHomePage do
               </div>
             </div>
           </div>
+
+          <%= if @display_groundwater do %>
+            <div class="rounded-sm bg-white lg:rounded-t-[2rem] px-8 pt-4 contain">
+              <%= draw_groundwater(assigns) %>
+            </div>
+            <div class="flex justify-between px-8">
+              <p class="text-md font-medium tracking-tight text-gray-400 max-lg:text-center">
+                Ground Water Level
+              </p>
+              <p phx-click="display_rainfall" class="cursor-pointer">see Rainfall</p>
+              <p class="text-md font-medium tracking-tight text-gray-400 max-lg:text-center">
+                last 2 Quarters
+              </p>
+            </div>
+          <% end %>
+          <%= if @display_rainfall do %>
+            <div class="rounded-sm bg-white lg:rounded-t-[2rem] px-8 pt-4 contain">
+              <%= draw_rainfall(assigns) %>
+            </div>
+            <div class="flex justify-between px-8">
+              <p class="text-md font-medium tracking-tight text-gray-400 max-lg:text-center">
+                Ground Water Level
+              </p>
+              <p phx-click="display_reservoir" class="cursor-pointer">see Reservoir Water Levels</p>
+              <p class="text-md font-medium tracking-tight text-gray-400 max-lg:text-center cursor_pointer">
+                last 2 Quarters
+              </p>
+            </div>
+          <% end %>
+          <%= if @display_reservoir do %>
+            <div class="rounded-sm bg-white lg:rounded-t-[2rem] px-8 pt-4">
+              <%= draw_reservoir(assigns) %>
+            </div>
+            <div class="flex justify-between px-8">
+              <p class="text-md font-medium tracking-tight text-gray-400 max-lg:text-center">
+                Reservoir Water Level
+              </p>
+              <p phx-click="display_groundwater" class="cursor-pointer">see Ground Water Level</p>
+              <p class="text-md font-medium tracking-tight text-gray-400 max-lg:text-center">
+                last 2 Quarters
+              </p>
+            </div>
+          <% end %>
+
+          <div>
+            <.input name="address" type="text" value="" placeholder="see water levels next to me" />
+          </div>
+
           <div class="mb-4"></div>
           <div class="relative">
             <div class="absolute inset-px rounded-lg bg-white lg:rounded-l-[2rem]"></div>
@@ -131,6 +226,21 @@ defmodule AlggroundWeb.LiveHomePage do
     """
   end
 
+  defp draw_groundwater(assigns) do
+    graph = Contex.Sparkline.new(assigns.groundwater_levels)
+    Contex.Sparkline.draw(%{graph | height: 100, width: 600})
+  end
+
+  defp draw_rainfall(assigns) do
+    graph = Contex.Sparkline.new(assigns.rainfall_levels)
+    Contex.Sparkline.draw(%{graph | height: 100, width: 600})
+  end
+
+  defp draw_reservoir(assigns) do
+    graph = Contex.Sparkline.new(assigns.reservoir_levels)
+    Contex.Sparkline.draw(%{graph | height: 100, width: 600})
+  end
+
   defp display_groundwater(assigns) do
     cond do
       assigns.groundwater >= 150 ->
@@ -205,4 +315,10 @@ defmodule AlggroundWeb.LiveHomePage do
         """
     end
   end
+
+  defp maybe_add_value(measurements) when length(measurements) > 25 do
+    Enum.drop(measurements, 1)
+  end
+
+  defp maybe_add_value(measurements), do: measurements
 end
diff --git a/mix.exs b/mix.exs
index f1248dd..70cc594 100644
--- a/mix.exs
+++ b/mix.exs
@@ -59,7 +59,8 @@ defmodule Algground.MixProject do
       {:jason, "~> 1.2"},
       {:dns_cluster, "~> 0.1.1"},
       {:bandit, "~> 1.5"},
-      {:datex, "~> 1.0"}
+      {:datex, "~> 1.0"},
+      {:contex, "~> 0.5.0"}
     ]
   end
 
diff --git a/mix.lock b/mix.lock
index 308c0b0..248e495 100644
--- a/mix.lock
+++ b/mix.lock
@@ -1,6 +1,7 @@
 %{
   "bandit": {:hex, :bandit, "1.5.7", "6856b1e1df4f2b0cb3df1377eab7891bec2da6a7fd69dc78594ad3e152363a50", [:mix], [{:hpax, "~> 1.0.0", [hex: :hpax, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:thousand_island, "~> 1.0", [hex: :thousand_island, repo: "hexpm", optional: false]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "f2dd92ae87d2cbea2fa9aa1652db157b6cba6c405cb44d4f6dd87abba41371cd"},
   "castore": {:hex, :castore, "1.0.9", "5cc77474afadf02c7c017823f460a17daa7908e991b0cc917febc90e466a375c", [:mix], [], "hexpm", "5ea956504f1ba6f2b4eb707061d8e17870de2bee95fb59d512872c2ef06925e7"},
+  "contex": {:hex, :contex, "0.5.0", "5d8a6defbeb41f54adfcb0f85c4756d4f2b84aa5b0d809d45a5d2e90d91d0392", [:mix], [{:nimble_strftime, "~> 0.1.0", [hex: :nimble_strftime, repo: "hexpm", optional: false]}], "hexpm", "b7497a1790324d84247859df44ba4bcf2489d9bba1812a5375b2f2046b9e6fd7"},
   "datex": {:hex, :datex, "1.0.0", "29478d01fd394c6d785bba8d6e79cdd74fee3ae518ccb3ac5fc759a53ea715e2", [:mix], [], "hexpm", "863d1686796e30563613051783723f3ece74f2d84e2d3df2c70b834271586f11"},
   "datix": {:hex, :datix, "0.3.2", "fac7ef37c3de1f535f8f2cce511e2948e72005781661c77e26fb421191724e7f", [:mix], [], "hexpm", "0ed482f82e07c8094a2ee89a00c25ceb18909213730c2d4cb3c21b07f72d0539"},
   "db_connection": {:hex, :db_connection, "2.7.0", "b99faa9291bb09892c7da373bb82cba59aefa9b36300f6145c5f201c7adf48ec", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "dcf08f31b2701f857dfc787fbad78223d61a32204f217f15e881dd93e4bdd3ff"},
@@ -21,6 +22,7 @@
   "mint": {:hex, :mint, "1.6.2", "af6d97a4051eee4f05b5500671d47c3a67dac7386045d87a904126fd4bbcea2e", [:mix], [{:castore, "~> 0.1.0 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: true]}, {:hpax, "~> 0.1.1 or ~> 0.2.0 or ~> 1.0", [hex: :hpax, repo: "hexpm", optional: false]}], "hexpm", "5ee441dffc1892f1ae59127f74afe8fd82fda6587794278d924e4d90ea3d63f9"},
   "nimble_options": {:hex, :nimble_options, "1.1.1", "e3a492d54d85fc3fd7c5baf411d9d2852922f66e69476317787a7b2bb000a61b", [:mix], [], "hexpm", "821b2470ca9442c4b6984882fe9bb0389371b8ddec4d45a9504f00a66f650b44"},
   "nimble_pool": {:hex, :nimble_pool, "1.1.0", "bf9c29fbdcba3564a8b800d1eeb5a3c58f36e1e11d7b7fb2e084a643f645f06b", [:mix], [], "hexpm", "af2e4e6b34197db81f7aad230c1118eac993acc0dae6bc83bac0126d4ae0813a"},
+  "nimble_strftime": {:hex, :nimble_strftime, "0.1.1", "b988184d1bd945bc139b2c27dd00a6c0774ec94f6b0b580083abd62d5d07818b", [:mix], [], "hexpm", "89e599c9b8b4d1203b7bb5c79eb51ef7c6a28fbc6228230b312f8b796310d755"},
   "phoenix": {:hex, :phoenix, "1.7.14", "a7d0b3f1bc95987044ddada111e77bd7f75646a08518942c72a8440278ae7825", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.7", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:websock_adapter, "~> 0.5.3", [hex: :websock_adapter, repo: "hexpm", optional: false]}], "hexpm", "c7859bc56cc5dfef19ecfc240775dae358cbaa530231118a9e014df392ace61a"},
   "phoenix_ecto": {:hex, :phoenix_ecto, "4.6.2", "3b83b24ab5a2eb071a20372f740d7118767c272db386831b2e77638c4dcc606d", [:mix], [{:ecto, "~> 3.5", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.1", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}, {:postgrex, "~> 0.16 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}], "hexpm", "3f94d025f59de86be00f5f8c5dd7b5965a3298458d21ab1c328488be3b5fcd59"},
   "phoenix_html": {:hex, :phoenix_html, "4.1.1", "4c064fd3873d12ebb1388425a8f2a19348cef56e7289e1998e2d2fa758aa982e", [:mix], [], "hexpm", "f2f2df5a72bc9a2f510b21497fd7d2b86d932ec0598f0210fed4114adc546c6f"},