railsui_charts 0.2.1 → 0.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '049e45e39a745fa833e9ba7835a09ecf960cb837b5d86c07c48d311201cddd6e'
-  data.tar.gz: 5b649ab130a83f43fa87490699fc5514eb00ee9eb92d5bdf6d059e31ac61f73e
+  metadata.gz: edb2d338949929fa733699ed8c06cc91edd16c4e5bf9621db0e1db0fa019b245
+  data.tar.gz: dfb7e2e6dabeb591d544fdcf68070ea997451bd7f1fb19bb36a5f793a9160bbd
 SHA512:
-  metadata.gz: 9d86406916a9fc276372ae9f200f0a0b7fd4d27327caa0e56264d1e79f7eb315c1dde4293c2c275da3f63d02ba47df38524c8d7cb3119ce7204cb36cf5754580
-  data.tar.gz: 2aacd7f09219f90924d07f5412fc4a25e62fcf312bd4903817138fea5f326d0d1ba48ec3169c416ac5e94141d43dd801c47dde340acc2a7b432c1761abd0aee8
+  metadata.gz: 40dc738c972145c4b092a9802f77ea3a406b97305cf2c9355f209ac3bdd97612982fc6fea6c62b83e6ba20686fc67313b04bb1a18152685a68f11724df2bbe40
+  data.tar.gz: 04a089986c882997b1b297ed048495facf4a6da6761b9bafdfc4c5fb80a1d094cffe544fd30670469736d46c3ca497f9ffd6b3345a65663ff72e57e84a5a7bcb

data/CHANGELOG.md

@@ -6,6 +6,69 @@ public API may change between minor versions.
 
 ## [Unreleased]
 
+## [0.2.3]
+
+### Fixed
+
+- The installer no longer writes a stylesheet import that cannot resolve. From
+  0.1.0 through 0.2.2 it appended `@import "../../stylesheets/railsui_charts";`
+  to `app/assets/tailwind/application.css`. Relative to that file the path names
+  `app/stylesheets` — not the application's own `app/assets/stylesheets`, and not
+  the gem's copy, which lives outside the application where no relative path can
+  reach it. Tailwind does not quietly skip an import it cannot resolve; it fails
+  the build. So an application that ran the installer and used Tailwind did not
+  get unstyled charts, it got no stylesheet build at all, and one that did not
+  use Tailwind never received the CSS by any route.
+
+  The stylesheet is now served from the gem through the asset pipeline, which
+  already carried it, and the installer links it in the application layout.
+  Nothing is copied, so `bundle update` moves the CSS the way it already moves
+  the Ruby and the JavaScript. Running `rails g railsui_charts:install` again
+  takes the old import back out.
+
+- Chart data tables are hidden by the gem's own `.railsui-chart-data-table`
+  rather than by the host application's `sr-only`. An application not running
+  Tailwind has no such class, and rendered the table at full size in the middle
+  of the page. Even where it exists it does not hide a table: `width: 1px` is a
+  suggestion a table box ignores, because CSS never sizes one below its
+  min-content width. The table laid out at full width and, being positioned,
+  pushed the page's scroll width past the viewport — which on a phone reads as
+  the whole page sliding sideways. `table-layout: fixed` is what makes the width
+  stick. `sr-only` rides along for applications that already style it.
+
+### Added
+
+- `@getrailsui/charts/styles.css`, for an application that would rather pull the
+  stylesheet into its own Tailwind build than link it separately.
+
+## [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
+
+- Series that do not share an x-axis now align to the union of their labels, or
+  to an explicit `categories:` when one is given, since series order is not
+  always reading order. Categories were read off the first series alone and
+  every later series was flattened to bare values from position zero, so a
+  projection labelled November landed on January, on top of the history it was
+  meant to continue. Apex draws the resulting gaps as gaps.
+- A complex combo keeps a `categories:` it was given. Derived lists are still
+  stripped, because one alongside numeric pair data makes Apex plot nothing, but
+  Apex reads `xaxis.categories` ahead of everything else and without one sets the
+  axis from the first series alone. For a forecast that was ruinous: the band is
+  drawn first so it sits behind the lines, so the projection's months became the
+  whole axis and the earlier history disappeared.
+
+## [0.2.1]
+
 ### Fixed
 
 - Sparkline charts now use the Rails UI tooltip renderer, so hovered points show
@@ -123,7 +186,10 @@ First release.
   reachable only by hovering a mark
 - Animation stops when the reader has asked for reduced motion
 
-[Unreleased]: https://github.com/getrailsui/railsui_charts/compare/v0.2.0...HEAD
+[Unreleased]: https://github.com/getrailsui/railsui_charts/compare/v0.2.3...HEAD
+[0.2.3]: https://github.com/getrailsui/railsui_charts/compare/v0.2.2...v0.2.3
+[0.2.2]: https://github.com/getrailsui/railsui_charts/compare/v0.2.1...v0.2.2
+[0.2.1]: https://github.com/getrailsui/railsui_charts/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/getrailsui/railsui_charts/compare/v0.1.2...v0.2.0
 [0.1.2]: https://github.com/getrailsui/railsui_charts/compare/v0.1.1...v0.1.2
 [0.1.1]: https://github.com/getrailsui/railsui_charts/compare/v0.1.0...v0.1.1

