A campsite bookings line with a range slider and period buttons

The table camps holds the monthly bookings at two campsites, Lake and Forest, over twelve months. With Plotly Express, draw a line chart with points, with the date (date) on the x-axis and the bookings (bookings) on the y-axis, splitting both the colors and the line dashes by campsite (with the default order of line_dash=, Lake is solid and Forest is dotted). Use names for the axis and legend names and site_colors for the colors, and use the title Monthly campsite bookings.

Write the x-axis ticks as three-letter English month names such as Jan, and add a range slider under the x-axis. Above the chart, put three period buttons in this order: 3M (three months back from the right end), 6M (six months back), and All (the starting range). Show the figure with fig.show(). Grading changes the bookings, the starting month, and the color dictionary and draws the chart again.

Starter code

import pandas as pd
import plotly.express as px

dates = pd.date_range("2026-01-01", periods=12, freq="MS")
camps = pd.DataFrame({
    "date": list(dates) * 2,
    "site": ["Lake"] * 12 + ["Forest"] * 12,
    "bookings": [12, 15, 28, 46, 70, 88, 120, 132, 75, 52, 20, 10, 20, 22, 35, 50, 64, 72, 98, 104, 80, 66, 38, 25],
})
names = {"date": "Month", "site": "Campsite", "bookings": "Bookings"}
site_colors = {"Lake": "#56B4E9", "Forest": "#009E73"}

# Write your code here