sigma_kit

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: ""

  def bar_chart(assigns) do
    ~H"""
    <.chart
      chart_id={@chart_id}
      class={@class}
      options={
        %{
          type: "bar",
          options: %{
            maintainAspectRatio: false,
            responsive: true,
            tension: 0.4,
            pointRadius: 5,
            scales: %{
              y: %{
                grid: %{
                  display: true,
                  drawBorder: true,
                  drawTicks: true
                },
                ticks: %{
                  display: true
                }
              },
              x: %{
                grid: %{
                  display: true,
                  drawBorder: true
                },
                ticks: %{
                  display: true
                }
              }
            },
            plugins: %{
              legend: %{
                display: false
              }
            },
            interaction: %{
              intersect: false,
              mode: "nearest"
            }
          }
        }
      }
    />
    """
  end
end