The end-to-end solution for building and hosting better data apps, dashboards, and reports.
function slider({
min = 0,
max = 1,
value,
step,
title,
description,
disabled,
display,
// TODO precision
// TODO format
// TODO getValue
// TODO submit
} = {}) {
return Inputs.range([min, max], {
value,
step,
label: title === undefined ? description : title,
format: display,
disabled
});
}
function button(config = {}) {
const {
value = "Ok",
title,
description,
disabled
} = typeof config === "string" ? {value: config} : config;
return Inputs.button(value, {
label: title === undefined ? description : title,
value,
reduce: value => value,
disabled
});
}
function select(config = {}) {
const {
value,
title,
description,
disabled,
multiple,
size,
options
} = Array.isArray(config) ? {options: config} : config;
return Inputs.select(options, {
value,
label: title === undefined ? description : title,
format: o => typeof o === "object" ? o.label : o,
keyof: o => typeof o === "object" ? o.label : o,
valueof: o => typeof o === "object" ? o.value : o,
disabled: disabled || options.filter(o => typeof o === "object" && o.disabled).map(o => o.value),
multiple: multiple && size ? size : multiple
});
}
function autoSelect(config = {}) {
const {
value,
title,
description,
disabled,
placeholder,
options,
// TODO size
// TODO autocomplete = "off"
// TODO list = "options"
} = Array.isArray(config) ? {options: config} : config;
return Inputs.text({
value,
label: title === undefined ? description : title,
disabled,
placeholder,
datalist: options
});
}
function _text(type, config = {}) {
const {
value,
title,
description,
disabled,
maxlength,
minlength,
placeholder,
submit,
// TODO pattern
// TODO size
// TODO autocomplete = "off"
// TODO getValue
} = typeof config === "string" ? {value: config} : config;
return Inputs.text({
type,
value,
label: title === undefined ? description : title,
disabled,
maxlength,
minlength,
placeholder,
submit
});
}
text = config => _text("text", config)
date = config => _text("datetime-local", config)
time = config => _text("datetime-local", config)
password = config => _text("password", config)
color = config => _text("color", config)
function radio(config = {}) {
const {
value,
title,
description,
options,
disabled,
// TODO submit
} = Array.isArray(config) ? {options: config} : config;
return Inputs.radio(options, {
value,
label: title === undefined ? description : title,
format: o => typeof o === "object" ? o.label : o,
keyof: o => typeof o === "object" ? o.label : o,
valueof: o => typeof o === "object" ? o.value : o,
disabled: disabled || options.filter(o => typeof o === "object" && o.disabled).map(o => o.value)
});
}
function checkbox(config = {}) {
let {
value,
title,
description,
disabled,
options,
// TODO submit
// TODO false / value when only a single option?
} = Array.isArray(config) ? {options: config} : config;
return Inputs.checkbox(options, {
value,
label: title === undefined ? description : title,
format: o => typeof o === "object" ? o.label : o,
keyof: o => typeof o === "object" ? o.label : o,
valueof: o => typeof o === "object" ? o.value : o,
disabled: disabled || options.filter(o => typeof o === "object" && o.disabled).map(o => o.value)
});
}
function number(config = {}) {
const {
value,
title,
description,
disabled,
placeholder,
step = "any",
min,
max,
// TODO submit
// TODO hide the range input?
} = typeof config === "number" || typeof config === "string" ? {value: +config} : config;
return Inputs.range([min, max], {
value,
placeholder,
label: title === undefined ? description : title,
disabled,
step
});
}
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.
