Packages
moon
2.88.0
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/components/line_chart.ex
defmodule Moon.Components.LineChart do
@moduledoc false
use Moon.StatelessComponent
alias VegaLite, as: Vl
prop(id, :string, required: true)
prop(width, :any, default: "container")
prop(height, :integer, default: 300)
prop(values, :list, default: [])
prop(time_format, :string, default: "%d/%m")
def render(assigns) do
~F"""
<div
id={@id}
phx-hook="VegaLite"
phx-update="ignore"
data-spec={graph_spec(@width, @height, @values, @time_format)}
class="w-full -ml-6"
>
</div>
"""
end
def graph_spec(width, height, values, time_format) do
Vl.new(width: width, height: height)
|> Vl.data_from_values(values,
format: %{parse: %{x: "utc:#{time_format}"}}
)
|> Vl.mark(:line, tooltip: true)
|> Vl.encode_field(:x, "x",
type: :temporal,
title: nil,
axis: %{
domain: false,
ticks: false,
tick_count: %{interval: "day", step: 2},
label_bound: true,
label_expr: "timeFormat(datum.value, '#{time_format}')",
label_color: "#8697A2",
label_font: "Averta Std",
label_font_size: 12,
label_padding: 12
}
)
|> Vl.encode_field(:y, "y",
type: :quantitative,
title: nil,
axis: %{
domain: false,
ticks: false,
label_color: "#8697A2",
label_font: "Averta Std",
label_font_size: 12,
label_padding: 12
}
)
|> Vl.encode_field(:color, "category", type: :nominal)
|> VegaLite.Export.to_json()
end
end