Tremorx

Legend

Renders a legend

Default Open in playground

  1. My First Metric

  2. My Second Metric

  3. My Third Metric

  4. My Fourth Metric Not Clickable 

<.legend id="legend-single-default" class="w-80 py-4">
    <:legend_item name="My First Metric" color="blue" on_click={JS.push("test")}>
    </:legend_item>
    <:legend_item name="My Second Metric" color="green" on_click={JS.push("test")}>
    </:legend_item>
    <:legend_item name="My Third Metric" color="orange" on_click={JS.push("test")}>
    </:legend_item>
    <:legend_item name="My Fourth Metric Not Clickable" color="indigo">
    </:legend_item>
    <:scroll_left_icon>
      <.icon name="hero-chevron-left" />
    </:scroll_left_icon>
    <:scroll_right_icon>
      <.icon name="hero-chevron-right" />
    </:scroll_right_icon>
</.legend>
With slider Open in playground

  1. My First Metric

  2. My Second Metric

  3. My Third Metric With Very Long Text 

<.legend id="legend-single-with-slider" class="w-80 py-4" enable_slider>
    <:legend_item name="My First Metric" color="blue" on_click={JS.push("test")}>
    </:legend_item>
    <:legend_item name="My Second Metric" color="green" on_click={JS.push("test")}>
    </:legend_item>
    <:legend_item name="My Third Metric With Very Long Text" color="orange">
    </:legend_item>
    <:scroll_left_icon>
      <.icon name="hero-chevron-left" />
    </:scroll_left_icon>
    <:scroll_right_icon>
      <.icon name="hero-chevron-right" />
    </:scroll_right_icon>
</.legend>
Active legend Open in playground

  1. My First Metric

  2. My Second Metric

  3. My Third Metric

  4. My Fourth Metric 

<.legend active="My Third Metric" id="legend-single-active-legend" class="w-96 py-4">
    <:legend_item name="My First Metric" color="blue" on_click={JS.push("test")}>
    </:legend_item>
    <:legend_item name="My Second Metric" color="green" on_click={JS.push("test")}>
    </:legend_item>
    <:legend_item name="My Third Metric" color="orange" on_click={JS.push("test")}>
    </:legend_item>
    <:legend_item name="My Fourth Metric" color="indigo" on_click={JS.push("test")}>
    </:legend_item>
    <:scroll_left_icon>
      <.icon name="hero-chevron-left" />
    </:scroll_left_icon>
    <:scroll_right_icon>
      <.icon name="hero-chevron-right" />
    </:scroll_right_icon>
</.legend>