I want to render bar chart based on the marimo buttons like day,week,month and year but bar chart is not rendering

[Sonali-bapte]

Describe the bug

Attached is my notebook I am not getting any kind of error though but bar chart is not getting updated based on the buttons selected Please help me where I am going wrong

Environment

{
"marimo": "0.5.2",
"OS": "Windows",
"OS Version": "10",
"Processor": "Intel64 Family 6 Model 140 Stepping 1, GenuineIntel",
"Python Version": "3.11.2",
"Binaries": {
"Browser": "--",
"Node": "v17.9.1"
},
"Requirements": {
"click": "8.1.7",
"importlib-resources": "6.1.1",
"jedi": "0.19.1",
"markdown": "3.6",
"pymdown-extensions": "10.8.1",
"pygments": "2.18.0",
"tomlkit": "0.12.5",
"uvicorn": "0.29.0",
"starlette": "0.37.2",
"websocket": "missing",
"typing-extensions": "4.8.0",
"black": "23.12.1"
}
}

Code to reproduce

import marimo

__generated_with = "0.5.3-dev14"
app = marimo.App()

@app.cell
def __():
import altair as alt
from vega_datasets import data

source = data.wheat()
print(source)
base = alt.Chart(source).encode(x="year:O")

bar = base.mark_bar().encode(y="wheat:Q")

line = base.mark_line(color="red").encode(y="wages:Q")

(bar + line).properties(width=600)
return alt, bar, base, data, line, source

@app.cell
def __():
import datetime
import pandas as pd
import numpy as np

# Get today's date
today = datetime.date.today()

# Generate dates for previous day, previous week, previous month, and previous year
previous_day = today - datetime.timedelta(days=1)
previous_week = today - datetime.timedelta(weeks=1)
previous_month = today - pd.DateOffset(months=1)
previous_year = today.replace(year=today.year - 1)

# Generate dummy data for each date range
data_today = pd.DataFrame(
    {
        "Request_date": [today] * 100,
        "Total_response_time": np.random.randint(
            50, 150, 100
        ),  # Dummy response time data
    }
)

data_previous_day = pd.DataFrame(
    {
        "Request_date": [previous_day] * 100,
        "Total_response_time": np.random.randint(
            50, 150, 100
        ),  # Dummy response time data
    }
)

data_previous_week = pd.DataFrame(
    {
        "Request_date": [previous_week] * 100,
        "Total_response_time": np.random.randint(
            50, 150, 100
        ),  # Dummy response time data
    }
)

# Generate dates for each day of the previous month
dates_previous_month = pd.date_range(start=previous_month, end=today, freq="D")
data_previous_month = pd.DataFrame(
    {
        "Request_date": dates_previous_month,
        "Total_response_time": np.random.randint(
            50, 150, len(dates_previous_month)
        ),  # Dummy response time data
    }
)

data_previous_year = pd.DataFrame(
    {
        "Request_date": [previous_year] * 100,
        "Total_response_time": np.random.randint(
            50, 150, 100
        ),  # Dummy response time data
    }
)

# Concatenate all dummy datasets
dummy_data1 = pd.concat(
    [
        data_today,
        data_previous_day,
        data_previous_week,
        data_previous_month,
        data_previous_year,
    ],
    ignore_index=True,
)

# Print the first few rows of the dummy data
print(dummy_data1.head())
dummy_data1["Request_date"] = pd.to_datetime(
    dummy_data1["Request_date"], format="%Y-%m-%d"
)
# dummy_data1["Request_date"] = dummy_data1["Request_date"].dt.strftime(
#     "%Y-%m-%d"
# )
dummy_data1.info()
return (
    data_previous_day,
    data_previous_month,
    data_previous_week,
    data_previous_year,
    data_today,
    dates_previous_month,
    datetime,
    dummy_data1,
    np,
    pd,
    previous_day,
    previous_month,
    previous_week,
    previous_year,
    today,
)

@app.cell
def __(dummy_data1):
dummy_data1.info()
return

@app.cell
def __(dummy_data1):
# import datetime
# import pandas as pd
# import altair as alt
import marimo as mo

# from marimo.server import app as marimo_app

# Sample dummy data

