shadcn_view_component 0.3.3

data/app/components/shadcn/carousel/previews/sizes.html.erb

@@ -0,0 +1,42 @@
+<%# Upstream's "Sizes" and "Spacing".
+
+    Neither is an argument. A slide is `basis-full` until the caller says
+    `basis-1/2` or `basis-1/3`, and the gutter is the track's negative margin
+    against the item's padding — `-ml-4`/`pl-4` by default, and any matching
+    pair the caller likes. Both are upstream's own instructions rather than this
+    port's: `carousel.tsx` has no prop for either. %>
+<div class="flex flex-col gap-10 px-14">
+  <%= render(Shadcn::Carousel::Component.new(class: "w-full max-w-sm")) do |c| %>
+    <% c.with_carousel_content do |content| %>
+      <% 6.times do |i| %>
+        <% content.with_item(class: "basis-1/2") do %>
+          <div class="p-1">
+            <%= render(Shadcn::Card::Component.new) do |card| %>
+              <% card.with_card_content(class: "flex aspect-square items-center justify-center p-6") do %>
+                <span class="text-3xl font-semibold"><%= i + 1 %></span>
+              <% end %>
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+    <% end %>
+    <% c.with_previous %>
+    <% c.with_next_control %>
+  <% end %>
+
+  <%= render(Shadcn::Carousel::Component.new(class: "w-full max-w-sm")) do |c| %>
+    <% c.with_carousel_content(class: "-ml-2") do |content| %>
+      <% 6.times do |i| %>
+        <% content.with_item(class: "basis-1/3 pl-2") do %>
+          <%= render(Shadcn::Card::Component.new) do |card| %>
+            <% card.with_card_content(class: "flex aspect-square items-center justify-center p-6") do %>
+              <span class="text-2xl font-semibold"><%= i + 1 %></span>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+    <% c.with_previous %>
+    <% c.with_next_control %>
+  <% end %>
+</div>

data/app/components/shadcn/carousel/previews/vertical.html.erb

@@ -0,0 +1,27 @@
+<%# Upstream's "Orientation". The axis reaches three places — the track becomes
+    a column, the items pad from the top, and the controls move above and below
+    and turn — so it is the root's argument and each part reads it.
+
+    `basis-1/2` is upstream's own example and it is the caller's, not the
+    component's: two slides in the window rather than one. Without it a card
+    sized by its own text floats in the middle of a 240px slot, which is what
+    this preview shipped as and what a person reported. %>
+<div class="py-14">
+  <%= render(Shadcn::Carousel::Component.new(orientation: :vertical, class: "w-full max-w-xs")) do |c| %>
+    <% c.with_carousel_content(orientation: :vertical, class: "h-[340px]") do |content| %>
+      <% 5.times do |i| %>
+        <% content.with_item(orientation: :vertical, class: "basis-1/2") do %>
+          <div class="p-1">
+            <%= render(Shadcn::Card::Component.new) do |card| %>
+              <% card.with_card_content(class: "flex items-center justify-center p-6") do %>
+                <span class="text-3xl font-semibold"><%= i + 1 %></span>
+              <% end %>
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+    <% end %>
+    <% c.with_previous(orientation: :vertical) %>
+    <% c.with_next_control(orientation: :vertical) %>
+  <% end %>
+</div>

