Line Plot

using Fugl
using Fugl: Text, LinePlotElement, SOLID, DASH, DOT

function MyApp()
    # Generate sample data for demonstration
    x_data = collect(0.0:0.1:10.0)
    y1_data = sin.(x_data)
    y2_data = cos.(x_data)
    y3_data = sin.(x_data .* 2) .* 0.5

    # Dark theme card style
    dark_card_style = ContainerStyle(
        background_color=Vec4f(0.15, 0.15, 0.18, 1.0),  # Dark background
        border_color=Vec4f(0.25, 0.25, 0.30, 1.0),      # Subtle border
        border_width=1.5f0,
        padding=12.0f0,
        corner_radius=6.0f0,
        anti_aliasing_width=1.0f0
    )

    # Dark theme title style
    dark_title_style = TextStyle(
        size_px=18,
        color=Vec4f(0.9, 0.9, 0.95, 1.0)  # Light text for titles
    )

    # Create multiple plot elements with dark theme compatible colors
    elements = [
        LinePlotElement(y1_data; x_data=x_data,
            color=Vec4{Float32}(0.4, 0.6, 0.9, 1.0),  # Bright blue for dark background
            width=3.0f0,
            line_style=SOLID,
            )
        LinePlotElement(y2_data; x_data=x_data,
            color=Vec4{Float32}(0.9, 0.4, 0.4, 1.0),  # Bright red for dark background
            width=2.5f0,
            line_style=DASH,
        )
        LinePlotElement(y3_data; x_data=x_data,
            color=Vec4{Float32}(0.4, 0.9, 0.4, 1.0),  # Bright green for dark background
            width=2.0f0,
            line_style=DOT,
        )
    ]

    Card(
        "Dark Theme Plot Example",
        Plot(
            elements,
            PlotStyle(
                background_color=Vec4{Float32}(0.08, 0.10, 0.14, 1.0),  # Very dark background matching TextBox
                grid_color=Vec4{Float32}(0.25, 0.25, 0.30, 1.0),        # Subtle grid matching border colors
                axis_color=Vec4{Float32}(0.9, 0.9, 0.95, 1.0),          # Light axes matching text color
                show_grid=true,
                padding=54.0f0,
                x_label="Time (seconds)",
                y_label="Amplitude",
                show_x_label=true,
                show_y_label=true,
            )
        ),
        style=dark_card_style,
        title_style=dark_title_style
    )
end

screenshot(MyApp, "linePlot.png", 812, 400);

Fixed Axis Bounds Example

using Fugl
using Fugl: Text, LinePlotElement, SOLID

function MyApp()
    # Generate sample data that extends beyond our desired view
    x_data = collect(-2.0:0.1:12.0)
    y_data = sin.(x_data) .* exp.(-x_data ./ 10)

    # Create plot element
    elements = [
        LinePlotElement(y_data; x_data=x_data,
            color=Vec4{Float32}(0.0, 0.6, 0.9, 1.0),
            width=2.5f0,
            line_style=SOLID,
        )
    ]

    IntrinsicColumn(
        [
            IntrinsicHeight(Container(Text("Fixed Axis Bounds Example"))),
            Container(
                Plot(
                    elements,
                    PlotStyle(
                        background_color=Vec4{Float32}(0.98, 0.98, 0.98, 1.0),
                        grid_color=Vec4{Float32}(0.5, 0.5, 0.5, 1.0),
                        axis_color=Vec4{Float32}(0.0, 0.0, 0.0, 1.0),
                        show_grid=true,
                        padding=50.0f0
                    ),
                    PlotState(
                        # Only show x from 0 to 8, y from -0.8 to 1.0
                        x_min=0.0f0,
                        x_max=8.0f0,
                        y_min=-0.8f0,
                        y_max=1.0f0
                    ),
                )
            ),
            IntrinsicHeight(Container(Text("View: X=[0,8], Y=[-0.8,1.0] (data extends beyond view)"))),
        ], padding=0.0, spacing=0.0
    )
end

screenshot(MyApp, "fixedBoundsPlot.png", 812, 400);

State Management Example

using Fugl
using Fugl: Text, TextButton, LinePlotElement, SOLID

function MyApp()
    # Generate sample data
    x_data = collect(0.0:0.2:10.0)
    y_data = sin.(x_data)

    elements = AbstractPlotElement[
        LinePlotElement(y_data; x_data=x_data,
        color=Vec4{Float32}(0.8, 0.2, 0.6, 1.0),
        width=3.0f0,
        line_style=SOLID,
        )
    ]

    # Create simple plot state for zoom control with initial view bounds
    plot_state = Ref(PlotState())

    # Define plot style with initial view
    plot_style = PlotStyle(
        background_color=Vec4{Float32}(0.95, 0.95, 0.95, 1.0),
        grid_color=Vec4{Float32}(0.8, 0.8, 0.8, 1.0),
        axis_color=Vec4{Float32}(0.0, 0.0, 0.0, 1.0),
        show_grid=true,
        padding=40.0f0
    )

    IntrinsicColumn([
            IntrinsicHeight(Container(Text("State Management Example"))),

            # Plot with user-managed state - elements and bounds from state
            Container(
                Plot(
                    elements,              # Elements define what to plot
                    plot_style,            # Style defines visual appearance
                    plot_state[],         # State contains bounds and zoom info
                    (new_state) -> plot_state[] = new_state
                )
            ),
        ], padding=0.0, spacing=0.0)
end

screenshot(MyApp, "stateManagementPlot.png", 812, 500);