Skip to content

Commit 5419f97

Browse files
phonnzphonnz
committed
Upgrade dashboard view
1 parent a004760 commit 5419f97

File tree

2 files changed

+46
-43
lines changed

2 files changed

+46
-43
lines changed

‎fullstack/lib/fullstack_web/live/public/public_transactions.ex

+3-3
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ defmodule FullstackWeb.Public.TransactionsLive.PublicTransactions do
9191
colour_palette: :default
9292
]
9393

94-
Plot.new(test_data, BarChart, 500, 400, options)
94+
Plot.new(test_data, BarChart, 500, 350, options)
9595
|> Plot.axis_labels("Month", "New Customers")
9696
|> Plot.to_svg()
9797
end
@@ -117,7 +117,7 @@ defmodule FullstackWeb.Public.TransactionsLive.PublicTransactions do
117117
colour_palette: :default
118118
]
119119

120-
Plot.new(test_data, PointPlot, 500, 400, options)
120+
Plot.new(test_data, PointPlot, 500, 300, options)
121121
|> Plot.axis_labels("Day", "Count / Amount")
122122
|> Plot.to_svg()
123123
end
@@ -182,7 +182,7 @@ defmodule FullstackWeb.Public.TransactionsLive.PublicTransactions do
182182
end
183183

184184
plot =
185-
Plot.new(dataset, module, 600, 400, options)
185+
Plot.new(dataset, module, 500, 300, options)
186186
|> Plot.titles(chart_options.title, nil)
187187
|> Plot.plot_options(plot_options)
188188

‎fullstack/lib/fullstack_web/live/public/public_transactions.html.heex

+43-40
Original file line numberDiff line numberDiff line change
@@ -7,42 +7,12 @@
77
<div class="md:p-2 p-1 w-1/2">
88
<%= build_pointplot(@point_data, @point_options) %>
99
</div>
10-
<div class="flex flex-wrap md:p-2 p-1 w-3/4">
11-
<div class="p-1 w-full">
12-
<div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
13-
<dl class="mt-6 grid grid-cols-1 gap-4 sm:mt-8 sm:grid-cols-1 lg:grid-cols-2">
14-
<div class="flex flex-col rounded-lg bg-blue-50 px-4 py-8 text-center">
15-
<dt class="order-last text-lg font-medium text-gray-500">Total Transactions</dt>
16-
<dd class="text-xl font-extrabold text-blue-600 md:text-3xl">
17-
<%= @info.transactions_count %>
18-
</dd>
19-
</div>
20-
<div class="flex flex-col rounded-lg bg-blue-50 px-4 py-8 text-center">
21-
<dt class="order-last text-lg font-medium text-gray-500">Total Sales</dt>
22-
23-
<dd class="text-xl font-extrabold text-blue-600 md:text-2xl">
24-
<%= @info.total_amount %>
25-
</dd>
26-
</div>
27-
</dl>
28-
</div>
29-
</div>
30-
<div class="md:p-2 p-1 w-full">
31-
<.table id="devices" rows={@devices}>
32-
<:col :let={device} label="Identifier"><%= device.id %></:col>
33-
<:col :let={device} label="AVG speed">1 Mb</:col>
34-
<:col :let={device} label="">
35-
<%= make_red_plot(@test_data) %>
36-
</:col>
37-
</.table>
38-
</div>
39-
</div>
4010
<div class="md:p-2 p-1 w-1/4">
41-
<h2 class="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">
11+
<h2 class="font-medium title-font tracking-widest text-gray-900 mt-10 mb-4 text-sm text-center sm:text-left">
4212
TOP CUSTOMERS
4313
</h2>
44-
<nav class="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2.5">
45-
<a :for={customer <- @info.top_customers} id={customer}>
14+
<div class="flex flex-col sm:items-start sm:text-left font-small text-center items-center -mb-1 space-y-2.5">
15+
<a :for={customer <- @info.top_customers} id={customer} class="text-sm">
4616
<span class="bg-yellow-100 text-yellow-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center">
4717
<svg
4818
fill="none"
@@ -58,13 +28,15 @@
5828
</span>
5929
<%= customer %>
6030
</a>
61-
</nav>
31+
</div>
32+
</div>
33+
<div class="md:p-2 p-1 w-1/4">
6234
<h2 class="font-medium title-font tracking-widest text-gray-900 mt-10 mb-4 text-sm text-center sm:text-left">
6335
LAST CUSTOMERS
6436
</h2>
65-
<nav class="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2.5">
66-
<a :for={customer <- @info.last_customers} id={customer}>
67-
<span class="bg-yellow-100 text-yellow-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center">
37+
<div class="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2.5 text-base">
38+
<a :for={customer <- @info.last_customers} id={customer} class="text-sm">
39+
<span class="bg-yellow-100 text-yellow-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center ">
6840
<svg
6941
fill="none"
7042
stroke="currentColor"
@@ -79,12 +51,43 @@
7951
</span>
8052
<%= customer %>
8153
</a>
82-
</nav>
54+
</div>
55+
</div>
56+
<div class="flex flex-wrap md:p-2 p-1 w-1/2">
57+
<div class="p-1 w-full">
58+
<div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
59+
<dl class="mt-2 grid grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2">
60+
<div class="flex flex-col rounded-lg bg-blue-50 px-2 py-4 text-center">
61+
<dt class="order-last text-lg font-medium text-gray-500">Total Transactions</dt>
62+
<dd class="text-xl font-extrabold text-blue-600 md:text-3xl">
63+
<%= @info.transactions_count %>
64+
</dd>
65+
</div>
66+
<div class="flex flex-col rounded-lg bg-blue-50 px-2 py-4 text-center">
67+
<dt class="order-last text-lg font-medium text-gray-500">Total Sales</dt>
68+
<dd class="text-xl font-extrabold text-blue-600 md:text-2xl">
69+
<%= @info.total_amount %>
70+
</dd>
71+
</div>
72+
</dl>
73+
</div>
74+
</div>
8375
</div>
8476
</div>
85-
<div class="items-center ">
77+
<div class="p-1 w-3/4">
78+
<.table id="devices" rows={@devices}>
79+
<:col :let={device} label="Identifier"><%= device.id %></:col>
80+
<:col :let={device} label="AVG speed">1 Mb</:col>
81+
<:col :let={device} label="">
82+
<%= make_red_plot(@test_data) %>
83+
</:col>
84+
</.table>
85+
</div>
86+
87+
<div class="items-center w-1/4 ">
8688
<pre class="text-gray-300 bg-gray-800 code p-4 rounded-md whitespace-pre overflow-x-auto">
87-
<code> <%= inspect(@info.monthly_data, pretty: true) %>
89+
<code>
90+
<%= inspect(@info.monthly_data, pretty: true) %>
8891
</code>
8992
</pre>
9093
</div>

0 commit comments

Comments
 (0)