From f659386e6376d0a621bf80c2454311cebc56787b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Pr=C3=A9vost?= <sprevost@mirego.com>
Date: Fri, 20 Sep 2024 16:38:24 -0400
Subject: [PATCH] Refactor component to pass options down to the vega spec

---
 lib/telemetry_ui/metrics/average.ex            | 13 ++++++++-----
 lib/telemetry_ui/metrics/average_list.ex       | 13 ++++++++-----
 lib/telemetry_ui/metrics/average_over_time.ex  | 13 ++++++++-----
 lib/telemetry_ui/metrics/count_list.ex         | 13 ++++++++-----
 lib/telemetry_ui/metrics/count_over_time.ex    | 13 ++++++++-----
 lib/telemetry_ui/metrics/counter.ex            | 13 ++++++++-----
 lib/telemetry_ui/metrics/distribution.ex       | 13 ++++++++-----
 lib/telemetry_ui/metrics/last_value.ex         | 13 ++++++++-----
 lib/telemetry_ui/metrics/median.ex             | 13 ++++++++-----
 lib/telemetry_ui/metrics/median_over_time.ex   | 13 ++++++++-----
 lib/telemetry_ui/metrics/metrics.ex            |  9 ++++++++-
 lib/telemetry_ui/metrics/sum.ex                | 13 ++++++++-----
 lib/telemetry_ui/web/components/buckets.ex     |  5 +++--
 lib/telemetry_ui/web/components/stat.ex        |  6 ++++--
 lib/telemetry_ui/web/components/stat_list.ex   |  7 ++++---
 lib/telemetry_ui/web/components/time_series.ex |  6 ++++--
 lib/telemetry_ui/web/template.html.heex        | 18 ++++++++++++------
 lib/telemetry_ui/web/vega_lite/vega_lite.ex    |  2 +-
 lib/telemetry_ui/web/view.ex                   |  4 ++--
 19 files changed, 126 insertions(+), 74 deletions(-)

diff --git a/lib/telemetry_ui/metrics/average.ex b/lib/telemetry_ui/metrics/average.ex
index 9563476..4628a0b 100644
--- a/lib/telemetry_ui/metrics/average.ex
+++ b/lib/telemetry_ui/metrics/average.ex
@@ -17,16 +17,19 @@ defmodule TelemetryUI.Metrics.Average do
     }
 
     def to_image(metric, extension, assigns) do
-      spec = Components.Stat.spec(metric, assigns, @options)
-      spec = VegaLite.Export.to_json(spec)
-      TelemetryUI.VegaLiteToImage.export(spec, extension)
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
+
+      metric
+      |> Components.Stat.spec(assigns)
+      |> VegaLite.Export.to_json()
+      |> TelemetryUI.VegaLiteToImage.export(extension)
     end
 
     def to_html(metric, assigns) do
-      assigns = %{assigns | options: @options}
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
 
       metric
-      |> Components.Stat.spec(assigns, @options)
+      |> Components.Stat.spec(assigns)
       |> TelemetryUI.Web.VegaLite.draw(metric, assigns)
     end
   end
diff --git a/lib/telemetry_ui/metrics/average_list.ex b/lib/telemetry_ui/metrics/average_list.ex
index e80e278..5367152 100644
--- a/lib/telemetry_ui/metrics/average_list.ex
+++ b/lib/telemetry_ui/metrics/average_list.ex
@@ -18,16 +18,19 @@ defmodule TelemetryUI.Metrics.AverageList do
     }
 
     def to_image(metric, extension, assigns) do
-      spec = Components.StatList.spec(metric, assigns, @options)
-      spec = VegaLite.Export.to_json(spec)
-      TelemetryUI.VegaLiteToImage.export(spec, extension)
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
+
+      metric
+      |> Components.StatList.spec(assigns)
+      |> VegaLite.Export.to_json()
+      |> TelemetryUI.VegaLiteToImage.export(extension)
     end
 
     def to_html(metric, assigns) do
-      assigns = %{assigns | options: @options}
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
 
       metric
-      |> Components.StatList.spec(assigns, @options)
+      |> Components.StatList.spec(assigns)
       |> TelemetryUI.Web.VegaLite.draw(metric, assigns)
     end
   end
