gerbil - v1.0.0-rc3

gerbil/chart

Types

Bar

opaque </>

A bar that can be used in vertical_bars and horizontal_bar plots. You can build one using the bar function.

pub opaque type Bar(category, value, message)

Chart

opaque </>

A plane chart with an x and y axis. You can build a new empty Chart with new, add multiple plots to it using add, and finally turn it into an svg element with to_svg.

pub opaque type Chart(x, y, message)

Plot

opaque </>

A plot is a way to show some data on a chart, there’s many different kinds of plots:

pub opaque type Plot(x, y, message)

Point

opaque </>

A point that can be used in line and points plots. You can build one using the point function.

pub opaque type Point(x, y, message)

Values

add

</> 
pub fn add(
  chart: Chart(x, y, message),
  plot: Plot(x, y, message),
) -> Chart(x, y, message)

Adds a new plot to the chart. Plots added last will appear on top of earlier ones.

TODO) Examples

bar

</> 
pub fn bar(
  category category: x,
  start start: y,
  end end: y,
  attributes attributes: List(attribute.Attribute(message)),
) -> Bar(x, y, message)

A bar that can be used in vertical_bars and horizontal_bar plots.

horizontal_band

</> 
pub fn horizontal_band(
  from from: option.Option(y),
  to to: option.Option(y),
  attributes attributes: List(attribute.Attribute(message)),
) -> Plot(x, y, message)

Creates an horizontal band starting and ending at the given positions. The start and end positions might not be specified, in that case the band will extend all the way towards the top, or the bottom of the chart.

Styling

  • A band is a <g> element with a .band class.
  • The colour of a band is determined by the --plot-colour CSS variable

So if I wanted to change the colour of a band I could use the following CSS:

.band {
  --plot-colour: #faaff3;
}

horizontal_bars

</> 
pub fn horizontal_bars(
  attributes: List(attribute.Attribute(message)),
  bars: List(Bar(y, x, message)),
) -> Plot(x, y, message)

A plot displaying a set of horizontal bars.

Styling

  • The bars are wrapped in a <g> container element with a .bars class.
  • Each bar is a <rect> with a .bar class.
  • The colour of a bar is determined by the --plot-colour CSS variable.

So if I wanted to change the colour of the bars I could use the following CSS:

.bars {
  --plot-colour: #faaff3;
}

line

</> 
pub fn line(
  attributes: List(attribute.Attribute(message)),
  points: List(Point(x, y, message)),
) -> Plot(x, y, message)

Creates a line plot connecting the given points.

Styling

  • The line is a <path> with a .line class.
  • The colour of the line is determined by the --plot-colour CSS variable.

So if I wanted to change the colour of the line I could use the following CSS:

.line {
  --plot-colour: #faaff3;
}

new

</> 
pub fn new(
  x x: axis.Axis(x),
  y y: axis.Axis(y),
) -> Chart(x, y, message)

Creates a new empty plane chart with the given axes.

point

</> 
pub fn point(
  x x: x,
  y y: y,
  attributes attributes: List(attribute.Attribute(message)),
) -> Point(x, y, message)

A points that can be used in line and points plots.

points

</> 
pub fn points(
  attributes: List(attribute.Attribute(message)),
  points: List(Point(x, y, message)),
) -> Plot(x, y, message)

A plot displaying the given points.

Styling

  • The points are wrapped in a <g> element with a .points class.
  • Each point is a <circle> with a .point class.
  • The colour of a point is determined by the --plot-colour CSS variable.

So if I wanted to change the colour of the points I could use the following CSS:

.points {
  --plot-colour: #faaff3;
}

to_svg

</> 
pub fn to_svg(
  chart: Chart(x, y, message),
  width width: Int,
  height height: Int,
) -> element.Element(message)

Turns the given chart into an <svg> element with a .gerbil class. The width and height are used to express the aspect ratio the generated chart will have.

Styling

  • The chart is an <svg> element with the .gerbil class.
  • The ticks of the x axis have the x and tick class. Their colour is determined by the --x-tick-colour css variable.
  • The labels of the x axis have the x and label class. Their colour is determined by the --label-colour css variable.
  • The ticks of the y axis have the y and tick class. Their colour is determined by the --y-tick-colour css variable.
  • The labels of the y axis have the y and label class. Their colour is determined by the --label-colour css variable.

So if I wanted to hide one every two labels in the x axis I could use the following CSS:

.gerbil .label.x:nth-of-type(2n) {
  display: hidden;
}

vertical_band

</> 
pub fn vertical_band(
  from from: option.Option(x),
  to to: option.Option(x),
  attriubutes attributes: List(attribute.Attribute(message)),
) -> Plot(x, y, message)

A vertical band starting and ending at the given positions. The start and end positions might not be specified, in that case the band will extend all the way towards the start, or the end of the chart.

Styling

  • A band is a <g> element with a .band class.
  • The colour of a band is determined by the --plot-colour CSS variable

So if I wanted to change the colour of a band I could use the following CSS:

.band {
  --plot-colour: #faaff3;
}

vertical_bars

</> 
pub fn vertical_bars(
  attributes: List(attribute.Attribute(message)),
  bars: List(Bar(x, y, message)),
) -> Plot(x, y, message)

A plot displaying a set of vertical bars.

Styling

  • The bars are wrapped in a <g> container element with a .bars class.
  • Each bar is a <rect> with a .bar class.
  • The colour of a bar is determined by the --plot-colour CSS variable.

So if I wanted to change the colour of the bars I could use the following CSS:

.bars {
  --plot-colour: #faaff3;
}
✨ Search Document