Use plotly basic package, mount with onMount

Loading it with <svelte:head> meant that it was being fetched
everytime user changed the page. Now it'll be bundled with bundle.js
and we use onMount to solve it after everything has been
loaded/rendered.

2 files changed, 133 insertions, 158 deletions

diff --git a/src/algorithms/line-drawing/Bresenham.svelte b/src/algorithms/line-drawing/Bresenham.svelte
index e3eaff1..eb2afd6 100644
--- a/src/algorithms/line-drawing/Bresenham.svelte
+++ b/src/algorithms/line-drawing/Bresenham.svelte
@@ -1,15 +1,8 @@
-<svelte:head>
-  <script src="./plotly/plotly.min.js" on:load={plotlyLoaded}></script>
-</svelte:head>
 <script>
-  let solved = false;
-  let invalidInput = false;
+  import { onMount } from "svelte";
+  import Plotly from "plotly.js-basic-dist-min";
 
-  let plotlyReady = false;
-  const plotlyLoaded = () => {
-    plotlyReady = true;
-    solve();
-  }
+  let invalidInput = false;
 
   let x0 = 0, y0 = 0, x1 = 4, y1 = 4;
   let dx, dy, step;
@@ -39,36 +32,37 @@
     y_axis = [y0,];
 
     for (let idx = 0; idx < dx; idx++) {
-        // x_axis.at(-1) doesn't work for some reason.
-        x_axis.push(x_axis[x_axis.length - 1] + 1);
-        if (p < 0) {
-            y_axis.push(y_axis[y_axis.length - 1]);
-            p += 2 * dy;
-        } else {
-            y_axis.push(y_axis[y_axis.length - 1] + 1);
-            p += step;
-        }
+      // x_axis.at(-1) doesn't work for some reason.
+      x_axis.push(x_axis[x_axis.length - 1] + 1);
+      if (p < 0) {
+        y_axis.push(y_axis[y_axis.length - 1]);
+        p += 2 * dy;
+      } else {
+        y_axis.push(y_axis[y_axis.length - 1] + 1);
+        p += step;
+      }
       p_vals.push(p);
     }
 
     // Plot the chart.
-    if (plotlyReady)
-      Plotly.newPlot('algoChart', [{
-        x: x_axis,
-        y: y_axis,
-        type: 'lines',
-        name: 'Bresenham'
-      }]);
-
-    solved = true;
+    Plotly.newPlot('algoChart', [{
+      x: x_axis,
+      y: y_axis,
+      type: 'lines',
+      name: 'Bresenham'
+    }]);
   }
