feat(flet-charts): RadarChart

.github/workflows/ci.yml

@@ -619,8 +619,7 @@ jobs:
           patch_toml_versions "$PYPROJECT" "$PYPI_VER"
 
           rm -rf dist
-          uv build --package "$PACKAGE" --wheel
-          uv build --package "$PACKAGE" --sdist
+          uv build --package "$PACKAGE"
 
       - name: Upload artifacts
         uses: actions/upload-artifact@v4

sdk/python/Taskfile.yml

@@ -106,7 +106,7 @@ tasks:
       - kill -9 $(lsof -ti :8550)
 
   extensions-pre-commit-install:
-    desc: "Installs pre-commit hooks of all extensions, assuming they are present in the currently active uv-workspace."
+    desc: "Installs pre-commit hooks of all extensions."
     aliases:
       - pc-extensions
       - extensions-pre-commit
@@ -125,8 +125,3 @@ tasks:
       - uv run --package flet-rive pre-commit install
       - uv run --package flet-video pre-commit install
       - uv run --package flet-webview pre-commit install
-
-#  serve-extensions:
-#    desc: "Serves all extensions, assuming they are present in the currently active uv-workspace."
-#    cmds:
-#      - uv run --active --package flet-audio --directory path/to/flet-audio mkdocs serve

sdk/python/examples/controls/charts/bar_chart/example_1.py

@@ -1,6 +1,5 @@
-import flet_charts as fch
-
 import flet as ft
+import flet_charts as fch
 
 
 def main(page: ft.Page):

sdk/python/examples/controls/charts/candlestick_chart/example_1.py

@@ -1,6 +1,5 @@
-import flet_charts as ftc
-
 import flet as ft
+import flet_charts as ftc
 
 CANDLE_DATA = [
     ("Mon", 24.8, 28.6, 23.9, 27.2),
@@ -100,7 +99,6 @@ def handle_event(e: ftc.CandlestickChartEvent):
             horizontal_alignment=ftc.HorizontalAlignment.CENTER,
             fit_inside_horizontally=True,
         ),
-        handle_built_in_touches=True,
         on_event=handle_event,
     )
 

sdk/python/examples/controls/charts/matplotlib_chart/3d.py

@@ -0,0 +1,36 @@
+import logging
+
+import flet_charts
+import matplotlib.pyplot as plt
+import numpy as np
+
+import flet as ft
+
+logging.basicConfig(level=logging.INFO)
+
+
+def main(page: ft.Page):
+    plt.style.use("_mpl-gallery")
+
+    # Make data for a double helix
+    n = 50
+    theta = np.linspace(0, 2 * np.pi, n)
+    x1 = np.cos(theta)
+    y1 = np.sin(theta)
+    z1 = np.linspace(0, 1, n)
+    x2 = np.cos(theta + np.pi)
+    y2 = np.sin(theta + np.pi)
+    z2 = z1
+
+    # Plot with defined figure size
+    fig, ax = plt.subplots(subplot_kw={"projection": "3d"}, figsize=(8, 6))
+    ax.fill_between(x1, y1, z1, x2, y2, z2, alpha=0.5)
+    ax.plot(x1, y1, z1, linewidth=2, color="C0")
+    ax.plot(x2, y2, z2, linewidth=2, color="C0")
+
+    ax.set(xticklabels=[], yticklabels=[], zticklabels=[])
+
+    page.add(flet_charts.MatplotlibChartWithToolbar(figure=fig))
+
+
+ft.run(main)

sdk/python/examples/controls/charts/matplotlib_chart/animate.py

