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