line-drawing/dda: Print chart after solving

2 files changed, 74 insertions, 32 deletions

diff --git a/public/global.css b/public/global.css
index 70859df..172d08b 100644
--- a/public/global.css
+++ b/public/global.css
@@ -126,3 +126,8 @@ tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th {
     background-color: var(--bg-dim);
 }
 td, th { padding: .25em .5em; border: 1px solid var(--bg-alt); }
+
+.note {
+    background-color: var(--cyan-subtle-bg);
+    padding: 0 0.4ch;
+}
diff --git a/src/algorithms/line-drawing/DDA.svelte b/src/algorithms/line-drawing/DDA.svelte
index b2cc558..fe5e8e5 100644
--- a/src/algorithms/line-drawing/DDA.svelte
+++ b/src/algorithms/line-drawing/DDA.svelte
@@ -1,6 +1,12 @@
+<svelte:head>
+  <script src="https://andinus.unfla.me/resources/js/plotly/plotly.min.js" on:load={plotlyLoaded}></script>
+</svelte:head>
 <script>
   let solved = false;
 
+  let plotlyReady = false;
+  const plotlyLoaded = () => plotlyReady = true;
+
   let x0 = 0, y0 = 0, x1 = 4, y1 = 4;
   let dx, dy;
 
@@ -37,72 +43,103 @@
     }
     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;
   }
-
-  // Solve with prefilled values.
-  dda();
 </script>
 
 <h2>Digital differential analyzer</h2>
 <form class="points">
   <label for="x0">x0: </label>
-  <input type="number" id="x0" name="x0" bind:value={x0}>&nbsp;
+  <input type="number" id="x0" name="x0" on:change={dda} bind:value={x0}>&nbsp;
   <label for="y0">y0: </label>
-  <input type="number" id="y0" name="y0" bind:value={y0}>
+  <input type="number" id="y0" name="y0" on:change={dda} bind:value={y0}>
   <br>
   <label for="x1">x1: </label>
-  <input type="number" id="x1" name="x1" bind:value={x1}>&nbsp;
+  <input type="number" id="x1" name="x1" on:change={dda} bind:value={x1}>&nbsp;
   <label for="y1">y1: </label>
-  <input type="number" id="y1" name="y1" bind:value={y1}>
+  <input type="number" id="y1" name="y1" on:change={dda} bind:value={y1}>
   <br>
   <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>
-  <hr>
+  <br>
 
   <label for="steps">steps: </label>
   <input type="text" id="steps" name="steps" value={steps} disabled>
-  <hr>
+  <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>
-  <hr>
 
-  <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}
+  <details>
+    <summary>
+      Table
+    </summary>
+    <table>
+      <thead>
         <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>
+          <th>Iteration</th>
+          <th>x</th>
+          <th>y</th>
+          <th>x (plot)</th>
+          <th>y (plot)</th>
         </tr>
-      {/each}
-    </tbody>
-
-  </table>
+      </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>
+
+
+  {#if plotlyReady === false}
+    <p class="note">
+      Cannot plot graph: Plotly is not ready.
+    </p>
+  {/if}
 {/if}
 
+<div id="algoChart"></div>
+
 <style>
   hr { color: var(--bg-hl-alt-intense); }
+  button {
+    margin: .8em;
+    padding: 0.4em 1.2em;
+    width: 100%;
+  }
+  details {
+    border: 1px solid var(--bg-alt);
+    border-radius: 4px;
+    padding: 0.8em;
+    margin: 1em;
+  }
 </style>