Peity Vanilla Rails

RailsJazz

Sparklines are small but intense charts. This gem is a wrapper around peity_vanilla library. You can generate simple but informative charts with vanilla JS.

Usage

  1. add gem to the Gemfile
gem "peity_vanilla_rails"
  1. Add to application.js

For Assets Pipeline:

//= require peity_vanilla.js

For Importmaps

In application.js

import peity from "peity";

window.peity = peity;
  1. Add charts in your code:

<h3>Line</h3>
<%= peity_line_chart([115,123,234,-113,-43,-223,127,332,152,233]) %>
<%= peity_line_chart(100.times.map{rand(100) * [1,-1].sample}, options: { width: 240, fill: 'lightgreen', stroke: 'blue' }) %>

<h3>Bar</h3>
<%= peity_bar_chart([115,123,234,-113,-43,-223,127,332,152,233]) %>
<%= peity_bar_chart('115,123,234,-132,152,233') %>
<%= peity_bar_chart(50.times.map{rand(100) }, options: { width: 240, fill: ['orange'], height: 30, padding: -0.1 }) %>

<h3>Pie</h3>
<%= peity_pie_chart "2/3" %>
<%= peity_pie_chart [3,10] %>
<%= peity_pie_chart [3,10], options: { fill: ["red", "#eeeeee"], radius: 10 } %>
<%= peity_pie_chart [236,300] %>

<h3>Donut</h3>
<%= peity_donut_chart "2/3" %>
<%= peity_donut_chart [6,20] %>
<%= peity_donut_chart [236,300] %>

More Examples

Check the original page.

<span class="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span>

<script>
  var updatingChart = peity(document.getElementById("updating-chart"), "line", { width: 64 });
  
  setInterval(function() {
    var random = Math.round(Math.random() * 10)
    var values = updatingChart.element.innerText.split(",")
    values.shift()
    values.push(random)

    updatingChart.element.innerText = values.join(",")
    updatingChart.element.dispatchEvent(new Event('change'))
  }, 1000);
</script>

Default Options

More information here: https://github.com/railsjazz/peity_vanilla.

You can pass in options any of the attributes.

<script>
  peity.defaults.pie = {
    delimiter: null,
    fill: ["#58508d", "#ffa600", "#ff6361"],
    height: null,
    radius: 8,
    width: null
  }

  peity.defaults.donut = {
    delimiter: null,
    fill: ["#ff9900", "#fff4dd", "#ffd592"],
    height: null,
    innerRadius: null,
    radius: 8,
    width: null
  }

  peity.defaults.line = {
    delimiter: ",",
    fill: "#fff4dd",
    height: 16,
    max: null,
    min: 0,
    stroke: "#ffa600",
    strokeWidth: 1,
    width: 32
  }

  peity.defaults.bar = {
    delimiter: ",",
    fill: ["#4d89f9"],
    height: 16,
    max: null,
    min: 0,
    padding: 0.1,
    width: 32
  } 
</script>

TODO

  • stimulus, turbo, etc.
  • remote datasource and autoupdate

Contributing

You are welcome to contribute.

License

The gem is available as open source under the terms of the MIT License.

GitHub

View Github