values
viewof values = inputsGroup(
[
[
slider({'title':'test',name:'name',description:'description'}),
slider({'title':'test',name:'name',description:'description'}),
slider({'title':'test',name:'name',description:'description'}),
],
[
slider({'title':'test',name:'name',description:'description'}),
slider({'title':'test',name:'name',description:'description'}),
slider({'title':'test',name:'name',description:'description'}),
],
[
`<div style="height:50px;width:${width/2-100}px"></div>`, // Just a trick, to make select element centered
select(['test','name']),
]
],
[
['first-input','second-input','third-slider'],
['4-th','5-th','6-th'],
['','select']
]
)
function inputsGroup(views,names){
const form = html`<div>${
views.map(row => html`<div>${
row.map(input => html`<div style="display:inline-block;min-width:5px">${input}</div>`)
}</div>`)
}</div>`;
form.oninput = () => {
form.value = views.map(row => row.map(input => input.value))
if(names){
names.forEach((row,i)=>row.forEach((c,j)=> form.value[i][j] && (form.value[c]=form.value[i][j])))
}
};
form.oninput();
return form;
}
import {slider,select} from "@jashkenas/inputs"
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.
