railsui_charts 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f3fa00b0555667e87a913c0341ac9efcff529d54d4eb3b7e6a70fbe12167d1a1
-  data.tar.gz: 47b6cc37a82c21c1ccbc1213a8876fa37fa8a2573ef6663629d4e1d09d4cb7fc
+  metadata.gz: '049e45e39a745fa833e9ba7835a09ecf960cb837b5d86c07c48d311201cddd6e'
+  data.tar.gz: 5b649ab130a83f43fa87490699fc5514eb00ee9eb92d5bdf6d059e31ac61f73e
 SHA512:
-  metadata.gz: c5140c807d377faf06d02f1da3b1807d71bf023e3551ba74429ad5bc26aed89e8b19746570337b004080e881beced4cb76a7234c486bf1b28cd6b0810eed423c
-  data.tar.gz: a38ce24f9ba774e6532df52c87e8c71c6260c2103e679702ecb85e50f06d37b40aa09a7d4b3efd1a6cf74eeaa199b48f00708cc76d90b6eaf1fb2a61789904c0
+  metadata.gz: 9d86406916a9fc276372ae9f200f0a0b7fd4d27327caa0e56264d1e79f7eb315c1dde4293c2c275da3f63d02ba47df38524c8d7cb3119ce7204cb36cf5754580
+  data.tar.gz: 2aacd7f09219f90924d07f5412fc4a25e62fcf312bd4903817138fea5f326d0d1ba48ec3169c416ac5e94141d43dd801c47dde340acc2a7b432c1761abd0aee8

data/CHANGELOG.md

@@ -6,6 +6,19 @@ 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

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,97 @@ 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;
+    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;

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;
 }
 
-/* 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,
+.railsui-chart-skeleton .railsui-skeleton-bar--footer {
+  margin-top: 0.25rem;
+}
+
+/* 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;

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,127 @@ 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
+    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 !== 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/lib/railsui_charts/apex_options_builder.rb

@@ -152,7 +152,10 @@ 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
         when Array
           { x: point[0], y: point[1], z: point[2] }
         else
@@ -551,7 +554,12 @@ module RailsuiCharts
       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.

data/lib/railsui_charts/chart_helper.rb

@@ -80,23 +80,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}",
@@ -149,6 +164,7 @@ module RailsuiCharts
         columns = Array(series).map { |s| { name: s[:name] || "Value", data: s[:data] } }
         categories = config.dig(:xaxis, :categories) || []
       end
+      comparison_categories = config[:compare_categories] || []
 
       rows = columns.first&.dig(:data)
       return if rows.blank?
@@ -159,7 +175,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 +185,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 +196,18 @@ 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_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(", ")

data/lib/railsui_charts/version.rb

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

data/package.json

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