Class: Shadcn::Chart::Cartesian::Component
- Inherits:
-
ApplicationViewComponent
- Object
- ViewComponent::Base
- ApplicationViewComponent
- Shadcn::Chart::Cartesian::Component
- Includes:
- Focusable
- Defined in:
- app/components/shadcn/chart/cartesian/component.rb
Overview
What a bar, a line and an area all need and the pie did not: a grid, an
axis down the left, category labels along the bottom, and one accessible
name carrying every number. Abstract — shapes is the subclass's half.
Ours, like the pie: chart.tsx draws nothing, so there is no
upstream markup for this to be 1:1 with. What is reproduced is the
contract around it — every mark is filled from --color-<key>, which
the container publishes from config, so a host restyles this chart
from the same stylesheet that restyles upstream's.
The axis is drawn in SVG attributes and CSS custom properties rather
than Tailwind classes. stroke="var(--border)" is a token shadcn.css
already defines, and it keeps the grid out of reverse_parity_spec's
way: a class here would be one no vendored source contains, and every
such class has to be listed with its reason.
Direct Known Subclasses
Constant Summary
Constants inherited from ApplicationViewComponent
ApplicationViewComponent::CONTENTS_STYLE, ApplicationViewComponent::VOID_TAGS
Instance Attribute Summary collapse
-
#config ⇒ Object
readonly
Returns the value of attribute config.
-
#label ⇒ Object
readonly
Returns the value of attribute label.
Attributes inherited from ApplicationViewComponent
Instance Method Summary collapse
-
#call ⇒ Object
The grid goes down first so the shapes are drawn over it, which is the one thing SVG's painter order decides for us.
- #element_attributes(**defaults) ⇒ Object
-
#initialize(data: {}, config: {}, series: nil, label: nil, **attributes) ⇒ Component
constructor
A new instance of Component.
Methods inherited from ApplicationViewComponent
#css_classes, default_tag, #merged_style, #render_element, #shadcn_t, slot_name, #style_variants, #tag_name
Constructor Details
#initialize(data: {}, config: {}, series: nil, label: nil, **attributes) ⇒ Component
Returns a new instance of Component.
35 36 37 38 39 40 41 |
# File 'app/components/shadcn/chart/cartesian/component.rb', line 35 def initialize(data: {}, config: {}, series: nil, label: nil, **attributes) @data = data @series = series @config = config @label = label super(**attributes) end |
Instance Attribute Details
#config ⇒ Object (readonly)
Returns the value of attribute config.
33 34 35 |
# File 'app/components/shadcn/chart/cartesian/component.rb', line 33 def config @config end |
#label ⇒ Object (readonly)
Returns the value of attribute label.
33 34 35 |
# File 'app/components/shadcn/chart/cartesian/component.rb', line 33 def label @label end |
Instance Method Details
#call ⇒ Object
The grid goes down first so the shapes are drawn over it, which is the one thing SVG's painter order decides for us. The table follows the graphic it describes, which is the order a reader meets them in.
50 51 52 53 54 |
# File 'app/components/shadcn/chart/cartesian/component.rb', line 50 def call drawing = tag.g(safe_join([ grid, tick_labels, category_labels, *shapes ]), "aria-hidden": "true") safe_join([ render_element(body: drawing), table ]) end |
#element_attributes(**defaults) ⇒ Object
43 44 45 |
# File 'app/components/shadcn/chart/cartesian/component.rb', line 43 def element_attributes(**defaults) super(**{ viewBox: "0 0 #{plot.width} #{plot.height}" }.merge(keyboard).merge(defaults)) end |