data/app/components/shadcn/carousel/previous/component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Carousel
+    module Previous
+      # CarouselPrevious — the button's own variants, as `pagination-link` takes
+      # them: upstream renders a `<Button variant="outline" size="icon">` and
+      # adds its placement on top, so the classes come from
+      # `Button.variant_classes` rather than from a style block of this
+      # component's own. Redefining `style` here would *replace* the button's
+      # base rather than add to it, which is a round control with no round.
+      class Component < ApplicationViewComponent
+        default_tag :button
+        slot_name :"carousel-previous"
+
+        PLACEMENT = {
+          horizontal: "top-1/2 -left-12 -translate-y-1/2",
+          vertical: "-top-12 left-1/2 -translate-x-1/2 rotate-90"
+        }.freeze
+
+        attr_reader :orientation, :variant, :size
+
+        def initialize(orientation: :horizontal, variant: :outline, size: :icon, **attributes)
+          @orientation = orientation&.to_sym == :vertical ? :vertical : :horizontal
+          @variant = variant&.to_sym || :outline
+          @size = size&.to_sym || :icon
+          super(**attributes)
+        end
+
+        # Disabled until the controller says otherwise: at rest a carousel is at
+        # one end, and which end has room is a question about a viewport the
+        # server has never measured.
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            disabled: true,
+            "data-shadcn--carousel-target" => "previous",
+            "data-action" => "click->shadcn--carousel#previous"
+          }.merge(defaults))
+        end
+
+        def css_classes(extra = nil)
+          Button::Component.variant_classes(
+            variant:,
+            size:,
+            class: [ "absolute size-8 rounded-full", PLACEMENT.fetch(orientation), extra ].compact.join(" ")
+          )
+        end
+
+        def call
+          render_element(body: safe_join([
+            render(Icon::Component.new("arrow-left")),
+            tag.span(shadcn_t("carousel.previous"), class: "sr-only")
+          ]))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/chart/area/component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Chart
+    module Area
+      # Upstream's "Area Chart": the line chart with the space beneath each
+      # series filled in.
+      #
+      #   chart.with_area(data: { "January" => { desktop: 186, mobile: 80 } })
+      class Component < Line::Component
+        # Flat, and see-through enough that two overlapping series both stay
+        # readable. Upstream's docs example fills from a `<linearGradient>`
+        # instead: that needs a `<defs>` with an id per series, and an id that
+        # has to stay unique in a page this gem cannot see is a cost the fill
+        # does not repay.
+        OPACITY = 0.4
+
+        slot_name :"chart-area"
+
+        private
+
+        # The fills go down before every line and dot, or a series drawn later
+        # would wash out the one before it.
+        def shapes = plot.series.map { |key| fill(key) } + super
+
+        def fill(key)
+          tag.polygon(points: closed(key), fill: colour_of(key), "fill-opacity": OPACITY)
+        end
+
+        # A line, then back along the baseline to where it started — the two
+        # corners that turn a stroke into a shape.
+        def closed(key)
+          points = plot.points(key)
+          return "" if points.empty?
+
+          [ "#{points.first[:x]},#{plot.baseline.round(2)}",
+            *points.map { |point| "#{point[:x]},#{point[:y]}" },
+            "#{points.last[:x]},#{plot.baseline.round(2)}" ].join(" ")
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/chart/bar/component.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Chart
+    module Bar
+      # Upstream's "Bar Chart" and "Bar Chart - Stacked", drawn on the server.
+      #
+      #   chart.with_bar(data: { "January" => { desktop: 186, mobile: 80 } })
+      #
+      # `data:` is a Hash of category to a Hash of series to number — one
+      # `each_with_object` away from `group(:month, :platform).sum(:visits)`.
+      class Component < Cartesian::Component
+        # `radius={4}`, which upstream's bar examples pass at the call site in
+        # the docs. Nothing of recharts is vendored here, so unlike a class
+        # string this is checked against the rendered example and not against
+        # `vendor/`.
+        RADIUS = 4
+
+        slot_name :"chart-bar"
+
+        attr_reader :stacked
+
+        # `stacked:` lives here and not on the frame because it is a bar's
+        # question. A stacked *line* would need cumulative points, and `Plot`
+        # does not compute them — so the option is absent where it would lie.
+        def initialize(stacked: false, **attributes)
+          @stacked = stacked
+          super(**attributes)
+        end
+
+        private
+
+        def plot = @plot ||= Plot.new(data: @data, series: @series, stacked:)
+
+        # A `<rect>` rounds all four corners or none, because `rx` takes one
+        # number. A stack needs its seams square and only its two ends round,
+        # which is the per-corner form of the same prop. So a bar is a path,
+        # like the pie's slices.
+        def shapes
+          plot.bars.group_by { |bar| bar[:category] }.values.flat_map do |bars|
+            bars.map.with_index do |bar, position|
+              tag.path(d: outline(bar, **corners(position, bars.size)), fill: colour_of(bar[:key]),
+                       **mark_attributes(**bar.slice(:category, :key, :value)))
+            end
+          end
+        end
+
+        # Grouped, every bar stands on its own and rounds both ends. Stacked,
+        # only the bottom of the first segment and the top of the last are on
+        # the outside of anything.
+        def corners(position, count)
+          return { top: true, bottom: true } unless stacked
+
+          { top: position == count - 1, bottom: position.zero? }
+        end
+
+        # One formula for all four cases: a zero-radius arc is drawn as a
+        # straight line, which is the SVG spec's own answer to `A 0 0`.
+        def outline(bar, top:, bottom:)
+          radius = [ RADIUS, bar[:width] / 2.0, bar[:height] / 2.0 ].min.round(2)
+          t = top ? radius : 0
+          b = bottom ? radius : 0
+          x, y = bar.values_at(:x, :y)
+          right = (x + bar[:width]).round(2)
+          base = (y + bar[:height]).round(2)
+
+          "M #{x} #{(y + t).round(2)} A #{t} #{t} 0 0 1 #{(x + t).round(2)} #{y} " \
+            "L #{(right - t).round(2)} #{y} A #{t} #{t} 0 0 1 #{right} #{(y + t).round(2)} " \
+            "L #{right} #{(base - b).round(2)} A #{b} #{b} 0 0 1 #{(right - b).round(2)} #{base} " \
+            "L #{(x + b).round(2)} #{base} A #{b} #{b} 0 0 1 #{x} #{(base - b).round(2)} Z"
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/chart/cartesian/component.rb

