add back matplotlib example

Author: rmorshea

docs/source/examples.rst

@@ -108,6 +108,16 @@ Slow internet may cause inconsistent frame pacing 😅
 .. interactive-widget:: snake_game
 
 
+Matplotlib Plot
+---------------
+
+.. literalinclude:: examples/matplotlib_plot.py
+
+Pick the polynomial coefficients (seperate each coefficient by a space) 🔢:
+
+.. interactive-widget:: matplotlib_plot
+
+
 Simple Dashboard
 ----------------
 

docs/source/examples/matplotlib_plot.py

@@ -0,0 +1,90 @@
+from io import BytesIO
+
+import matplotlib.pyplot as plt
+
+import idom
+from idom.widgets.html import image
+
+
+@idom.element
+async def PolynomialPlot():
+    coefficients, set_coefficients = idom.hooks.use_state([0])
+
+    x = [n for n in linspace(-1, 1, 50)]
+    y = [polynomial(value, coefficients) for value in x]
+
+    return idom.html.div(
+        plot(f"{len(coefficients)} Term Polynomial", x, y),
+        ExpandableNumberInputs(coefficients, set_coefficients),
+    )
+
+
+@idom.element
+async def ExpandableNumberInputs(values, set_values):
+    inputs = []
+    for i in range(len(values)):
+
+        def set_value_at_index(event, index=i):
+            new_value = float(event["value"] or 0)
+            set_values(values[:index] + [new_value] + values[index + 1 :])
+
+        inputs.append(poly_coef_input(i, set_value_at_index))
+
+    def add_input():
+        set_values(values + [0])
+
+    def del_input():
+        set_values(values[:-1])
+
+    return idom.html.div(
+        idom.html.div(
+            "add/remove term:",
+            idom.html.button({"onClick": lambda event: add_input()}, "+"),
+            idom.html.button({"onClick": lambda event: del_input()}, "-"),
+        ),
+        inputs,
+    )
+
+
+def plot(title, x, y):
+    fig, axes = plt.subplots()
+    axes.plot(x, y)
+    axes.set_title(title)
+    buffer = BytesIO()
+    fig.savefig(buffer, format="png")
+    plt.close(fig)
+    return image("png", buffer.getvalue())
+
+
+def poly_coef_input(index, callback):
+    return idom.html.div(
+        {"style": {"margin-top": "5px"}},
+        idom.html.label(
+            "C",
+            idom.html.sub(index),
+            " × X",
+            idom.html.sup(index),
+        ),
+        idom.html.input(
+            {
+                "type": "number",
+                "onChange": callback,
+            },
+        ),
+    )
+
+
+def polynomial(x, coefficients):
+    return sum(c * (x ** i) for i, c in enumerate(coefficients))
+
+
+def linspace(start, stop, n):
+    if n == 1:
+        yield stop
+        return
+    h = (stop - start) / (n - 1)
+    for i in range(n):
+        yield start + h * i
+
+
+display(PolynomialPlot)

docs/source/examples/simple_dashboard.py

@@ -14,12 +14,23 @@ async def RandomWalk():
     mu = idom.hooks.use_ref(0)
     sigma = idom.hooks.use_ref(1)
 
-    mu_inputs = number_inputs("Mean", mu.current, mu.set, (-1, 1, 0.01))
-    sigma_inputs = number_inputs(
-        "Standard Deviation", sigma.current, sigma.set, (0, 1, 0.01)
+    return idom.html.div(
+        RandomWalkGraph(mu, sigma),
+        idom.html.style(
+            """
+            .number-input-container {margin-bottom: 20px}
+            .number-input-container input {width: 48%;float: left}
+            .number-input-container input + input {margin-left: 4%}
+            """
+        ),
+        NumberInput("Mean", mu.current, mu.set, (-1, 1, 0.01)),
+        NumberInput("Standard Deviation", sigma.current, sigma.set, (0, 1, 0.01)),
     )
 
-    interval = use_interval(0.4)
+
+@idom.element
+async def RandomWalkGraph(mu, sigma):
+    interval = use_interval(0.5)
     data, set_data = idom.hooks.use_state([{"x": 0, "y": 0}] * 50)
 
     @use_async_effect
@@ -32,35 +43,22 @@ async def animate():
         }
         set_data(data[1:] + [next_data_point])
 
-    style = idom.html.style(
-        [
-            """
-            .number-inputs {margin-bottom: 20px}
-            .number-inputs input {width: 48%;float: left}
-            .number-inputs input + input {margin-left: 4%}
-            """
-        ]
-    )
+    return VictoryLine({"data": data, "style": {"parent": {"width": "500px"}}})
 
-    return idom.html.div(
-        VictoryLine({"data": data, "style": {"parent": {"width": "500px"}}}),
-        style,
-        mu_inputs,
-        sigma_inputs,
-    )
 
+@idom.element
+async def NumberInput(label, value, set_value_callback, domain):
+    minimum, maximum, step = domain
+    attrs = {"min": minimum, "max": maximum, "step": step}
 
-def number_inputs(label, value, callback, domain):
     value, set_value = idom.hooks.use_state(value)
 
     def update_value(value):
         set_value(value)
-        callback(value)
+        set_value_callback(value)
 
-    minimum, maximum, step = domain
-    attrs = {"min": minimum, "max": maximum, "step": step}
     return idom.html.fieldset(
-        {"class": "number-inputs"},
+        {"class": "number-input-container"},
         [idom.html.legend({"style": {"font-size": "medium"}}, label)],
         Input(update_value, "number", value, attributes=attrs, cast=float),
         Input(update_value, "range", value, attributes=attrs, cast=float),

scripts/README.md

@@ -0,0 +1,3 @@
+# Scripts
+
+All scripts should be run from the repository root.

docs/quick-run.sh scripts/quick-run.shdocs/quick-run.sh renamed to scripts/quick-run.sh

@@ -0,0 +1,33 @@
+import sys
+from pathlib import Path
+
+from idom.widgets.utils import hotswap
+from idom.server.sanic import PerClientStateServer
+
+here = Path(__file__).parent
+examples_dir = here.parent / "docs" / "source" / "examples"
+sys.path.insert(0, str(examples_dir))
+
+for file in examples_dir.iterdir():
+    if not file.is_file() or not file.suffix == ".py" or file.stem.startswith("_"):
+        continue
+
+
+if __name__ == "__main__":
+    ex_name = sys.argv[1]
+    example_file = examples_dir / (ex_name + ".py")
+
+    mount, element = hotswap()
+    server = PerClientStateServer(element)
+
+    with example_file.open() as f:
+        exec(
+            f.read(),
+            {
+                "display": mount,
+                "__file__": str(file),
+                "__name__": f"widgets.{file.stem}",
+            },
+        )
+
+    server.run("127.0.0.1", 5000)