diff --git a/lib/telemetry_ui/metrics/average_over_time.ex b/lib/telemetry_ui/metrics/average_over_time.ex
index 042cd36..2a67e4c 100644
--- a/lib/telemetry_ui/metrics/average_over_time.ex
+++ b/lib/telemetry_ui/metrics/average_over_time.ex
@@ -16,16 +16,19 @@ defmodule TelemetryUI.Metrics.AverageOverTime do
     }
 
     def to_image(metric, extension, assigns) do
-      spec = Components.TimeSeries.spec(metric, assigns, @options)
-      spec = VegaLite.Export.to_json(spec)
-      TelemetryUI.VegaLiteToImage.export(spec, extension)
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
+
+      metric
+      |> Components.TimeSeries.spec(assigns)
+      |> VegaLite.Export.to_json()
+      |> TelemetryUI.VegaLiteToImage.export(extension)
     end
 
     def to_html(metric, assigns) do
-      assigns = %{assigns | options: @options}
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
 
       metric
-      |> Components.TimeSeries.spec(assigns, @options)
+      |> Components.TimeSeries.spec(assigns)
       |> TelemetryUI.Web.VegaLite.draw(metric, assigns)
     end
   end
diff --git a/lib/telemetry_ui/metrics/count_list.ex b/lib/telemetry_ui/metrics/count_list.ex
index a6700fc..8f533db 100644
--- a/lib/telemetry_ui/metrics/count_list.ex
+++ b/lib/telemetry_ui/metrics/count_list.ex
@@ -15,16 +15,19 @@ defmodule TelemetryUI.Metrics.CountList do
     }
 
     def to_image(metric, extension, assigns) do
-      spec = Components.StatList.spec(metric, assigns, @options)
-      spec = VegaLite.Export.to_json(spec)
-      TelemetryUI.VegaLiteToImage.export(spec, extension)
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
+
+      metric
+      |> Components.StatList.spec(assigns)
+      |> VegaLite.Export.to_json()
+      |> TelemetryUI.VegaLiteToImage.export(extension)
     end
 
     def to_html(metric, assigns) do
-      assigns = %{assigns | options: @options}
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
 
       metric
-      |> Components.StatList.spec(assigns, @options)
+      |> Components.StatList.spec(assigns)
       |> TelemetryUI.Web.VegaLite.draw(metric, assigns)
     end
   end
diff --git a/lib/telemetry_ui/metrics/count_over_time.ex b/lib/telemetry_ui/metrics/count_over_time.ex
index 0f46598..17333f1 100644
--- a/lib/telemetry_ui/metrics/count_over_time.ex
+++ b/lib/telemetry_ui/metrics/count_over_time.ex
@@ -15,16 +15,19 @@ defmodule TelemetryUI.Metrics.CountOverTime do
     }
 
     def to_image(metric, extension, assigns) do
-      spec = Components.TimeSeries.spec(metric, assigns, @options)
-      spec = VegaLite.Export.to_json(spec)
-      TelemetryUI.VegaLiteToImage.export(spec, extension)
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
+
+      metric
+      |> Components.TimeSeries.spec(assigns)
+      |> VegaLite.Export.to_json()
+      |> TelemetryUI.VegaLiteToImage.export(extension)
     end
 
     def to_html(metric, assigns) do
-      assigns = %{assigns | options: @options}
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
 
       metric
-      |> Components.TimeSeries.spec(assigns, @options)
+      |> Components.TimeSeries.spec(assigns)
       |> TelemetryUI.Web.VegaLite.draw(metric, assigns)
     end
   end
diff --git a/lib/telemetry_ui/metrics/counter.ex b/lib/telemetry_ui/metrics/counter.ex
index 3bbe595..e7d2851 100644
--- a/lib/telemetry_ui/metrics/counter.ex
+++ b/lib/telemetry_ui/metrics/counter.ex
@@ -14,16 +14,19 @@ defmodule TelemetryUI.Metrics.Counter do
     }
 
     def to_image(metric, extension, assigns) do
-      spec = Components.Stat.spec(metric, assigns, @options)
-      spec = VegaLite.Export.to_json(spec)
-      TelemetryUI.VegaLiteToImage.export(spec, extension)
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
+
+      metric
+      |> Components.Stat.spec(assigns)
+      |> VegaLite.Export.to_json()
+      |> TelemetryUI.VegaLiteToImage.export(extension)
     end
 
     def to_html(metric, assigns) do
-      assigns = %{assigns | options: @options}
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
 
       metric
