diff --git a/package.json b/package.json index adafe64..00adc36 100644 --- a/package.json +++ b/package.json @@ -6,14 +6,14 @@ "author": "Brian Sakal ", "license": "MIT", "scripts": { - "build": "cp src/index.html dist/ && yarn esbuild src/index.tsx --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" + "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.ts --outdir=dist --platform=browser --bundle --format=esm --servedir=dist" }, "devDependencies": { "esbuild": "^0.17.18" }, "dependencies": { - "inferno": "^8.1.1", - "inferno-create-element": "^8.1.1" + "chart.js": "^4.3.0", + "incremental-dom": "^0.7.0" } } diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index aab409c..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { React, createElement, Fragment } from "./React"; - -export function App({ ticks=[0,1,2,3,4,5] }){ - return ( - <> -
-

Choose Probabilities

-
X-Axis = Ticks, Y-Axis = Underlying Price
-
Begin with 2 Ticks, T_0 and T_1. Can add more in-between or at ends. Do not have to be equidistant.
-
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.
-
-
- {ticks.map((tick)=> - <> - - - - )} -
- - ); -} \ No newline at end of file diff --git a/src/React.tsx b/src/React.tsx deleted file mode 100644 index f0e02b7..0000000 --- a/src/React.tsx +++ /dev/null @@ -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; \ No newline at end of file diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..5f7ac15 --- /dev/null +++ b/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) + } + ] + } + } + ); +}); \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx deleted file mode 100644 index 1bf3540..0000000 --- a/src/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { render } from "inferno"; -import { App } from "./App"; -import {React, createElement} from "./React"; - -render(, document.getElementById("app")); \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 9a9ce8f..f935b95 100644 --- a/yarn.lock +++ b/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: - version "3.1.2" - resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" - integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== +"@kurkle/color@^0.3.0": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f" + 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: - version "8.1.1" - resolved "https://registry.yarnpkg.com/inferno-create-element/-/inferno-create-element-8.1.1.tgz#f135ea6fb784d2024148845eeb4f752da6252f0d" - integrity sha512-RzoRK/gl6kADO9hzviChjCLvD5whsUJE5k71ordYuq/6aixdLaiizebthNkE+18ZKoN6VUXH1PlczaMPu/YIpQ== - 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== +incremental-dom@^0.7.0: + version "0.7.0" + resolved "https://registry.yarnpkg.com/incremental-dom/-/incremental-dom-0.7.0.tgz#b03664731bdc430035f32df7d76fa56daedee9b8" + integrity sha512-SBHQ6AiCmtwh7TU9hjq2CspasJe7ggGa9k+qYZft+d5Qq9v7V+07wlnRSZH5GGYjI8wn6U5p7dDua7f1bih52g==