data/README.md

@@ -42,8 +42,31 @@ bundle install
 rails g railsui_charts:install
 ```
 
-The generator adds the stylesheet import. The JavaScript is served from the gem
-rather than copied into your app, so `bundle update` moves all of it.
+The generator links the stylesheet in your layout. Both the CSS and the
+JavaScript are served from the gem rather than copied into your app, so
+`bundle update` moves all of it.
+
+### Stylesheet
+
+The generator adds this to your layout's `<head>`:
+
+```erb
+<%= stylesheet_link_tag "railsui_charts" %>
+```
+
+The engine puts the file on the asset path and precompiles it, so this works on
+Propshaft and on Sprockets without anything further.
+
+If you would rather the CSS went through your own Tailwind build — to control
+where it lands in the cascade, say — install the npm package below and import it
+instead of linking it:
+
+```css
+/* app/assets/tailwind/application.css */
+@import "@getrailsui/charts/styles.css";
+```
+
+Do one or the other, not both.
 
 ### Bundled apps (esbuild, bun, rollup, webpack)
 
@@ -75,6 +98,23 @@ import { registerRailsuiCharts } from "@getrailsui/charts"
 registerRailsuiCharts(application)
 ```
 
+### Upgrading from 0.2.2 and earlier
+
+Those versions' installer wrote an `@import` into `app/assets/tailwind/application.css`
+that could never resolve — it named `app/stylesheets`, which is neither your app's
+stylesheets nor the gem's. Tailwind fails the build on an import it cannot find, so
+if you have this line, your CSS build is broken:
+
+```css
+@import "../../stylesheets/railsui_charts";
+```
+
+Running the installer again removes it and links the stylesheet properly:
+
+```bash
+rails g railsui_charts:install
+```
+
 ### Upgrading from 0.1.x
 
 0.1.x copied the controllers into `app/javascript/controllers`. Those copies are

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

@@ -110,6 +110,51 @@
   width: 100%;
 }
 
