DevactionUI.Chart (devaction_ui v0.1.0)

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 second line is dashed, the end of each line carries its value and the line chart has a table view (table?; the caller owns the toggle). Every chart is an img with a summary for assistive technology.

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