@@ -0,0 +1,152 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Chart
+    module Cartesian
+      # What a bar, a line and an area all need and the pie did not: a grid, an
+      # axis down the left, category labels along the bottom, and one accessible
+      # name carrying every number. Abstract — `shapes` is the subclass's half.
+      #
+      # **Ours**, like the pie: `chart.tsx` draws nothing, so there is no
+      # upstream markup for this to be 1:1 with. What *is* reproduced is the
+      # contract around it — every mark is filled from `--color-<key>`, which
+      # the container publishes from `config`, so a host restyles this chart
+      # from the same stylesheet that restyles upstream's.
+      #
+      # The axis is drawn in SVG attributes and CSS custom properties rather
+      # than Tailwind classes. `stroke="var(--border)"` is a token `shadcn.css`
+      # already defines, and it keeps the grid out of `reverse_parity_spec`'s
+      # way: a class here would be one no vendored source contains, and every
+      # such class has to be listed with its reason.
+      class Component < ApplicationViewComponent
+        include Focusable
+
+        default_tag :svg
+        # No `slot_name` of its own: this class is never rendered, and a
+        # `data-slot="chart-cartesian"` would name an element no page contains.
+        # Each shape declares its own.
+
+        style do
+          base { "w-full" }
+        end
+
+        attr_reader :config, :label
+
+        def initialize(data: {}, config: {}, series: nil, label: nil, **attributes)
+          @data = data
+          @series = series
+          @config = config
+          @label = label
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{ viewBox: "0 0 #{plot.width} #{plot.height}" }.merge(keyboard).merge(defaults))
+        end
+
+        # The grid goes down first so the shapes are drawn over it, which is the
+        # one thing SVG's painter order decides for us. The table follows the
+        # graphic it describes, which is the order a reader meets them in.
+        def call
+          drawing = tag.g(safe_join([ grid, tick_labels, category_labels, *shapes ]), "aria-hidden": "true")
+
+          safe_join([ render_element(body: drawing), table ])
+        end
+
+        private
+
+        def drawn? = plot.categories.any?
+
+        # No rows, no table: an empty scope on a quiet week is a thing a host's
+        # data does, and a table of nothing announces a name and then leaves a
+        # reader in an empty grid.
+        def table
+          return unless drawn?
+
+          render(Table::Component.new(caption: label, columns: plot.series.map { |key| label_for(key) },
+                                      rows: table_rows))
+        end
+
+        def table_rows
+          plot.data.map do |category, values|
+            [ category, *plot.series.map { |key| number(values[key]) } ]
+          end
+        end
+
+        def plot = @plot ||= Plot.new(data: @data, series: @series)
+
+        def shapes = raise NotImplementedError, "#{self.class} draws no shape"
+
+        def grid
+          safe_join(plot.ticks.map do |value|
+            y = plot.y_of(value).round(2)
+
+            tag.line(x1: Plot::PADDING[:left], x2: plot.width - Plot::PADDING[:right], y1: y, y2: y,
+                     stroke: "var(--border)", "stroke-dasharray": ("3 3" unless value.zero?))
+          end)
+        end
+
+        def tick_labels
+          safe_join(plot.ticks.map do |value|
+            tag.text(number(value), x: Plot::PADDING[:left] - 6, y: (plot.y_of(value) + 3).round(2),
+                                    "text-anchor": "end", **label_attributes)
+          end)
+        end
+
+        # Only every `label_every`th, and the first is always drawn: a chart
+        # whose axis starts at "Week 5" reads as though the data does.
+        def category_labels
+          every = plot.label_every
+
+          safe_join(plot.categories.each_with_index.filter_map do |category, index|
+            next unless (index % every).zero?
+
+            x = category_x(index)
+
+            tag.text(category, x: x.round(2), y: plot.height - 8,
+                               "text-anchor": anchor_at(x), **label_attributes)
+          end)
+        end
+
+        # Under the middle of the band, which is where a bar stands. A line
+        # chart puts its readings on a point scale instead and says so.
+        def category_x(index) = plot.x_of(index) + plot.band / 2
+
+        # A label centred on a reading that sits on the edge of the plot has
+        # half of itself outside the viewBox, and an SVG clips at its own box:
+        # the line chart's "June" was drawn as "Jun". Only a point scale reaches
+        # the edge, so this changes nothing for a bar.
+        def anchor_at(x)
+          return "start" if x <= Plot::PADDING[:left]
+          return "end" if x >= plot.width - Plot::PADDING[:right]
+
+          "middle"
+        end
+
+        def label_attributes = { fill: "var(--muted-foreground)", "font-size": 10 }
+
+        # What every mark hands the controller, so the tooltip is filled from
+        # the DOM rather than from the series sent a second time as JSON.
+        def mark_attributes(category:, key:, value:)
+          {
+            "data-shadcn--chart-target": "mark",
+            "data-action": "pointerenter->shadcn--chart#show pointermove->shadcn--chart#move " \
+                           "pointerleave->shadcn--chart#hide",
+            "data-key": key,
+            "data-label": category,
+            "data-name": label_for(key),
+            "data-display": number(value)
+          }
+        end
+
+        def colour_of(key) = "var(--color-#{key.to_s.parameterize.underscore.dasherize})"
+
+        def label_for(key) = config.dig(key.to_sym, :label) || config.dig(key.to_s, :label) || key.to_s.humanize
+
+        # `|| 0` because a series may be missing from a category — a month
+        # where nothing was sold is a gap in the Hash, not a zero someone typed.
+        def number(value) = ActiveSupport::NumberHelper.number_to_delimited(value || 0)
+      end
+    end
+  end
+end

