tooltip_html <- JS(
"function () {",
" const c = this.point.custom || {};",
" const end = c.end ? '–' + c.end : ' · end year pending';",
" const image = c.image ? '<img src=\"' + c.image + '\" alt=\"\" style=\"display:block;width:260px;height:146px;object-fit:cover;margin:-12px -14px 12px\">' : '';",
" return '<div style=\"padding:12px 14px;min-width:220px\">' +",
" image +",
" '<div style=\"font-size:16px;font-weight:600;color:#28120f\">' + this.point.name + '</div>' +",
" '<div style=\"margin:2px 0 10px;color:#8f1d23\">' + c.start + end + '</div>' +",
" '<div><b>Family</b> · ' + c.family + '</div>' +",
" '<div><b>Lineage</b> · ' + c.lineage + '</div>' +",
" '<div><b>Engine</b> · ' + (c.engine || 'pending') + ' · ' + (c.layout || 'pending') + '</div>' +",
" '<div><b>Previous</b> · ' + c.predecessor + '</div>' +",
" '<div><b>Relation</b> · ' + c.relationship.replaceAll('_', ' ') + '</div>' +",
" '</div>';",
"}"
)
highchart() |>
highcharter::hc_size(height = 900) |>
hc_add_dependency("modules/xrange.js") |>
hc_chart(
backgroundColor = "#f5f1e8",
zoomType = "x",
spacing = c(28, 24, 22, 12),
style = list(fontFamily = "IBM Plex Sans, sans-serif")
) |>
hc_title(
text = "Ferrari bloodlines",
align = "left",
style = list(color = "#28120f", fontSize = "28px", fontWeight = "300")
) |>
hc_subtitle(
text = "Production periods are bars. Unfinished research remains visible as points.",
align = "left",
style = list(color = "#765f56", fontSize = "14px")
) |>
hc_xAxis(
type = "datetime",
min = datetime_to_timestamp(as.Date("1947-01-01")),
gridLineWidth = 1,
gridLineColor = "#ded7ca",
lineColor = "#9b8e80",
tickColor = "#9b8e80"
) |>
hc_yAxis(
categories = family_levels,
title = list(text = ""),
gridLineColor = "#ded7ca",
labels = list(style = list(color = "#4a3731", fontSize = "12px"))
) |>
hc_plotOptions(
series = list(
states = list(
inactive = list(opacity = 1)
)
)
) |>
hc_add_series(
type = "xrange",
name = "Known production period",
data = period_points,
borderColor = "#f5f1e8",
borderWidth = 1.2,
borderRadius = 1,
pointWidth = 10,
states = list(
hover = list(
brightness = 0.08,
borderColor = "#ffffff",
borderWidth = 2
)
)
) |>
hc_add_series(
type = "scatter",
name = "End year pending",
data = date_points,
color = "#c41230",
marker = list(
radius = 4,
symbol = "circle",
lineWidth = 1.5,
lineColor = "#c41230",
fillColor = "#f5f1e8"
)
) |>
hc_tooltip(
useHTML = TRUE,
outside = TRUE,
shared = FALSE,
followPointer = TRUE,
backgroundColor = "#fffdf8",
borderColor = "#c9bdae",
borderRadius = 8,
shadow = TRUE,
style = list(zIndex = 9999),
formatter = tooltip_html
) |>
hc_legend(
align = "center",
verticalAlign = "bottom",
itemStyle = list(color = "#4a3731", fontWeight = "400")
) |>
hc_credits(
enabled = TRUE,
text = "Data: motorsport-legends · work in progress",
href = "https://github.com/jbkunst/motorsport-legends"
)