Class: Shadcn::Chart::Cartesian::Component

Inherits:
ApplicationViewComponent show all
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

Bar::Component, Line::Component

Constant Summary

Constants inherited from ApplicationViewComponent

ApplicationViewComponent::CONTENTS_STYLE, ApplicationViewComponent::VOID_TAGS

Instance Attribute Summary collapse

Attributes inherited from ApplicationViewComponent

#attributes

Instance Method Summary collapse

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

#configObject (readonly)

Returns the value of attribute config.



33
34
35
# File 'app/components/shadcn/chart/cartesian/component.rb', line 33

def config
  @config
end

#labelObject (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

#callObject

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