tooltip = createTooltip(
{
dataPoints: [
{
label: "Test",
value: "4 %"
},
{
label: "Test 2",
value: "7 %"
}
],
visible: true
},
this
)
createTooltip = function (props, element = document.createElement("span")) {
lit.render(Tooltip(props), element);
return element;
}
Tooltip = ({ dataPoints, visible, x, y }) => {
const styles = [
`opacity: ${visible ? 1 : 0}`,
`visibility: ${visible ? "visible" : "hidden"}`,
`transform: translate(${x}, ${y})`
];
return lit.html`
<div class="${cl(
"tooltip"
)}" aria-hidden="${!visible}" style="${styles.join("; ")}">
<ul class="${cl("datapoint-list")}">
${dataPoints.map((dataPoint) => DataPoint({ dataPoint }))}
</ul>
</div>
`;
}
DataPoint = ({ dataPoint }) => {
const { label, value, symbol } = dataPoint;
return lit.html`
<li class="${cl("datapoint")}">
${
symbol
? lit.html`<span class="${cl(
"datapoint-symbol"
)}" style="--_color: ${symbol}"></span>`
: null
}
<span class="${cl("datapoint-label")}">${label}</span>
<span class="${cl("datapoint-value")}">${value}</span>
</li>
`;
}
cl = makeCl("tooltip")
lit = import("https://esm.run/lit-html@3")
import { colors } from "@statistikzh/common-styles"
import { makeCl } from "@statistikzh/utils"
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.
