-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9091f2c
commit a24ab8d
Showing
13 changed files
with
1,540 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,8 @@ | ||
| defmodule ExploringBeamCommunityWeb.Layouts do | ||
| use ExploringBeamCommunityWeb, :html | ||
| import ExploringBeamCommunityWeb.CoreComponents | ||
| import ExploringBeamCommunityWeb.Navbar, only: [navbar: 1] | ||
| import ExploringBeamCommunityWeb.Footer, only: [footer: 1] | ||
| import ExploringBeamCommunityWeb.Components.Navbar, only: [navbar: 1] | ||
| import ExploringBeamCommunityWeb.Components.Footer, only: [footer: 1] | ||
|
|
||
| embed_templates("layouts/*") | ||
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -29,6 +29,19 @@ | |
| <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} /> | ||
| <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}> | ||
| </script> | ||
| <script type="module"> | ||
| import mermaid from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'; | ||
| const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; | ||
|
|
||
| mermaid.initialize({ | ||
| startOnLoad: true, | ||
| theme: isDarkMode ? 'base' : 'default', | ||
| themeVariables: isDarkMode ? { | ||
| primaryTextColor: '#ffffff', | ||
| pieOuterStrokeWidth: '0px', | ||
| } : {pieOuterStrokeWidth: '0px'}, | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body class="bg-white dark:bg-main-900 antialiased text-main-900 dark:text-white"> | ||
| <%= @inner_content %> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| defmodule ExploringBeamCommunityWeb.Components.Question do | ||
| import ExploringBeamCommunityWeb.Components.TypeOfQuestion, | ||
| only: [multiple_choice_question: 1, single_choice_question: 1, range_question: 1] | ||
|
|
||
| import ExploringBeamCommunityWeb.CoreComponents, only: [icon: 1] | ||
|
|
||
| use ExploringBeamCommunityWeb, :live_component | ||
|
|
||
| @impl true | ||
| def mount(socket) do | ||
| base_url = ExploringBeamCommunityWeb.Endpoint.url() | ||
| {:ok, assign(socket, shown_all: false, top: 5, base_url: base_url)} | ||
| end | ||
|
|
||
| @impl true | ||
| def handle_event("toggle_shown_all", _params, socket) do | ||
| {:noreply, update(socket, :shown_all, fn shown -> not shown end)} | ||
| end | ||
|
|
||
| @impl true | ||
| def handle_event("copy_link", %{"question_id" => question_id}, socket) do | ||
| base_url = socket.assigns.base_url | ||
| shareable_link = "#{base_url}/results##{question_id}" | ||
|
|
||
| {:noreply, push_event(socket, "clipboard_copy", %{text: shareable_link})} | ||
| end | ||
|
|
||
| @impl true | ||
| def render(assigns) do | ||
| ~H""" | ||
| <div class="py-12 border-b border-gray-500" id={"q-#{@id}"}> | ||
| <div class="flex"> | ||
| <button | ||
| type="button" | ||
| phx-target={@myself} | ||
| phx-click={JS.push("copy_link", value: %{question_id: "q-#{@id}"})} | ||
| class="text-gray-400 hover:text-blue-700 flex items-center gap-1" | ||
| title="Copy link to this question" | ||
| > | ||
| <.icon name="hero-link" class=" mb-3 w-5 h-5 text-gray-400 hover:text-blue-700 "/> | ||
| </button> | ||
| <p class="ml-2 text-xl mb-3 font-light"> | ||
| <strong><%= @question["QuestionText"] %></strong> | ||
| </p> | ||
| </div> | ||
| <p class="text-sm text-right mr-4"><%= @question["TotalAnswers"] %> answered</p> | ||
| <%= case @question["QuestionType"] do %> | ||
| <% "Multiple-choice" -> %> | ||
| <%= if (length(@question["Options"]) > @top) do%> | ||
| <button | ||
| type="button" | ||
| phx-click="toggle_shown_all" | ||
| phx-target={@myself} | ||
| class="text-main-400 hover:text-main-500 flex items-center gap-2" | ||
| > | ||
| <span> | ||
| <%= if @shown_all do %> | ||
| Show the top-<%=@top%> | ||
| <.icon name="hero-chevron-up" class="w-5 h-5 text-main-500" /> | ||
| <% else %> | ||
| Show all | ||
| <.icon name="hero-chevron-down" class="w-5 h-5 text-main-500" /> | ||
| <% end %> | ||
| </span> | ||
| </button> | ||
| <%end%> | ||
| <.multiple_choice_question options={@question["Options"]} shown_all={@shown_all} top={@top} /> | ||
| <% "Range" -> %> | ||
| <.range_question options={@question["Options"]} /> | ||
| <% "Single-choice" -> %> | ||
| <.single_choice_question options={@question["Options"]} /> | ||
| <% _ -> %> | ||
| <p>An error occurred while rendering this question.</p> | ||
| <% end %> | ||
| <%= if @question["Observation"] do %> | ||
| <p class="mt-8 bg-main-100 border-l-4 border-main-400 text-main-800 p-4 rounded-md shadow-sm"> | ||
| <strong>Observation:</strong> <%= @question["Observation"] %> | ||
| </p> | ||
| <% end %> | ||
| </div> | ||
| """ | ||
| end | ||
| end |
78 changes: 78 additions & 0 deletions
78
lib/exploring_beam_community_web/components/type_of_question.ex
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| defmodule ExploringBeamCommunityWeb.Components.TypeOfQuestion do | ||
| use Phoenix.Component | ||
|
|
||
| attr(:options, :list, required: true) | ||
| attr(:top, :integer, default: 5) | ||
| attr(:shown_all, :boolean, default: true) | ||
|
|
||
| def multiple_choice_question(assigns) do | ||
| assigns = assign(assigns, :options, assigns.options |> Enum.sort_by(& &1["Responses"], :desc)) | ||
|
|
||
| ~H""" | ||
| <div class="mt-4 space-y-3"> | ||
| <%= for option <- if @shown_all, do: @options, else: Enum.take(@options, @top) do %> | ||
| <div class="relative"> | ||
| <span class="block text-right font-semibold my-2 flex justify-between items-center"> | ||
| <span class="text-sm font-bold mb-1"><%= option["Label"] %></span> | ||
| <span class="text-right font-semibold my-2"> | ||
| <span class="text-xs mx-3"><%= option["Responses"] %> resp.</span> | ||
| <span class="text-sm"><%= parse_percentage(option["Percentage"]) || "N/A" %></span> | ||
| </span> | ||
| </span> | ||
| <div class="h-6 rounded-md bg-main-100 relative"> | ||
| <div class="bg-main-500 h-full rounded-md" style={"width: #{String.replace(parse_percentage(option["Percentage"] || "0%"), "%", "")}%;"}></div> | ||
| </div> | ||
| </div> | ||
| <% end %> | ||
| </div> | ||
| """ | ||
| end | ||
|
|
||
| attr(:options, :list, required: true) | ||
|
|
||
| def single_choice_question(assigns) do | ||
| ~H""" | ||
| <div class="mermaid" class="w-full"> | ||
| pie | ||
| <%= for option <- @options do %> | ||
| "<%= option["Label"] %>" : <%= option["Responses"] %> | ||
| <% end %> | ||
| </div> | ||
| """ | ||
| end | ||
|
|
||
| attr(:options, :list, required: true) | ||
|
|
||
| def range_question(assigns) do | ||
| ~H""" | ||
| <div class="mermaid" class="w-full"> | ||
| xychart-beta | ||
| x-axis <%= list_to_text(for option <- @options, do: option["Label"]) %> | ||
| y-axis "Responses" 0 --> <%= Enum.max(for option <- @options, do: option["Responses"])%> | ||
| bar <%= inspect(for option <- @options, do: option["Responses"])%> | ||
| line <%= inspect(for option <- @options, do: option["Responses"])%> | ||
| </div> | ||
| """ | ||
| end | ||
|
|
||
| defp parse_percentage(nil), do: "N/A" | ||
|
|
||
| defp parse_percentage(percentage) when is_binary(percentage) do | ||
| percentage | ||
| |> String.replace("%", "") | ||
| |> String.to_float() | ||
| |> Float.round(1) | ||
| |> Kernel.to_string() | ||
| |> Kernel.<>("%") | ||
| end | ||
|
|
||
| def list_to_text(list) do | ||
| "[" <> | ||
| Enum.join( | ||
| for item <- list do | ||
| "\"#{item}\"" | ||
| end, | ||
| ", " | ||
| ) <> "]" | ||
| end | ||
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,85 @@ | ||
| defmodule ExploringBeamCommunityWeb.ResultsView do | ||
| use ExploringBeamCommunityWeb, :live_view | ||
| alias ExploringBeamCommunityWeb.Components.{Question} | ||
|
|
||
| def mount(_params, _session, socket) do | ||
| slides = | ||
| %{ | ||
| id: "form1", | ||
| path: "/pdf/slides.pdf" | ||
| } | ||
| results = | ||
| case File.read("priv/static/results/dev_gi.json") do | ||
| {:ok, file_content} -> | ||
| case Jason.decode(file_content) do | ||
| {:ok, data} -> data | ||
| {:error, _} -> %{"Questions" => []} | ||
| end | ||
|
|
||
| {:ok, assign(socket, slides: slides, page_title: "Results")} | ||
| {:error, _} -> | ||
| %{"Questions" => []} | ||
| end | ||
|
|
||
| {:ok, assign(socket, results: results, page_title: "Results")} | ||
| end | ||
|
|
||
| def render(assigns) do | ||
| ~H""" | ||
| <div class="p-3 text-center mx-auto "> | ||
| <div class="m-6"> | ||
| <.button phx-click={JS.navigate("/pdf/slides.pdf")}> | ||
| Download PDF <.icon name="hero-arrow-down-on-square" class="h-6 w-6" /> | ||
| </.button> | ||
| </div> | ||
| <div style="position: relative; padding-bottom: 80%; height: 0; overflow: hidden;"> | ||
| <iframe src="/pdf/slides.pdf" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allowfullscreen> | ||
| This browser does not support PDFs. Please download the PDF to view it: <a href="/pdf/slides.pdf">Download PDF</a>. | ||
| </iframe> | ||
| </div> | ||
| </div> | ||
| <!-- Header --> | ||
| <div> | ||
| <div class="text-center mb-8"> | ||
| <h1 class="text-4xl md:text-5xl font-extralight my-4">BEAM <%= @results["Name"]%> Survey <%= @results["Year"]%></h1> | ||
| <p class="text-lg mt-2 font-light "> | ||
| Explore the trends, challenges, and strengths of the BEAM ecosystem from <%= @results["TotalResponses"]%> participants. | ||
| </p> | ||
| </div> | ||
| <!-- Categories Section --> | ||
| <div class="text-center font-light my-8"> | ||
| <div class="flex flex-wrap gap-6 justify-center"> | ||
| <%= for {section, section_index} <- Enum.with_index(@results["Sections"]) do %> | ||
| <%= button_to_section(%{index: section_index, name: section["Name"]}) %> | ||
| <% end %> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- Sections & Questions--> | ||
| <div class="results-container space-y-8"> | ||
| <%= for {section, section_index} <- Enum.with_index(@results["Sections"]) do %> | ||
| <div id={"section-#{section_index}"} class={"section-#{section_index} p-6"}> | ||
| <h3 class="text-2xl text-center font-semibold pb-3 mb-4"> | ||
| <a href={"#section-#{section_index}"}> | ||
| <%= section["Name"] %> | ||
| </a> | ||
| </h3> | ||
| <%= for {question, question_index} <- Enum.with_index(section["Questions"]) do %> | ||
| <.live_component | ||
| module={Question} | ||
| question={question} | ||
| id={"section_#{section_index}_question_#{question_index}" | ||
| }/> | ||
| <% end %> | ||
| </div> | ||
| <% end %> | ||
| </div> | ||
| <!-- Final --> | ||
| <div class="m-4"> | ||
| <h3 class="text-center text-light text-2xl m-4"> ✨ A Big Thank You to All Participants! 💌</h3> | ||
| <p class="text-center"> | ||
| We want to extend our heartfelt gratitude to each and every one of you for your invaluable input. | ||
| 🙏 Your feedback is not just appreciated—it’s truly instrumental in guiding us as we continue to improve and evolve. | ||
| We are incredibly grateful for the time and effort you’ve invested. We keep working to make the next ones better. ❤️💜💗 | ||
| </p> | ||
| </div> | ||
| """ | ||
| end | ||
|
|
||
| def button_to_section(assigns) do | ||
| ~H""" | ||
| <a href={"#section-#{@index}"} class="bg-main-500 text-white py-2 px-4 rounded-md hover:bg-main-700 focus:outline-none focus:ring-2 focus:ring-main-400"> | ||
| <%= @name %> | ||
| </a> | ||
| """ | ||
| end | ||
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.