gerbil

# 🐹 gerbil

[![Package Version](https://img.shields.io/hexpm/v/gerbil)](https://hex.pm/packages/gerbil)
[![Hex Docs](https://img.shields.io/badge/hex-docs-ffaff3)](https://gerbil.hexdocs.pm/)

This packages makes it easy to build pretty svg charts you can include in a
[Lustre](https://lustre.build) app, or render to serve as static documents!
Here's an example of a chart built with `gerbil`:

<div>
<style>
.doc-chart {
  padding-block-start: var(--gap);
  padding-block-end: var(--small-gap);
  padding-inline-end: var(--gap);
  padding-inline-start: var(--small-gap);
}
body {
  --plot-colour:#4078f2;
}
body.theme-dark {
  --plot-colour: var(--pink);
  --vertical-tick-colour: var(--bg-tint-1);
  --horizontal-tick-colour: var(--bg-tint-1);
}
</style>
<pre class="doc-chart"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0.0 0.0 500.0 250.0"><g><line class="tick y" stroke="var(--horizontal-tick-colour, #eaeaea)" stroke-linecap="round" x1="65.0" x2="500.0" y1="228.0" y2="228.0"></line><line class="tick y" stroke="var(--horizontal-tick-colour, #eaeaea)" stroke-linecap="round" x1="65.0" x2="500.0" y1="191.33333333333334" y2="191.33333333333334"></line><line class="tick y" stroke="var(--horizontal-tick-colour, #eaeaea)" stroke-linecap="round" x1="65.0" x2="500.0" y1="154.66666666666669" y2="154.66666666666669"></line><line class="tick y" stroke="var(--horizontal-tick-colour, #eaeaea)" stroke-linecap="round" x1="65.0" x2="500.0" y1="118.0" y2="118.0"></line><line class="tick y" stroke="var(--horizontal-tick-colour, #eaeaea)" stroke-linecap="round" x1="65.0" x2="500.0" y1="81.33333333333334" y2="81.33333333333334"></line><line class="tick y" stroke="var(--horizontal-tick-colour, #eaeaea)" stroke-linecap="round" x1="65.0" x2="500.0" y1="44.66666666666666" y2="44.66666666666666"></line><line class="tick y" stroke="var(--horizontal-tick-colour, #eaeaea)" stroke-linecap="round" x1="65.0" x2="500.0" y1="8.0" y2="8.0"></line></g><g><!-- lustre:fragment --><line class="tick x" stroke="var(--vertical-tick-colour, #dddddd)" stroke-dasharray="2 3" stroke-linecap="round" x1="73.0" x2="73.0" y1="0.0" y2="250.0"></line><line class="tick x" stroke="var(--vertical-tick-colour, #dddddd)" stroke-dasharray="2 3" stroke-linecap="round" x1="212.66666666666666" x2="212.66666666666666" y1="0.0" y2="250.0"></line><line class="tick x" stroke="var(--vertical-tick-colour, #dddddd)" stroke-dasharray="2 3" stroke-linecap="round" x1="352.3333333333333" x2="352.3333333333333" y1="0.0" y2="250.0"></line><!-- /lustre:fragment --><line class="tick x" stroke="var(--vertical-tick-colour, #dddddd)" stroke-dasharray="2 3" stroke-linecap="round" x1="492.0" x2="492.0" y1="0.0" y2="250.0"></line></g><g><text class="label x" data-x="Gleam" dominant-baseline="hanging" fill="var(--label-colour, #b5b5b5)" font-size="13.0" text-anchor="left" x="79.0" y="234.0">Gleam</text><text class="label x" data-x="Elixir" dominant-baseline="hanging" fill="var(--label-colour, #b5b5b5)" font-size="13.0" text-anchor="left" x="218.66666666666666" y="234.0">Elixir</text><text class="label x" data-x="Erlang" dominant-baseline="hanging" fill="var(--label-colour, #b5b5b5)" font-size="13.0" text-anchor="left" x="358.3333333333333" y="234.0">Erlang</text></g><g><text class="label y" data-y="0" dominant-baseline="middle" fill="var(--label-colour, #b5b5b5)" font-size="13.0" text-anchor="end" x="57.0" y="228.0">0</text><text class="label y" data-y="5000" dominant-baseline="middle" fill="var(--label-colour, #b5b5b5)" font-size="13.0" text-anchor="end" x="57.0" y="191.33333333333334">5000</text><text class="label y" data-y="10000" dominant-baseline="middle" fill="var(--label-colour, #b5b5b5)" font-size="13.0" text-anchor="end" x="57.0" y="154.66666666666669">10000</text><text class="label y" data-y="15000" dominant-baseline="middle" fill="var(--label-colour, #b5b5b5)" font-size="13.0" text-anchor="end" x="57.0" y="118.0">15000</text><text class="label y" data-y="20000" dominant-baseline="middle" fill="var(--label-colour, #b5b5b5)" font-size="13.0" text-anchor="end" x="57.0" y="81.33333333333334">20000</text><text class="label y" data-y="25000" dominant-baseline="middle" fill="var(--label-colour, #b5b5b5)" font-size="13.0" text-anchor="end" x="57.0" y="44.66666666666666">25000</text><text class="label y" data-y="30000" dominant-baseline="middle" fill="var(--label-colour, #b5b5b5)" font-size="13.0" text-anchor="end" x="57.0" y="8.0">30000</text></g><!-- lustre:fragment --><g class="todo"><rect class="todo" fill="var(--plot-colour, #fe2865)" height="160.6" rx="5" width="111.73333333333332" x="86.96666666666667" y="67.4"></rect><rect class="todo" fill="var(--plot-colour, #fe2865)" height="195.06666666666666" rx="5" width="111.73333333333335" x="226.63333333333333" y="32.93333333333334"></rect><rect class="todo" fill="var(--plot-colour, #fe2865)" height="90.19999999999999" rx="5" width="111.7333333333334" x="366.29999999999995" y="137.8"></rect></g><!-- /lustre:fragment --></svg></pre>
</div>

This is the code you need to build it:

```gleam
import gerbil/axis
import gerbil/plot
import gleam/option.{Some}
import lustre/element

pub fn chart() -> String {
  let programming_language =
    axis.categorical()
    |> axis.show_labels(fn(language) { language })

  let github_stars =
    axis.int()
    |> axis.min(0)

  chart.new(x: programming_language, y: github_stars)
  |> chart.add(
    chart.vertical_bars([], [
      chart.bar("Gleam", 0, 21_900, []),
      chart.bar("Elixir", 0, 26_600, []),
      chart.bar("Erlang", 0, 12_300, []),
    ]),
  )
  |> chart.to_svg(width: 2, height: 1)
  |> element.to_string
}
```