Using mdpad with Franklin.jl

mdpad-franklin.md

mdpad example with Mithril inputs and outputs

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>

Results

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>