Merge pull request #11 from dvd101x/plot

Plot

README.md

@@ -22,7 +22,7 @@ acceleration to yard/s^2
 
 You will notice you get instant results as you are typing your expressions.
 
-# Getting started
+# Install and develop locally
 
 Clone this repository and run the following command to install dependencies.
 ```
@@ -149,3 +149,58 @@ CodeMirror is used for editing the mathjs code in the browser and includes:
 - Other key bindings
   - Find and replace <kbd>Ctrl</kbd> + <kbd>F</kbd>
   - The rest can be found in [CodeMirror: Reference Manual](https://codemirror.net/docs/ref/)
+
+## [Plotly](https://plotly.com/javascript/)
+
+Is used to do plots. Uses the main interface of plotly without many changes, but running first through mathjs simplifications.
+
+### Plot hello world [example](https://plotly.com/javascript/getting-started/)
+```jl
+plot([{x:1:5, y:2.^(1:5)}])
+```
+![HelloWorldPlot](img/helloWorldPlot.png)
+
+### Plot functions
+
+```jl
+x = 0: pi/8: 2 pi;
+
+plot([
+  {x:x, y:sin(x), name:"sin"},
+  {x:x, y:atan(x), name:"atan"}
+])
+```
+![Two traces plot](img/twoTracesPlot.png)
+
+### Plot advanced functions
+
+```jl
+sigma = 10;
+beta = 2.7;
+rho = 28;
+
+lorenz(t, u) = 
+  [ 
+    sigma * (u[2] - u[1]),
+    u[1] * (rho - u[3]) - u[2],
+    u[1] * u[2] - beta * u[3]
+  ];
+
+sol = solveODE(lorenz, [0, 100], [1, 1, 1]);
+
+plot(
+ [{
+    x: flatten(sol.y[:,1]),
+    y: flatten(sol.y[:,2]),
+    z: flatten(sol.y[:,3]),
+    type: "scatter3d",
+    mode: "lines"
+}])
+```
+![Lorenz Plot](img/lorenz.png)
+
+# Warnings
+
+- All calculations are done locally
+- There is no server saving your calculations
+- Don't run code that you don't trust 

ToDo.md

@@ -1,37 +1,44 @@
+
 ToDo
 ====
+- [ ] Match inputs and outputs
+- [ ] Change worker to modules
 - [ ] Details
   - [x] Cleanup
   - [x] JS docs
   - [ ] Rename variables
     - [ ] Sessions to Editor States
-    - [x] 0 index Sessions
-    - [x] Array fill null for initial EditorStates
-- [ ] Custom help
-- [ ] Function finder
-- [ ] Variable finder
-- [ ] Drag and Drop
-- [ ] Download text
+
 
 # Plots
-- [ ] Import plotly
-- [ ] Return objects
-  - [ ] plot types
+- [x] Import plotly
+- [x] Return objects
+  - [x] plot types
   - [ ] doc types
-  - [ ] result type
+  - [x] result type
+- [ ] Document plots
+  - [ ] Add plotly
+  - [x] More tests
+  - [ ] Format plot output
 
 ## Extra 
 - [ ] Match outputs
 - [ ] Include dates (to work with multiple tabs) 
 - [ ] Variables in scope
 - [ ] Help files
+- [x] Eval expressions vs blocks
+- [ ] Custom help
+- [ ] Function finder
+- [ ] Variable finder
+- [ ] Drag and Drop
+- [ ] Download text
+- [ ] Format help
+
+## Decisions
 - [ ] GUI with Alpinejs
   - [ ] Tabs
   - [ ] Examples
   - [ ] IO
-- [ ] Eval expressions vs blocks
-
-## Decisions
-- [ ] New nomeclature like pyodide
+- [ ] New nomeclature like iodide
 - [ ] File names
 - [ ] Dropdown or tabs

examples.js

@@ -467,7 +467,81 @@ print('x has two solutions $0 and $1', x, 4)
 
 proof = a x.^2 + b x + c;
 print('Using x = $1 we get $2', [x[1], proof[1]], 4)
-print('Using x = $1 we get $2', [x[2], proof[2]], 4)`
+print('Using x = $1 we get $2', [x[2], proof[2]], 4)`,
+simplePlot:String.raw`# Plot
+
+x=0:pi/8: 4*pi;
+
+plot([
+  {x:x, y:sin(x), name:"sin"},
+  {x:x, y:atan(x), name:"atan"}
+])`,
+plot3D:String.raw`# 3d plot
+
+data = [
+    {
+        type: "isosurface",
+        x: [0,0,0,0,1,1,1,1],
+        y: [0,1,0,1,0,1,0,1],
+        z: [1,1,0,0,1,1,0,0],
+        value: 1:8,
+        isomin: 2,
+        isomax: 6,
+        colorscale: "Reds"
+    }
+]
+
+plot(data)`,
+statPlot:String.raw`# Statistical plots
+
+y0 = random([50]);
+y1 = random([50])+1;
+
+trace1 = {
+  y: y0,
+  type: 'box',
+  name:'y0'
+};
+
+trace2 = {
+  y: y1,
+  type: 'box',
+  name: 'y1'
+};
+
+data = [trace1, trace2];
+
+plot(data)`,
+lorenz:String.raw`# # Lorenz attractor
+
+# Define the functions
+# $$
+# {\displaystyle {\begin{aligned}{\frac {\mathrm {d} x}{\mathrm {d} t}}&=\sigma (y-x),\\[6pt]{\frac {\mathrm {d} y}{\mathrm {d} t}}&=x(\rho -z)-y,\\[6pt]{\frac {\mathrm {d} z}{\mathrm {d} t}}&=xy-\beta z.\end{aligned}}}
+# $$
+
+#| u is [x, y, z]
+sigma = 10;
+beta = 2.7;
+rho = 28;
+
+lorenz(t, u) = 
+  [
+    sigma * (u[2] - u[1]),
+    u[1] * (rho - u[3]) - u[2],
+    u[1] * u[2] - beta * u[3]
+  ];
+
+sol = solveODE(lorenz, [0, 100], [1, 1, 1]);
+
+plot(
+ [{
+    x: flatten(sol.y[:,1]),
+    y: flatten(sol.y[:,2]),
+    z: flatten(sol.y[:,3]),
+    type: "scatter3d",
+    mode: "lines"
+}])
+`
 }
 
 // To get a new examples use editor.state.doc.toString().replace(/\r?\n/g,'\n').split('\n')

index.html

@@ -10,6 +10,7 @@
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
   <link rel="manifest" href="/site.webmanifest">
+  <script src="https://cdn.plot.ly/plotly-2.31.1.min.js" charset="utf-8"></script>
 </head>
 <script src="/getWorker.js"></script>
 <body>
@@ -30,6 +31,12 @@
               <option value="strings">Strings</option>
               <option value="objects">Objects</option>
             </optgroup>
+            <optgroup label="Plot">
+              <option value="simplePlot">Plot</option>
+              <option value="plot3D">3D Plot</option>
+              <option value="statPlot">Statistic Plots</option>
+              <option value="lorenz">Lorenz attractor</option>
+            </optgroup>
             <optgroup label="Thermodynamics">
               <option value="coolprop">Fluid Properties</option>
               <option value="coolpropHigh">coolprop website</option>

main.js

@@ -53,7 +53,7 @@ for (let ID of listOfSessions) {
   radioInput.id = 'tab' + ID;
   radioInput.checked = lastTab == ID ? true : false;
   tabsField.appendChild(radioInput);
-  
+
   const label = document.createElement('label');
   label.htmlFor = 'tab' + ID;
   label.id = 'tabL' + ID;
@@ -69,7 +69,7 @@ for (let ID of listOfSessions) {
   if (sessionText && !sessionText.trim()) {
     localStorage.removeItem(thisSession)
   }
-  
+
   sessionNames[ID] = setSessionName(ID);
 }
 
@@ -115,8 +115,45 @@ const waitToSave = 1000;
 mathWorker.onmessage = function (oEvent) {
   const results = JSON.parse(oEvent.data)
   const tabToSave = tabIDs.value;
-  const out = results.outputs.map(formatOutput).join("\n")
-  outputs.innerHTML = out;
+  outputs.innerHTML = "";
+  results.outputs.forEach(out => {
+
+    switch (out.type) {
+      case "math":
+        out.text.forEach(e => {
+          const pre = document.createElement("pre");
+          if (e.visible) {
+            const div = document.createElement("div");
+            const type = e.type;
+            const value = e.result;
+            switch (type) {
+              case "any":
+                div.textContent = value;
+                break;
+              case "error":
+                div.style.color = "red";
+                div.innerHTML = value;
+                break;
+              case "plot":
+                try {
+                  Plotly.newPlot(div, e.result.data, e.result.layout, e.result.config)
+                } catch (error) {
+                  div.innerHTML = 'myError:'+ error.toString();
+                }
+                break;
+            }
+            pre.appendChild(div);
+            outputs.appendChild(pre);
+          }
+        });
+        break;
+      case "markdown":
+        const div = document.createElement("div");
+        div.innerHTML = md.render(out.text);
+        outputs.appendChild(div);
+        break;
+    }
+  });
   clearTimeout(timerSave);
   sessions[lastTab] = editor.state
   timerSave = setTimeout(saveSession, waitToSave, tabToSave)
@@ -192,12 +229,3 @@ function sendWorkToMathWorker(mathExpressoins) {
     mathWorker.postMessage(JSON.stringify(request))
   }
 }
-
-function formatOutput(x) {
-  switch (x.type) {
-    case "math":
-      return x.text;
-    case "markdown":
-      return md.render(x.text);
-  }
-}

package.json

@@ -12,7 +12,6 @@
     "vite": "^5.1.4"
   },
   "dependencies": {
-    "alpinejs": "^3.13.5",
     "codemirror": "^6.0.1",
     "github-markdown-css": "^5.5.1",
     "katex": "^0.16.9",

public/getWorker.js

@@ -1 +1 @@
-const mathWorker = new Worker("mathWorker.js");
+const mathWorker = new Worker("mathWorker.js", {type: "classic"});