begin incremental-dom/chart.js
parent
7e8c6d9c27
commit
757c5bf3d0
@ -1,22 +0,0 @@
|
|||||||
import { React, createElement, Fragment } from "./React";
|
|
||||||
|
|
||||||
export function App({ ticks=[0,1,2,3,4,5] }){
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div class="header">
|
|
||||||
<h1>Choose Probabilities</h1>
|
|
||||||
<h5>X-Axis = Ticks, Y-Axis = Underlying Price</h5>
|
|
||||||
<h5>Begin with 2 Ticks, T_0 and T_1. Can add more in-between or at ends. Do not have to be equidistant.</h5>
|
|
||||||
<h5>Begin with 2 Nodes to the "right" of each Node representing what can happen in the next tick. Can add more. No not need to be equidistant.</h5>
|
|
||||||
</div>
|
|
||||||
<div class="chart">
|
|
||||||
{ticks.map((tick)=>
|
|
||||||
<>
|
|
||||||
<label>T_{tick}</label>
|
|
||||||
<input key={tick} type="range" min="0" max="100" />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
import { createElement } from "inferno-create-element";
|
|
||||||
import { Fragment } from "inferno";
|
|
||||||
|
|
||||||
const React = {createElement, Fragment};
|
|
||||||
export { createElement, Fragment, React };
|
|
||||||
export default React;
|
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
import Chart from 'chart.js/auto';
|
||||||
|
import {elementOpen, elementClose, elementVoid, text, patch} from 'incremental-dom';
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{ year: 2010, count: 10 },
|
||||||
|
{ year: 2011, count: 20 },
|
||||||
|
{ year: 2012, count: 15 },
|
||||||
|
{ year: 2013, count: 25 },
|
||||||
|
{ year: 2014, count: 22 },
|
||||||
|
{ year: 2015, count: 30 },
|
||||||
|
{ year: 2016, count: 28 },
|
||||||
|
];
|
||||||
|
|
||||||
|
function render({ ticks=[0,1,2,3,4,5] }) {
|
||||||
|
elementOpen('div','', ['class',"header"]);
|
||||||
|
elementOpen('h1'); text('Choose Probabilities'); elementClose('h1');
|
||||||
|
elementOpen('h5'); text('X-Axis = Ticks, Y-Axis = Underlying Price'); elementClose('h5');
|
||||||
|
elementOpen('h5'); text('Begin with 2 Ticks, T_0 and T_1. Can add more in-between or at ends. Do not have to be equidistant.'); elementClose('h5');
|
||||||
|
elementOpen('h5'); text('Begin with 2 Nodes to the "right" of each Node representing what can happen in the next tick. Can add more. No not need to be equidistant.'); elementClose('h5');
|
||||||
|
elementClose('div');
|
||||||
|
elementOpen('div', '', ['class', "chart"]);
|
||||||
|
ticks.forEach((tick)=>{
|
||||||
|
elementOpen('label'); text(`T_${tick}`); elementClose('label');
|
||||||
|
elementVoid('input', tick, ['type',"range",'min',"0",'max',"100"]);
|
||||||
|
});
|
||||||
|
elementClose('div');
|
||||||
|
elementOpen('div', 'barChartContainer', ['style', 'width:800px;']);
|
||||||
|
elementOpen('canvas', 'barChart', ['id', 'barChart']);
|
||||||
|
elementClose('canvas');
|
||||||
|
elementClose('div');
|
||||||
|
}
|
||||||
|
|
||||||
|
const root = document.getElementById("app") as HTMLElement;
|
||||||
|
patch(root, function() {
|
||||||
|
render({});
|
||||||
|
new Chart(//@ts-ignore
|
||||||
|
document.getElementById('barChart'),
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: data.map(row => row.year),
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Acquisitions by year',
|
||||||
|
data: data.map(row => row.count)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import { render } from "inferno";
|
|
||||||
import { App } from "./App";
|
|
||||||
import {React, createElement} from "./React";
|
|
||||||
|
|
||||||
render(<App />, document.getElementById("app"));
|
|
||||||
Loading…
Reference in New Issue