railsui_charts 0.1.2 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 90aab15c8c1ef133527f757c7e24344da84a62a190825a13decee8979cf79892
-  data.tar.gz: db6626712782f3a93d92ea8c149d9fbe27cece328b1cfca4b611269dd06a8c0b
+  metadata.gz: '049e45e39a745fa833e9ba7835a09ecf960cb837b5d86c07c48d311201cddd6e'
+  data.tar.gz: 5b649ab130a83f43fa87490699fc5514eb00ee9eb92d5bdf6d059e31ac61f73e
 SHA512:
-  metadata.gz: 94345b1a73e7cdd1e2760ee58462f6af60396019295cb0a05a5f300120c2d5ed192d64770cb38254abfa959e94ca5ab51ed9353107163e5f2eb75a22e42611a9
-  data.tar.gz: e89fad7105008595f9de2070044287e1c193a09ab83dd327492a794106259d24783fc30ed580e19c07a40c8a7ea06ed2fbb7ac5780d620af0eafe7ce643da9d8
+  metadata.gz: 9d86406916a9fc276372ae9f200f0a0b7fd4d27327caa0e56264d1e79f7eb315c1dde4293c2c275da3f63d02ba47df38524c8d7cb3119ce7204cb36cf5754580
+  data.tar.gz: 2aacd7f09219f90924d07f5412fc4a25e62fcf312bd4903817138fea5f326d0d1ba48ec3169c416ac5e94141d43dd801c47dde340acc2a7b432c1761abd0aee8

data/CHANGELOG.md

@@ -6,6 +6,62 @@ public API may change between minor versions.
 
 ## [Unreleased]
 
+### 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
+application. This is a breaking change to how it is installed; the helpers, the
+chart API and the CSS are untouched.
+
+### Added
+
+- An npm package, `@getrailsui/charts`, for applications that bundle their
+  JavaScript. It carries the Stimulus controllers and a
+  `registerRailsuiCharts(application)` helper that registers each one under the
+  identifier the Ruby helpers emit.
+- Importmap support. The engine adds its own pins to the host application's
+  importmap and serves a prebuilt, self-contained build, so an importmap app
+  needs no package and no copied files. Both worlds use the same import line.
+- `@hotwired/stimulus` and `apexcharts` are declared as peer dependencies rather
+  than bundled, so an application keeps one copy of each.
+
+### Changed
+
+- **`rails g railsui_charts:install` no longer copies the controllers.** It adds
+  the stylesheet import and prints the right next step for a bundled or an
+  importmap app.
+- The install generator writes through its own file actions rather than
+  `Rails.root`, so it respects `destination_root` — which is also what made the
+  generators testable.
+
+### Removed
+
+- The duplicate controllers under `lib/generators/.../templates`. They had to be
+  kept in sync with the engine's own copies by hand, and had already drifted.
+
+### Upgrading
+
+Delete the copied controllers from `app/javascript/controllers` and follow the
+README. Left in place they register the same identifiers a second time, and
+Stimulus keeps the last one without complaint.
+
+This is why it changed: a copy is frozen at the version that installed it.
+`bundle update` moved the Ruby and left the JavaScript alone, so 0.1.2's fix for
+empty tooltips on pie, donut and polar area charts reached nobody who did not
+also know to re-copy a file nothing told them about.
+
 ## [0.1.2]
 
 ### Fixed
