railsui_charts 0.2.1 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '049e45e39a745fa833e9ba7835a09ecf960cb837b5d86c07c48d311201cddd6e'
-  data.tar.gz: 5b649ab130a83f43fa87490699fc5514eb00ee9eb92d5bdf6d059e31ac61f73e
+  metadata.gz: 5be8bf55b84a7b5a3c7294a1b3958d5042e793efec37266956e2767a74cf1df0
+  data.tar.gz: 891215bb98875af325556b150d2c6e37db60cff1d71f68e62e174efeb4c51ac7
 SHA512:
-  metadata.gz: 9d86406916a9fc276372ae9f200f0a0b7fd4d27327caa0e56264d1e79f7eb315c1dde4293c2c275da3f63d02ba47df38524c8d7cb3119ce7204cb36cf5754580
-  data.tar.gz: 2aacd7f09219f90924d07f5412fc4a25e62fcf312bd4903817138fea5f326d0d1ba48ec3169c416ac5e94141d43dd801c47dde340acc2a7b432c1761abd0aee8
+  metadata.gz: 1c422dda350f4a4b6ca52119fff256715589fda00df0421560b1d6e33b6b4c17162b26ec52f9e82502de5e05e8c33a6f503d5f427af0766b098c2b04b1d0e2ae
+  data.tar.gz: e48dee54260ae743336a05c646a8061f090e7c0ccba4fb5c8d82ab497440afacb8fe5772b67afc00aad62dc4cfdc1031fa6d7beda944bb6b959607f13a763d27

data/CHANGELOG.md

@@ -6,6 +6,17 @@ public API may change between minor versions.
 
 ## [Unreleased]
 
+## [0.2.2]
+
+### Added
+
+- `accessible_table:` on `railsui_chart`, for charts whose series are not the
+  numbers a reader wants. A caller passes `{ headers:, rows: }` and it replaces
+  the table derived from the series. The CSV export in Rails UI Charts Pro is
+  built from that table, so it is corrected by the same option. This is what
+  lets a waterfall describe itself as movement rather than as the invisible
+  plinth it stacks to get the shape drawn.
+
 ### Fixed
 
 - Sparkline charts now use the Rails UI tooltip renderer, so hovered points show

data/app/assets/javascripts/railsui_charts.js