@@ -0,0 +1,56 @@
+import logging
+
+import flet_charts
+import matplotlib.pyplot as plt
+import numpy as np
+
+import flet as ft
+
+logging.basicConfig(level=logging.INFO)
+
+state = {}
+
+
+def main(page: ft.Page):
+    import matplotlib.animation as animation
+
+    # Fixing random state for reproducibility
+    np.random.seed(19680801)
+
+    def random_walk(num_steps, max_step=0.05):
+        """Return a 3D random walk as (num_steps, 3) array."""
+        start_pos = np.random.random(3)
+        steps = np.random.uniform(-max_step, max_step, size=(num_steps, 3))
+        walk = start_pos + np.cumsum(steps, axis=0)
+        return walk
+
+    def update_lines(num, walks, lines):
+        for line, walk in zip(lines, walks):
+            line.set_data_3d(walk[:num, :].T)
+        return lines
+
+    # Data: 40 random walks as (num_steps, 3) arrays
+    num_steps = 30
+    walks = [random_walk(num_steps) for index in range(40)]
+
+    # Attaching 3D axis to the figure
+    fig = plt.figure()
+    ax = fig.add_subplot(projection="3d")
+
+    # Create lines initially without data
+    lines = [ax.plot([], [], [])[0] for _ in walks]
+
+    # Setting the Axes properties
+    ax.set(xlim3d=(0, 1), xlabel="X")
+    ax.set(ylim3d=(0, 1), ylabel="Y")
+    ax.set(zlim3d=(0, 1), zlabel="Z")
+
+    # Creating the Animation object
+    state["anim"] = animation.FuncAnimation(
+        fig, update_lines, num_steps, fargs=(walks, lines), interval=100
+    )
+
+    page.add(flet_charts.MatplotlibChartWithToolbar(figure=fig, expand=True))
+
+
+ft.run(main)

sdk/python/examples/controls/charts/matplotlib_chart/example_1.py → sdk/python/examples/controls/charts/matplotlib_chart/bar_chart.py

@@ -4,8 +4,6 @@
 
 import flet as ft
 
-matplotlib.use("svg")
-
 
 def main(page: ft.Page):
     fig, ax = plt.subplots()

sdk/python/examples/controls/charts/matplotlib_chart/handle_events.py

@@ -0,0 +1,103 @@
+import flet_charts
+import matplotlib.pyplot as plt
+import numpy as np
+
+import flet as ft
+
+state = {}
+
+
+def main(page: ft.Page):
+    # Fixing random state for reproducibility
+    np.random.seed(19680801)
+
+    X = np.random.rand(100, 200)
+    xs = np.mean(X, axis=1)
+    ys = np.std(X, axis=1)
+
+    fig, (ax, ax2) = plt.subplots(2, 1)
+    ax.set_title("click on point to plot time series")
+    (line,) = ax.plot(xs, ys, "o", picker=True, pickradius=5)
+
+    class PointBrowser:
+        """
+        Click on a point to select and highlight it -- the data that
+        generated the point will be shown in the lower Axes.  Use the 'n'
+        and 'p' keys to browse through the next and previous points
+        """
+
+        def __init__(self):
+            self.lastind = 0
+
+            self.text = ax.text(
+                0.05, 0.95, "selected: none", transform=ax.transAxes, va="top"
+            )
+            (self.selected,) = ax.plot(
+                [xs[0]], [ys[0]], "o", ms=12, alpha=0.4, color="yellow", visible=False
+            )
+
+        def on_press(self, event):
+            if self.lastind is None:
+                return
+            if event.key not in ("n", "p"):
+                return
+            inc = 1 if event.key == "n" else -1
+
+            self.lastind += inc
+            self.lastind = np.clip(self.lastind, 0, len(xs) - 1)
+            self.update()
+
+        def on_pick(self, event):
+            if event.artist != line:
+                return True
+
+            N = len(event.ind)
+            if not N:
+                return True
+
+            # the click locations
+            x = event.mouseevent.xdata
+            y = event.mouseevent.ydata
+
+            distances = np.hypot(x - xs[event.ind], y - ys[event.ind])
+            indmin = distances.argmin()
+            dataind = event.ind[indmin]
+
+            self.lastind = dataind
+            self.update()
+
+        def update(self):
+            if self.lastind is None:
+                return
+
+            dataind = self.lastind
+
+            ax2.clear()
+            ax2.plot(X[dataind])
+
+            ax2.text(
+                0.05,
+                0.9,
+                f"mu={xs[dataind]:1.3f}\nsigma={ys[dataind]:1.3f}",
+                transform=ax2.transAxes,
+                va="top",
+            )
+            ax2.set_ylim(-0.5, 1.5)
+            self.selected.set_visible(True)
+            self.selected.set_data([xs[dataind]], [ys[dataind]])
+
+            self.text.set_text("selected: %d" % dataind)
+            fig.canvas.draw()
+
+    browser = PointBrowser()
+    state["browser"] = browser
+
+    fig.canvas.mpl_connect("pick_event", browser.on_pick)
+    fig.canvas.mpl_connect("key_press_event", browser.on_press)
+
+    # plt.show()
+
+    page.add(flet_charts.MatplotlibChartWithToolbar(figure=fig, expand=True))
+
+
+ft.run(main)