@@ -67,7 +123,8 @@ 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.1.2...HEAD
+[Unreleased]: https://github.com/getrailsui/railsui_charts/compare/v0.2.0...HEAD
+[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
 [0.1.0]: https://github.com/getrailsui/railsui_charts/releases/tag/v0.1.0

data/README.md

@@ -35,28 +35,63 @@ Add to your Gemfile:
 gem "railsui_charts"
 ```
 
-Then run:
+Then:
 
 ```bash
 bundle install
 rails g railsui_charts:install
 ```
 
-The generator adds the CSS import and copies the Stimulus controller. You still need ApexCharts in your JavaScript:
+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.
 
-**Build mode:**
+### Bundled apps (esbuild, bun, rollup, webpack)
 
 ```bash
-yarn add apexcharts
+yarn add @getrailsui/charts apexcharts
 ```
 
-**No-build (importmap):**
+```js
+// app/javascript/controllers/index.js
+import { registerRailsuiCharts } from "@getrailsui/charts"
+
+registerRailsuiCharts(application)
+```
+
+### Importmap
+
+Nothing to add for the controllers — the engine pins them. ApexCharts is a peer
+dependency, so pin that:
 
 ```ruby
 # config/importmap.rb
 pin "apexcharts", to: "https://esm.sh/apexcharts@3.45.2"
 ```
 
+```js
+// app/javascript/controllers/index.js
+import { registerRailsuiCharts } from "@getrailsui/charts"
+
+registerRailsuiCharts(application)
+```
+
+### Upgrading from 0.1.x
+
+0.1.x copied the controllers into `app/javascript/controllers`. Those copies are
+frozen at whatever version installed them — `bundle update` moved the Ruby and
+left them alone, which is the reason this changed. Delete them and follow one of
+the paths above:
+
+```bash
+rm app/javascript/controllers/railsui_chart_controller.js \
+   app/javascript/controllers/railsui_chart_filters_controller.js \
+   app/javascript/controllers/railsui_metric_dialog_controller.js
+```
+
+Leaving them in place registers the same identifiers twice. Stimulus keeps the
+last registration and says nothing about it, so the symptom is a chart behaving
+like an older version of itself.
+
 ## Usage
 
 All charts use the same `railsui_chart` helper. Change the `type:` to switch chart kinds.
@@ -475,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.
 
@@ -515,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

@@ -0,0 +1,486 @@
+// app/javascript/controllers/railsui_chart_controller.js
+import { Controller } from "@hotwired/stimulus";
+import ApexCharts from "apexcharts";
+var railsui_chart_controller_default = class extends Controller {
+  static values = { options: Object };
+  connect() {
+    this.bindThemeListeners();
+    this.refresh = this.refresh.bind(this);
+    this.element.addEventListener("railsui-chart:refresh", this.refresh);
+    this.watchViewport();
+  }
+  disconnect() {
+    this.unwatchViewport();
+    this.element.removeEventListener("railsui-chart:refresh", this.refresh);
+    this.destroy();
+    this.unbindThemeListeners();
+  }
+  // Building every chart at once is work the reader has not asked for, and a
+  // page carrying a dozen of them spends the first seconds laying out charts
+  // nobody is looking at. Each one waits until it is nearly on screen; the
+  // server reserves its height so nothing shifts when it arrives.
+  watchViewport() {
+    if (!("IntersectionObserver" in window)) {
+      if (this.measurable) this.render();
+      return;
+    }
+    this.viewportObserver = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((entry) => entry.isIntersecting)) return;
+        this.unwatchViewport();
+        if (this.measurable) this.render();
+      },
+      // Start early enough that it is drawn by the time it is scrolled to.
+      { rootMargin: "300px 0px" }
+    );
+    this.viewportObserver.observe(this.element);
+  }
+  unwatchViewport() {
+    this.viewportObserver?.disconnect();
+    this.viewportObserver = null;
+  }
+  // An explicit reveal outranks the viewport check — a dialog opening means
+  // draw it now.
+  refresh() {
+    this.unwatchViewport();
+    if (this.measurable) this.render();
+  }
+  rerender() {
+    if (this.chart) this.render();
+  }
+  // Anything inside a `display: none` subtree — a closed <dialog>, a hidden
+  // tab panel — reports no client rects.
+  get measurable() {
+    return this.element.getClientRects().length > 0;
+  }
+  render() {
+    this.destroy();
+    this.chart = new ApexCharts(this.element, this.resolvedOptions());
+    this.chart.render();
+  }
+  destroy() {
+    if (this.chart) {
+      this.chart.destroy();
+      this.chart = null;
+    }
+  }
+  resolvedOptions() {
+    const options = this.resolveCssVariables({
+      ...this.optionsValue,
+      chart: {
+        ...this.optionsValue.chart || {},
+        animations: {
+          ...this.optionsValue.chart?.animations || {},
+          enabled: this.animationsEnabled
+        }
+      },
+      theme: {
+        ...this.optionsValue.theme,
+        // Last word: the server ships a static `light` default it cannot know
+        // better than, so spreading it after would pin every chart to light.
+        mode: this.darkMode ? "dark" : "light"
+      }
+    });
+    return this.applyTooltip(this.applyEdgeLabels(this.applyFormatters(options)));
+  }
+  // Apex's stock tooltip is a dark slab whatever the page is doing. This one is
+  // built from the same CSS variables as everything else, so it follows the
+  // 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) 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 || [];
+    const upIsGood = options.trend_up_is_good !== false;
+    const showDelta = options.tooltip_delta !== false;
+    const headingMode = options.tooltip_heading;
+    return {
+      ...options,
+      tooltip: {
+        ...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 };
+            return this.tooltipMarkup(labels?.[slice], [row], null, format);
+          }
+          const point = (index) => series[index]?.[dataPointIndex];
+          const comparing = series.length === 2 && comparedDates.length > 0;
+          const rows = series.map((_, index) => ({
+            // In a comparison the two rows are the same metric at different
+            // dates, so the date identifies them. Otherwise the name does.
+            label: comparing ? index === 0 ? labels?.[dataPointIndex] : comparedDates[dataPointIndex] : w.globals.seriesNames[index],
+            value: point(index),
+            color: w.globals.colors[index],
+            format: rowFormats[index] || null
+          }));
+          const leadsWithSeries = headingMode ? headingMode === "series" : comparing;
+          const heading = leadsWithSeries ? w.globals.seriesNames[0] : labels?.[dataPointIndex];
+          const delta = showDelta && comparing ? this.tooltipDelta(point(0), point(1), upIsGood) : null;
+          return this.tooltipMarkup(heading, rows, delta, format);
+        }
+      }
+    };
+  }
+  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;
+    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);
+  }
+  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;
+    if (!isFinite(change)) return null;
+    const rounded = Math.round(change * 100) / 100;
+    return {
+      text: `${rounded > 0 ? "+" : ""}${rounded}%`,
+      tone: rounded === 0 ? "neutral" : rounded > 0 === upIsGood ? "positive" : "negative"
+    };
+  }
+  tooltipMarkup(heading, rows, delta, format) {
+    const cells = rows.filter((row) => row.value !== null && row.value !== void 0).map(
+      (row) => `
+          <tr>
+            <th scope="row">
+              <span class="railsui-chart-tooltip__key" style="background:${this.escape(row.color)}"></span>
+              ${this.escape(row.label)}
+            </th>
+            <td>${this.escape(this.formatRow(row, format))}</td>
+          </tr>`
+    ).join("");
+    const badge = delta ? `<span class="railsui-chart-tooltip__delta railsui-chart-tooltip__delta--${delta.tone}">${this.escape(delta.text)}</span>` : "";
+    return `
+      <div class="railsui-chart-tooltip">
+        <div class="railsui-chart-tooltip__head">
+          <span class="railsui-chart-tooltip__title">${this.escape(heading)}</span>${badge}
+        </div>
+        <table class="railsui-chart-tooltip__rows">${cells}</table>
+      </div>`;
+  }
+  // A row's own formatter when it has one, the chart's otherwise.
+  formatRow(row, fallback) {
+    const format = row.format || fallback;
+    return format ? format(row.value) : row.value;
+  }
+  // Series names and category labels come from application data.
+  escape(value) {
+    return String(value ?? "").replace(/[&<>"']/g, (char) => {
+      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[char];
+    });
+  }
+  // Stripe-style cards label only the first and last tick, so the axis reads as
+  // a range rather than a row of collided, rotated dates.
+  applyEdgeLabels(options) {
+    if (!options.edge_labels) return options;
+    const categories = options.xaxis?.categories || [];
+    const last = categories.length - 1;
+    return {
+      ...options,
+      xaxis: {
+        ...options.xaxis || {},
+        labels: {
+          ...options.xaxis?.labels || {},
+          formatter: (value, _timestamp, opts) => {
+            const index = typeof opts?.i === "number" ? opts.i : categories.indexOf(value);
+            return index === 0 || index === last ? value : "";
+          }
+        }
+      },
+      // Apex reuses the axis formatter for the tooltip title, which would blank
+      // out every point between the two edges.
+      tooltip: {
+        ...options.tooltip || {},
+        x: {
+          ...options.tooltip?.x || {},
+          formatter: (value, opts) => categories[opts?.dataPointIndex] ?? value
+        }
+      }
+    };
+  }
+  applyFormatters(options) {
+    const formatter = this.formatterFor(options.format || "number", options.currency);
+    if (!formatter) return options;
+    const withFormatter = (axis) => {
+      if (Array.isArray(axis)) return axis.map(withFormatter);
+      const own = axis?.format ? this.formatterFor(axis.format, options.currency) : null;
+      return { ...axis || {}, labels: { ...axis?.labels || {}, formatter: own || formatter } };
+    };
+    if (options.plotOptions?.bar?.horizontal) {
+      const timeAxis = options.xaxis?.type === "datetime";
+      return {
+        ...options,
+        ...timeAxis ? {} : { xaxis: withFormatter(options.xaxis) },
+        tooltip: { ...options.tooltip || {}, y: { ...options.tooltip?.y || {}, formatter } }
+      };
+    }
+    const formatted = {
+      ...options,
+      yaxis: withFormatter(options.yaxis),
+      tooltip: {
+        ...options.tooltip || {},
+        y: {
+          ...options.tooltip?.y || {},
+          formatter
+        }
+      }
+    };
+    if (Array.isArray(options.responsive)) {
+      formatted.responsive = options.responsive.map((entry) => ({
+        ...entry,
+        options: {
+          ...entry.options || {},
+          ...entry.options?.yaxis ? { yaxis: withFormatter(entry.options.yaxis) } : {}
+        }
+      }));
+    }
+    return formatted;
+  }
+  formatterFor(format, currency = "$") {
+    switch (format) {
+      case "currency":
+        return (value) => {
+          if (value === null || value === void 0 || isNaN(value)) return value;
+          return `${currency}${Number(value).toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 2 })}`;
+        };
+      case "percentage":
+        return (value) => {
+          if (value === null || value === void 0 || isNaN(value)) return value;
+          return `${Number(value).toFixed(1)}%`;
+        };
+      case "human":
+        return (value) => {
+          if (value === null || value === void 0 || isNaN(value)) return value;
+          return this.humanFormat(Number(value));
+        };
+      case "short_currency":
+        return (value) => {
+          if (value === null || value === void 0 || isNaN(value)) return value;
+          return `${currency}${this.humanFormat(Number(value))}`;
+        };
+      case "number":
+        return (value) => {
+          if (value === null || value === void 0 || isNaN(value)) return value;
+          return Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 });
+        };
+      default:
+        return null;
+    }
+  }
+  humanFormat(value) {
+    if (value === 0) return "0";
+    const suffixes = ["", "K", "M", "B", "T"];
+    const tier = Math.log10(Math.abs(value)) / 3 | 0;
+    if (tier === 0) return `${Math.round(value * 100) / 100}`;
+    const scaled = value / Math.pow(10, tier * 3);
+    const rounded = Math.round(scaled * 10) / 10;
+    return `${Number.isInteger(rounded) ? rounded : rounded.toFixed(1)}${suffixes[tier]}`;
+  }
+  resolveCssVariables(value) {
+    if (typeof value === "string") {
+      return this.resolveCssVariable(value);
+    }
+    if (Array.isArray(value)) {
+      return value.map((item) => this.resolveCssVariables(item));
+    }
+    if (value !== null && typeof value === "object") {
+      return Object.entries(value).reduce((result, [key, val]) => {
+        result[key] = this.resolveCssVariables(val);
+        return result;
+      }, {});
+    }
+    return value;
+  }
+  resolveCssVariable(value) {
+    const match = value.match(/^var\((--[^,]+)(?:,\s*(.+))?\)$/);
+    if (!match) return value;
+    const variableName = match[1];
+    const fallback = match[2];
+    const computed = getComputedStyle(this.element).getPropertyValue(variableName).trim();
+    return computed || fallback || value;
+  }
+  bindThemeListeners() {
+    this.darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    this.motionMediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    this.themeHandler = () => this.rerender();
+    this.darkModeMediaQuery.addEventListener("change", this.themeHandler);
+    this.motionMediaQuery.addEventListener("change", this.themeHandler);
+    this.renderedDarkMode = this.darkMode;
+    this.themeObserver = new MutationObserver(() => {
+      const dark = this.darkMode;
+      if (dark === this.renderedDarkMode) return;
+      this.renderedDarkMode = dark;
+      this.rerender();
+    });
+    this.themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+  }
+  unbindThemeListeners() {
+    if (this.themeHandler) {
+      this.darkModeMediaQuery?.removeEventListener("change", this.themeHandler);
+      this.motionMediaQuery?.removeEventListener("change", this.themeHandler);
+    }
+    this.themeObserver?.disconnect();
+  }
+  get animationsEnabled() {
+    return !(this.motionMediaQuery && this.motionMediaQuery.matches);
+  }
+  get darkMode() {
+    const root = document.documentElement;
+    const explicit = root.getAttribute("data-theme");
+    if (explicit === "dark") return true;
+    if (explicit === "light") return false;
+    if (root.classList.contains("dark")) return true;
+    return this.darkModeMediaQuery ? this.darkModeMediaQuery.matches : false;
+  }
+};
+
+// app/javascript/controllers/railsui_chart_filters_controller.js
+import { Controller as Controller2 } from "@hotwired/stimulus";
+var railsui_chart_filters_controller_default = class extends Controller2 {
+  submit() {
+    if (this.element.requestSubmit) {
+      this.element.requestSubmit();
+    } else {
+      this.element.submit();
+    }
+  }
+};
+
+// app/javascript/controllers/railsui_metric_dialog_controller.js
+import { Controller as Controller3 } from "@hotwired/stimulus";
+var railsui_metric_dialog_controller_default = class extends Controller3 {
+  static targets = ["dialog"];
+  open() {
+    this.dialogTarget.showModal();
+    this.dialogTarget.querySelectorAll(".railsui-chart").forEach((chart) => {
+      chart.dispatchEvent(new CustomEvent("railsui-chart:refresh"));
+    });
+  }
+  close() {
+    this.dialogTarget.close();
+  }
+  // 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();
+  }
+};
+
+// app/javascript/railsui_charts/index.js
+var RAILSUI_CHART_CONTROLLERS = {
+  "railsui-chart": railsui_chart_controller_default,
+  "railsui-chart-filters": railsui_chart_filters_controller_default,
+  "railsui-metric-dialog": railsui_metric_dialog_controller_default
+};
+function registerRailsuiCharts(application) {
+  Object.entries(RAILSUI_CHART_CONTROLLERS).forEach(([identifier, controller]) => {
+    application.register(identifier, controller);
+  });
+  return application;
+}
+var index_default = registerRailsuiCharts;
+export {
+  RAILSUI_CHART_CONTROLLERS,
+  railsui_chart_controller_default as RailsuiChartController,
+  railsui_chart_filters_controller_default as RailsuiChartFiltersController,
+  railsui_metric_dialog_controller_default as RailsuiMetricDialogController,
+  index_default as default,
+  registerRailsuiCharts
+};