framework
framework copied to clipboard
Resize helper for plot functions with a view
The resize helper example works for a Plot function that accepts a width and/or height. The helper should allow for the ability to resize and have access to a view, such as a tooltip mark where you can access the data on hover.
- See chart as input example from docs. Want to allow for that functionality, but also allow for resizing.
Yep, I have a workaround in https://talk.observablehq.com/t/framework-using-resize-with-view/8895/3:
function valueof(element, initialValue = null) {
return Generators.observe((change) => {
const input = (event) => change(event.target.value);
change(initialValue);
element.addEventListener("input", input);
return () => element.removeEventListener("input", input);
});
}
Then use valueof in place of Generators.input:
const penguinChart = resize((width) => Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", tip: true}).plot({width}));
const penguin = valueof(penguinChart);
We should probably just change Generators.input (and by extension view) to work this way by default, possibly with a few more tweaks.
Cool, that gets the job done. Agreed would be nice for the other view helpers to work that way by default.