DevactionUI.Chart (devaction_ui v0.2.3)

Light charts in plain SVG, drawn on the server: a line with two series, horizontal bars, columns, a ring and the sparkline of a number card. No library and no script: the hover is CSS (and keyboard focus shows the same).

The series take the fixed palette chart-1 to chart-4 (blue, amber, teal, purple). Colour is never the only way to tell a series: there is always a legend, the end of each line carries its value and the line chart has a table view (table?; the caller owns the toggle). Lines are solid, as the canvas draws them; a series with dashed: true is drawn dashed, with a dashed key in the legend, for a caller that also wants the shape to tell a forecast from a result.

A chart whose parts can be focused (the line chart's columns, the columns, the bars, the slices of the ring) is a group named by its summary, and each part is named with its figures; the sparkline, which has no parts, is an img. Pointing at or focusing a bar, a column or a slice dims the others, and a column shows its value only then.

The palette has four colours: a fifth series (or slice) wraps round to the first. A chart with nothing to draw shows its axes (the line and column charts) or nothing at all (bars and ring), so a caller with no data draws its own empty state instead. The table view has no difference column and its heads are not upper-cased: the caller writes the heads as it wants them and can add columns of its own to series.

Summary

Functions

bar_chart(assigns)

bg(index)

The class that sets the background to the colour of series index (from 0).

column_chart(assigns)

donut_chart(assigns)

fill(index)

The class that fills with the colour of series index (from 0).

line_chart(assigns)

sparkline(assigns)

stroke(index)

The class that colours the stroke of series index (from 0).

text(format, value)

A number as text: through format when the caller gave one, as it is otherwise.

Functions

bar_chart(assigns)

Attributes

id (:string) (required)
summary (:string) (required)
items (:list) (required) - %{label: text, value: number} each.
format (:any) - Defaults to nil.
class (:any) - Defaults to nil.
Global attributes are accepted.

bg(index)

@spec bg(non_neg_integer()) :: String.t()

The class that sets the background to the colour of series index (from 0).

column_chart(assigns)

Attributes

id (:string) (required)
summary (:string) (required)
items (:list) (required) - %{label: text, value: number} each.
format (:any) - Defaults to nil.
class (:any) - Defaults to nil.
Global attributes are accepted.

donut_chart(assigns)

Attributes

id (:string) (required)
summary (:string) (required)
items (:list) (required) - %{label: text, value: number} each.
format (:any) - Defaults to nil.
size (:integer) - the side of the ring, in pixels. Defaults to 220.
class (:any) - Defaults to nil.
Global attributes are accepted.

Slots

center - what sits in the hole of the ring: the total.

fill(index)

@spec fill(non_neg_integer()) :: String.t()

The class that fills with the colour of series index (from 0).

line_chart(assigns)

Attributes

id (:string) (required)
summary (:string) (required) - what the chart shows, in a sentence, for assistive technology.
labels (:list) (required) - the text under each point of the horizontal axis.
series (:list) (required) - %{label: text, values: [number]} each, and dashed: true to draw one dashed; the first one gets the area.
format (:any) - number to text, for the axis, the ends and the tooltip. Defaults to nil.
table? (:boolean) - shows the table of the same data instead of the chart. Defaults to false.
first_column (:string) - the head of the first column of the table. Defaults to "".
class (:any) - Defaults to nil.
Global attributes are accepted.

sparkline(assigns)

Attributes

summary (:string) (required)
values (:list) (required)
width (:integer) - Defaults to 140.
height (:integer) - Defaults to 48.
class (:any) - Defaults to nil.
Global attributes are accepted.

stroke(index)

@spec stroke(non_neg_integer()) :: String.t()

The class that colours the stroke of series index (from 0).

text(format, value)

@spec text((number() -> String.t()) | nil, number()) :: String.t()

A number as text: through format when the caller gave one, as it is otherwise.