Packages
moon
2.87.7
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/parts/chart/histo.ex
defmodule Moon.Parts.Chart.Histo do
@moduledoc false
use Moon.StatelessComponent
@doc "Just an id for a table tag"
prop(id, :string)
@doc "Data-testid attribute for a table tag"
prop(testid, :string)
@doc "Additional classes for a table tag"
prop(class, :css_class)
@doc "Line - lists of integer values to be shown"
prop(data, :list, default: [])
@doc "Min value on a graph"
prop(min, :integer, from_context: :min)
@doc "Max value on a graph"
prop(max, :integer, from_context: :max)
@doc "Line color and other css props"
prop(color, :css_class)
def render(assigns) do
~F"""
<div
{=@id}
class={merge([
"flex justify-around items-end absolute inset-0",
@class
])}
data-testid={@testid}
>
<div
:for={height <- @data}
class={merge(["w-4 bg-krillin rounded-t-full", @color])}
style={"height: #{(height - @min) * 100.0 / (@max - @min)}%"}
> </div>
</div>
"""
end
end