railsui_charts 0.2.2 → 0.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5be8bf55b84a7b5a3c7294a1b3958d5042e793efec37266956e2767a74cf1df0
-  data.tar.gz: 891215bb98875af325556b150d2c6e37db60cff1d71f68e62e174efeb4c51ac7
+  metadata.gz: edb2d338949929fa733699ed8c06cc91edd16c4e5bf9621db0e1db0fa019b245
+  data.tar.gz: dfb7e2e6dabeb591d544fdcf68070ea997451bd7f1fb19bb36a5f793a9160bbd
 SHA512:
-  metadata.gz: 1c422dda350f4a4b6ca52119fff256715589fda00df0421560b1d6e33b6b4c17162b26ec52f9e82502de5e05e8c33a6f503d5f427af0766b098c2b04b1d0e2ae
-  data.tar.gz: e48dee54260ae743336a05c646a8061f090e7c0ccba4fb5c8d82ab497440afacb8fe5772b67afc00aad62dc4cfdc1031fa6d7beda944bb6b959607f13a763d27
+  metadata.gz: 40dc738c972145c4b092a9802f77ea3a406b97305cf2c9355f209ac3bdd97612982fc6fea6c62b83e6ba20686fc67313b04bb1a18152685a68f11724df2bbe40
+  data.tar.gz: 04a089986c882997b1b297ed048495facf4a6da6761b9bafdfc4c5fb80a1d094cffe544fd30670469736d46c3ca497f9ffd6b3345a65663ff72e57e84a5a7bcb

data/CHANGELOG.md

@@ -6,6 +6,41 @@ 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
@@ -19,6 +54,23 @@ public API may change between minor versions.
 
 ### 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
   their label and formatted value instead of an empty tooltip.
 - Range-bar and labelled-point tooltips now read the hovered point from the
@@ -134,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/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 {

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/chart_helper.rb

@@ -163,7 +163,11 @@ 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
@@ -176,7 +180,7 @@ module RailsuiCharts
       rows = Array(table[:rows] || table["rows"])
       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
@@ -220,7 +224,7 @@ module RailsuiCharts
       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

data/lib/railsui_charts/version.rb

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

data/package.json

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