# `GanttEx.Live.Components`
[🔗](https://github.com/rocket4ce/gantt_ex/blob/v0.1.0/lib/gantt_ex/live/components.ex#L1)

Function components that make up `GanttEx.Live.Gantt`.

They render pre-computed data (rows, bars and links built by
`GanttEx.Store`, `GanttEx.Timeline` and `GanttEx.Layout`) and send their
events to the component given in `ctx.myself`. Most applications only need
`GanttEx.Live.Gantt`; these are public to document the generated markup and
to allow custom layouts.

Every component receives a `ctx` map with:

  * `:id` - the DOM id of the chart
  * `:myself` - the `phx-target` of the events
  * `:labels` - translated labels (see `GanttEx.I18n.labels/1`)
  * `:format` - a date formatter (see `GanttEx.I18n.formatter/1`)
  * `:date_pattern` - the pattern used for dates in the grid
  * `:unit` - the duration unit
  * `:readonly`, `:inline_edit`, `:tooltips`, `:lightbox` - feature flags

# `confirm`

Renders a confirmation dialog.
## Attributes

* `ctx` (`:map`) (required)
* `confirm` (`:map`) (required) - `%{message, detail}`.

# `dom_key`

```elixir
@spec dom_key(GanttEx.Store.key()) :: String.t()
```

Turns a key into a string usable in DOM ids.

    iex> GanttEx.Live.Components.dom_key("42")
    "42"

    iex> GanttEx.Live.Components.dom_key("a b") =~ ~r/^k[0-9a-z]+$/
    true

# `field`

Renders a labelled form field with its errors. Errors are expected to be
already translated strings (`{message, []}` tuples).

## Attributes

* `field` (`Phoenix.HTML.FormField`) (required)
* `label` (`:string`) (required)
* `type` (`:string`) - Defaults to `"text"`.
* `options` (`:list`) - Defaults to `[]`.
* Global attributes are accepted. Supports all globals plus: `["min", "max", "step", "autocomplete"]`.

# `grid_header`

Renders the header of the task grid.
## Attributes

* `ctx` (`:map`) (required)
* `columns` (`:list`) (required)
* `sort` (`:any`) - Defaults to `nil`.
* `grid_width` (`:integer`) (required)

# `grid_row`

Renders a row of the task grid.
## Attributes

* `ctx` (`:map`) (required)
* `row` (`:map`) (required)
* `columns` (`:list`) (required)
* `editing` (`:any`) - the field being edited inline in this row. Defaults to `nil`.

# `highlights`

Renders the weekend / non-working time highlights.
## Attributes

* `highlights` (`:list`) (required)

# `lightbox`

Renders the lightbox: the task editor dialog.
## Attributes

* `ctx` (`:map`) (required)
* `lightbox` (`:map`) (required) - `%{mode, form, key, parent_options}`.
* `sections` (`:list`) (required)
## Slots

* `extra` - custom fields, receives the form.

# `link_editor`

Renders the dependency editor dialog.
## Attributes

* `ctx` (`:map`) (required)
* `editor` (`:map`) (required) - `%{key, form, source, target}`.

# `links`

Renders the dependency arrows.
## Attributes

* `ctx` (`:map`) (required)
* `links` (`:list`) (required)
* `width` (`:integer`) (required)
* `height` (`:integer`) (required)

# `markers`

Renders the timeline markers (see `GanttEx.Marker`).
## Attributes

* `ctx` (`:map`) (required)
* `markers` (`:list`) (required)

# `px`

```elixir
@spec px(number()) :: String.t()
```

Formats a pixel value for inline styles.

    iex> GanttEx.Live.Components.px(12.5)
    "12.5px"

    iex> GanttEx.Live.Components.px(40)
    "40px"

    iex> GanttEx.Live.Components.px(1200.0)
    "1200px"

# `quick_info`

Renders the quick info popup shown below a selected bar.
## Attributes

* `ctx` (`:map`) (required)
* `bar` (`:map`) (required)
* `editable` (`:boolean`) - Defaults to `true`.

# `resource_panel`

Renders the resource panel: the load of every resource per column.
## Attributes

* `ctx` (`:map`) (required)
* `rows` (`:list`) (required)
* `width` (`:integer`) (required)
* `show_grid` (`:boolean`) - Defaults to `true`.

# `rollups`

Renders the tasks rolled up on the rows of their ancestor projects.
## Attributes

* `ctx` (`:map`) (required)
* `rollups` (`:list`) (required)

# `row_marks`

Renders the baselines and deadlines of the bars (they do not move while dragging).
## Attributes

* `ctx` (`:map`) (required)
* `bars` (`:list`) (required)

# `scale`

Renders the time scale header.
## Attributes

* `rows` (`:list`) (required)
* `width` (`:integer`) (required)

# `task_bar`

Renders a task bar with its drag handles, link points and tooltip.

`bar` is a bar from `GanttEx.Layout.build/4` with these extra keys:
`:selected`, `:drag` (`"move"` or `"none"`), `:resizable`,
`:progress_editable`, `:linkable` and `:class`.

## Attributes

* `ctx` (`:map`) (required)
* `bar` (`:map`) (required)
* `task_text` (`:list`) - Defaults to `[]`.
* `tooltip` (`:list`) - Defaults to `[]`.

# `task_summary`

Renders the default summary of a task (tooltip and quick info body).
## Attributes

* `ctx` (`:map`) (required)
* `task` (`:map`) (required)

# `toolbar`

Renders the toolbar: add, expand/collapse, zoom, today, export, print and fullscreen.
## Attributes

* `ctx` (`:map`) (required)
* `zoom` (`:atom`) (required)
* `levels` (`:list`) (required)
* `export_formats` (`:list`) - Defaults to `[]`.
* `can_add` (`:boolean`) - Defaults to `true`.
* `show_history` (`:boolean`) - Defaults to `false`.
* `can_undo` (`:boolean`) - Defaults to `false`.
* `can_redo` (`:boolean`) - Defaults to `false`.
* `show_critical` (`:boolean`) - Defaults to `false`.
## Slots

* `inner_block`

---

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