poetry-charts 0.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 99231ee56a021b648de82294be7e444f38195bef2046f2df58bd24f0e3a8f46d
+  data.tar.gz: 4561421c7a07d32b09212358b80fb7753e1022b401552d47d3da42d0787fbb05
+SHA512:
+  metadata.gz: 0b4dfbc1ca25a2478d3696cd7b5f83e370b50dffd544c89185e1fec3843326920c263073a3cd42f464d2e97bf1d190cccc3bf35d973c0a047ff8dcaf6f6fb8ed
+  data.tar.gz: 4e9e085244c9fc7ac1fcdf23546465854d5f1e6a921bbe6d9b8a9b6a84b1cecd294564b1571c9b1a636f31ad299f19e521254c2b7e470eac4bf6cd3f67577833

data/.gitattributes

@@ -0,0 +1,6 @@
+# GitHub language stats (Linguist): the d3 kernel sources and its built
+# bundle are vendored third-party code, and the JS test suite is not this
+# gem's source.
+vendor/d3-kernel/** linguist-vendored
+app/javascript/poetry/charts/d3.js linguist-vendored
+test/javascript/** linguist-vendored

data/CHANGELOG.md

@@ -0,0 +1,3 @@
+# Changelog
+
+## [Unreleased]

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Matt Solt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,94 @@
+# poetry-charts
+
+poetry's chart tier: the shadcn chart surface as **server-rendered SVG**.
+
+Ruby computes the geometry — data → domains → scales → ticks → points → paths
+(d3-scale/d3-shape semantics, recharts' decimal-exact nice ticks) — and the
+finished chart ships in the initial HTML: valid with JavaScript disabled, in
+print, PDF, and email; themed by CSS variables (`--chart-1..5` + per-chart
+`--color-<key>`); dark mode flips with zero re-render. A small Stimulus layer
+adds tooltip/legend/active interactivity by reading **server-embedded
+coordinates** — no chart math in the browser.
+
+Entrance animation is on by default (recharts' defaults per family: bars
+400ms, everything else 1500ms ease) and stays doctrine-pure: the CSS motion
+tier animates between server-computed states (line dash draw-in, area clip
+reveal, bars growing from the value baseline, radar rising from the polar
+center). `animate: false` opts a chart out; `prefers-reduced-motion` users
+always get the finished chart in the initial paint.
+
+Engines are swappable (three doors — full recipes in the Charts adapter guide on the poetry docs site):
+
+1. **The frame** (container/config/style + tooltip/legend chrome) is
+   engine-agnostic — the contract all three official shadcn ports share.
+2. **Adapters**: every chart also compiles to a closed, versioned chart-spec;
+   a duck-typed adapter (`render(el, spec)` / `update` / `destroy`) routes it
+   to another engine per chart via `engine:`. Chart.js ships as the reference
+   adapter (canvas — the big-data escape valve).
+3. **Islands**: React chart libraries (Recharts included) run inside the frame
+   via poetry's bounded island escape-hatch.
+
+Scope: shadcn's chart surface — nine families (area, bar, line, pie, radar,
+radial bar, scatter and composed, plus the adapter frame) with their tooltip
+and legend variants.
+
+## Install
+
+```ruby
+# Gemfile
+gem "poetry-charts"
+```
+
+Hosts running poetry-ui can wire everything below in one shot —
+`bin/rails g poetry:install --charts` — and skip the rest of this
+section.
+
+The engine merges its importmap pins automatically (`@poetry/charts`) —
+no build step. The tooltip chrome boots with one registration in your
+Stimulus entrypoint:
+
+```js
+import { registerPoetryChartsControllers } from "@poetry/charts"
+registerPoetryChartsControllers(application)
+```
+
+The motion tier is one `@import` in your CSS build (the engine also exposes
+it to Propshaft as `poetry-charts.css`); skip it and charts render static:
+
+```css
+@import "poetry-charts/app/assets/stylesheets/poetry-charts.css";
+```
+
+Interactive charts are **real forms**: submit a filter, the chart
+re-renders on the server (Turbo makes it smooth; the mechanics need no
+JS). Give a chart a stable `id:` and it **morphs** between those server
+renders — under any same-context swap (Turbo Drive/Frames/Streams), the
+new render starts from the old geometry and tweens to its own; a shape
+change (points added/removed) replays the entrance instead, recharts'
+own update behavior. See the Charts adapter guide on the poetry docs site for BYO engines.
+
+For data that can't round-trip (streaming metrics, tickers), the
+cartesian trio takes `live: true`: the chart embeds its `{spec, frame}`
+payload and a client renderer — running on the vendored
+`@poetry/charts/d3` kernel, proven byte-equal to the Ruby engine —
+redraws it in place. Feed it either channel:
+
+```js
+// 1. Replace the payload script's JSON (what a turbo_stream.update does)
+script.textContent = JSON.stringify({ ...payload, spec: { ...payload.spec, data } })
+// 2. Or dispatch on the chart frame
+frame.dispatchEvent(new CustomEvent("poetry-chart:update", { detail: { data } }))
+```
+
+Updates tween through the same FLIP machinery, the tooltip keeps serving
+fresh values mid-stream, and `prefers-reduced-motion` snaps. Live data
+carries pre-formatted category strings (lambdas can't ride JSON — the
+server raises a teaching error on `tick_formatter`/`labels`).
+
+Part of the [poetry](../poetry) gem family. Status:
+nine families, 46 gallery examples, the frozen spec-v1 adapter seam.
+
+## License
+
+Available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+See `THIRD_PARTY_NOTICES.md` for adapted code.

data/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,39 @@
+# Third-party notices - poetry-charts
+
+All third-party code in this gem lives in the committed
+`app/javascript/poetry/charts/d3.js` kernel (built from
+`vendor/d3-kernel/`, attribution banner included) and the Ruby
+transcription of recharts' nice-tick algorithm. License texts:
+
+- d3 modules (ISC, Mike Bostock) - `vendor/d3-kernel/LICENSE-d3.txt`
+- decimal.js-light (MIT, Michael Mclaughlin) - `vendor/d3-kernel/LICENSE-decimal.js-light.txt`
+- recharts (MIT, Recharts Group) - `vendor/d3-kernel/LICENSE-recharts.txt`
+
+## shadcn/ui
+
+- Source: https://github.com/shadcn-ui/ui (MIT)
+- The chart component anatomy, class dictionaries, and the per-theme chart rules in themes/*.css are derived from shadcn/ui's chart surface and its style stylesheets (the theme fidelity ledger in poetry-ui records the pin and every deviation)
+
+```
+MIT License
+
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

data/app/assets/stylesheets/poetry-charts.css

@@ -0,0 +1,117 @@
+/*
+ * poetry-charts motion tier: entrance animation for the
+ * server-rendered charts, driven by the data-animate flag and the
+ * --poetry-motion-* custom properties the components emit on the SVG.
+ *
+ * Two invariants:
+ *  - every keyframe ends at the natural attribute state, so a chart at
+ *    rest is pixel-identical to animation never having run;
+ *  - everything sits behind prefers-reduced-motion: no-preference, so
+ *    reduced-motion users get the finished chart in the initial paint.
+ *
+ * Hosts add this file to their CSS build (see the README install story).
+ */
+
+@media (prefers-reduced-motion: no-preference) {
+  /* Line: pathLength="1" normalizes the path to unit length, so the
+     classic dash draw-in needs no runtime path measurement. */
+  [data-animate] path[data-slot="chart-line"] {
+    stroke-dasharray: 1 1;
+    animation: poetry-chart-draw var(--poetry-motion-duration, 1500ms) var(--poetry-motion-easing, ease) var(--poetry-motion-delay, 0ms) both;
+  }
+
+  /* Area: the clipPath rect reveals the series left-to-right. The
+     rect covers the full frame at rest. */
+  [data-animate] rect[data-slot="chart-motion-reveal"] {
+    transform-origin: 0 0;
+    animation: poetry-chart-reveal var(--poetry-motion-duration, 1500ms) var(--poetry-motion-easing, ease) var(--poetry-motion-delay, 0ms) both;
+  }
+
+  /* Bars grow from the value baseline; data-motion-origin carries the
+     zero edge (sign x orientation). Corner radii stretch mid-flight -
+     the declared simplification vs rebuilding the path per frame. */
+  [data-animate] path[data-slot="chart-bar"] {
+    transform-box: fill-box;
+    transform-origin: center bottom;
+    animation: poetry-chart-grow-y var(--poetry-motion-duration, 400ms) var(--poetry-motion-easing, ease) var(--poetry-motion-delay, 0ms) both;
+  }
+  [data-animate] path[data-slot="chart-bar"][data-motion-origin="top"] {
+    transform-origin: center top;
+  }
+  [data-animate] path[data-slot="chart-bar"][data-motion-origin="left"],
+  [data-animate] path[data-slot="chart-bar"][data-motion-origin="right"] {
+    animation-name: poetry-chart-grow-x;
+    transform-origin: left center;
+  }
+  [data-animate] path[data-slot="chart-bar"][data-motion-origin="right"] {
+    transform-origin: right center;
+  }
+
+  /* Scatter points pop from their own centers (a 400ms linear
+     scale-in). */
+  [data-animate] circle[data-slot="chart-scatter-point"] {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: poetry-chart-rise var(--poetry-motion-duration, 400ms) var(--poetry-motion-easing, linear) var(--poetry-motion-delay, 0ms) both;
+  }
+
+  /* Radar rises from the polar center (the component ships it in
+     --poetry-motion-center). Linear interpolation of every vertex
+     toward one point IS a uniform scale, so this matches per-vertex
+     interpolation frame for frame. Dots ride the same group. */
+  [data-animate] g[data-slot="chart-radars"] {
+    transform-box: view-box;
+    transform-origin: var(--poetry-motion-center, center);
+    animation: poetry-chart-rise var(--poetry-motion-duration, 1500ms) var(--poetry-motion-easing, ease) var(--poetry-motion-delay, 0ms) both;
+  }
+
+  /* Labels wait for the series animation to finish, then take a
+     short fade. Line dots do the same; radar dots are excluded - they
+     ride the rising group above. */
+  [data-animate] g[data-slot="chart-labels"],
+  [data-animate] g[data-slot="chart-lines"] g[data-slot="chart-dots"] {
+    animation: poetry-chart-fade 200ms ease calc(var(--poetry-motion-delay, 0ms) + var(--poetry-motion-duration, 1500ms)) both;
+  }
+
+  /* A cross-render morph replaces the entrance: the controller
+     stamps data-motion="morph" before the new render's first paint, and
+     this kill switch stops the fresh elements' entrance animations so the
+     FLIP tween owns the frame. It stays on at "settled" - otherwise the
+     morph's end would re-arm the entrance keyframes and replay them.
+     Killing a COMPLETED entrance is pixel-identical by the invariant
+     above: every keyframe ends at the natural attribute state. */
+  [data-animate][data-motion="morph"] :is(path, g, rect, circle, text),
+  [data-animate][data-motion="settled"] :is(path, g, rect, circle, text) {
+    animation: none !important;
+  }
+
+  @keyframes poetry-chart-draw {
+    from { stroke-dashoffset: 1; }
+    to { stroke-dashoffset: 0; }
+  }
+
+  @keyframes poetry-chart-reveal {
+    from { transform: scaleX(0); }
+    to { transform: scaleX(1); }
+  }
+
+  @keyframes poetry-chart-grow-y {
+    from { transform: scaleY(0); }
+    to { transform: scaleY(1); }
+  }
+
+  @keyframes poetry-chart-grow-x {
+    from { transform: scaleX(0); }
+    to { transform: scaleX(1); }
+  }
+
+  @keyframes poetry-chart-rise {
+    from { transform: scale(0); }
+    to { transform: scale(1); }
+  }
+
+  @keyframes poetry-chart-fade {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+}

data/app/components/poetry/charts/adapter_chart/component.html.erb

@@ -0,0 +1,6 @@
+<%= render Poetry::Charts::Container::Component.new(config: chart_config, id: chart_id.delete_prefix("chart-")) do %>
+  <div class="<%= css(:frame) %>" data-component="<%= self.class.component_title %>" <%= tag.attributes(stimulus_attributes_for(:frame)) %>>
+    <div class="<%= css(:mount) %>" data-slot="chart-adapter-mount" role="img" aria-label="<%= mount_label %>" <%= tag.attributes(stimulus_attributes_for(:mount)) %>></div>
+    <script type="application/json" data-slot="chart-spec" <%= tag.attributes(stimulus_attributes_for(:spec)) %>><%= script_json(spec) %></script>
+  </div>
+<% end %>

data/app/components/poetry/charts/adapter_chart/component.rb

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Charts
+    # The bring-your-own-engine chart mount.
+    module AdapterChart
+      # The BYO-engine mount: `poetry_chart :bar, engine:
+      # "chartjs", ...` renders the Container frame (theming intact), a
+      # mount element, and the FROZEN chart-spec v1 - the registered
+      # adapter draws whatever it likes inside. The seam is deliberately
+      # whole-chart coarse: the compositional slot grammar belongs to the
+      # default engine; adapters consume the closed spec via series:/axes:
+      # arguments.
+      #
+      # @example
+      #   <%= poetry_chart :bar, engine: "chartjs", data: data, config: config,
+      #                    series: [{ data_key: :desktop }], axes: { x: { data_key: :month } } %>
+      class Component < Poetry::Core::Component
+        # Projected into the registry and agent surface.
+        AGENT_RULES = [
+          "The adapter path takes series:/axes: ARGUMENTS (the closed spec), not slots.",
+          "The host must register the engine first: registerChartAdapter(name, adapter) - " \
+          "poetry ships createChartJsAdapter(Chart) as the reference.",
+          "The Container contract still applies: config colors, --chart tokens, dark mode.",
+          "Prefer the default engine; adapters are for engine-specific needs (e.g. >10k points on canvas)."
+        ].freeze
+
+        # The adapter seam's whole JS surface: the frame registers the
+        # controller with the engine name, the mount div and the spec
+        # <script> are its two targets.
+        use_stimulus do
+          on :frame do
+            controller "poetry--charts--adapter" do
+              register
+              value :engine
+            end
+          end
+          on :mount do
+            controller("poetry--charts--adapter") { target :mount }
+          end
+          on :spec do
+            controller("poetry--charts--adapter") { target :spec }
+          end
+        end
+
+        option :type, :symbol, required: true, doc: "The chart type carried in the spec (see Spec::TYPES)."
+        option :engine, :string, required: true,
+                                 doc: "The registered adapter's name; the controller hands it the mount and the spec."
+        option :data, ActiveModel::Type::Value.new, required: true, doc: "The rows to plot, serialized into the spec."
+        option :config, ActiveModel::Type::Value.new, required: true,
+                                                      doc: "The series config - key => { label:, color: } - naming " \
+                                                           "and coloring every series."
+        option :series, ActiveModel::Type::Value.new, required: true,
+                                                      doc: "The series list ({ data_key:, ... } hashes) - the closed " \
+                                                           "spec's replacement for slots."
+        option :axes, ActiveModel::Type::Value.new, doc: "The axis config ({ x:, y: } hashes), also spec-carried."
+        option :id, :string,
+               doc: "Explicit DOM id token, stable across renders; otherwise the chart gets a unique per-render id."
+        option :label, :string, doc: "Accessible name for the mount; defaults to one built from the type and engine."
+
+        validates :type, inclusion: { in: Spec::TYPES }
+
+        part "chart-adapter-mount", "The engine's drawing surface (role=img carrying the " \
+                                    "accessible label) - the registered adapter renders into it"
+        part "chart-spec", "The frozen chart-spec v1, served as JSON in an " \
+                           "application/json script for the adapter to consume"
+
+        # Built (and validated) server-side - a bad series/axis key raises
+        # at render, never in the browser.
+        # @api private
+        def spec
+          @spec ||= Spec.new(type: type, data: data, series: series, axes: axes || {}, config: config)
+        end
+
+        # The config: option wrapped as a {Poetry::Charts::Config}.
+        # @api private
+        def chart_config
+          @chart_config ||= Poetry::Charts::Config.wrap(config)
+        end
+
+        # The data-chart scope: explicit id when given, else unique per
+        # render.
+        # @api private
+        def chart_id
+          @chart_id ||= (dom_id_token(id) ? "chart-#{dom_id_token(id)}" : poetry_instance_id("chart"))
+        end
+
+        # The mount's accessible name: explicit label: or a type+engine
+        # default.
+        # @api private
+        def mount_label
+          label.presence || "#{type.to_s.capitalize} chart (#{engine})"
+        end
+
+        private :spec, :chart_config, :chart_id, :mount_label
+      end
+    end
+  end
+end

data/app/components/poetry/charts/adapter_chart/preview.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Charts
+    module AdapterChart
+      # The BYO-engine mount: the frame, the mount element, and the spec
+      # JSON render server-side; the registered adapter draws client-side,
+      # so previews show the served contract, not an engine's output.
+      class Preview < Poetry::Core::Preview::Base
+        DATA = [
+          { month: "Jan", desktop: 186, mobile: 80 },
+          { month: "Feb", desktop: 305, mobile: 200 },
+          { month: "Mar", desktop: 237, mobile: 120 },
+          { month: "Apr", desktop: 73, mobile: 190 }
+        ].freeze
+
+        CONFIG = {
+          desktop: { label: "Desktop", color: "var(--chart-1)" },
+          mobile: { label: "Mobile", color: "var(--chart-2)" }
+        }.freeze
+
+        def default
+          render_component(type: :bar, engine: "chartjs", data: DATA, config: CONFIG,
+                           series: [{ data_key: :desktop }, { data_key: :mobile }],
+                           axes: { x: { data_key: :month } })
+        end
+
+        def labelled
+          render_component(type: :line, engine: "chartjs", data: DATA, config: CONFIG,
+                           series: [{ data_key: :desktop }],
+                           axes: { x: { data_key: :month } },
+                           id: "traffic", label: "Monthly desktop traffic")
+        end
+      end
+    end
+  end
+end

data/app/components/poetry/charts/adapter_chart/style.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Charts
+    module AdapterChart
+      # The mount fills the Container's aspect box; the engine owns
+      # everything inside it.
+      class Style < Poetry::Core::Style
+        base ""
+
+        element :frame, "contents"
+        element :mount, "size-full"
+      end
+    end
+  end
+end

data/app/components/poetry/charts/area_chart/component.html.erb

@@ -0,0 +1,75 @@
+<%= render Poetry::Charts::Container::Component.new(config: chart_config, id: chart_id.delete_prefix("chart-")) do %>
+  <%= content_tag(:div, frame_attributes.merge("class" => css(:frame))) do %>
+  <svg viewBox="0 0 <%= width %> <%= height %>" class="<%= css(:svg) %>" data-slot="chart-svg" aria-label="<%= svg_label %>" preserveAspectRatio="xMidYMid meet" <%= tag.attributes(svg_interaction_attributes) %>>
+    <% if series_entries.any?(&:gradient) || animate? %>
+      <defs>
+        <% series_entries.select(&:gradient).each do |entry| %>
+          <linearGradient id="<%= gradient_id(entry) %>" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stop-color="var(--color-<%= entry.key %>)" stop-opacity="0.8" />
+            <stop offset="95%" stop-color="var(--color-<%= entry.key %>)" stop-opacity="0.1" />
+          </linearGradient>
+        <% end %>
+        <% if animate? %>
+          <%# The entrance reveal: the motion stylesheet scales this rect 0->1. %>
+          <clipPath id="<%= chart_id %>-reveal"><rect data-slot="chart-motion-reveal" x="0" y="0" width="<%= width %>" height="<%= height %>" /></clipPath>
+        <% end %>
+      </defs>
+    <% end %>
+    <% if grid? %>
+      <g data-slot="chart-grid" aria-hidden="true">
+        <% if grid_config.horizontal %>
+          <% cartesian.y_ticks.each do |tick| %>
+            <line class="<%= css(:grid_line) %>" x1="<%= fnum(cartesian.plot_left) %>" x2="<%= fnum(cartesian.plot_right) %>" y1="<%= fnum(cartesian.y_scale.call(tick)) %>" y2="<%= fnum(cartesian.y_scale.call(tick)) %>" />
+          <% end %>
+        <% end %>
+        <% if grid_config.vertical %>
+          <% cartesian.x_centers.each do |x| %>
+            <line class="<%= css(:grid_line) %>" x1="<%= fnum(x) %>" x2="<%= fnum(x) %>" y1="<%= fnum(cartesian.plot_top) %>" y2="<%= fnum(cartesian.plot_bottom) %>" />
+          <% end %>
+        <% end %>
+      </g>
+    <% end %>
+    <%= cursor_svg(:line) %>
+    <g data-slot="chart-areas"<% if animate? %> clip-path="url(#<%= chart_id %>-reveal)"<% end %>>
+      <% series_entries.each do |entry| %>
+        <% if (d = series_path(entry)) %>
+          <path data-slot="chart-area" data-key="<%= entry.key %>" d="<%= d %>" fill="<%= fill_for(entry) %>" fill-opacity="<%= entry.fill_opacity %>" stroke="none" />
+          <path data-slot="chart-area-stroke" data-key="<%= entry.key %>" d="<%= series_stroke_path(entry) %>" fill="none" stroke="var(--color-<%= entry.key %>)" stroke-width="<%= entry.stroke_width %>" />
+        <% end %>
+      <% end %>
+    </g>
+    <%= reference_marks_svg %>
+<% if tooltip? %>
+  <g data-slot="chart-active-dots" aria-hidden="true">
+    <% series_entries.each do |entry| %>
+      <% active_dot_markers(entry).each do |marker| %>
+        <circle data-slot="chart-active-dot" data-key="<%= entry.key %>" data-index="<%= marker[:index] %>" cx="<%= fnum(marker[:x]) %>" cy="<%= fnum(marker[:y]) %>" r="4" fill="var(--color-<%= entry.key %>)" display="none" />
+      <% end %>
+    <% end %>
+  </g>
+<% end %>
+    <% if x_axis? %>
+      <g data-slot="chart-x-axis">
+        <% cartesian.categories.each_with_index do |category, i| %>
+          <text class="<%= css(:tick) %>" x="<%= fnum(cartesian.x_centers[i]) %>" y="<%= fnum(cartesian.plot_bottom + x_axis_config.tick_margin) %>" dy="0.71em" text-anchor="middle"><%= x_tick_label(category) %></text>
+        <% end %>
+      </g>
+    <% end %>
+    <% if y_axis? %>
+      <g data-slot="chart-y-axis">
+        <% cartesian.y_ticks.each do |tick| %>
+          <text class="<%= css(:tick) %>" x="<%= fnum(cartesian.plot_left - y_axis_config.tick_margin) %>" y="<%= fnum(cartesian.y_scale.call(tick)) %>" dy="0.355em" text-anchor="end"><%= y_tick_label(tick) %></text>
+        <% end %>
+      </g>
+    <% end %>
+    <%= brush_svg %>
+    <%= zoom_selection_svg %>
+  </svg>
+  <% if legend? %>
+    <%= render legend_component %>
+  <% end %>
+  <% if tooltip? %><%= render tooltip_layer_component %><% end %>
+  <script type="application/json" data-slot="chart-coordinates" <%= tag.attributes(stimulus_attributes_for(:coordinates)) %>><%= script_json(coordinates_json) %></script>
+  <% if live? %><script type="application/json" data-slot="chart-live-payload" <%= tag.attributes(stimulus_attributes_for(:live_payload)) %>><%= script_json(live_payload_json) %></script>
+<% end %>  <% end %>
+<% end %>