-      |> Components.Stat.spec(assigns, @options)
+      |> Components.Stat.spec(assigns)
       |> TelemetryUI.Web.VegaLite.draw(metric, assigns)
     end
   end
diff --git a/lib/telemetry_ui/metrics/distribution.ex b/lib/telemetry_ui/metrics/distribution.ex
index bde8038..a21d0ca 100644
--- a/lib/telemetry_ui/metrics/distribution.ex
+++ b/lib/telemetry_ui/metrics/distribution.ex
@@ -15,16 +15,19 @@ defmodule TelemetryUI.Metrics.Distribution do
     }
 
     def to_image(metric, extension, assigns) do
-      spec = Components.Buckets.spec(metric, assigns, @options)
-      spec = VegaLite.Export.to_json(spec)
-      TelemetryUI.VegaLiteToImage.export(spec, extension)
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
+
+      metric
+      |> Components.Buckets.spec(assigns)
+      |> VegaLite.Export.to_json()
+      |> TelemetryUI.VegaLiteToImage.export(extension)
     end
 
     def to_html(metric, assigns) do
-      assigns = %{assigns | options: @options}
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
 
       metric
-      |> Components.Buckets.spec(assigns, @options)
+      |> Components.Buckets.spec(assigns)
       |> TelemetryUI.Web.VegaLite.draw(metric, assigns)
     end
   end
diff --git a/lib/telemetry_ui/metrics/last_value.ex b/lib/telemetry_ui/metrics/last_value.ex
index 2f2e084..e17fce4 100644
--- a/lib/telemetry_ui/metrics/last_value.ex
+++ b/lib/telemetry_ui/metrics/last_value.ex
@@ -18,16 +18,19 @@ defmodule TelemetryUI.Metrics.LastValue do
     }
 
     def to_image(metric, extension, assigns) do
-      spec = Components.Stat.spec(metric, assigns, @options)
-      spec = VegaLite.Export.to_json(spec)
-      TelemetryUI.VegaLiteToImage.export(spec, extension)
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
+
+      metric
+      |> Components.Stat.spec(assigns)
+      |> VegaLite.Export.to_json()
+      |> TelemetryUI.VegaLiteToImage.export(extension)
     end
 
     def to_html(metric, assigns) do
-      assigns = %{assigns | options: @options}
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
 
       metric
-      |> Components.Stat.spec(assigns, @options)
+      |> Components.Stat.spec(assigns)
       |> TelemetryUI.Web.VegaLite.draw(metric, assigns)
     end
   end
diff --git a/lib/telemetry_ui/metrics/median.ex b/lib/telemetry_ui/metrics/median.ex
index 87f5047..dd1fe18 100644
--- a/lib/telemetry_ui/metrics/median.ex
+++ b/lib/telemetry_ui/metrics/median.ex
@@ -17,16 +17,19 @@ defmodule TelemetryUI.Metrics.Median do
     }
 
     def to_image(metric, extension, assigns) do
-      spec = Components.Stat.spec(metric, assigns, @options)
-      spec = VegaLite.Export.to_json(spec)
-      TelemetryUI.VegaLiteToImage.export(spec, extension)
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
+
+      metric
+      |> Components.Stat.spec(assigns)
+      |> VegaLite.Export.to_json()
+      |> TelemetryUI.VegaLiteToImage.export(extension)
     end
 
     def to_html(metric, assigns) do
-      assigns = %{assigns | options: @options}
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
 
       metric
-      |> Components.Stat.spec(assigns, @options)
+      |> Components.Stat.spec(assigns)
       |> TelemetryUI.Web.VegaLite.draw(metric, assigns)
     end
   end
diff --git a/lib/telemetry_ui/metrics/median_over_time.ex b/lib/telemetry_ui/metrics/median_over_time.ex
index 2faacbd..400cf70 100644
--- a/lib/telemetry_ui/metrics/median_over_time.ex
+++ b/lib/telemetry_ui/metrics/median_over_time.ex
@@ -17,16 +17,19 @@ defmodule TelemetryUI.Metrics.MedianOverTime do
     }
 
     def to_image(metric, extension, assigns) do
-      spec = Components.TimeSeries.spec(metric, assigns, @options)
-      spec = VegaLite.Export.to_json(spec)
-      TelemetryUI.VegaLiteToImage.export(spec, extension)
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
+
+      metric
+      |> Components.TimeSeries.spec(assigns)
+      |> VegaLite.Export.to_json()
+      |> TelemetryUI.VegaLiteToImage.export(extension)
     end
 
     def to_html(metric, assigns) do
