PhiaUi.Components.Data.ChartSvgDefs (phia_ui v0.1.17)

Reusable SVG <defs> building blocks for chart gradients, patterns, and clip paths.

All components render inside <defs> — the caller wraps them in <svg><defs>...</defs>...</svg> and references definitions via url(#id).

Examples

<svg viewBox="0 0 400 300">
  <defs>
    <.chart_linear_gradient
      id="revenue-gradient"
      stops={[
        %{offset: "0%", color: "oklch(0.60 0.20 240)"},
        %{offset: "100%", color: "oklch(0.60 0.20 240 / 0.1)"}
      ]}
    />
    <.chart_clip_path id="chart-clip" x={44} y={16} width={340} height={244} />
  </defs>
  <rect fill="url(#revenue-gradient)" clip-path="url(#chart-clip)" ... />
</svg>

Summary

Functions

chart_clip_path(assigns)

Renders an SVG <clipPath> with a rectangular clipping region.

chart_linear_gradient(assigns)

Renders an SVG <linearGradient> with configurable stops.

chart_pattern(assigns)

Renders an SVG <pattern> definition for fills.

chart_radial_gradient(assigns)

Renders an SVG <radialGradient> with configurable stops.

Functions

chart_clip_path(assigns)

Renders an SVG <clipPath> with a rectangular clipping region.

Use to clip chart content to the viewport area.

Attrs

id — unique identifier (referenced via clip-path="url(#id)")
x, y, width, height — clip rectangle dimensions

Attributes

id (:string) (required)
x (:any) - Defaults to 0.
y (:any) - Defaults to 0.
width (:any) (required)
height (:any) (required)

chart_linear_gradient(assigns)

Renders an SVG <linearGradient> with configurable stops.

Attrs

id — unique identifier (referenced via url(#id))
stops — list of %{offset, color} or %{offset, color, opacity} maps
x1, y1, x2, y2 — gradient direction (default: vertical top-to-bottom)

Attributes

id (:string) (required)
stops (:list) (required) - List of %{offset, color} maps.
x1 (:string) - Defaults to "0%".
y1 (:string) - Defaults to "0%".
x2 (:string) - Defaults to "0%".
y2 (:string) - Defaults to "100%".

chart_pattern(assigns)

Renders an SVG <pattern> definition for fills.

Built-in types: :dots, :lines, :crosshatch, :diagonal.

Attrs

id — unique identifier
type — pattern type atom
size — pattern tile size in px (default 8)
color — stroke/fill color (default "currentColor")
opacity — pattern opacity (default "0.2")

Attributes

id (:string) (required)
type (:atom) - Defaults to :dots. Must be one of :dots, :lines, :crosshatch, or :diagonal.
size (:integer) - Defaults to 8.
color (:string) - Defaults to "currentColor".
opacity (:string) - Defaults to "0.2".

chart_radial_gradient(assigns)

Renders an SVG <radialGradient> with configurable stops.

Attrs

id — unique identifier
stops — list of %{offset, color} or %{offset, color, opacity} maps
cx, cy — center of the gradient (default: "50%")
r — radius (default: "50%")

Attributes

id (:string) (required)
stops (:list) (required)
cx (:string) - Defaults to "50%".
cy (:string) - Defaults to "50%".
r (:string) - Defaults to "50%".