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

Copy Markdown View Source

Color scale legend component for charts.

Renders an SVG gradient bar with min/max labels, showing the color mapping for a continuous data range. Inspired by eCharts visualMap UI control.

Examples

<.visual_map
  min={0}
  max={100}
  colors={["oklch(0.95 0.05 240)", "oklch(0.55 0.22 240)"]}
/>

<.visual_map
  min={0}
  max={500}
  colors={["oklch(0.95 0.05 120)", "oklch(0.70 0.15 60)", "oklch(0.50 0.25 0)"]}
  orientation={:vertical}
  width={20}
  height={200}
/>

Summary

Functions

visual_map(assigns)

Functions

visual_map(assigns)

Attributes

  • min (:any) - Minimum data value. Defaults to 0.
  • max (:any) - Maximum data value. Defaults to 100.
  • colors (:list) - List of OKLCH color strings for the gradient (min → max). Defaults to ["oklch(0.95 0.05 240)", "oklch(0.55 0.22 240)"].
  • orientation (:atom) - Gradient orientation. Defaults to :horizontal. Must be one of :horizontal, or :vertical.
  • width (:any) - Width in pixels. Defaults based on orientation. Defaults to nil.
  • height (:any) - Height in pixels. Defaults based on orientation. Defaults to nil.
  • show_labels (:boolean) - Show min/max labels. Defaults to true.
  • label_format (:any) - Optional format function for labels. Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.