data/app/components/shadcn/chart/component.rb

@@ -0,0 +1,124 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Chart
+    # Port of registry/new-york-v4/ui/chart.tsx — the half of it that is markup.
+    #
+    # `chart.tsx` draws nothing. It is a *frame*: a container that publishes one
+    # custom property per series, and the contents of a tooltip and a legend
+    # that `recharts` fills in. The chart itself — the SVG, the scales, the
+    # axes — is `recharts`, 29,091 lines of compiled ES6 over eleven packages,
+    # and the caller writes it in JSX.
+    #
+    # So this family is the frame ported 1:1 and the drawing written here: a
+    # pie, and the three cartesian shapes — bar, line, area — over the grid and
+    # axes `Chart::Plot` computes. See
+    # [features/chart.md](../../../../.claude/docs/features/chart.md).
+    #
+    # `config:` is upstream's `ChartConfig`, key for key:
+    #
+    #   config: {
+    #     chrome: { label: "Chrome", color: "var(--chart-1)" },
+    #     safari: { label: "Safari", theme: { light: "…", dark: "…" } }
+    #   }
+    #
+    # Every colour is published as `--color-<key>` on the container, which is
+    # what lets a slice say `fill="var(--color-chrome)"` and a host restyle the
+    # chart from its own stylesheet.
+    class Component < ApplicationViewComponent
+      THEMES = { light: "", dark: ".dark" }.freeze
+
+      default_tag :div
+      slot_name :chart
+
+      style do
+        base {
+          # Upstream's own, minus thirteen `[&_.recharts-*]` variants: they
+          # select `recharts`' DOM, which nothing here renders, so they would
+          # compile to rules that match nothing. `parity_spec` holds them in
+          # `allowed_missing` with that reason.
+          #
+          # `relative` is this port's: upstream's tooltip is positioned by
+          # recharts inside a wrapper of its own, and here it is positioned
+          # against the container.
+          "relative flex aspect-video justify-center text-xs"
+        }
+      end
+
+      renders_one :pie, ->(**options) { Pie::Component.new(config:, **options) }
+      renders_one :bar, ->(**options) { Bar::Component.new(config:, **options) }
+      renders_one :line, ->(**options) { Line::Component.new(config:, **options) }
+      renders_one :area, ->(**options) { Area::Component.new(config:, **options) }
+      renders_one :chart_tooltip, ->(**options) { Tooltip::Component.new(**options) }
+      renders_one :chart_legend, ->(**options) { Legend::Component.new(config:, **options) }
+
+      attr_reader :config
+
+      def initialize(config: {}, **attributes)
+        @config = config.transform_keys(&:to_s)
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          "data-chart" => chart_id,
+          "data-controller" => "shadcn--chart"
+        }.merge(defaults))
+      end
+
+      # Slots rather than block content, and rendered in an order this decides:
+      # the tooltip has to come after the shape it floats over, and slot content
+      # is emitted before block content — the trap that has shipped twice here.
+      def call
+        render_element(body: safe_join([ colours, stack, chart_tooltip ].compact))
+      end
+
+      private
+
+      # Upstream's container is a flex *row* because it has exactly one child:
+      # recharts draws the legend inside the SVG. Here the legend is its own
+      # element, so the two need a column of their own — and it is a plain div
+      # rather than a class on the container, which stays as `chart.tsx` wrote
+      # it.
+      def stack
+        tag.div(safe_join([ pie, bar, line, area, content, chart_legend ].compact),
+                class: "flex w-full min-w-0 flex-col items-center justify-center gap-2")
+      end
+
+      def chart_id
+        @chart_id ||= "chart-#{SecureRandom.hex(4)}"
+      end
+
+      # Upstream's `ChartStyle`, which is a real `<style>` element rather than
+      # inline properties: a custom property has to be readable by descendants
+      # *and* by a `.dark` rule, and an inline style cannot carry the second.
+      def colours
+        rules = THEMES.filter_map do |theme, prefix|
+          declarations = config.filter_map do |key, item|
+            colour = safe_colour(item.dig(:theme, theme) || item[:color])
+            "  --color-#{key.parameterize.underscore.dasherize}: #{colour};" if colour
+          end
+
+          "#{prefix} [data-chart=#{chart_id}] {\n#{declarations.join("\n")}\n}" if declarations.any?
+        end
+        return if rules.empty?
+
+        tag.style(rules.join("\n").html_safe) # rubocop:disable Rails/OutputSafety
+      end
+
+      # A colour reaches a `<style>` element, where a `}` would end the rule and
+      # everything after it would be the caller's own CSS running in the host's
+      # page. Upstream writes the same string through
+      # `dangerouslySetInnerHTML` and is exposed to exactly this; a library that
+      # runs inside an application it cannot see does not get to be.
+      #
+      # What is allowed is what a colour is made of: `oklch(0.7 0.1 20)`,
+      # `var(--chart-1)`, `#0f172a`, `rgb(1 2 3 / 40%)`.
+      COLOUR = %r{\A[\w\s().,%#/-]+\z}
+
+      def safe_colour(value)
+        value.to_s.strip.presence&.then { |colour| colour if colour.match?(COLOUR) }
+      end
+    end
+  end
+end

data/app/components/shadcn/chart/focusable.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Chart
+    # What makes a chart reachable without a pointer, shared by every shape.
+    #
+    # This is upstream's own shape, read from the rendered example rather than
+    # from source — nothing of recharts is vendored here. Its
+    # `accessibilityLayer` puts `role="application" tabindex="0"` on the
+    # surface, and `application` is not decoration: it is what stops a screen
+    # reader from swallowing the arrow keys before they reach the page.
+    #
+    # Where this port diverges: upstream leaves the graphic itself exposed, so
+    # its axis labels reach the accessibility tree as loose text — *"400 300 200
+    # 100 0 January February …"*. Here the drawing sits inside an
+    # `aria-hidden` group, so the element that takes focus is not hidden — the
+    # pair is what axe calls `aria-hidden-focus` — and nothing inside it is
+    # read twice. The numbers are the table's job.
+    module Focusable
+      private
+
+      def keyboard
+        return {} unless drawn?
+
+        {
+          tabindex: 0,
+          role: "application",
+          "aria-label" => label.presence || shadcn_t("chart.label"),
+          "data-action" => "keydown->shadcn--chart#navigate blur->shadcn--chart#hide"
+        }
+      end
+
+      # A chart of nothing has nowhere for a cursor to go, and a tab stop that
+      # answers no key is worse than no tab stop.
+      def drawn? = raise NotImplementedError, "#{self.class} cannot say whether it drew anything"
+    end
+  end
+end

data/app/components/shadcn/chart/legend/component.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Chart
+    module Legend
+      # `ChartLegendContent`, 1:1 in markup.
+      #
+      # Upstream's is handed a payload by recharts' `Legend`; here it is the
+      # `config` itself, which is the same list arrived at without a round trip
+      # through a chart library.
+      class Component < ApplicationViewComponent
+        default_tag :div
+        slot_name :"chart-legend"
+
+        style do
+          base { "flex items-center justify-center gap-4" }
+        end
+
+        attr_reader :config, :vertical_align, :hide_icon
+
+        def initialize(config: {}, vertical_align: :bottom, hide_icon: false, **attributes)
+          @config = config
+          @vertical_align = vertical_align&.to_sym || :bottom
+          @hide_icon = hide_icon
+          super(**attributes)
+        end
+
+        def css_classes(extra = nil)
+          super([ vertical_align == :top ? "pb-3" : "pt-3", extra ].compact.join(" ").presence)
+        end
+
+        def call
+          render_element(body: safe_join(entries))
+        end
+
+        private
+
+        def entries
+          config.map do |key, item|
+            tag.div(class: "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground") do
+              safe_join([ swatch(key), item[:label] ].compact)
+            end
+          end
+        end
+
+        def swatch(key)
+          return if hide_icon
+
+          tag.div(class: "h-2 w-2 shrink-0 rounded-[2px]",
+                  style: "background-color: var(--color-#{key.to_s.parameterize.underscore.dasherize})")
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/chart/line/component.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Chart
+    module Line
+      # Upstream's "Line Chart", drawn on the server: one polyline per series,
+      # with a dot at each reading.
+      #
+      #   chart.with_line(data: { "January" => { desktop: 186, mobile: 80 } })
+      class Component < Cartesian::Component
+        DOT = 4
+        # The dot a pointer has to hit, which is not the dot a reader sees. Four
+        # pixels is a target nobody can hold, so a transparent circle takes the
+        # events and the visible one takes the colour.
+        REACH = 10
+
+        slot_name :"chart-line"
+
+        private
+
+        # A label belongs under the reading it names, and a line's readings run
+        # edge to edge rather than band by band.
+        def category_x(index) = plot.point_x(index)
+
+        def shapes
+          plot.series.flat_map { |key| [ path(key), *dots(key) ] }
+        end
+
+        def path(key)
+          tag.polyline(points: coordinates(key), fill: "none", stroke: colour_of(key),
+                       "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round")
+        end
+
+        def coordinates(key)
+          plot.points(key).map { |point| "#{point[:x]},#{point[:y]}" }.join(" ")
+        end
+
+        def dots(key)
+          plot.points(key).flat_map do |point|
+            [
+              tag.circle(cx: point[:x], cy: point[:y], r: DOT, fill: colour_of(key)),
+              tag.circle(cx: point[:x], cy: point[:y], r: REACH, fill: "transparent",
+                         **mark_attributes(category: point[:category], key:, value: point[:value]))
+            ]
+          end
+        end
+      end
+    end
+  end
+end