begin incremental-dom/chart.js

package.json

@@ -6,14 +6,14 @@
   "author": "Brian Sakal <brian@sakal.us>",
   "license": "MIT",
   "scripts": {
-    "build": "cp src/index.html dist/ && yarn esbuild src/index.tsx --outdir=dist --platform=browser --bundle --format=esm",
+    "build": "cp src/index.html dist/ && yarn esbuild src/index.ts --outdir=dist --platform=browser --bundle --format=esm",
-    "serve": "cp src/index.html dist/ && yarn esbuild src/index.tsx --outdir=dist --platform=browser --bundle --format=esm --jsx-factory=createElement --jsx-fragment=Fragment --servedir=dist"
+    "serve": "cp src/index.html dist/ && yarn esbuild src/index.ts --outdir=dist --platform=browser --bundle --format=esm --servedir=dist"
   },
   "devDependencies": {
     "esbuild": "^0.17.18"
   },
   "dependencies": {
-    "inferno": "^8.1.1",
+    "chart.js": "^4.3.0",
-    "inferno-create-element": "^8.1.1"
+    "incremental-dom": "^0.7.0"
   }
 }

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"));

yarn.lock

@@ -112,10 +112,17 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.18.tgz#3a8e57153905308db357fd02f57c180ee3a0a1fa"
   integrity sha512-qU25Ma1I3NqTSHJUOKi9sAH1/Mzuvlke0ioMJRthLXKm7JiSKVwFghlGbDLOO2sARECGhja4xYfRAZNPAkooYg==
 
-csstype@^3.1.1:
+"@kurkle/color@^0.3.0":
-  version "3.1.2"
+  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
-  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
+chart.js@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.3.0.tgz#ac363030ab3fec572850d2d872956f32a46326a1"
+  integrity sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
 
 esbuild@^0.17.18:
   version "0.17.18"
@@ -145,28 +152,7 @@ esbuild@^0.17.18:
     "@esbuild/win32-ia32" "0.17.18"
     "@esbuild/win32-x64" "0.17.18"
 
-inferno-create-element@^8.1.1:
+incremental-dom@^0.7.0:
-  version "8.1.1"
+  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/inferno-create-element/-/inferno-create-element-8.1.1.tgz#f135ea6fb784d2024148845eeb4f752da6252f0d"
+  resolved "https://registry.yarnpkg.com/incremental-dom/-/incremental-dom-0.7.0.tgz#b03664731bdc430035f32df7d76fa56daedee9b8"
-  integrity sha512-RzoRK/gl6kADO9hzviChjCLvD5whsUJE5k71ordYuq/6aixdLaiizebthNkE+18ZKoN6VUXH1PlczaMPu/YIpQ==
+  integrity sha512-SBHQ6AiCmtwh7TU9hjq2CspasJe7ggGa9k+qYZft+d5Qq9v7V+07wlnRSZH5GGYjI8wn6U5p7dDua7f1bih52g==
-  dependencies:
-    inferno "8.1.1"
-
-inferno-vnode-flags@8.1.1:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/inferno-vnode-flags/-/inferno-vnode-flags-8.1.1.tgz#b405edf33bf12c850b253b6c26700b8368f338d7"
-  integrity sha512-Az2vuT5FRF6zGW8e13ye5Mg0YoKvk/XL2LVJr4i+LrZWn9fb9AqyCDuCSvMe9ZBWKw2pnsbsUaDlQYhNh0tjkA==
-
-inferno@8.1.1, inferno@^8.1.1:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/inferno/-/inferno-8.1.1.tgz#f2e7b02eb32e7fb3da0f8b4a5a38640979546c0b"
-  integrity sha512-PjpQkS1uYLeK8FHpMBgJi0qE5traFZs/jpgk+Ddx1Y7HGp5kneyus02eajgWzPM4imGYf6S3h+qbjwSXGutveA==
-  dependencies:
-    csstype "^3.1.1"
-    inferno-vnode-flags "8.1.1"
-    opencollective-postinstall "^2.0.3"
-
-opencollective-postinstall@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259"
-  integrity sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==