railsui_charts 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7c8dc823b54699d34aa3086a00c101d2af00be11f62c1934ce61cb2d47fca6be
-  data.tar.gz: 1b3e956f025a5121406c9a11d66d17b43208e43fde6afd445a965bc2ffccb612
+  metadata.gz: 90aab15c8c1ef133527f757c7e24344da84a62a190825a13decee8979cf79892
+  data.tar.gz: db6626712782f3a93d92ea8c149d9fbe27cece328b1cfca4b611269dd06a8c0b
 SHA512:
-  metadata.gz: 7834d2e0790b218314615c6948fa6e59c0280a3f806d528fc931edc721383bc31ff24cb4344f3716fc269b7f8c697fdace6044d9ef3ecfcbe9461e303b371a77
-  data.tar.gz: 2425d97d2acd25b4147d37b31319cc83842f1db83d46d3d15582bed61dc212aef0c1dce0c5a46425a9b0e14874a6541c93fe7d1fb31440aaf53dc137de9e82cb
+  metadata.gz: 94345b1a73e7cdd1e2760ee58462f6af60396019295cb0a05a5f300120c2d5ed192d64770cb38254abfa959e94ca5ab51ed9353107163e5f2eb75a22e42611a9
+  data.tar.gz: e89fad7105008595f9de2070044287e1c193a09ab83dd327492a794106259d24783fc30ed580e19c07a40c8a7ea06ed2fbb7ac5780d620af0eafe7ce643da9d8

data/CHANGELOG.md

@@ -6,6 +6,27 @@ public API may change between minor versions.
 
 ## [Unreleased]
 
+## [0.1.2]
+
+### Fixed
+
+- Tooltips on pie, donut and polar area charts rendered as an empty box. A
+  circular chart hands the tooltip a flat array of numbers and names the
+  hovered slice with `seriesIndex`; reading it as one array per series gave
+  every value `undefined`, and rows without a value are dropped. The slice now
+  shows its name and its formatted value.
+
+## [0.1.1]
+
+### Fixed
+
+- Legend markers now start where the rest of the card does. A left-aligned
+  legend is inset by ApexCharts' own chrome and padding before the first item's
+  margin applies, so the markers sat 28px right of the axis labels and the
+  heading above them. The correction is measured against a rendered chart
+  rather than derived, and the mobile breakpoint — which uses a tighter gap
+  between items — is corrected to match.
+
 ## [0.1.0]
 
 First release.