sdk/python/examples/controls/charts/matplotlib_chart/example_2.py → sdk/python/examples/controls/charts/matplotlib_chart/toolbar.py

@@ -5,8 +5,6 @@
 
 import flet as ft
 
-matplotlib.use("svg")
-
 
 def main(page: ft.Page):
     # Fixing random state for reproducibility
@@ -33,7 +31,7 @@ def main(page: ft.Page):
 
     fig.tight_layout()
 
-    page.add(fch.MatplotlibChart(figure=fig, expand=True))
+    page.add(fch.MatplotlibChartWithToolbar(figure=fig, expand=True))
 
 
 ft.run(main)

sdk/python/examples/controls/charts/radar_chart/example_1.py

@@ -0,0 +1,61 @@
+import flet as ft
+import flet_charts as fch
+
+
+def main(page: ft.Page):
+    page.title = "Radar chart"
+    page.padding = 20
+    page.vertical_alignment = page.horizontal_alignment = "center"
+    page.theme_mode = ft.ThemeMode.LIGHT
+
+    categories = ["macOS", "Linux", "Windows"]
+
+    page.add(
+        fch.RadarChart(
+            expand=True,
+            titles=[fch.RadarChartTitle(text=label) for label in categories],
+            center_min_value=True,
+            tick_count=4,
+            ticks_text_style=ft.TextStyle(size=20, color=ft.Colors.ON_SURFACE),
+            title_text_style=ft.TextStyle(
+                size=24, weight=ft.FontWeight.BOLD, color=ft.Colors.ON_SURFACE
+            ),
+            on_event=lambda e: print(e.type),
+            data_sets=[
+                fch.RadarDataSet(
+                    fill_color=ft.Colors.with_opacity(0.2, ft.Colors.DEEP_PURPLE),
+                    border_color=ft.Colors.DEEP_PURPLE,
+                    entry_radius=4,
+                    entries=[
+                        fch.RadarDataSetEntry(300),
+                        fch.RadarDataSetEntry(50),
+                        fch.RadarDataSetEntry(250),
+                    ],
+                ),
+                fch.RadarDataSet(
+                    fill_color=ft.Colors.with_opacity(0.15, ft.Colors.PINK),
+                    border_color=ft.Colors.PINK,
+                    entry_radius=4,
+                    entries=[
+                        fch.RadarDataSetEntry(250),
+                        fch.RadarDataSetEntry(100),
+                        fch.RadarDataSetEntry(200),
+                    ],
+                ),
+                fch.RadarDataSet(
+                    fill_color=ft.Colors.with_opacity(0.12, ft.Colors.CYAN),
+                    border_color=ft.Colors.CYAN,
+                    entry_radius=4,
+                    entries=[
+                        fch.RadarDataSetEntry(200),
+                        fch.RadarDataSetEntry(150),
+                        fch.RadarDataSetEntry(50),
+                    ],
+                ),
+            ],
+        )
+    )
+
+
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/charts/scatter_chart/example_1.py

@@ -1,8 +1,7 @@
 import random
 
-import flet_charts as ftc
-
 import flet as ft
+import flet_charts as ftc
 
 
 class MySpot(ftc.ScatterChartSpot):
@@ -20,6 +19,7 @@ def __init__(
             radius=radius,
             color=color,
             show_tooltip=show_tooltip,
+            selected=y == 43,
         )
 
 

sdk/python/packages/flet-charts/README.md

@@ -41,10 +41,11 @@ For examples, see [these](https://github.com/flet-dev/flet/tree/main/sdk/python/
 
 ### Available charts
 
-- `BarChart`
-- `CandlestickChart`
-- `LineChart`
-- `MatplotlibChart`
-- `PieChart`
-- `PlotlyChart`
-- `ScatterChart`
+- [`BarChart`](https://docs.flet.dev/charts/bar_chart/)
+- [`CandlestickChart`](https://docs.flet.dev/charts/candlestick_chart/)
+- [`LineChart`](https://docs.flet.dev/charts/line_chart/)
+- [`MatplotlibChart`](https://docs.flet.dev/charts/matplotlib_chart/)
+- [`PieChart`](https://docs.flet.dev/charts/pie_chart/)
+- [`PlotlyChart`](https://docs.flet.dev/charts/plotly_chart/)
+- [`RadarChart`](https://docs.flet.dev/charts/radar_chart/)
+- [`ScatterChart`](https://docs.flet.dev/charts/scatter_chart/)