Class: Shadcn::Chart::Pie::Component

Inherits:
ApplicationViewComponent show all
Includes:
Focusable
Defined in:
app/components/shadcn/chart/pie/component.rb

Overview

A pie, drawn on the server.

Ours. chart.tsx has no markup for a shape — the caller writes <PieChart><Pie …/></PieChart> and recharts renders it. What is reproduced instead is the contract around it: each slice is filled from --color-<key>, which the container publishes from config, so the same stylesheet that themes upstream's chart themes this one.

An arc is trigonometry and an SVG path, which is why the pie is the shape to draw first: no scales, no ticks, no axis labels to collide.

render(Shadcn::Chart::Component.new(config:)) do |chart|
chart.with_pie(data: { chrome: 275, safari: 200, firefox: 187 })
end

data: is a Hash of key to number, which is what group(:x).sum(:y) already hands back.

Constant Summary collapse

SIZE = 
250
PADDING = 
4
START =

Twelve o'clock, where a reader starts. SVG angles start at three.

-90

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: {}, inner_radius: 0, percentage: false, label: nil, **attributes) ⇒ Component

inner_radius: is a fraction of the radius, as upstream's own examples pass one — 0 is a pie and 0.6 is the donut the docs show.



42
43
44
45
46
47
48
49
 
# File 'app/components/shadcn/chart/pie/component.rb', line 42

def initialize(data: {}, config: {}, inner_radius: 0, percentage: false, label: nil, **attributes)
  @data = data.to_h.transform_keys(&:to_s).select { |_, value| value.to_f.positive? }
  @config = config
  @inner_radius = inner_radius.to_f.clamp(0, 0.95)
  @percentage = percentage
  @label = label
  super(**attributes)
end

Instance Attribute Details

#config ⇒ Object (readonly)

Returns the value of attribute config.



38
39
40
 
# File 'app/components/shadcn/chart/pie/component.rb', line 38

def config
  @config
end

#data ⇒ Object (readonly)

Returns the value of attribute data.



38
39
40
 
# File 'app/components/shadcn/chart/pie/component.rb', line 38

def data
  @data
end

#inner_radius ⇒ Object (readonly)

Returns the value of attribute inner_radius.



38
39
40
 
# File 'app/components/shadcn/chart/pie/component.rb', line 38

def inner_radius
  @inner_radius
end

#label ⇒ Object (readonly)

Returns the value of attribute label.



38
39
40
 
# File 'app/components/shadcn/chart/pie/component.rb', line 38

def label
  @label
end

#percentage ⇒ Object (readonly)

Returns the value of attribute percentage.



38
39
40
 
# File 'app/components/shadcn/chart/pie/component.rb', line 38

def percentage
  @percentage
end

Instance Method Details

#call ⇒ Object

The table follows the graphic it describes, which is the order a reader meets them in.



61
62
63
 
# File 'app/components/shadcn/chart/pie/component.rb', line 61

def call
  safe_join([ render_element(body: tag.g(safe_join(slices), "aria-hidden": "true")), table ])
end

#element_attributes(**defaults) ⇒ Object

No SVG <title>: it would say what the table says and then be drawn by the browser as a native tooltip on every hover, over this component's own. Reported from a screenshot — the grey box covering the panel was Chrome's, not ours.



55
56
57
 
# File 'app/components/shadcn/chart/pie/component.rb', line 55

def element_attributes(**defaults)
  super(**{ viewBox: "0 0 #{SIZE} #{SIZE}" }.merge(keyboard).merge(defaults))
end