Class: Shadcn::Chart::Component

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

Overview

Port of registry/new-york-v4/ui/chart.tsx — the half of it that is markup.

chart.tsx draws nothing. It is a frame: a container that publishes one custom property per series, and the contents of a tooltip and a legend that recharts fills in. The chart itself — the SVG, the scales, the axes — is recharts, 29,091 lines of compiled ES6 over eleven packages, and the caller writes it in JSX.

So this family is the frame ported 1:1 and the drawing written here: a pie, and the three cartesian shapes — bar, line, area — over the grid and axes Chart::Plot computes. See features/chart.md.

config: is upstream's ChartConfig, key for key:

config: {
chrome: { label: "Chrome", color: "var(--chart-1)" },
safari: { label: "Safari", theme: { light: "…", dark: "…" } }
}

Every colour is published as --color-<key> on the container, which is what lets a slice say fill="var(--color-chrome)" and a host restyle the chart from its own stylesheet.

Constant Summary collapse

THEMES = 
{ light: "", dark: ".dark" }.freeze

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(config: {}, **attributes) ⇒ Component

Returns a new instance of Component.



57
58
59
60
 
# File 'app/components/shadcn/chart/component.rb', line 57

def initialize(config: {}, **attributes)
  @config = config.transform_keys(&:to_s)
  super(**attributes)
end

Instance Attribute Details

#config ⇒ Object (readonly)

Returns the value of attribute config.



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

def config
  @config
end

Instance Method Details

#call ⇒ Object

Slots rather than block content, and rendered in an order this decides: the tooltip has to come after the shape it floats over, and slot content is emitted before block content — the trap that has shipped twice here.



72
73
74
 
# File 'app/components/shadcn/chart/component.rb', line 72

def call
  render_element(body: safe_join([ colours, stack, chart_tooltip ].compact))
end

#element_attributes(**defaults) ⇒ Object 



62
63
64
65
66
67
 
# File 'app/components/shadcn/chart/component.rb', line 62

def element_attributes(**defaults)
  super(**{
    "data-chart" => chart_id,
    "data-controller" => "shadcn--chart"
  }.merge(defaults))
end