+
+  onMount(() => {
+    solve();
+  });
 </script>
 
 <h2>Bresenham</h2>
 <form class="points">
   {#if invalidInput === true}
     <p class="note">
-      Slope must be between 0 to 1.
+      Invalid Input: Slope must be between 0 to 1.
     </p>
   {/if}
   <label for="x0">x0: </label>
@@ -84,75 +78,70 @@
   <button type="button" on:click={solve}>Solve</button>
 </form>
 
-{#if solved === true}
-  <hr>
-  <h3>Solution</h3>
+<hr>
+<h3>Solution</h3>
 
+{#if invalidInput === true}
+  <p class="note">
+    Inavlid Input: Slope must be between 0 to 1.
+  </p>
+{/if}
+
+<table>
+  <thead>
+    <tr>
+      <th>&nbsp;</th>
+      <th>Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>dx = <code>|x1 - x0|</code></td>
+      <td>{dx}</td>
+    </tr>
+    <tr>
+      <td>dy = <code>|y1 - y0|</code></td>
+      <td>{dy}</td>
+    </tr>
+    <tr>
+      <td>step = <code>|2 * (dy - dx)|</code></td>
+      <td>{step}</td>
+    </tr>
+    <tr>
+      <td><code>2 * dy</code></td>
+      <td>{2 * dy}</td>
+    </tr>
+  </tbody>
+</table>
+
+<details>
+  <summary>
+    Table
+  </summary>
   <table>
     <thead>
       <tr>
-        <th>&nbsp;</th>
-        <th>Value</th>
+        <th>Iteration (k)</th>
+        <th>P<sub>k</sub></th>
+        <th>x<sub>k + 1</sub></th>
+        <th>y<sub>k + 1</sub></th>
       </tr>
     </thead>
+
     <tbody>
+      {#each x_axis as _, i}
         <tr>
-          <td>dx = <code>|x1 - x0|</code></td>
-          <td>{dx}</td>
-        </tr>
-        <tr>
-          <td>dy = <code>|y1 - y0|</code></td>
-          <td>{dy}</td>
-        </tr>
-        <tr>
-          <td>step = <code>|2 * (dy - dx)|</code></td>
-          <td>{step}</td>
-        </tr>
-        <tr>
-          <td><code>2 * dy</code></td>
-          <td>{2 * dy}</td>
-        </tr>
-        <tr>
-          <td>p<sub>0</sub></td>
-          <td>{p_vals[0]}</td>
+          <td>{i}</td>
+          <td>{p_vals[i]}</td>
+          <td>{x_axis[i]}</td>
+          <td>{y_axis[i]}</td>
         </tr>
+      {/each}
     </tbody>
   </table>
+</details>
 
-  <details>
-    <summary>
-      Table
-    </summary>
-    <table>
-      <thead>
-        <tr>
-          <th>Iteration (k)</th>
-          <th>P<sub>k</sub></th>
-          <th>x<sub>k + 1</sub></th>
-          <th>y<sub>k + 1</sub></th>
-        </tr>
-      </thead>
-
-      <tbody>
-        {#each x_axis as _, i}
-          <tr>
-            <td>{i}</td>
-            <td>{p_vals[i]}</td>
-            <td>{x_axis[i]}</td>
-            <td>{y_axis[i]}</td>
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  </details>
-
-  <h3>Graph</h3>
-  {#if plotlyReady === false}
-    <p class="note">
-      Cannot plot graph: Plotly is not ready.
-    </p>
-  {/if}
-{/if}
+<h3>Graph</h3>
 <div id="algoChart"></div>
 
 <style>
diff --git a/src/algorithms/line-drawing/DDA.svelte b/src/algorithms/line-drawing/DDA.svelte
index c9f62a0..379e965 100644
--- a/src/algorithms/line-drawing/DDA.svelte
+++ b/src/algorithms/line-drawing/DDA.svelte
@@ -1,14 +1,6 @@
-<svelte:head>
-  <script src="./plotly/plotly.min.js" on:load={plotlyLoaded}></script>
-</svelte:head>
 <script>
-  let solved = false;
-
-  let plotlyReady = false;
-  const plotlyLoaded = () => {
-    plotlyReady = true;
-    dda();
-  }
+  import { onMount } from "svelte";
+  import Plotly from "plotly.js-basic-dist-min";
 
   let x0 = 0, y0 = 0, x1 = 4, y1 = 4;
   let dx, dy;
@@ -47,16 +39,17 @@
     y_axis_floored = y_axis.map(function(y) {return Math.round(y)});
 
     // Plot the chart.
-    if (plotlyReady)
-      Plotly.newPlot('algoChart', [{
-        x: x_axis_floored,
-        y: y_axis_floored,
-        type: 'lines',
-        name: 'DDA'
-      }]);
-
-    solved = true;
+    Plotly.newPlot('algoChart', [{
+      x: x_axis_floored,
+      y: y_axis_floored,
+      type: 'lines',
+      name: 'DDA'
+    }]);
   }
+
+  onMount(() => {
+    dda();
+  });
 </script>
 
 <h2>Digital differential analyzer</h2>
@@ -74,61 +67,54 @@
   <button type="button" on:click={dda}>Solve</button>
 </form>
 
-{#if solved === true && steps > 0}
-  <hr>
-  <h3>Solution</h3>
-
-  <label for="dx">dx = <code>|x1 - x0|</code>: </label>
-  <input type="text" id="dx" name="dx" value={dx} disabled><br>
-  <label for="dy">dy = <code>|y1 - y0|</code>: </label>
-  <input type="text" id="dy" name="dy" value={dy} disabled>
-  <br>
-
-  <label for="steps">steps: </label>
-  <input type="text" id="steps" name="steps" value={steps} disabled>
-  <br>
-
-  <label for="x_inc">x Increment = <code>dx / steps</code>: </label>
-  <input type="text" id="x_inc" name="x_inc" value={x_inc} disabled><br>
-  <label for="y_inc">y Increment = <code>dy / steps</code>: </label>
-  <input type="text" id="y_inc" name="y_inc" value={y_inc} disabled>
-
-  <details>
-    <summary>
-      Table
-    </summary>
-    <table>
-      <thead>
+<hr>
+<h3>Solution</h3>
+
+<label for="dx">dx = <code>|x1 - x0|</code>: </label>
+<input type="text" id="dx" name="dx" value={dx} disabled><br>
+<label for="dy">dy = <code>|y1 - y0|</code>: </label>
+<input type="text" id="dy" name="dy" value={dy} disabled>
+<br>
+
+<label for="steps">steps: </label>
+<input type="text" id="steps" name="steps" value={steps} disabled>
+<br>
+
+<label for="x_inc">x Increment = <code>dx / steps</code>: </label>
+<input type="text" id="x_inc" name="x_inc" value={x_inc} disabled><br>
+<label for="y_inc">y Increment = <code>dy / steps</code>: </label>
+<input type="text" id="y_inc" name="y_inc" value={y_inc} disabled>
+
+<details>
+  <summary>
+    Table
+  </summary>
+  <table>
+    <thead>
+      <tr>
+        <th>Iteration</th>
+        <th>x</th>
+        <th>y</th>
+        <th>x (plot)</th>
+        <th>y (plot)</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      {#each x_axis as _, i}
         <tr>
-          <th>Iteration</th>
-          <th>x</th>
-          <th>y</th>
-          <th>x (plot)</th>
-          <th>y (plot)</th>
+          <td>{i + 1}</td>
+          <td>{x_axis[i]}</td>
+          <td>{y_axis[i]}</td>
+          <td>{x_axis_floored[i]}</td>
+          <td>{y_axis_floored[i]}</td>
         </tr>
-      </thead>
-
-      <tbody>
-        {#each x_axis as _, i}
-          <tr>
-            <td>{i + 1}</td>
-            <td>{x_axis[i]}</td>
-            <td>{y_axis[i]}</td>
-            <td>{x_axis_floored[i]}</td>
-            <td>{y_axis_floored[i]}</td>
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  </details>
-
-  <h3>Graph</h3>
-  {#if plotlyReady === false}
-    <p class="note">
-      Cannot plot graph: Plotly is not ready.
-    </p>
-  {/if}
-{/if}
+      {/each}
+    </tbody>
+  </table>
+</details>
+
+<h3>Graph</h3>
 <div id="algoChart"></div>
 
 <style>