Shadwire
Componentes

Chart

Gráficos com Chart.js. A paleta usa os tokens --chart-1..5 do tema. É a única dependência JS de terceiros.

Instalação

O Shadwire segue o modelo open-code do shadcn/ui: o código-fonte do componente é copiado para a sua aplicação e passa a ser seu. Instale com a CLI: 

shadwire add chart --yes

O item chart do registry instala estes arquivos:

  • app/components/ui_component.rb
  • app/components/ui/chart_component.rb
  • app/helpers/ui/chart_helper.rb
  • app/javascript/controllers/ui_chart_controller.js
  • vendor/shadwire/shadwire.css

Este componente usa Stimulus: a aplicação precisa de importmap-rails e stimulus-rails com carregamento automático de controllers.

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

<%= ui_chart(type: :bar, label: "Visitantes por mês",
      data: { labels: %w[Jan Fev Mar],
              datasets: [ { label: "Desktop", data: [ 186, 305, 237 ] } ] }) %>

Exemplos

Barras

Dois conjuntos de dados com a paleta do tema.

<%= ui_chart(
      type: :bar,
      class: "w-full max-w-lg",
      label: "Visitantes por mês: desktop e mobile",
      data: {
        labels: %w[Jan Fev Mar Abr Mai Jun],
        datasets: [
          { label: "Desktop", data: [ 186, 305, 237, 73, 209, 214 ] },

Linha

Série temporal com tensão e área preenchida.

<%= ui_chart(
      type: :line,
      class: "w-full max-w-lg",
      label: "Visitantes por mês",
      data: {
        labels: %w[Jan Fev Mar Abr Mai Jun],
        datasets: [
          { label: "Visitantes", data: [ 186, 305, 237, 273, 209, 264 ], tension: 0.4, fill: true }

Pizza

Distribuição categórica colorida por rótulo.

<%= ui_chart(
      type: :doughnut,
      class: "mx-auto aspect-square w-full max-w-xs",
      label: "Navegadores por participação",
      data: {
        labels: %w[Chrome Safari Firefox Edge Outros],
        datasets: [
          { label: "Participação", data: [ 275, 200, 187, 173, 90 ] }