@@ -141,6 +141,9 @@ var railsui_chart_controller_default = class extends Controller {
     const configuredSeries = w.config?.series?.[seriesIndex] || options.series?.[seriesIndex] || {};
     const point = this.configuredPoint(options, w, seriesIndex, dataPointIndex) || {};
     const title = point.name || point.label || point.x || configuredSeries.name;
+    if (Array.isArray(point.y)) {
+      return this.arrayPointTooltipMarkup(point, configuredSeries, options, w, seriesIndex, dataPointIndex, format);
+    }
     const row = {
       label: configuredSeries.name || "Value",
       value: point.y ?? series?.[seriesIndex]?.[dataPointIndex],
@@ -149,6 +152,31 @@ var railsui_chart_controller_default = class extends Controller {
     };
     return this.tooltipMarkup(title, [row], null, format);
   }
+  arrayPointTooltipMarkup(point, configuredSeries, options, w, seriesIndex, dataPointIndex, format) {
+    const labels = options.tooltip_value_labels || this.defaultArrayValueLabels(options.chart?.type, point.y.length);
+    const color = this.pointColor(options, w, seriesIndex, dataPointIndex);
+    const rows = point.y.map((value, index) => ({
+      label: labels[index] || `Value ${index + 1}`,
+      value,
+      color: options.tooltip_value_colors?.[index] || color,
+      format: null
+    }));
+    if (point.v !== void 0 && point.v !== null) {
+      rows.push({
+        label: options.tooltip_volume_label || "Volume",
+        value: point.v,
+        color: options.tooltip_volume_color || color,
+        format: this.formatterFor(options.volume_format || "human", options.currency)
+      });
+    }
+    return this.tooltipMarkup(point.name || point.label || point.x || configuredSeries.name, rows, null, format);
+  }
+  defaultArrayValueLabels(type, length) {
+    if (type === "candlestick" && length === 4) return ["Open", "High", "Low", "Close"];
+    if (type === "boxPlot" && length === 5) return ["Min", "Q1", "Median", "Q3", "Max"];
+    if (type === "rangeArea" && length === 2) return ["Low", "High"];
+    return [];
+  }
   rangeBarTooltipMarkup({ series, seriesIndex, dataPointIndex, w }, options, format) {
     const configuredSeries = w.config?.series?.[seriesIndex] || options.series?.[seriesIndex] || {};
     const point = configuredSeries.data?.[dataPointIndex] || {};
@@ -448,18 +476,49 @@ import { Controller as Controller3 } from "@hotwired/stimulus";
 var railsui_metric_dialog_controller_default = class extends Controller3 {
   static targets = ["dialog"];
   open() {
+    this.dialogTarget.classList.remove("railsui-metric-dialog--closing");
     this.dialogTarget.showModal();
-    this.dialogTarget.querySelectorAll(".railsui-chart").forEach((chart) => {
-      chart.dispatchEvent(new CustomEvent("railsui-chart:refresh"));
+    requestAnimationFrame(() => {
+      this.dialogTarget.classList.add("railsui-metric-dialog--open");
+      this.refreshCharts();
     });
   }
   close() {
-    this.dialogTarget.close();
+    this.closeDialog();
+  }
+  cancel(event) {
+    event.preventDefault();
+    this.closeDialog();
   }
   // Clicking the backdrop lands on the dialog element itself; a click anywhere
   // inside lands on a child.
   closeOnBackdrop(event) {
-    if (event.target === this.dialogTarget) this.dialogTarget.close();
+    if (event.target === this.dialogTarget) this.closeDialog();
+  }
+  refreshCharts() {
+    this.dialogTarget.querySelectorAll(".railsui-chart").forEach((chart) => {
+      chart.dispatchEvent(new CustomEvent("railsui-chart:refresh"));
+    });
+  }
+  closeDialog() {
+    const dialog = this.dialogTarget;
+    if (!dialog.open) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      dialog.classList.remove("railsui-metric-dialog--open", "railsui-metric-dialog--closing");
+      dialog.close();
+      return;
+    }
+    dialog.classList.remove("railsui-metric-dialog--open");
+    dialog.classList.add("railsui-metric-dialog--closing");
+    let closed = false;
+    const finish = () => {
+      if (closed) return;
+      closed = true;
+      dialog.classList.remove("railsui-metric-dialog--closing");
+      dialog.close();
+    };
+    dialog.addEventListener("transitionend", finish, { once: true });
+    setTimeout(finish, 240);
   }
 };
 

data/app/assets/stylesheets/railsui_charts.css

@@ -518,6 +518,12 @@
   margin-top: 0.5rem;
 }
 
+.railsui-metric-card__chart .railsui-chart,
+.railsui-metric-card__chart .apexcharts-canvas,
+.railsui-metric-card__chart .apexcharts-svg {
+  overflow: visible !important;
+}
+
 /* Rendered outside the plot so the first and last labels sit flush with the
    card edges. Apex centres them on their data point and clips at the canvas
    edge, which costs either the label's first characters or plot width. */
@@ -568,22 +574,41 @@
 /* --------------------------------------------------------- expanded view */
 
 .railsui-metric-dialog {
-  width: min(56rem, calc(100vw - 2rem));
-  max-height: calc(100vh - 4rem);
+  width: min(64rem, calc(100vw - 2rem));
+  max-height: calc(100vh - 2rem);
   padding: 0;
   border: 1px solid var(--rui-chart-border);
   border-radius: 0.75rem;
   background-color: var(--rui-chart-surface);
   color: var(--rui-chart-metric-value);
-  overflow: hidden;
+  opacity: 0;
+  overflow: auto;
+  transform: translateY(0.5rem) scale(0.98);
+  transition: opacity 160ms ease, transform 180ms ease;
 }
 
 .railsui-metric-dialog::backdrop {
-  background-color: rgba(15, 23, 42, 0.5);
+  background-color: transparent;
+  transition: background-color 160ms ease;
+}
+
+.railsui-metric-dialog--open {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.railsui-metric-dialog--open::backdrop {
+  background-color: rgba(15, 23, 42, 0.48);
+}
+
+.railsui-metric-dialog--closing {
+  opacity: 0;
+  transform: translateY(0.25rem) scale(0.99);
 }
 
 .railsui-metric-dialog__panel {
-  padding: 1.25rem 1.5rem 1.5rem;
+  min-width: 0;
+  padding: 1.25rem 1.75rem 1.5rem;
 }
 
 .railsui-metric-dialog__head {
@@ -595,21 +620,67 @@
 }
 
 .railsui-metric-dialog__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: 2.5rem;
+  height: 2.5rem;
   border: 0;
-  border-radius: 9999px;
+  border-radius: 0.375rem;
   background-color: transparent;
   color: var(--rui-chart-metric-muted);
-  font-size: 1.25rem;
-  line-height: 1;
   cursor: pointer;
-  transition: background-color 120ms ease;
+  transition: background-color 120ms ease, color 120ms ease;
 }
 
-.railsui-metric-dialog__close:hover {
+.railsui-metric-dialog__close:hover,
+.railsui-metric-dialog__close:focus-visible {
   background-color: var(--rui-chart-hover);
+  color: var(--rui-chart-metric-value);
+}
+
+.railsui-metric-dialog__close:focus-visible {
+  outline: 2px solid var(--rui-chart-primary);
+  outline-offset: 2px;
+}
+
+.railsui-metric-dialog__close-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  pointer-events: none;
+}
+
+.railsui-metric-dialog__chart,
+.railsui-metric-dialog__chart .railsui-chart,
+.railsui-metric-dialog__chart .apexcharts-canvas,
+.railsui-metric-dialog__chart .apexcharts-svg {
+  overflow: visible !important;
+}
+
+@media (max-width: 640px) {
+  .railsui-metric-dialog {
+    width: calc(100vw - 1rem);
+    max-height: calc(100dvh - 1rem);
+    border-radius: 0.625rem;
+  }
+
+  .railsui-metric-dialog__panel {
+    padding: 1rem;
+  }
+
+  .railsui-metric-dialog__head {
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .railsui-metric-dialog,
+  .railsui-metric-dialog::backdrop,
+  .railsui-metric-dialog__close {
+    transition: none;
+  }
 }
 
 /* ---------------------------------------------------------------- deltas */

data/app/javascript/controllers/railsui_chart_controller.js

@@ -193,6 +193,10 @@ export default class extends Controller {
     const configuredSeries = w.config?.series?.[seriesIndex] || options.series?.[seriesIndex] || {}
     const point = this.configuredPoint(options, w, seriesIndex, dataPointIndex) || {}
     const title = point.name || point.label || point.x || configuredSeries.name
+    if (Array.isArray(point.y)) {
+      return this.arrayPointTooltipMarkup(point, configuredSeries, options, w, seriesIndex, dataPointIndex, format)
+    }
+
     const row = {
       label: configuredSeries.name || "Value",
       value: point.y ?? series?.[seriesIndex]?.[dataPointIndex],
@@ -203,6 +207,36 @@ export default class extends Controller {
     return this.tooltipMarkup(title, [row], null, format)
   }
 
+  arrayPointTooltipMarkup(point, configuredSeries, options, w, seriesIndex, dataPointIndex, format) {
+    const labels = options.tooltip_value_labels || this.defaultArrayValueLabels(options.chart?.type, point.y.length)
+    const color = this.pointColor(options, w, seriesIndex, dataPointIndex)
+    const rows = point.y.map((value, index) => ({
+      label: labels[index] || `Value ${index + 1}`,
+      value,
+      color: options.tooltip_value_colors?.[index] || color,
+      format: null
+    }))
+
+    if (point.v !== undefined && point.v !== null) {
+      rows.push({
+        label: options.tooltip_volume_label || "Volume",
+        value: point.v,
+        color: options.tooltip_volume_color || color,
+        format: this.formatterFor(options.volume_format || "human", options.currency)
+      })
+    }
+
+    return this.tooltipMarkup(point.name || point.label || point.x || configuredSeries.name, rows, null, format)
+  }
+
+  defaultArrayValueLabels(type, length) {
+    if (type === "candlestick" && length === 4) return ["Open", "High", "Low", "Close"]
+    if (type === "boxPlot" && length === 5) return ["Min", "Q1", "Median", "Q3", "Max"]
+    if (type === "rangeArea" && length === 2) return ["Low", "High"]
+
+    return []
+  }
+
   rangeBarTooltipMarkup({ series, seriesIndex, dataPointIndex, w }, options, format) {
     const configuredSeries = w.config?.series?.[seriesIndex] || options.series?.[seriesIndex] || {}
     const point = configuredSeries.data?.[dataPointIndex] || {}

data/app/javascript/controllers/railsui_metric_dialog_controller.js

@@ -6,22 +6,61 @@ export default class extends Controller {
   static targets = ["dialog"]
 
   open() {
+    this.dialogTarget.classList.remove("railsui-metric-dialog--closing")
     this.dialogTarget.showModal()
 
-    // The chart inside was laid out while the dialog was closed, which means
-    // it measured zero and drew nothing. Now that it has a size, tell it.
-    this.dialogTarget.querySelectorAll(".railsui-chart").forEach((chart) => {
-      chart.dispatchEvent(new CustomEvent("railsui-chart:refresh"))
+    requestAnimationFrame(() => {
+      this.dialogTarget.classList.add("railsui-metric-dialog--open")
+      this.refreshCharts()
     })
   }
 
   close() {
-    this.dialogTarget.close()
+    this.closeDialog()
+  }
+
+  cancel(event) {
+    event.preventDefault()
+    this.closeDialog()
   }
 
   // Clicking the backdrop lands on the dialog element itself; a click anywhere
   // inside lands on a child.
   closeOnBackdrop(event) {
-    if (event.target === this.dialogTarget) this.dialogTarget.close()
+    if (event.target === this.dialogTarget) this.closeDialog()
+  }
+
+  refreshCharts() {
+    // The chart inside was laid out while the dialog was closed, which means
+    // it measured zero and drew nothing. Now that it has a size, tell it.
+    this.dialogTarget.querySelectorAll(".railsui-chart").forEach((chart) => {
+      chart.dispatchEvent(new CustomEvent("railsui-chart:refresh"))
+    })
+  }
+
+  closeDialog() {
+    const dialog = this.dialogTarget
+    if (!dialog.open) return
+
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      dialog.classList.remove("railsui-metric-dialog--open", "railsui-metric-dialog--closing")
+      dialog.close()
+      return
+    }
+
+    dialog.classList.remove("railsui-metric-dialog--open")
+    dialog.classList.add("railsui-metric-dialog--closing")
+
+    let closed = false
+    const finish = () => {
+      if (closed) return
+
+      closed = true
+      dialog.classList.remove("railsui-metric-dialog--closing")
+      dialog.close()
+    }
+
+    dialog.addEventListener("transitionend", finish, { once: true })
+    setTimeout(finish, 240)
   }
 }

data/lib/railsui_charts/apex_options_builder.rb

@@ -132,6 +132,12 @@ module RailsuiCharts
       @series.any? { |series| series[:type].present? }
     end
 
+    def complex_combo?
+      combo? && @series.each_with_index.any? do |series, index|
+        RailsuiCharts.config.complex_point_types.include?(series_point_type(series, index))
+      end
+    end
+
     def dual_axis?
       @series.any? { |series| series[:axis] == :right }
     end
@@ -155,6 +161,9 @@ module RailsuiCharts
           normalized = { x: point[:x], y: span_or_value(point), z: point[:z] }
           normalized[:meta] = point[:meta] if point.key?(:meta)
           normalized[:name] = point[:name] if point.key?(:name)
+          normalized[:label] = point[:label] if point.key?(:label)
+          normalized[:v] = point[:v] if point.key?(:v)
+          normalized[:points] = point[:points] if point.key?(:points)
           normalized
         when Array
           { x: point[0], y: point[1], z: point[2] }
@@ -174,9 +183,49 @@ module RailsuiCharts
     end
 
     def categories
+      return category_union if misaligned_series?
+
       @data.map { |d| d[:x] }.compact
     end
 
+    # The union of every series' labels, in the order they first appear.
+    #
+    # Categories used to be read off the first series alone, and every later
+    # series was then flattened to bare values and drawn from position zero.
+    # For series that share an x-axis — the ordinary case — that is the same
+    # thing. For series that do not, it silently plotted them in the wrong
+    # place: a projection labelled November landed on January, on top of the
+    # history it was meant to continue.
+    def category_union
+      # A caller who states the axis gets it. Series order decides first
+      # appearance otherwise, and that is not always the reading order: a
+      # forecast draws its band first so it sits behind the lines, which would
+      # otherwise put next November before last January.
+      @category_union ||= Array(@options[:categories]).presence ||
+                          @series.flat_map { |series| series_labels(series) }.uniq
+    end
+
+    # Only when the series genuinely disagree. A series of bare values carries
+    # no labels to align on, and aligning identical label lists would be the
+    # same list — so in both cases nothing changes.
+    def misaligned_series?
+      return @misaligned unless @misaligned.nil?
+
+      @misaligned =
+        if @series.length < 2
+          false
+        elsif @options[:categories].present?
+          @series.all? { |series| series_labels(series).any? }
+        else
+          labels = @series.map { |series| series_labels(series) }
+          labels.none?(&:empty?) && labels.uniq.length > 1
+        end
+    end
+
+    def series_labels(series)
+      Array(series[:data]).filter_map { |point| point[:x] if point.is_a?(Hash) }
+    end
+
     # A bare array of values carries no labels, and Apex sizes the x-axis from
     # this list: given an empty one it draws nothing at all — no canvas, no
     # error, just an element that stays empty. Positions stand in, which is
@@ -537,18 +586,23 @@ module RailsuiCharts
       return series_values if circular?
 
       plotted = @series.each_with_index.map do |series, index|
-        entry = { name: series[:name] || (index.zero? ? series_label : "Series #{index + 1}"), data: points_for(series[:data]) }
+        point_type = series_point_type(series, index)
+        entry = { name: series[:name] || (index.zero? ? series_label : "Series #{index + 1}"), data: points_for(series[:data], point_type) }
         # Only on a combo. Naming a type on every series of an ordinary chart
         # would override the chart-level one and quietly ignore `type:`.
-        entry[:type] = series_type(series, index) if combo?
+        entry[:type] = apex_type_for(point_type) if combo?
         entry
       end
 
       comparing? ? plotted + [{ name: compare_label, data: @compare.map { |point| point[:y] } }] : plotted
     end
 
-    def points_for(points)
-      case @type
+    def series_point_type(series, index)
+      (series[:type] || (index.zero? ? @type : @series.first[:type]) || @type).to_sym
+    end
+
+    def points_for(points, point_type = @type)
+      case point_type
       when :scatter then points.map { |point| [point[:x], point[:y]] }
       when :bubble then points.map { |point| { x: point[:x], y: point[:y], z: point[:z] || 1 } }
       when :range_bar
@@ -563,14 +617,35 @@ module RailsuiCharts
       else
         # A registered type may draw its own labels rather than read them off an
         # axis, in which case flattening the point to a value loses them.
-        return points.map { |point| { x: point[:x], y: point[:y] } } if labelled_points?
+        return points.map { |point| preserved_point(point) } if preserved_points?(point_type) || preserve_combo_points?(points)
+        return aligned_values(points) if misaligned_series?
 
         points.map { |point| point[:y] }
       end
     end
 
-    def labelled_points?
-      RailsuiCharts.config.labelled_point_types.include?(@type)
+    # A slot per shared category, nil where this series has nothing. Apex draws
+    # a nil as a gap, which is what a forecast that begins after the history
+    # ends should look like.
+    def aligned_values(points)
+      lookup = points.each_with_object({}) do |point, memo|
+        memo[point[:x]] = point[:y] if point.is_a?(Hash)
+      end
+
+      category_union.map { |category| lookup[category] }
+    end
+
+    def preserve_combo_points?(points)
+      complex_combo? && points.any? { |point| point[:x].present? }
+    end
+
+    def preserved_points?(type)
+      RailsuiCharts.config.labelled_point_types.include?(type) ||
+        RailsuiCharts.config.complex_point_types.include?(type)
+    end
+
+    def preserved_point(point)
+      point.slice(:x, :y, :z, :meta, :name, :label, :v, :points).compact
     end
 
     # Apex plots a range against a time axis in milliseconds. Handing it a Time
@@ -599,7 +674,7 @@ module RailsuiCharts
       return { labels: { show: false } } if circular?
       return numeric_axis(:x) if numeric_xaxis?
 
-      {
+      options = {
         categories: axis_categories,
         labels: {
           show: categories.any? && !sparkline?,
@@ -617,6 +692,14 @@ module RailsuiCharts
         tooltip: { enabled: false },
         type: "category"
       }
+
+      # A complex combo carries its own x in every point, and a derived category
+      # list alongside numeric pair data makes Apex plot nothing. An explicit
+      # one is different: Apex reads xaxis.categories ahead of everything else,
+      # and without it a combo takes its whole axis from the first series alone
+      # — which draws every other series from position zero.
+      options = options.except(:categories) if complex_combo? && @options[:categories].blank?
+      options
     end
 
     # Scatter and bubble plot real x values. Handing Apex a `categories` array
@@ -781,10 +864,10 @@ module RailsuiCharts
       timeline? || @type == :bar
     end
 
-    # Two scales, so the axis is coloured like its series. One scale keeps the
-    # quiet neutral: there is nothing to tell apart.
-    def axis_ink(index)
-      resolve_var(categorical_palette[index] || config_color(:text))
+    # Series colour belongs to the marks and legend. Keep both scales neutral
+    # so the numbers stay readable and do not compete with the data.
+    def axis_ink(_index)
+      config_color(:text)
     end
 
     # Both sides fitted to their own values, then cut into the same number of
@@ -848,7 +931,7 @@ module RailsuiCharts
 
     def axis_values(side)
       values = @series.select { |series| axis_side(series) == side }
-                      .flat_map { |series| series[:data].map { |point| point[:y] } }
+                      .flat_map { |series| series[:data].flat_map { |point| Array(point[:y]) } }
       # A column grows from a baseline, so its scale has to contain one. A line
       # can float, and forcing zero on a churn rate hovering near 3% would
       # flatten it against the top of the plot.
@@ -986,7 +1069,13 @@ module RailsuiCharts
       # A mixed chart takes its shape from each series, and Apex wants the
       # chart-level type to be "line" while they do — set to "bar" it draws
       # every series as bars whatever they asked for.
-      return "line" if combo?
+      if combo?
+        complex = @series.map.with_index { |series, index| series_point_type(series, index) }
+                         .find { |type| RailsuiCharts.config.complex_point_types.include?(type) }
+        return apex_type_for(complex) if complex
+
+        return "line"
+      end
 
       apex_type_for(@type)
     end
@@ -995,6 +1084,8 @@ module RailsuiCharts
       case type&.to_sym
       when :sparkline then "line"
       when :range_bar then "rangeBar"
+      when :range_area then "rangeArea"
+      when :box_plot then "boxPlot"
       when :column, :bar then "bar"
       when :donut then "donut"
       when :polar_area then "polarArea"

data/lib/railsui_charts/chart_helper.rb

@@ -6,6 +6,11 @@ module RailsuiCharts
     CIRCULAR_TYPES = %i[pie donut polar_area radar].freeze
 
     def railsui_chart(data, type: :line, **options)
+      # A chart whose series are not the numbers a reader wants can say so.
+      # Deleted rather than read, so it never reaches the builder and never
+      # gets serialised into the Stimulus value alongside the real config.
+      explicit_table = options.delete(:accessible_table)
+
       # An empty dataset is a normal day one, not an error. Rendering axes
       # around nothing looks like a chart that failed rather than a chart with
       # nothing to show yet.
@@ -14,7 +19,14 @@ module RailsuiCharts
       config = ApexOptionsBuilder.new(data, type: type, **options).build
       id = options[:id] || "rui-chart-#{SecureRandom.hex(4)}"
 
-      table = options[:accessible] != false ? accessibility_table(config, id: id) : nil
+      table =
+        if options[:accessible] == false
+          nil
+        elsif explicit_table.present?
+          explicit_accessibility_table(explicit_table, id: id)
+        else
+          accessibility_table(config, id: id)
+        end
 
       content_tag(:div,
                   id: id,
@@ -152,6 +164,35 @@ module RailsuiCharts
 
     # Every chart ships a visually hidden table so no value is reachable only by
     # hovering a mark.
+    # The table a caller supplied, rather than one derived from the series.
+    #
+    # This is the accessible half of an extension point: a downstream helper
+    # that stacks scaffolding series to get a shape Apex can draw — a waterfall
+    # holding bars at a running total, say — can still tell a screen reader
+    # what the chart means. The CSV export is built from this table too, so it
+    # gets the same correction for free.
+    def explicit_accessibility_table(table, id:)
+      headers = Array(table[:headers] || table["headers"])
+      rows = Array(table[:rows] || table["rows"])
+      return if rows.blank?
+
+      content_tag(:table, class: "sr-only", aria: { label: "Chart data" }) do
+        safe_join([
+          content_tag(:caption, "Data for chart #{id}"),
+          content_tag(:thead) do
+            content_tag(:tr) { safe_join(headers.map { |header| content_tag(:th, header) }) }
+          end,
+          content_tag(:tbody) do
+            safe_join(rows.map do |row|
+              content_tag(:tr) do
+                safe_join(Array(row).map { |cell| content_tag(:td, cell_value(cell)) })
+              end
+            end)
+          end
+        ])
+      end
+    end
+
     def accessibility_table(config, id:)
       series = config[:series]
       return if series.blank?
@@ -163,6 +204,16 @@ module RailsuiCharts
       else
         columns = Array(series).map { |s| { name: s[:name] || "Value", data: s[:data] } }
         categories = config.dig(:xaxis, :categories) || []
+
+        if categories.blank?
+          point_categories = accessibility_point_categories(columns)
+          if point_categories.present?
+            categories = point_categories
+            columns = columns.map do |column|
+              column.merge(data: accessibility_align_points(column[:data], categories))
+            end
+          end
+        end
       end
       comparison_categories = config[:compare_categories] || []
 
@@ -202,6 +253,20 @@ module RailsuiCharts
       headers
     end
 
+    def accessibility_point_categories(columns)
+      columns.flat_map do |column|
+        Array(column[:data]).filter_map { |value| value[:x] if value.is_a?(Hash) && value.key?(:x) }
+      end.uniq
+    end
+
+    def accessibility_align_points(data, categories)
+      points = Array(data).each_with_object({}) do |value, indexed|
+        indexed[value[:x]] = value if value.is_a?(Hash) && value.key?(:x)
+      end
+
+      categories.map { |category| points[category] }
+    end
+
     def accessibility_category_cells(categories, comparison_categories, index)
       cells = [content_tag(:td, categories[index] || index + 1)]
       cells << content_tag(:td, comparison_categories[index] || index + 1) if comparison_categories.present?
@@ -215,7 +280,9 @@ module RailsuiCharts
         # A bubble carries three numbers that all mean something here. Anything
         # else keeps its label in the category column already, so repeating it
         # beside the value just reads as "A, 6" to a screen reader.
-        value.key?(:z) ? value.values_at(:x, :y, :z).compact.join(", ") : value[:y]
+        return value.values_at(:x, :y, :z).compact.join(", ") if value.key?(:z)
+
+        cell_value(value[:y])
       else value
       end
     end

data/lib/railsui_charts/configuration.rb

@@ -3,7 +3,7 @@
 module RailsuiCharts
   class Configuration
     attr_accessor :default_height, :default_currency, :colors, :series_colors, :theme_css_prefix, :extra_types
-    attr_accessor :labelled_point_types, :typography, :geometry
+    attr_accessor :labelled_point_types, :complex_point_types, :typography, :geometry
 
     # Categorical hues carry identity, so the order is the colourblind-safety
     # mechanism rather than a style choice — it was picked by validating every
@@ -27,6 +27,7 @@ module RailsuiCharts
       # Chart types registered by an extension, such as Rails UI Charts Pro.
       @extra_types = []
       @labelled_point_types = []
+      @complex_point_types = []
       @theme_css_prefix = "--rui-chart"
       @series_colors = (1..SERIES_COUNT).map { |i| "var(--rui-chart-series-#{i}, #{SERIES_FALLBACKS[i - 1]})" }
       @colors = {
@@ -76,11 +77,16 @@ module RailsuiCharts
     # `points: :labelled` keeps each point as {x:, y:}. Most types put the label
     # on the axis and send bare values, but a treemap draws its labels inside
     # the rectangles, so they have to stay in the data.
+    #
+    # `points: :complex` keeps the whole point too, but for a different reason:
+    # some Apex types put several numbers in one y-value, such as OHLC candles,
+    # box plots, and range areas.
     def register_type(type, points: :values)
       type = type.to_sym
 
       @extra_types |= [type]
       @labelled_point_types |= [type] if points == :labelled
+      @complex_point_types |= [type] if points == :complex
 
       type
     end

data/lib/railsui_charts/metric_helper.rb

@@ -146,27 +146,49 @@ module RailsuiCharts
     def metric_dialog(label, value, change, previous, history, compare, format, positive_is_good, options)
       content_tag(:dialog,
                   class: "railsui-metric-dialog",
-                  data: { "railsui-metric-dialog-target": "dialog", action: "click->railsui-metric-dialog#closeOnBackdrop" }) do
+                  data: {
+                    "railsui-metric-dialog-target": "dialog",
+                    action: "click->railsui-metric-dialog#closeOnBackdrop cancel->railsui-metric-dialog#cancel"
+                  }) do
         content_tag(:div, class: "railsui-metric-dialog__panel") do
           safe_join([
             content_tag(:div, class: "railsui-metric-dialog__head") do
               safe_join([
                 metric_card_head(label, value, change, previous, format, positive_is_good),
-                content_tag(:button, "×".html_safe, type: "button", class: "railsui-metric-dialog__close",
-                                                          aria: { label: "Close" }, data: { action: "railsui-metric-dialog#close" })
+                content_tag(:button, metric_dialog_close_icon, type: "button", class: "railsui-metric-dialog__close",
+                                                                 aria: { label: "Close" }, data: { action: "railsui-metric-dialog#close" })
               ])
             end,
             # Room to read values rather than just a trend, so the axis labels
-            # the card suppresses come back. They centre on their data point,
-            # so the outermost two need room or Apex clips them at the canvas.
-            railsui_chart(history, type: :line, compare: compare, format: format, height: 420,
-                                   axis: :right, legend: { show: compare.present? },
-                                   grid: { padding: { left: 28, right: 12 } }, **options)
+            # the card suppresses come back. The header keeps the exact value;
+            # the axis uses compact labels so it stays legible inside the
+            # dialog without clipping at the canvas edge.
+            content_tag(:div, class: "railsui-metric-dialog__chart") do
+              railsui_chart(history, type: :line, compare: compare, format: metric_dialog_chart_format(format), height: 420,
+                                     axis: :right, legend: { show: compare.present? },
+                                     yaxis: { labels: { minWidth: 48, maxWidth: 72, offsetX: 4 } },
+                                     grid: { padding: { left: 32, right: 72 } }, **options)
+            end
           ])
         end
       end
     end
 
+    def metric_dialog_chart_format(format)
+      format == :currency ? :short_currency : format
+    end
+
+    def metric_dialog_close_icon
+      content_tag(:svg,
+                  content_tag(:path, "", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M6 18 18 6M6 6l12 12"),
+                  class: "railsui-metric-dialog__close-icon",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": 2,
+                  aria: { hidden: true })
+    end
+
     def format_metric_value(value, format)
       case format
       when :currency, :short_currency

data/lib/railsui_charts/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsuiCharts
-  VERSION = "0.2.1"
+  VERSION = "0.2.2"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getrailsui/charts",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Rails-native chart components built on ApexCharts. Stimulus controllers for the railsui_charts gem.",
   "author": "Andy Leverenz <railsui@justalever.com>",
   "license": "MIT",

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: railsui_charts
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.2
 platform: ruby
 authors:
 - Andy Leverenz