railsui_charts 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +13 -1
- data/README.md +1 -2
- data/lib/railsui_charts/apex_options_builder.rb +25 -3
- data/lib/railsui_charts/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 530d46e697812d44107d9907f5e44a749e5b2b1e1c0abe1c0dc36d52097e0fb4
|
|
4
|
+
data.tar.gz: 99045f42e3510a662269338984a67c7411d10a86f662ae5d970b4f2f870a26d1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: '018f092a8cb0907c8166718c6eeb0983dbac13560d261fc8a33dfc5b4a4c29d90e270685cb0a4608870a1832728313c2b2d51defaec64f3add3ddbea237a2cc5'
|
|
7
|
+
data.tar.gz: bd5f67ec5021ad718cbadbb8afacad0a0792ba479f0c1d33137d78bdc7d686133448f7c8741b6cbd55b64243926080921df2a66fccd740854fd8af1d3f4a2e95
|
data/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,17 @@ public API may change between minor versions.
|
|
|
6
6
|
|
|
7
7
|
## [Unreleased]
|
|
8
8
|
|
|
9
|
+
## [0.1.1]
|
|
10
|
+
|
|
11
|
+
### Fixed
|
|
12
|
+
|
|
13
|
+
- Legend markers now start where the rest of the card does. A left-aligned
|
|
14
|
+
legend is inset by ApexCharts' own chrome and padding before the first item's
|
|
15
|
+
margin applies, so the markers sat 28px right of the axis labels and the
|
|
16
|
+
heading above them. The correction is measured against a rendered chart
|
|
17
|
+
rather than derived, and the mobile breakpoint — which uses a tighter gap
|
|
18
|
+
between items — is corrected to match.
|
|
19
|
+
|
|
9
20
|
## [0.1.0]
|
|
10
21
|
|
|
11
22
|
First release.
|
|
@@ -46,5 +57,6 @@ First release.
|
|
|
46
57
|
reachable only by hovering a mark
|
|
47
58
|
- Animation stops when the reader has asked for reduced motion
|
|
48
59
|
|
|
49
|
-
[Unreleased]: https://github.com/getrailsui/railsui_charts/compare/v0.1.
|
|
60
|
+
[Unreleased]: https://github.com/getrailsui/railsui_charts/compare/v0.1.1...HEAD
|
|
61
|
+
[0.1.1]: https://github.com/getrailsui/railsui_charts/compare/v0.1.0...v0.1.1
|
|
50
62
|
[0.1.0]: https://github.com/getrailsui/railsui_charts/releases/tag/v0.1.0
|
data/README.md
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
# Rails UI Charts
|
|
2
2
|
|
|
3
|
+
[](https://rubygems.org/gems/railsui_charts)
|
|
3
4
|
[](https://opensource.org/licenses/MIT)
|
|
4
5
|
|
|
5
6
|
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
|
|
|
14
15
|
<%= railsui_chart [{ x: "A", y: 30 }, { x: "B", y: 50 }], type: :pie %>
|
|
15
16
|
```
|
|
16
17
|
|
|
17
|
-
Or clone the [railsui.com site](https://github.com/justalever/railsui_app) and visit `/charts` for the full showcase.
|
|
18
|
-
|
|
19
18
|
## Why Rails UI Charts?
|
|
20
19
|
|
|
21
20
|
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.
|
|
@@ -14,6 +14,9 @@ module RailsuiCharts
|
|
|
14
14
|
|
|
15
15
|
# Both sides of a dual axis are cut into this many intervals, so one grid
|
|
16
16
|
# serves both scales.
|
|
17
|
+
LEGEND_INSET = 28
|
|
18
|
+
LEGEND_ITEM_GAP = 8
|
|
19
|
+
LEGEND_MOBILE_ITEM_GAP = 6
|
|
17
20
|
AXIS_INTERVALS = 4
|
|
18
21
|
|
|
19
22
|
# Apex reserves a gutter between the axis labels and the edge of its canvas.
|
|
@@ -247,7 +250,13 @@ module RailsuiCharts
|
|
|
247
250
|
breakpoint: 640,
|
|
248
251
|
options: {
|
|
249
252
|
chart: { height: mobile_height },
|
|
250
|
-
|
|
253
|
+
# A tighter item gap needs a matching correction, or the mobile
|
|
254
|
+
# legend lands two pixels left of where the desktop one does.
|
|
255
|
+
legend: {
|
|
256
|
+
fontSize: font_size_sm,
|
|
257
|
+
itemMargin: { horizontal: LEGEND_MOBILE_ITEM_GAP, vertical: 2 },
|
|
258
|
+
offsetX: legend_offset(LEGEND_MOBILE_ITEM_GAP)
|
|
259
|
+
},
|
|
251
260
|
xaxis: carry_over(config[:xaxis], { labels: { style: { fontSize: font_size_sm } } }),
|
|
252
261
|
yaxis: mobile_yaxis(config[:yaxis]),
|
|
253
262
|
grid: carry_over(config[:grid], { padding: { left: 0, right: 0 } }),
|
|
@@ -415,15 +424,28 @@ module RailsuiCharts
|
|
|
415
424
|
show: true,
|
|
416
425
|
position: "top",
|
|
417
426
|
horizontalAlign: "left",
|
|
418
|
-
offsetX:
|
|
427
|
+
offsetX: legend_offset(LEGEND_ITEM_GAP),
|
|
419
428
|
fontFamily: font_family,
|
|
420
429
|
fontSize: font_size,
|
|
421
430
|
labels: { colors: config_color(:text) },
|
|
422
431
|
markers: { width: 8, height: 8, radius: 8, offsetX: -2 },
|
|
423
|
-
itemMargin: { horizontal:
|
|
432
|
+
itemMargin: { horizontal: LEGEND_ITEM_GAP, vertical: 0 }
|
|
424
433
|
}
|
|
425
434
|
end
|
|
426
435
|
|
|
436
|
+
# Left-aligning the legend does not put it where the eye expects. Apex
|
|
437
|
+
# insets it by its own chrome and padding before the first item's margin is
|
|
438
|
+
# even applied, so the markers sit indented from the axis labels and the
|
|
439
|
+
# heading above them — every other line in the card starts at one edge and
|
|
440
|
+
# the legend starts somewhere else.
|
|
441
|
+
#
|
|
442
|
+
# Measured against a rendered chart rather than derived: at offsetX 0 the
|
|
443
|
+
# marker lands LEGEND_INSET + the item gap to the right of the card edge,
|
|
444
|
+
# and the correction is linear in offsetX.
|
|
445
|
+
def legend_offset(item_gap)
|
|
446
|
+
-(LEGEND_INSET + item_gap)
|
|
447
|
+
end
|
|
448
|
+
|
|
427
449
|
def comparison_fill
|
|
428
450
|
# The comparison series gets a flat gradient rather than `opacity: 0`,
|
|
429
451
|
# which would take its stroke down with it.
|