Current section
Files
Jump to
Current section
Files
lib/components/charts.ex
defmodule SigmaKit.Components.Charts do
use Phoenix.LiveComponent
# prop y_label_format, :string, options: ["dollar", "percent"]
attr :chart_id, :string, required: true
attr :options, :map, required: true
attr :class, :any, default: ""
attr :autocolor, :boolean, default: false
attr :canvas_width, :string, default: "100%"
attr :canvas_height, :string, default: "100%"
attr :y_label_format, :any, default: nil
def chart(assigns) do
~H"""
<div
phx-update="ignore"
phx-hook="ChartJsHook"
id={"chart_js_#{Ecto.UUID.generate()}"}
class={@class}
data-chart-options={Jason.encode!(@options)}
data-autocolor={"#{@autocolor}"}
data-y-label-format={@y_label_format}
data-event={@chart_id}
>
<canvas style="height: #{@canvas_height} !important; width: #{@canvas_width} !important;">
</canvas>
</div>
"""
end
attr :chart_id, :string, required: true
attr :class, :any, default: ""
attr :rest, :global
def bar_chart(assigns) do
~H"""
<.chart chart_id={@chart_id} class={@class} options={build_options("bar", @rest)} />
"""
end
attr :chart_id, :string, required: true
attr :class, :any, default: ""
attr :rest, :global
def line_chart(assigns) do
~H"""
<.chart chart_id={@chart_id} class={@class} options={build_options("line", @rest)} />
"""
end
attr :chart_id, :string, required: true
attr :class, :any, default: ""
attr :rest, :global
def pie_chart(assigns) do
~H"""
<.chart
chart_id={@chart_id}
class={@class}
options={build_options("pie", @rest, grid: false, legend: true)}
/>
"""
end
attr :chart_id, :string, required: true
attr :class, :any, default: ""
attr :rest, :global
def scatter_chart(assigns) do
~H"""
<.chart chart_id={@chart_id} class={@class} options={build_options("scatter", @rest)} />
"""
end
attr :chart_id, :string, required: true
attr :class, :any, default: ""
attr :rest, :global
def bubble_chart(assigns) do
~H"""
<.chart chart_id={@chart_id} class={@class} options={build_options("bubble", @rest)} />
"""
end
defp build_options(type, opts, defaults \\ []) do
opts = Enum.into(defaults, opts)
grid = Map.get(opts, :grid, true)
legend = Map.get(opts, :legend, false)
%{
type: type,
options: %{
maintainAspectRatio: false,
responsive: true,
tension: 0.4,
pointRadius: 5,
scales: %{
y: %{
border: %{
display: false
},
grid: %{
display: grid,
drawBorder: grid,
drawTicks: grid
},
ticks: %{
display: grid
}
},
x: %{
border: %{
display: false
},
grid: %{
display: grid,
drawBorder: grid
},
ticks: %{
display: grid
}
}
},
plugins: %{
legend: %{
display: legend
}
},
interaction: %{
intersect: false,
mode: "nearest"
}
}
}
end
end