Packages
moon
2.76.2
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/components/charts/line_chart_page.ex
defmodule MoonWeb.Pages.Components.Charts.LineChartPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Components.LineChartCard
alias Moon.Components.Link
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Charts"
},
%{
to: "/components/charts/line-chart",
name: "Line Chart"
}
]
)
def mount(_params, _session, socket) do
filters = [
%{
label: "Active players",
data_key: "actives",
value: "3,174",
color: "frieza",
is_active: true
},
%{
label: "Turnover",
data_key: "turnover",
value: "12,174.23",
color: "krillin",
is_active: true
},
%{
label: "GGR",
data_key: "ggr",
value: "12,174.23",
color: "roshi",
is_active: false
},
%{
label: "Bets",
data_key: "bets",
value: "3,174",
color: "whis",
is_active: true
},
%{
label: "Margin",
data_key: "margin",
value: "5.38%",
color: "chichi",
is_active: false
}
]
socket =
assign(socket,
filters: filters,
select_options: [
[key: "by mobile", value: "mobile"],
[key: "by desktop", value: "desktop"]
],
values: generate_data(filters)
)
{:ok, socket}
end
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Line Chart">
<p>
Based on <Link to="https://vega.github.io/vega-lite/" target="_blank">Vega-Lite</Link>
</p>
</ComponentPageDescription>
<ExampleAndCode layout="column" title="Default" id="line_chart_1">
<:example>
<LineChartCard
id="line-chart-card"
title="KPI Overview"
time_format="%d/%m"
{=@filters}
{=@select_options}
{=@values}
/>
</:example>
<:code>{line_chard_1_code()}</:code>
<:state>@filters = {inspect(@filters, pretty: true)}<br><br>@values = {inspect(@values, pretty: true)}</:state>
</ExampleAndCode>
</Page>
"""
end
def generate_data(filters) do
1..25
|> Enum.to_list()
|> Enum.flat_map(fn day ->
filters
|> Enum.map(fn filter ->
%{
x: "#{day}/06",
y: Enum.random(30..100),
category: filter.data_key
}
end)
end)
end
def line_chard_1_code do
"""
<LineChartCard
id="line-chart-card"
title="KPI Overview"
time_format="%d/%m"
{=@filters}
{=@select_options}
{=@values}
/>
"""
end
end