-      assigns = %{assigns | options: @options}
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
 
       metric
-      |> Components.TimeSeries.spec(assigns, @options)
+      |> Components.TimeSeries.spec(assigns)
       |> TelemetryUI.Web.VegaLite.draw(metric, assigns)
     end
   end
diff --git a/lib/telemetry_ui/metrics/metrics.ex b/lib/telemetry_ui/metrics/metrics.ex
index dcb500c..e8bca92 100644
--- a/lib/telemetry_ui/metrics/metrics.ex
+++ b/lib/telemetry_ui/metrics/metrics.ex
@@ -22,10 +22,15 @@ defmodule TelemetryUI.Metrics do
 
   defmacro __using__(_) do
     quote do
-      defstruct id: nil, title: nil, telemetry_metric: nil, data: nil, ui_options: [], unit: nil, tags: [], data_resolver: nil
+      defstruct id: nil, title: nil, telemetry_metric: nil, data: nil, options: %{}, ui_options: [], unit: nil, tags: [], data_resolver: nil
     end
   end
 
+  def merge_assigns_options(assigns, options) do
+    options = Map.merge(options, Map.get(assigns, :options) || %{})
+    %{assigns | options: options}
+  end
+
   for {metric_name, metric_struct} <- @telemetry_metrics do
     def unquote(metric_name)(:data, options) do
       {ui_options, options} = Keyword.pop(options, :ui_options, [])
@@ -33,6 +38,7 @@ defmodule TelemetryUI.Metrics do
       struct!(unquote(metric_struct),
         id: id(options[:description]),
         title: options[:description],
+        options: options[:options],
         unit: options[:unit],
         ui_options: ui_options,
         tags: Keyword.get(options, :tags, []),
@@ -57,6 +63,7 @@ defmodule TelemetryUI.Metrics do
         id: id(metric),
         title: metric.description || Event.cast_event_name(metric),
         unit: unit,
+        options: options[:options],
         ui_options: ui_options,
         tags: metric.tags,
         data_resolver: &{:async, fn -> TelemetryUI.metric_data(&1, metric, &2) end},
diff --git a/lib/telemetry_ui/metrics/sum.ex b/lib/telemetry_ui/metrics/sum.ex
index 5076b01..f1cd5d2 100644
--- a/lib/telemetry_ui/metrics/sum.ex
+++ b/lib/telemetry_ui/metrics/sum.ex
@@ -14,16 +14,19 @@ defmodule TelemetryUI.Metrics.Sum do
     }
 
     def to_image(metric, extension, assigns) do
-      spec = Components.Stat.spec(metric, assigns, @options)
-      spec = VegaLite.Export.to_json(spec)
-      TelemetryUI.VegaLiteToImage.export(spec, extension)
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
+
+      metric
+      |> Components.Stat.spec(assigns)
+      |> VegaLite.Export.to_json()
+      |> TelemetryUI.VegaLiteToImage.export(extension)
     end
 
     def to_html(metric, assigns) do
-      assigns = %{assigns | options: @options}
+      assigns = TelemetryUI.Metrics.merge_assigns_options(assigns, @options)
 
       metric
-      |> Components.Stat.spec(assigns, @options)
+      |> Components.Stat.spec(assigns)
       |> TelemetryUI.Web.VegaLite.draw(metric, assigns)
     end
   end
diff --git a/lib/telemetry_ui/web/components/buckets.ex b/lib/telemetry_ui/web/components/buckets.ex
index de32b2c..3dba20b 100644
--- a/lib/telemetry_ui/web/components/buckets.ex
+++ b/lib/telemetry_ui/web/components/buckets.ex
@@ -5,7 +5,8 @@ defmodule TelemetryUI.Web.Components.Buckets do
 
   alias VegaLite, as: Vl
 
