Public
Edited
Dec 6, 2022
1 star
condition = options[1]
year = options[0]
StatCard = (value, desc, id = "-") => {
return html`<div style="${styleStringify(
styles.card
)}" onclick="console.log('${id}')">
<span style="${styleStringify(styles.cardValue)}">${value}</span>
<i style="${styleStringify(styles.cardDesc)}">${desc}</i>
</div>`;
}
styles = ({
card: {
display: "flex",
"flex-direction": "column",
"align-items": "center",
"text-align": "center",
padding: "2px",
border: "2px solid #777",
width: "220px",
cursor: "pointer"
},
cardValue: {
"font-size": "24px",
"font-weight": "bold"
},
cardDesc: {
"font-size": "14px"
},
cardsContainer: {
display: "grid",
"grid-template-columns": "auto auto auto auto",
"grid-template-rows": "auto auto auto auto",
"column-gap": "10px",
"row-gap": "15px"
}
})
styleStringify = (styleObj) =>
Object.entries(styleObj)
.map(([k, v]) => `${k}: ${v}`)
.join("; ")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
