switch to react/jotai/react-chartjs-2

update build.mjs

src/App.ts

@@ -1,69 +0,0 @@
-import Chart from 'chart.js/auto';
-import { elementOpen as o, elementClose as c, elementVoid as h, text, patch } from 'incremental-dom';
-import Header from './Header';
-
-//const o = elementOpen, c=elementClose, h=elementVoid;
-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 Dates(datesP:Promise<Array<string>>){
-  const el =
-  o('div');
-    text('Loading');
-  c('div');
-  datesP.then(dates=>{
-    patch(el, ()=>{
-      o('select');
-      for(const date of dates){
-        o('option', date);
-        text(date);
-        c('option');
-      }
-      c('select');
-    })
-  });
-}
-
-function App({ ticks=[0,1,2,3,4,5] }) {
-  Header();
-  Dates(fetch('http://127.0.0.1:8234/option_quotes/AAPL/quote_dates').then(x=>x.json()));
-  /*
-  o('div', '', ['class', "chart"]);
-    ticks.forEach((tick)=>{
-      o('label'); text(`T_${tick}`); c('label');
-      h('input', tick, ['type',"range",'min',"0",'max',"100"]);
-    });
-  c('div');
-  */
-  /*
-  o('div', 'barChartContainer', ['style', 'width:800px;']);
-    o('canvas', 'barChart', ['id', 'barChart']);
-    c('canvas');
-  c('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/App.tsx

@@ -0,0 +1,36 @@
+//import Chart from 'chart.js/auto';
+import { Chart as ChartJS, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement } from "chart.js";
+import { Line } from 'react-chartjs-2';
+import Header from './Header';
+import { QuoteDatePicker } from "./QuoteDatePicker";
+
+ChartJS.register(LineElement, Tooltip, Legend, CategoryScale, LinearScale, PointElement);
+
+function App() {
+  return (
+  <div>
+    <Header />
+    <QuoteDatePicker />
+    <Line
+      datasetIdKey='id'
+      data={{
+        labels: ['Jun', 'Jul', 'Aug'],
+        datasets: [
+          {//@ts-ignore
+            id: 1,
+            label: '',
+            data: [5, 6, 7],
+          },
+          {//@ts-ignore
+            id: 2,
+            label: '',
+            data: [3, 2, 1],
+          },
+        ],
+      }}
+    />
+  </div>
+  );
+}
+
+export default App;

src/Header.ts

@@ -1,12 +0,0 @@
-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/Header.tsx

@@ -0,0 +1,12 @@
+function Header(){
+  return (
+  <div className="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>
+  );
+}
+
+export default Header;

src/QuoteDatePicker.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { atom as $, useAtom } from 'jotai';
+
+const $dates = $<Array<string>>([]);
+const $isLoading = $<boolean>(false);
+
+export function QuoteDatePicker(){
+  const [dates, setDates] = useAtom($dates);
+  const [isLoading, setIsLoading] = useAtom($isLoading);
+
+  useEffect(()=>{
+    fetch('http://127.0.0.1:8234/option_quotes/AAPL/quote_dates')
+    .then(x=>x.json())
+    .catch((err)=>['2021-01-02', '2021-01-03', '2021-01-04'])
+    .then((dates_)=>{ setDates(dates_); setIsLoading(false); })
+  },[])
+  
+  return (
+    <div>
+      {isLoading
+      ?
+      <span>Loading...</span>
+      :
+      <select>
+        {dates.map((date)=>
+          <option key={date} value={date}>{date}</option>
+        )}
+      </select>
+      }
+    </div>
+  );
+}

src/index.ts

@@ -1,7 +0,0 @@
-import { patch } from 'incremental-dom';
-import App from './App';
-
-const root = document.getElementById("app") as HTMLElement;
-patch(root, function() {
-  App({});
-});

src/index.tsx

@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client'
+import App from './App';
+
+const rootEl = document.getElementById("app") as HTMLElement;
+const Root = createRoot(rootEl);
+
+Root.render(<App />);