-  def spec(metric, assigns, options) do
+  def spec(metric, assigns) do
+    options = assigns.options
     unit = to_unit(metric.unit)
 
     tooltip = [
@@ -33,7 +34,7 @@ defmodule TelemetryUI.Web.Components.Buckets do
     Vl.layers(spec, [title(metric, y: -20), buckets_chart])
   end
 
-  def encode_offset_tags_color(spec, tags, assigns) do
+  defp encode_offset_tags_color(spec, tags, assigns) do
     bar_options = [
       align: "center",
       baseline: "line-bottom",
diff --git a/lib/telemetry_ui/web/components/stat.ex b/lib/telemetry_ui/web/components/stat.ex
index 693fb00..42d9482 100644
--- a/lib/telemetry_ui/web/components/stat.ex
+++ b/lib/telemetry_ui/web/components/stat.ex
@@ -6,7 +6,8 @@ defmodule TelemetryUI.Web.Components.Stat do
   alias TelemetryUI.Web.Components.CompareAggregate
   alias VegaLite, as: Vl
 
-  def spec(%{tags: []} = metric, assigns, options) do
+  def spec(%{tags: []} = metric, assigns) do
+    options = assigns.options
     time_unit = fetch_time_unit(assigns.filters.from, assigns.filters.to)
     unit = to_unit(metric.unit)
     chart_offset = 80
@@ -68,7 +69,8 @@ defmodule TelemetryUI.Web.Components.Stat do
     ])
   end
 
-  def spec(metric, assigns, options) do
+  def spec(metric, assigns) do
+    options = assigns.options
     chart_offset = 80
 
     assigns
diff --git a/lib/telemetry_ui/web/components/stat_list.ex b/lib/telemetry_ui/web/components/stat_list.ex
index ddf83bd..1d94533 100644
--- a/lib/telemetry_ui/web/components/stat_list.ex
+++ b/lib/telemetry_ui/web/components/stat_list.ex
@@ -5,11 +5,12 @@ defmodule TelemetryUI.Web.Components.StatList do
 
   alias VegaLite, as: Vl
 
-  def spec(%{tags: []} = metric, assigns, options) do
-    TelemetryUI.Web.Components.Stat.spec(metric, assigns, options)
+  def spec(%{tags: []} = metric, assigns) do
+    TelemetryUI.Web.Components.Stat.spec(metric, assigns)
   end
 
-  def spec(metric, assigns, options) do
+  def spec(metric, assigns) do
+    options = assigns.options
     chart_offset = 80
 
     assigns
diff --git a/lib/telemetry_ui/web/components/time_series.ex b/lib/telemetry_ui/web/components/time_series.ex
index 9c74127..1b2ddec 100644
--- a/lib/telemetry_ui/web/components/time_series.ex
+++ b/lib/telemetry_ui/web/components/time_series.ex
@@ -6,7 +6,8 @@ defmodule TelemetryUI.Web.Components.TimeSeries do
   alias TelemetryUI.Web.Components.CompareAggregate
   alias VegaLite, as: Vl
 
-  def spec(%{tags: []} = metric, assigns, options) do
+  def spec(%{tags: []} = metric, assigns) do
+    options = assigns.options
     to = DateTime.to_unix(DateTime.add(assigns.filters.to, 60, :second), :millisecond)
     from = DateTime.to_unix(assigns.filters.from, :millisecond)
     time_unit = fetch_time_unit(assigns.filters.from, assigns.filters.to)
@@ -45,7 +46,8 @@ defmodule TelemetryUI.Web.Components.TimeSeries do
     Vl.layers(spec, [title(metric, y: -24), compare_aggregate_text_spec(options, metric), aggregate_text_spec(options, unit), summary_chart])
   end
 
-  def spec(metric, assigns, options) do
+  def spec(metric, assigns) do
+    options = assigns.options
     to = DateTime.to_unix(DateTime.add(assigns.filters.to, 60, :second), :millisecond)
     from = DateTime.to_unix(assigns.filters.from, :millisecond)
     time_unit = fetch_time_unit(assigns.filters.from, assigns.filters.to)
diff --git a/lib/telemetry_ui/web/template.html.heex b/lib/telemetry_ui/web/template.html.heex
index 3426f8e..7cb51c3 100644
--- a/lib/telemetry_ui/web/template.html.heex
+++ b/lib/telemetry_ui/web/template.html.heex
@@ -15,6 +15,12 @@
   </head>
 
   <body class="flex flex-col justify-between min-h-screen bg-white dark:bg-black">
