Timing for the calendar buttons and requests 

# Default date values
today = datetime.today().strftime('%Y-%m-%d')
yesterday = (datetime.today() - timedelta(days=1)).strftime('%Y-%m-%d')


# Function to fetch data from API
async def fetch_api_data(from_date, to_date):
    # Step 1: Login to the API and fetch the token
    login_url = "https://app.century.ae:10100/Analytics/login"
    login_data = {"Username": "admin", "Password": "xz8vF5RSt&&4%AylG9j^Ja9q"}

    req_obj = requests.post(login_url, data=login_data)
    tokens = json.loads(req_obj.text)

    # Step 2: Use the token to fetch the bubble chart data
    data_url = "https://app.century.ae:10100/analytics/UserBehaviour"
    headers = {"Authorization-Token": tokens['Token']}
    params = {"Server": "LIVE", "From": from_date, "To": to_date}

    req2 = requests.get(data_url, headers=headers, params=params, stream=True)
    response = req2.json() if req2.status_code == 200 else {}

    return response


def generate_plotly_chart(bubble_data):
    trace = go.Scatter(
        x=bubble_data['x'],
        y=bubble_data['y'],
        mode='markers',
        marker=dict(
            size=bubble_data['size'],
            color=bubble_data['color'],
            sizemode='area',
            sizeref=2.*max(bubble_data['size'])/(50.**2),
            sizemin=4,
	    shorgrid = false

        )
    )
    figure = go.Figure(trace)
    figure.update_layout(title='Bubble Chart')
    return figure.to_json()


# Show dashboard function
async def show_dashboard(q: Q, bubble_data):
    form_card = ui.form_card(
        box=ui.box(zone='new_zone', order=1, width='50%'),
        title='',
        items=[
            ui.inline(
                items=[
                    ui.buttons([
                        ui.button(name='Date', label='LAST 24 HOURS', primary=True, onclick='Date'),
                        ui.button(name='Date_2', label='LAST 7 DAYS', primary=True, onclick='Date_2'),
                        ui.button(name='Date_3', label='LAST 30 DAYS', primary=True, onclick='Date_3')
                    ]),
                ], justify='center'
            ),
            ui.inline(
                items=[
                    ui.date_picker(name='start_date', label='Start Date', value=yesterday),
                    ui.date_picker(name='end_date', label='End Date', value=today),
                    ui.button(name='submit_button', label='Submit', primary=True)
                ], justify='center'
            ),
            ui.plotly_chart(name='bubble_chart', content=generate_plotly_chart(bubble_data))
        ]
    )
    


initial_response = await fetch_api_data(yesterday, today)

# Extract the bubble data from the API response
top_searched_instruments = initial_response.get("TopSearchedInsruments", [])
bubble_data = {
    'product': [item['Product'] for item in top_searched_instruments],
    'size': [item['Hits'] for item in top_searched_instruments],
    'color': ['#FFA500', '#FFC107', '#FFFFE0', '#FFD700', '#D3D3D3'],
    'x': [0, 0, -0.50, 0.65, 0.55],
    'y': [0.35, -0.55, -0.15, -0.1, -0.7]
}



async def handle_submit_button(q: Q):
    # Fetch data based on selected dates
    start_date = q.args.start_date or yesterday
    end_date = q.args.end_date or today
    
    # Fetch API data with selected dates
    api_response = await fetch_api_data(start_date, end_date)
    
    # Extract bubble data from API response
    top_searched_instruments = api_response.get("TopSearchedInsruments", [])
    bubble_data = {
        'product': [item['Product'] for item in top_searched_instruments],
        'size': [item['Hits'] for item in top_searched_instruments],
        'color': ['#FFA500', '#FFC107', '#FFFFE0', '#FFD700', '#D3D3D3'],
        'x': [0, 0, -0.50, 0.65, 0.55],
        'y': [0.35, -0.55, -0.15, -0.1, -0.7]
    }
    
    # Show the updated dashboard with the new bubble data
    await show_dashboard(q, bubble_data)




del q.page['new_zone'] for show user_tab and for show position