🐹 gerbil

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

.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); }

GleamElixirErlang050001000015000200002500030000

This is the code you need to build it:

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
}