# `Fude.Components`
[🔗](https://github.com/hattoriai/fude/blob/v0.7.0/lib/fude/components.ex#L1)

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.

# `chart`

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` (`:any`) - the height of the plot in pixels; or `:fill`, the height its box gives it (a dashboard's card), redrawn as it changes; 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` (`:any`) - the chart's data as a table: under a toggle below the chart (`true`, `:below`); in the chart's place, at its size, behind a Data button (`:swap`, for a box of a fixed size, as a dashboard's card); or none (`false`). Defaults to `true`. Must be one of `true`, `false`, `:below`, or `:swap`.
* `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`.
* `animate` (`:any`) - whether the marks move: `true`, `false` or `[duration: ms]`; the chart's own (`true`) unless given. Defaults to `nil`.
* `select` (`:string`) - an event a click on a mark (or Enter on the mark the keyboard is on) sends, with the chart's `id` and the mark's values by channel (`x`, `y`, `color`...): a category's name, a time's ISO text, a number. On a line chart's crosshair, the `x`. It goes where `phx-target` says. Defaults to `nil`.
* `selected` (`:map`) - the marks that stand out, the others faded: values by channel, as `select` sends them (`%{"x" => "North"}`). A mark stands out when each value is its own. None, or no mark that has them, fades nothing. Defaults to `nil`.
* `class` (`:any`) - classes for the chart's element. Defaults to `nil`.
* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*