Fude.Components (Fude v0.1.0)

Copy Markdown View Source

The function component of Fude: <.chart>.

import Fude.Components

<.chart id="revenue" chart={Fude.bar(@sales, x: :region, y: :revenue)} />

A saved spec draws with its data given again:

<.chart id="revenue" spec={@report.chart} data={@sales} />

The chart needs the Fude hook in the LiveSocket and the Fude CSS (see the README). The server writes the chart's title, its words, a single number (Fude.number/2) and a table of the data; the hook draws the plot, and draws it again in place when the chart or its data change, moving its marks to their new places.

Before the hook mounts (and with JavaScript off), the chart is its words and its table.

A chart that cannot draw (a field that is not in the data, a spec that is not valid) shows why, in place of the plot, and does not raise.

Summary

Functions

chart(assigns)

Renders a chart.

Functions

chart(assigns)

Renders a chart.

Give it a chart (chart, from the functions of Fude), or a spec (spec, from Fude.Spec.dump/1) with its data (data).

Attributes

  • id (:string) (required) - the id of the chart, unique on the page.
  • chart (Fude.Chart) - the chart, from the functions of Fude. Defaults to nil.
  • spec (:map) - a spec of the chart (Fude.Spec.dump/1), with data. Defaults to nil.
  • data (:any) - the chart's data, for a spec or a chart made without it; a map of names for a chart of several. Defaults to nil.
  • height (:integer) - the height of the plot in pixels; the chart's own, or 320. Defaults to nil.
  • locale (:string) - the locale that writes numbers and dates; the browser's unless given. Defaults to nil.
  • table (:boolean) - whether the data table is on the page (under a toggle). Defaults to true.
  • export (:boolean) - whether the chart has buttons that save it as SVG and PNG (see also Fude.Live.export/3). Defaults to false.
  • issho (:string) - the Issho document of a shared chart (Fude.Issho): the people of its room see each other's pointers on its marks. Defaults to nil.
  • class (:any) - classes for the chart's element. Defaults to nil.
  • Global attributes are accepted.