@@ -46,5 +67,7 @@ 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.0...HEAD
+[Unreleased]: https://github.com/getrailsui/railsui_charts/compare/v0.1.2...HEAD
+[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

@@ -1,5 +1,6 @@
 # Rails UI Charts
 
+[![Gem Version](https://img.shields.io/gem/v/railsui_charts.svg)](https://rubygems.org/gems/railsui_charts)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 Production-ready chart components for Rails. Built on [ApexCharts](https://apexcharts.com), wrapped in Rails-native helpers, and designed for Tailwind CSS.
@@ -14,8 +15,6 @@ Production-ready chart components for Rails. Built on [ApexCharts](https://apexc
 <%= railsui_chart [{ x: "A", y: 30 }, { x: "B", y: 50 }], type: :pie %>
 ```
 
-Or clone the [railsui.com site](https://github.com/justalever/railsui_app) and visit `/charts` for the full showcase.
-
 ## Why Rails UI Charts?
 
 AI can generate a first-draft chart in seconds. The hard part is the last 20%: accessibility, responsive behavior, dark mode, Turbo lifecycle support, loading and empty states, and a stable API that does not break when you upgrade.

data/app/javascript/controllers/railsui_chart_controller.js

@@ -128,8 +128,23 @@ export default class extends Controller {
       ...options,
       tooltip: {
         ...(options.tooltip || {}),
-        custom: ({ series, dataPointIndex, w }) => {
+        custom: ({ series, seriesIndex, dataPointIndex, w }) => {
           const labels = w.globals.categoryLabels?.length ? w.globals.categoryLabels : w.globals.labels
+
+          // 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
+          // cartesian series, every value came out undefined, and since rows
+          // without a value are dropped the tooltip rendered as an empty box.
+          if (!Array.isArray(series[0])) {
+            const slice = seriesIndex ?? dataPointIndex
+            // No row label: the slice's name is already the heading, and
+            // printing it twice in a two-line tooltip reads as a mistake.
+            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
 

data/lib/generators/railsui_charts/install/templates/railsui_chart_controller.js

@@ -128,8 +128,23 @@ export default class extends Controller {
       ...options,
       tooltip: {
         ...(options.tooltip || {}),
-        custom: ({ series, dataPointIndex, w }) => {
+        custom: ({ series, seriesIndex, dataPointIndex, w }) => {
           const labels = w.globals.categoryLabels?.length ? w.globals.categoryLabels : w.globals.labels
+
+          // 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
+          // cartesian series, every value came out undefined, and since rows
+          // without a value are dropped the tooltip rendered as an empty box.
+          if (!Array.isArray(series[0])) {
+            const slice = seriesIndex ?? dataPointIndex
+            // No row label: the slice's name is already the heading, and
+            // printing it twice in a two-line tooltip reads as a mistake.
+            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
 

data/lib/railsui_charts/apex_options_builder.rb

@@ -14,6 +14,9 @@ module RailsuiCharts
 
     # Both sides of a dual axis are cut into this many intervals, so one grid
     # serves both scales.
+    LEGEND_INSET = 28
+    LEGEND_ITEM_GAP = 8
+    LEGEND_MOBILE_ITEM_GAP = 6
     AXIS_INTERVALS = 4
 
     # Apex reserves a gutter between the axis labels and the edge of its canvas.
@@ -247,7 +250,13 @@ module RailsuiCharts
           breakpoint: 640,
           options: {
             chart: { height: mobile_height },
-            legend: { fontSize: font_size_sm, itemMargin: { horizontal: 6, vertical: 2 } },
+            # A tighter item gap needs a matching correction, or the mobile
+            # legend lands two pixels left of where the desktop one does.
+            legend: {
+              fontSize: font_size_sm,
+              itemMargin: { horizontal: LEGEND_MOBILE_ITEM_GAP, vertical: 2 },
+              offsetX: legend_offset(LEGEND_MOBILE_ITEM_GAP)
+            },
             xaxis: carry_over(config[:xaxis], { labels: { style: { fontSize: font_size_sm } } }),
             yaxis: mobile_yaxis(config[:yaxis]),
             grid: carry_over(config[:grid], { padding: { left: 0, right: 0 } }),
@@ -415,15 +424,28 @@ module RailsuiCharts
         show: true,
         position: "top",
         horizontalAlign: "left",
-        offsetX: -8,
+        offsetX: legend_offset(LEGEND_ITEM_GAP),
         fontFamily: font_family,
         fontSize: font_size,
         labels: { colors: config_color(:text) },
         markers: { width: 8, height: 8, radius: 8, offsetX: -2 },
-        itemMargin: { horizontal: 8, vertical: 0 }
+        itemMargin: { horizontal: LEGEND_ITEM_GAP, vertical: 0 }
       }
     end
 
+    # Left-aligning the legend does not put it where the eye expects. Apex
+    # insets it by its own chrome and padding before the first item's margin is
+    # even applied, so the markers sit indented from the axis labels and the
+    # heading above them — every other line in the card starts at one edge and
+    # the legend starts somewhere else.
+    #
+    # Measured against a rendered chart rather than derived: at offsetX 0 the
+    # marker lands LEGEND_INSET + the item gap to the right of the card edge,
+    # and the correction is linear in offsetX.
+    def legend_offset(item_gap)
+      -(LEGEND_INSET + item_gap)
+    end
+
     def comparison_fill
       # The comparison series gets a flat gradient rather than `opacity: 0`,
       # which would take its stroke down with it.

data/lib/railsui_charts/version.rb

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

metadata

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