Public
Edited
Jun 4, 2023
renderEditPanel = (frame, handleChange) => {
const template = (inputs) => {
return htl.html`
<div style="display: flex; flex-direction: column;">
${inputs}
</div>`;
};
const selects = EDITABLES.map(({ id, title, options }) => {
const select = Inputs.select(options, {
label: title,
value: frame.getAttribute(id)
});
const input = d3.select(select).on("input", ({ target: { value } }) => {
const option = options[value];
frame.setAttribute(id, option);
handleChange();
});
input.style("width", "15em");
input.select("label").style("width", "4em");
input.select("select").style("width", "10em");
return select;
});
const openButton = renderButton(
"◘"
//"align-self: start; top: -5px; left: -15px;"
// "_line-height: 18px"
);
const closeButton = renderRemoveButton(null, null, "align-self: end;");
const panel = htl.html`
<div style="
display: flex;
padding: 2em;
justify-content: end;
position: absolute;
padding: 0.5em;
border-radius: 4px;
background: #fff;
background: pink;
bottom: 0px;
">
${closeButton}
${Inputs.form(selects, { template })}
</div>`;
const panelD3 = d3.select(panel); //.style("display", "none");
const openButtonD3 = d3.select(openButton);
let showPanel = false;
const toggleShow = () => {
showPanel = !showPanel;
openButtonD3.style("visibility", showPanel ? "hidden" : "visible");
panelD3.style("display", showPanel ? "initial" : "none");
};
d3.select(closeButton).on("click", toggleShow);
d3.select(openButton).on("click", toggleShow);
toggleShow();
return htl.html`
<div style="position: relative; z-index: 2;">
${panel}
${openButton}
</div>`;
}
renderButton = (
text,
handleClick,
cutomeStyle = "",
customeInnerStyle = ""
) => {
const size = 20;
const button = htl.html`<div style="
position: relative;
min-height: ${size};
width: 0px;
height: 0px;
left: -${size / 2}px;
top: -${size / 2}px;
cursor: pointer;
overflow: visibile;
${cutomeStyle}
z-index: 1;
">
<div style="
width: ${size}px;
height: ${size}px;
text-align: center;
background: #888;
color: white;
border-radius: 50%;
line-height: ${size}px;
font-weight: bold;
font-size: ${size}px;
${customeInnerStyle}
">
${text}
</div>
</div>`;
d3.select(button).on("click", handleClick);
return button;
}
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.
