factor into components

src/App.ts

@@ -0,0 +1,45 @@
+import Chart from 'chart.js/auto';
+import { elementOpen, elementClose, elementVoid, text } from 'incremental-dom';
+import Header from './Header';
+
+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 App({ ticks=[0,1,2,3,4,5] }) {
+  Header();
+  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');
+
+  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)
+          }
+        ]
+      }
+    }
+  );
+}
+
+export default App;

src/Header.ts

@@ -0,0 +1,12 @@
+import { elementOpen, elementClose, elementVoid, text } from 'incremental-dom';
+
+function Header(){
+  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');
+}
+
+export default Header;

src/index.ts

@@ -1,51 +1,7 @@
-import Chart from 'chart.js/auto';
+import { patch } from 'incremental-dom';
-import {elementOpen, elementClose, elementVoid, text, patch} from 'incremental-dom';
+import App from './App';
-
-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({});
+  App({});
-  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)
-          }
-        ]
-      }
-    }
-  );
 });