This is an example mdpad page. The inputs and outputs are generated using the mdpad-mithril helper functions. These helper functions rely on Mithril and Bootstrap.
<div id="input"></div>
Here are some results. As the inputs above change, the outputs should adjust accordingly. The plot is done with Plotly-js.
<div id="output"></div>
<script src="https://unpkg.com/mdpad-js@0.2.2/dist/mdpad.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/mdpad-js@0.2.2/src/mdpad-mithril.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/2.0.4/mithril.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.plot.ly/plotly-1.52.2.min.js"></script>
<script>
var tbl = {
fruit: ["orange", "apple", "banana", "apple"],
k: [10, 20, 50, 99],
}
function mdpad_init() {
var form =
m(".row", m(".col-md-6",
minput({ title:"Number A", mdpad:"A", value:3.3 }),
mselect({ title: "Fruit", mdpad: "fruit", options: ["apple", "banana", "orange"]}),
));
m.render(document.getElementById("input"), form);
}
function mdpad_update() {
tbl["k * A"] = tbl.k.map((x) => mdpad.A * x);
var colors = tbl.fruit.map((x) => x == mdpad.fruit ? "green" : "purple");
m.render(document.getElementById("output"), m("div",
mdatatable(tbl, {theadclass: "thead-dark"}),
m("p", "The first ", m("em", mdpad.fruit),
" in the table has k == ", m("b", tbl.k[tbl.fruit.indexOf(mdpad.fruit)]), "."),
mplotly([{x: tbl.fruit, y: tbl["k * A"], type:"bar", marker: {color: colors}}]),
));
}
</script>