begin incremental-dom/chart.js

src/App.tsx

@@ -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>
-    </>
-  );
-}

src/React.tsx

@@ -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;

src/index.ts

@@ -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)
+          }
+        ]
+      }
+    }
+  );
+});

src/index.tsx

@@ -1,5 +0,0 @@
-import { render } from "inferno";
-import { App } from "./App";
-import {React, createElement} from "./React";
-
-render(<App />, document.getElementById("app"));