feat: plot

package.json

@@ -3,6 +3,7 @@
   "version": "0.3.0",
   "private": true,
   "dependencies": {
+    "@nivo/line": "^0.61.1",
     "@postlight/use-search-params": "https://github.com/postlight/use-search-params.git",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
@@ -17,7 +18,8 @@
     "react-emoji-render": "^1.2.2",
     "react-hamburger-menu": "^1.2.1",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "recharts": "^1.8.5"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -3,8 +3,8 @@
 
 body {
     font-size:1.5em;
-    line-height:2em;
-    font-family: 'IBM Plex Sans', sans-serif;
+    line-height:1.5em;
+    font-family: 'IBM Plex Serif', sans-serif;
     color:#444;
 }
 
@@ -13,3 +13,28 @@ body {
     color:#222;
 }
 
+button {
+	box-shadow:inset 0px 1px 0px 0px #ffffff;
+	background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
+	background-color:#ededed;
+	border-radius:6px;
+	border:1px solid #dcdcdc;
+	display:inline-block;
+	cursor:pointer;
+	color:#777777;
+	font-family:IBM Plex Sans;
+	font-size:1em;
+	font-weight:bold;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #ffffff;
+	margin-right:4px;
+}
+
+button:hover {
+	background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
+	background-color:#dfdfdf;
+}
+
+button:active {
+	position:relative;
+}

src/App.js

@@ -37,11 +37,11 @@ const textVars = textFiles.reduce(
 
 function App(props) {
   let { page } = useParams();
-  const [ast, astState] = textVars[page];
+  const [ast, astState, ranges] = textVars[page];
   return (
     <div className="App">
+      <Section ast={ast} astState={astState} page={page} ranges={ranges} />
       <Nav textVars={textVars} />
-      <Section ast={ast} astState={astState} page={page} />
     </div>
   );
 }

src/LineChart.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { ResponsiveLine } from "@nivo/line";
+
+function LineChart(props) {
+  return (
+    <ResponsiveLine
+      data={props.data}
+      yScale={{
+            type: "linear",
+            min: props.minValue,
+            max: props.maxValue,
+
+      }}
+      animate={false}
+      margin={{ top: 0, right: 10, bottom: 45, left: 70 }}
+      xScale={{ type: "point" }}
+	curve="monotoneX"
+            enableArea={true}
+            areaOpacity={0.07}
+
+      axisBottom={{
+        orient: "bottom",
+        tickSize: 5,
+        tickPadding: 5,
+        tickRotation: -45,
+        //		legend: props.xLabel,
+        legendOffset: 56,
+        legendPosition: "middle",
+        format: props.xFormat,
+      }}
+      axisLeft={{
+        orient: "left",
+        tickRotation: 0,
+        //		legend: props.yLabel,
+        //		legendOffset: -70,
+        legendPosition: "middle",
+        format: props.yFormat,
+      }}
+      markers={[
+        {
+          axis: "y",
+          value: 0,
+          lineStyle: { stroke: "#F00", strokeWidth: 2 },
+        },
+      ]}
+    />
+  );
+}
+
+export default LineChart;

src/Nav.css

@@ -1,10 +1,11 @@
 .burger {
-    margin-left:-10px;
+    margin:5px;
     position:fixed;
+    top:0;
 }
 
 #nav {
-    font-size:125%;
+    font-size:75%;
     right:0px;
     position:fixed;
     width:100%;
@@ -26,12 +27,11 @@ div#nav.hamburger-true {
     transition:left 0.2s;
 }
 div#nav.hamburger-false {
-
     visibility:none;
 }
 
 #inner-nav {
-    height:60%;
+    height:90%;
     overflow-y:scroll; 
 
 }

src/Nav.js

@@ -28,10 +28,10 @@ function Nav(props) {
         <HamburgerMenu
           isOpen={hamburgerOpen}
           menuClicked={() => setHamburgerOpen(hamburgerOpen ? false : true)}
-          width={80}
-          height={50}
-          strokeWidth={3}
-          rotate={45}
+          width={30}
+          height={20}
+          strokeWidth={4}
+          rotate={0}
           animationDuration={0.2}
           className="burger"
           color="slategray"

src/Section.css

@@ -14,3 +14,21 @@ h1 {
 .negative {
     color:red;
 }
+
+div.spacer {
+    height:0.75em;
+}
+
+.chart {
+    height:325px;
+    border:1px solid #ccc;
+    padding:0px 20px 120px 0.5em;
+    background:#fafafa;
+}
+
+.chart h3 {
+    font-size:1.25em;
+    font-weight:200;
+}
+
+

src/Section.js

@@ -5,11 +5,12 @@ import React, { useMemo } from "react";
 import Slider from "./Slider";
 import Statement from "./Statement";
 import Text from "./Text";
+import LineChart from "./LineChart";
 
 import "./Section.css";
 
 function Section(props) {
-  const { ast, astState } = props;
+  const { ast, astState, ranges } = props;
   const searchParams = useSearchParams("replace");
   const state = useMemo(readFields, [astState, searchParams]);
 
@@ -28,6 +29,58 @@ function Section(props) {
 
   function toComponents(o, i) {
     switch (o.type) {
+      case "chart":
+        const range = ranges[o.x].range;
+        const exp = ranges[o.y];
+        let s = Object.assign(state);
+
+        const inner_data = range.map((val, i) => {
+          s[o.x] = val;
+          Object.keys(ranges).forEach((x) => {
+            if (ranges[x].type === "expression") {
+              s[x] = ranges[x].eval(s);
+            }
+          });
+          const y = exp.eval(s);
+          return { x: val, y: y };
+        });
+        const _minValue = inner_data[0].y;
+        const _maxValue = inner_data[inner_data.length - 1].y;
+
+        const [minValue, maxValue] = [_minValue, _maxValue].sort(
+          (a, b) => a - b
+        );
+        const data = [
+          {
+            id: o.y,
+            data: inner_data,
+          },
+        ];
+        function c(x) {
+          return x.replace(/_/g, " ").toUpperCase();
+        }
+        return (
+          <div key={i} className="chart">
+            <h3>
+              {c(o.y)} <i>vs.</i> {c(o.x)}
+            </h3>
+            <LineChart
+              data={data}
+              xFormat={(x) => numeral(x).format("-0,0")}
+              yFormat={(x) => {
+                console.log("Y", x);
+                return numeral(x).format("-0,0");
+              }}
+              minValue={minValue}
+              maxValue={maxValue}
+              xLabel={c(o.x)}
+              yLabel={c(o.y)}
+            />
+          </div>
+        );
+      case "paragraph":
+        return <div key={i} className="spacer"></div>;
+
       case "text":
         return <Text key={i} {...o} />;
 
@@ -58,13 +111,32 @@ function Section(props) {
           state[o.variable] = n;
           return n;
         }
+        function newNum() {
+          const n = o.eval();
+          state[o.variable] = n;
+          addField(o.variable, n);
+          console.log(o.variable, n, state[o.variable]);
+        }
+
         const n = evaluate(o);
         const sign = n > 0 ? "positive" : "negative";
-        return (
-          <span className={"expression " + sign} key={i}>
-            {format(n)}
-          </span>
-        );
+
+        if (o.interactive) {
+          return (
+            <button onClick={newNum}>
+              {format(state[o.variable])}
+              <span role="img" aria-label="Roll dice">
+                &#127922;
+              </span>
+            </button>
+          );
+        } else {
+          return (
+            <span className={"expression " + sign} key={i}>
+              {format(n)}
+            </span>
+          );
+        }
 
       default:
         return undefined;