railsui_charts 0.2.0 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f3fa00b0555667e87a913c0341ac9efcff529d54d4eb3b7e6a70fbe12167d1a1
-  data.tar.gz: 47b6cc37a82c21c1ccbc1213a8876fa37fa8a2573ef6663629d4e1d09d4cb7fc
+  metadata.gz: 5be8bf55b84a7b5a3c7294a1b3958d5042e793efec37266956e2767a74cf1df0
+  data.tar.gz: 891215bb98875af325556b150d2c6e37db60cff1d71f68e62e174efeb4c51ac7
 SHA512:
-  metadata.gz: c5140c807d377faf06d02f1da3b1807d71bf023e3551ba74429ad5bc26aed89e8b19746570337b004080e881beced4cb76a7234c486bf1b28cd6b0810eed423c
-  data.tar.gz: a38ce24f9ba774e6532df52c87e8c71c6260c2103e679702ecb85e50f06d37b40aa09a7d4b3efd1a6cf74eeaa199b48f00708cc76d90b6eaf1fb2a61789904c0
+  metadata.gz: 1c422dda350f4a4b6ca52119fff256715589fda00df0421560b1d6e33b6b4c17162b26ec52f9e82502de5e05e8c33a6f503d5f427af0766b098c2b04b1d0e2ae
+  data.tar.gz: e48dee54260ae743336a05c646a8061f090e7c0ccba4fb5c8d82ab497440afacb8fe5772b67afc00aad62dc4cfdc1031fa6d7beda944bb6b959607f13a763d27

data/CHANGELOG.md

@@ -6,6 +6,30 @@ 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
+  their label and formatted value instead of an empty tooltip.
+- Range-bar and labelled-point tooltips now read the hovered point from the
+  chart config, so timelines and treemaps show the right title, value, and
+  distributed color.
+- Range-bar points keep their `name` and `meta` payloads for tooltip consumers.
+- Chart loading skeletons now follow the same treatment as metric cards: they
+  reserve the footprint, show lightweight skeleton bars, and leave the plot area
+  empty until real data arrives. They align left by default and accept
+  `align: :center` or `align: :right` when a layout needs it.
+
 ## [0.2.0]
 
 The JavaScript now comes from the gem instead of being copied into the

data/README.md

@@ -510,12 +510,14 @@ A series of zeroes is **not** empty. A quiet day still has something to say, and
 
 ```erb
 <%= railsui_metric_card_skeleton chart_height: 180 %>
-<%= railsui_chart_skeleton height: 240, type: :donut %>
+<%= railsui_chart_skeleton height: 240 %>
 ```
 
 Render one server-side and let a Turbo Stream swap in the real thing.
 
-The card skeleton stands in for the text that is coming and leaves the plot area empty — a slab where the chart goes claims more about the shape of the data than a loading state can know. A standalone chart skeleton keeps faint gridlines, since it has nothing else to say it is a chart, and takes the shape of its `type:`.
+The loading helpers stand in for the text and chrome that are coming and leave the plot area empty. A slab where the chart goes claims more about the shape of the data than a loading state can know.
+
+Chart skeletons align left by default. Pass `align: :center` or `align: :right` when a specific layout needs it.
 
 On **refetch**, don't reach for the skeleton. Any element inside a container marked `aria-busy="true"` — which is what Turbo does to a frame while it loads — holds its previous render at reduced opacity instead. The numbers stay on screen and the layout stays still; a skeleton would throw the chart away and flash.
 