# Initial filtered data
filtered_data = dummy_data1.copy()
return filtered_data, mo

@app.cell
def __(datetime, mo, set_end_date, set_start_date, update_chart):
# Function to generate date buttons
def date_button(label, days_delta):
today = datetime.datetime.now()
end_date = today - datetime.timedelta(days=days_delta)

    def handle_click(v):
        set_start_date(today)
        set_end_date(end_date)
        update_chart(today, end_date)
        return 1

    return mo.ui.button(
        label=label,
        on_click=handle_click,
    )


# Create buttons
button_prev_day = date_button("Previous Day", 1)
button_prev_week = date_button("Previous Week", 7)
button_prev_month = date_button(
    "Previous Month", 30
)  # Approximate for a month
button_prev_year = date_button("Previous Year", 365)
return (
    button_prev_day,
    button_prev_month,
    button_prev_week,
    button_prev_year,
    date_button,
)

@app.cell
def __():
# Functions to set start and end dates
def set_start_date(date):
# Logic to set the start date (e.g., updating a global variable or session state)
print(f"Start date set to: {date}")

def set_end_date(date):
    # Logic to set the end date (e.g., updating a global variable or session state)
    print(f"End date set to: {date}")
return set_end_date, set_start_date

@app.cell
def __(alt, dummy_data1, pd):
# Function to update the chart
def update_chart(start_date, end_date):

    # Convert dates to string format for filtering
    start_date_str = start_date.strftime("%Y-%m-%d")
    end_date_str = end_date.strftime("%Y-%m-%d")

    # Filter the data
    filtered_data = dummy_data1[
        (dummy_data1["Request_date"] >= end_date_str)
        & (dummy_data1["Request_date"] <= start_date_str)
    ]

    # Ensure the dates are in datetime format for Altair
    filtered_data["Request_date"] = pd.to_datetime(
        filtered_data["Request_date"]
    )

    print(f"Filtered data:\n{filtered_data}")

    bar_chart = (
        alt.Chart(filtered_data)
        .mark_bar()
        .encode(
            x=alt.X(
                "mean(Total_response_time):Q", title="Mean Total Response Time"
            ),
            y=alt.Y("Request_date:T", title="Request Date"),
        )
    )
return update_chart,

@app.cell
def __():
return

@app.cell
def __(alt, filtered_data, mo):
# Define the initial bar chart
mo.stop(len(filtered_data) == 0, "")
bar_chart = (
alt.Chart(filtered_data)
.mark_bar()
.encode(
x=alt.X(
"mean(Total_response_time):Q", title="Mean Total Response Time"
),
y=alt.Y("Request_date:T", title="Request Date"),
)
)

# Create the Marimo Altair chart component


# Define the layout using mo.hstack for buttons and mo.vstack for overall layout
return bar_chart,

@app.cell
def __():
return

@app.cell
def __(
bar_chart,
button_prev_day,
button_prev_month,
button_prev_week,
button_prev_year,
mo,
):
layout = mo.vstack(
[
mo.hstack(
[
button_prev_day,
button_prev_week,
button_prev_month,
button_prev_year,
]
),
mo.ui.altair_chart(bar_chart),
]
)

# Display the layout
layout
return layout,

if name == "main":
app.run()

[akshayka]

Can you provide a minimal reproducible example? https://stackoverflow.com/help/minimal-reproducible-example

It's not clear if this is a bug in marimo, or if there are just some concepts you need help understanding. In particular, it would help if your example were minimal.

[Sonali-bapte]

@akshayka I want to create a altair barchart which will update based on the buttons such as week or month here is my code:

below is the image of my notebook

also attaching .md file for it
notebook.md

I am stuck in last step of updating the chart I am getting filtered_data properly by selecting the button. e.g. previous_week
I am confused with the flow of execution. why filtered_data is not updating the bar chart

Please help

[Sonali-bapte]

Could any one please check and let me know what mistake I am making.. working on it since last 3 days

Waiting for your response.Thanks

[Sonali-bapte]

I want to use Marimo tool for production environment with a large amount of data going in and out. What do you suggest to explore more to go ahead ?

[mscolnick]

Going to move this to discussions as it is not a bug in the software