Tapir.Components (Tapir v0.1.0)

View Source

Phoenix LiveView components for rendering interactive charts from Ash resources.

This module provides reusable chart components that integrate with Ash Framework and Chart.js to create beautiful, interactive visualizations.

Basic Usage

<.ash_chart 
  resource={MyApp.User}
  chart_type={:bar}
  x_field={:role}
  y_field={:count}
  title="Users by Role"
/>

Available Chart Types

  • :bar - Bar charts
  • :line - Line charts
  • :pie - Pie charts
  • :doughnut - Doughnut charts
  • :radar - Radar charts

Convenience Components

For common use cases, you can use the simplified components:

Summary

Functions

ash_chart(assigns)

Renders a chart based on Ash resource data.

bar_chart(assigns)

Simplified bar chart component for quick use.

line_chart(assigns)

Simplified line chart component for time series data.

pie_chart(assigns)

Simplified pie chart component.

Functions

ash_chart(assigns)

Renders a chart based on Ash resource data.

Examples

<.ash_chart 
  resource={MyApp.User}
  chart_type={:bar}
  x_field={:created_at}
  y_field={:count}
  title="User Registrations Over Time"
/>

<.ash_chart 
  resource={MyApp.Order}
  chart_type={:line}
  x_field={:date}
  y_field={:total_amount}
  group_by={:status}
  title="Order Amounts by Status"
/>

Attributes

  • id (:string) - Optional chart ID. Defaults to nil.
  • resource (:atom) (required) - The Ash resource to query.
  • chart_type (:atom) - Chart type: :bar, :line, :pie, :doughnut, :radar. Defaults to :bar.
  • x_field (:atom) (required) - Field to use for X-axis.
  • y_field (:atom) (required) - Field to use for Y-axis.
  • group_by (:atom) - Optional field to group data by. Defaults to nil.
  • title (:string) - Chart title. Defaults to "".
  • width (:integer) - Chart width in pixels. Defaults to 400.
  • height (:integer) - Chart height in pixels. Defaults to 300.
  • query_params (:map) - Additional query parameters for the resource. Defaults to %{}.
  • aggregate_function (:atom) - Aggregation function: :count, :sum, :avg, :min, :max. Defaults to :count.
  • date_grouping (:atom) - Date grouping for time-based charts: :day, :week, :month, :year. Defaults to :day.
  • colors (:list) - Custom colors for the chart. Defaults to nil.
  • responsive (:boolean) - Make chart responsive. Defaults to true.
  • class (:string) - Additional CSS classes. Defaults to "".

bar_chart(assigns)

Simplified bar chart component for quick use.

Attributes

  • resource (:atom) (required)
  • x_field (:atom) (required)
  • y_field (:atom) (required)
  • title (:string) - Defaults to "".
  • class (:string) - Defaults to "".

line_chart(assigns)

Simplified line chart component for time series data.

Attributes

  • resource (:atom) (required)
  • x_field (:atom) (required)
  • y_field (:atom) (required)
  • title (:string) - Defaults to "".
  • date_grouping (:atom) - Defaults to :day.
  • class (:string) - Defaults to "".

pie_chart(assigns)

Simplified pie chart component.

Attributes

  • resource (:atom) (required)
  • label_field (:atom) (required)
  • value_field (:atom) (required)
  • title (:string) - Defaults to "".
  • class (:string) - Defaults to "".