@@ -550,7 +552,7 @@ The Stimulus controller initializes charts on `connect` and destroys them on `di
 
 ## Full access
 
-A Rails UI membership adds `railsui_charts_pro`, which builds on this gem
+A Rails UI subscription adds `railsui_charts_pro`, which builds on this gem
 rather than replacing it:
 
 - **Time series** — `TimeSeries` fills the gaps a `GROUP BY` leaves behind, buckets to any interval, and sums rows that collapse together

data/app/assets/javascripts/railsui_charts.js

@@ -88,7 +88,7 @@ var railsui_chart_controller_default = class extends Controller {
   // theme, and it leads with what changed rather than with the date.
   applyTooltip(options) {
     if (options.tooltip_style === false) return options;
-    if (options.tooltip?.custom || options.chart?.sparkline?.enabled) return options;
+    if (options.tooltip?.custom) return options;
     const format = this.formatterFor(options.format || "number", options.currency);
     const rowFormats = (options.series_formats || []).map((name) => this.formatterFor(name, options.currency));
     const comparedDates = options.compare_categories || [];
@@ -101,6 +101,13 @@ var railsui_chart_controller_default = class extends Controller {
         ...options.tooltip || {},
         custom: ({ series, seriesIndex, dataPointIndex, w }) => {
           const labels = w.globals.categoryLabels?.length ? w.globals.categoryLabels : w.globals.labels;
+          if (options.chart?.type === "rangeBar") {
+            return this.rangeBarTooltipMarkup({ series, seriesIndex, dataPointIndex, w }, options, format);
+          }
+          const configuredPoint = this.configuredPoint(options, w, seriesIndex, dataPointIndex);
+          if (this.labelledPoint(configuredPoint)) {
+            return this.labelledPointTooltipMarkup({ series, seriesIndex, dataPointIndex, w }, options, format);
+          }
           if (!Array.isArray(series[0])) {
             const slice = seriesIndex ?? dataPointIndex;
             const row = { label: "", value: series[slice], color: w.globals.colors[slice], format: rowFormats[slice] || null };
@@ -124,6 +131,125 @@ var railsui_chart_controller_default = class extends Controller {
       }
     };
   }
+  configuredPoint(options, w, seriesIndex, dataPointIndex) {
+    return (w.config?.series?.[seriesIndex] || options.series?.[seriesIndex] || {}).data?.[dataPointIndex];
+  }
+  labelledPoint(point) {
+    return point !== null && typeof point === "object" && !Array.isArray(point) && "x" in point && "y" in point;
+  }
+  labelledPointTooltipMarkup({ series, seriesIndex, dataPointIndex, w }, options, format) {
+    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],
+      color: this.pointColor(options, w, seriesIndex, dataPointIndex),
+      format: null
+    };
+    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] || {};
+    const fallbackValue = series?.[seriesIndex]?.[dataPointIndex];
+    const value = Array.isArray(point.y) ? point.y : fallbackValue;
+    const title = point.name || point.label || point.meta?.label || point.x || w.globals.categoryLabels?.[dataPointIndex] || w.globals.labels?.[dataPointIndex] || configuredSeries.name;
+    const rowLabel = point.name || point.label || point.meta?.label ? point.x || configuredSeries.name || "Range" : "Range";
+    const row = {
+      label: rowLabel,
+      value: this.formatRangeValue(value, options, format),
+      color: this.pointColor(options, w, seriesIndex, dataPointIndex),
+      format: null
+    };
+    return this.tooltipMarkup(title, [row], null, null);
+  }
+  pointColor(options, w, seriesIndex, dataPointIndex) {
+    if (options.plotOptions?.bar?.distributed && Array.isArray(options.colors)) {
+      return options.colors[dataPointIndex] || w.globals.colors?.[dataPointIndex] || w.globals.colors?.[seriesIndex];
+    }
+    if (options.plotOptions?.treemap?.distributed && Array.isArray(options.colors)) {
+      return options.colors[dataPointIndex] || w.globals.colors?.[dataPointIndex] || w.globals.colors?.[seriesIndex];
+    }
+    return w.globals.colors?.[seriesIndex] || options.colors?.[seriesIndex] || options.colors?.[0];
+  }
+  formatRangeValue(value, options, format) {
+    const values = Array.isArray(value) ? value : [value];
+    const present = values.filter((entry) => entry !== null && entry !== void 0);
+    if (present.length === 0) return null;
+    if (present.length === 2 && present.every((entry) => this.timestampLike(entry))) {
+      const [start, finish] = present;
+      if (this.sameTimestampDay(start, finish, options)) {
+        const startTime = this.formatTimestampTime(start, options);
+        const finishTime = this.formatTimestampTime(finish, options);
+        return startTime === finishTime ? `${this.formatTimestampDate(start, options)}, ${startTime}` : `${this.formatTimestampDate(start, options)}, ${startTime} - ${finishTime}`;
+      }
+    }
+    const formatted = present.map((entry) => this.formatRangeEndpoint(entry, options, format));
+    if (formatted.length === 1 || formatted[0] === formatted[1]) return formatted[0];
+    return `${formatted[0]} - ${formatted[formatted.length - 1]}`;
+  }
+  formatRangeEndpoint(value, options, format) {
+    if (this.timestampLike(value)) return `${this.formatTimestampDate(value, options)}, ${this.formatTimestampTime(value, options)}`;
+    if (format) return format(value);
+    return value;
+  }
+  timestampLike(value) {
+    return typeof value === "number" && Number.isFinite(value) && Math.abs(value) >= 1e11;
+  }
+  sameTimestampDay(left, right, options) {
+    const leftDate = new Date(left);
+    const rightDate = new Date(right);
+    if (this.datetimeUTC(options)) {
+      return leftDate.toISOString().slice(0, 10) === rightDate.toISOString().slice(0, 10);
+    }
+    return leftDate.getFullYear() === rightDate.getFullYear() && leftDate.getMonth() === rightDate.getMonth() && leftDate.getDate() === rightDate.getDate();
+  }
+  formatTimestampDate(value, options) {
+    return new Intl.DateTimeFormat("en-US", {
+      ...this.datetimeUTC(options) ? { timeZone: "UTC" } : {},
+      month: "short",
+      day: "numeric"
+    }).format(new Date(value));
+  }
+  formatTimestampTime(value, options) {
+    return new Intl.DateTimeFormat("en-US", {
+      ...this.datetimeUTC(options) ? { timeZone: "UTC" } : {},
+      hour: "numeric",
+      minute: "2-digit"
+    }).format(new Date(value));
+  }
+  datetimeUTC(options) {
+    return options.xaxis?.labels?.datetimeUTC !== false;
+  }
   tooltipDelta(current, previous, upIsGood) {
     if (![current, previous].every((n) => typeof n === "number") || previous === 0) return null;
     const change = (current - previous) / Math.abs(previous) * 100;
@@ -350,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

@@ -171,12 +171,22 @@
 }
 
 .railsui-chart-state--loading {
+  align-items: center;
+  justify-content: flex-start;
   border-style: none;
-  padding: 0;
+  padding: 1rem;
+  text-align: left;
+}
+
+.railsui-chart-state--loading-center {
+  justify-content: center;
+}
+
+.railsui-chart-state--loading-right {
+  justify-content: flex-end;
 }
 
 /* Shared placeholder surface: a fill plus the sheen that crosses it. */
-.railsui-chart-skeleton,
 .railsui-skeleton-bar {
   position: relative;
   overflow: hidden;
@@ -196,30 +206,33 @@
 .railsui-skeleton-bar--meta { width: 7rem; height: 0.75rem; }
 .railsui-skeleton-bar--footer { width: 6.5rem; height: 0.75rem; }
 
-/* Gridlines rather than a plain block, so a standalone chart placeholder still
-   reads as a chart arriving. */
+/* Same rule as the metric card skeleton: stand in for surrounding text and
+   controls, but leave the plot area empty. A filled chart slab claims too much
+   about data that has not arrived. */
 .railsui-chart-skeleton {
+  display: flex;
+  flex-direction: column;
+  width: clamp(18rem, 48%, 42rem);
+  max-width: 100%;
+  gap: 0.5rem;
+}
+
+.railsui-chart-skeleton .railsui-skeleton-bar--label { width: 36%; }
+.railsui-chart-skeleton .railsui-skeleton-bar--value { width: 76%; }
+.railsui-chart-skeleton .railsui-skeleton-bar--meta { width: 54%; }
+.railsui-chart-skeleton .railsui-skeleton-bar--footer { width: 48%; }
+
+.railsui-chart-skeleton__plot {
   display: block;
-  width: 100%;
-  min-height: inherit;
-  align-self: stretch;
-  border-radius: 0.5rem;
-  /* Its own line colour, softer than a real gridline. A placeholder should
-     suggest the shape of what is coming without competing with the charts
-     already on screen around it. */
-  background-image: repeating-linear-gradient(
-    to bottom,
-    var(--rui-chart-skeleton-line) 0,
-    var(--rui-chart-skeleton-line) 1px,
-    transparent 1px,
-    transparent 25%
-  );
+  min-height: 4rem;
+}
+
+.railsui-chart-skeleton .railsui-skeleton-bar--footer {
+  margin-top: 0.25rem;
 }
 
-/* A sheen sweeping across, rather than the whole block breathing. Pulsing
-   opacity dims the gridlines too and reads as a broken element; a sweep reads
-   as work in progress. */
-.railsui-chart-skeleton::after,
+/* A sheen sweeping across, rather than the whole block breathing. Pulsing reads
+   as a broken element; a sweep reads as work in progress. */
 .railsui-skeleton-bar::after {
   content: "";
   position: absolute;
@@ -234,16 +247,6 @@
   animation: railsui-chart-sweep 1.6s ease-in-out infinite;
 }
 
-/* Circular forms get a disc, so the placeholder is the shape of the thing
-   being waited on. */
-.railsui-chart-skeleton--circular {
-  width: auto;
-  aspect-ratio: 1;
-  margin: 0 auto;
-  border-radius: 9999px;
-  background-image: none;
-}
-
 @keyframes railsui-chart-sweep {
   100% { transform: translateX(100%); }
 }
@@ -259,7 +262,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   /* The skeleton still reads as a placeholder standing still. */
-  .railsui-chart-skeleton::after,
   .railsui-skeleton-bar::after {
     animation: none;
     opacity: 0.4;
@@ -516,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. */
@@ -566,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 {
@@ -593,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

@@ -113,7 +113,7 @@ export default class extends Controller {
     // `tooltip_style: false` hands the tooltip back to Apex; passing your own
     // `tooltip.custom` also wins.
     if (options.tooltip_style === false) return options
-    if (options.tooltip?.custom || options.chart?.sparkline?.enabled) return options
+    if (options.tooltip?.custom) return options
 
     const format = this.formatterFor(options.format || "number", options.currency)
     // One formatter per series on a combo, so a currency row and a percentage
@@ -131,6 +131,16 @@ export default class extends Controller {
         custom: ({ series, seriesIndex, dataPointIndex, w }) => {
           const labels = w.globals.categoryLabels?.length ? w.globals.categoryLabels : w.globals.labels
 
+          if (options.chart?.type === "rangeBar") {
+            return this.rangeBarTooltipMarkup({ series, seriesIndex, dataPointIndex, w }, options, format)
+          }
+
+          const configuredPoint = this.configuredPoint(options, w, seriesIndex, dataPointIndex)
+
+          if (this.labelledPoint(configuredPoint)) {
+            return this.labelledPointTooltipMarkup({ series, seriesIndex, dataPointIndex, w }, options, format)
+          }
+
           // A pie, donut or polar area hands back one number per slice rather
           // than one array per series, and names the hovered slice with
           // seriesIndex — dataPointIndex means nothing there. Read as a
@@ -171,6 +181,161 @@ export default class extends Controller {
     }
   }
 
+  configuredPoint(options, w, seriesIndex, dataPointIndex) {
+    return (w.config?.series?.[seriesIndex] || options.series?.[seriesIndex] || {}).data?.[dataPointIndex]
+  }
+
+  labelledPoint(point) {
+    return point !== null && typeof point === "object" && !Array.isArray(point) && "x" in point && "y" in point
+  }
+
+  labelledPointTooltipMarkup({ series, seriesIndex, dataPointIndex, w }, options, format) {
+    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],
+      color: this.pointColor(options, w, seriesIndex, dataPointIndex),
+      format: null
+    }
+
+    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] || {}
+    const fallbackValue = series?.[seriesIndex]?.[dataPointIndex]
+    const value = Array.isArray(point.y) ? point.y : fallbackValue
+    const title = point.name || point.label || point.meta?.label || point.x || w.globals.categoryLabels?.[dataPointIndex] || w.globals.labels?.[dataPointIndex] || configuredSeries.name
+    const rowLabel = point.name || point.label || point.meta?.label ? (point.x || configuredSeries.name || "Range") : "Range"
+
+    const row = {
+      label: rowLabel,
+      value: this.formatRangeValue(value, options, format),
+      color: this.pointColor(options, w, seriesIndex, dataPointIndex),
+      format: null
+    }
+
+    return this.tooltipMarkup(title, [row], null, null)
+  }
+
+  pointColor(options, w, seriesIndex, dataPointIndex) {
+    if (options.plotOptions?.bar?.distributed && Array.isArray(options.colors)) {
+      return options.colors[dataPointIndex] || w.globals.colors?.[dataPointIndex] || w.globals.colors?.[seriesIndex]
+    }
+
+    if (options.plotOptions?.treemap?.distributed && Array.isArray(options.colors)) {
+      return options.colors[dataPointIndex] || w.globals.colors?.[dataPointIndex] || w.globals.colors?.[seriesIndex]
+    }
+
+    return w.globals.colors?.[seriesIndex] || options.colors?.[seriesIndex] || options.colors?.[0]
+  }
+
+  formatRangeValue(value, options, format) {
+    const values = Array.isArray(value) ? value : [value]
+    const present = values.filter((entry) => entry !== null && entry !== undefined)
+
+    if (present.length === 0) return null
+
+    if (present.length === 2 && present.every((entry) => this.timestampLike(entry))) {
+      const [start, finish] = present
+
+      if (this.sameTimestampDay(start, finish, options)) {
+        const startTime = this.formatTimestampTime(start, options)
+        const finishTime = this.formatTimestampTime(finish, options)
+
+        return startTime === finishTime
+          ? `${this.formatTimestampDate(start, options)}, ${startTime}`
+          : `${this.formatTimestampDate(start, options)}, ${startTime} - ${finishTime}`
+      }
+    }
+
+    const formatted = present.map((entry) => this.formatRangeEndpoint(entry, options, format))
+    if (formatted.length === 1 || formatted[0] === formatted[1]) return formatted[0]
+
+    return `${formatted[0]} - ${formatted[formatted.length - 1]}`
+  }
+
+  formatRangeEndpoint(value, options, format) {
+    if (this.timestampLike(value)) return `${this.formatTimestampDate(value, options)}, ${this.formatTimestampTime(value, options)}`
+    if (format) return format(value)
+
+    return value
+  }
+
+  timestampLike(value) {
+    return typeof value === "number" && Number.isFinite(value) && Math.abs(value) >= 100_000_000_000
+  }
+
+  sameTimestampDay(left, right, options) {
+    const leftDate = new Date(left)
+    const rightDate = new Date(right)
+
+    if (this.datetimeUTC(options)) {
+      return leftDate.toISOString().slice(0, 10) === rightDate.toISOString().slice(0, 10)
+    }
+
+    return leftDate.getFullYear() === rightDate.getFullYear()
+      && leftDate.getMonth() === rightDate.getMonth()
+      && leftDate.getDate() === rightDate.getDate()
+  }
+
+  formatTimestampDate(value, options) {
+    return new Intl.DateTimeFormat("en-US", {
+      ...(this.datetimeUTC(options) ? { timeZone: "UTC" } : {}),
+      month: "short",
+      day: "numeric"
+    }).format(new Date(value))
+  }
+
+  formatTimestampTime(value, options) {
+    return new Intl.DateTimeFormat("en-US", {
+      ...(this.datetimeUTC(options) ? { timeZone: "UTC" } : {}),
+      hour: "numeric",
+      minute: "2-digit"
+    }).format(new Date(value))
+  }
+
+  datetimeUTC(options) {
+    return options.xaxis?.labels?.datetimeUTC !== false
+  }
+
   tooltipDelta(current, previous, upIsGood) {
     if (![current, previous].every((n) => typeof n === "number") || previous === 0) return null
 

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
@@ -152,7 +158,13 @@ module RailsuiCharts
         case point
         when Hash
           point = point.symbolize_keys if point.respond_to?(:symbolize_keys)
-          { x: point[:x], y: span_or_value(point), z: point[:z] }
+          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] }
         else
@@ -171,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
@@ -534,35 +586,66 @@ 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
         # Both ends stay in the point. A range read off an axis is only half a
         # range, and the label names the row rather than a position on a scale.
-        points.map { |point| { x: point[:x], y: Array(point[:y]).map { |edge| range_edge(edge) } } }
+        points.map do |point|
+          range = { x: point[:x], y: Array(point[:y]).map { |edge| range_edge(edge) } }
+          range[:meta] = point[:meta] if point.key?(:meta)
+          range[:name] = point[:name] if point.key?(:name)
+          range
+        end
       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
@@ -591,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?,
@@ -609,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
@@ -773,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
@@ -840,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.
@@ -978,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
@@ -987,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,
@@ -80,23 +92,38 @@ module RailsuiCharts
     end
 
     # Server-rendered placeholder for a chart whose data has not arrived yet —
-    # the thing a Turbo frame shows before it swaps in the real one. Pass the
-    # `type:` it will become so the placeholder is the shape being waited on.
-    def railsui_chart_skeleton(height: nil, type: :line, label: "Loading chart")
-      classes = ["railsui-chart-skeleton"]
-      classes << "railsui-chart-skeleton--circular" if CIRCULAR_TYPES.include?(type.to_sym)
+    # the thing a Turbo frame shows before it swaps in the real one. It keeps
+    # the chart footprint and avoids drawing fake chart geometry before data
+    # exists.
+    def railsui_chart_skeleton(height: nil, type: :line, label: "Loading chart", align: :left)
+      alignment = skeleton_alignment(align)
 
       content_tag(:div,
-                  class: "railsui-chart-state railsui-chart-state--loading",
+                  class: "railsui-chart-state railsui-chart-state--loading railsui-chart-state--loading-#{alignment}",
                   style: state_height(height),
                   role: "status",
                   aria: { label: label, busy: true }) do
-        content_tag(:span, "", class: classes.join(" "), aria: { hidden: true })
+        content_tag(:div, class: "railsui-chart-skeleton", aria: { hidden: true }) do
+          safe_join([
+            content_tag(:span, "", class: "railsui-skeleton-bar railsui-skeleton-bar--label"),
+            content_tag(:span, "", class: "railsui-skeleton-bar railsui-skeleton-bar--value"),
+            content_tag(:span, "", class: "railsui-skeleton-bar railsui-skeleton-bar--meta"),
+            content_tag(:span, "", class: "railsui-chart-skeleton__plot"),
+            content_tag(:span, "", class: "railsui-skeleton-bar railsui-skeleton-bar--footer")
+          ])
+        end
       end
     end
 
     private
 
+    def skeleton_alignment(align)
+      alignment = align.to_sym
+      return alignment if %i[left center right].include?(alignment)
+
+      raise ArgumentError, "Unsupported skeleton alignment: #{align}. Supported: left, center, right"
+    end
+
     def chart_state(kind, title:, description:, height:)
       content_tag(:div,
                   class: "railsui-chart-state railsui-chart-state--#{kind}",
@@ -137,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?
@@ -148,7 +204,18 @@ 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] || []
 
       rows = columns.first&.dig(:data)
       return if rows.blank?
@@ -159,7 +226,7 @@ module RailsuiCharts
           content_tag(:thead) do
             content_tag(:tr) do
               safe_join(
-                [content_tag(:th, "Category")] +
+                accessibility_category_headers(comparison_categories) +
                   columns.map { |column| content_tag(:th, column[:name]) }
               )
             end
@@ -169,7 +236,7 @@ module RailsuiCharts
               rows.each_with_index.map do |_, index|
                 content_tag(:tr) do
                   safe_join(
-                    [content_tag(:td, categories[index] || index + 1)] +
+                    accessibility_category_cells(categories, comparison_categories, index) +
                       columns.map { |column| content_tag(:td, cell_value(column[:data][index])) }
                   )
                 end
@@ -180,6 +247,32 @@ module RailsuiCharts
       end
     end
 
+    def accessibility_category_headers(comparison_categories)
+      headers = [content_tag(:th, "Category")]
+      headers << content_tag(:th, "Comparison category") if comparison_categories.present?
+      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?
+      cells
+    end
+
     def cell_value(value)
       case value
       when Array then value.join(", ")
@@ -187,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.0"
+  VERSION = "0.2.2"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getrailsui/charts",
-  "version": "0.2.0",
+  "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.0
+  version: 0.2.2
 platform: ruby
 authors:
 - Andy Leverenz