+/* ------------------------------------------------------------- chart data */
+
+/* The table behind every chart: out of sight, still in the accessibility tree,
+   so no value is reachable only by hovering a mark.
+ *
+ * Hidden here rather than by borrowing the host's `sr-only`, for two reasons.
+ * An app that is not running Tailwind has no such class, and the table renders
+ * at full size in the middle of the page. And even where it exists, `sr-only`
+ * does not hide a table: it shrinks an element to 1px and clips the rest, but
+ * width is only a suggestion to a table box, which CSS never sizes below its
+ * min-content width. The hidden table lays out at its full width, and since it
+ * is positioned, it pushes the page's scroll width past the viewport — which
+ * on a phone reads as the whole page sliding sideways.
+ *
+ * Fixed layout is what makes the 1px stick. The caption needs the same
+ * treatment for the same reason: left in flow, its own min-content width holds
+ * the table open on its own. Neither is removed from the accessibility tree.
+ *
+ * The height stays at the table's own — that one is a minimum a table will not
+ * go under either, and `contain` does not apply to a table box. It costs
+ * nothing: the element is out of flow, and a page carrying a chart is taller
+ * than the table under it. Collapsing it would take `display: block`, which
+ * throws away the table semantics this element exists for. */
+.railsui-chart-data-table {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+  table-layout: fixed;
+}
+
+.railsui-chart-data-table > caption {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+
 /* -------------------------------------------------------- small multiples */
 
 .railsui-small-multiples {
@@ -518,6 +563,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 +619,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 +665,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/generators/railsui_charts/install/install_generator.rb

@@ -8,23 +8,62 @@ module RailsuiCharts
       # version was installed — a fix could ship and reach nobody. Bundled apps
       # take it from npm, importmap apps from the pin this engine adds, and both
       # follow the gem from then on.
-      def add_css_import
-        path = "app/assets/tailwind/application.css"
-        import_statement = %q(@import "../../stylesheets/railsui_charts";)
-        full_path = File.join(destination_root, path)
-
-        unless File.exist?(full_path)
-          say "⚠️  #{path} not found. Add this import manually:", :yellow
-          say "  #{import_statement}"
+      #
+      # The stylesheet now follows the same rule, for the same reason and after
+      # the same mistake. See remove_broken_css_import.
+
+      LAYOUT = "app/views/layouts/application.html.erb"
+      TAILWIND_ENTRY = "app/assets/tailwind/application.css"
+      STYLESHEET_TAG = %q(<%= stylesheet_link_tag "railsui_charts" %>).freeze
+
+      # What 0.1.0 through 0.2.2 wrote into the Tailwind entry. It never worked.
+      # Relative to app/assets/tailwind it names app/stylesheets — not the
+      # application's own app/assets/stylesheets, and certainly not the file it
+      # was after, which lives inside the gem where no relative path from the
+      # application can reach it. Tailwind does not quietly skip an import it
+      # cannot resolve; it fails the build. So this is removed rather than
+      # corrected, from anyone who ran the old generator.
+      BROKEN_IMPORT = %r{^@import\s+"\.\./\.\./stylesheets/railsui_charts";?[ \t]*\r?\n}.freeze
+
+      def remove_broken_css_import
+        path = File.join(destination_root, TAILWIND_ENTRY)
+        return unless File.exist?(path)
+
+        contents = File.read(path)
+        return unless contents.match?(BROKEN_IMPORT)
+
+        File.write(path, contents.sub(BROKEN_IMPORT, ""))
+        say "✓ Removed the unresolvable @import from #{TAILWIND_ENTRY}", :green
+        say "  It named a path that does not exist and failed the Tailwind build.", :yellow
+      end
+
+      # Served from the gem through the asset pipeline, which already carries it:
+      # the engine puts app/assets/stylesheets on the load path and precompiles
+      # the file. Nothing is copied, so `bundle update` moves the CSS too.
+      def add_stylesheet_link
+        path = File.join(destination_root, LAYOUT)
+
+        unless File.exist?(path)
+          say "⚠️  #{LAYOUT} not found. Add this to your layout's <head>:", :yellow
+          say "  #{STYLESHEET_TAG}"
           return
         end
 
-        if File.read(full_path).include?(import_statement)
-          say "✓ RailsUI Charts CSS import already present", :green
-        else
-          append_to_file path, "#{import_statement}\n"
-          say "✓ Added RailsUI Charts CSS import to #{path}", :green
+        contents = File.read(path)
+
+        if contents.include?(%("railsui_charts"))
+          say "✓ Rails UI Charts stylesheet already linked", :green
+          return
+        end
+
+        unless contents.match?(%r{</head>})
+          say "⚠️  No </head> found in #{LAYOUT}. Add this to your layout's <head>:", :yellow
+          say "  #{STYLESHEET_TAG}"
+          return
         end
+
+        inject_into_file LAYOUT, "    #{STYLESHEET_TAG}\n", before: %r{^[ \t]*</head>}
+        say "✓ Linked the Rails UI Charts stylesheet in #{LAYOUT}", :green
       end
 
       def print_next_steps
@@ -51,6 +90,13 @@ module RailsuiCharts
           say "ApexCharts is a peer dependency; pin it too:", :cyan
           say '  pin "apexcharts", to: "https://esm.sh/apexcharts@3.45.2"', :cyan
           say ""
+        elsif File.exist?(File.join(destination_root, TAILWIND_ENTRY))
+          say "Prefer the CSS inside your Tailwind build? Once the package is", :cyan
+          say "installed you can drop the stylesheet_link_tag and import it:", :cyan
+          say ""
+          say "  /* #{TAILWIND_ENTRY} */", :cyan
+          say '  @import "@getrailsui/charts/styles.css";', :cyan
+          say ""
         end
 
         say "Then use <%= railsui_chart data, type: :area %> in your views.", :cyan

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,
@@ -151,7 +163,40 @@ module RailsuiCharts
     end
 
     # Every chart ships a visually hidden table so no value is reachable only by
-    # hovering a mark.
+    # hovering a mark. The hiding is the gem's own — `sr-only` rides along for
+    # apps that already style it, but a host utility cannot be relied on to
+    # exist, and Tailwind's does not actually hide a table. See
+    # railsui-chart-data-table in the stylesheet.
+    #
+    # 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: "railsui-chart-data-table 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,13 +208,23 @@ 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?
 
-      content_tag(:table, class: "sr-only", aria: { label: "Chart data" }) do
+      content_tag(:table, class: "railsui-chart-data-table sr-only", aria: { label: "Chart data" }) do
         safe_join([
           content_tag(:caption, "Data for chart #{id}"),
           content_tag(:thead) do
@@ -202,6 +257,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 +284,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.3"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getrailsui/charts",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Rails-native chart components built on ApexCharts. Stimulus controllers for the railsui_charts gem.",
   "author": "Andy Leverenz <railsui@justalever.com>",
   "license": "MIT",
@@ -14,15 +14,18 @@
   "module": "app/javascript/railsui_charts/index.js",
   "exports": {
     ".": "./app/javascript/railsui_charts/index.js",
+    "./styles.css": "./app/assets/stylesheets/railsui_charts.css",
     "./controllers/*": "./app/javascript/controllers/*"
   },
   "files": [
     "app/javascript",
     "app/assets/javascripts",
+    "app/assets/stylesheets",
     "README.md",
     "LICENSE.md",
     "CHANGELOG.md"
   ],
+  "packageManager": "yarn@4.11.0",
   "scripts": {
     "build": "esbuild app/javascript/railsui_charts/index.js --bundle --format=esm --external:@hotwired/stimulus --external:apexcharts --outfile=app/assets/javascripts/railsui_charts.js"
   },

metadata

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