+    <%= if @current_page.ui_options[:styles] do %>
+      <style>
+        <%= {:safe, @current_page.ui_options[:styles]} %>
+      </style>
+    <% end %>
+
     <script type="text/javascript">
       (function () {
         try {
@@ -31,10 +37,10 @@
     <div class="px-2 md:px-4">
       <%= if @shared do %>
         <header class="max-w-6xl mx-auto flex justify-between flex-col md:flex-row px-2 py-8 gap-4" style={theme_color_style(@theme)}>
-          <h1 class="text-base font-light font-mono flex items-center gap-3 pe-none">
-            <%= {:safe, @theme.logo} %>
+          <h1 class="text-base font-light flex items-center gap-3 pe-none">
+            <span><%= {:safe, @theme.logo} %></span>
             <%= @theme.title %>
-            <span class="text-gray-400 dark:text-gray-600">| <%= @current_page.title %></span>
+            <span class="text-gray-400 dark:text-gray-600 border-gray-200 dark:border-gray-700 border-l pl-3"><%= @current_page.title %></span>
           </h1>
 
           <div class="flex items-center text-sm text-gray-400 gap-5">
@@ -56,8 +62,8 @@
       <% else %>
         <div class="bg-white dark:bg-black">
           <header class="max-w-6xl mx-auto flex justify-between py-2 mb-4 mt-0 md:mt-12" style={theme_color_style(@theme)}>
-            <a class="flex items-center gap-3 text-base font-light font-mono" href={page_href(List.first(@pages).id, %{frame: nil})}>
-              <%= {:safe, @theme.logo} %><%= @theme.title %>
+            <a class="flex items-center gap-3 text-base font-light" href={page_href(List.first(@pages).id, %{frame: nil})}>
+              <span><%= {:safe, @theme.logo} %></span><%= @theme.title %>
             </a>
 
             <div telemetry-component="Form">
@@ -135,7 +141,7 @@
       <div class={"max-w-6xl mx-auto grid #{@current_page.ui_options[:metrics_class] || ~s(grid-cols-1 md:grid-cols-3 gap-4)}"}>
         <%= for metric <- @current_page.metrics do %>
           <div class={metric.ui_options[:class] || "col-span-full"}>
-            <.component_html metric={metric} filters={@filters} conn={@conn} theme={@theme} />
+            <.component_html metric={metric} options={metric.options} filters={@filters} conn={@conn} theme={@theme} />
           </div>
         <% end %>
       </div>
diff --git a/lib/telemetry_ui/web/vega_lite/vega_lite.ex b/lib/telemetry_ui/web/vega_lite/vega_lite.ex
index 6d4b5da..14d4f14 100644
--- a/lib/telemetry_ui/web/vega_lite/vega_lite.ex
+++ b/lib/telemetry_ui/web/vega_lite/vega_lite.ex
@@ -6,7 +6,7 @@ defmodule TelemetryUI.Web.VegaLite do
     assigns = Map.merge(assigns, %{spec: spec, metric: metric})
 
     ~H"""
-    <div class="vega-lite-metric group relative flex flex-col bg-white dark:bg-black/40 text-slate dark:text-white p-3 pt-2 border border-black/5 dark:border-white/20 rounded-lg min-h-[220px] h-full">
+    <div class="vega-lite-metric group relative flex flex-col bg-white dark:bg-black/40 text-slate dark:text-white p-3 border border-black/5 dark:border-white/20 rounded-lg min-h-[220px] h-full">
       <%= if TelemetryUI.VegaLiteToImage.enabled?() && @conn.assigns[:share] && @theme.share_path do %>
         <img loading="lazy" class="hidden" src={@theme.share_path <> "?id=#{@metric.id}.png&share=" <> @conn.assigns.share} />
       <% end %>
diff --git a/lib/telemetry_ui/web/view.ex b/lib/telemetry_ui/web/view.ex
index 81f9fe1..0b000c6 100644
--- a/lib/telemetry_ui/web/view.ex
+++ b/lib/telemetry_ui/web/view.ex
@@ -50,12 +50,12 @@ defmodule TelemetryUI.Web.View do
   end
 
   def component_image(conn, metric, extension, config) do
-    Component.to_image(metric, extension, %Component.Assigns{default_config: config, filters: conn.assigns.filters, theme: conn.assigns.theme})
+    Component.to_image(metric, extension, %Component.Assigns{options: metric.options, default_config: config, filters: conn.assigns.filters, theme: conn.assigns.theme})
   end
 
   defp component_html(assigns) do
     ~H"""
-    <%= Component.to_html(@metric, %Component.Assigns{filters: @filters, conn: @conn, theme: @theme}) %>
+    <%= Component.to_html(@metric, %Component.Assigns{options: @options, filters: @filters, conn: @conn, theme: @theme}) %>
     """
   end